From 40e7d96d3d337f4f17c5d4b994bf754d48628461 Mon Sep 17 00:00:00 2001 From: Matt Seddon <37993418+mattseddon@users.noreply.github.com> Date: Wed, 15 Mar 2023 09:53:26 +1100 Subject: [PATCH] Give Setup webview a single section (#3448) --- extension/src/setup/webview/contract.ts | 10 ++ webview/src/setup/components/App.tsx | 112 +++++------------- webview/src/setup/components/Experiments.tsx | 80 +++++++++++++ webview/src/setup/components/messages.ts | 34 ++++++ .../sectionContainer/SectionContainer.tsx | 19 ++- 5 files changed, 170 insertions(+), 85 deletions(-) create mode 100644 webview/src/setup/components/Experiments.tsx create mode 100644 webview/src/setup/components/messages.ts diff --git a/extension/src/setup/webview/contract.ts b/extension/src/setup/webview/contract.ts index d61fc70381..0919b06de6 100644 --- a/extension/src/setup/webview/contract.ts +++ b/extension/src/setup/webview/contract.ts @@ -8,3 +8,13 @@ export type SetupData = { projectInitialized: boolean pythonBinPath: string | undefined } + +export enum Section { + EXPERIMENTS = 'experiments' +} + +export const DEFAULT_SECTION_COLLAPSED = { + [Section.EXPERIMENTS]: false +} + +export type SectionCollapsed = typeof DEFAULT_SECTION_COLLAPSED diff --git a/webview/src/setup/components/App.tsx b/webview/src/setup/components/App.tsx index 83937c97ae..5fd71a75a3 100644 --- a/webview/src/setup/components/App.tsx +++ b/webview/src/setup/components/App.tsx @@ -1,19 +1,14 @@ -import { SetupData } from 'dvc/src/setup/webview/contract' import { - MessageFromWebviewType, - MessageToWebview -} from 'dvc/src/webview/contract' + DEFAULT_SECTION_COLLAPSED, + Section, + SetupData +} from 'dvc/src/setup/webview/contract' +import { MessageToWebview } from 'dvc/src/webview/contract' import React, { useCallback, useState } from 'react' -import { CliIncompatible } from './CliIncompatible' -import { CliUnavailable } from './CliUnavailable' -import { ProjectUninitialized } from './ProjectUninitialized' -import { NoData } from './NoData' -import { NeedsGitCommit } from './NeedsGitCommit' +import { SetupExperiments } from './Experiments' +import { SectionContainer } from '../../shared/components/sectionContainer/SectionContainer' import { useVsCodeMessaging } from '../../shared/hooks/useVsCodeMessaging' -import { sendMessage } from '../../shared/vscode' -import { EmptyState } from '../../shared/components/emptyState/EmptyState' -// eslint-disable-next-line sonarjs/cognitive-complexity export const App: React.FC = () => { const [cliCompatible, setCliCompatible] = useState( undefined @@ -32,6 +27,9 @@ export const App: React.FC = () => { const [isPythonExtensionInstalled, setIsPythonExtensionInstalled] = useState(false) const [hasData, setHasData] = useState(false) + const [sectionCollapsed, setSectionCollapsed] = useState< + typeof DEFAULT_SECTION_COLLAPSED + >(DEFAULT_SECTION_COLLAPSED) useVsCodeMessaging( useCallback( @@ -58,76 +56,28 @@ export const App: React.FC = () => { ) ) - const checkCompatibility = () => { - sendMessage({ type: MessageFromWebviewType.CHECK_CLI_COMPATIBLE }) - } - - const initializeGit = () => { - sendMessage({ - type: MessageFromWebviewType.INITIALIZE_GIT - }) - } - - const initializeDvc = () => { - sendMessage({ - type: MessageFromWebviewType.INITIALIZE_DVC - }) - } - - const showScmPanel = () => { - sendMessage({ type: MessageFromWebviewType.SHOW_SCM_PANEL }) - } - - const installDvc = () => { - sendMessage({ type: MessageFromWebviewType.INSTALL_DVC }) - } - - const selectPythonInterpreter = () => { - sendMessage({ type: MessageFromWebviewType.SELECT_PYTHON_INTERPRETER }) - } - - const setupWorkspace = () => { - sendMessage({ type: MessageFromWebviewType.SETUP_WORKSPACE }) - } - - if (cliCompatible === false) { - return - } - - if (cliCompatible === undefined) { - return ( - - ) - } - - if (!projectInitialized) { - return ( - + setSectionCollapsed({ + ...sectionCollapsed, + [Section.EXPERIMENTS]: !sectionCollapsed[Section.EXPERIMENTS] + }) + } + > + - ) - } - - if (needsGitCommit) { - return - } - - if (hasData === undefined) { - return Loading Project... - } - - if (!hasData) { - return - } - - return null + + ) } diff --git a/webview/src/setup/components/Experiments.tsx b/webview/src/setup/components/Experiments.tsx new file mode 100644 index 0000000000..f34d189367 --- /dev/null +++ b/webview/src/setup/components/Experiments.tsx @@ -0,0 +1,80 @@ +import React from 'react' +import { CliIncompatible } from './CliIncompatible' +import { CliUnavailable } from './CliUnavailable' +import { ProjectUninitialized } from './ProjectUninitialized' +import { + checkCompatibility, + initializeDvc, + initializeGit, + installDvc, + selectPythonInterpreter, + setupWorkspace, + showScmPanel +} from './messages' +import { NeedsGitCommit } from './NeedsGitCommit' +import { NoData } from './NoData' +import { EmptyState } from '../../shared/components/emptyState/EmptyState' + +export type SetupExperimentsProps = { + canGitInitialize: boolean | undefined + cliCompatible: boolean | undefined + hasData: boolean | undefined + isPythonExtensionInstalled: boolean + needsGitInitialized: boolean | undefined + needsGitCommit: boolean + projectInitialized: boolean + pythonBinPath: string | undefined +} + +export const SetupExperiments: React.FC = ({ + canGitInitialize, + cliCompatible, + hasData, + isPythonExtensionInstalled, + needsGitInitialized, + needsGitCommit, + projectInitialized, + pythonBinPath + // eslint-disable-next-line sonarjs/cognitive-complexity +}) => { + if (cliCompatible === false) { + return + } + + if (cliCompatible === undefined) { + return ( + + ) + } + + if (!projectInitialized) { + return ( + + ) + } + + if (needsGitCommit) { + return + } + + if (hasData === undefined) { + return Loading Project... + } + + if (!hasData) { + return + } + + return {"You're all setup"} +} diff --git a/webview/src/setup/components/messages.ts b/webview/src/setup/components/messages.ts new file mode 100644 index 0000000000..8ce16b3292 --- /dev/null +++ b/webview/src/setup/components/messages.ts @@ -0,0 +1,34 @@ +import { MessageFromWebviewType } from 'dvc/src/webview/contract' +import { sendMessage } from '../../shared/vscode' + +export const checkCompatibility = () => { + sendMessage({ type: MessageFromWebviewType.CHECK_CLI_COMPATIBLE }) +} + +export const initializeGit = () => { + sendMessage({ + type: MessageFromWebviewType.INITIALIZE_GIT + }) +} + +export const initializeDvc = () => { + sendMessage({ + type: MessageFromWebviewType.INITIALIZE_DVC + }) +} + +export const showScmPanel = () => { + sendMessage({ type: MessageFromWebviewType.SHOW_SCM_PANEL }) +} + +export const installDvc = () => { + sendMessage({ type: MessageFromWebviewType.INSTALL_DVC }) +} + +export const selectPythonInterpreter = () => { + sendMessage({ type: MessageFromWebviewType.SELECT_PYTHON_INTERPRETER }) +} + +export const setupWorkspace = () => { + sendMessage({ type: MessageFromWebviewType.SETUP_WORKSPACE }) +} diff --git a/webview/src/shared/components/sectionContainer/SectionContainer.tsx b/webview/src/shared/components/sectionContainer/SectionContainer.tsx index fc0384a0d9..c2b80228d6 100644 --- a/webview/src/shared/components/sectionContainer/SectionContainer.tsx +++ b/webview/src/shared/components/sectionContainer/SectionContainer.tsx @@ -1,6 +1,7 @@ import cx from 'classnames' import React, { MouseEvent } from 'react' import { Section as PlotsSection } from 'dvc/src/plots/webview/contract' +import { Section as SetupSection } from 'dvc/src/setup/webview/contract' import styles from './styles.module.scss' import { Icon } from '../Icon' import { ChevronDown, ChevronRight, Info } from '../icons' @@ -55,12 +56,22 @@ export const SectionDescription = { . + ), + // Setup Experiments + [SetupSection.EXPERIMENTS]: ( + + Configure the extension to start tracking and visualizing{' '} + + experiments + + . + ) } as const -export interface SectionContainerProps { +export interface SectionContainerProps { children: React.ReactNode - menuItems: IconMenuItemProps[] + menuItems?: IconMenuItemProps[] onToggleSection: () => void sectionCollapsed: boolean sectionKey: T @@ -73,10 +84,10 @@ const InfoIcon = () => ( ) export const SectionContainer: React.FC< - SectionContainerProps + SectionContainerProps > = ({ children, - menuItems, + menuItems = [], onToggleSection, sectionCollapsed, sectionKey,