@k-int/stripes-kint-components 1.5.0 → 2.0.0

package/src/lib/CustomProperties/Config/CustomPropertyForm.js

@@ -0,0 +1,295 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Field, useFormState, useForm } from 'react-final-form';
+
+import {
+  Col,
+  InfoPopover,
+  MultiSelection,
+  Row,
+  Select,
+  TextArea,
+  TextField
+} from '@folio/stripes/components';
+import { requiredValidator } from '@folio/stripes-erm-components';
+
+const CustomPropertyForm = ({
+  contextFilterOptions,
+  helpPopovers,
+  labelOverrides,
+  refdata
+}) => {
+  const { values } = useFormState();
+  const { change } = useForm();
+  const intl = useIntl();
+
+  const booleanToString = booleanValue => booleanValue?.toString();
+  const stringToBoolean = stringValue => stringValue === 'true';
+
+  const [contextOptions, setContextOptions] = useState(contextFilterOptions?.filter(ctx => ctx.value !== '' && ctx?.value !== 'isNull'));
+
+  const addCtx = ({ _r, _e, filterText }) => {
+    const newOption = { value: filterText, label: filterText };
+    setContextOptions([newOption, ...contextOptions]);
+    change('ctx', [newOption]);
+  };
+
+  const renderAddCtx = ({ filterValue, exactMatch }) => {
+    if (!filterValue || exactMatch) {
+      return null;
+    } else {
+      return <FormattedMessage id="stripes-kint-components.customProperties.ctx.addContext" values={{ value: filterValue }} />;
+    }
+  };
+
+  return (
+    <>
+      <Row>
+        <Col xs={6}>
+          <Field
+            component={TextField}
+            label={labelOverrides?.label ??
+              <FormattedMessage id="stripes-kint-components.customProperties.label" />
+            }
+            name="label"
+            required
+            startControl={helpPopovers?.label ?
+              <InfoPopover
+                content={helpPopovers?.label}
+              /> : null
+            }
+            validate={requiredValidator}
+          />
+        </Col>
+        <Col xs={6}>
+          <Field
+            component={TextField}
+            label={labelOverrides?.name ??
+              <FormattedMessage id="stripes-kint-components.customProperties.name" />
+            }
+            name="name"
+            required
+            startControl={helpPopovers?.name ?
+              <InfoPopover
+                content={helpPopovers?.name}
+              /> : null
+            }
+            validate={v => {
+              if (v && v.length) {
+                return /^[a-z][a-z0-9]*$/i.test(v) ? (
+                  undefined
+                ) : (
+                  <FormattedMessage id="stripes-kint-components.errors.hasNonAlphaName" />
+                );
+              }
+
+              return requiredValidator(v);
+            }}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={12}>
+          <Field
+            component={TextArea}
+            label={labelOverrides?.description ??
+              <FormattedMessage id="stripes-kint-components.customProperties.description" />
+            }
+            name="description"
+            required
+            startControl={helpPopovers?.description ?
+              <InfoPopover
+                content={helpPopovers?.description}
+              /> : null
+            }
+            validate={requiredValidator}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={3}>
+          <Field
+            component={TextField}
+            label={labelOverrides?.weight ??
+              <FormattedMessage id="stripes-kint-components.customProperties.weight" />
+            }
+            name="weight"
+            required
+            startControl={helpPopovers?.weight ?
+              <InfoPopover
+                content={helpPopovers?.weight}
+              /> : null
+            }
+            type="number"
+            validate={requiredValidator}
+          />
+        </Col>
+        <Col xs={3}>
+          <Field
+            component={Select}
+            dataOptions={[
+              {
+                label: intl.formatMessage({
+                  id: 'stripes-kint-components.yes',
+                }),
+                value: 'true',
+              },
+              {
+                label: intl.formatMessage({
+                  id: 'stripes-kint-components.no',
+                }),
+                value: 'false',
+              },
+            ]}
+            format={booleanToString}
+            label={labelOverrides?.primary ??
+              <FormattedMessage
+                id="stripes-kint-components.customProperties.primary"
+              />
+            }
+            name="primary"
+            parse={stringToBoolean}
+            required
+            startControl={helpPopovers?.primary ?
+              <InfoPopover
+                content={helpPopovers?.primary}
+              /> : null
+            }
+            validate={requiredValidator}
+          />
+        </Col>
+        <Col xs={3}>
+          <Field
+            component={Select}
+            dataOptions={[
+              {
+                label: intl.formatMessage({
+                  id:
+                    'stripes-kint-components.customProperties.internalTrue',
+                }),
+                value: 'true',
+              },
+              {
+                label: intl.formatMessage({
+                  id:
+                    'stripes-kint-components.customProperties.internalFalse',
+                }),
+                value: 'false',
+              },
+            ]}
+            format={booleanToString}
+            label={labelOverrides?.defaultVisibility ??
+              <FormattedMessage id="stripes-kint-components.customProperties.defaultVisibility" />
+            }
+            name="defaultInternal"
+            parse={stringToBoolean}
+            required
+            startControl={helpPopovers?.defaultVisibility ?
+              <InfoPopover
+                content={helpPopovers?.defaultVisibility}
+              /> : null
+            }
+            validate={requiredValidator}
+          />
+        </Col>
+        <Col xs={3}>
+          <Field
+            actions={[{ onSelect: addCtx, render: renderAddCtx }]}
+            component={MultiSelection}
+            dataOptions={contextOptions}
+            label={labelOverrides?.ctx ??
+              <FormattedMessage id="stripes-kint-components.customProperties.ctx" />
+            }
+            name="ctx"
+            onChange={(selectedItems) => {
+              if (selectedItems.length) {
+                change('ctx', [selectedItems?.[selectedItems?.length - 1]]);
+              } else {
+                change('ctx', undefined);
+              }
+            }}
+            validate={value => (value?.length > 1 ? <FormattedMessage id="stripes-kint-components.customProperties.ctx.error.moreThanOne" /> : null)}
+          />
+        </Col>
+      </Row>
+      {/* Users can only configure the type of a custom property when creating it, not when editing it */}
+      {!values?.id && (
+        <Row>
+          <Col xs={6}>
+            <Field
+              component={Select}
+              dataOptions={[
+                { label: '', value: '' },
+                {
+                  label: intl.formatMessage({
+                    id: 'stripes-kint-components.customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyDecimal',
+                  }),
+                  value: 'Decimal',
+                },
+                {
+                  label: intl.formatMessage({
+                    id: 'stripes-kint-components.customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyInteger',
+                  }),
+                  value: 'Integer',
+                },
+                {
+                  label: intl.formatMessage({
+                    id: 'stripes-kint-components.customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyText',
+                  }),
+                  value: 'Text',
+                },
+                {
+                  label: intl.formatMessage({
+                    id: 'stripes-kint-components.customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata',
+                  }),
+                  value: 'Refdata',
+                },
+              ]
+              }
+              label={labelOverrides?.type ??
+                <FormattedMessage id="stripes-kint-components.customProperties.type" />
+              }
+              name="type"
+              required
+              startControl={helpPopovers?.type ?
+                <InfoPopover
+                  content={helpPopovers?.type}
+                /> : null
+              }
+              validate={requiredValidator}
+            />
+          </Col>
+          <Col xs={6}>
+            {values?.type === 'Refdata' && (
+              <Field
+                component={Select}
+                dataOptions={[{ label: '', value: '' }, ...refdata]}
+                label={labelOverrides?.category ??
+                  <FormattedMessage id="stripes-kint-components.customProperties.category" />
+                }
+                name="category"
+                required
+                startControl={helpPopovers?.category ?
+                  <InfoPopover
+                    content={helpPopovers?.category}
+                  /> : null
+                }
+                validate={requiredValidator}
+              />
+            )}
+          </Col>
+        </Row>
+      )}
+    </>
+  );
+};
+
+CustomPropertyForm.propTypes = {
+  contextFilterOptions: PropTypes.arrayOf(PropTypes.string),
+  helpPopovers: PropTypes.object,
+  labelOverrides: PropTypes.object,
+  refdata: PropTypes.arrayOf(PropTypes.object)
+};
+
+export default CustomPropertyForm;

package/src/lib/CustomProperties/Config/index.js

@@ -0,0 +1,4 @@
+export { default as CustomPropertiesLookup } from './CustomPropertiesLookup';
+export { default as CustomPropertiesView } from './CustomPropertiesLookup';
+export { default as CustomPropertiesSettings } from './CustomPropertiesSettings';
+export { default as CustomPropertyForm } from './CustomPropertyForm';

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;