#Vulcan-224/Execute button and hide query editor for non auto run reports

src/card/Card.tsx

@@ -39,6 +39,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.
+  enableExecuteButtonForIds, // 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.
@@ -131,6 +132,7 @@ const NeoCard = ({
             settingsOpen={settingsOpen}
             editable={editable}
             dashboardSettings={dashboardSettings}
+            enableExecuteButtonForIds={enableExecuteButtonForIds}
             extensions={extensions}
             settings={report.settings ? report.settings : {}}
             updateReportSetting={(name, value) => onReportSettingUpdate(id, name, value)}

src/card/view/CardView.tsx

@@ -2,16 +2,18 @@ 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, Stack } from '@mui/material';
 import NeoCodeEditorComponent from '../../component/editor/CodeEditorComponent';
 import { CARD_FOOTER_HEIGHT, CARD_HEADER_HEIGHT } from '../../config/CardConfig';
 import { getReportTypes } from '../../extensions/ExtensionUtils';
 import NeoCodeViewerComponent from '../../component/editor/CodeViewerComponent';
 import { NeoReportWrapper } from '../../report/ReportWrapper';
 import { identifyStyleRuleParameters } from '../../extensions/styling/StyleRuleEvaluator';
-import { IconButton } from '@neo4j-ndl/react';
-import { PlayCircleIconSolid } from '@neo4j-ndl/react/icons';
+import { IconButton, Typography } from '@neo4j-ndl/react';
+import { PlayCircleIconSolid, PlayIconOutline } from '@neo4j-ndl/react/icons';
 import { extensionEnabled } from '../../utils/ReportUtils';
+import { PlayArrowOutlined } from '@mui/icons-material';
+import { checkParametersNameInGlobalParameter, extractAllParameterNames } from '../../utils/parameterUtils';
 import { objMerge } from '../../utils/ObjectManipulation';
 import { REPORT_TYPES } from '../../config/ReportConfig';
 
@@ -31,6 +33,7 @@ const NeoCardView = ({
   type,
   selection,
   dashboardSettings,
+  enableExecuteButtonForIds,
   settings,
   updateReportSetting,
   createNotification,
@@ -150,6 +153,11 @@ const NeoCardView = ({
     if (!settingsOpen) {
       setLastRunTimestamp(Date.now());
     }
+
+    // Resets the report with save button
+    if (enableExecuteButtonForIds.map((report) => report.id).includes(id)) {
+      setActive(false);
+    }
   }, [JSON.stringify(localParameters)]);
 
   useEffect(() => {
@@ -180,6 +188,68 @@ const NeoCardView = ({
       : `${reportHeight}px`,
     overflow: 'auto',
   };
+
+  const isParametersDefined = (cypherQuery: string) => {
+    const parameterNames = extractAllParameterNames(cypherQuery);
+    if (globalParameters) {
+      return checkParametersNameInGlobalParameter(parameterNames, globalParameters);
+    }
+    return false;
+  };
+
+  const executeButton = (
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+      <Stack direction='column' justifyContent='center' alignItems='center' spacing={2}>
+        <IconButton
+          disabled={isParametersDefined(query)}
+          onClick={() => {
+            setActive(true);
+          }}
+          size='large'
+          style={{
+            color: '#ffffff',
+            backgroundColor: 'green',
+          }}
+        >
+          <PlayIconOutline aria-label={'play'} />
+        </IconButton>
+        <Typography variant='body-medium' component='div'>
+          {settings.executeButtonName ?? 'Execute'}
+        </Typography>
+      </Stack>
+    </div>
+  );
+
+  const cypherQueryEditor = (
+    <>
+      <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...'}
+      />
+    </>
+  );
+
   const reportContent = (
     <CardContent ref={ref} style={cardContentStyle}>
       {active ? (
@@ -206,33 +276,10 @@ const NeoCardView = ({
           queryTimeLimit={dashboardSettings.queryTimeLimit ? dashboardSettings.queryTimeLimit : 20}
           setFields={onFieldsUpdate}
         />
+      ) : settings.hideQueryEditorInAutoRunOnMode ? (
+        executeButton
       ) : (
-        <>
-          <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...'}
-          />
-        </>
+        cypherQueryEditor
       )}
     </CardContent>
   );