Fix review 2

Author: BennuFire

src/chart/parameter/ParameterSelectionChart.tsx

@@ -28,7 +28,7 @@ export const NeoParameterSelectionChart = (props: ChartProps) => {
   const setParameterDisplayValue = (value) => setGlobalParameter(parameterDisplayName, value);
   const allParameters = props.parameters;
   const multiSelector = props?.settings?.multiSelector;
-  const setManual = props?.settings?.setManual;
+  const manualParameterSave = props?.settings?.manualParameterSave;
   // in NeoDash 2.2.1 or earlier, there was no means to have a different display value in the selector. This condition handles that.
   const compatibilityMode = !query?.toLowerCase().includes('as display') || false;
 
@@ -50,7 +50,7 @@ export const NeoParameterSelectionChart = (props: ChartProps) => {
         settings={props.settings}
         allParameters={allParameters}
         compatibilityMode={compatibilityMode}
-        setManual={setManual}
+        manualParameterSave={manualParameterSave}
       />
     );
   } else if (type == 'Node Property') {
@@ -68,7 +68,7 @@ export const NeoParameterSelectionChart = (props: ChartProps) => {
         allParameters={allParameters}
         compatibilityMode={compatibilityMode}
         multiSelector={multiSelector}
-        setManual={setManual}
+        manualParameterSave={manualParameterSave}
       />
     );
   } else if (type == 'Relationship Property') {
@@ -86,7 +86,7 @@ export const NeoParameterSelectionChart = (props: ChartProps) => {
         allParameters={allParameters}
         compatibilityMode={compatibilityMode}
         multiSelector={multiSelector}
-        setManual={setManual}
+        manualParameterSave={manualParameterSave}
       />
     );
   } else if (type == 'Date Picker') {
@@ -103,7 +103,7 @@ export const NeoParameterSelectionChart = (props: ChartProps) => {
         settings={props.settings}
         allParameters={allParameters}
         compatibilityMode={compatibilityMode}
-        setManual={setManual}
+        manualParameterSave={manualParameterSave}
       />
     );
   } else if (type == 'Custom Query') {
@@ -121,7 +121,7 @@ export const NeoParameterSelectionChart = (props: ChartProps) => {
         allParameters={allParameters}
         compatibilityMode={compatibilityMode}
         multiSelector={multiSelector}
-        setManual={setManual}
+        manualParameterSave={manualParameterSave}
       />
     );
   }

src/chart/parameter/component/FreeTextParameterSelect.tsx

