@k-int/stripes-kint-components 1.5.0 → 1.6.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/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';

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;

package/src/lib/SettingPage/index.js

@@ -0,0 +1,2 @@
+export { default as SettingPagePane } from './SettingPagePane';
+export { default as SettingPage } from './SettingPage';

package/src/lib/TypeDown/TypeDown.js

@@ -30,6 +30,7 @@ const TypeDown = ({
 }) => {
   useEffect(() => {
     if (process.env.NODE_ENV === 'development') {
+      // eslint-disable-next-line no-console
       console.warn('TypeDown component is deprecated, you likely want either Typedown or QueryTypedown');
     }
   }, []);
@@ -71,13 +72,13 @@ const TypeDown = ({
     </div>
   ), [renderListItem, uniqueIdentificationPath]);
 
-  const handleChange = value => {
+  const handleChange = useCallback(value => {
     input.onChange(value);
 
     if (typeof onChange === 'function') {
       onChange(value);
     }
-  };
+  }, [input, onChange]);
 
   const dropDown = useCallback(() => {
     return (
@@ -132,6 +133,7 @@ const TypeDown = ({
   }, [
     data,
     footerRef,
+    handleChange,
     handleNextFocus,
     input,
     listKeyDownHandler,

package/src/lib/Typedown/Typedown.js

@@ -131,7 +131,7 @@ const Typedown = ({
           <div
             ref={footerRef}
             className={css.footer}
-            id="typedown-footer"
+            id={`typedown-footer-${selectorSafe(input.name)}`}
           >
             {renderFooter()}
           </div>
@@ -222,6 +222,7 @@ const Typedown = ({
 
 Typedown.propTypes = {
   dataOptions: PropTypes.arrayOf(PropTypes.object),
+  filterPath: PropTypes.string,
   input: PropTypes.object,
   meta: PropTypes.object,
   onChange: PropTypes.func,

package/src/lib/{Settings → contexts}/SettingsContext.js

@@ -1,4 +1,4 @@
-import React, { createContext } from 'react';
+import { createContext } from 'react';
 
 const SettingsContext = createContext();
 export default SettingsContext;

package/src/lib/contexts/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as SettingsContext } from './SettingsContext';

package/src/lib/hooks/index.js

@@ -6,4 +6,5 @@ export { default as useKiwtSASQuery } from './useKiwtSASQuery';
 export { default as useHelperApp } from './useHelperApp';
 export { default as useLocalStorageState } from './useLocalStorageState';
 export { default as useQIndex } from './useQIndex';
+export { useSettings, useSettingSection } from './settingsHooks';
 export { default as useKiwtFieldArray } from './useKiwtFieldArray';

package/src/lib/hooks/settingsHooks/index.js

@@ -0,0 +1,2 @@
+export { default as useSettings } from './useSettings';
+export { default as useSettingSection } from './useSettingSection';