Merge pull request #1397 from argos-ci/fix-visual-glitches-no-branch

fix: fix visual glitches when no branch is specified
argos-ci · Oct 13, 2024 · a1981db · a1981db
2 parents b617c0a + 1cd57aa
commit a1981db
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 33 deletions.
diff --git a/apps/backend/src/graphql/__generated__/resolver-types.ts b/apps/backend/src/graphql/__generated__/resolver-types.ts
diff --git a/apps/backend/src/graphql/__generated__/schema.gql b/apps/backend/src/graphql/__generated__/schema.gql
diff --git 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
@@ -1,12 +1,22 @@
 import gqlTag from "graphql-tag";
 
+import { IResolvers } from "../__generated__/resolver-types";
+
 const { gql } = gqlTag;
 
 export const typeDefs = gql`
   type ScreenshotBucket implements Node {
     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
@@ -128,7 +128,7 @@ export type Build = Node & {
   /** The screenshot bucket that serves as base for comparison */
   baseScreenshotBucket?: Maybe<ScreenshotBucket>;
   /** Branch */
-  branch: Scalars['String']['output'];
+  branch?: Maybe<Scalars['String']['output']>;
   /** 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<Scalars['String']['output']>;
   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<string>, 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<string>, 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
@@ -98,14 +98,15 @@ const BuildScreenshotHeader = memo(
     date,
   }: {
     label: string;
-    branch: string | null;
+    branch: string | null | undefined;
     date: string | null;
   }) => {
     return (
       <div className="text-low flex shrink-0 flex-col items-center gap-0.5">
         <div className="flex max-w-full items-center gap-1">
           <div className="shrink-0 select-none text-xs font-medium leading-6">
             {label}
+            {branch ? " from" : null}
           </div>
           {branch && (
             <Code className="truncate" title={branch}>
@@ -636,7 +637,7 @@ const BuildScreenshots = memo(
         >
           {props.build.baseScreenshotBucket ? (
             <BuildScreenshotHeader
-              label="Baseline from"
+              label="Baseline"
               branch={props.build.baseScreenshotBucket.branch}
               date={props.build.baseScreenshotBucket.createdAt}
             />
@@ -652,7 +653,7 @@ const BuildScreenshots = memo(
           hidden={!showChanges}
         >
           <BuildScreenshotHeader
-            label="Changes from"
+            label="Changes"
             branch={props.build.branch}
             date={props.build.createdAt}
           />

diff --git 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
@@ -243,7 +243,11 @@ export function BuildInfos(props: {
 
       <Dt>Changes branch</Dt>
       <Dd>
-        <BranchLink repoUrl={props.repoUrl} branch={build.branch} />
+        {build.branch ? (
+          <BranchLink repoUrl={props.repoUrl} branch={build.branch} />
+        ) : (
+          "-"
+        )}
       </Dd>
 
       <Dt>Changes commit</Dt>

diff --git 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
@@ -164,19 +164,21 @@ const BuildRow = React.memo(
           )}
         </div>
         <div className="relative hidden w-32 md:block">
-          <div>
-            <FakeLink
-              className="inline-flex max-w-full items-center gap-2"
-              href={
-                project.repository
-                  ? `${project.repository.url}/tree/${build.branch}`
-                  : undefined
-              }
-            >
-              <GitBranchIcon className="size-3 shrink-0" />
-              <Truncable>{build.branch}</Truncable>
-            </FakeLink>
-          </div>
+          {build.branch && (
+            <div>
+              <FakeLink
+                className="inline-flex max-w-full items-center gap-2"
+                href={
+                  project.repository
+                    ? `${project.repository.url}/tree/${build.branch}`
+                    : undefined
+                }
+              >
+                <GitBranchIcon className="size-3 shrink-0" />
+                <Truncable>{build.branch}</Truncable>
+              </FakeLink>
+            </div>
+          )}
           <div>
             <FakeLink
               className="inline-flex max-w-full items-center gap-2"