@@ -5,7 +5,7 @@ import NeoField from '../../../component/field/Field';
 import { SelectionConfirmationButton } from './SelectionConfirmationButton';
 
 const FreeTextParameterSelectComponent = (props: ParameterSelectProps) => {
-  const { setManual } = props;
+  const { manualParameterSave } = props;
   const setParameterTimeout =
     props.settings && props.settings.setParameterTimeout ? props.settings.setParameterTimeout : 1000;
   const defaultValue =
@@ -51,23 +51,29 @@ const FreeTextParameterSelectComponent = (props: ParameterSelectProps) => {
   }
 
   return (
-    <div style={{ width: '100%', marginTop: '5px' }}>
+    <div className={'n-flex n-flex-row n-flex-wrap n-items-center'} style={{ width: '100%', marginTop: '5px' }}>
       <NeoField
         key={'freetext'}
         label={helperText ? helperText : `${label} ${property}`}
         defaultValue={defaultValue}
         value={inputText}
         variant='outlined'
         placeholder={'Enter text here...'}
-        style={{ marginBottom: '10px', marginRight: '10px', marginLeft: '15px', width: 'calc(100% - 80px)' }}
+        style={{
+          marginBottom: '10px',
+          marginRight: '10px',
+          marginLeft: '15px',
+          minWidth: `calc(100% - ${manualParameterSave ? '70' : '30'}px)`,
+          maxWidth: 'calc(100% - 30px)',
+        }}
         onChange={(newValue) => {
           setRunning(true);
           setInputText(newValue);
 
-          handleParameters(newValue, setManual);
+          handleParameters(newValue, manualParameterSave);
         }}
       />
-      {setManual ? (
+      {manualParameterSave ? (
         <SelectionConfirmationButton onClick={() => manualHandleParameters()} key={`selectionConfirmation`} />
       ) : (
         <></>

src/chart/parameter/component/NodePropertyParameterSelect.tsx

@@ -21,7 +21,7 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
     }
     return multi ? [] : value;
   };
-  const { multiSelector, setManual } = props;
+  const { multiSelector, manualParameterSave } = props;
   const allParameters = props.allParameters ? props.allParameters : {};
   const [extraRecords, setExtraRecords] = React.useState([]);
   const [inputDisplayText, setInputDisplayText] = React.useState(
@@ -64,23 +64,23 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
     if (isMulti) {
       if (value.length == 0 && clearParameterOnFieldClear) {
         setInputValue([]);
-        handleParameters(undefined, undefined, setManual);
+        handleParameters(undefined, undefined, manualParameterSave);
         return true;
       }
       if (value.length == 0) {
         setInputValue([]);
-        handleParameters([], [], setManual);
+        handleParameters([], [], manualParameterSave);
         return true;
       }
     } else {
       if (value && clearParameterOnFieldClear) {
         setInputValue(null);
-        handleParameters(undefined, undefined, setManual);
+        handleParameters(undefined, undefined, manualParameterSave);
         return true;
       }
       if (value == null) {
         setInputValue(null);
-        handleParameters(defaultValue, defaultValue, setManual);
+        handleParameters(defaultValue, defaultValue, manualParameterSave);
         return true;
       }
       return false;
@@ -92,8 +92,8 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
       return;
     }
     let newValue;
-    let valReference = setManual ? paramValueTemp : props.parameterValue;
-    let valDisplayReference = setManual ? paramValueDisplayTemp : props.parameterDisplayValue;
+    let valReference = manualParameterSave ? paramValueTemp : props.parameterValue;
+    let valDisplayReference = manualParameterSave ? paramValueDisplayTemp : props.parameterDisplayValue;
     // Multiple and new entry
     if (isMulti && inputValue.length < newDisplay.length) {
       newValue = Array.isArray(valReference) ? [...valReference] : [valReference];
@@ -118,7 +118,7 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
     setInputDisplayText(isMulti ? '' : newDisplay);
     setInputValue(newDisplay);
 
-    handleParameters(newValue, newDisplay, setManual);
+    handleParameters(newValue, newDisplay, manualParameterSave);
   };
   return (
     <div className={'n-flex n-flex-row n-flex-wrap n-items-center'}>
@@ -128,7 +128,7 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
         options={extraRecords.map((r) => r?._fields?.[displayValueRowIndex] || '(no data)').sort()}
         style={{
           maxWidth: 'calc(100% - 30px)',
-          minWidth: `calc(100% - ${setManual ? '70' : '30'}px)`,
+          minWidth: `calc(100% - ${manualParameterSave ? '70' : '30'}px)`,
           marginLeft: '15px',
           marginTop: '5px',
         }}
@@ -153,7 +153,7 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
         )}
         getOptionLabel={(option) => RenderSubValue(option)}
       />
-      {setManual ? (
+      {manualParameterSave ? (
         <SelectionConfirmationButton onClick={() => manualHandleParameters()} key={`selectionConfirmation`} />
       ) : (
         <></>

src/chart/parameter/component/ParameterSelect.ts

@@ -53,5 +53,5 @@ export interface ParameterSelectProps {
   /**
    * Add the possibility for manual selection confirmation
    */
-  setManual?: boolean;
+  manualParameterSave?: boolean;
 }

src/chart/parameter/component/RelationshipPropertyParameterSelect.tsx

@@ -21,7 +21,7 @@ const RelationshipPropertyParameterSelectComponent = (props: ParameterSelectProp
       allParameters={props.allParameters}
       compatibilityMode={props.compatibilityMode}
       multiSelector={props.multiSelector}
-      setManual={props.setManual}
+      manualParameterSave={props.manualParameterSave}
     />
   );
 };

src/chart/parameter/component/SelectionConfirmationButton.tsx

@@ -3,13 +3,13 @@ import { Tooltip } from '@mui/material';
 import { CheckBadgeIconOutline } from '@neo4j-ndl/react/icons';
 import { IconButton } from '@neo4j-ndl/react';
 /**
- * Returns a button to delete a property entry from the table inside the GraphChartEditModal.
+ * Returns a button to confirm a selection entry from the parameter selector.
  */
 export const SelectionConfirmationButton = ({ onClick, key }) => {
   return (
     <Tooltip title={'Confirm'} disableInteractive key={key}>
       <IconButton
-        key={`btn${  key}`}
+        key={`btn${key}`}
         className='logo-btn n-p-1'
         aria-label={'btb-confirmation'}
         size='large'
@@ -19,22 +19,5 @@ export const SelectionConfirmationButton = ({ onClick, key }) => {
         <CheckBadgeIconOutline className='header-icon' type='outline' />
       </IconButton>
     </Tooltip>
-    /*
-    <Fab
-
-      size='small'
-      aria-label='remove'
-      style={{
-        background: 'white',
-        color: 'grey',
-        marginTop: '-6px',
-        marginLeft: '20px',
-        width: '26px',
-        height: '26px',
-        minHeight: '26px',
-      }}
-      onClick={onClick}
-    >
-      */
   );
 };

src/config/ReportConfig.tsx

@@ -1296,7 +1296,7 @@ export const REPORT_TYPES = {
         values: [true, false],
         default: false,
       },
-      setManual: {
+      manualParameterSave: {
         label: 'Manual Parameter Save',
         type: SELECTION_TYPES.LIST,
         values: [true, false],