feat: adding notebook context (#18089)

ui/src/notebooks/components/Notebook.tsx

@@ -1,13 +1,16 @@
 import React, {FC} from 'react'
 
 import {Page} from '@influxdata/clockface'
+import {NotebookProvider} from 'src/notebooks/context/notebook'
 
 const NotebookPage: FC = () => {
   return (
-    <Page titleTag="Notebook">
-      <Page.Header fullWidth={false} />
-      <Page.Contents fullWidth={false} scrollable={true} />
-    </Page>
+    <NotebookProvider>
+      <Page titleTag="Notebook">
+        <Page.Header fullWidth={false} />
+        <Page.Contents fullWidth={false} scrollable={true} />
+      </Page>
+    </NotebookProvider>
   )
 }
 

ui/src/notebooks/context/notebook.mock.json

@@ -0,0 +1,78 @@
+{
+  "id": "testing",
+  "pipes": [
+    {
+      "type": "query",
+      "activeQuery": 0,
+      "queries": [
+        {
+          "text": "from(bucket: \"project\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) => r[\"_measurement\"] == \"docker_container_cpu\")",
+          "editMode": "advanced",
+          "builderConfig": {
+            "buckets": [],
+            "tags": [],
+            "functions": []
+          }
+        }
+      ]
+    },
+    {
+      "type": "query",
+      "activeQuery": 0,
+      "queries": [
+        {
+          "text": "// Tip: Use the __PREVIOUS_RESULT__ variable to link your queries\n\n__PREVIOUS_RESULT__\n |> filter(fn: (r) => r[\"_field\"] == \"usage_percent\")",
+          "editMode": "advanced",
+          "builderConfig": {
+            "buckets": [],
+            "tags": [],
+            "functions": []
+          }
+        }
+      ]
+    },
+    {
+        "type": "visualization"
+    },
+    {
+        "type": "visualization"
+    },
+    {
+      "type": "query",
+      "activeQuery": 0,
+      "queries": [
+        {
+          "text": "// Tip: Use the __PREVIOUS_RESULT__ variable to link your queries\n\n__PREVIOUS_RESULT__\n |> sum()",
+          "editMode": "advanced",
+          "builderConfig": {
+            "buckets": [],
+            "tags": [],
+            "functions": []
+          }
+        }
+      ]
+    },
+    {
+        "type": "visualization"
+    },
+    {
+      "type": "query",
+      "activeQuery": 0,
+      "queries": [
+        {
+          "text": "// Tip: Use the __PREVIOUS_RESULT__ variable to link your queries\n\nfrom(bucket: \"project\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) => r[\"_measurement\"] == \"docker_container_cpu\")",
+          "editMode": "advanced",
+          "builderConfig": {
+            "buckets": [],
+            "tags": [],
+            "functions": []
+          }
+        }
+      ]
+    },
+    {
+        "type": "visualization"
+    }
+  ]
+}
+

ui/src/notebooks/context/notebook.tsx

@@ -0,0 +1,78 @@
+import React, {FC, useState} from 'react'
+
+// TODO make this polymorphic to mimic the self registration
+// of pipe stages
+export type Pipe = any
+
+export interface NotebookContextType {
+  id: string
+  pipes: Pipe[]
+  addPipe: (pipe: Pipe) => void
+  updatePipe: (idx: number, pipe: Pipe) => void
+  removePipe: (idx: number) => void
+}
+
+export const DEFAULT_CONTEXT = {
+  id: 'new',
+  pipes: [],
+  addPipe: () => {},
+  updatePipe: () => {},
+  removePipe: () => {},
+}
+
+// NOTE: this just loads some test data for exploring the
+// interactions between types. Make sure it's never true
+// during the pull review process
+const TEST_MODE = false
+if (TEST_MODE) {
+  const TEST_NOTEBOOK = require('src/notebooks/context/notebook.mock.json')
+  DEFAULT_CONTEXT.id = TEST_NOTEBOOK.id
+  DEFAULT_CONTEXT.pipes = TEST_NOTEBOOK.pipes
+}
+
+export const NotebookContext = React.createContext<NotebookContextType>(
+  DEFAULT_CONTEXT
+)
+
+export const NotebookProvider: FC = ({children}) => {
+  const [id] = useState(DEFAULT_CONTEXT.id)
+  const [pipes, setPipes] = useState(DEFAULT_CONTEXT.pipes)
+
+  function addPipe(pipe: Pipe) {
+    setPipes(pipes => {
+      pipes.push(pipe)
+      return pipes.slice()
+    })
+  }
+
+  function updatePipe(idx: number, pipe: Pipe) {
+    setPipes(pipes => {
+      pipes[idx] = {
+        ...pipes[idx],
+        ...pipe,
+      }
+      return pipes.slice()
+    })
+  }
+
+  function removePipe(idx: number) {
+    setPipes(pipes => {
+      pipes.splice(idx, 1)
+      return pipes.slice()
+    })
+  }
+
+  return (
+    <NotebookContext.Provider
+      value={{
+        id,
+        pipes,
+        updatePipe,
+        addPipe,
+        removePipe,
+      }}
+    >
+      {children}
+    </NotebookContext.Provider>
+  )
+}