@k-int/stripes-kint-components 1.3.0 → 1.7.0

package/src/index.js

@@ -2,29 +2,38 @@
 export {
   useActiveElement,
   useHelperApp,
+  useKiwtFieldArray,
   useKiwtSASQuery,
   useLocalStorageState,
   useMutateRefdataValue,
+  useQIndex,
   useRefdata,
   useTemplates,
+  useSettings
 } from './lib/hooks';
 
 // Useful utility functions
 export {
-  generateKiwtQuery
+  generateKiwtQuery,
+  generateKiwtQueryParams,
+  refdataOptions,
+  selectorSafe
 } from './lib/utils';
 
-// Settings Components
+// Contexts
 export {
   SettingsContext,
+} from './lib/contexts';
+
+// Setting Page Components
+export {
   SettingPage,
   SettingPagePane,
-  useSettings
-} from './lib/Settings';
+} from './lib/SettingPage';
 
 // ActionList & RefdataEditor components
-export { ActionList } from './lib/ActionList';
-export { EditableRefdataList } from './lib/EditableRefdataList';
+export { default as ActionList } from './lib/ActionList';
+export { default as EditableRefdataList } from './lib/EditableRefdataList';
 
 // Typedown
 export {
@@ -58,3 +67,9 @@ export {
 export {
   default as SASQViewComponent
 } from './lib/SASQViewComponent';
+
+// NoResultsMessage
+export { default as NoResultsMessage } from './lib/NoResultsMessage';
+
+// RefdataButtons
+export { default as RefdataButtons } from './lib/RefdataButtons';

package/src/lib/ActionList/ActionList.js

@@ -12,6 +12,7 @@ const propTypes = {
   actionCalls: PropTypes.object,
   columnMapping: PropTypes.object,
   contentData: PropTypes.arrayOf(PropTypes.object),
+  creatableFields: PropTypes.object,
   editableFields: PropTypes.object,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
@@ -21,6 +22,7 @@ const ActionList = ({
   actionCalls = {},
   columnMapping,
   contentData,
+  creatableFields = {},
   editableFields = {},
   visibleFields
 }) => {
@@ -32,13 +34,14 @@ const ActionList = ({
       onSubmit={actionCalls.edit}
       subscription={{ contentData: true }}
     >
-      {({ handleSubmit }) => (
-        <form onSubmit={handleSubmit}>
+      {() => (
+        <form onSubmit={e => { e.preventDefault(); }}>
           <FieldArray
             actionAssigner={actionAssigner}
             actionCalls={actionCalls}
             columnMapping={columnMapping}
             component={ActionListFieldArray}
+            creatableFields={creatableFields}
             editableFields={editableFields}
             name="contentData"
             visibleFields={visibleFields}

package/src/lib/ActionList/ActionListFieldArray.js

@@ -15,6 +15,7 @@ const propTypes = {
   actionAssigner: PropTypes.func,
   actionCalls: PropTypes.object,
   columnMapping: PropTypes.object,
+  creatableFields: PropTypes.object,
   editableFields: PropTypes.object,
   fields: PropTypes.object,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
@@ -24,6 +25,7 @@ const ActionListFieldArray = ({
   actionAssigner,
   actionCalls,
   columnMapping,
+  creatableFields,
   editableFields,
   fields,
   visibleFields
@@ -54,7 +56,7 @@ const ActionListFieldArray = ({
   };
 
   const handleCreate = (index) => {
-    const rowData = fields.value[index];
+    const { actionListActions: _a, ...rowData } = fields.value[index];
     actionCalls.create(rowData);
   };
 
@@ -105,8 +107,13 @@ const ActionListFieldArray = ({
             key={`cancel[${data.rowIndex}]`}
             data-type-button="cancel"
             onClick={() => {
-              change(fieldName, get(initialValues, fieldName));
-              toggleEditing(data.id);
+              if (!data.id && editing === 'NEW_ROW') {
+                fields.remove(data.rowIndex);
+                toggleEditing('NEW_ROW');
+              } else {
+                change(fieldName, get(initialValues, fieldName));
+                toggleEditing(data.id);
+              }
             }}
           >
             <FormattedMessage id="stripes-kint-components.actionList.cancel" />
@@ -153,7 +160,7 @@ const ActionListFieldArray = ({
 
   const formatContent = () => {
     return (
-      fields.map(fieldName => {
+      fields.map((fieldName, fieldIndex) => {
         // Fetch the content from the field Values
         const cd = get(values, fieldName);
         cd.actionListActions = actionAssigner(cd);
@@ -170,17 +177,22 @@ const ActionListFieldArray = ({
           */
           for (const key of visibleFields) {
             const editFunction = editableFields[key] ?? (() => true);
+            const createFunction = creatableFields[key] ?? (() => true);
             /*
-              Next check if this is a new row, if so we should edit it in a Field
-              If it does, then we check if the property has an editableField function,
-              if it does we run it with the data. If not then we just return the Field
+              Next check if this is a new row, if so we should run the createableField function with the data.
+              If it is not a new row, then we run the editableField function with the data,
+              and it should return true/false
+
+              For both checks
+              true => Field, false => display value
             */
             if (
-                !cd.id ||
+                (!cd.id && createFunction(cd)) ||
                 (editFunction(cd))
             ) {
               returnObj[key] =
                 <Field
+                  autofocus={fieldIndex === 0}
                   component={TextField}
                   name={`${fieldName}.${key}`}
                 />;

package/src/lib/ActionList/README.md

@@ -61,5 +61,6 @@ actionAssigner | function | A function which will be passed the entire row objec
 actionCalls | object<function> | An object with keys matching any "actions" the `actionAssigner` may have assigned (In addition to special case `create`, if relevant), and values which are functions. These functions will be handed the row as a parameter. | {} | ✕ |
 columnMapping | object | An object which will act on the rendered MultiColumnList headers to map the labels for each `visibleField` | | ✕ |
 contentData | array | An array of objects to render along with their actions | | ✓ |
+creatableFields | object<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is fillable on create or not. | | ✕ |
 editableFields | object<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is editable or not. | | ✕ |
 visibleFields | array<String> | An array of strings corresponding to those fields to be displayed in the rendered MultiColumnList | | ✓ |

package/src/lib/ActionList/index.js

@@ -1 +1 @@
-export { default as ActionList } from './ActionList';
+export { default } from './ActionList';

package/src/lib/EditableRefdataList/EditableRefdataList.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
 import { useMutateRefdataValue, useRefdata } from '../hooks';
-import { ActionList } from '../ActionList';
+
+import ActionList from '../ActionList';
 
 const propTypes = {
   desc: PropTypes.string,
@@ -21,18 +22,19 @@ const EditableRefdataList = ({ desc, refdataEndpoint }) => {
   });
 
   const [contentData, setContentData] = useState([]);
+  const sortByLabel = (a, b) => (a.label.localeCompare(b.label));
 
   useEffect(() => {
     if (!isRefdataLoading) {
-      setContentData(refdata?.values ?? []);
+      setContentData(refdata?.values?.sort(sortByLabel) ?? []);
     }
   }, [isRefdataLoading, refdata]);
 
   // Edit and Create will use the same PUT mutation
   const { delete: deleteRefdataValue, put: editRefdataValue } = useMutateRefdataValue({
     afterQueryCalls: {
-      delete: json => setContentData(json?.values ?? []),
-      put: json => setContentData(json?.values ?? [])
+      delete: json => setContentData(json?.values?.sort(sortByLabel) ?? []),
+      put: json => setContentData(json?.values?.sort(sortByLabel) ?? [])
     },
     endpoint: refdataEndpoint,
     id: refdata?.id,
@@ -78,8 +80,11 @@ const EditableRefdataList = ({ desc, refdataEndpoint }) => {
         value: <FormattedMessage id="stripes-kint-components.editableRefdataList.value" />
       }}
       contentData={contentData}
+      creatableFields={{
+        value: () => false
+      }}
       editableFields={{
-        value: () => !refdata?.internal,
+        value: () => false
       }}
       visibleFields={['label', 'value']}
       // TODO add a field validator/fieldType as options?

package/src/lib/EditableRefdataList/index.js

@@ -1 +1 @@
-export { default as EditableRefdataList } from './EditableRefdataList';
+export { default } from './EditableRefdataList';

package/src/lib/{Settings → EditableSettingsList}/EditableSettingsListFieldArray.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Field } from 'react-final-form';
 
-import SettingField from './SettingField';
+import { SettingField } from './SettingField';
 
 const EditableSettingsListFieldArray = ({ data, fields, onSave }) => {
   const handleSave = (index) => {
@@ -16,6 +16,7 @@ const EditableSettingsListFieldArray = ({ data, fields, onSave }) => {
         <Field
           key={setting}
           component={SettingField}
+          data-testid={`editableSettingsListFieldArray[${i}]`}
           name={setting}
           onSave={() => handleSave(i)}
           settingData={{
@@ -26,7 +27,6 @@ const EditableSettingsListFieldArray = ({ data, fields, onSave }) => {
       );
     })
   );
-
 };
 
 EditableSettingsListFieldArray.propTypes = {

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

@@ -0,0 +1,111 @@
+import React from 'react';
+import '@folio/stripes-erm-components/test/jest/__mock__';
+import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import { FieldArray } from 'react-final-form-arrays';
+import EditableSettingsListFieldArray from './EditableSettingsListFieldArray';
+
+import { renderWithKintHarness } from '../../../test/jest/helpers';
+
+const onSubmit = jest.fn();
+jest.mock('./SettingField', () => ({ SettingField: () => <div>SettingField</div> }));
+
+const settings = [{
+  id: 'ff8081817d94374a017d94449a660049',
+  key: 'S3BucketName',
+  section: 'fileStorage',
+  settingType: 'String',
+  value: 'diku-shared'
+}];
+
+const multipleSettings = [{
+  id: '2c91809c7da2041f017da20b99000045',
+  vocab: 'FileStorageEngines',
+  section: 'fileStorage',
+  value: 'DB',
+  settingType: 'String',
+  key: 'storageEngine'
+},
+{
+  id: '2c91809c7da2041f017da20b99080046',
+  section: 'fileStorage',
+  value: 'http://s3_endpoint_host.domain:9000',
+  settingType: 'String',
+  key: 'S3Endpoint'
+},
+{
+  id: '2c91809c7da2041f017da20b990d0047',
+  section: 'fileStorage',
+  value: 'ACCESS_KEY',
+  settingType: 'String',
+  key: 'S3AccessKey'
+}
+];
+
+
+describe('EditableSettingsListFieldArray', () => {
+  describe('with empty initial values', () => {
+    let renderComponent;
+    beforeEach(async () => {
+      renderComponent = renderWithKintHarness(
+        <TestForm
+          initialValues={{}}
+          onSubmit={onSubmit}
+        >
+          <FieldArray
+            component={EditableSettingsListFieldArray}
+            name="settings"
+          />
+        </TestForm>
+      );
+    });
+
+    it('renders empty field', () => {
+      const { queryAllByTestId } = renderComponent;
+      expect(queryAllByTestId(/editableSettingsListFieldArray\[.*\]/).length).toEqual(0);
+    });
+  });
+
+  describe('with initial value set', () => {
+    let renderComponent;
+    beforeEach(async () => {
+      renderComponent = renderWithKintHarness(
+        <TestForm
+          initialValues={{ settings }}
+          onSubmit={onSubmit}
+        >
+          <FieldArray
+            component={EditableSettingsListFieldArray}
+            name="settings"
+          />
+        </TestForm>
+      );
+    });
+
+    it('renders the SettingField component', () => {
+      const { getByText } = renderComponent;
+      expect(getByText('SettingField')).toBeInTheDocument();
+    });
+  });
+
+  describe('with multiple initial values set', () => {
+    let renderComponent;
+    beforeEach(async () => {
+      renderComponent = renderWithKintHarness(
+        <TestForm
+          initialValues={{ settings: multipleSettings }}
+          onSubmit={onSubmit}
+        >
+          <FieldArray
+            component={EditableSettingsListFieldArray}
+            name="settings"
+          />
+        </TestForm>
+      );
+    });
+
+    it('renders the correct number of SettingField components', () => {
+      const { getAllByText } = renderComponent;
+      expect(getAllByText('SettingField').length).toEqual(multipleSettings.length);
+    });
+  });
+});

package/src/lib/{Settings → EditableSettingsList/SettingField}/EditSettingValue.js

@@ -1,10 +1,13 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
 import { Field } from 'react-final-form';
 import {
   Select,
   TextField,
 } from '@folio/stripes/components';
-import RefdataButtons from './RefdataButtons';
+import RefdataButtons from '../../RefdataButtons';
 
 const EditSettingValue = (props) => {
   const {
@@ -13,6 +16,8 @@ const EditSettingValue = (props) => {
     refdata,
     templates
   } = props;
+  const intl = useIntl();
+  const fieldLabel = intl.formatMessage({ id: 'stripes-kint-components.settings.valueFor', values: { name: setting.key } });
 
   switch (setting.settingType) {
     case 'Refdata':
@@ -25,6 +30,7 @@ const EditSettingValue = (props) => {
 
       return (
         <Field
+          aria-label={fieldLabel}
           component={RefdataComponent}
           dataOptions={refdata}
           name={`${input.name}.value`}
@@ -34,6 +40,7 @@ const EditSettingValue = (props) => {
     case 'Password':
       return (
         <Field
+          aria-label={fieldLabel}
           autoFocus
           component={TextField}
           name={`${input.name}.value`}
@@ -51,6 +58,7 @@ const EditSettingValue = (props) => {
 
       return (
         <Field
+          aria-label={fieldLabel}
           component={Select}
           dataOptions={selectTemplateValues}
           name={`${input.name}.value`}
@@ -62,6 +70,7 @@ const EditSettingValue = (props) => {
       // If in doubt, go with String
       return (
         <Field
+          aria-label={fieldLabel}
           autoFocus
           component={TextField}
           name={`${input.name}.value`}
@@ -71,4 +80,18 @@ const EditSettingValue = (props) => {
   }
 };
 
+EditSettingValue.propTypes = {
+  currentSetting: PropTypes.shape({
+    settingType: PropTypes.string
+  }),
+  input: PropTypes.shape({
+    name: PropTypes.string
+  }),
+  refdata: PropTypes.arrayOf(PropTypes.object),
+  templates: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    id: PropTypes.string
+  }))
+};
+
 export default EditSettingValue;