#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>
  );