Add empty and loading states to Plots webview with tests

extension/src/webview/factory.ts

@@ -62,6 +62,7 @@ export const createWebview = async (
     title,
     ViewColumn.Active,
     {
+      enableCommandUris: true,
       enableScripts: true,
       localResourceRoots: [Uri.file(distPath)],
       retainContextWhenHidden: true

webview/src/plots/components/App.test.tsx

@@ -0,0 +1,78 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import {
+  render,
+  cleanup,
+  waitFor,
+  screen,
+  fireEvent
+} from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import complexLivePlotsData from 'dvc/src/test/fixtures/complex-live-plots-example'
+import {
+  MessageFromWebviewType,
+  MessageToWebviewType
+} from 'dvc/src/webview/contract'
+import { App } from './App'
+
+import { vsCodeApi } from '../util/vscode'
+
+jest.mock('../util/vscode')
+
+const { postMessage: mockPostMessage } = vsCodeApi
+beforeEach(() => {
+  jest.clearAllMocks()
+})
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('App', () => {
+  it('Sends the initialized message on first render', () => {
+    render(<App />)
+    expect(mockPostMessage).toHaveBeenCalledWith({
+      type: MessageFromWebviewType.initialized
+    })
+    expect(mockPostMessage).toHaveBeenCalledTimes(1)
+  })
+
+  it('Renders the loading state when given no data', async () => {
+    render(<App />)
+    const loadingState = await waitFor(() =>
+      screen.getByText('Loading plots data...')
+    )
+    expect(loadingState).toBeInTheDocument()
+  })
+
+  it('Renders the empty state when given data with no experiments', async () => {
+    const dataMessageWithoutPlots = new MessageEvent('message', {
+      data: {
+        data: [],
+        type: MessageToWebviewType.setData
+      }
+    })
+    render(<App />)
+    fireEvent(window, dataMessageWithoutPlots)
+    const emptyState = await waitFor(() =>
+      screen.getByText('There are no experiments to make plots from.')
+    )
+    expect(emptyState).toBeInTheDocument()
+  })
+
+  it('Renders plots when given a message with plots data', () => {
+    const dataMessageWithPlots = new MessageEvent('message', {
+      data: {
+        data: complexLivePlotsData,
+        type: MessageToWebviewType.setData
+      }
+    })
+    render(<App />)
+    fireEvent(window, dataMessageWithPlots)
+
+    const emptyState = screen.queryByText('Loading plots data...')
+    expect(emptyState).not.toBeInTheDocument()
+  })
+})

webview/src/plots/components/App.tsx

@@ -2,26 +2,24 @@ import React, { useEffect, useState } from 'react'
 import { PlotsData } from 'dvc/src/plots/webview/contract'
 import {
   MessageFromWebviewType,
+  MessageToWebview,
   MessageToWebviewType
 } from 'dvc/src/webview/contract'
 import Plots from './Plots'
-import { InternalVsCodeApi } from '../../shared/api'
-
-declare global {
-  function acquireVsCodeApi(): InternalVsCodeApi
-}
-
-const vsCodeApi = acquireVsCodeApi()
+import { vsCodeApi } from '../util/vscode'
 
 const signalInitialized = () =>
   vsCodeApi.postMessage({ type: MessageFromWebviewType.initialized })
 
-const App = () => {
+export const App = () => {
   const [plotsData, setPlotsData] = useState<PlotsData>()
-  const [dvcRoot, setDvcRoot] = useState()
+  const [dvcRoot, setDvcRoot] = useState<string>()
   useEffect(() => {
-    signalInitialized()
-    window.addEventListener('message', ({ data }) => {
+    const messageListener = ({
+      data
+    }: {
+      data: MessageToWebview<PlotsData>
+    }) => {
       switch (data.type) {
         case MessageToWebviewType.setData: {
           setPlotsData(data.data)
@@ -31,7 +29,10 @@ const App = () => {
           setDvcRoot(data.dvcRoot)
         }
       }
-    })
+    }
+    window.addEventListener('message', messageListener)
+    signalInitialized()
+    return () => window.removeEventListener('message', messageListener)
   }, [])
   useEffect(() => {
     vsCodeApi.setState({
@@ -41,5 +42,3 @@ const App = () => {
   }, [plotsData, dvcRoot])
   return <Plots plotsData={plotsData} />
 }
-
-export default App

webview/src/plots/components/Plots.tsx

@@ -111,7 +111,10 @@ const Plot = ({
 }
 
 const Plots = ({ plotsData }: { plotsData?: PlotsData }) => {
-  return (
+  if (!plotsData) {
+    return <p>Loading plots data...</p>
+  }
+  return plotsData.length > 0 ? (
     <>
       {plotsData?.map(plotData => (
         <Plot
@@ -121,6 +124,13 @@ const Plots = ({ plotsData }: { plotsData?: PlotsData }) => {
         />
       ))}
     </>
+  ) : (
+    <>
+      <p>There are no experiments to make plots from.</p>
+      <p>
+        <a href="command:dvc.runExperiment">Run an Experiment</a> to add some!
+      </p>
+    </>
   )
 }
 export default Plots

webview/src/plots/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import App from './components/App'
+import { App } from './components/App'
 
 const elem = document.createElement('div')
 elem.className = 'react-root'

webview/src/plots/util/__mocks__/vscode.ts

@@ -0,0 +1,5 @@
+export const vsCodeApi = {
+  getState: jest.fn(),
+  postMessage: jest.fn(),
+  setState: jest.fn()
+}

webview/src/plots/util/vscode.ts

@@ -0,0 +1,7 @@
+import { InternalVsCodeApi } from '../../shared/api'
+
+declare global {
+  function acquireVsCodeApi(): InternalVsCodeApi
+}
+
+export const vsCodeApi = acquireVsCodeApi()

webview/src/stories/Plots.stories.tsx

@@ -20,3 +20,7 @@ export const WithData: Story<{ plotsData: PlotsData }> = ({ plotsData }) => {
 export const WithoutData: Story = () => {
   return <Plots plotsData={undefined} />
 }
+
+export const WithoutExperiments: Story = () => {
+  return <Plots plotsData={[]} />
+}