fix: hidden vs disabled (#3914)

Author: drdelambre

cypress/e2e/shared/flows.test.ts

@@ -510,11 +510,11 @@ describe('Flows', () => {
       },
       {
         panel: 'table',
-        menuItems: [...defaultMenuItems],
+        menuItems: [...defaultMenuItems, 'Download as CSV'],
       },
       {
         panel: 'visualization',
-        menuItems: [...defaultMenuItems],
+        menuItems: [...defaultMenuItems, 'Download as CSV'],
       },
       {
         panel: 'markdown',

src/flows/components/Sidebar.tsx

@@ -199,7 +199,7 @@ const Sidebar: FC = () => {
         },
         {
           title: 'Convert to |> Flux',
-          disable: () => {
+          hidden: () => {
             if (!flow.data.allIDs.includes(id)) {
               return true
             }
@@ -239,7 +239,7 @@ const Sidebar: FC = () => {
         {
           title: 'Export to Client Library',
           menu: <ClientList />,
-          disable: () => {
+          hidden: () => {
             if (!flow.data.allIDs.includes(id)) {
               return true
             }
@@ -255,7 +255,7 @@ const Sidebar: FC = () => {
         },
         {
           title: 'Link to Source',
-          disable: () => {
+          hidden: () => {
             if (!flow.data.allIDs.includes(id)) {
               return true
             }
@@ -283,7 +283,7 @@ const Sidebar: FC = () => {
         },
         {
           title: 'Link to Results',
-          disable: () => {
+          hidden: () => {
             if (!flow.data.allIDs.includes(id)) {
               return true
             }
@@ -317,19 +317,38 @@ const Sidebar: FC = () => {
     .map(section => {
       const links = section.actions
         .filter(action =>
-          typeof action.disable === 'function'
-            ? !action.disable()
-            : !action.disable
+          typeof action.hidden === 'function'
+            ? !action.hidden()
+            : !action.hidden
         )
         .map(action => {
           let title
 
+          const active =
+            typeof action.disable === 'function'
+              ? !action.disable()
+              : !action.disable
+
           if (typeof action.title === 'function') {
             title = action.title()
           } else {
             title = action.title
           }
 
+          if (!active) {
+            return (
+              <Dropdown.Item
+                title={title}
+                id={title}
+                key={title}
+                testID={`${title}--list-item`}
+                disabled
+              >
+                {title}
+              </Dropdown.Item>
+            )
+          }
+
           if (action.hasOwnProperty('menu')) {
             return (
               <Dropdown.Item

src/flows/pipes/Schedule/view.tsx

@@ -12,6 +12,7 @@ import {
 } from '@influxdata/clockface'
 import {parse, format_from_js_file} from '@influxdata/flux-lsp-browser'
 import ExportTaskButton from 'src/flows/pipes/Schedule/ExportTaskButton'
+import {patchTask, TaskUpdateRequest} from 'src/client'
 
 // Types
 import {PipeProp} from 'src/types/flows'
@@ -159,6 +160,12 @@ const Schedule: FC<PipeProp> = ({Context}) => {
   ) {
     offsetError = 'Invalid Time'
   }
+  let latestTask
+  if (data.task?.id) {
+    latestTask = data.task
+  } else if (data.task?.length) {
+    latestTask = data.task[0]
+  }
 
   const queryText = getPanelQueries(id)?.source ?? ''
   const hasTaskOption = useMemo(
@@ -228,12 +235,6 @@ const Schedule: FC<PipeProp> = ({Context}) => {
 
     return format_from_js_file(ast)
   }, [queryText, data.interval, data.offset])
-  let latestTask
-  if (data.task?.id) {
-    latestTask = data.task
-  } else if (data.task?.length) {
-    latestTask = data.task[0]
-  }
   const hasChanges = taskText !== latestTask?.flux ?? ''
 
   const updateInterval = evt => {
@@ -300,12 +301,42 @@ const Schedule: FC<PipeProp> = ({Context}) => {
         actions: [
           {
             title: 'View Run History',
-            menu: <History tasks={data.task.id ? data.task : data.task} />,
+            menu: <History tasks={data.task.id ? [data.task] : data.task} />,
+          },
+          {
+            title: 'Overwrite Existing Task',
+            disable: () => !latestTask || !hasChanges,
+            action: () => {
+              const _data: TaskUpdateRequest = {
+                flux: generateTask(),
+              }
+              if (
+                data.interval?.match(/(?:(\d+(y|mo|s|m|w|h){1}))/g)?.join('')
+              ) {
+                _data.every = data.interval
+              } else {
+                _data.cron = data.interval
+              }
+
+              if (data.offset) {
+                _data.offset = data.offset
+              }
+
+              patchTask({
+                taskID: latestTask.id,
+                data: _data,
+              }).then(() => {
+                data.task.find(
+                  t => t.id === latestTask.id
+                ).flux = generateTask()
+                update({task: [...data.task]})
+              })
+            },
           },
         ],
       },
     ])
-  }, [id, data.task])
+  }, [id, data.task, hasChanges])
 
   const persist = (
     <ExportTaskButton

src/flows/pipes/Visualization/view.tsx

@@ -120,12 +120,14 @@ const Visualization: FC<PipeProp> = ({Context}) => {
           {
             title: 'Download as Image',
             action: () => downloadAsImage(id),
-            disable: !isFlagEnabled('pdfImageDownload'),
+            hidden: !isFlagEnabled('pdfImageDownload'),
+            disable: !dataExists,
           },
           {
             title: 'Download as PDF',
             action: () => downloadAsPDF(id),
-            disable: !isFlagEnabled('pdfImageDownload'),
+            hidden: !isFlagEnabled('pdfImageDownload'),
+            disable: !dataExists,
           },
         ],
       },

src/types/flows.ts

@@ -5,12 +5,14 @@ import {AutoRefresh, TimeRange, Variable, Secret} from 'src/types'
 export interface ControlAction {
   title: string | (() => string)
   disable?: boolean | (() => boolean)
+  hidden?: boolean | (() => boolean)
   action: () => void
 }
 
 export interface Submenu {
   title: string | (() => string)
   disable?: boolean | (() => boolean)
+  hidden?: boolean | (() => boolean)
   menu: ReactNode
 }