Merge pull request #29 from chromaui/add-footer-menu

Add footer menu to link project screen

src/Panel.tsx

@@ -71,14 +71,18 @@ export const Panel = ({ active }: PanelProps) => {
   if (!projectId)
     return (
       <Provider key={PANEL_ID} value={client}>
-        <LinkProject onUpdateProject={updateProject} />
+        <LinkProject onUpdateProject={updateProject} setAccessToken={setAccessToken} />
       </Provider>
     );
 
   if (projectIdChanged) {
     return (
       <Provider key={PANEL_ID} value={client}>
-        <LinkedProject projectId={projectId} goToNext={clearProjectIdChanged} />
+        <LinkedProject
+          projectId={projectId}
+          goToNext={clearProjectIdChanged}
+          setAccessToken={setAccessToken}
+        />
       </Provider>
     );
   }

src/components/FooterMenu.tsx

@@ -0,0 +1,32 @@
+import { Icon } from "@storybook/design-system";
+import React from "react";
+
+import { TooltipMenu } from "./TooltipMenu";
+
+interface FooterMenuProps {
+  setAccessToken: (value: string | null) => void;
+}
+
+export const FooterMenu = ({ setAccessToken }: FooterMenuProps) => {
+  return (
+    <TooltipMenu
+      placement="top"
+      links={[
+        {
+          id: "logout",
+          title: "Log out",
+          icon: "user",
+          onClick: () => setAccessToken(null),
+        },
+        {
+          id: "learn",
+          title: "Learn about this addon",
+          icon: "question",
+          href: "https://www.chromatic.com/docs/test",
+        },
+      ]}
+    >
+      <Icon icon="ellipsis" />
+    </TooltipMenu>
+  );
+};

src/screens/LinkProject/LinkProject.tsx

@@ -1,11 +1,12 @@
 import { Avatar, Icon, ListItem } from "@storybook/design-system";
 import { styled } from "@storybook/theming";
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import { useQuery } from "urql";
 
 import { Container } from "../../components/Container";
+import { FooterMenu } from "../../components/FooterMenu";
 import { Heading } from "../../components/Heading";
-import { Text } from "../../components/Text";
+import { Bar, Col, Section, Sections, Text } from "../../components/layout";
 import { graphql } from "../../gql";
 import { SelectProjectsQueryQuery } from "../../gql/graphql";
 
@@ -33,8 +34,10 @@ const SelectProjectsQuery = graphql(/* GraphQL */ `
 
 export const LinkProject = ({
   onUpdateProject,
+  setAccessToken,
 }: {
   onUpdateProject: (projectId: string, projectToken: string) => void;
+  setAccessToken: (accessToken: string | null) => void;
 }) => {
   const onSelectProjectId = React.useCallback(
     async (selectedProjectId: string, projectToken: string) => {
@@ -43,7 +46,7 @@ export const LinkProject = ({
     [onUpdateProject]
   );
 
-  return <SelectProject onSelectProjectId={onSelectProjectId} />;
+  return <SelectProject onSelectProjectId={onSelectProjectId} setAccessToken={setAccessToken} />;
 };
 
 const ListHeading = styled.div`
@@ -82,6 +85,7 @@ const ProjectPicker = styled.div`
   text-align: left;
   position: relative;
   display: flex;
+  margin: 10px;
 `;
 
 const List = styled.div({
@@ -95,8 +99,10 @@ const RepositoryOwnerAvatar = styled(Avatar)`
 
 function SelectProject({
   onSelectProjectId,
+  setAccessToken,
 }: {
   onSelectProjectId: (projectId: string, projectToken: string) => Promise<void>;
+  setAccessToken: (accessToken: string | null) => void;
 }) {
   const [selectedAccount, setSelectedAccount] =
     useState<SelectProjectsQueryQuery["viewer"]["accounts"][number]>(null);
@@ -126,46 +132,56 @@ function SelectProject({
   );
 
   return (
-    <Container>
+    <Sections>
       {fetching && <p>Loading...</p>}
       {error && <p>{error.message}</p>}
       {!fetching && data.viewer?.accounts && (
-        <>
-          <Heading>Select a Project</Heading>
-          <Text>Baselines will be used with this project.</Text>
-          <ProjectPicker>
-            <Left>
-              <ListHeading>Accounts</ListHeading>
-              <List>
-                {data.viewer.accounts?.map((account) => (
-                  <ListItem
-                    key={account.id}
-                    title={account.name}
-                    left={<RepositoryOwnerAvatar src={account.avatarUrl} size="tiny" />}
-                    onClick={() => onSelectAccount(account)}
-                    active={selectedAccount?.id === account.id}
-                  />
-                ))}
-              </List>
-            </Left>
-            <Right>
-              <ListHeading>Projects</ListHeading>
-              <List>
-                {selectedAccount?.projects?.map((project) => (
-                  <ListItem
-                    appearance="secondary"
-                    key={project.id}
-                    title={project.name}
-                    right={<Icon icon="add" aria-label={project.name} />}
-                    onClick={() => handleSelectProject(project)}
-                    disabled={isSelectingProject}
-                  />
-                ))}
-              </List>
-            </Right>
-          </ProjectPicker>
-        </>
+        <Section grow>
+          <Container>
+            <Heading>Select a Project</Heading>
+            <Text>Baselines will be used with this project.</Text>
+            <ProjectPicker>
+              <Left>
+                <ListHeading>Accounts</ListHeading>
+                <List>
+                  {data.viewer.accounts?.map((account) => (
+                    <ListItem
+                      key={account.id}
+                      title={account.name}
+                      left={<RepositoryOwnerAvatar src={account.avatarUrl} size="tiny" />}
+                      onClick={() => onSelectAccount(account)}
+                      active={selectedAccount?.id === account.id}
+                    />
+                  ))}
+                </List>
+              </Left>
+              <Right>
+                <ListHeading>Projects</ListHeading>
+                <List>
+                  {selectedAccount?.projects?.map((project) => (
+                    <ListItem
+                      appearance="secondary"
+                      key={project.id}
+                      title={project.name}
+                      right={<Icon icon="add" aria-label={project.name} />}
+                      onClick={() => handleSelectProject(project)}
+                      disabled={isSelectingProject}
+                    />
+                  ))}
+                </List>
+              </Right>
+            </ProjectPicker>
+          </Container>
+        </Section>
       )}
-    </Container>
+      <Section>
+        <Bar>
+          <Col push />
+          <Col>
+            <FooterMenu setAccessToken={setAccessToken} />
+          </Col>
+        </Bar>
+      </Section>
+    </Sections>
   );
 }

src/screens/LinkProject/LinkedProject.tsx

@@ -4,9 +4,10 @@ import { useQuery } from "urql";
 
 import { Button } from "../../components/Button";
 import { Container } from "../../components/Container";
+import { FooterMenu } from "../../components/FooterMenu";
 import { Heading } from "../../components/Heading";
+import { Bar, Col, Section, Sections, Text } from "../../components/layout";
 import { Stack } from "../../components/Stack";
-import { Text } from "../../components/Text";
 import { graphql } from "../../gql";
 import { ProjectQueryQuery } from "../../gql/graphql";
 
@@ -27,53 +28,67 @@ const ProjectQuery = graphql(/* GraphQL */ `
 export const LinkedProject = ({
   projectId,
   goToNext,
+  setAccessToken,
 }: {
   projectId: string;
   goToNext: () => void;
+  setAccessToken: (accessToken: string | null) => void;
 }) => {
   const [{ data, fetching, error }] = useQuery<ProjectQueryQuery>({
     query: ProjectQuery,
     variables: { projectId },
   });
 
   return (
-    <Container>
-      <Stack>
-        {fetching && <p>Loading...</p>}
-        {error && <p>{error.message}</p>}
-        {data?.project && (
+    <Sections>
+      <Section grow>
+        <Container>
           <Stack>
-            <Icon icon="check" />
-            <Heading>Project linked!</Heading>
-            <p>
-              We added project ID to main.js. The {data.project.name} app ID will be used to
-              reference prior tests. Please commit this change to continue using this addon.
-            </p>
-            <Button secondary onClick={() => goToNext()}>
-              Next
-            </Button>
-            <p>
-              What is the app ID for? <a href="https://www.chromatic.com/docs/cli">Learn More »</a>
-            </p>
+            {fetching && <p>Loading...</p>}
+            {error && <p>{error.message}</p>}
             {data?.project && (
-              <div>
-                <Heading>Selected project</Heading>
-                <Text>Baselines will be used with this project.</Text>
-                <b>
-                  <a href={data.project.webUrl}>{data.project.name}</a>
-                </b>
-              </div>
-            )}
-            {data.project.lastBuild && (
-              <p>
-                Last build: {data.project.lastBuild.number} on branch{" "}
-                {data.project.lastBuild.branch}
-              </p>
+              <Stack>
+                <Icon icon="check" />
+                <Heading>Project linked!</Heading>
+                <p>
+                  We added project ID to main.js. The {data.project.name} app ID will be used to
+                  reference prior tests. Please commit this change to continue using this addon.
+                </p>
+                <Button secondary onClick={() => goToNext()}>
+                  Next
+                </Button>
+                <p>
+                  What is the app ID for?{" "}
+                  <a href="https://www.chromatic.com/docs/cli">Learn More »</a>
+                </p>
+                {data?.project && (
+                  <div>
+                    <Heading>Selected project</Heading>
+                    <Text>Baselines will be used with this project.</Text>
+                    <b>
+                      <a href={data.project.webUrl}>{data.project.name}</a>
+                    </b>
+                  </div>
+                )}
+                {data.project.lastBuild && (
+                  <p>
+                    Last build: {data.project.lastBuild.number} on branch{" "}
+                    {data.project.lastBuild.branch}
+                  </p>
+                )}
+              </Stack>
             )}
           </Stack>
-        )}
-        ;
-      </Stack>
-    </Container>
+        </Container>
+      </Section>
+      <Section>
+        <Bar>
+          <Col push />
+          <Col>
+            <FooterMenu setAccessToken={setAccessToken} />
+          </Col>
+        </Bar>
+      </Section>
+    </Sections>
   );
 };

src/screens/VisualTests/VisualTests.tsx

@@ -3,9 +3,9 @@ import { Icon } from "@storybook/design-system";
 import React, { useCallback, useEffect, useState } from "react";
 import { useMutation, useQuery } from "urql";
 
+import { FooterMenu } from "../../components/FooterMenu";
 import { IconButton } from "../../components/IconButton";
 import { Bar, Col, Row, Section, Sections, Text } from "../../components/layout";
-import { TooltipMenu } from "../../components/TooltipMenu";
 import { getFragment, graphql } from "../../gql";
 import {
   BuildQuery,
@@ -272,25 +272,7 @@ export const VisualTests = ({
               <Text style={{ marginLeft: 5 }}>Loading...</Text>
             </Col>
             <Col push>
-              <TooltipMenu
-                placement="top"
-                links={[
-                  {
-                    id: "logout",
-                    title: "Log out",
-                    icon: "user",
-                    onClick: () => setAccessToken(null),
-                  },
-                  {
-                    id: "learn",
-                    title: "Learn about this addon",
-                    icon: "question",
-                    href: "https://www.chromatic.com/docs/test",
-                  },
-                ]}
-              >
-                <Icon icon="ellipsis" />
-              </TooltipMenu>
+              <FooterMenu setAccessToken={setAccessToken} />
             </Col>
           </Bar>
         </Section>
@@ -349,25 +331,7 @@ export const VisualTests = ({
             </IconButton>
           </Col>
           <Col>
-            <TooltipMenu
-              placement="top"
-              links={[
-                {
-                  id: "logout",
-                  title: "Log out",
-                  icon: "user",
-                  onClick: () => setAccessToken(null),
-                },
-                {
-                  id: "learn",
-                  title: "Learn about this addon",
-                  icon: "question",
-                  href: "https://www.chromatic.com/docs/test",
-                },
-              ]}
-            >
-              <Icon icon="ellipsis" />
-            </TooltipMenu>
+            <FooterMenu setAccessToken={setAccessToken} />
           </Col>
         </Bar>
       </Section>