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

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

@@ -0,0 +1,368 @@
+import React from 'react';
+import '@folio/stripes-erm-components/test/jest/__mock__';
+import RenderSettingValue from './RenderSettingValue';
+
+import { renderWithKintHarness } from '../../../../test/jest/helpers';
+
+
+const stringSetting = {
+  id: '12345',
+  key: 'testSettingKey',
+  section: 'testSettingSection',
+  settingType: 'String',
+  value: 'diku-shared',
+};
+
+const stringSettingNoValue = {
+  id: '12345',
+  key: 'testSettingKey',
+  section: 'testSettingSection',
+  settingType: 'String',
+  defValue: 'diku-shared',
+};
+
+const stringSettingNoValueOrDefault = {
+  id: '12345',
+  key: 'testSettingKey',
+  section: 'testSettingSection',
+  settingType: 'String'
+};
+
+const passwordSetting = {
+  id: '12345',
+  key: 'testSettingKey',
+  section: 'testSettingSection',
+  settingType: 'Password',
+  value: 'secret password',
+};
+
+const passwordSettingNoValue = {
+  id: '12345',
+  key: 'testSettingKey',
+  section: 'testSettingSection',
+  settingType: 'Password',
+  defValue: 'secret password',
+};
+
+const passwordSettingNoValueOrDefault = {
+  id: '12345',
+  key: 'testSettingKey',
+  section: 'testSettingSection',
+  settingType: 'Password'
+};
+
+const refdata = [
+  {
+    value: 'test_refdata_value',
+    label: 'Test refdata value'
+  },
+  {
+    value: 'other_refdata_value',
+    label: 'Other refdata value'
+  },
+  {
+    value: 'final_refdata_value',
+    label: 'Final refdata value'
+  }
+];
+
+const refdataSetting = {
+  id: '12345',
+  key: 'testSettingKey',
+  section: 'testSettingSection',
+  settingType: 'Refdata',
+  value: 'test_refdata_value',
+};
+
+const refdataSettingNoValue = {
+  id: '12345',
+  key: 'testSettingKey',
+  section: 'testSettingSection',
+  settingType: 'Refdata',
+  defValue: 'test_refdata_value',
+};
+
+const refdataSettingNoValueOrDefault = {
+  id: '12345',
+  key: 'testSettingKey',
+  section: 'testSettingSection',
+  settingType: 'Refdata'
+};
+
+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',
+};
+
+const templateSettingNoValue = {
+  id: '12345',
+  key: 'testSettingKey',
+  section: 'testSettingSection',
+  settingType: 'Template',
+  defValue: 'abcde',
+};
+
+const templateSettingNoValueOrDefault = {
+  id: '12345',
+  key: 'testSettingKey',
+  section: 'testSettingSection',
+  settingType: 'Template'
+};
+
+describe('RenderSettingValue', () => {
+  describe('render string settings', () => {
+    describe('render a string setting', () => {
+      let renderComponent;
+      beforeEach(async () => {
+        renderComponent = renderWithKintHarness(
+          <RenderSettingValue
+            currentSetting={stringSetting}
+            input={{
+              name: 'test'
+            }}
+          />
+        );
+      });
+
+      it('renders the value', () => {
+        const { getByText } = renderComponent;
+        expect(getByText('diku-shared')).toBeInTheDocument();
+      });
+    });
+
+    describe('render a string setting without a value', () => {
+      let renderComponent;
+      beforeEach(async () => {
+        renderComponent = renderWithKintHarness(
+          <RenderSettingValue
+            currentSetting={stringSettingNoValue}
+            input={{
+              name: 'test'
+            }}
+          />
+        );
+      });
+
+      it('renders the default value', () => {
+        const { getByText } = renderComponent;
+        expect(getByText('[default] diku-shared')).toBeInTheDocument();
+      });
+    });
+
+    describe('render a string setting without a value or default', () => {
+      let renderComponent;
+      beforeEach(async () => {
+        renderComponent = renderWithKintHarness(
+          <RenderSettingValue
+            currentSetting={stringSettingNoValueOrDefault}
+            input={{
+              name: 'test'
+            }}
+          />
+        );
+      });
+
+      it('renders the empty message', () => {
+        const { getByText } = renderComponent;
+        expect(getByText('No current value')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('render refdata settings', () => {
+    describe('render a refdata setting', () => {
+      let renderComponent;
+      beforeEach(async () => {
+        renderComponent = renderWithKintHarness(
+          <RenderSettingValue
+            currentSetting={refdataSetting}
+            input={{
+              name: 'test'
+            }}
+            refdata={refdata}
+          />
+        );
+      });
+
+      it('renders the value', () => {
+        const { getByText } = renderComponent;
+        expect(getByText('Test refdata value')).toBeInTheDocument();
+      });
+    });
+
+    describe('render a refdata setting without a value', () => {
+      let renderComponent;
+      beforeEach(async () => {
+        renderComponent = renderWithKintHarness(
+          <RenderSettingValue
+            currentSetting={refdataSettingNoValue}
+            input={{
+              name: 'test'
+            }}
+            refdata={refdata}
+          />
+        );
+      });
+
+      it('renders the default value', () => {
+        const { getByText } = renderComponent;
+        expect(getByText('[default] Test refdata value')).toBeInTheDocument();
+      });
+    });
+
+    describe('render a refdata setting without a value or default', () => {
+      let renderComponent;
+      beforeEach(async () => {
+        renderComponent = renderWithKintHarness(
+          <RenderSettingValue
+            currentSetting={refdataSettingNoValueOrDefault}
+            input={{
+              name: 'test'
+            }}
+            refdata={refdata}
+          />
+        );
+      });
+
+      it('renders the empty message', () => {
+        const { getByText } = renderComponent;
+        expect(getByText('No current value')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('render password settings', () => {
+    describe('render a password setting', () => {
+      let renderComponent;
+      beforeEach(async () => {
+        renderComponent = renderWithKintHarness(
+          <RenderSettingValue
+            currentSetting={passwordSetting}
+            input={{
+              name: 'test'
+            }}
+          />
+        );
+      });
+
+      it('renders the value', () => {
+        const { getByText } = renderComponent;
+        expect(getByText('********')).toBeInTheDocument();
+      });
+    });
+
+    describe('render a password setting without a value', () => {
+      let renderComponent;
+      beforeEach(async () => {
+        renderComponent = renderWithKintHarness(
+          <RenderSettingValue
+            currentSetting={passwordSettingNoValue}
+            input={{
+              name: 'test'
+            }}
+          />
+        );
+      });
+
+      it('renders the default value', () => {
+        const { getByText } = renderComponent;
+        expect(getByText('[default] ********')).toBeInTheDocument();
+      });
+    });
+
+    describe('render a password setting without a value or default', () => {
+      let renderComponent;
+      beforeEach(async () => {
+        renderComponent = renderWithKintHarness(
+          <RenderSettingValue
+            currentSetting={passwordSettingNoValueOrDefault}
+            input={{
+              name: 'test'
+            }}
+          />
+        );
+      });
+
+      it('renders the empty message', () => {
+        const { getByText } = renderComponent;
+        expect(getByText('No current value')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('render template settings', () => {
+    describe('render a template setting', () => {
+      let renderComponent;
+      beforeEach(async () => {
+        renderComponent = renderWithKintHarness(
+          <RenderSettingValue
+            currentSetting={templateSetting}
+            input={{
+              name: 'test'
+            }}
+            templates={templates}
+          />
+        );
+      });
+
+      it('renders the value', () => {
+        const { getByText } = renderComponent;
+        expect(getByText('Test template')).toBeInTheDocument();
+      });
+    });
+
+    describe('render a template setting without a value', () => {
+      let renderComponent;
+      beforeEach(async () => {
+        renderComponent = renderWithKintHarness(
+          <RenderSettingValue
+            currentSetting={templateSettingNoValue}
+            input={{
+              name: 'test'
+            }}
+            templates={templates}
+          />
+        );
+      });
+
+      it('renders the default value', () => {
+        const { getByText } = renderComponent;
+        expect(getByText('Test template')).toBeInTheDocument(); // TODO this doesn't currently have a [default] marking on it
+      });
+    });
+
+    describe('render a template setting without a value or default', () => {
+      let renderComponent;
+      beforeEach(async () => {
+        renderComponent = renderWithKintHarness(
+          <RenderSettingValue
+            currentSetting={templateSettingNoValueOrDefault}
+            input={{
+              name: 'test'
+            }}
+            templates={templates}
+          />
+        );
+      });
+
+      it('renders the empty message', () => {
+        const { getByText } = renderComponent;
+        expect(getByText('No current value')).toBeInTheDocument();
+      });
+    });
+  });
+});

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

@@ -9,9 +9,10 @@ import {
 
 import EditSettingValue from './EditSettingValue';
 import RenderSettingValue from './RenderSettingValue';
-import SettingsContext from './SettingsContext';
-import { useRefdata, useTemplates } from '../hooks';
-import { renderHelpText, toCamelCase } from './utils';
+import { SettingsContext } from '../../contexts';
+import { useRefdata, useTemplates } from '../../hooks';
+import { renderHelpText, toCamelCase } from '../../utils';
+
 
 const SettingField = (settingFieldProps) => {
   const {
@@ -33,7 +34,7 @@ const SettingField = (settingFieldProps) => {
     endpoint: refdataEndpoint,
     desc: currentSetting.vocab,
     queryParams: {
-      enabled: !!currentSetting?.vocab
+      enabled: !!currentSetting?.vocab && currentSetting.settingType === 'Refdata'
     }
   });
 
@@ -41,7 +42,7 @@ const SettingField = (settingFieldProps) => {
     context: currentSetting.vocab,
     endpoint: templateEndpoint,
     queryParams: {
-      enabled: !!currentSetting?.vocab
+      enabled: !!currentSetting?.vocab && currentSetting.settingType === 'Template'
     }
   });
 
@@ -85,7 +86,7 @@ const SettingField = (settingFieldProps) => {
           {settingName}
         </>
       );
-  }
+  };
 
   return (
     <Card
@@ -99,7 +100,6 @@ const SettingField = (settingFieldProps) => {
         templates={templates}
         {...settingFieldProps}
       />
-      
     </Card>
   );
 };

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import '@folio/stripes-erm-components/test/jest/__mock__';
+import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import { Button } from '@folio/stripes-testing';
+import { Field } from 'react-final-form';
+import SettingField from './SettingField';
+
+import { renderWithKintHarness } from '../../../../test/jest/helpers';
+
+const onSubmit = jest.fn();
+const onSave = jest.fn().mockResolvedValue();
+
+jest.mock('./EditSettingValue', () => () => <div>EditSettingValue</div>);
+jest.mock('./RenderSettingValue', () => () => <div>RenderSettingValue</div>);
+
+jest.mock('../../hooks', () => ({
+  useRefdata: () => [],
+  useTemplates: () => [],
+}));
+
+
+const setting = {
+  id: 'ff8081817d94374a017d94449a660049',
+  key: 'S3BucketName',
+  section: 'fileStorage',
+  settingType: 'String',
+  value: 'diku-shared'
+};
+
+describe('SettingField', () => {
+  let renderComponent;
+  beforeEach(async () => {
+    renderComponent = renderWithKintHarness(
+      <TestForm
+        initialValues={{}}
+        onSubmit={onSubmit}
+      >
+        <Field
+          component={SettingField}
+          name="test"
+          onSave={onSave}
+          settingData={{
+            currentSetting: setting
+          }}
+        />
+      </TestForm>
+    );
+  });
+
+  it('renders RenderSettingValue', () => {
+    const { getByText } = renderComponent;
+    expect(getByText('RenderSettingValue')).toBeInTheDocument();
+  });
+
+  test('renders the edit button', () => {
+    Button('Edit').exists();
+  });
+
+  it('clicking edit/save works as expected', async () => {
+    const { getByRole, findByText } = renderComponent;
+
+    // before clicking on edit button, we should be rendering setting value
+    expect(await findByText('RenderSettingValue')).toBeInTheDocument();
+
+    // Clicking edit button
+    const editButton = getByRole('button', { name: /Edit/i });
+    expect(editButton).toBeInTheDocument();
+    userEvent.click(editButton);
+    // Should be rendering the "edit" for a setting value
+    expect(await findByText('EditSettingValue')).toBeInTheDocument();
+
+    // Clicking finish editing button
+    const finishEditing = getByRole('button', { name: /Finish editing/i });
+    expect(finishEditing).toBeInTheDocument();
+    userEvent.click(finishEditing);
+    // Should be rendering the setting value again
+    expect(await findByText('RenderSettingValue')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,3 @@
+export { default as SettingField } from './SettingField';
+export { default as RenderSettingValue } from './RenderSettingValue';
+export { default as EditSettingValue } from './EditSettingValue';

package/src/lib/EditableSettingsList/index.js

@@ -0,0 +1,3 @@
+export { default as EditableSettingsList } from './EditableSettingsList';
+export { default as EditableSettingsListFieldArray } from './EditableSettingsListFieldArray';
+export { SettingField } from './SettingField';

package/src/lib/FormModal/FormModal.js

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+
+import { Form } from 'react-final-form';
+import { FormattedMessage } from 'react-intl';
+import { Button, Modal, ModalFooter } from '@folio/stripes/components';
+
+const FormModal = ({ children, modalProps: { onClose, ...modalProps }, onSubmit, ...formProps }) => {
+  return (
+    <Form
+      onSubmit={onSubmit}
+      {...formProps}
+    >
+      {({ handleSubmit, form: { restart } }) => {
+        const handleClose = (e) => {
+          onClose(e);
+          restart();
+        };
+
+        const handleSubmitAndClear = () => {
+          handleSubmit();
+          restart();
+        };
+
+        const renderFooter = () => (
+          <ModalFooter>
+            <Button
+              buttonStyle="primary"
+              onClick={handleSubmitAndClear}
+            >
+              <FormattedMessage id="stripes-kint-components.save" />
+            </Button>
+            <Button
+              onClick={handleClose}
+            >
+              <FormattedMessage id="stripes-kint-components.cancel" />
+            </Button>
+          </ModalFooter>
+        );
+
+        return (
+          <form
+            onSubmit={handleSubmitAndClear}
+          >
+            <Modal
+              enforceFocus={false}
+              footer={renderFooter()}
+              onClose={handleClose}
+              {...modalProps}
+            >
+              {children}
+            </Modal>
+          </form>
+        );
+      }}
+    </Form>
+  );
+};
+
+FormModal.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.func,
+  ]),
+  modalProps: PropTypes.shape({
+    onClose: PropTypes.func
+  }),
+  onSubmit: PropTypes.func
+};
+
+export default FormModal;

package/src/lib/FormModal/index.js

@@ -0,0 +1 @@
+export { default } from './FormModal';

package/src/lib/NoResultsMessage/NoResultsMessage.js

@@ -66,11 +66,11 @@ NoResultsMessage.propTypes = {
   icon: PropTypes.string,
   isLoading: PropTypes.bool,
   isError: PropTypes.bool,
-  label: PropTypes.oneOfType(
+  label: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.node,
     PropTypes.func
-  ),
+  ]),
   searchTerm: PropTypes.string.isRequired,
   toggleFilterPane: PropTypes.func.isRequired,
 };

package/src/lib/NoResultsMessage/index.js

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

package/src/lib/{Settings → RefdataButtons}/RefdataButtons.js

@@ -27,7 +27,7 @@ const RefdataButtons = (props) => {
         };
 
         return (
-          <Col xs={dynamicColumnWidth ? (12 / numberOfButtons) : (12 / maximumColumns)} key={`${input.name}:${option.id}`}>
+          <Col key={`${input.name}:${option.id}`} xs={dynamicColumnWidth ? (12 / numberOfButtons) : (12 / maximumColumns)}>
             <RadioButton
               {...buttonProps}
             />

package/src/lib/RefdataButtons/index.js

@@ -0,0 +1 @@
+export { default } from './RefdataButtons';

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -22,7 +22,7 @@ import {
   PaneMenu,
   SearchField,
 } from '@folio/stripes/components';
-import { NoResultsMessage } from '../NoResultsMessage';
+import NoResultsMessage from '../NoResultsMessage';
 
 import { generateKiwtQuery } from '../utils';
 import { useKiwtSASQuery, useLocalStorageState } from '../hooks';
@@ -31,6 +31,7 @@ import { useKiwtSASQuery, useLocalStorageState } from '../hooks';
 const SASQLookupComponent = ({
   children,
   fetchParameters = {},
+  FilterPaneHeaderComponent = () => null,
   FilterComponent = () => null,
   history,
   id,
@@ -185,6 +186,7 @@ const SASQLookupComponent = ({
                   paneTitle={<FormattedMessage id="stripes-smart-components.searchAndFilter" />}
                 >
                   <form onSubmit={onSubmitSearch}>
+                    <FilterPaneHeaderComponent />
                     {!noSearchField &&
                       <>
                         <SearchField
@@ -262,6 +264,10 @@ SASQLookupComponent.propTypes = {
     PropTypes.func,
     PropTypes.node
   ]),
+  FilterPaneHeaderComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node
+  ]),
   history: PropTypes.object,
   id: PropTypes.string.isRequired,
   location: PropTypes.object,

package/src/lib/{Settings → SettingPage}/SettingPage.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
-import EditableSettingsList from './EditableSettingsList';
-import SettingsContext from './SettingsContext';
-import useSettingSection from './useSettingSection';
+import { EditableSettingsList } from '../EditableSettingsList';
+import { SettingsContext } from '../contexts';
+import { useSettingSection } from '../hooks';
 
 const SettingPage = ({ sectionName }) => {
   const { settingEndpoint } = useContext(SettingsContext);
@@ -31,10 +31,10 @@ SettingPage.propTypes = {
   sectionName: PropTypes.string,
   resources: PropTypes.shape({
     settings: PropTypes.shape({
-      records: PropTypes.array
+      records: PropTypes.arrayOf(PropTypes.object)
     }),
     refdatavalues: PropTypes.shape({
-      records: PropTypes.array
+      records: PropTypes.arrayOf(PropTypes.object)
     })
   })
 };

package/src/lib/{Settings → SettingPage}/SettingPagePane.js

@@ -1,8 +1,10 @@
 import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+
 import { Pane } from '@folio/stripes/components';
 import { FormattedMessage } from 'react-intl';
-import SettingsContext from './SettingsContext';
-import { toCamelCase } from './utils';
+import { SettingsContext } from '../contexts';
+import { toCamelCase } from '../utils';
 
 const SettingPagePane = ({ sectionName, children }) => {
   const { intlKey } = useContext(SettingsContext);
@@ -18,4 +20,12 @@ const SettingPagePane = ({ sectionName, children }) => {
   );
 };
 
+SettingPagePane.propTypes = {
+  sectionName: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node
+  ])
+};
+
 export default SettingPagePane;