From 1cd57aa039fef316ac652f5fe678e505107d3c5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Sun, 13 Oct 2024 09:46:56 +0200 Subject: [PATCH] fix: fix visual glitches when no branch is specified --- .../graphql/__generated__/resolver-types.ts | 8 +++--- .../src/graphql/__generated__/schema.gql | 4 +-- apps/backend/src/graphql/definitions/Build.ts | 4 +-- .../graphql/definitions/ScreenshotBucket.ts | 12 +++++++- apps/frontend/src/gql/graphql.ts | 10 +++---- apps/frontend/src/pages/Build/BuildDetail.tsx | 7 +++-- .../src/pages/Build/BuildDetailToolbar.tsx | 2 +- apps/frontend/src/pages/Build/BuildInfos.tsx | 6 +++- .../pages/Build/metadata/TestIndicator.tsx | 2 +- apps/frontend/src/pages/Project/Builds.tsx | 28 ++++++++++--------- 10 files changed, 50 insertions(+), 33 deletions(-) diff --git a/apps/backend/src/graphql/__generated__/resolver-types.ts b/apps/backend/src/graphql/__generated__/resolver-types.ts index e57a35012..78131ade1 100644 --- a/apps/backend/src/graphql/__generated__/resolver-types.ts +++ b/apps/backend/src/graphql/__generated__/resolver-types.ts @@ -133,7 +133,7 @@ export type IBuild = INode & { /** The screenshot bucket that serves as base for comparison */ baseScreenshotBucket?: Maybe; /** Branch */ - branch: Scalars['String']['output']; + branch?: Maybe; /** Commit */ commit: Scalars['String']['output']; createdAt: Scalars['DateTime']['output']; @@ -836,7 +836,7 @@ export type IScreenshot = INode & { export type IScreenshotBucket = INode & { __typename?: 'ScreenshotBucket'; - branch: Scalars['String']['output']; + branch?: Maybe; commit: Scalars['String']['output']; createdAt: Scalars['DateTime']['output']; id: Scalars['ID']['output']; @@ -1495,7 +1495,7 @@ export type IBuildResolvers, ParentType, ContextType>; baseBuild?: Resolver, ParentType, ContextType>; baseScreenshotBucket?: Resolver, ParentType, ContextType>; - branch?: Resolver; + branch?: Resolver, ParentType, ContextType>; commit?: Resolver; createdAt?: Resolver; id?: Resolver; @@ -1828,7 +1828,7 @@ export type IScreenshotResolvers; export type IScreenshotBucketResolvers = ResolversObject<{ - branch?: Resolver; + branch?: Resolver, ParentType, ContextType>; commit?: Resolver; createdAt?: Resolver; id?: Resolver; diff --git a/apps/backend/src/graphql/__generated__/schema.gql b/apps/backend/src/graphql/__generated__/schema.gql index be4cb134e..b40864cec 100644 --- a/apps/backend/src/graphql/__generated__/schema.gql +++ b/apps/backend/src/graphql/__generated__/schema.gql @@ -107,7 +107,7 @@ type Build implements Node { baseScreenshotBucket: ScreenshotBucket """Branch""" - branch: String! + branch: String """Commit""" commit: String! @@ -660,7 +660,7 @@ type Screenshot implements Node { } type ScreenshotBucket implements Node { - branch: String! + branch: String commit: String! createdAt: DateTime! id: ID! diff --git a/apps/backend/src/graphql/definitions/Build.ts b/apps/backend/src/graphql/definitions/Build.ts index 51cec3059..4d034d9db 100644 --- a/apps/backend/src/graphql/definitions/Build.ts +++ b/apps/backend/src/graphql/definitions/Build.ts @@ -102,7 +102,7 @@ export const typeDefs = gql` "Commit" commit: String! "Branch" - branch: String! + branch: String "Parallel infos" parallel: BuildParallel "Mode" @@ -210,7 +210,7 @@ export const resolvers: IResolvers = { }, branch: async (build, _args, ctx) => { const compareBucket = await getCompareScreenshotBucket(ctx, build); - return compareBucket.branch; + return compareBucket.branch || null; }, pullRequest: async (build, _args, ctx) => { if (!build.githubPullRequestId) { diff --git a/apps/backend/src/graphql/definitions/ScreenshotBucket.ts b/apps/backend/src/graphql/definitions/ScreenshotBucket.ts index 65e325889..e2fb900ae 100644 --- a/apps/backend/src/graphql/definitions/ScreenshotBucket.ts +++ b/apps/backend/src/graphql/definitions/ScreenshotBucket.ts @@ -1,5 +1,7 @@ import gqlTag from "graphql-tag"; +import { IResolvers } from "../__generated__/resolver-types"; + const { gql } = gqlTag; export const typeDefs = gql` @@ -7,6 +9,14 @@ export const typeDefs = gql` id: ID! createdAt: DateTime! commit: String! - branch: String! + branch: String } `; + +export const resolvers: IResolvers = { + ScreenshotBucket: { + branch(screenshotBucket) { + return screenshotBucket.branch || null; + }, + }, +}; diff --git a/apps/frontend/src/gql/graphql.ts b/apps/frontend/src/gql/graphql.ts index d9030dd71..b5eb1ce7f 100644 --- a/apps/frontend/src/gql/graphql.ts +++ b/apps/frontend/src/gql/graphql.ts @@ -128,7 +128,7 @@ export type Build = Node & { /** The screenshot bucket that serves as base for comparison */ baseScreenshotBucket?: Maybe; /** Branch */ - branch: Scalars['String']['output']; + branch?: Maybe; /** Commit */ commit: Scalars['String']['output']; createdAt: Scalars['DateTime']['output']; @@ -831,7 +831,7 @@ export type Screenshot = Node & { export type ScreenshotBucket = Node & { __typename?: 'ScreenshotBucket'; - branch: Scalars['String']['output']; + branch?: Maybe; commit: Scalars['String']['output']; createdAt: Scalars['DateTime']['output']; id: Scalars['ID']['output']; @@ -1862,7 +1862,7 @@ export type Account_AccountQuery = { __typename?: 'Query', account?: ( & { ' $fragmentRefs'?: { 'PaymentBanner_Account_User_Fragment': PaymentBanner_Account_User_Fragment } } ) | null }; -export type BuildDetail_BuildFragment = { __typename?: 'Build', id: string, createdAt: any, branch: string, type?: BuildType | null, stats: { __typename?: 'BuildStats', total: number }, baseScreenshotBucket?: { __typename?: 'ScreenshotBucket', id: string, branch: string, createdAt: any } | null, pullRequest?: { __typename?: 'GithubPullRequest', merged?: boolean | null } | null } & { ' $fragmentName'?: 'BuildDetail_BuildFragment' }; +export type BuildDetail_BuildFragment = { __typename?: 'Build', id: string, createdAt: any, branch?: string | null, type?: BuildType | null, stats: { __typename?: 'BuildStats', total: number }, baseScreenshotBucket?: { __typename?: 'ScreenshotBucket', id: string, branch?: string | null, createdAt: any } | null, pullRequest?: { __typename?: 'GithubPullRequest', merged?: boolean | null } | null } & { ' $fragmentName'?: 'BuildDetail_BuildFragment' }; export type BuildDiffState_ScreenshotDiffFragment = { __typename?: 'ScreenshotDiff', id: string, status: ScreenshotDiffStatus, url?: string | null, name: string, width?: number | null, height?: number | null, group?: string | null, threshold?: number | null, baseScreenshot?: { __typename?: 'Screenshot', id: string, url: string, width?: number | null, height?: number | null, metadata?: { __typename?: 'ScreenshotMetadata', url?: string | null, colorScheme?: ScreenshotMetadataColorScheme | null, mediaType?: ScreenshotMetadataMediaType | null, automationLibrary: { __typename?: 'ScreenshotMetadataAutomationLibrary', name: string, version: string }, browser?: { __typename?: 'ScreenshotMetadataBrowser', name: string, version: string } | null, sdk: { __typename?: 'ScreenshotMetadataSDK', name: string, version: string }, viewport?: { __typename?: 'ScreenshotMetadataViewport', width: number, height: number } | null, test?: { __typename?: 'ScreenshotMetadataTest', id?: string | null, title: string, titlePath: Array, retry?: number | null, retries?: number | null, repeat?: number | null, location?: { __typename?: 'ScreenshotMetadataLocation', file: string, line: number } | null } | null } | null } | null, compareScreenshot?: { __typename?: 'Screenshot', id: string, url: string, width?: number | null, height?: number | null, playwrightTraceUrl?: string | null, metadata?: { __typename?: 'ScreenshotMetadata', url?: string | null, colorScheme?: ScreenshotMetadataColorScheme | null, mediaType?: ScreenshotMetadataMediaType | null, automationLibrary: { __typename?: 'ScreenshotMetadataAutomationLibrary', name: string, version: string }, browser?: { __typename?: 'ScreenshotMetadataBrowser', name: string, version: string } | null, sdk: { __typename?: 'ScreenshotMetadataSDK', name: string, version: string }, viewport?: { __typename?: 'ScreenshotMetadataViewport', width: number, height: number } | null, test?: { __typename?: 'ScreenshotMetadataTest', id?: string | null, title: string, titlePath: Array, retry?: number | null, retries?: number | null, repeat?: number | null, location?: { __typename?: 'ScreenshotMetadataLocation', file: string, line: number } | null } | null } | null } | null } & { ' $fragmentName'?: 'BuildDiffState_ScreenshotDiffFragment' }; @@ -1885,7 +1885,7 @@ export type BuildDiffState_BuildFragment = { __typename?: 'Build', id: string, s & { ' $fragmentRefs'?: { 'BuildStatsIndicator_BuildStatsFragment': BuildStatsIndicator_BuildStatsFragment } } ) } & { ' $fragmentName'?: 'BuildDiffState_BuildFragment' }; -export type BuildInfos_BuildFragment = { __typename?: 'Build', createdAt: any, name: string, commit: string, branch: string, mode: BuildMode, baseBranch?: string | null, baseBranchResolvedFrom?: BaseBranchResolution | null, stats: { __typename?: 'BuildStats', total: number }, baseScreenshotBucket?: { __typename?: 'ScreenshotBucket', id: string, commit: string, branch: string } | null, baseBuild?: { __typename?: 'Build', id: string, number: number } | null, pullRequest?: { __typename?: 'GithubPullRequest', id: string, url: string, number: number } | null, metadata?: { __typename?: 'BuildMetadata', testReport?: { __typename?: 'TestReport', status: TestReportStatus } | null } | null } & { ' $fragmentName'?: 'BuildInfos_BuildFragment' }; +export type BuildInfos_BuildFragment = { __typename?: 'Build', createdAt: any, name: string, commit: string, branch?: string | null, mode: BuildMode, baseBranch?: string | null, baseBranchResolvedFrom?: BaseBranchResolution | null, stats: { __typename?: 'BuildStats', total: number }, baseScreenshotBucket?: { __typename?: 'ScreenshotBucket', id: string, commit: string, branch?: string | null } | null, baseBuild?: { __typename?: 'Build', id: string, number: number } | null, pullRequest?: { __typename?: 'GithubPullRequest', id: string, url: string, number: number } | null, metadata?: { __typename?: 'BuildMetadata', testReport?: { __typename?: 'TestReport', status: TestReportStatus } | null } | null } & { ' $fragmentName'?: 'BuildInfos_BuildFragment' }; export type BuildOrphanDialog_BuildFragment = { __typename?: 'Build', baseBranch?: string | null, mode: BuildMode, type?: BuildType | null } & { ' $fragmentName'?: 'BuildOrphanDialog_BuildFragment' }; @@ -2001,7 +2001,7 @@ export type ProjectBuilds_Project_BuildsQueryVariables = Exact<{ export type ProjectBuilds_Project_BuildsQuery = { __typename?: 'Query', project?: { __typename?: 'Project', id: string, builds: { __typename?: 'BuildConnection', pageInfo: { __typename?: 'PageInfo', totalCount: number, hasNextPage: boolean }, edges: Array<( - { __typename?: 'Build', id: string, number: number, createdAt: any, name: string, branch: string, commit: string, mode: BuildMode, stats: ( + { __typename?: 'Build', id: string, number: number, createdAt: any, name: string, branch?: string | null, commit: string, mode: BuildMode, stats: ( { __typename?: 'BuildStats' } & { ' $fragmentRefs'?: { 'BuildStatsIndicator_BuildStatsFragment': BuildStatsIndicator_BuildStatsFragment } } ), pullRequest?: ( diff --git a/apps/frontend/src/pages/Build/BuildDetail.tsx b/apps/frontend/src/pages/Build/BuildDetail.tsx index b31f24a1c..a9142a8ee 100644 --- a/apps/frontend/src/pages/Build/BuildDetail.tsx +++ b/apps/frontend/src/pages/Build/BuildDetail.tsx @@ -98,7 +98,7 @@ const BuildScreenshotHeader = memo( date, }: { label: string; - branch: string | null; + branch: string | null | undefined; date: string | null; }) => { return ( @@ -106,6 +106,7 @@ const BuildScreenshotHeader = memo(
{label} + {branch ? " from" : null}
{branch && ( @@ -636,7 +637,7 @@ const BuildScreenshots = memo( > {props.build.baseScreenshotBucket ? ( @@ -652,7 +653,7 @@ const BuildScreenshots = memo( hidden={!showChanges} > diff --git a/apps/frontend/src/pages/Build/BuildDetailToolbar.tsx b/apps/frontend/src/pages/Build/BuildDetailToolbar.tsx index dab9f5a35..16c8fe025 100644 --- a/apps/frontend/src/pages/Build/BuildDetailToolbar.tsx +++ b/apps/frontend/src/pages/Build/BuildDetailToolbar.tsx @@ -36,7 +36,7 @@ export const BuildDetailToolbar = memo(function BuildDetailToolbar({ bordered: boolean; repoUrl: string | null; baseBranch: string | null; - compareBranch: string | null; + compareBranch: string | null | undefined; prMerged: boolean; buildType: BuildType | null; }) { diff --git a/apps/frontend/src/pages/Build/BuildInfos.tsx b/apps/frontend/src/pages/Build/BuildInfos.tsx index 3f6fd2e1d..ba093d32b 100644 --- a/apps/frontend/src/pages/Build/BuildInfos.tsx +++ b/apps/frontend/src/pages/Build/BuildInfos.tsx @@ -243,7 +243,11 @@ export function BuildInfos(props: {
Changes branch
- + {build.branch ? ( + + ) : ( + "-" + )}
Changes commit
diff --git a/apps/frontend/src/pages/Build/metadata/TestIndicator.tsx b/apps/frontend/src/pages/Build/metadata/TestIndicator.tsx index 70c459db6..60c0b7a0f 100644 --- a/apps/frontend/src/pages/Build/metadata/TestIndicator.tsx +++ b/apps/frontend/src/pages/Build/metadata/TestIndicator.tsx @@ -11,7 +11,7 @@ export function TestIndicator({ ...props }: { repoUrl: string | null; - branch: string | null; + branch: string | null | undefined; test: { id?: string | null; title: string; diff --git a/apps/frontend/src/pages/Project/Builds.tsx b/apps/frontend/src/pages/Project/Builds.tsx index b5583baa7..cb1e02951 100644 --- a/apps/frontend/src/pages/Project/Builds.tsx +++ b/apps/frontend/src/pages/Project/Builds.tsx @@ -164,19 +164,21 @@ const BuildRow = React.memo( )}
-
- - - {build.branch} - -
+ {build.branch && ( +
+ + + {build.branch} + +
+ )}