Refactor empty state code for experiments and plots (#4075)

Author: mattseddon

webview/src/experiments/components/ErrorState.tsx

@@ -24,16 +24,15 @@ import {
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { Table } from './table/Table'
 import styles from './table/styles.module.scss'
-import { ErrorState } from './ErrorState'
-import { AddColumns, Welcome } from './GetStarted'
+import { ErrorState } from './emptyState/ErrorState'
+import { GetStarted } from './emptyState/GetStarted'
 import { RowSelectionProvider } from './table/RowSelectionContext'
 import { CellValue } from './table/content/Cell'
 import { AddStage } from './AddStage'
 import { ExperimentCell } from './table/content/ExperimentCell'
 import { buildColumns, columnHelper } from '../util/buildColumns'
 import { sendMessage } from '../../shared/vscode'
 import { WebviewWrapper } from '../../shared/components/webviewWrapper/WebviewWrapper'
-import { GetStarted } from '../../shared/components/getStarted/GetStarted'
 import { EmptyState } from '../../shared/components/emptyState/EmptyState'
 import { ExperimentsState } from '../store'
 import { EXPERIMENT_COLUMN_ID } from '../util/columns'
@@ -186,13 +185,7 @@ export const ExperimentsTable: React.FC = () => {
   const hasOnlyDefaultColumns = columns.length <= 1
   const hasOnlyWorkspace = data.length <= 1
   if (hasOnlyDefaultColumns || hasOnlyWorkspace) {
-    return (
-      <GetStarted
-        addItems={<AddColumns />}
-        showEmpty={!hasColumns || hasOnlyWorkspace}
-        welcome={<Welcome />}
-      />
-    )
+    return <GetStarted showWelcome={!hasColumns || hasOnlyWorkspace} />
   }
   return (
     <RowSelectionProvider>

webview/src/experiments/components/Experiments.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { StartButton } from '../../../shared/components/button/StartButton'
+import { selectColumns } from '../../util/messages'
+
+export const AddColumns: React.FC = () => (
+  <div>
+    <p>No Columns Selected.</p>
+    <StartButton onClick={selectColumns} text="Add Columns" />
+  </div>
+)

webview/src/experiments/components/GetStarted.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
+import { ErrorIcon } from '../../../shared/components/errorIcon/ErrorIcon'
+import { RefreshButton } from '../../../shared/components/button/RefreshButton'
+import { refreshData } from '../../util/messages'
+
+export const ErrorState: React.FC<{ cliError: string }> = ({ cliError }) => (
+  <EmptyState>
+    <ErrorIcon error={cliError} size={96} />
+    <p>No Experiments to Display.</p>
+    <RefreshButton onClick={refreshData} />
+  </EmptyState>
+)

webview/src/experiments/components/emptyState/AddColumns.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Welcome } from './Welcome'
+import { AddColumns } from './AddColumns'
+import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
+
+export const GetStarted: React.FC<{ showWelcome: boolean }> = ({
+  showWelcome
+}) => <EmptyState>{showWelcome ? <Welcome /> : <AddColumns />}</EmptyState>

webview/src/experiments/components/emptyState/ErrorState.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+export const Welcome: React.FC = () => (
+  <div>
+    <p>No Experiments to Display.</p>
+    <p>
+      Get started with{' '}
+      <a href="https://dvc.org/doc/start/experiments">experiments</a>.
+    </p>
+    <p>
+      Learn about the{' '}
+      <a href="https://dvc.org/doc/command-reference/exp">exp commands</a>.
+    </p>
+  </div>
+)

webview/src/experiments/components/emptyState/GetStarted.tsx

@@ -15,6 +15,9 @@ export const addStarredFilter = () =>
     type: MessageFromWebviewType.ADD_STARRED_EXPERIMENT_FILTER
   })
 
+export const selectColumns = () =>
+  sendMessage({ type: MessageFromWebviewType.SELECT_COLUMNS })
+
 export const showMoreCommits = (branch: string) =>
   sendMessage({
     payload: branch,

webview/src/experiments/components/emptyState/Welcome.tsx

@@ -1,17 +1,16 @@
 import React, { createRef, useLayoutEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-import { AddPlots, Welcome } from './GetStarted'
+import { ErrorState } from './emptyState/ErrorState'
+import { GetStarted } from './emptyState/GetStarted'
 import { ZoomedInPlot } from './ZoomedInPlot'
 import { CustomPlotsWrapper } from './customPlots/CustomPlotsWrapper'
 import { TemplatePlotsWrapper } from './templatePlots/TemplatePlotsWrapper'
 import { ComparisonTableWrapper } from './comparisonTable/ComparisonTableWrapper'
 import { Ribbon } from './ribbon/Ribbon'
 import { setMaxNbPlotsPerRow, setZoomedInPlot } from './webviewSlice'
-import styles from './styles.module.scss'
 import { EmptyState } from '../../shared/components/emptyState/EmptyState'
 import { Modal } from '../../shared/components/modal/Modal'
 import { WebviewWrapper } from '../../shared/components/webviewWrapper/WebviewWrapper'
-import { GetStarted } from '../../shared/components/getStarted/GetStarted'
 import { PlotsState } from '../store'
 
 const PlotsContent = () => {
@@ -60,30 +59,26 @@ const PlotsContent = () => {
     </Modal>
   )
 
-  const hasNoCustomPlots = customPlotIds.length === 0
+  const hasCustomPlots = customPlotIds.length > 0
+
+  if (cliError) {
+    return (
+      <ErrorState
+        cliError={cliError}
+        hasCustomPlots={hasCustomPlots}
+        modal={modal}
+      />
+    )
+  }
 
   if (!hasComparisonData && !hasTemplateData) {
     return (
-      <div className={styles.getStartedWrapper}>
-        <GetStarted
-          addItems={
-            <AddPlots
-              hasUnselectedPlots={hasUnselectedPlots}
-              hasNoCustomPlots={hasNoCustomPlots}
-              cliError={cliError}
-            />
-          }
-          showEmpty={!hasPlots && !cliError}
-          welcome={<Welcome />}
-          isFullScreen={hasNoCustomPlots}
-        />
-        {!hasNoCustomPlots && (
-          <>
-            <CustomPlotsWrapper />
-            {modal}
-          </>
-        )}
-      </div>
+      <GetStarted
+        hasCustomPlots={hasCustomPlots}
+        hasPlots={hasPlots}
+        hasUnselectedPlots={hasUnselectedPlots}
+        modal={modal}
+      />
     )
   }
 
@@ -93,7 +88,6 @@ const PlotsContent = () => {
       <TemplatePlotsWrapper />
       <ComparisonTableWrapper />
       <CustomPlotsWrapper />
-
       {modal}
     </div>
   )