@k-int/stripes-kint-components 5.29.0 → 5.29.1

package/src/lib/Settings/EditableSettingsList/EditableSettingsList.js

@@ -6,16 +6,28 @@ import arrayMutators from 'final-form-arrays';
 import EditableSettingsListFieldArray from './EditableSettingsListFieldArray';
 
 const EditableSettingsList = ({
-  allowEdit = true, // A gloabal boolean permission to turn on/off editing of all appSettings in the frontend
-  data,
+  allowEdit = true, // A global boolean permission to turn on/off editing of all appSettings in the frontend
   initialValues,
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,
   label,
   labelOverrides = {},
   onSave,
-  render // Experimental idea, allow unique rendering per setting?
+  render, // Experimental idea, allow unique rendering per setting?
+  settingData
 }) => {
+  // Fake the form save... this is super bad I know, but it's very old code and the plan is to get rid of this component
+  // Because it's in a single Form even though each setting really requires it's own form. It'd be more work to unpick that
+  // without accidentally causing some backwards compatibility issues I think. So for now we fake it
+
+  let settingToSave;
+  const handleFormSubmit = async (_values) => {
+    return onSave(settingToSave).then((res) => {
+      settingToSave = undefined;
+      return res;
+    });
+  };
+
   return (
     <Form
       enableReinitialize
@@ -23,25 +35,35 @@ const EditableSettingsList = ({
       keepDirtyOnReinitialize
       mutators={arrayMutators}
       navigationCheck
-      onSubmit={onSave}
+      onSubmit={handleFormSubmit}
       subscription={{ value: true }}
     >
-      {({ handleSubmit }) => (
-        <form onSubmit={handleSubmit}>
-          <FieldArray
-            allowEdit={allowEdit}
-            component={EditableSettingsListFieldArray}
-            data={data}
-            intlKey={passedIntlKey}
-            intlNS={passedIntlNS}
-            label={label}
-            labelOverrides={labelOverrides}
-            name="settings"
-            onSave={onSave}
-            render={render}
-          />
-        </form>
-      )}
+      {({ handleSubmit }) => {
+        // Set up the setting we want to save, then trigger handleSubmit so we get "submitting" in the form.
+        // Yes this is ugly
+        const handleSave = async (setting) => {
+          settingToSave = setting;
+          return handleSubmit();
+        };
+
+        return (
+          <form onSubmit={handleSubmit}>
+            <FieldArray
+              key="editable-setting-list-field-array"
+              allowEdit={allowEdit}
+              component={EditableSettingsListFieldArray}
+              intlKey={passedIntlKey}
+              intlNS={passedIntlNS}
+              label={label}
+              labelOverrides={labelOverrides}
+              name="settings"
+              onSave={handleSave}
+              render={render}
+              settingData={settingData}
+            />
+          </form>
+        );
+      }}
     </Form>
   );
 };

package/src/lib/Settings/EditableSettingsList/EditableSettingsListFieldArray/EditableSettingsListFieldArray.js

@@ -7,7 +7,6 @@ import { SettingField } from '../SettingField';
 
 const EditableSettingsListField = ({
   allowEdit,
-  data,
   fields,
   handleSave,
   index,
@@ -15,20 +14,25 @@ const EditableSettingsListField = ({
   intlNS,
   labelOverrides,
   render,
-  setting
+  setting,
+  settingData: passedSettingData,
 }) => {
   // Handle editing or not at this level
   const [editing, setEditing] = useState(false);
+  // This is really grim.
+  // Set up whether this setting is submitting or not.
+  // Submitting in the form level applies to ALL
+  const [settingSubmitting, setSettingSubmitting] = useState(false);
+
 
   const settingData = useMemo(() => ({
-    currentSetting: fields.value[index],
-    ...fields,
-  }), [fields, index]);
+    currentSetting: passedSettingData.settings[index],
+    ...passedSettingData,
+  }), [index, passedSettingData]);
 
   const DefaultField = useCallback(() => {
     return (
       <Field
-        key={setting}
         allowEdit={allowEdit}
         component={SettingField}
         data-testid={`editableSettingsListFieldArray[${index}]`}
@@ -36,17 +40,23 @@ const EditableSettingsListField = ({
         intlKey={intlKey}
         intlNS={intlNS}
         labelOverrides={labelOverrides}
-        name={setting}
-        onSave={() => handleSave(index)}
+        name={`${setting}.value`}
+        onSave={handleSave}
+        parse={v => v}
         setEditing={setEditing}
+        setSettingSubmitting={setSettingSubmitting}
         settingData={settingData}
+        settingSubmitting={settingSubmitting}
       />
     );
-  }, [allowEdit, editing, handleSave, index, intlKey, intlNS, labelOverrides, setting, settingData]);
+  }, [allowEdit, editing, handleSave, index, intlKey, intlNS, labelOverrides, setting, settingData, settingSubmitting]);
+
+  if (!render || render instanceof Function) {
+    return <DefaultField key={`${setting}-default-field`} />;
+  }
 
   return render({
     allowEdit,
-    data,
     DefaultField,
     editing,
     fields,
@@ -55,47 +65,39 @@ const EditableSettingsListField = ({
     intlKey,
     intlNS,
     setEditing,
+    setSettingSubmitting,
     setting,
     settingData,
     SettingFieldComponent: SettingField,
+    settingSubmitting
   });
 };
 
 const EditableSettingsListFieldArray = ({
   allowEdit: passedAllowEdit = true,
-  data: passedData,
   fields: passedFields,
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,
   labelOverrides = {},
   onSave,
-  render = ({
-    DefaultField,
-  }) => {
-    return (
-      <DefaultField />
-    );
-  }
+  render,
+  settingData
 }) => {
-  const handleSave = (index) => {
-    const setting = passedFields.value[index];
-    return onSave(setting);
-  };
-
   return (
     passedFields.map((setting, i) => {
       return (
         <EditableSettingsListField
+          key={setting}
           allowEdit={passedAllowEdit}
-          data={passedData}
           fields={passedFields}
-          handleSave={handleSave}
+          handleSave={onSave}
           index={i}
           intlKey={passedIntlKey}
           intlNS={passedIntlNS}
           labelOverrides={labelOverrides}
           render={render}
           setting={setting}
+          settingData={settingData}
         />
       );
     })

package/src/lib/Settings/EditableSettingsList/EditableSettingsListFieldArray/EditableSettingsListFieldArray.test.js

@@ -74,6 +74,7 @@ describe('EditableSettingsListFieldArray', () => {
           <FieldArray
             component={EditableSettingsListFieldArray}
             name="settings"
+            settingData={{ settings }}
           />
         </TestForm>
       );
@@ -96,6 +97,7 @@ describe('EditableSettingsListFieldArray', () => {
           <FieldArray
             component={EditableSettingsListFieldArray}
             name="settings"
+            settingData={{ settings: multipleSettings }}
           />
         </TestForm>
       );

package/src/lib/Settings/EditableSettingsList/SettingField/EditSettingValue/EditSettingValue.js

@@ -1,28 +1,31 @@
+import { useMemo } from 'react';
+
 import PropTypes from 'prop-types';
 
 import { useKintIntl } from '../../../../hooks';
-import StaticSettingsField from '../../../StaticSettingsField';
+import { StaticSettingsFieldComponent } from '../../../StaticSettingsField';
 
 const EditSettingValue = ({
   currentSetting: setting,
-  input,
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,
   labelOverrides = {},
+  name,
   ...props
 }) => {
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 
-  const fieldLabel = kintIntl.formatKintMessage({
+  const fieldLabel = useMemo(() => kintIntl.formatKintMessage({
     id: 'settings.valueFor',
     overrideValue: labelOverrides?.valueFor
-  }, { name: setting.key });
+  }, { name: setting.key }), [kintIntl, labelOverrides?.valueFor, setting.key]);
 
   return (
-    <StaticSettingsField
+    <StaticSettingsFieldComponent
+      key={`static-render-function-${name}`}
       aria-label={fieldLabel}
       autofocus
-      name={`${input.name}.value`}
+      name={name}
       setting={setting}
       {...props}
     />

package/src/lib/Settings/EditableSettingsList/SettingField/EditSettingValue/EditSettingValue.test.js

@@ -1,3 +1,4 @@
+import { Field } from 'react-final-form';
 import { TestForm } from '@folio/stripes-erm-testing';
 
 import EditSettingValue from './EditSettingValue';
@@ -103,11 +104,10 @@ describe('EditSettingValue', () => {
             initialValues={{}}
             onSubmit={onSubmit}
           >
-            <EditSettingValue
+            <Field
+              component={EditSettingValue}
               currentSetting={stringSetting}
-              input={{
-                name: 'test'
-              }}
+              name="test"
             />
           </TestForm>
         );
@@ -124,17 +124,14 @@ describe('EditSettingValue', () => {
         renderComponent = renderWithKintHarness(
           <TestForm
             initialValues={{
-              test: {
-                value: stringSetting.value
-              }
+              test: stringSetting.value
             }}
             onSubmit={onSubmit}
           >
-            <EditSettingValue
+            <Field
+              component={EditSettingValue}
               currentSetting={stringSetting}
-              input={{
-                name: 'test'
-              }}
+              name="test"
             />
           </TestForm>
         );
@@ -159,11 +156,10 @@ describe('EditSettingValue', () => {
             initialValues={{}}
             onSubmit={onSubmit}
           >
-            <EditSettingValue
+            <Field
+              component={EditSettingValue}
               currentSetting={refdataSetting}
-              input={{
-                name: 'test'
-              }}
+              name="test"
               refdata={refdata}
             />
           </TestForm>
@@ -190,17 +186,14 @@ describe('EditSettingValue', () => {
         renderComponent = renderWithKintHarness(
           <TestForm
             initialValues={{
-              test: {
-                value: refdataSetting.value
-              }
+              test: refdataSetting.value
             }}
             onSubmit={onSubmit}
           >
-            <EditSettingValue
+            <Field
+              component={EditSettingValue}
               currentSetting={refdataSetting}
-              input={{
-                name: 'test'
-              }}
+              name="test"
               refdata={refdata}
             />
           </TestForm>
@@ -230,11 +223,10 @@ describe('EditSettingValue', () => {
             initialValues={{}}
             onSubmit={onSubmit}
           >
-            <EditSettingValue
+            <Field
+              component={EditSettingValue}
               currentSetting={refdataSetting}
-              input={{
-                name: 'test'
-              }}
+              name="test"
               refdata={moreRefdata}
             />
           </TestForm>
@@ -262,17 +254,14 @@ describe('EditSettingValue', () => {
         renderComponent = renderWithKintHarness(
           <TestForm
             initialValues={{
-              test: {
-                value: refdataSetting.value
-              }
+              test: refdataSetting.value
             }}
             onSubmit={onSubmit}
           >
-            <EditSettingValue
+            <Field
+              component={EditSettingValue}
               currentSetting={refdataSetting}
-              input={{
-                name: 'test'
-              }}
+              name="test"
               refdata={moreRefdata}
             />
           </TestForm>
@@ -305,11 +294,10 @@ describe('EditSettingValue', () => {
             initialValues={{}}
             onSubmit={onSubmit}
           >
-            <EditSettingValue
+            <Field
+              component={EditSettingValue}
               currentSetting={templateSetting}
-              input={{
-                name: 'test'
-              }}
+              name="test"
               templates={templates}
             />
           </TestForm>
@@ -339,17 +327,14 @@ describe('EditSettingValue', () => {
         renderComponent = renderWithKintHarness(
           <TestForm
             initialValues={{
-              test: {
-                value: templateSetting.value
-              }
+              test: templateSetting.value
             }}
             onSubmit={onSubmit}
           >
-            <EditSettingValue
+            <Field
+              component={EditSettingValue}
               currentSetting={templateSetting}
-              input={{
-                name: 'test'
-              }}
+              name="test"
               templates={templates}
             />
           </TestForm>

package/src/lib/Settings/EditableSettingsList/SettingField/SettingField.js

@@ -1,10 +1,12 @@
-import { useContext } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { useFormState } from 'react-final-form';
 
 import {
   Button,
   Card,
   InfoPopover,
+  Spinner,
 } from '@folio/stripes/components';
 
 import EditSettingValue from './EditSettingValue';
@@ -22,16 +24,25 @@ const SettingField = (settingFieldProps) => {
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
+    name,
     onSave,
     setEditing,
     settingData: {
       currentSetting
-    } = {}
+    } = {},
+    setSettingSubmitting,
+    settingSubmitting,
   } = settingFieldProps;
 
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
   const { refdataEndpoint, templateEndpoint } = useContext(SettingsContext);
 
+  const {
+    submitting,
+    invalid,
+    values
+  } = useFormState();
+
   const {
     0: {
       values: refdata = []
@@ -53,7 +64,7 @@ const SettingField = (settingFieldProps) => {
     }
   });
 
-  const renderHelpText = (helpTextId) => {
+  const renderHelpText = useCallback((helpTextId) => {
     return (
       <div className={renderHelpTextCSS.help}>
         {
@@ -74,9 +85,9 @@ const SettingField = (settingFieldProps) => {
         }
       </div>
     );
-  };
+  }, [kintIntl]);
 
-  const renderEditButton = () => {
+  const renderEditButton = useCallback(() => {
     const EditText = editing ?
       kintIntl.formatKintMessage({
         id: 'save'
@@ -85,36 +96,51 @@ const SettingField = (settingFieldProps) => {
         id: 'edit'
       });
     if (allowEdit) {
+      // This is unbelievably gross... this stems from this all being in a single FieldArray.
+      // We should aim to set this up in an ActionList as soon as possible
+      const settingToSave = values.settings?.find(s => s.id === currentSetting.id);
+
       return (
         <Button
+          disabled={editing && (submitting || invalid)}
           marginBottom0
           onClick={(e) => {
             e.preventDefault();
-            return (
-              editing ?
-                onSave().then(() => setEditing(false)) :
-                setEditing(true)
-            );
+            if (editing) {
+              setSettingSubmitting(true);
+              // We want to track that JUST this setting is being edited,
+              // since "Submitting" is relevant for any and all submits
+              // I hate this
+              return onSave(settingToSave)
+                .then(() => {
+                  setEditing(false);
+                  setSettingSubmitting(false);
+                });
+            }
+
+            return setEditing(true);
           }}
         >
+          {(submitting && settingSubmitting) ? <Spinner /> : null}
           {EditText}
         </Button>
       );
     }
     return null;
-  };
+  }, [allowEdit, currentSetting.id, editing, invalid, kintIntl, onSave, setEditing, setSettingSubmitting, settingSubmitting, submitting, values.settings]);
 
-  let RenderFunction;
-  if (editing === false) {
-    RenderFunction = RenderSettingValue;
-  } else {
-    RenderFunction = EditSettingValue;
-  }
+  const RenderFunction = useMemo(() => {
+    if (editing === false) {
+      return RenderSettingValue;
+    } else {
+      return EditSettingValue;
+    }
+  }, [editing]);
 
-  const id = `settings.${toCamelCase(currentSetting.section)}.${toCamelCase(currentSetting.key)}.help`;
+  const id = useMemo(() => `settings.${toCamelCase(currentSetting.section)}.${toCamelCase(currentSetting.key)}.help`, [currentSetting.key, currentSetting.section]);
 
 
-  const renderHeaderStart = () => {
+  const renderHeaderStart = useCallback(() => {
     const settingName = Object.keys(currentSetting).length > 0 ?
     kintIntl.formatKintMessage({
       id: `settings.${toCamelCase(currentSetting.section)}.${toCamelCase(currentSetting.key)}`
@@ -130,16 +156,19 @@ const SettingField = (settingFieldProps) => {
         {settingName}
       </>
     );
-  };
+  }, [currentSetting, id, kintIntl, renderHelpText]);
 
   return (
     <Card
+      key={`setting-edit-card-${name}`}
       headerEnd={renderEditButton()}
       headerStart={renderHeaderStart()}
       roundedBorder
     >
       <RenderFunction
+        key={`setting-render-function-${name}`}
         currentSetting={currentSetting}
+        disabled={submitting}
         intlKey={passedIntlKey}
         intlNS={passedIntlNS}
         labelOverrides={labelOverrides}

package/src/lib/Settings/EditableSettingsList/SettingField/SettingField.test.js

@@ -26,6 +26,7 @@ const setting = {
 };
 
 const setEditing = jest.fn();
+const setSettingSubmitting = jest.fn();
 
 let renderComponent;
 describe('SettingField', () => {
@@ -63,6 +64,7 @@ describe('SettingField', () => {
             name="test"
             onSave={onSave}
             setEditing={setEditing}
+            setSettingSubmitting={setSettingSubmitting}
             settingData={{
               currentSetting: setting
             }}

package/src/lib/Settings/SettingPage/SettingPage.js

@@ -31,6 +31,7 @@ const SettingPage = ({
       onSave={handleSubmit}
       onSubmit={handleSubmit}
       render={render}
+      settingData={{ settings }}
       settingSection={sectionName}
     />
   );

package/src/lib/Settings/StaticSettingsField/StaticSettingsField.js

@@ -1,78 +1,18 @@
 import PropTypes from 'prop-types';
 
 import { Field } from 'react-final-form';
-import {
-  Select,
-  TextField,
-} from '@folio/stripes/components';
 
-import RefdataButtons from '../../RefdataButtons';
+import StaticSettingsFieldComponent from './StaticSettingsFieldComponent';
 
 // This is pretty much EXACTLY equivalent to the EditSettingValue in EditableSettingsList,
 // but slightly tweaked to be more accommodating
-const StaticSettingsField = ({
-  refdata,
-  setting = {},
-  templates,
-  ...fieldProps // Anything else will be passed directly onto the <Field> component
-}) => {
-  // Adding default sort to refdata object in ascending order by label
-  const sortByLabel = (a, b) => (a.label.localeCompare(b.label));
-  const sortedRefdata = refdata?.sort(sortByLabel);
-
-  switch (setting.settingType) {
-    case 'Refdata':
-      // Grab refdata values corresponding to setting
-      // eslint-disable-next-line no-case-declarations
-      let RefdataComponent = Select;
-      if (refdata.length > 0 && refdata.length <= 4) {
-        RefdataComponent = RefdataButtons;
-      }
-
-      return (
-        <Field
-          component={RefdataComponent}
-          dataOptions={sortedRefdata}
-          {...fieldProps}
-        />
-      );
-
-    case 'Password':
-      return (
-        <Field
-          component={TextField}
-          parse={v => v} // Lets us send an empty string instead of 'undefined'
-          type="password"
-          {...fieldProps}
-        />
-      );
-    case 'Template': {
-      // Grab template values corresponding to setting
-      // eslint-disable-next-line no-case-declarations
-      const selectTemplateValues = [
-        { value: '', label: '' },
-        ...templates.map(t => ({ value: t.id, label: t.name }))
-      ];
-
-      return (
-        <Field
-          component={Select}
-          dataOptions={selectTemplateValues}
-          parse={v => v}
-          {...fieldProps}
-        />
-      );
-    }
-    default:
-      // If in doubt, go with String
-      return (
-        <Field
-          component={TextField}
-          parse={v => v} // Lets us send an empty string instead of 'undefined'
-          {...fieldProps}
-        />
-      );
-  }
+const StaticSettingsField = (props) => {
+  return (
+    <Field
+      component={StaticSettingsFieldComponent}
+      {...props}
+    />
+  );
 };
 
 StaticSettingsField.propTypes = {