Save button added to the defined reports

mercedes-benz · Aug 3, 2023 · bb65ca0 · bb65ca0
1 parent c2e13f0
commit bb65ca0
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 27 deletions.
diff --git a/src/card/Card.tsx b/src/card/Card.tsx
@@ -60,6 +60,7 @@ const NeoCard = ({
   extensions, // A set of enabled extensions.
   globalParameters, // Query parameters that are globally set for the entire dashboard.
   dashboardSettings, // Dictionary of settings for the entire dashboard.
+  enableSaveButtonForIds, // Reports will have save buttons to execute cypher queries
   onRemovePressed, // action to take when the card is removed. (passed from parent)
   onClonePressed, // action to take when user presses the clone button
   onReportHelpButtonPressed, // action to take when someone clicks the 'help' button in the report settings.
@@ -185,10 +186,12 @@ const NeoCard = ({
                     key={subReport.id}
                   >
                     <NeoCardView
+                      id={id}
                       legendDefinition={subReport?.settings?.legendDefinition}
                       settingsOpen={false}
                       editable={editable}
                       dashboardSettings={dashboardSettings}
+                      enableSaveButtonForIds={enableSaveButtonForIds}
                       extensions={extensions}
                       settings={subReport.settings ? subReport.settings : {}}
                       updateReportSetting={(name, value) => onReportSettingUpdate(subReport.id, name, value)}
@@ -224,10 +227,12 @@ const NeoCard = ({
             </Box>
           ) : (
             <NeoCardView
+              id={id}
               legendDefinition={legendDefinition}
               settingsOpen={settingsOpen}
               editable={editable}
               dashboardSettings={dashboardSettings}
+              enableSaveButtonForIds={enableSaveButtonForIds}
               extensions={extensions}
               settings={report.settings ? report.settings : {}}
               updateReportSetting={(name, value) => onReportSettingUpdate(id, name, value)}

diff --git a/src/card/view/CardView.tsx b/src/card/view/CardView.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { ReportItemContainer } from '../CardStyle';
 import NeoCardViewHeader from './CardViewHeader';
 import NeoCardViewFooter from './CardViewFooter';
-import { CardContent } from '@mui/material';
+import { CardContent, Fab } from '@mui/material';
 import NeoCodeEditorComponent from '../../component/editor/CodeEditorComponent';
 
 import { CARD_FOOTER_HEIGHT, CARD_HEADER_HEIGHT } from '../../config/CardConfig';
@@ -15,8 +15,10 @@ import { lightTheme, darkHeaderTheme, luma } from '../../component/theme/Themes'
 
 import { IconButton } from '@neo4j-ndl/react';
 import { PlayCircleIconSolid } from '@neo4j-ndl/react/icons';
+import { PlayArrowOutlined } from '@mui/icons-material';
 
 const NeoCardView = ({
+  id,
   legendDefinition,
   title,
   database,
@@ -32,6 +34,7 @@ const NeoCardView = ({
   type,
   selection,
   dashboardSettings,
+  enableSaveButtonForIds,
   settings,
   updateReportSetting,
   createNotification,
@@ -137,6 +140,11 @@ const NeoCardView = ({
     if (!settingsOpen) {
       setLastRunTimestamp(Date.now());
     }
+
+    // Resets the report with save button
+    if (enableSaveButtonForIds.map((report) => report.id).includes(id)) {
+      setActive(false);
+    }
   }, [JSON.stringify(localParameters)]);
 
   useEffect(() => {
@@ -169,7 +177,7 @@ const NeoCardView = ({
   };
   const reportContent = (
     <CardContent ref={ref} style={cardContentStyle}>
-      {active ? (
+      {active === true || active === 'on' ? (
         <NeoReportWrapper
           legendDefinition={legendDefinition}
           query={query}
@@ -195,30 +203,50 @@ const NeoCardView = ({
         />
       ) : (
         <>
-          <IconButton
-            style={{ float: 'right', marginRight: '9px' }}
-            aria-label='run'
-            onClick={() => {
-              setActive(true);
-            }}
-            clean
-          >
-            <PlayCircleIconSolid className='n-w-5 n-h-5' aria-label={'play'} />
-          </IconButton>
-          <NeoCodeEditorComponent
-            value={query}
-            language={'cypher'}
-            editable={false}
-            style={{
-              border: '1px solid lightgray',
-              borderRight: '35px solid #eee',
-              marginTop: '0px',
-              marginLeft: '10px',
-              marginRight: '10px',
-            }}
-            onChange={() => {}}
-            placeholder={'No query specified...'}
-          />
+          {settings.hideQueryEditorInAutoRunOnMode === 'on' && (
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+              <Fab
+                variant='extended'
+                onClick={() => {
+                  setActive(true);
+                }}
+                color='success'
+                size='small'
+              >
+                <PlayArrowOutlined aria-label={'play'} />
+                save
+              </Fab>
+            </div>
+          )}
+          {settings.hideQueryEditorInAutoRunOnMode === 'off' && (
+            <>
+              <IconButton
+                style={{ float: 'right', marginRight: '9px' }}
+                aria-label='run'
+                onClick={() => {
+                  setActive(true);
+                }}
+                clean
+                size='small'
+              >
+                <PlayCircleIconSolid className='n-w-5 n-h-5' aria-label={'play'} />
+              </IconButton>
+              <NeoCodeEditorComponent
+                value={query}
+                language={'cypher'}
+                editable={false}
+                style={{
+                  border: '1px solid lightgray',
+                  borderRight: '35px solid #eee',
+                  marginTop: '0px',
+                  marginLeft: '10px',
+                  marginRight: '10px',
+                }}
+                onChange={() => {}}
+                placeholder={'No query specified...'}
+              />
+            </>
+          )}
         </>
       )}
     </CardContent>

diff --git a/src/config/ReportConfig.tsx b/src/config/ReportConfig.tsx
@@ -111,6 +111,12 @@ export const REPORT_TYPES = {
         values: [true, false],
         default: false,
       },
+      hideQueryEditorInAutoRunOnMode: {
+        label: 'Hide query editor on auto run on mode',
+        type: SELECTION_TYPES.LIST,
+        values: [true, false],
+        default: false,
+      },
     },
   },
   graph: {
@@ -337,6 +343,12 @@ export const REPORT_TYPES = {
         values: [true, false],
         default: false,
       },
+      hideQueryEditorInAutoRunOnMode: {
+        label: 'Hide query editor on auto run on mode',
+        type: SELECTION_TYPES.LIST,
+        values: [true, false],
+        default: false,
+      },
     },
   },
   bar: {
@@ -515,6 +527,12 @@ export const REPORT_TYPES = {
         values: [true, false],
         default: false,
       },
+      hideQueryEditorInAutoRunOnMode: {
+        label: 'Hide query editor on auto run on mode',
+        type: SELECTION_TYPES.LIST,
+        values: [true, false],
+        default: false,
+      },
     },
   },
   pie: {
@@ -685,6 +703,12 @@ export const REPORT_TYPES = {
         values: [true, false],
         default: false,
       },
+      hideQueryEditorInAutoRunOnMode: {
+        label: 'Hide query editor on auto run on mode',
+        type: SELECTION_TYPES.LIST,
+        values: [true, false],
+        default: false,
+      },
     },
   },
   line: {
@@ -878,6 +902,12 @@ export const REPORT_TYPES = {
         values: [true, false],
         default: false,
       },
+      hideQueryEditorInAutoRunOnMode: {
+        label: 'Hide query editor on auto run on mode',
+        type: SELECTION_TYPES.LIST,
+        values: [true, false],
+        default: false,
+      },
     },
   },
   // scatterPlot: {
@@ -1171,6 +1201,12 @@ export const REPORT_TYPES = {
         values: [true, false],
         default: false,
       },
+      hideQueryEditorInAutoRunOnMode: {
+        label: 'Hide query editor on auto run on mode',
+        type: SELECTION_TYPES.LIST,
+        values: [true, false],
+        default: false,
+      },
     },
   },
   value: {
@@ -1258,6 +1294,12 @@ export const REPORT_TYPES = {
         values: [true, false],
         default: false,
       },
+      hideQueryEditorInAutoRunOnMode: {
+        label: 'Hide query editor on auto run on mode',
+        type: SELECTION_TYPES.LIST,
+        values: [true, false],
+        default: false,
+      },
     },
   },
   json: {
@@ -1318,6 +1360,12 @@ export const REPORT_TYPES = {
         values: [true, false],
         default: false,
       },
+      hideQueryEditorInAutoRunOnMode: {
+        label: 'Hide query editor on auto run on mode',
+        type: SELECTION_TYPES.LIST,
+        values: [true, false],
+        default: false,
+      },
     },
   },
   select: {
@@ -1413,6 +1461,12 @@ export const REPORT_TYPES = {
         values: [true, false],
         default: false,
       },
+      hideQueryEditorInAutoRunOnMode: {
+        label: 'Hide query editor on auto run on mode',
+        type: SELECTION_TYPES.LIST,
+        values: [true, false],
+        default: false,
+      },
     },
   },
   iframe: {
@@ -1460,6 +1514,12 @@ export const REPORT_TYPES = {
         values: [true, false],
         default: false,
       },
+      hideQueryEditorInAutoRunOnMode: {
+        label: 'Hide query editor on auto run on mode',
+        type: SELECTION_TYPES.LIST,
+        values: [true, false],
+        default: false,
+      },
     },
   },
   text: {
@@ -1506,6 +1566,12 @@ export const REPORT_TYPES = {
         values: [true, false],
         default: false,
       },
+      hideQueryEditorInAutoRunOnMode: {
+        label: 'Hide query editor on auto run on mode',
+        type: SELECTION_TYPES.LIST,
+        values: [true, false],
+        default: false,
+      },
     },
   },
 };

diff --git a/src/page/Page.tsx b/src/page/Page.tsx
@@ -125,7 +125,9 @@ export const NeoPage = ({
   const [lastElement, setLastElement] = React.useState(<div key={getReportKey(pagenumber, '999999')}></div>);
   const [animated, setAnimated] = React.useState(false); // To turn off animations when cards are dragged around.
   const [isListOpen, setListOpen] = React.useState(true);
-
+  const enableSaveButtonForIds = reports.filter(
+    (report: any) => report.settings.hideQueryEditorInAutoRunOnMode === 'on'
+  );
   const handleButtonClick = () => {
     setListOpen(!isListOpen);
   };
@@ -295,6 +297,7 @@ export const NeoPage = ({
               <NeoCard
                 id={id}
                 key={getReportKey(pagenumber, id)}
+                enableSaveButtonForIds={enableSaveButtonForIds}
                 dashboardSettings={dashboardSettings}
                 onRemovePressed={onRemovePressed}
                 onPutItem={onPutItem}