Improve plots welcome view when there are no plots

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

@@ -153,7 +153,7 @@ describe('App', () => {
       })
     )
 
-    const noColumnsState = screen.queryByText('No Columns Selected')
+    const noColumnsState = screen.queryByText('No Columns Selected.')
     expect(noColumnsState).toBeInTheDocument()
   })
 
@@ -169,7 +169,7 @@ describe('App', () => {
       })
     )
 
-    const noExperimentsState = screen.queryByText('No Experiments to Display')
+    const noExperimentsState = screen.queryByText('No Experiments to Display.')
     expect(noExperimentsState).toBeInTheDocument()
   })
 
@@ -190,10 +190,10 @@ describe('App', () => {
     const loadingState = screen.queryByText('Loading experiments...')
     expect(loadingState).not.toBeInTheDocument()
 
-    const noExperimentsState = screen.queryByText('No Experiments to Display')
+    const noExperimentsState = screen.queryByText('No Experiments to Display.')
     expect(noExperimentsState).not.toBeInTheDocument()
 
-    const noColumnsState = screen.queryByText('No Columns Selected')
+    const noColumnsState = screen.queryByText('No Columns Selected.')
     expect(noColumnsState).not.toBeInTheDocument()
   })
 

webview/src/experiments/components/Experiments.tsx

@@ -199,12 +199,12 @@ export const ExperimentsTable: React.FC<{
 
   const hasOnlyDefaultColumns = columns.length <= 2
   if (hasOnlyDefaultColumns) {
-    return <EmptyState>No Columns Selected</EmptyState>
+    return <EmptyState>No Columns Selected.</EmptyState>
   }
 
   const hasOnlyWorkspace = data.length <= 1
   if (hasOnlyWorkspace) {
-    return <EmptyState>No Experiments to Display</EmptyState>
+    return <EmptyState>No Experiments to Display.</EmptyState>
   }
 
   return <Table instance={instance} tableData={tableData} />

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

@@ -127,7 +127,7 @@ describe('App', () => {
       checkpoint: null,
       sectionCollapsed: DEFAULT_SECTION_COLLAPSED
     })
-    const emptyState = await screen.findByText('No Plots to Display')
+    const emptyState = await screen.findByText('No Plots to Display.')
 
     expect(emptyState).toBeInTheDocument()
   })

webview/src/plots/components/GetStarted.tsx

@@ -18,7 +18,7 @@ export const GetStarted = ({
   return (
     <EmptyState>
       <div>
-        <p>No Plots to Display</p>
+        <p>No Plots to Display.</p>
         {hasPlots && (
           <div>
             {!hasSelectedPlots && (
@@ -45,6 +45,24 @@ export const GetStarted = ({
             )}
           </div>
         )}
+        {!hasPlots && (
+          <div>
+            <p>
+              {'Learn how to '}
+              <a href="https://dvc.org/doc/studio/user-guide/views/visualize-experiments">
+                visualize experiments
+              </a>
+              {' with DVC.'}
+            </p>
+            <p>
+              {'Learn about the '}
+              <a href="https://dvc.org/doc/command-reference/plots">
+                plots commands
+              </a>
+              .
+            </p>
+          </div>
+        )}
       </div>
     </EmptyState>
   )

webview/src/shared/components/emptyState/styles.module.scss

@@ -17,4 +17,5 @@
   opacity: 0.8;
   letter-spacing: 0.04em;
   color: $watermark-color;
+  font-family: sans-serif;
 }

webview/src/shared/style.scss

@@ -44,3 +44,15 @@ body {
 button {
   font-family: inherit;
 }
+
+a {
+  color: var(--vscode-textLink-foreground);
+
+  &:hover {
+    color: var(--vscode-textLink-activeForeground);
+  }
+
+  &:active {
+    color: var(--vscode-textLink-activeForeground);
+  }
+}