fix(notebooks): presentation, nav tree bugs, share warning (#3221)

Author: Gene Hynson

package.json

@@ -158,7 +158,7 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.0.0-alpha.37",
-    "@influxdata/clockface": "^3.1.5",
+    "@influxdata/clockface": "^3.1.6",
     "@influxdata/flux": "^0.5.1",
     "@influxdata/flux-lsp-browser": "^0.5.53",
     "@influxdata/giraffe": "^2.20.0",

src/flows/components/FromTemplatePage.tsx

@@ -14,6 +14,7 @@ import {
   hydrate,
 } from 'src/flows/context/flow.list'
 import {FlowProvider, FlowContext} from 'src/flows/context/flow.current'
+import {AppSettingProvider} from 'src/shared/contexts/app'
 import QueryProvider from 'src/shared/contexts/query'
 import {FlowPage} from 'src/flows/components/FlowPage'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
@@ -85,24 +86,26 @@ const FromTemplatePage: FC = () => {
   if (isFlagEnabled('ephemeralNotebook')) {
     return (
       <AppWrapper>
-        <Notifications />
-        <TooltipPortal />
-        <NotesPortal />
-        <OverlayProviderComp>
-          <OverlayController />
-        </OverlayProviderComp>
-        <EngagementLink />
-        <TreeNav />
-        <QueryProvider>
-          <FlowListProvider>
-            <FlowProvider>
-              <Switch>
-                <Route path="/notebook/from/*" component={Template} />
-                <Route component={NotFound} />
-              </Switch>
-            </FlowProvider>
-          </FlowListProvider>
-        </QueryProvider>
+        <AppSettingProvider>
+          <Notifications />
+          <TooltipPortal />
+          <NotesPortal />
+          <OverlayProviderComp>
+            <OverlayController />
+          </OverlayProviderComp>
+          <EngagementLink />
+          <TreeNav />
+          <QueryProvider>
+            <FlowListProvider>
+              <FlowProvider>
+                <Switch>
+                  <Route path="/notebook/from/*" component={Template} />
+                  <Route component={NotFound} />
+                </Switch>
+              </FlowProvider>
+            </FlowListProvider>
+          </QueryProvider>
+        </AppSettingProvider>
       </AppWrapper>
     )
   }

src/flows/components/header/Submit.scss

@@ -8,3 +8,10 @@
 .submit-btn span {
   margin-right: 0.6em;
 }
+
+.warning-icon {
+  color: $c-thunder;
+  &:hover {
+    color: $c-pineapple;
+  }
+}

src/flows/components/header/index.tsx

@@ -15,6 +15,7 @@ import {
   ComponentColor,
   ComponentStatus,
   Dropdown,
+  ErrorTooltip,
 } from '@influxdata/clockface'
 import TimeZoneDropdown from 'src/shared/components/TimeZoneDropdown'
 import TimeRangeDropdown from 'src/flows/components/header/TimeRangeDropdown'
@@ -247,6 +248,11 @@ const FlowHeader: FC = () => {
               )}
               style={{width: '250px', flex: '0 0 250px'}}
             />
+            <ErrorTooltip
+              className="warning-icon"
+              tooltipContents="By sharing this link, your org may incur charges when a user visits the page and the query is run."
+              tooltipStyle={{width: '250px'}}
+            />
             <SquareButton
               icon={IconFont.Checkmark_New}
               onClick={generateLink}

src/flows/style.scss

@@ -74,6 +74,7 @@ $cf-radius-lg: $cf-radius + 4px;
 }
 
 .presentation-panel {
+  overflow: auto;
   display: flex;
   height: 100%;
   flex-direction: column;

src/pageLayout/constants/navigationHierarchy.ts

@@ -106,7 +106,7 @@ export const generateNavItems = (): NavItem[] => {
       label: PROJECT_NAME_PLURAL,
       shortLabel: PROJECT_NAME_SHORT,
       link: `${orgPrefix}/${PROJECT_NAME_PLURAL.toLowerCase()}`,
-      activeKeywords: [PROJECT_NAME_PLURAL.toLowerCase()],
+      activeKeywords: [PROJECT_NAME_PLURAL.toLowerCase(), 'notebook/from'],
     },
     {
       id: 'dashboards',

src/pageLayout/utils/index.test.ts

@@ -21,7 +21,7 @@ describe('pageLayout.utils.getNavItemActivation', () => {
       getNavItemActivation([HOMEPAGE_PATHNAME, 'account'], pathname)
     ).toEqual(true)
 
-    pathname = '/orgs/3491cbaef55b4559/some-path'
+    pathname = '/orgs/3491cbaef55b4559/not-a-path'
     expect(
       getNavItemActivation([HOMEPAGE_PATHNAME, 'account'], pathname)
     ).toEqual(false)
@@ -31,7 +31,7 @@ describe('pageLayout.utils.getNavItemActivation', () => {
       false
     )
 
-    pathname = '/new/meme/reviews'
+    pathname = '/new/superb/reviews'
     expect(
       getNavItemActivation([HOMEPAGE_PATHNAME, 'account'], pathname)
     ).toEqual(false)
@@ -72,19 +72,7 @@ describe('pageLayout.utils.getNavItemActivation', () => {
       true
     )
 
-    given = 'telegrafs'
-    expect(getNavItemActivation([given], `${base}/${given}${given}`)).toEqual(
-      false
-    )
-
-    given = 'scrapers'
-    expect(
-      getNavItemActivation([given], `${base}/${given}${given}${given}`)
-    ).toEqual(false)
-
-    given = 'tokens'
-    expect(getNavItemActivation([given], `${base}////////${given}`)).toEqual(
-      true
-    )
+    given = 'notebook/from'
+    expect(getNavItemActivation([given], `${base}${given}`)).toEqual(true)
   })
 })

src/pageLayout/utils/index.ts

@@ -5,10 +5,8 @@ export const getNavItemActivation = (
   keywords: string[],
   location: string
 ): boolean => {
-  const ignoreOrgAndOrgID = 3
-  const parentPath = location.split('/').slice(ignoreOrgAndOrgID)
-  if (!parentPath.length) {
-    parentPath.push(HOMEPAGE_PATHNAME)
+  if (location.split('/').length <= 3) {
+    location = HOMEPAGE_PATHNAME
   }
-  return keywords.some(path => parentPath.includes(path))
+  return keywords.some(path => location.includes(path))
 }

yarn.lock

@@ -855,10 +855,10 @@
     "@docsearch/css" "3.0.0-alpha.37"
     algoliasearch "^4.0.0"
 
-"@influxdata/clockface@^3.1.5":
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-3.1.5.tgz#d3a073351f35905e8aa937d66189a702a4055521"
-  integrity sha512-A2twQYz50XVU7zTVtkEGN5VghSdsyEbF1HbuiDt8ecyI1si7x2j853eHiMtZgeXCoDxAqkhp4ifys/3Vz2rJng==
+"@influxdata/clockface@^3.1.6":
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-3.1.6.tgz#3e86dcf100816048a7282c835d42f70e2a642bff"
+  integrity sha512-Rq8iwozupCFrsmAg5cTwF1EhS4Hog8yNoCE2p2EwICRlPef2RArN+rqDYj+k0tljUv8WUHaL0jvcV/Mf7s9UZA==
 
 "@influxdata/flux-lsp-browser@^0.5.53":
   version "0.5.53"