Handle missing git user.email config

src/screens/Errors/GitError.stories.tsx

@@ -4,18 +4,33 @@
 
 const meta = {
   component: GitError,
-  args: {
-    gitInfoError: new Error('Chromatic only works from inside a Git repository.'),
-  },
 } satisfies Meta<typeof GitError>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const NotInitialized: Story = {
+  args: {
+    gitInfoError: new Error(`
+      Unable to execute command: git rev-parse --abbrev-ref HEAD
+      Chromatic only works from inside a Git repository.
+
+      You can initialize a new Git repository with \`git init\`.
+    `),
+  },
+};
 
 export const NoCommit: Story = {
   args: {
-    gitInfoError: new Error('Chromatic requires your Git repository to have at least one commit.'),
+    gitInfoError: new Error(`
+      Unable to execute command: git --no-pager log -n 1 --format="%H ## %ct ## %ae ## %an"
+      Chromatic requires your Git repository to have at least one commit.
+    `),
+  },
+};
+
+export const NoEmail: Story = {
+  args: {
+    gitInfoError: new Error('Command failed with exit code 1: git config user.email'),
   },
 };

src/screens/Errors/GitError.tsx

@@ -74,67 +74,96 @@
   },
 });
 
-const Instructions = styled.div(({ theme }) => ({
+const Instructions = styled.div({
   width: '100%',
   display: 'flex',
   flexDirection: 'column',
   gap: 8,
-  pre: {
-    margin: 0,
-    padding: '10px 12px',
-    fontSize: '12px',
-    background: theme.background.content,
-    border: `1px solid ${theme.appBorderColor}`,
-    borderRadius: 4,
-  },
+});
+
+const Pre = styled.pre(({ theme }) => ({
+  margin: 0,
+  padding: '10px 12px',
+  fontSize: '12px',
+  background: theme.background.content,
+  border: `1px solid ${theme.appBorderColor}`,
+  borderRadius: 4,
 }));
 
 export const GitError = ({ gitInfoError }: { gitInfoError?: Error }) => {
-  const hasGitRepo = gitInfoError?.message.includes('one commit');
-  useTelemetry('Errors', hasGitRepo ? 'GitError' : 'GitNotFound');
+  const requireInit = gitInfoError?.message.includes('git init');
+  const requireCommit = requireInit || gitInfoError?.message.includes('one commit');
+  const requireEmail = gitInfoError?.message.includes('user.email');
+  useTelemetry('Errors', requireInit ? 'GitNotFound' : 'GitError');
   return (
     <Screen footer={null}>
       <Container>
-        <Stack>
-          <div>
-            <Heading>Set up a Git repository</Heading>
+        {requireEmail ? (
+          <Stack>
+            <div>
+              <Heading>Configure your Git email</Heading>
+              <Text center muted>
+                Chromatic requires Git to be configured with an email address to connect local
+                builds to CI builds and link builds to user accounts.
+              </Text>
+            </div>
             <Text center muted>
-              Chromatic requires Git to associate test results with commits and branches. Run these
-              steps to get started:
+              Run this command to set an email address:
+            </Text>
+            <Pre>git config user.email "[email protected]"</Pre>
+            <Text muted small>
+              <Link
+                target="_blank"
+                href="https://www.chromatic.com/docs/privacy-policy/"
+                withArrow
+                secondary
+              >
+                Privacy policy
+              </Link>
             </Text>
-          </div>
-          <CheckList>
-            <li>
-              {hasGitRepo ? <Check /> : <Step />}
-              <Instructions>
-                <span>Initialize a Git repository</span>
-                {!hasGitRepo && <pre>git init</pre>}
-              </Instructions>
-            </li>
-            <li>
-              <Step />
-              <Instructions>
-                <span>Stage all files</span>
-                <pre>git add .</pre>
-              </Instructions>
-            </li>
-            <li>
-              <Step />
-              <Instructions>
-                <span>Commit the changes</span>
-                <pre>git commit -m "Initial commit"</pre>
-              </Instructions>
-            </li>
-          </CheckList>
-          <Link
-            target="_blank"
-            href="https://www.chromatic.com/docs/visual-tests-addon#git-addon"
-            withArrow
-            secondary
-          >
-            Visual tests requirements
-          </Link>
-        </Stack>
+          </Stack>
+        ) : (
+          <Stack>
+            <div>
+              <Heading>Set up a Git repository</Heading>
+              <Text center muted>
+                Chromatic requires Git to associate test results with commits and branches. Run
+                these steps to get started:
+              </Text>
+            </div>
+            <CheckList>
+              <li>
+                {requireInit ? <Step /> : <Check />}
+                <Instructions>
+                  <span>Initialize a Git repository</span>
+                  {requireInit && <Pre>git init</Pre>}
+                </Instructions>
+              </li>
+              <li>
+                {requireCommit ? <Step /> : <Check />}
+                <Instructions>
+                  <span>Stage all files</span>
+                  {requireCommit && <Pre>git add .</Pre>}
+                </Instructions>
+              </li>
+              <li>
+                {requireCommit ? <Step /> : <Check />}
+                <Instructions>
+                  <span>Commit the changes</span>
+                  {requireCommit && <Pre>git commit -m "Initial commit"</Pre>}
+                </Instructions>
+              </li>
+            </CheckList>
+            <Link
+              target="_blank"
+              href="https://www.chromatic.com/docs/visual-tests-addon#git-addon"
+              withArrow
+              secondary
+            >
+              Visual tests requirements
+            </Link>
+          </Stack>
+        )}
       </Container>
     </Screen>
   );