feat(notebooks): add empty state (#18256)

* feat: add empty pipe list component + graphic

* feat: display empty state when no pipes exist

* feat: display label text next to add cell buttons

* fix: use preferred import path

* feat: create and use webpack alias "assets" for loading images

ui/src/notebooks/components/EmptyPipeList.scss

@@ -0,0 +1,33 @@
+@import '@influxdata/clockface/dist/variables.scss';
+
+.notebook-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 1.25em;
+  color: $g10-wolf;
+  user-select: none;
+
+  p {
+    margin: 0.25em 0;
+  }
+
+  strong {
+    color: $g18-cloud;
+  }
+
+  > *:last-child {
+    margin-bottom: 8em;
+  }
+}
+
+.notebook-empty--graphic {
+  width: 540px;
+  height: 300px;
+  background-image: url('~assets/images/notebooks-empty.svg');
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+}

ui/src/notebooks/components/EmptyPipeList.tsx

@@ -0,0 +1,23 @@
+// Libraries
+import React, {FC} from 'react'
+
+// Styles
+import 'src/notebooks/components/EmptyPipeList.scss'
+
+const EmptyPipeList: FC = () => {
+  return (
+    <div className="notebook-empty">
+      <div className="notebook-empty--graphic" />
+      <h3>Welcome to Notebooks</h3>
+      <p>
+        This is a more flexible way to explore, visualize, and (eventually)
+        alert on your data
+      </p>
+      <p>
+        Get started by <strong>Adding a Cell</strong> from the top left menu
+      </p>
+    </div>
+  )
+}
+
+export default EmptyPipeList

ui/src/notebooks/components/Notebook.tsx

@@ -15,9 +15,7 @@ const NotebookPage: FC = () => {
     <NotebookProvider>
       <Page titleTag="Notebook">
         <Header />
-        <Page.Contents fullWidth={true} scrollable={true}>
-          <PipeList />
-        </Page.Contents>
+        <PipeList />
       </Page>
     </NotebookProvider>
   )

ui/src/notebooks/components/PipeList.tsx

@@ -1,23 +1,40 @@
+// Libraries
 import React, {FC, useContext, useCallback} from 'react'
+
+// Contexts
 import {NotebookContext} from 'src/notebooks/context/notebook'
+
+// Components
 import NotebookPipe from 'src/notebooks/components/NotebookPipe'
+import EmptyPipeList from 'src/notebooks/components/EmptyPipeList'
+import {Page} from '@influxdata/clockface'
 
 const PipeList: FC = () => {
   const {id, pipes, updatePipe} = useContext(NotebookContext)
   const update = useCallback(updatePipe, [id])
 
-  const _pipes = pipes.map((_, index) => {
-    return (
-      <NotebookPipe
-        key={`pipe-${id}-${index}`}
-        index={index}
-        data={pipes[index]}
-        onUpdate={update}
-      />
-    )
-  })
+  const scrollable = !!pipes.length
 
-  return <>{_pipes}</>
+  let _pipes: JSX.Element | JSX.Element[] = <EmptyPipeList />
+
+  if (pipes.length) {
+    _pipes = pipes.map((_, index) => {
+      return (
+        <NotebookPipe
+          key={`pipe-${id}-${index}`}
+          index={index}
+          data={pipes[index]}
+          onUpdate={update}
+        />
+      )
+    })
+  }
+
+  return (
+    <Page.Contents fullWidth={true} scrollable={scrollable}>
+      {_pipes}
+    </Page.Contents>
+  )
 }
 
 export default PipeList

ui/src/notebooks/components/header/index.tsx

@@ -13,6 +13,7 @@ const Header: FC = () => (
     </Page.Header>
     <Page.ControlBar fullWidth={FULL_WIDTH}>
       <Page.ControlBarLeft>
+        <h3 className="notebook--add-cell-label">Add Cell:</h3>
         <AddButtons />
       </Page.ControlBarLeft>
       <Page.ControlBarRight>

ui/src/notebooks/style.scss

@@ -14,6 +14,13 @@ $notebook-divider-height: ($cf-marg-a * 2) + $cf-border;
   align-items: stretch;
 }
 
+.notebook--add-cell-label {
+  user-select: none;
+  margin: 0 $cf-marg-c 0 0;
+  font-size: 14px;
+  font-weight: $cf-font-weight--medium;
+}
+
 .notebook-panel {
   display: flex;
   flex-direction: column;

ui/webpack.common.ts

@@ -26,6 +26,7 @@ module.exports = {
   resolve: {
     alias: {
       src: path.resolve(__dirname, 'src'),
+      assets: path.resolve(__dirname, 'assets'),
       react: path.resolve('./node_modules/react'),
     },
     extensions: ['.tsx', '.ts', '.js', '.wasm'],