Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement UI for 'project linked' screen #42

Merged
merged 2 commits into from
Aug 22, 2023
Merged

Implement UI for 'project linked' screen #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e9432df
Clean up UI for 'project linked' screen
ghengeveld Aug 21, 2023
7e80cf4
Tweak copy
ghengeveld Aug 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/Container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@ export const Container = styled.div(({ theme }) => ({
alignItems: "center",
justifyContent: "center",
height: "100%",
padding: 10,
}));
2 changes: 1 addition & 1 deletion src/components/Text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { color, styled } from "@storybook/theming";

export const Text = styled.p({
color: color.mediumdark,
margin: 8,
margin: "8px 0",
lineHeight: "18px",
textAlign: "center",
textWrap: "balance",
Expand Down
6 changes: 6 additions & 0 deletions src/components/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,12 @@ export const Text = styled.div(({ theme }) => ({
b: {
color: theme.color.defaultText,
},
code: {
fontSize: theme.typography.size.s1,
border: `1px solid ${theme.color.border}`,
borderRadius: 3,
padding: "0 3px",
},
small: {
fontSize: theme.typography.size.s1,
},
Expand Down
3 changes: 3 additions & 0 deletions src/gql/graphql.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -382,6 +382,7 @@ export type CompletedBuildTestsArgs = {
first?: InputMaybe<Scalars['Int']['input']>;
last?: InputMaybe<Scalars['Int']['input']>;
orderBy?: InputMaybe<CompletedBuildTestsOrder>;
statuses?: InputMaybe<Array<TestStatus>>;
storyId?: InputMaybe<Scalars['String']['input']>;
};

Expand Down Expand Up @@ -683,6 +684,7 @@ export type PreparedBuildTestsArgs = {
first?: InputMaybe<Scalars['Int']['input']>;
last?: InputMaybe<Scalars['Int']['input']>;
orderBy?: InputMaybe<PreparedBuildTestsOrder>;
statuses?: InputMaybe<Array<TestStatus>>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a good example of graphql updating unrelated because a change was made on chromatic, not in the addon itself. I would have thought this would have updated in this pr that queried for tests by statuses

storyId?: InputMaybe<Scalars['String']['input']>;
};

Expand Down Expand Up @@ -956,6 +958,7 @@ export type StartedBuildTestsArgs = {
first?: InputMaybe<Scalars['Int']['input']>;
last?: InputMaybe<Scalars['Int']['input']>;
orderBy?: InputMaybe<StartedBuildTestsOrder>;
statuses?: InputMaybe<Array<TestStatus>>;
storyId?: InputMaybe<Scalars['String']['input']>;
};

Expand Down
2 changes: 1 addition & 1 deletion src/screens/LinkProject/LinkProject.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export const Linked: Story = {
),
parameters: {
...withFigmaDesign(
"https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=330-472759&t=3EAIRe8423CpOQWY-4"
"https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=508-317094&t=435fylbu7gUQNEgq-4"
),
},
};
57 changes: 30 additions & 27 deletions src/screens/LinkProject/LinkedProject.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Icon } from "@storybook/design-system";
import { Icons, Link } from "@storybook/components";
import { styled } from "@storybook/theming";
import React from "react";
import { useQuery } from "urql";

Expand All @@ -11,6 +12,15 @@ import { Stack } from "../../components/Stack";
import { graphql } from "../../gql";
import { ProjectQueryQuery } from "../../gql/graphql";

const CheckIcon = styled(Icons)(({ theme }) => ({
width: 40,
height: 40,
padding: 10,
background: theme.color.positive,
borderRadius: "100%",
color: "white",
}));

const ProjectQuery = graphql(/* GraphQL */ `
query ProjectQuery($projectId: ID!) {
project(id: $projectId) {
Expand Down Expand Up @@ -48,43 +58,36 @@ export const LinkedProject = ({
{error && <p>{error.message}</p>}
{data?.project && (
<Stack>
<Icon icon="check" />
<CheckIcon 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>
<Text style={{ maxWidth: 380 }}>
The <code>projectId</code> for {data.project.name} has been added to this
Storybook&apos;s <code>main.js</code>. This will be used to sync with Chromatic.
Please commit this change to continue using this addon.
</Text>
<Button secondary onClick={() => goToNext()}>
Next
Catch a UI change
</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>
)}
<Text>
Why do we need a project ID?{" "}
<Link href="https://www.chromatic.com/docs/cli">Learn More »</Link>
</Text>
</Stack>
)}
</Stack>
</Container>
</Section>
<Section>
<Bar>
<Col push />
<Col>
{data?.project?.lastBuild && (
<Text style={{ marginLeft: 5 }}>
Last build: {data.project.lastBuild.number} on branch{" "}
{data.project.lastBuild.branch}
</Text>
)}
</Col>
<Col push>
<FooterMenu setAccessToken={setAccessToken} />
</Col>
</Bar>
Expand Down