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

package/src/index.js

@@ -9,6 +9,7 @@ export {
   useQIndex,
   useRefdata,
   useTemplates,
+  useSettings
 } from './lib/hooks';
 
 // Useful utility functions
@@ -18,17 +19,20 @@ export {
   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 {
@@ -64,4 +68,7 @@ export {
 } from './lib/SASQViewComponent';
 
 // NoResultsMessage
-export { NoResultsMessage } from './lib/NoResultsMessage';
+export { default as NoResultsMessage } from './lib/NoResultsMessage';
+
+// RefdataButtons
+export { default as RefdataButtons } from './lib/RefdataButtons';

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,7 @@ 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,

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;

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

@@ -0,0 +1,379 @@
+import React from 'react';
+
+import '@folio/stripes-erm-components/test/jest/__mock__';
+import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+
+import EditSettingValue from './EditSettingValue';
+
+import { renderWithKintHarness } from '../../../../test/jest/helpers';
+
+const onSubmit = jest.fn();
+
+const stringSetting = {
+  id: '12345',
+  key: 'testSettingKey',
+  section: 'testSettingSection',
+  settingType: 'String',
+  value: 'diku-shared',
+};
+
+const refdata = [
+  {
+    id: '123',
+    value: 'test_refdata_value',
+    label: 'Test refdata value'
+  },
+  {
+    id: '456',
+    value: 'other_refdata_value',
+    label: 'Other refdata value'
+  },
+  {
+    id: '789',
+    value: 'final_refdata_value',
+    label: 'Final refdata value'
+  }
+];
+
+const moreRefdata = [
+  {
+    id: '123',
+    value: 'test_refdata_value',
+    label: 'Test refdata value'
+  },
+  {
+    id: '234',
+    value: 'other_refdata_value',
+    label: 'Other refdata value'
+  },
+  {
+    id: '345',
+    value: 'refdata_value_3',
+    label: 'Refdata value 3'
+  },
+  {
+    id: '456',
+    value: 'refdata_value_4',
+    label: 'Refdata value 4'
+  },
+  {
+    id: '567',
+    value: 'refdata_value_5',
+    label: 'Refdata value 5'
+  },
+  {
+    id: '678',
+    value: 'final_refdata_value',
+    label: 'Final refdata value'
+  }
+];
+
+const refdataSetting = {
+  id: '12345',
+  key: 'testSettingKey',
+  section: 'testSettingSection',
+  settingType: 'Refdata',
+  value: 'test_refdata_value',
+};
+
+const templates = [
+  {
+    id: 'abcde',
+    name: 'Test template'
+  },
+  {
+    id: '98765',
+    name: 'Red herring template'
+  },
+];
+
+const templateSetting = {
+  id: '12345',
+  key: 'testSettingKey',
+  section: 'testSettingSection',
+  settingType: 'Template',
+  value: 'abcde',
+};
+
+describe('EditSettingValue', () => {
+  describe('edit string setting', () => {
+    describe('with no initial value', () => {
+      let renderComponent;
+      beforeEach(() => {
+        renderComponent = renderWithKintHarness(
+          <TestForm
+            initialValues={{}}
+            onSubmit={onSubmit}
+          >
+            <EditSettingValue
+              currentSetting={stringSetting}
+              input={{
+                name: 'test'
+              }}
+            />
+          </TestForm>
+        );
+      });
+      test('renders the edit field', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('textbox', { name: 'Value for setting {name}' }));
+      });
+    });
+
+    describe('with initial value', () => {
+      let renderComponent;
+      beforeEach(() => {
+        renderComponent = renderWithKintHarness(
+          <TestForm
+            initialValues={{
+              test: {
+                value: stringSetting.value
+              }
+            }}
+            onSubmit={onSubmit}
+          >
+            <EditSettingValue
+              currentSetting={stringSetting}
+              input={{
+                name: 'test'
+              }}
+            />
+          </TestForm>
+        );
+      });
+
+      test('renders the expected value in the edit field', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('textbox', { name: 'Value for setting {name}' })).toHaveDisplayValue('diku-shared');
+      });
+    });
+  });
+
+  // NOTE -- Password textbox works weirdly so isn't tested here
+
+
+  describe('edit refdata setting', () => {
+    describe('with no initial value for refdata with <4 options', () => {
+      let renderComponent;
+      beforeEach(() => {
+        renderComponent = renderWithKintHarness(
+          <TestForm
+            initialValues={{}}
+            onSubmit={onSubmit}
+          >
+            <EditSettingValue
+              currentSetting={refdataSetting}
+              input={{
+                name: 'test'
+              }}
+              refdata={refdata}
+            />
+          </TestForm>
+        );
+      });
+      test('renders the expected radio buttons', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('radio', { name: 'Test refdata value' }));
+        expect(getByRole('radio', { name: 'Other refdata value' }));
+        expect(getByRole('radio', { name: 'Final refdata value' }));
+      });
+
+      test('no radio buttons are checked', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('radio', { name: 'Test refdata value' })).not.toHaveAttribute('checked');
+        expect(getByRole('radio', { name: 'Other refdata value' })).not.toHaveAttribute('checked');
+        expect(getByRole('radio', { name: 'Final refdata value' })).not.toHaveAttribute('checked');
+      });
+    });
+
+    describe('with initial value for refdata with <4 options', () => {
+      let renderComponent;
+      beforeEach(() => {
+        renderComponent = renderWithKintHarness(
+          <TestForm
+            initialValues={{
+              test: {
+                value: refdataSetting.value
+              }
+            }}
+            onSubmit={onSubmit}
+          >
+            <EditSettingValue
+              currentSetting={refdataSetting}
+              input={{
+                name: 'test'
+              }}
+              refdata={refdata}
+            />
+          </TestForm>
+        );
+      });
+
+      test('renders the expected radio buttons', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('radio', { name: 'Test refdata value' }));
+        expect(getByRole('radio', { name: 'Other refdata value' }));
+        expect(getByRole('radio', { name: 'Final refdata value' }));
+      });
+
+      test('the correct radio button is checked', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('radio', { name: 'Test refdata value' })).toHaveAttribute('checked');
+        expect(getByRole('radio', { name: 'Other refdata value' })).not.toHaveAttribute('checked');
+        expect(getByRole('radio', { name: 'Final refdata value' })).not.toHaveAttribute('checked');
+      });
+    });
+
+    describe('with no initial value for refdata with >4 options', () => {
+      let renderComponent;
+      beforeEach(() => {
+        renderComponent = renderWithKintHarness(
+          <TestForm
+            initialValues={{}}
+            onSubmit={onSubmit}
+          >
+            <EditSettingValue
+              currentSetting={refdataSetting}
+              input={{
+                name: 'test'
+              }}
+              refdata={moreRefdata}
+            />
+          </TestForm>
+        );
+      });
+      test('renders the expected select field', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('combobox', { name: 'Value for setting {name}' }));
+      });
+
+      test('renders the expected refdata options', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('option', { name: 'Test refdata value' }));
+        expect(getByRole('option', { name: 'Other refdata value' }));
+        expect(getByRole('option', { name: 'Refdata value 3' }));
+        expect(getByRole('option', { name: 'Refdata value 4' }));
+        expect(getByRole('option', { name: 'Refdata value 5' }));
+        expect(getByRole('option', { name: 'Final refdata value' }));
+      });
+    });
+
+    describe('with initial value for refdata with >4 options', () => {
+      let renderComponent;
+      beforeEach(() => {
+        renderComponent = renderWithKintHarness(
+          <TestForm
+            initialValues={{
+              test: {
+                value: refdataSetting.value
+              }
+            }}
+            onSubmit={onSubmit}
+          >
+            <EditSettingValue
+              currentSetting={refdataSetting}
+              input={{
+                name: 'test'
+              }}
+              refdata={moreRefdata}
+            />
+          </TestForm>
+        );
+      });
+
+      test('renders the expected refdata options', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('option', { name: 'Test refdata value' }));
+        expect(getByRole('option', { name: 'Other refdata value' }));
+        expect(getByRole('option', { name: 'Refdata value 3' }));
+        expect(getByRole('option', { name: 'Refdata value 4' }));
+        expect(getByRole('option', { name: 'Refdata value 5' }));
+        expect(getByRole('option', { name: 'Final refdata value' }));
+      });
+
+      test('renders the expected value in the refdata dropdown', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('combobox', { name: 'Value for setting {name}' })).toHaveDisplayValue('Test refdata value');
+      });
+    });
+  });
+
+  describe('edit template setting', () => {
+    describe('with no initial value', () => {
+      let renderComponent;
+      beforeEach(() => {
+        renderComponent = renderWithKintHarness(
+          <TestForm
+            initialValues={{}}
+            onSubmit={onSubmit}
+          >
+            <EditSettingValue
+              currentSetting={templateSetting}
+              input={{
+                name: 'test'
+              }}
+              templates={templates}
+            />
+          </TestForm>
+        );
+      });
+      test('renders the edit field', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('combobox', { name: 'Value for setting {name}' }));
+      });
+
+      test('renders the expected template options', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('option', { name: '' })); // empty option
+        expect(getByRole('option', { name: 'Test template' }));
+        expect(getByRole('option', { name: 'Red herring template' }));
+      });
+
+      test('renders expected display item in template dropdown', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('combobox', { name: 'Value for setting {name}' })).toHaveDisplayValue('');
+      });
+    });
+
+    describe('with initial value', () => {
+      let renderComponent;
+      beforeEach(() => {
+        renderComponent = renderWithKintHarness(
+          <TestForm
+            initialValues={{
+              test: {
+                value: templateSetting.value
+              }
+            }}
+            onSubmit={onSubmit}
+          >
+            <EditSettingValue
+              currentSetting={templateSetting}
+              input={{
+                name: 'test'
+              }}
+              templates={templates}
+            />
+          </TestForm>
+        );
+      });
+
+      test('renders the edit field', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('combobox', { name: 'Value for setting {name}' }));
+      });
+
+      test('renders the expected template options', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('option', { name: '' })); // empty option
+        expect(getByRole('option', { name: 'Test template' }));
+        expect(getByRole('option', { name: 'Red herring template' }));
+      });
+
+      test('renders expected display item in template dropdown', () => {
+        const { getByRole } = renderComponent;
+        expect(getByRole('combobox', { name: 'Value for setting {name}' })).toHaveDisplayValue('Test template');
+      });
+    });
+  });
+});

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

@@ -19,7 +19,8 @@ const RenderSettingValue = (props) => {
       }
 
       if (setting.defValue) {
-        return `${defaultText} ${setting.defValue}`;
+        const defValue = refdata?.filter((obj) => obj.value === setting.defValue)[0]?.label;
+        return `${defaultText} ${defValue}`;
       }
 
       return NoCurrentValue;