feat: version viewing is now a thing (#3901)

Author: asalem1

src/alerting/components/AlertingIndex.tsx

@@ -37,6 +37,7 @@ import {event} from 'src/cloud/utils/reporting'
 
 const alertsPath = '/orgs/:orgID/alerting'
 import {AppSettingContext} from 'src/shared/contexts/app'
+import {PROJECT_NAME} from 'src/flows'
 
 type ActiveColumn = 'checks' | 'endpoints' | 'rules'
 
@@ -78,7 +79,10 @@ const AlertingIndex: FunctionComponent = () => {
                 <Icon glyph={IconFont.BookPencil} />
                 Now you can use Notebooks to explore your data while building an
                 alert
-                <Link to="/notebook/from/notification" onClick={recordClick}>
+                <Link
+                  to={`/${PROJECT_NAME.toLowerCase()}/from/notification`}
+                  onClick={recordClick}
+                >
                   Create an Alert
                 </Link>
                 <span className="header-cta--close-icon" onClick={hideFlowsCTA}>

src/buckets/components/BucketCard.tsx

@@ -10,6 +10,7 @@ import BucketCardActions from 'src/buckets/components/BucketCardActions'
 
 // Constants
 import {isSystemBucket} from 'src/buckets/constants/index'
+import {PROJECT_NAME} from 'src/flows'
 
 // Utils
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
@@ -37,7 +38,7 @@ const BucketCard: FC<Props & RouteComponentProps<{orgID: string}>> = ({
 }) => {
   const handleNameClick = () => {
     if (isFlagEnabled('exploreWithFlows')) {
-      history.push(`/notebook/from/bucket/${bucket.name}`)
+      history.push(`/${PROJECT_NAME.toLowerCase()}/from/bucket/${bucket.name}`)
     } else {
       history.push(`/orgs/${orgID}/data-explorer?bucket=${bucket.name}`)
     }

src/dashboards/components/dashboard_index/DashboardCard.tsx

@@ -57,6 +57,7 @@ import {getMe} from 'src/me/selectors'
 import {getOrg} from 'src/organizations/selectors'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {CLOUD} from 'src/shared/constants'
+import {PROJECT_NAME} from 'src/flows'
 
 interface OwnProps {
   id: string
@@ -237,7 +238,7 @@ class DashboardCard extends PureComponent<Props> {
       },
     } = this.props
 
-    let dest = `/notebook/from/dashboard/${id}`
+    let dest = `/${PROJECT_NAME.toLowerCase()}/from/dashboard/${id}`
 
     if (!isFlagEnabled('boardWithFlows')) {
       dest = `/orgs/${orgID}/dashboards/${id}`

src/dataExplorer/components/DataExplorerPage.tsx

@@ -25,6 +25,7 @@ import {ResourceType} from 'src/types'
 
 import 'src/shared/components/cta.scss'
 import {AppSettingContext} from 'src/shared/contexts/app'
+import {PROJECT_NAME} from 'src/flows'
 
 const DataExplorerPage: FC = () => {
   const {flowsCTA, setFlowsCTA} = useContext(AppSettingContext)
@@ -66,7 +67,10 @@ const DataExplorerPage: FC = () => {
                 <Icon glyph={IconFont.BookPencil} />
                 Now you can use Notebooks to explore and take action on your
                 data
-                <Link to="/notebook/from/default" onClick={recordClick}>
+                <Link
+                  to={`/${PROJECT_NAME.toLowerCase()}/from/default`}
+                  onClick={recordClick}
+                >
                   Create a Notebook
                 </Link>
                 <span className="header-cta--close-icon" onClick={hideFlowsCTA}>

src/flows/components/FromTemplatePage.tsx

@@ -29,6 +29,7 @@ import {
   OverlayController,
 } from 'src/overlays/components/OverlayController'
 import EngagementLink from 'src/cloud/components/onboarding/EngagementLink'
+import {PROJECT_NAME, PROJECT_NAME_PLURAL} from '..'
 
 const Template: FC = () => {
   const {add} = useContext(FlowListContext)
@@ -62,7 +63,9 @@ const Template: FC = () => {
           populate(data)
         } else {
           add(data).then(id => {
-            history.replace(`/orgs/${org.id}/notebooks/${id}`)
+            history.replace(
+              `/orgs/${org.id}/${PROJECT_NAME_PLURAL.toLowerCase()}/${id}`
+            )
           })
         }
       })
@@ -99,7 +102,10 @@ const FromTemplatePage: FC = () => {
             <FlowListProvider>
               <FlowProvider>
                 <Switch>
-                  <Route path="/notebook/from/*" component={Template} />
+                  <Route
+                    path={`/${PROJECT_NAME.toLowerCase()}/from/*`}
+                    component={Template}
+                  />
                   <Route component={NotFound} />
                 </Switch>
               </FlowProvider>
@@ -113,7 +119,10 @@ const FromTemplatePage: FC = () => {
   return (
     <FlowListProvider>
       <Switch>
-        <Route path="/notebook/from/*" component={Template} />
+        <Route
+          path={`/${PROJECT_NAME.toLowerCase()}/from/*`}
+          component={Template}
+        />
         <Route component={NotFound} />
       </Switch>
     </FlowListProvider>

src/flows/components/PresetFlows.tsx

@@ -9,11 +9,28 @@ import {
 } from '@influxdata/clockface'
 import {useHistory} from 'react-router-dom'
 import FlowsExplainer from 'src/flows/components/FlowsExplainer'
+import {PROJECT_NAME} from 'src/flows'
 export const PRESET_MAP = [
-  {title: 'New Notebook', href: '/notebook/from/default', testID: 'new'},
-  {title: 'Set an Alert', href: '/notebook/from/notification', testID: 'alert'},
-  {title: 'Schedule a Task', href: '/notebook/from/task', testID: 'task'},
-  {title: 'Write a Flux Script', href: '/notebook/from/flux', testID: 'script'},
+  {
+    title: 'New Notebook',
+    href: `/${PROJECT_NAME.toLowerCase()}/from/default`,
+    testID: 'new',
+  },
+  {
+    title: 'Set an Alert',
+    href: `/${PROJECT_NAME.toLowerCase()}/from/notification`,
+    testID: 'alert',
+  },
+  {
+    title: 'Schedule a Task',
+    href: `/${PROJECT_NAME.toLowerCase()}/from/task`,
+    testID: 'task',
+  },
+  {
+    title: 'Write a Flux Script',
+    href: `/${PROJECT_NAME.toLowerCase()}/from/flux`,
+    testID: 'script',
+  },
 ]
 
 const PresetFlows: FC = () => {

src/flows/components/VersionPage.tsx

@@ -0,0 +1,77 @@
+// Libraries
+import React, {FC, useContext} from 'react'
+import {DapperScrollbars, Page} from '@influxdata/clockface'
+import {useParams} from 'react-router'
+
+// Contexts
+import {VersionFlowProvider} from 'src/flows/context/version.read'
+import {FlowQueryProvider} from 'src/flows/context/flow.query'
+import QueryProvider from 'src/shared/contexts/query'
+import {PopupDrawer, PopupProvider} from 'src/flows/context/popup'
+import {ResultsProvider} from 'src/flows/context/results'
+import {SidebarProvider} from 'src/flows/context/sidebar'
+import {FlowContext} from 'src/flows/context/flow.current'
+
+// Components
+import ReadOnlyPipeList from 'src/flows/components/ReadOnlyPipeList'
+import {SubSideBar} from 'src/flows/components/Sidebar'
+import VersionHeader from 'src/flows/components/header/VersionHeader'
+import NotFound from 'src/shared/components/NotFound'
+
+import 'src/flows/style.scss'
+import 'src/flows/shared/Resizer.scss'
+import '@influxdata/clockface/dist/index.css'
+
+const ReadOnly: FC = ({children}) => {
+  const {flow} = useContext(FlowContext)
+  const {id} = useParams<{id: string}>()
+  if (!id || !flow) {
+    return (
+      <div style={{width: '100%'}}>
+        <NotFound />
+      </div>
+    )
+  }
+  return <>{children}</>
+}
+
+const ReadOnlyFlowPage: FC = () => {
+  const {flow} = useContext(FlowContext)
+
+  return (
+    <Page titleTag={flow.name + ' (Shared) | InfluxDB Cloud'}>
+      <VersionHeader />
+      <Page.Contents fullWidth={true} scrollable={false} className="flow-page">
+        <PopupProvider>
+          <DapperScrollbars
+            noScrollX
+            thumbStartColor="gray"
+            thumbStopColor="gray"
+          >
+            <ReadOnlyPipeList />
+          </DapperScrollbars>
+          <SubSideBar />
+          <PopupDrawer />
+        </PopupProvider>
+      </Page.Contents>
+    </Page>
+  )
+}
+
+const FlowContainer: FC = () => (
+  <VersionFlowProvider>
+    <ReadOnly>
+      <QueryProvider>
+        <ResultsProvider>
+          <FlowQueryProvider>
+            <SidebarProvider>
+              <ReadOnlyFlowPage />
+            </SidebarProvider>
+          </FlowQueryProvider>
+        </ResultsProvider>
+      </QueryProvider>
+    </ReadOnly>
+  </VersionFlowProvider>
+)
+
+export default FlowContainer

src/flows/components/header/PublishedVersions.tsx

@@ -11,6 +11,7 @@ const PublishedVersions: FC = () => {
 
   return (
     <>
+      <VersionBullet draftVersion />
       {versions.map(version => (
         <VersionBullet key={version.id} version={version} />
       ))}

src/flows/components/header/SaveState.tsx

@@ -13,6 +13,7 @@ import {FlowContext} from 'src/flows/context/flow.current'
 import {FlowListContext} from 'src/flows/context/flow.list'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {event} from 'src/cloud/utils/reporting'
+import {PROJECT_NAME_PLURAL} from 'src/flows'
 
 const SaveState: FC = () => {
   const {flow} = useContext(FlowContext)
@@ -22,7 +23,9 @@ const SaveState: FC = () => {
   const addFlow = () => {
     event('Notebook save button clicked')
     add(flow).then(id => {
-      history.replace(`/orgs/${org.id}/notebooks/${id}`)
+      history.replace(
+        `/orgs/${org.id}/${PROJECT_NAME_PLURAL.toLowerCase()}/${id}`
+      )
     })
   }
 

src/flows/components/header/VersionBullet.scss

@@ -1,5 +1,9 @@
 .publish-version-bullet--button {
-  margin-right: 40px;
+  margin-right: 30px;
+
+  @media screen and (max-width: $cf-grid--breakpoint-md) {
+    margin-right: 23px;
+  }
 
   &:hover {
     cursor: pointer;
@@ -10,10 +14,11 @@
   content: '';
   height: 25px;
   width: 4px;
-  transform: translate(-480%, 0%) rotate(-90deg);
+  transform: translate(-380%, 0%) rotate(-90deg);
 
   @media screen and (max-width: $cf-grid--breakpoint-md) {
-    transform: translate(-380%, 0%) rotate(-90deg);
+    height: 18px;
+    transform: translate(-280%, 0%) rotate(-90deg);
   }
   background: #333346;
   background: -moz-linear-gradient(top, #333346 0%, #8e1fc3 100%);
@@ -29,13 +34,54 @@
   content: '';
   height: 25px;
   width: 4px;
-  transform: translate(480%, 0) rotate(90deg);
+  transform: translate(380%, 0) rotate(90deg);
 
   @media screen and (max-width: $cf-grid--breakpoint-md) {
-    transform: translate(380%, 0%) rotate(90deg);
+    height: 18px;
+    transform: translate(280%, 0%) rotate(90deg);
   }
   background: #333346;
   background: -moz-linear-gradient(top, #333346 0%, #8e1fc3 100%);
   background: -webkit-linear-gradient(top, #333346 0%, #8e1fc3 100%);
   background: linear-gradient(to bottom, #333346 0%, #8e1fc3 100%);
 }
+
+.publish-version--bullet:last-of-type {
+  .publish-version-bullet--button::after {
+    display: none;
+  }
+}
+
+.active-version--button {
+  box-shadow: 0 0 25px $cf-white;
+}
+
+.publish-version-draft {
+  background: $cf-grey-45;
+  margin-right: 30px;
+
+  @media screen and (max-width: $cf-grid--breakpoint-md) {
+    margin-right: 23px;
+    margin-bottom: 1px;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.publish-version-draft::after {
+  content: '';
+  height: 25px;
+  width: 4px;
+  transform: translate(380%, 0) rotate(90deg);
+
+  @media screen and (max-width: $cf-grid--breakpoint-md) {
+    height: 18px;
+    transform: translate(280%, 0%) rotate(90deg);
+  }
+  background: #333346;
+  background: -moz-linear-gradient(top, #333346 0%, #78727a 100%);
+  background: -webkit-linear-gradient(top, #333346 0%, #78727a 100%);
+  background: linear-gradient(to bottom, #333346 0%, #78727a 100%);
+}