diff --git a/extension/src/setup/webview/messages.ts b/extension/src/setup/webview/messages.ts index 118e2c40a3..b43d4597ee 100644 --- a/extension/src/setup/webview/messages.ts +++ b/extension/src/setup/webview/messages.ts @@ -97,7 +97,7 @@ export class WebviewMessages { ConfigKey.STUDIO_SHARE_EXPERIMENTS_LIVE, message.payload ) - case MessageFromWebviewType.SHOW_EXPERIMENTS: + case MessageFromWebviewType.OPEN_EXPERIMENTS_WEBVIEW: return this.showExperiments() default: diff --git a/extension/src/test/suite/setup/index.test.ts b/extension/src/test/suite/setup/index.test.ts index 2dd09bf6fb..980386353d 100644 --- a/extension/src/test/suite/setup/index.test.ts +++ b/extension/src/test/suite/setup/index.test.ts @@ -791,6 +791,22 @@ suite('Setup Test Suite', () => { expect(mockDelete).to.be.calledWithExactly(STUDIO_ACCESS_TOKEN_KEY) }) + it('should handle a message to open the experiments webview', async () => { + const { messageSpy, setup, mockOpenExperiments } = buildSetup(disposable) + + const webview = await setup.showWebview() + await webview.isReady() + + const mockMessageReceived = getMessageReceivedEmitter(webview) + + messageSpy.resetHistory() + mockMessageReceived.fire({ + type: MessageFromWebviewType.OPEN_EXPERIMENTS_WEBVIEW + }) + + expect(mockOpenExperiments).to.be.calledOnce + }).timeout(WEBVIEW_TEST_TIMEOUT) + it('should send the appropriate messages to the webview to focus different sections', async () => { const { setup, messageSpy } = buildSetup(disposable) messageSpy.restore() diff --git a/extension/src/webview/contract.ts b/extension/src/webview/contract.ts index 645f4b09a2..4ab07a8467 100644 --- a/extension/src/webview/contract.ts +++ b/extension/src/webview/contract.ts @@ -19,6 +19,7 @@ export enum MessageFromWebviewType { CREATE_BRANCH_FROM_EXPERIMENT = 'create-branch-from-experiment', FOCUS_FILTERS_TREE = 'focus-filters-tree', FOCUS_SORTS_TREE = 'focus-sorts-tree', + OPEN_EXPERIMENTS_WEBVIEW = 'open-experiments-webview', OPEN_PARAMS_FILE_TO_THE_SIDE = 'open-params-file-to-the-side', OPEN_PLOTS_WEBVIEW = 'open-plots-webview', OPEN_STUDIO = 'open-studio', @@ -52,7 +53,6 @@ export enum MessageFromWebviewType { SET_STUDIO_SHARE_EXPERIMENTS_LIVE = 'set-studio-share-experiments-live', SHARE_EXPERIMENT_AS_BRANCH = 'share-experiment-as-branch', SHARE_EXPERIMENT_AS_COMMIT = 'share-experiment-as-commit', - SHOW_EXPERIMENTS = 'show-experiments', TOGGLE_METRIC = 'toggle-metric', TOGGLE_PLOTS_SECTION = 'toggle-plots-section', REMOVE_CUSTOM_PLOTS = 'remove-custom-plots', @@ -238,7 +238,7 @@ export type MessageFromWebview = | { type: MessageFromWebviewType.SAVE_STUDIO_TOKEN } | { type: MessageFromWebviewType.ADD_CONFIGURATION } | { type: MessageFromWebviewType.ZOOM_PLOT } - | { type: MessageFromWebviewType.SHOW_EXPERIMENTS } + | { type: MessageFromWebviewType.OPEN_EXPERIMENTS_WEBVIEW } export type MessageToWebview = { type: MessageToWebviewType.SET_DATA diff --git a/webview/src/setup/components/App.test.tsx b/webview/src/setup/components/App.test.tsx index 652192c283..77557f558e 100644 --- a/webview/src/setup/components/App.test.tsx +++ b/webview/src/setup/components/App.test.tsx @@ -399,6 +399,29 @@ describe('App', () => { screen.queryByText('Your project contains no data') ).not.toBeInTheDocument() }) + + it('should enable the user to open the experiments webview when they have completed onboarding', () => { + renderApp({ + canGitInitialize: false, + cliCompatible: true, + hasData: true, + isPythonExtensionInstalled: true, + isStudioConnected: true, + needsGitCommit: false, + needsGitInitialized: false, + projectInitialized: true, + pythonBinPath: 'python', + sectionCollapsed: undefined, + shareLiveToStudio: false + }) + mockPostMessage.mockClear() + const button = screen.getByText('Show Experiments') + fireEvent.click(button) + expect(mockPostMessage).toHaveBeenCalledTimes(1) + expect(mockPostMessage).toHaveBeenCalledWith({ + type: MessageFromWebviewType.OPEN_EXPERIMENTS_WEBVIEW + }) + }) }) describe('Studio not connected', () => { diff --git a/webview/src/setup/components/Experiments.tsx b/webview/src/setup/components/Experiments.tsx index 12725454bd..ef186379f2 100644 --- a/webview/src/setup/components/Experiments.tsx +++ b/webview/src/setup/components/Experiments.tsx @@ -18,6 +18,30 @@ import { EmptyState } from '../../shared/components/emptyState/EmptyState' import { IconButton } from '../../shared/components/button/IconButton' import { Beaker } from '../../shared/components/icons' +const ProjectSetup: React.FC<{ hasData: boolean | undefined }> = ({ + hasData +}) => { + if (hasData === undefined) { + return Loading Project... + } + + if (!hasData) { + return + } + + return ( + +

Setup Complete

+ + + ) +} + export type ExperimentsProps = { canGitInitialize: boolean | undefined cliCompatible: boolean | undefined @@ -38,7 +62,6 @@ export const Experiments: React.FC = ({ needsGitCommit, projectInitialized, pythonBinPath - // eslint-disable-next-line sonarjs/cognitive-complexity }) => { if (cliCompatible === false) { return @@ -71,23 +94,5 @@ export const Experiments: React.FC = ({ return } - if (hasData === undefined) { - return Loading Project... - } - - if (!hasData) { - return - } - - return ( - -

{"You're all setup"}

- - - ) + return } diff --git a/webview/src/setup/components/messages.ts b/webview/src/setup/components/messages.ts index d9a2ffb485..e7f7af33b4 100644 --- a/webview/src/setup/components/messages.ts +++ b/webview/src/setup/components/messages.ts @@ -34,7 +34,7 @@ export const setupWorkspace = () => { } export const showExperiments = () => { - sendMessage({ type: MessageFromWebviewType.SHOW_EXPERIMENTS }) + sendMessage({ type: MessageFromWebviewType.OPEN_EXPERIMENTS_WEBVIEW }) } export const openStudio = () => diff --git a/webview/src/shared/components/Icon.tsx b/webview/src/shared/components/Icon.tsx index 873b454248..b7e6d29f9e 100644 --- a/webview/src/shared/components/Icon.tsx +++ b/webview/src/shared/components/Icon.tsx @@ -15,9 +15,8 @@ export const Icon: React.FC = ({ ...other }) => { const I = icon - const fill = 'magenta' // This color is used to make sure we change it in CSS const w = width || 20 const h = height || 20 - return + return } diff --git a/webview/src/shared/components/icons/Beaker.tsx b/webview/src/shared/components/icons/Beaker.tsx index 4f664318a9..b9d50e733b 100644 --- a/webview/src/shared/components/icons/Beaker.tsx +++ b/webview/src/shared/components/icons/Beaker.tsx @@ -6,12 +6,10 @@ const SvgBeaker = (props: SVGProps) => ( height={16} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" + fill="currentColor" {...props} > - + ) export default SvgBeaker