mirror of
https://github.com/sourcegraph/sourcegraph.git
synced 2026-02-06 11:01:44 +00:00
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:
parent
9145768648
commit
1fe876e89c
@ -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: [
|
||||
{
|
||||
|
||||
@ -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} />
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,
|
||||
},
|
||||
}
|
||||
|
||||
@ -8,9 +8,7 @@ import { SyntaxHighlightedSearchQuery } from './SyntaxHighlightedSearchQuery'
|
||||
|
||||
const config: Meta = {
|
||||
title: 'branded/search-ui/SyntaxHighlightedSearchQuery',
|
||||
parameters: {
|
||||
chromatic: { viewports: [480] },
|
||||
},
|
||||
parameters: {},
|
||||
}
|
||||
|
||||
export default config
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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],
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 },
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@ -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 },
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -162,10 +162,3 @@ AllOptionsPages.args = {
|
||||
version: '0.0.0',
|
||||
showSourcegraphComAlert: false,
|
||||
}
|
||||
|
||||
AllOptionsPages.parameters = {
|
||||
chromatic: {
|
||||
enableDarkMode: true,
|
||||
disableSnapshot: false,
|
||||
},
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -86,9 +86,3 @@ export const JetBrainsSearchBoxStory: StoryFn = () => {
|
||||
</WildcardThemeContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
JetBrainsSearchBoxStory.parameters = {
|
||||
chromatic: {
|
||||
disableSnapshot: false,
|
||||
},
|
||||
}
|
||||
|
||||
@ -123,9 +123,3 @@ export const JetBrainsSearchResultListStory: StoryFn = () => {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
JetBrainsSearchResultListStory.parameters = {
|
||||
chromatic: {
|
||||
disableSnapshot: false,
|
||||
},
|
||||
}
|
||||
|
||||
@ -63,12 +63,6 @@ export const CommandAction: StoryFn = () => (
|
||||
)
|
||||
|
||||
CommandAction.storyName = 'Command action'
|
||||
CommandAction.parameters = {
|
||||
chromatic: {
|
||||
enableDarkMode: true,
|
||||
disableSnapshot: false,
|
||||
},
|
||||
}
|
||||
|
||||
export const LinkAction: StoryFn = () => (
|
||||
<ActionItem
|
||||
|
||||
@ -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],
|
||||
}
|
||||
|
||||
|
||||
@ -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",
|
||||
],
|
||||
)
|
||||
|
||||
@ -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"
|
||||
},
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
.theme-wrapper {
|
||||
padding: 1rem;
|
||||
color: var(--body-color);
|
||||
background-color: var(--body-bg);
|
||||
position: relative;
|
||||
min-height: 50vh;
|
||||
}
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from './ChromaticRoot'
|
||||
@ -1 +0,0 @@
|
||||
export * from './withChromaticThemes'
|
||||
@ -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 />
|
||||
}
|
||||
@ -1,6 +1,3 @@
|
||||
import { getEnvironmentBoolean } from '@sourcegraph/build-config'
|
||||
|
||||
export const ENVIRONMENT_CONFIG = {
|
||||
STORIES_GLOB: process.env.STORIES_GLOB,
|
||||
CHROMATIC: getEnvironmentBoolean('CHROMATIC'),
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -11,9 +11,7 @@ import { CloudSignUpPage } from './CloudSignUpPage'
|
||||
|
||||
const config: Meta = {
|
||||
title: 'web/auth/CloudSignUpPage',
|
||||
parameters: {
|
||||
chromatic: { disableSnapshot: false },
|
||||
},
|
||||
parameters: {},
|
||||
}
|
||||
|
||||
export default config
|
||||
|
||||
@ -8,9 +8,7 @@ import { RequestAccessPage } from './RequestAccessPage'
|
||||
|
||||
const config: Meta = {
|
||||
title: 'web/auth/RequestAccessPage',
|
||||
parameters: {
|
||||
chromatic: { disableSnapshot: false },
|
||||
},
|
||||
parameters: {},
|
||||
}
|
||||
|
||||
export default config
|
||||
|
||||
@ -9,9 +9,7 @@ import { ResetPasswordPage } from './ResetPasswordPage'
|
||||
|
||||
const config: Meta = {
|
||||
title: 'web/auth/ResetPasswordPage',
|
||||
parameters: {
|
||||
chromatic: { disableSnapshot: false },
|
||||
},
|
||||
parameters: {},
|
||||
}
|
||||
|
||||
export default config
|
||||
|
||||
@ -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
|
||||
|
||||
@ -10,9 +10,7 @@ import { SignUpPage } from './SignUpPage'
|
||||
|
||||
const config: Meta = {
|
||||
title: 'web/auth/SignUpPage',
|
||||
parameters: {
|
||||
chromatic: { disableSnapshot: false },
|
||||
},
|
||||
parameters: {},
|
||||
}
|
||||
|
||||
export default config
|
||||
|
||||
@ -9,9 +9,7 @@ import { UnlockAccountPage } from './UnlockAccount'
|
||||
|
||||
const config: Meta = {
|
||||
title: 'web/auth/UnlockAccountPage',
|
||||
parameters: {
|
||||
chromatic: { disableSnapshot: false },
|
||||
},
|
||||
parameters: {},
|
||||
}
|
||||
|
||||
export default config
|
||||
|
||||
@ -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
|
||||
|
||||
@ -14,9 +14,6 @@ const config: Meta = {
|
||||
|
||||
parameters: {
|
||||
component: ReferencesPanel,
|
||||
chromatic: {
|
||||
disableSnapshot: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@ -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] },
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@ -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],
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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],
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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}
|
||||
>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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,
|
||||
},
|
||||
])
|
||||
|
||||
@ -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' },
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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'],
|
||||
},
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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' },
|
||||
|
||||
@ -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' },
|
||||
|
||||
@ -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' },
|
||||
|
||||
@ -73,10 +73,4 @@ export const DefaultStory: StoryFn = args => {
|
||||
)
|
||||
}
|
||||
|
||||
DefaultStory.parameters = {
|
||||
chromatic: {
|
||||
viewports: [320, 576, 978, 1440],
|
||||
},
|
||||
}
|
||||
|
||||
DefaultStory.storyName = 'default'
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 = {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,
|
||||
},
|
||||
}
|
||||
|
||||
@ -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[] = [
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 },
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -21,9 +21,7 @@ import { RepositoryOwnEditPage } from './RepositoryOwnEditPage'
|
||||
|
||||
const config: Meta = {
|
||||
title: 'web/enterprise/own/RepositoryOwnPage',
|
||||
parameters: {
|
||||
chromatic: { disableSnapshot: false },
|
||||
},
|
||||
parameters: {},
|
||||
}
|
||||
|
||||
export default config
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -21,9 +21,6 @@ const config: Meta = {
|
||||
|
||||
parameters: {
|
||||
component: GlobalAlert,
|
||||
chromatic: {
|
||||
disableSnapshot: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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'}
|
||||
|
||||
@ -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
Loading…
Reference in New Issue
Block a user