Adding form widget as a new extension (neo4j-labs#568)

* Added forms skeleton

* Completed form skeleton

* WIP on forms interface

* Form framework (data entry, running, success, error) added

* Added comments

* Adding fields specification interface

* UI for specifying individual parameter in a form

* changing Dockerfile to enable args during build

* fixing typo on argument in dockerfile

* reverting dockerfile to older version

* Rendering parameters inside the form component

* Added docs for forms. Improved stability on form

* Fixed warnings in console

* Finished IT test for forms report

* added new field to disable a parameter selector (in this way it works only with actions)

* Fixed issue where parameter values were not updated on external changes

* Fixed styling on freetext spinner

* Workaround for clipping menu selectors in Needle

* fix(rule based styling): js doing is magic with parseFloat (some strings were casted to floats event if they were just strings starting with 0

* Added save button to form create UI

* removing console logs

* Fix for needle dropdowns not showing on modals

* Sortable list for form parameters

* Improving the drag 'n drop

* Iterating on form interface

* Final version of forms

* Disabling test

* Improved robustness of form / parameter select component

* Updated docs, added clear form button

* removing code smells

* cleaning code followign SonarCloud code smells

* cleaning code followign SonarCloud code smells

* removing code smells

* Intelligent parameters clearing in forms

---------

Co-authored-by: Alfred Rubin <alfredo.rubin@neo4j.com>

docs/modules/ROOT/pages/user-guide/reports/form.adoc

@@ -61,6 +61,8 @@ image::formselector.png[Parameter-only Form]
 
 |Confirmation Message | multiline text |Form submitted. |Text displayed to the user after the form is submitted successfully.
 
+|Clear parameters after submit |on/off |on | Clears all dashboard parameters in the form after submitting.
+
 |Has Submit Button |on/off |on | When enabled, lets the user submit the form with a button. Disabling turns the form into parameters-only mode.
 
 |Has Reset Button |on/off |on |When enabled, lets the user reset the form to enter more data. 

src/chart/graph/component/autocomplete/PropertyNameAutocomplete.tsx

@@ -22,7 +22,7 @@ export const PropertyNameAutocomplete = ({
       id='autocomplete-property'
       disabled={disabled}
       options={records.map((r) => (r._fields ? r._fields[0] : '(no data)'))}
-      getOptionLabel={(option) => (option ? option : '')}
+      getOptionLabel={(option) => option || ''}
       style={{ display: 'inline-block', width: 170, marginLeft: '5px', marginTop: '0px' }}
       inputValue={inputs[index]}
       onInputChange={(event, value) => {

src/chart/parameter/ParameterSelectCardSettings.tsx

@@ -33,11 +33,7 @@ const ParameterSelectCardSettings = ({ query, database, settings, onReportSettin
 
   // When certain settings are updated, a re-generated search query is needed.
   useEffect(() => {
-    updateReportQuery(
-      settings.entityType,
-      settings.propertyType,
-      settings.propertyTypeDisplay || settings.propertyTypeDisplay
-    );
+    updateReportQuery(settings.entityType, settings.propertyType, settings.propertyTypeDisplay);
   }, [settings.suggestionLimit, settings.deduplicateSuggestions, settings.searchType, settings.caseSensitive]);
 
   useEffect(() => {
@@ -47,7 +43,7 @@ const ParameterSelectCardSettings = ({ query, database, settings, onReportSettin
 
   const cleanParameter = (parameter: string) => parameter.replaceAll(' ', '_').replaceAll('-', '_').toLowerCase();
   const formatParameterId = (id: string | undefined | null) => {
-    const cleanedId = id || '';
+    const cleanedId = id ?? '';
     return cleanedId == '' || cleanedId.startsWith('_') ? cleanedId : `_${cleanedId}`;
   };
 
@@ -132,7 +128,7 @@ const ParameterSelectCardSettings = ({ query, database, settings, onReportSettin
   }
 
   function handleIdSelectionUpdate(value) {
-    const newValue = value ? value : '';
+    const newValue = value || '';
     onReportSettingUpdate('id', `${newValue}`);
     if (settings.propertyType && settings.entityType) {
       const newParameterName = `neodash_${settings.entityType}_${settings.propertyType}`;
@@ -196,7 +192,7 @@ const ParameterSelectCardSettings = ({ query, database, settings, onReportSettin
     settings.overridePropertyDisplayName !== undefined ? settings.overridePropertyDisplayName : false;
 
   // If the override is off, and the two values differ, set the display value to the original one again.
-  if (overridePropertyDisplayName == false && propertyInputText !== propertyInputDisplayText) {
+  if (!overridePropertyDisplayName && propertyInputText !== propertyInputDisplayText) {
     onReportSettingUpdate('propertyTypeDisplay', settings.propertyType);
     setPropertyInputDisplayText(propertyInputText);
     updateReportQuery(settings.entityType, settings.propertyType, settings.propertyType);
@@ -335,7 +331,7 @@ const ParameterSelectCardSettings = ({ query, database, settings, onReportSettin
                     ? [settings.propertyType]
                     : propertyRecords.map((r) => (r._fields ? r._fields[0] : '(no data)'))
                 }
-                getOptionLabel={(option) => (option ? option : '')}
+                getOptionLabel={(option) => option || ''}
                 style={{ display: 'inline-block', width: '65%', marginTop: '13px', marginRight: '5%' }}
                 inputValue={propertyInputText}
                 onInputChange={(event, value) => {
@@ -372,7 +368,7 @@ const ParameterSelectCardSettings = ({ query, database, settings, onReportSettin
                       ? [settings.propertyTypeDisplay || settings.propertyType]
                       : propertyRecords.map((r) => (r._fields ? r._fields[0] : '(no data)'))
                   }
-                  getOptionLabel={(option) => (option ? option : '')}
+                  getOptionLabel={(option) => option || ''}
                   style={{ display: 'inline-block', width: '65%', marginTop: '13px', marginRight: '5%' }}
                   inputValue={propertyInputDisplayText}
                   onInputChange={(event, value) => {

src/chart/parameter/component/DateParameterSelect.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { ParameterSelectProps } from './ParameterSelect';
 import NeoDatePicker from '../../../component/field/DateField';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
 import { Date as Neo4jDate } from 'neo4j-driver-core/lib/temporal-types.js';
 import { isCastableToNeo4jDate, isEmptyObject } from '../../ChartUtils';
 import { debounce } from '@mui/material';
@@ -27,11 +27,11 @@ const DatePickerParameterSelectComponent = (props: ParameterSelectProps) => {
       : dayjs();
 
   const [inputDate, setInputDate] = React.useState(castPropsToJsDate(props.parameterValue));
-  const label = props.settings && props.settings.entityType ? props.settings.entityType : '';
-  const helperText = props.settings && props.settings.helperText ? props.settings.helperText : '';
+  const label = props?.settings?.entityType ? props.settings.entityType : '';
+  const helperText = props?.settings?.helperText ? props.settings.helperText : '';
   const clearParameterOnFieldClear =
     props.settings && props.settings.clearParameterOnFieldClear ? props.settings.clearParameterOnFieldClear : false;
-  const disabled = props.settings && props.settings.disabled ? props.settings.disabled : false;
+  const disabled = props?.settings?.disabled ? props.settings.disabled : false;
 
   const setParameterValue = (value) => {
     props.setParameterValue(castPropsToBoltDate(value));

src/chart/parameter/component/FreeTextParameterSelect.tsx

@@ -18,7 +18,7 @@ const FreeTextParameterSelectComponent = (props: ParameterSelectProps) => {
   const helperText = props.settings && props.settings.helperText ? props.settings.helperText : '';
   const clearParameterOnFieldClear =
     props.settings && props.settings.clearParameterOnFieldClear ? props.settings.clearParameterOnFieldClear : false;
-  const disabled = props.settings && props.settings.disabled ? props.settings.disabled : false;
+  const disabled = props?.settings?.disabled ? props.settings.disabled : false;
   const [running, setRunning] = React.useState(false);
   const [paramValueLocal, setParamValueLocal] = React.useState(null);
 

src/chart/parameter/component/NodePropertyParameterSelect.tsx

@@ -7,7 +7,6 @@ import { SelectionConfirmationButton } from './SelectionConfirmationButton';
 import NeoCodeViewerComponent from '../../../component/editor/CodeViewerComponent';
 import { getRecordType, toNumber } from '../../ChartUtils';
 
-
 const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
   const suggestionsUpdateTimeout =
     props.settings && props.settings.suggestionsUpdateTimeout ? props.settings.suggestionsUpdateTimeout : 250;
@@ -16,7 +15,7 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
       ? props.settings.defaultValue
       : '';
 
-  const disabled = props.settings && props.settings.disabled ? props.settings.disabled : false;
+  const disabled = props?.settings?.disabled ? props.settings.disabled : false;
   const getInitialValue = (value, multi) => {
     if (value && Array.isArray(value)) {
       return multi ? value : null;
@@ -154,18 +153,12 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
       setInputValue(props.parameterDisplayValue);
     }
   }, [props.parameterDisplayValue]);
-
-
+
   // The query used to populate the selector is invalid.
   if (extraRecords && extraRecords[0] && extraRecords[0].error) {
     return (
       <NeoCodeViewerComponent
-        value={
-          `The parameter value retrieval query is invalid: \n${ 
-          props.query 
-          }\n\nError message:\n${ 
-          extraRecords[0].error}`
-        }
+        value={`The parameter value retrieval query is invalid: \n${props.query}\n\nError message:\n${extraRecords[0].error}`}
       />
     );
   }
@@ -175,7 +168,7 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
       <Autocomplete
         id='autocomplete'
         multiple={multiSelector}
-        options={extraRecords && extraRecords.map((r) => r?._fields?.[displayValueRowIndex] || '(no data)').sort()}
+        options={extraRecords?.map((r) => r?._fields?.[displayValueRowIndex] || '(no data)').sort()}
         disabled={disabled}
         limitTags={multiSelectLimit}
         style={{

src/extensions/ExtensionConfig.tsx

@@ -77,7 +77,7 @@ export const EXTENSIONS: Record<string, Extension> = {
     name: 'forms',
     label: 'Forms',
     author: 'Neo4j Professional Services',
-    image: 'https://www.pulsecarshalton.co.uk/wp-content/uploads/2016/08/jk-placeholder-image.jpg',
+    image: 'form.png',
     enabled: true,
     description:
       'Forms let you craft Cypher queries with multiple inputs, that are fired on demand. Using parameters from the dashboard, or form specific input, you will be able to trigger custom logic with forms.',

src/extensions/ExtensionUtils.ts

@@ -7,16 +7,16 @@ import { FORMS } from './forms/FormsReportConfig';
 import { EXAMPLE_FORMS } from './forms/FormsExampleConfig';
 // Components can call this to check if any extension is enabled. For example, to decide whether to all rule-based styling.
 export const extensionEnabled = (extensions, name) => {
-  return extensions && extensions[name] && extensions[name].active;
+  return extensions[name]?.active;
 };
 
 // Tell the application what charts are available, dynmically, based on the selected extensions.
 export const getReportTypes = (extensions) => {
   let charts = { ...REPORT_TYPES };
-  if (extensions && extensions['advanced-charts'] && extensions['advanced-charts'].active) {
+  if (extensions['advanced-charts']?.active) {
     charts = { ...charts, ...ADVANCED_REPORT_TYPES };
   }
-  if (extensions && extensions.forms && extensions.forms.active) {
+  if (extensions?.forms?.active) {
     charts = { ...charts, ...FORMS };
   }
   return charts;
@@ -25,10 +25,10 @@ export const getReportTypes = (extensions) => {
 // Tell the application what examples are available, dynmically, based on the selected extensions.
 export const getExampleReports = (extensions) => {
   let examples = [...EXAMPLE_REPORTS];
-  if (extensions && extensions['advanced-charts'] && extensions['advanced-charts'].active) {
+  if (extensions['advanced-charts']?.active) {
     examples = [...examples, ...EXAMPLE_ADVANCED_REPORTS];
   }
-  if (extensions && extensions.forms && extensions.forms.active) {
+  if (extensions?.forms?.active) {
     examples = [...examples, ...EXAMPLE_FORMS];
   }
   return examples;

src/extensions/advancedcharts/chart/gantt/frappe/lib/svg_utils.ts

@@ -43,7 +43,7 @@ function getAnimationElement(svgElement, attr, from, to, dur = '0.4s', begin = '
       from,
       to,
       dur,
-      begin: `click + ${  begin}`, // artificial click
+      begin: `click + ${begin}`, // artificial click
     });
     return svgElement;
   }
@@ -55,7 +55,7 @@ function getAnimationElement(svgElement, attr, from, to, dur = '0.4s', begin = '
     dur,
     begin,
     calcMode: 'spline',
-    values: `${from  };${  to}`,
+    values: `${from};${to}`,
     keyTimes: '0; 1',
     keySplines: cubic_bezier('ease-out'),
   });

src/extensions/forms/FormsReportConfig.tsx

@@ -42,6 +42,12 @@ export const FORMS = {
         values: [true, false],
         default: true,
       },
+      clearParametersAfterSubmit: {
+        label: 'Clear parameters after submit',
+        type: SELECTION_TYPES.LIST,
+        values: [true, false],
+        default: false,
+      },
       hasResetButton: {
         label: 'Has Reset Button',
         type: SELECTION_TYPES.LIST,

src/extensions/forms/chart/NeoForm.tsx

@@ -20,13 +20,14 @@ enum FormStatus {
  */
 const NeoForm = (props: ChartProps) => {
   const { settings } = props;
-  const [submitButtonActive, setSubmitButtonActive] = React.useState(true);
   const buttonText = settings?.runButtonText ? settings.runButtonText : 'Submit';
   const confirmationMessage = settings?.confirmationMessage ? settings.confirmationMessage : 'Form Submitted.';
   const resetButtonText = settings?.resetButtonText ? settings.resetButtonText : 'Reset Form';
-  const hasResetButton = settings?.hasResetButton !== undefined ? settings.hasResetButton : true;
-  const hasSubmitButton = settings?.hasSubmitButton !== undefined ? settings.hasSubmitButton : true;
-  const hasSubmitMessage = settings?.hasSubmitMessage !== undefined ? settings.hasSubmitMessage : true;
+  const hasResetButton = settings?.hasResetButton ? settings.hasResetButton : true;
+  const hasSubmitButton = settings?.hasSubmitButton ? settings.hasSubmitButton : true;
+  const hasSubmitMessage = settings?.hasSubmitMessage ? settings.hasSubmitMessage : true;
+  const clearParametersAfterSubmit = settings?.clearParametersAfterSubmit ? settings.clearParametersAfterSubmit : false;
+  const [submitButtonActive, setSubmitButtonActive] = React.useState(true);
   const [status, setStatus] = React.useState(FormStatus.DATA_ENTRY);
   const [formResults, setFormResults] = React.useState([]);
   const debouncedRunCypherQuery = useCallback(debounce(props.queryCallback, RUN_QUERY_DELAY_MS), []);
@@ -92,6 +93,19 @@ const NeoForm = (props: ChartProps) => {
                   setStatus(FormStatus.ERROR);
                 } else {
                   forceRefreshDependentReports();
+                  if (clearParametersAfterSubmit) {
+                    const formFields = props?.settings?.formFields;
+                    if (formFields) {
+                      const entries = formFields.map((f) => f.settings);
+                      entries.forEach((entry) => {
+                        if (entry.multiSelector) {
+                          props.setGlobalParameter && props.setGlobalParameter(entry.parameterName, []);
+                        } else {
+                          props.setGlobalParameter && props.setGlobalParameter(entry.parameterName, '');
+                        }
+                      });
+                    }
+                  }
                   if (hasSubmitMessage) {
                     setStatus(FormStatus.SUBMITTED);
                   } else {

src/extensions/forms/settings/NeoFormCardSettings.tsx

@@ -96,7 +96,7 @@ const NeoFormCardSettings = ({ query, database, settings, extensions, onReportSe
                     <div>
                       <span style={{ lineHeight: '32px' }}>
                         <SortableList.DragHandle />{' '}
-                        {formFields[index] && formFields[index].settings.parameterName
+                        {formFields[index]?.settings?.parameterName
                           ? `$${formFields[index].settings.parameterName}`
                           : '(undefined)'}
                       </span>

src/extensions/forms/settings/NeoFormCardSettingsModal.tsx

@@ -4,12 +4,7 @@ import React from 'react';
 import { Button, Dialog } from '@neo4j-ndl/react';
 import ParameterSelectCardSettings from '../../../chart/parameter/ParameterSelectCardSettings';
 import NeoCardSettingsFooter from '../../../card/settings/CardSettingsFooter';
-import {
-  AdjustmentsHorizontalIconOutline,
-  PencilIconOutline,
-  PlusIconOutline,
-  XMarkIconOutline,
-} from '@neo4j-ndl/react/icons';
+
 const NeoFormCardSettingsModal = ({ open, setOpen, index, formFields, setFormFields, database, extensions }) => {
   const [advancedSettingsOpen, setAdvancedSettingsOpen] = React.useState(false);
 

src/extensions/styling/StyleRuleEvaluator.ts

@@ -132,6 +132,9 @@ const evaluateCondition = (realValue, condition, ruleValue) => {
     // If something is null, rules are never met.
     return false;
   }
+  if (!isNaN(Number(ruleValue))) {
+    ruleValue = Number(ruleValue);
+  }
   if (condition == '=') {
     return realValue === ruleValue;
   }