@k-int/stripes-kint-components 1.3.0 → 1.7.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/NoResultsMessage.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Button, Icon } from '@folio/stripes/components';
+import css from '../../../styles/NoResultsMessage.css';
+
+const NoResultsMessage = ({
+  icon: userIcon,
+  isLoading,
+  isError,
+  error,
+  filterPaneIsVisible,
+  label: userLabel,
+  searchTerm,
+  toggleFilterPane,
+}) => {
+  let icon = 'search';
+  let label = <FormattedMessage id="stripes-smart-components.sas.noResults.default" values={{ searchTerm }} />;
+
+  // No search term but no results
+  if (!searchTerm) {
+    icon = 'search';
+    label = <FormattedMessage id="stripes-smart-components.sas.noResults.noResults" />;
+  }
+
+  // Loading results
+  if (isLoading) {
+    icon = 'spinner-ellipsis';
+    label = <FormattedMessage id="stripes-smart-components.sas.noResults.loading" />;
+  }
+
+  // Request failure
+  if (isError) {
+    icon = 'exclamation-circle';
+    label = error?.message;
+  }
+
+  return (
+    <div className={css.noResultsMessage}>
+      <div className={css.noResultsMessageLabelWrap}>
+        {(icon || userIcon) &&
+          <Icon
+            icon={userIcon ?? icon}
+            iconRootClass={css.noResultsMessageIcon}
+          />
+        }
+        <span className={css.noResultsMessageLabel}>{userLabel ?? label}</span>
+      </div>
+      {/* If the filter pane is closed we show a button that toggles filter pane */}
+      {!filterPaneIsVisible && (
+        <Button
+          buttonClass={css.noResultsMessageButton}
+          marginBottom0
+          onClick={toggleFilterPane}
+        >
+          <FormattedMessage id="stripes-kint-components.noResultsMessage.showFilters" />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+NoResultsMessage.propTypes = {
+  error: PropTypes.object,
+  filterPaneIsVisible: PropTypes.bool.isRequired,
+  icon: PropTypes.string,
+  isLoading: PropTypes.bool,
+  isError: PropTypes.bool,
+  label: PropTypes.oneOfType(
+    PropTypes.string,
+    PropTypes.node,
+    PropTypes.func
+  ),
+  searchTerm: PropTypes.string.isRequired,
+  toggleFilterPane: PropTypes.func.isRequired,
+};
+
+export default NoResultsMessage;

package/src/lib/NoResultsMessage/index.js

@@ -0,0 +1 @@
+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

@@ -20,15 +20,18 @@ import {
   MultiColumnList,
   Pane,
   PaneMenu,
-  SearchField
+  SearchField,
 } from '@folio/stripes/components';
+import NoResultsMessage from '../NoResultsMessage';
 
 import { generateKiwtQuery } from '../utils';
 import { useKiwtSASQuery, useLocalStorageState } from '../hooks';
 
+
 const SASQLookupComponent = ({
   children,
   fetchParameters = {},
+  FilterPaneHeaderComponent = () => null,
   FilterComponent = () => null,
   history,
   id,
@@ -55,7 +58,15 @@ const SASQLookupComponent = ({
   };
 
   const [filterPaneVisible, setFilterPaneVisible] = useLocalStorageState(filterPaneVisibileKey, true);
-  const { data: totalData = {}, fetchNextPage } = useInfiniteQuery(
+  const toggleFilterPane = () => setFilterPaneVisible(!filterPaneVisible);
+
+  const {
+    data: totalData = {},
+    error,
+    isError,
+    isLoading,
+    fetchNextPage,
+  } = useInfiniteQuery(
     [namespace, id, 'data', query],
     fetchPageData
   );
@@ -88,13 +99,13 @@ const SASQLookupComponent = ({
     fetchNextPage({ pageParam: index });
   };
 
-    // Build the map of column definitions
-    const columnMapping = Object.fromEntries(
-      resultColumns.map(e => [e.propertyPath, e.label])
-    );
+  // Build the map of column definitions
+  const columnMapping = Object.fromEntries(
+    resultColumns.map(e => [e.propertyPath, e.label])
+  );
 
-    // Build the list of visible columns
-    const visibleColumns = resultColumns.map(e => e.propertyPath);
+  // Build the list of visible columns
+  const visibleColumns = resultColumns.map(e => e.propertyPath);
 
   return (
     <SearchAndSortQuery
@@ -126,6 +137,18 @@ const SASQLookupComponent = ({
               autosize
               columnMapping={columnMapping}
               contentData={data?.results}
+              isEmptyMessage={
+                <NoResultsMessage
+                  {...{
+                    error,
+                    isError,
+                    isLoading,
+                    filterPaneIsVisible: filterPaneVisible,
+                    searchTerm: query.query,
+                    toggleFilterPane
+                  }}
+                />
+              }
               isSelected={({ item }) => item.id === match?.params?.id}
               onHeaderClick={onSort}
               onNeedMoreData={onNeedMoreData}
@@ -163,6 +186,7 @@ const SASQLookupComponent = ({
                   paneTitle={<FormattedMessage id="stripes-smart-components.searchAndFilter" />}
                 >
                   <form onSubmit={onSubmitSearch}>
+                    <FilterPaneHeaderComponent />
                     {!noSearchField &&
                       <>
                         <SearchField
@@ -240,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/SASQRoute/README.md

@@ -6,7 +6,7 @@ A component designed to speed up the basic 3-pane layout setup process, SASQRout
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import SASQRoute from '@k-int/stripes-kint-components/src/lib/SASQRoute/SASQRoute';
+import { SASQRoute } from '@k-int/stripes-kint-components';
 import ActionItem from '../components/ActionItem';
 
 const ActionedRoute = ({ path }) => {