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

Stabilize a few UI checks in Chromatic #246

Merged
merged 6 commits into from
May 24, 2023
Merged

Stabilize a few UI checks in Chromatic #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9bd666d
Stabilize a few UI checks in Chromatic
nickgros May 19, 2023
727a46e
Use versioned table
nickgros May 19, 2023
f01c128
Preload font
nickgros May 19, 2023
8efc248
Preload font
nickgros May 19, 2023
f6b66b2
Properly reference PR head
nickgros May 23, 2023
360588f
Try document.fonts API to ensure fonts loaded
nickgros May 23, 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 .github/workflows/deploy-to-chromatic.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ jobs:
steps:
- uses: actions/checkout@v3.1.0
with:
ref: ${{ github.event.pull_request.head.ref }}
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Deploy the pull request, not the main branch

# Chromatic requires full git history to track changes
fetch-depth: 0
- uses: ./.github/actions/pnpm-setup-action
Expand Down
16 changes: 0 additions & 16 deletions packages/synapse-react-client/.storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<script>
window.global = window
window.sql = {}
Copy link
Collaborator Author

@nickgros nickgros May 19, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

no longer needed since we removed the sql-parser package as a dependency

</script>

<link
Expand Down Expand Up @@ -51,18 +50,3 @@
<script src="https://cdn.jsdelivr.net/npm/markdown-it-container@2.0.0/dist/markdown-it-container.min.js"></script>
<!-- end synapse markdown imports -->
<script crossorigin src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script
crossorigin
src="https://unpkg.com/react-plotly.js@1.0.2/dist/create-plotly-component.js"
></script>

Comment on lines -54 to -58
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is included in our node_modules, we shouldn't need this script.

<script>
const currentStack = JSON.parse(
window.localStorage.getItem('SynapseReactClientStyleGuideStack') ?? 'null',
)
if (currentStack) {
window.SRC = {
OVERRIDE_ENDPOINT_CONFIG: currentStack,
}
}
</script>
Comment on lines -59 to -68
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This was replaced by Storybook controls long ago

9 changes: 9 additions & 0 deletions packages/synapse-react-client/.storybook/preview.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { StorybookComponentWrapper } from '../src/components/StorybookComponentW
import { initialize, mswLoader } from 'msw-storybook-addon'
import { getHandlers } from '../mocks/msw/handlers'
import { MOCK_REPO_ORIGIN } from '../src/utils/functions/getEndpoint'
import isChromatic from 'chromatic/isChromatic'

globalThis.Buffer = Buffer
globalThis.process = {
Expand Down Expand Up @@ -113,8 +114,16 @@ initialize({
},
})

const fontLoader = async () => ({
fonts: await Promise.all([document.fonts.load('700 1em Lato')]),
})

export const loaders = [mswLoader]

if (isChromatic && document.fonts) {
loaders.push(fontLoader)
}
Comment on lines +123 to +125
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

When deployed to Chromatic, wait for the font to load before rendering the story. This should make our screenshots more stable


export const decorators = [
(Story, context) => {
return (
Expand Down
7 changes: 5 additions & 2 deletions packages/synapse-react-client/stories/SubsectionRowRenderer.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,12 @@ export default meta
type Story = StoryObj<typeof meta>

export const Demo: Story = {
name: 'SubsectionRowRenderer',
args: {
sql: 'SELECT funderName as "Funding Agency" FROM syn26344829',
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This table has been deleted and the fallback is a skeleton with a random length. Update the story with a different table.

searchParams: { Resource_id: '844b598c-0171-4972-91c3-27aa21b45d52' },
sql: 'SELECT abstract as "Summary" FROM syn21918972.488',
searchParams: {
grantNumber: 'CA217655',
},
isMarkdown: false,
},
}