finish removing chromatic (#63966)

We removed Chromatic in
https://github.com/sourcegraph/sourcegraph/pull/62228, but there were
still some remnants.

## Test plan

CI
This commit is contained in:
Quinn Slack 2024-07-21 18:37:02 -07:00 committed by GitHub
parent 9145768648
commit 1fe876e89c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
187 changed files with 151 additions and 1003 deletions

View File

@ -114,10 +114,6 @@ const config = {
importNames: ['Link'],
message: 'Use the <Link /> component from @sourcegraph/wildcard instead.',
},
{
name: 'chromatic/isChromatic',
message: 'Please use `isChromatic` from the `@sourcegraph/storybook` package.',
},
],
patterns: [
{

View File

@ -36,12 +36,6 @@ export const Interactive: StoryFn = () => {
return <ToggleExample value={value} onToggle={onToggle} />
}
Interactive.parameters = {
chromatic: {
disable: true,
},
}
export const Variants: StoryFn = () => (
<>
<ToggleExample value={true} onToggle={onToggle} />

View File

@ -13,11 +13,7 @@ const decorator: Decorator = story => (
const config: Meta = {
title: 'branded/TabbedPanelContent',
decorators: [decorator],
parameters: {
chromatic: {
viewports: [320, 576, 978, 1440],
},
},
parameters: {},
}
export default config

View File

@ -7,9 +7,7 @@ import { type RepoMetadataItem, RepoMetadata } from './RepoMetadata'
const config: Meta = {
title: 'branded/search-ui/RepoMetadata',
parameters: {
chromatic: { viewports: [480] },
},
parameters: {},
}
export default config
@ -50,8 +48,3 @@ export const RepoMetadataStory: StoryFn = () => (
)
RepoMetadataStory.storyName = 'RepoMetadata'
RepoMetadataStory.parameters = {
chromatic: {
disableSnapshot: false,
},
}

View File

@ -8,9 +8,7 @@ import { SyntaxHighlightedSearchQuery } from './SyntaxHighlightedSearchQuery'
const config: Meta = {
title: 'branded/search-ui/SyntaxHighlightedSearchQuery',
parameters: {
chromatic: { viewports: [480] },
},
parameters: {},
}
export default config

View File

@ -10,9 +10,7 @@ import { BaseCodeMirrorQueryInput, type BaseCodeMirrorQueryInputProps } from './
const config: Meta = {
title: 'branded/search-ui/input/BaseCodeMirrorQueryInput',
parameters: {
chromatic: { viewports: [500] },
},
parameters: {},
}
export default config

View File

@ -16,9 +16,7 @@ import { SearchBox, type SearchBoxProps } from './SearchBox'
const config: Meta = {
title: 'branded/search-ui/input/SearchBox',
parameters: {
chromatic: { viewports: [575, 700], disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -22,7 +22,6 @@ const decorator: Decorator = story => (
const config: Meta = {
title: 'branded/search-ui/input/SearchContextMenu',
parameters: {
chromatic: { viewports: [500], disableSnapshot: false },
design: {
type: 'figma',
url: 'https://www.figma.com/file/4Fy9rURbfF2bsl4BvYunUO/RFC-261-Search-Contexts?node-id=581%3A4754',

View File

@ -13,9 +13,7 @@ const decorator: Decorator = story => (
const config: Meta = {
title: 'branded/search-ui/input/SearchContextMenuItem',
parameters: {
chromatic: { viewports: [1200], disableSnapshot: false },
},
parameters: {},
decorators: [decorator],
}

View File

@ -11,9 +11,7 @@ const decorator: Decorator = story => <BrandedStory>{props => story()}</BrandedS
const config: Meta = {
title: 'branded/search-ui/filters',
decorators: [decorator],
parameters: {
chromatic: { viewports: [575, 700] },
},
parameters: {},
}
export default config

View File

@ -15,7 +15,6 @@ const config: Meta = {
type: 'figma',
url: 'https://www.figma.com/file/IyiXZIbPHK447NCXov0AvK/13928-Streaming-search?node-id=280%3A17768',
},
chromatic: { viewports: [1200], disableSnapshot: false },
},
}

View File

@ -14,7 +14,6 @@ const config: Meta = {
type: 'figma',
url: 'https://www.figma.com/file/IyiXZIbPHK447NCXov0AvK/13928-Streaming-search?node-id=280%3A17768',
},
chromatic: { viewports: [350], disableSnapshot: false },
},
}

View File

@ -8,12 +8,7 @@ import brandedStyles from '../../branded.scss'
const config: Meta = {
title: 'browser/AfterInstallPage',
parameters: {
chromatic: {
enableDarkMode: true,
disableSnapshot: false,
},
},
parameters: {},
}
export default config

View File

@ -162,10 +162,3 @@ AllOptionsPages.args = {
version: '0.0.0',
showSourcegraphComAlert: false,
}
AllOptionsPages.parameters = {
chromatic: {
enableDarkMode: true,
disableSnapshot: false,
},
}

View File

@ -28,12 +28,7 @@ const config: Meta = {
// it uses the browser extension styles and bitbucket CSS module styles.
title: 'shared/HoverOverlay',
decorators: [decorator],
parameters: {
chromatic: {
enableDarkMode: true,
disableSnapshot: false,
},
},
parameters: {},
}
export default config

View File

@ -86,9 +86,3 @@ export const JetBrainsSearchBoxStory: StoryFn = () => {
</WildcardThemeContext.Provider>
)
}
JetBrainsSearchBoxStory.parameters = {
chromatic: {
disableSnapshot: false,
},
}

View File

@ -123,9 +123,3 @@ export const JetBrainsSearchResultListStory: StoryFn = () => {
</div>
)
}
JetBrainsSearchResultListStory.parameters = {
chromatic: {
disableSnapshot: false,
},
}

View File

@ -63,12 +63,6 @@ export const CommandAction: StoryFn = () => (
)
CommandAction.storyName = 'Command action'
CommandAction.parameters = {
chromatic: {
enableDarkMode: true,
disableSnapshot: false,
},
}
export const LinkAction: StoryFn = () => (
<ActionItem

View File

@ -10,9 +10,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'shared/SymbolTag',
parameters: {
chromatic: { disableSnapshots: false },
},
parameters: {},
decorators: [decorator],
}

View File

@ -1,6 +1,5 @@
load("@npm//:defs.bzl", "npm_link_all_packages")
load("//dev:defs.bzl", "npm_package", "sass", "ts_project")
load("//client/shared/dev:tools.bzl", "module_style_typings")
load("//dev:defs.bzl", "npm_package", "ts_project")
load("//dev:eslint.bzl", "eslint_config_and_lint_root")
# gazelle:js_resolve **/*.module.scss :module_style_typings
@ -25,23 +24,10 @@ ts_config(
],
)
module_style_typings(
name = "module_style_typings",
)
sass(
name = "module_styles",
srcs = glob(["src/**/*.module.scss"]),
)
ts_project(
name = "storybook_lib",
srcs = [
"globals.d.ts",
"src/decorators/withChromaticThemes/ChromaticRoot/ChromaticRoot.tsx",
"src/decorators/withChromaticThemes/ChromaticRoot/index.ts",
"src/decorators/withChromaticThemes/index.ts",
"src/decorators/withChromaticThemes/withChromaticThemes.tsx",
"src/dummyEventSourcePolyfill.ts",
"src/environment-config.ts",
"src/main.ts",
@ -50,7 +36,6 @@ ts_project(
],
tsconfig = ":tsconfig",
deps = [
":module_style_typings",
":node_modules/@sourcegraph/build-config",
":node_modules/@sourcegraph/wildcard",
"//:node_modules/@storybook/addon-actions",
@ -60,14 +45,11 @@ ts_project(
"//:node_modules/@storybook/react-vite",
"//:node_modules/@storybook/theming",
"//:node_modules/@storybook/types",
"//:node_modules/@types/classnames",
"//:node_modules/@types/node",
"//:node_modules/@types/react",
"//:node_modules/classnames",
"//:node_modules/focus-visible",
"//:node_modules/open-color",
"//:node_modules/react",
"//:node_modules/vite-plugin-turbosnap",
],
)
@ -75,7 +57,6 @@ npm_package(
name = "storybook_pkg",
srcs = [
"package.json",
":module_styles", #keep
":storybook_lib",
],
)

View File

@ -9,7 +9,6 @@
"scripts": {
"lint:js": "eslint --cache 'src/**/*.[jt]s?(x)'",
"start": "TS_NODE_TRANSPILE_ONLY=true sb dev -p 9001 -c ./src",
"start:chromatic": "CHROMATIC=true TS_NODE_TRANSPILE_ONLY=true sb dev -p 9001 -c ./src",
"build": "TS_NODE_TRANSPILE_ONLY=true sb build -c ./src",
"test": "echo no tests"
},

View File

@ -1,7 +0,0 @@
.theme-wrapper {
padding: 1rem;
color: var(--body-color);
background-color: var(--body-bg);
position: relative;
min-height: 50vh;
}

View File

@ -1,30 +0,0 @@
import { type FunctionComponent, type PropsWithChildren, useState } from 'react'
import classNames from 'classnames'
import { PopoverRoot } from '@sourcegraph/wildcard'
import { ChromaticThemeContext, type ChromaticTheme } from '@sourcegraph/wildcard/src/stories'
import styles from './ChromaticRoot.module.scss'
interface ChromaticRootProps extends ChromaticTheme {}
export const ChromaticRoot: FunctionComponent<PropsWithChildren<ChromaticRootProps>> = props => {
const { theme, children } = props
const [rootReference, setElement] = useState<HTMLDivElement | null>(null)
const themeClass = theme === 'light' ? 'theme-light' : 'theme-dark'
return (
<ChromaticThemeContext.Provider value={{ theme }}>
{/* Required to render `Popover` inside of the `ChromaticRoot` component. */}
<PopoverRoot.Provider value={{ renderRoot: rootReference }}>
<div className={classNames(themeClass, styles.themeWrapper)}>
{children}
<div ref={setElement} />
</div>
</PopoverRoot.Provider>
</ChromaticThemeContext.Provider>
)
}

View File

@ -1 +0,0 @@
export * from './ChromaticRoot'

View File

@ -1 +0,0 @@
export * from './withChromaticThemes'

View File

@ -1,32 +0,0 @@
import type { ReactElement } from 'react'
import type { Decorator } from '@storybook/react'
import { ChromaticRoot } from './ChromaticRoot'
/**
* The global Storybook decorator used to snapshot stories with multiple themes in Chromatic.
*
* It's a recommended way of achieving this goal:
* https://www.chromatic.com/docs/faq#do-you-support-taking-snapshots-of-a-component-with-multiple-the
*
* If the `chromatic.enableDarkMode` story parameter is set to `true`, the story will
* be rendered twice in Chromatic in light and dark modes.
*/
export const withChromaticThemes: Decorator<ReactElement> = (StoryFunc, { parameters }) => {
if (parameters?.chromatic?.enableDarkMode) {
return (
<>
<ChromaticRoot theme="light">
<StoryFunc />
</ChromaticRoot>
<ChromaticRoot theme="dark">
<StoryFunc />
</ChromaticRoot>
</>
)
}
return <StoryFunc />
}

View File

@ -1,6 +1,3 @@
import { getEnvironmentBoolean } from '@sourcegraph/build-config'
export const ENVIRONMENT_CONFIG = {
STORIES_GLOB: process.env.STORIES_GLOB,
CHROMATIC: getEnvironmentBoolean('CHROMATIC'),
}

View File

@ -3,9 +3,8 @@ import path from 'path'
import type { StorybookConfigVite } from '@storybook/builder-vite'
import type { StorybookConfig as ReactViteStorybookConfig } from '@storybook/react-vite'
import type { StorybookConfig } from '@storybook/types'
import turbosnap from 'vite-plugin-turbosnap'
import { ROOT_PATH, STATIC_ASSETS_PATH, getEnvironmentBoolean } from '@sourcegraph/build-config'
import { ROOT_PATH, STATIC_ASSETS_PATH } from '@sourcegraph/build-config'
import { ENVIRONMENT_CONFIG } from './environment-config'
@ -26,12 +25,7 @@ const getStoriesGlob = (): string[] => {
}
const config: StorybookConfig & StorybookConfigVite & ReactViteStorybookConfig = {
// TODO: This has to be an object and not a string for now due to a bug in Chromatic
// that would cause the builder to not be identified correctly.
framework: {
name: '@storybook/react-vite',
options: {},
},
framework: '@storybook/react-vite',
staticDirs: [path.resolve(__dirname, '../assets'), STATIC_ASSETS_PATH],
stories: getStoriesGlob(),
@ -56,15 +50,6 @@ const config: StorybookConfig & StorybookConfigVite & ReactViteStorybookConfig =
},
viteFinal: (config, { configType }) => {
const isChromatic = getEnvironmentBoolean('CHROMATIC')
config.define = { ...config.define, 'process.env.CHROMATIC': isChromatic }
if (isChromatic && configType === 'PRODUCTION') {
// eslint-disable-next-line no-console
console.log('Using TurboSnap plugin!')
config.plugins = config.plugins ?? []
config.plugins.push(turbosnap({ rootDir: config.root ?? ROOT_PATH }))
}
config.build = {
...config.build,
minify: false,
@ -114,23 +99,4 @@ const config: StorybookConfig & StorybookConfigVite & ReactViteStorybookConfig =
},
}
// TODO: We need to replace the @storybook/addon-storysource plugin with an object
// definition to supply options here because chromatic CLI does not properly understand
// the configured addons otherwise.
const idx = config.addons?.findIndex(addon => addon === '@storybook/addon-storysource')
if (idx !== undefined && idx >= 0) {
config.addons![idx] = {
name: '@storybook/addon-storysource',
options: {
rule: {
test: /\.story\.tsx?$/,
},
sourceLoaderOptions: {
injectStoryParameters: false,
prettierConfig: { printWidth: 80, singleQuote: false },
},
},
}
}
module.exports = config

View File

@ -7,14 +7,12 @@ import { withConsole } from '@storybook/addon-console'
import type { DecoratorFn, Parameters } from '@storybook/react'
import { setLinkComponent, AnchorLink } from '@sourcegraph/wildcard'
import { isChromatic } from '@sourcegraph/wildcard/src/stories'
import { withChromaticThemes } from './decorators/withChromaticThemes'
import { themeDark, themeLight, THEME_DARK_CLASS, THEME_LIGHT_CLASS } from './themes'
const withConsoleDecorator: DecoratorFn = (storyFunc, context): ReactElement => withConsole()(storyFunc)(context)
export const decorators = [withConsoleDecorator, isChromatic() && withChromaticThemes].filter(Boolean)
export const decorators = [withConsoleDecorator].filter(Boolean)
export const parameters: Parameters = {
layout: 'fullscreen',
@ -31,36 +29,12 @@ export const parameters: Parameters = {
light: themeLight,
dark: themeDark,
},
// disables snapshotting for all stories by default
chromatic: { disableSnapshot: true },
}
configureActions({ depth: 100, limit: 20 })
setLinkComponent(AnchorLink)
// Default to light theme for Chromatic and "Open canvas in new tab" button.
// addon-dark-mode will override this if it's running.
if (!document.body.classList.contains('theme-dark')) {
document.body.classList.add('theme-light')
}
// Default to light theme for Chromatic and "Open canvas in new tab" button.
// addon-dark-mode will override this if it's running.
if (!document.body.classList.contains('theme-dark')) {
document.body.classList.add('theme-light')
}
if (isChromatic()) {
const style = document.createElement('style')
style.innerHTML = `
.monaco-editor .cursor {
visibility: hidden !important;
}
`
document.head.append(style)
}
declare global {
interface Window {
STORYBOOK_ENV?: string

View File

@ -11,9 +11,7 @@ import { CloudSignUpPage } from './CloudSignUpPage'
const config: Meta = {
title: 'web/auth/CloudSignUpPage',
parameters: {
chromatic: { disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -8,9 +8,7 @@ import { RequestAccessPage } from './RequestAccessPage'
const config: Meta = {
title: 'web/auth/RequestAccessPage',
parameters: {
chromatic: { disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -9,9 +9,7 @@ import { ResetPasswordPage } from './ResetPasswordPage'
const config: Meta = {
title: 'web/auth/ResetPasswordPage',
parameters: {
chromatic: { disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -9,9 +9,7 @@ import { SignInPage, type SignInPageProps } from './SignInPage'
const config: Meta = {
title: 'web/auth/SignInPage',
parameters: {
chromatic: { disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -10,9 +10,7 @@ import { SignUpPage } from './SignUpPage'
const config: Meta = {
title: 'web/auth/SignUpPage',
parameters: {
chromatic: { disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -9,9 +9,7 @@ import { UnlockAccountPage } from './UnlockAccount'
const config: Meta = {
title: 'web/auth/UnlockAccountPage',
parameters: {
chromatic: { disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -9,9 +9,7 @@ import { VsCodeSignUpPage, type VsCodeSignUpPageProps } from './VsCodeSignUpPage
const config: Meta = {
title: 'web/auth/VsCodeSignUpPage',
parameters: {
chromatic: { disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -14,9 +14,6 @@ const config: Meta = {
parameters: {
component: ReferencesPanel,
chromatic: {
disableSnapshot: false,
},
},
}

View File

@ -27,7 +27,6 @@ const config: Meta = {
type: 'figma',
url: 'https://www.figma.com/file/Xc4M24VTQq8itU0Lgb1Wwm/RFC-159-Visual-Design?node-id=66%3A611',
},
chromatic: { viewports: [769, 1200] },
},
}

View File

@ -31,10 +31,6 @@ const config: Meta = {
type: 'figma',
url: 'https://www.figma.com/file/NIsN34NH7lPu04olBzddTw/Design-Refresh-Systemization-source-of-truth?node-id=2877%3A35469',
},
chromatic: {
enableDarkMode: true,
disableSnapshot: false,
},
},
decorators: [decorator],
}

View File

@ -13,12 +13,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/External services/AddExternalServicesPage',
decorators: [decorator],
parameters: {
chromatic: {
// Delay screenshot taking, so Monaco has some time to get syntax highlighting prepared.
delay: 2000,
},
},
parameters: {},
}
export default config

View File

@ -25,12 +25,7 @@ const decorator: Decorator = story => (
const config: Meta = {
title: 'web/External services/ExternalServiceEditPage',
parameters: {
chromatic: {
// Delay screenshot taking, so Monaco has some time to get syntax highlighting prepared.
delay: 2000,
},
},
parameters: {},
decorators: [decorator],
}

View File

@ -11,9 +11,7 @@ const decorator: Decorator = story => <WebStory>{() => <div className="p-3 conta
const config: Meta = {
title: 'web/External services/ExternalServiceSyncJobNode',
decorators: [decorator],
parameters: {
chromatic: { disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -11,11 +11,7 @@ const decorator: Decorator = story => <WebStory>{() => story()}</WebStory>
const config: Meta = {
title: 'web/FuzzyFinder',
decorators: [decorator],
parameters: {
chromatic: {
disableSnapshot: false,
},
},
parameters: {},
}
export default config

View File

@ -69,7 +69,7 @@ export const Duration: React.FunctionComponent<React.PropsWithChildren<DurationP
return (
<div
className={classNames('chromatic-ignore', { [styles.stableWidth]: stableWidth }, className)}
className={classNames({ [styles.stableWidth]: stableWidth }, className)}
{...props}
role={end === undefined ? 'timer' : undefined}
>

View File

@ -15,12 +15,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/batches/settings/specs/BatchSpecsPage',
decorators: [decorator],
parameters: {
chromatic: {
viewports: [320, 576, 978, 1440],
disableSnapshot: false,
},
},
parameters: {},
}
export default config

View File

@ -16,9 +16,9 @@ import { MonacoEditor } from '@sourcegraph/shared/src/components/MonacoEditor'
import batchSpecSchemaJSON from '../../../../../../../../schema/batch_spec.schema.json'
import { requestGraphQL } from '../../../../../backend/graphql'
import type {
Scalars,
BatchSpecExecutionAvailableSecretKeysResult,
BatchSpecExecutionAvailableSecretKeysVariables,
Scalars,
} from '../../../../../graphql-operations'
import { BATCH_SPEC_EXECUTION_AVAILABLE_SECRET_KEYS } from './backend'
@ -125,7 +125,7 @@ export class MonacoBatchSpecEditor extends React.PureComponent<Props, State> {
public render(): JSX.Element | null {
return (
<MonacoEditor
className={classNames('chromatic-ignore', styles.editor, this.props.className)}
className={classNames(styles.editor, this.props.className)}
language="yaml"
height="auto"
isLightTheme={this.props.isLightTheme}
@ -196,7 +196,7 @@ function setDiagnosticsOptions(editor: typeof monaco, batchChangeName: string, a
const schema = cloneDeep(batchSpecSchemaJSON)
// Temporarily remove the mount field from the schema, so it does not show up in the auto-suggestion.
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
delete schema.properties.steps.items.properties.mount

View File

@ -1,5 +1,4 @@
import type { Decorator, Meta, StoryFn } from '@storybook/react'
import { addMinutes } from 'date-fns'
import { of } from 'rxjs'
import { MATCH_ANY_PARAMETERS, type MockedResponses, WildcardMockLink } from 'wildcard-mock-link'
@ -45,12 +44,6 @@ const config: Meta = {
title: 'web/batches/batch-spec/execute/ExecuteBatchSpecPage',
decorators: [decorator],
parameters: {
chromatic: {
disableSnapshot: false,
},
},
}
export default config
@ -107,21 +100,13 @@ const buildWorkspacesQuery =
() =>
of(mockWorkspaces(50, workspaceFields).node.workspaceResolution!.workspaces)
// A true executing batch spec wouldn't have a finishedAt set, but we need to have one so
// that Chromatic doesn't exhibit flakiness based on how long it takes to actually take
// the snapshot, since the timer in ExecuteBatchSpecPage is live in that case.
const EXECUTING_BATCH_SPEC_WITH_END_TIME = {
...EXECUTING_BATCH_SPEC,
finishedAt: addMinutes(Date.parse(EXECUTING_BATCH_SPEC.startedAt!), 15).toISOString(),
}
export const Executing: StoryFn = () => (
<WebStory
path="/users/:username/batch-changes/:batchChangeName/executions/:batchSpecID/*"
initialEntries={['/users/my-username/batch-changes/my-batch-change/executions/spec1234']}
>
{props => (
<MockedTestProvider link={new WildcardMockLink(buildMocks({ ...EXECUTING_BATCH_SPEC_WITH_END_TIME }))}>
<MockedTestProvider link={new WildcardMockLink(buildMocks({ ...EXECUTING_BATCH_SPEC }))}>
<ExecuteBatchSpecPage
{...props}
namespace={{ __typename: 'User', url: '', id: 'user1234' }}
@ -134,22 +119,6 @@ export const Executing: StoryFn = () => (
</WebStory>
)
// A true processing workspace wouldn't have a finishedAt set, but we need to have one so
// that Chromatic doesn't exhibit flakiness based on how long it takes to actually take
// the snapshot, since the timer in the workspace details section is live in that case.
const PROCESSING_WORKSPACE_WITH_END_TIMES = {
...PROCESSING_WORKSPACE,
finishedAt: addMinutes(Date.parse(PROCESSING_WORKSPACE.startedAt!), 15).toISOString(),
steps: [
PROCESSING_WORKSPACE.steps[0],
{
...PROCESSING_WORKSPACE.steps[1],
startedAt: null,
},
PROCESSING_WORKSPACE.steps[2],
],
}
export const ExecuteWithAWorkspaceSelected: StoryFn = () => (
<WebStory
path="/users/:username/batch-changes/:batchChangeName/executions/:batchSpecID/*"
@ -161,13 +130,13 @@ export const ExecuteWithAWorkspaceSelected: StoryFn = () => (
<MockedTestProvider
link={
new WildcardMockLink([
...buildMocks({ ...EXECUTING_BATCH_SPEC_WITH_END_TIME }),
...buildMocks({ ...EXECUTING_BATCH_SPEC }),
{
request: {
query: getDocumentNode(BATCH_SPEC_WORKSPACE_BY_ID),
variables: MATCH_ANY_PARAMETERS,
},
result: { data: { node: PROCESSING_WORKSPACE_WITH_END_TIMES } },
result: { data: { node: PROCESSING_WORKSPACE } },
nMatches: Number.POSITIVE_INFINITY,
},
])

View File

@ -10,11 +10,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/batches/close/BatchChangeCloseAlert',
decorators: [decorator],
parameters: {
chromatic: {
viewports: [320, 576, 978, 1440],
},
},
parameters: {},
argTypes: {
viewerCanAdminister: {
control: { type: 'boolean' },

View File

@ -27,12 +27,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/batches/close/BatchChangeClosePage',
decorators: [decorator],
parameters: {
chromatic: {
viewports: [320, 576, 978, 1440],
disableSnapshot: false,
},
},
parameters: {},
}
export default config

View File

@ -15,11 +15,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/batches/create/ConfigurationForm',
decorators: [decorator],
parameters: {
chromatic: {
disableSnapshot: false,
},
},
parameters: {},
}
export default config

View File

@ -17,11 +17,7 @@ const decorator: Decorator = story => (
const config: Meta = {
title: 'web/batches/create/CreateBatchChangePage',
decorators: [decorator],
parameters: {
chromatic: {
disableSnapshot: false,
},
},
parameters: {},
}
export default config

View File

@ -37,10 +37,6 @@ const config: Meta<Args> = {
title: 'web/batches/details/BatchChangeDetailsPage',
decorators: [decorator],
parameters: {
chromatic: {
viewports: [320, 576, 978, 1440],
disableSnapshot: false,
},
controls: {
exclude: ['url', 'supersededBatchSpec'],
},

View File

@ -30,12 +30,7 @@ const config: Meta = {
title: 'web/batches/list/BatchChangeListPage',
decorators: [decorator],
parameters: {
chromatic: {
viewports: [320, 576, 978, 1440],
disableSnapshot: false,
},
},
parameters: {},
}
export default config

View File

@ -1,13 +1,10 @@
import type { Meta, Decorator, StoryFn, StoryObj } from '@storybook/react'
import type { Decorator, Meta, StoryFn, StoryObj } from '@storybook/react'
import classNames from 'classnames'
import { subDays } from 'date-fns'
import { isChromatic } from '@sourcegraph/wildcard/src/stories'
import { WebStory } from '../../../components/WebStory'
import { BatchChangeNode } from './BatchChangeNode'
import { nodes, now } from './testData'
import { nodes } from './testData'
import styles from './BatchChangeListPage.module.scss'
@ -43,7 +40,6 @@ const Template: StoryFn /* <{ node: ListBatchChange }>*/ = ({ node, ...args }) =
{...props}
node={node}
displayNamespace={args.displayNamespace}
now={isChromatic() ? () => subDays(now, 5) : undefined}
isExecutionEnabled={false}
/>
)}

View File

@ -2,7 +2,7 @@ import React from 'react'
import classNames from 'classnames'
import { CardBody, Card, H3, H4, Link, Code, ProductStatusBadge } from '@sourcegraph/wildcard'
import { Card, CardBody, Code, H3, H4, Link, ProductStatusBadge } from '@sourcegraph/wildcard'
import { DismissibleAlert } from '../../../components/DismissibleAlert'
@ -16,8 +16,7 @@ import styles from './BatchChangesListIntro.module.scss'
const CURRENT_VERSION = '5.4'
/**
* SHOW_CHANGELOG has to be set to true when a changelog entry is added for a release.
* After every release, this will be set back to `false`. Chromatic will also verify
* changes to this variable via visual regression testing.
* After every release, this will be set back to `false`.
*/
const SHOW_CHANGELOG = false

View File

@ -11,11 +11,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/batches/GettingStarted',
decorators: [decorator],
parameters: {
chromatic: {
disableSnapshot: false,
},
},
parameters: {},
argTypes: {
isSourcegraphDotCom: {
control: { type: 'boolean' },

View File

@ -29,12 +29,7 @@ const config: Meta = {
title: 'web/batches/preview/BatchChangePreviewPage',
decorators: [decorator],
parameters: {
chromatic: {
viewports: [320, 576, 978, 1440],
disableSnapshot: false,
},
},
parameters: {},
argTypes: {
supersedingBatchSpec: {
control: { type: 'boolean' },

View File

@ -12,11 +12,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/batches/preview/CreateUpdateBatchChangeAlert',
decorators: [decorator],
parameters: {
chromatic: {
viewports: [320, 576, 978, 1440],
},
},
parameters: {},
argTypes: {
viewerCanAdminister: {
control: { type: 'boolean' },

View File

@ -73,10 +73,4 @@ export const DefaultStory: StoryFn = args => {
)
}
DefaultStory.parameters = {
chromatic: {
viewports: [320, 576, 978, 1440],
},
}
DefaultStory.storyName = 'default'

View File

@ -96,12 +96,7 @@ const decorator: Decorator = story => <div className="p-3 container web-content"
const config: Meta = {
title: 'web/batches/repo/BatchChangeRepoPage',
decorators: [decorator],
parameters: {
chromatic: {
viewports: [320, 576, 978, 1440],
disableSnapshot: false,
},
},
parameters: {},
}
export default config

View File

@ -16,12 +16,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/batches/settings/AddCredentialModal',
decorators: [decorator],
parameters: {
chromatic: {
// Delay screenshot taking, so the modal has opened by the time the screenshot is taken.
delay: 2000,
},
},
parameters: {},
}
const user = {

View File

@ -12,12 +12,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/batches/settings/RemoveCredentialModal',
decorators: [decorator],
parameters: {
chromatic: {
// Delay screenshot taking, so the modal has opened by the time the screenshot is taken.
delay: 2000,
},
},
parameters: {},
}
export default config

View File

@ -43,10 +43,3 @@ export const View: StoryFn = () => (
)}
</WebStory>
)
View.parameters = {
chromatic: {
// Delay screenshot taking, so the modal has opened by the time the screenshot is taken.
delay: 2000,
},
}

View File

@ -15,11 +15,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/enterprise/code-monitoring/CodeMonitoringLogs',
decorators: [decorator],
parameters: {
chromatic: {
disableSnapshot: false,
},
},
parameters: {},
}
const mockedResponse: MockedResponse[] = [

View File

@ -18,13 +18,7 @@ import { mockCodeMonitorNodes } from './testing/util'
const config: Meta = {
title: 'web/enterprise/code-monitoring/CodeMonitoringPage',
parameters: {
chromatic: {
// Delay screenshot taking, so <CodeMonitoringPage /> is ready to show content.
delay: 600,
disableSnapshot: false,
},
},
parameters: {},
}
export default config

View File

@ -10,9 +10,7 @@ import { CreateCodeMonitorPage } from './CreateCodeMonitorPage'
const config: Meta = {
title: 'web/enterprise/code-monitoring/CreateCodeMonitorPage',
parameters: {
chromatic: { disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -44,5 +44,4 @@ ManageCodeMonitorPageStory.parameters = {
type: 'figma',
url: 'https://www.figma.com/file/Krh7HoQi0GFxtO2k399ZQ6/RFC-227-%E2%80%93-Code-monitoring-actions-and-notifications?node-id=246%3A11',
},
chromatic: { disableSnapshot: false },
}

View File

@ -10,9 +10,7 @@ import { DeleteMonitorModal } from './DeleteMonitorModal'
const config: Meta = {
title: 'web/enterprise/code-monitoring/DeleteMonitorModal',
parameters: {
chromatic: { disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -16,11 +16,6 @@ const config: Meta = {
type: 'Figma',
url: 'https://www.figma.com/file/Krh7HoQi0GFxtO2k399ZQ6/RFC-227-%E2%80%93-Code-monitoring-actions-and-notifications?node-id=3891%3A41568',
},
chromatic: {
delay: 600, // Delay screenshot for input validation debouncing
viewports: [720],
disableSnapshot: false,
},
},
}

View File

@ -11,9 +11,7 @@ import { EmailAction } from './EmailAction'
const config: Meta = {
title: 'web/enterprise/code-monitoring/actions/EmailAction',
parameters: {
chromatic: { disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -11,9 +11,7 @@ import { SlackWebhookAction } from './SlackWebhookAction'
const config: Meta = {
title: 'web/enterprise/code-monitoring/actions/SlackWebhookAction',
parameters: {
chromatic: { disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -11,9 +11,7 @@ import { WebhookAction } from './WebhookAction'
const config: Meta = {
title: 'web/enterprise/code-monitoring/actions/WebhookAction',
parameters: {
chromatic: { disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -11,12 +11,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/executors/secrets/AddSecretModal',
decorators: [decorator],
parameters: {
chromatic: {
// Delay screenshot taking, so the modal has opened by the time the screenshot is taken.
delay: 2000,
},
},
parameters: {},
}
export default config

View File

@ -21,12 +21,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/executors/secrets/ExecutorSecretsListPage',
decorators: [decorator],
parameters: {
chromatic: {
enableDarkMode: true,
disableSnapshot: false,
},
},
parameters: {},
}
export default config

View File

@ -14,12 +14,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/executors/secrets/RemoveSecretModal',
decorators: [decorator],
parameters: {
chromatic: {
// Delay screenshot taking, so the modal has opened by the time the screenshot is taken.
delay: 2000,
},
},
parameters: {},
}
export default config

View File

@ -17,12 +17,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/executors/secrets/SecretAccessLogsModal',
decorators: [decorator],
parameters: {
chromatic: {
// Delay screenshot taking, so the modal has opened by the time the screenshot is taken.
delay: 2000,
},
},
parameters: {},
}
export default config

View File

@ -12,12 +12,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/executors/secrets/UpdateSecretModal',
decorators: [decorator],
parameters: {
chromatic: {
// Delay screenshot taking, so the modal has opened by the time the screenshot is taken.
delay: 2000,
},
},
parameters: {},
}
export default config

View File

@ -20,12 +20,7 @@ import { SmartInsightsViewGrid } from './SmartInsightsViewGrid'
const defaultStory: Meta = {
title: 'web/insights/SmartInsightsViewGridExample',
decorators: [story => <WebStory>{() => story()}</WebStory>],
parameters: {
chromatic: {
viewports: [576, 1440],
enableDarkMode: true,
},
},
parameters: {},
}
export default defaultStory

View File

@ -24,11 +24,7 @@ import { BackendInsightView } from './BackendInsight'
const defaultStory: Meta = {
title: 'web/insights/BackendInsight',
decorators: [story => <WebStory>{() => story()}</WebStory>],
parameters: {
chromatic: {
disableSnapshot: false,
},
},
parameters: {},
}
export default defaultStory

View File

@ -1,7 +1,7 @@
import type { FC } from 'react'
import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary/useTemporarySetting'
import { Button, Modal, Link, H1, Text } from '@sourcegraph/wildcard'
import { Button, H1, Link, Modal, Text } from '@sourcegraph/wildcard'
import { useUiFeatures } from '../hooks'
@ -36,8 +36,6 @@ interface GaConfirmationModalContentProps {
/**
* Renders Code Insights Ga modal content component.
* Exported especially for storybook story component cause chromatic has a problem of rendering modals
* on CI.
*/
export const GaConfirmationModalContent: FC<GaConfirmationModalContentProps> = props => {
const { onAccept } = props

View File

@ -15,12 +15,7 @@ import { InsightsDashboardCreationPage } from './InsightsDashboardCreationPage'
const config: Meta = {
title: 'web/insights/InsightsDashboardCreationPage',
decorators: [story => <WebStory>{() => story()}</WebStory>],
parameters: {
chromatic: {
viewports: [576, 1440],
disableSnapshot: false,
},
},
parameters: {},
}
export default config

View File

@ -10,11 +10,7 @@ const decorator: Decorator = story => <WebStory>{() => story()}</WebStory>
const config: Meta = {
title: 'web/insights/EmptyInsightDashboard',
decorators: [decorator],
parameters: {
chromatic: {
viewports: [576, 1440],
},
},
parameters: {},
}
export default config

View File

@ -12,12 +12,7 @@ import { CaptureGroupCreationPage as CaptureGroupCreationPageComponent } from '.
const meta: Meta = {
title: 'web/insights/creation-ui/capture-group/CaptureGroupCreationPage',
decorators: [story => <WebStory>{() => <div className="p-3 container web-content">{story()}</div>}</WebStory>],
parameters: {
chromatic: {
viewports: [576, 1440],
disableSnapshot: false,
},
},
parameters: {},
}
export default meta

View File

@ -13,12 +13,7 @@ import { ComputeInsightCreationPage as ComputeInsightCreationPageComponent } fro
const defaultStory: Meta = {
title: 'web/insights/creation-ui/compute/ComputeInsightCreationPage',
decorators: [story => <WebStory>{() => story()}</WebStory>],
parameters: {
chromatic: {
viewports: [576, 1440],
disableSnapshot: false,
},
},
parameters: {},
}
export default defaultStory

View File

@ -12,12 +12,7 @@ import { IntroCreationPage } from './IntroCreationPage'
const config: Meta = {
title: 'web/insights/creation-ui/IntroPage',
decorators: [story => <WebStory>{() => story()}</WebStory>],
parameters: {
chromatic: {
viewports: [576, 978, 1440],
disableSnapshot: false,
},
},
parameters: {},
}
export default config

View File

@ -9,12 +9,7 @@ import { CaptureGroupInsightCard, LangStatsInsightCard, SearchInsightCard } from
const meta: Meta = {
title: 'web/insights/InsightCards',
decorators: [story => <WebStory>{() => story()}</WebStory>],
parameters: {
chromatic: {
viewports: [576, 1440],
disableSnapshot: false,
},
},
parameters: {},
}
export default meta

View File

@ -19,12 +19,7 @@ import { LangStatsInsightCreationPage as LangStatsInsightCreationPageComponent }
const defaultStory: Meta = {
title: 'web/insights/creation-ui/lang-stats/LangStatsInsightCreationPage',
decorators: [story => <WebStory>{() => story()}</WebStory>],
parameters: {
chromatic: {
viewports: [576, 1440],
disableSnapshot: false,
},
},
parameters: {},
}
export default defaultStory

View File

@ -13,12 +13,7 @@ import { SearchInsightCreationPage as SearchInsightCreationPageComponent } from
const defaultStory: Meta = {
title: 'web/insights/creation-ui/search/SearchInsightCreationPage',
decorators: [story => <WebStory>{() => story()}</WebStory>],
parameters: {
chromatic: {
viewports: [576, 1440],
disableSnapshot: false,
},
},
parameters: {},
}
export default defaultStory

View File

@ -21,9 +21,7 @@ import { RepositoryOwnEditPage } from './RepositoryOwnEditPage'
const config: Meta = {
title: 'web/enterprise/own/RepositoryOwnPage',
parameters: {
chromatic: { disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -17,9 +17,7 @@ import { GET_INSTANCE_OWN_STATS, GET_OWN_JOB_CONFIGURATIONS } from './query'
const config: Meta = {
title: 'web/enterprise/own/admin-ui/OwnAnalyticsPage',
parameters: {
chromatic: { disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -24,11 +24,7 @@ type SearchJob = SearchJobsResult['searchJobs']['nodes'][number]
const defaultStory: Meta = {
title: 'web/search-jobs',
decorators: [story => <WebStory>{() => story()}</WebStory>],
parameters: {
chromatic: {
disableSnapshot: false,
},
},
parameters: {},
}
export default defaultStory

View File

@ -19,9 +19,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/enterprise/searchContexts/DeleteSearchContextModal',
decorators: [decorator],
parameters: {
chromatic: { viewports: [1200], disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -17,9 +17,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/enterprise/searchContexts/SearchContextForm',
decorators: [decorator],
parameters: {
chromatic: { viewports: [1200], disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -18,9 +18,7 @@ const decorator: Decorator = story => <div className="p-3 container">{story()}</
const config: Meta = {
title: 'web/enterprise/searchContexts/SearchContextPage',
decorators: [decorator],
parameters: {
chromatic: { viewports: [1200], disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -19,9 +19,7 @@ const decorator: Decorator = story => (
const config: Meta = {
title: 'web/enterprise/searchContexts/SearchContextsListTab',
decorators: [decorator],
parameters: {
chromatic: { viewports: [1200, 767], disableSnapshot: false },
},
parameters: {},
}
export default config

View File

@ -11,11 +11,7 @@ const decorator: Decorator = story => <div style={{ width: '192px' }}>{story()}<
const config: Meta = {
title: 'web/site-admin/AdminSidebar',
decorators: [decorator],
parameters: {
chromatic: {
disableSnapshot: false,
},
},
parameters: {},
}
export default config

View File

@ -21,9 +21,6 @@ const config: Meta = {
parameters: {
component: GlobalAlert,
chromatic: {
disableSnapshot: false,
},
},
}

View File

@ -74,15 +74,7 @@ const decorator: Decorator<GlobalNavbarProps> = Story => {
const config: Meta<typeof GlobalNavbar> = {
title: 'web/nav/GlobalNav',
decorators: [decorator],
parameters: {
chromatic: {
disableSnapshot: false,
viewports: [
// 320, // TODO: Mobile size detection is not working in Storybook
576, 978,
],
},
},
parameters: {},
}
export default config

View File

@ -376,7 +376,7 @@ export const StatusMessagesNavItem: React.FunctionComponent<React.PropsWithChild
return (
<Popover isOpen={isOpen} onOpenChange={event => setIsOpen(event.isOpen)}>
<PopoverTrigger
className="nav-link py-0 px-0 chromatic-ignore"
className="nav-link py-0 px-0"
as={Button}
variant="link"
aria-label={isOpen ? 'Hide status messages' : 'Show status messages'}

View File

@ -17,10 +17,6 @@ const config: Meta = {
type: 'figma',
url: 'https://www.figma.com/file/HWLuLefEdev5KYtoEGHjFj/Sourcegraph-Components-Contractor?node-id=1346%3A0',
},
chromatic: {
enableDarkMode: true,
viewports: [600],
},
},
argTypes: {
isSourcegraphDotCom: {

Some files were not shown because too many files have changed in this diff Show More