Merge pull request #371 from chromaui/fix-git-init

Onboarding: Fix Git initialization problem

Author: ghengeveld

src/Panel.tsx

@@ -148,23 +148,23 @@ export const Panel = ({ active, api }: PanelProps) => {
     );
   }
 
+  if (gitInfoError || !gitInfo) {
+    return withProviders(<GitNotFound />);
+  }
+
   // Momentarily wait on addonState (should be very fast)
   if (projectInfoLoading) {
     return active ? <Spinner /> : null;
   }
 
-  if (!projectId)
+  if (!projectId) {
     return withProviders(
       <LinkProject
         createdProjectId={createdProjectId}
         setCreatedProjectId={setCreatedProjectId}
         onUpdateProject={updateProject}
       />
     );
-
-  if (gitInfoError || !gitInfo) {
-    console.error(gitInfoError);
-    return withProviders(<GitNotFound />);
   }
 
   if (projectUpdatingFailed) {

src/components/Box.tsx

@@ -18,7 +18,8 @@ export const Box = styled.div<{ warning?: boolean }>(
     warning && { background: theme.base === 'dark' ? '#342e1a' : theme.background.warning }
 );
 
-export const BoxTitle = styled.b(() => ({
-  display: 'block',
-  marginBottom: 2,
-}));
+export const BoxList = styled.ul({
+  margin: 0,
+  padding: 4,
+  listStylePosition: 'inside',
+});

src/preset.ts

@@ -201,7 +201,7 @@ async function serverChannel(channel: Channel, options: Options & { configFile?:
         configFile: targetConfigFile,
       };
     } catch (err) {
-      console.warn(`Failed to update your main configuration:\n\n ${err}`);
+      console.warn(`Failed to update your main configuration:\n\n${err}`);
 
       projectInfoState.value = {
         ...projectInfoState.value,

src/screens/Errors/GitNotFound.tsx

@@ -1,7 +1,6 @@
-import { LockIcon } from '@storybook/icons';
 import React from 'react';
 
-import { Box, BoxTitle } from '../../components/Box';
+import { Box, BoxList } from '../../components/Box';
 import { Code } from '../../components/Code';
 import { Container } from '../../components/Container';
 import { Link } from '../../components/design-system';
@@ -22,19 +21,25 @@ export const GitNotFound = () => {
         <Stack>
           <div>
             <VisualTestsIcon />
-            <Heading>Visual tests</Heading>
+            <Heading>Setup a Git repository</Heading>
             <Text center muted>
-              Catch bugs in UI appearance automatically. Compare image snapshots to detect visual
-              changes.
+              Chromatic requires Git to associate test results with commits and branches.
             </Text>
           </div>
           <Box>
-            <LockIcon style={{ flexShrink: 0 }} />
             <Text>
-              <BoxTitle>Git not detected</BoxTitle>
-              This addon requires Git to associate test results with commits and branches. Run{' '}
-              <Code>git init</Code> and make your first commit
-              <Code>git commit -m</Code> to get started!
+              Run these steps to get started:
+              <BoxList>
+                <li>
+                  <Code>git init</Code>
+                </li>
+                <li>
+                  <Code>git add .</Code>
+                </li>
+                <li>
+                  <Code>git commit -m "Initial commit"</Code>
+                </li>
+              </BoxList>
             </Text>
           </Box>
           <Link