Merge pull request #822 from mercedes-benz/feat/FormsButtonImprovements

Feat/forms button improvements

Author: alfredorubin96

cypress/e2e/start_page.cy.js

@@ -205,8 +205,10 @@ describe('NeoDash E2E Tests', () => {
 
     cy.get('main .react-grid-item:eq(2) button[aria-label="run"]').scrollIntoView().should('be.visible').click();
     cy.wait(500);
+    cy.get('#form-submit').should('be.disabled');
     cy.get('#autocomplete').type('The Matrix');
     cy.get('#autocomplete-option-0').click();
+    cy.get('#form-submit').should('not.be.disabled');
     cy.get('#form-submit').click();
     cy.wait(500);
     cy.get('.form-submitted-message').should('have.text', 'Form Submitted.Reset Form');

src/extensions/forms/chart/NeoForm.tsx

@@ -7,6 +7,7 @@ import { REPORT_LOADING_ICON } from '../../../report/Report';
 import debounce from 'lodash/debounce';
 import { RUN_QUERY_DELAY_MS } from '../../../config/ReportConfig';
 import NeoParameterSelectionChart from '../../../chart/parameter/ParameterSelectionChart';
+import { checkParametersNameInGlobalParameter, extractAllParameterNames } from '../../../utils/parameterUtils';
 
 enum FormStatus {
   DATA_ENTRY = 0, // The user is filling in the form.
@@ -42,6 +43,14 @@ const NeoForm = (props: ChartProps) => {
     });
   }
 
+  const isParametersDefined = (cypherQuery: string | undefined) => {
+    const parameterNames = extractAllParameterNames(cypherQuery);
+    if (props.parameters) {
+      return checkParametersNameInGlobalParameter(parameterNames, props.parameters);
+    }
+    return false;
+  };
+
   useEffect(() => {
     // If the parameters change after the form is completed, reset it, as there might be another submission.
     if (status == FormStatus.SUBMITTED) {
@@ -77,7 +86,7 @@ const NeoForm = (props: ChartProps) => {
           <Button
             style={{ marginLeft: 15 }}
             id='form-submit'
-            disabled={!submitButtonActive}
+            disabled={!submitButtonActive || isParametersDefined(props.query)}
             onClick={() => {
               if (!props.query || !props.query.trim()) {
                 props.createNotification(

src/utils/parameterUtils.ts

@@ -0,0 +1,35 @@
+/**
+ * Extracts all parameter names from a given Cypher query string.
+ *
+ * @param {string} cypherQuery The Cypher query string to extract parameter names from.
+ * @returns {string[]} An array containing all extracted parameter names.
+ */
+export const extractAllParameterNames = (cypherQuery: string): string[] => {
+    // A regular expression pattern to match parameter names following '$'
+    const pattern = /\$([A-Za-z_]\w*)/g;
+
+    const parameterNames: string[] = [];
+    let match: any;
+
+    while ((match = pattern.exec(cypherQuery)) !== null) {
+        parameterNames.push(match[1]);
+    }
+
+    return parameterNames;
+}
+
+/**
+ * Checks if all parameter names are present in the global parameter names.
+ * 
+ * @param {string[]} parameterNames An array of parameter names to be checked.
+ * @param {object} globalParameterNames The object containing global parameter names to compare against.
+ * @returns {boolean} A boolean indicating whether all parameters are present in the global parameters.
+ */
+export const checkParametersNameInGlobalParameter = (parameterNames: string[], globalParameterNames: any): boolean => {
+    for (const key of parameterNames) {
+        if (!globalParameterNames[key] || (Array.isArray(globalParameterNames[key]) && globalParameterNames[key].length === 0) || globalParameterNames[key] === '') {
+            return true;
+        }
+    }
+    return false;
+}