@k-int/stripes-kint-components 2.5.1 → 2.6.0

package/src/index.js

@@ -13,7 +13,8 @@ export {
   useQIndex,
   useRefdata,
   useTemplates,
-  useSettings
+  useSettings,
+  useAppSettings
 } from './lib/hooks';
 
 // Useful utility functions

package/src/lib/ActionList/ActionListFieldArray.js

@@ -93,7 +93,7 @@ const ActionListFieldArray = forwardRef(({
 
   const handleClickCreate = () => {
     toggleEditing('NEW_ROW');
-    fields.push({});
+    fields.unshift({});
   };
 
   // Way to go into create mode from external component, and way to tell internal editing state
@@ -188,6 +188,7 @@ const ActionListFieldArray = forwardRef(({
             return (
               <IconButton
                 key={`action-${action.name}[${data.rowIndex}]`}
+                ariaLabel={action?.ariaLabel(data)}
                 disabled={editing}
                 icon={action.icon}
                 onClick={() => (actionFunction ? actionFunction() : () => null)}
@@ -295,7 +296,7 @@ const ActionListFieldArray = forwardRef(({
             marginBottom0
             onClick={handleClickCreate}
           >
-            <FormattedMessage id="stripes-kint-components.actionList.create" />
+            <FormattedMessage id="stripes-kint-components.actionList.new" />
           </Button>
         }
       </div>

package/src/lib/ActionList/README.md

@@ -29,12 +29,23 @@ const actionAssigner = () => {
         ...contentData,
         data
       )}
+      ariaLabel: (data) => {
+        intl.formatMessage(
+          {id: 'stripes-kint-components.editableRefdataList.editAriaLabel'},
+          {label: data?.label}
+      ),
     },
     {
       name: 'delete',
       callback: (data) => {
         setContentData(contentData.filter(cd => cd.id !== data.id))
       }
+      ariaLabel: (data) => {
+       intl.formatMessage(
+        {id: 'stripes-kint-components.editableRefdataList.deleteAriaLabel'},
+        {label: data?.label}
+      ),
+      }
     }
   ];
 };
@@ -78,7 +89,7 @@ const myRef = useRef();
 
 Name | Type | Description | default | required
 --- | --- | --- | --- | ---
-actionAssigner | function | A function which will be passed the entire row object, and can use that to assign an array of actions valid for that row, in the form `{ name: 'actionName', label: "Action Label", icon: 'someIcon', callback: () => null, to: toObject }`. The prop `name` is required, but `label` and `icon` are optional props. The `callback` prop will be prioritised ahead of the deprecated actionCalls prop. If a `to` prop is passed, then the resulting button will be rendered as a <Link/> element, as per Stripes Button/IconButton.| | ✓ |
+actionAssigner | function | A function which will be passed the entire row object, and can use that to assign an array of actions valid for that row, in the form `{ name: 'actionName', label: "Action Label", icon: 'someIcon', callback: () => null, to: toObject, ariaLabel: () => null }`. The prop `name` is required, but `label` and `icon` are optional props. The `callback` prop will be prioritised ahead of the deprecated actionCalls prop. The `ariaLabel` prop will give the associated icon button an aria-label, including information about the associated content data. If a `to` prop is passed, then the resulting button will be rendered as a <Link/> element, as per Stripes Button/IconButton.| | ✓ |
 actionCalls (DEPRECATED) | object<function> | An object with keys matching any "actions" the `actionAssigner` may have assigned (In addition to special case `create`, if relevant), and values which are functions. These functions will be handed the row as a parameter. THESE CAN NOW BE PASSED AS "callback" in the actionAssigner. | {} | ✕ |
 columnMapping | object | An object which will act on the rendered MultiColumnList headers to map the labels for each `visibleField` | | ✕ |
 contentData | array | An array of objects to render along with their actions | | ✓ |

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

@@ -3,14 +3,13 @@ import PropTypes from 'prop-types';
 
 import { FormattedMessage } from 'react-intl';
 
-import debounce from 'lodash/debounce';
-
-import { Col, MultiColumnList, Row, Spinner, Select } from '@folio/stripes/components';
+import { Col, MultiColumnList, Row, Spinner, Select, Button } from '@folio/stripes/components';
 
+import { Form } from 'react-final-form';
 import SearchField from '../../SearchField';
 import { useCustomProperties } from '../../hooks';
 
-const DEBOUNCE_TIME = 500;
+import css from '../../../../styles/CustomProperties.css';
 
 const CustomPropertiesLookup = ({
   contextFilterOptions, // expects an array of the form [{value: "OpenAccess", label: "Open Access"}, {value: false, label: "None"}]
@@ -30,23 +29,62 @@ const CustomPropertiesLookup = ({
     nsValues,
     queryParams,
     returnQueryObject: true,
-    ctx: selectedContext
+    ctx: selectedContext,
+    options: {
+      sort: [
+        {
+          path: 'ctx'
+        },
+        {
+          path: 'weight'
+        }
+      ]
+    }
   });
 
-  const handleSearch = debounce((query) => {
+  const handleSearch = (query) => {
     setNsValues({
       ...nsValues,
       query,
     });
-  }, DEBOUNCE_TIME);
+  };
+  const [searchTerm, setSearchTerm] = useState('');
 
   return (
     <>
-      <SearchField fullWidth onChange={e => handleSearch(e.target.value)} />
+      <Form
+        enableReinitialize
+        keepDirtyOnReinitialize
+        onSubmit={() => handleSearch(searchTerm)}
+      >
+        {({ handleSubmit }) => (
+          <form
+            className={css.lookupSearchContainer}
+            onSubmit={handleSubmit}
+          >
+            <SearchField
+              ariaLabel={labelOverrides.searchAriaLabel ?? 'custom-property-search-field'}
+              className={css.lookupSearch}
+              marginBottom0
+              onChange={e => setSearchTerm(e.target.value)}
+              value={searchTerm}
+            />
+            <Button
+              buttonClass={css.lookupSearchButton}
+              buttonStyle="primary"
+              marginBottom0
+              type="submit"
+            >
+              <FormattedMessage id="stripes-kint-components.search" />
+            </Button>
+          </form>
+        )}
+      </Form>
       <Row>
         <Col xs={6}>
           <Select
             dataOptions={contextFilterOptions}
+            label={<FormattedMessage id="stripes-kint-components.customProperties.ctx" />}
             onChange={(e) => {
               setSelectedContext(e.target.value);
             }}

package/src/lib/CustomProperties/Config/CustomPropertiesLookup.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import '@folio/stripes-erm-components/test/jest/__mock__';
+import { MemoryRouter } from 'react-router-dom';
+import { renderWithKintHarness } from '../../../../test/jest/helpers';
+
+import { custPropLookup } from './testResources';
+import CustomPropertiesLookup from './CustomPropertiesLookup';
+
+jest.mock('../../SearchField', () => () => <div>SearchField</div>);
+
+describe('CustomPropertiesLookup', () => {
+  let renderComponent;
+  beforeEach(() => {
+    renderComponent = renderWithKintHarness(
+      <MemoryRouter>
+        <CustomPropertiesLookup
+          {...custPropLookup}
+          visibleColumns={['label', 'primary', 'ctx', 'weight', 'type', 'category']}
+        />
+      </MemoryRouter>
+    );
+  });
+
+  it('renders expected options', () => {
+    const { getByText } = renderComponent;
+    expect(getByText('All')).toBeInTheDocument();
+    expect(getByText('OpenAccess')).toBeInTheDocument();
+    expect(getByText('None')).toBeInTheDocument();
+  });
+
+  it('renders SearchField component ', () => {
+    const { getByText } = renderComponent;
+    expect(getByText('SearchField')).toBeInTheDocument();
+  });
+});

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import compose from 'compose-function';
@@ -7,8 +7,8 @@ import { FormattedMessage, useIntl } from 'react-intl';
 
 import { useQueryClient } from 'react-query';
 
-import { Button, ConfirmationModal, Pane } from '@folio/stripes/components';
-
+import { Button, ConfirmationModal, Icon, Pane } from '@folio/stripes/components';
+import { CalloutContext } from '@folio/stripes/core';
 import FormModal from '../../FormModal/FormModal';
 
 import CustomPropertiesLookup from './CustomPropertiesLookup';
@@ -23,12 +23,14 @@ const VIEWING = 'view';
 // A default option for setting up panes manually
 const CustomPropertiesSettings = ({
   afterQueryCalls,
+  catchQueryCalls,
   contextFilterOptions,
   customPropertiesEndpoint,
   helpPopovers,
   labelOverrides,
   refdataEndpoint,
 }) => {
+  const callout = useContext(CalloutContext);
   const queryClient = useQueryClient();
 
   const intl = useIntl();
@@ -62,14 +64,6 @@ const CustomPropertiesSettings = ({
     renderViewPaneTitle = renderViewPaneTitle(customProperty);
   }
 
-  // Defaulting is hard
-  const afterQueryCallsSafe = {
-    put: () => null,
-    post: () => null,
-    delete: () => null,
-    ...afterQueryCalls
-  };
-
   const {
     post: createCustprop,
     put: editCustProp,
@@ -80,21 +74,47 @@ const CustomPropertiesSettings = ({
         setMode(VIEWING);
         queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
         setCustomProperty(res);
-        afterQueryCallsSafe.put(res);
+        if (afterQueryCalls?.put) {
+          afterQueryCalls.put(res);
+        }
       },
       post: res => {
         setMode(VIEWING);
         queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
         setCustomProperty(res);
-        afterQueryCallsSafe.post(res);
+        if (afterQueryCalls?.post) {
+          afterQueryCalls.post(res);
+        }
       },
       delete: res => {
         setMode(VIEWING);
         queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
         setCustomProperty();
-        afterQueryCallsSafe.delete(res);
+        if (afterQueryCalls?.delete) {
+          afterQueryCalls.delete(res);
+        }
       }
     },
+    catchQueryCalls: {
+      // Default delete behaviour is to fire a callout, either with kint-components default message
+      // or one provided in labelOverrides, which is passed the error message and customProperty in question
+      delete: async (err) => {
+        const errorResp = await err.response.json();
+        callout.sendCallout({
+          message: labelOverrides?.deleteError ? labelOverrides.deleteError(errorResp?.message, customProperty) : (
+            <FormattedMessage
+              id="stripes-kint-components.customPropertiesSettings.deleteCustomProperty.errorMessage"
+              values={{
+                error: errorResp?.message,
+                label: customProperty?.label
+              }}
+            />
+          ),
+          type: 'error',
+        });
+      },
+      ...catchQueryCalls // Override defaults here
+    },
     endpoint: customPropertiesEndpoint,
     id: customProperty?.id
   });
@@ -106,6 +126,17 @@ const CustomPropertiesSettings = ({
     };
   };
 
+  // When POSTing a custom property, the backend expects a shorthand "Integer" or "LocalDate"
+  // When PUTing a custom property, the backend needs the full class name
+  const handleType = (submitData) => {
+    const typeRegex = /(com\.k_int\.web\.toolkit\.custprops\.types\.CustomProperty)(.*)/g;
+    const typeMatch = typeRegex.exec(submitData?.type) ?? [];
+    return {
+      ...submitData,
+      type: typeMatch[2]
+    };
+  };
+
   return (
     <>
       <Pane
@@ -113,10 +144,11 @@ const CustomPropertiesSettings = ({
         id="settings-customProperties.lookupPane"
         lastMenu={
           <Button
+            buttonStyle="primary"
             marginBottom0
             onClick={() => setMode(CREATING)} // TODO do we need to clear form here too?
           >
-            <FormattedMessage id="stripes-kint-components.create" />
+            <FormattedMessage id="stripes-kint-components.new" />
           </Button>
         }
         paneTitle={labelOverrides.paneTitle ??
@@ -139,7 +171,9 @@ const CustomPropertiesSettings = ({
                 marginBottom0
                 onClick={() => setMode(EDITING)}
               >
-                <FormattedMessage id="stripes-kint-components.edit" />
+                <Icon icon="edit">
+                  <FormattedMessage id="stripes-kint-components.edit" />
+                </Icon>
               </Button>,
               <Button
                 buttonStyle="dropdownItem"
@@ -149,7 +183,9 @@ const CustomPropertiesSettings = ({
                   onToggle();
                 }}
               >
-                <FormattedMessage id="stripes-kint-components.delete" />
+                <Icon icon="trash">
+                  <FormattedMessage id="stripes-kint-components.delete" />
+                </Icon>
               </Button>
             ]
           )}
@@ -163,6 +199,7 @@ const CustomPropertiesSettings = ({
         >
           <CustomPropertyView
             customProperty={customProperty}
+            helpPopovers={helpPopovers}
             labelOverrides={labelOverrides}
           />
         </Pane>
@@ -177,16 +214,21 @@ const CustomPropertiesSettings = ({
           } :
           {
             ...customProperty,
-            ctx: customProperty?.ctx ? [{ value: customProperty.ctx, label: customProperty.ctx }] : null
+            ctx: customProperty?.ctx ? [{ value: customProperty.ctx, label: customProperty.ctx }] : null,
+            category: customProperty?.category ? customProperty?.category?.id : null
           }
         }
         modalProps={{
           dismissible: true,
+          label: mode === CREATING ?
+            labelOverrides?.modalTitleNew ?? <FormattedMessage id="stripes-kint-components.customProperty.newModal" />
+            :
+            labelOverrides?.modalTitleEdit ?? <FormattedMessage id="stripes-kint-components.customProperty.editModal" />,
           onClose: () => setMode(VIEWING),
           open: (mode === CREATING || mode === EDITING)
         }}
         onSubmit={mode === CREATING ?
-          compose(createCustprop, handeContextSubmit) :
+          compose(createCustprop, handeContextSubmit, handleType) :
           compose(editCustProp, handeContextSubmit)
         }
       >
@@ -214,7 +256,7 @@ const CustomPropertiesSettings = ({
         }
         onCancel={() => setDeleteModal(false)}
         onConfirm={() => {
-          deleteCustProp();
+          deleteCustProp(customProperty?.id);
           setCustomProperty();
           setDeleteModal(false);
         }}
@@ -226,6 +268,7 @@ const CustomPropertiesSettings = ({
 
 CustomPropertiesSettings.propTypes = {
   afterQueryCalls: PropTypes.object,
+  catchQueryCalls: PropTypes.object,
   contextFilterOptions: PropTypes.arrayOf(PropTypes.shape({
     value: PropTypes.string,
     label: PropTypes.oneOfType([

package/src/lib/CustomProperties/Config/CustomPropertiesSettings.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import '@folio/stripes-erm-components/test/jest/__mock__';
+import { Button, Pane, PaneHeader } from '@folio/stripes-testing';
+import { MemoryRouter } from 'react-router-dom';
+import { renderWithKintHarness } from '../../../../test/jest/helpers';
+
+import { custPropsSettings } from './testResources';
+import CustomPropertiesSettings from './CustomPropertiesSettings';
+
+jest.mock('../../hooks', () => ({
+  useRefdata: () => [],
+  useMutateCustomProperties: () => [],
+}));
+
+jest.mock('../../FormModal/FormModal', () => () => <div>FormModal</div>);
+jest.mock('./CustomPropertiesLookup', () => () => <div>CustomPropertiesLookup</div>);
+
+describe('CustomPropertiesSettings', () => {
+  let renderComponent;
+  beforeEach(() => {
+    renderComponent = renderWithKintHarness(
+      <MemoryRouter>
+        <CustomPropertiesSettings
+          {...custPropsSettings}
+        />
+      </MemoryRouter>
+    );
+  });
+
+  it('renders FormModal component ', () => {
+    const { getByText } = renderComponent;
+    expect(getByText('FormModal')).toBeInTheDocument();
+  });
+
+  it('renders CustomPropertiesLookup component ', () => {
+    const { getByText } = renderComponent;
+    expect(getByText('CustomPropertiesLookup')).toBeInTheDocument();
+  });
+
+  it('renders the expected New button', async () => {
+    await Button('New').exists();
+  });
+
+  it('renders the expected Pane ', async () => {
+    await Pane('Supplementary properties').is({ visible: true });
+  });
+
+  it('renders the expected Pane header', async () => {
+    await PaneHeader('Supplementary properties').is({ visible: true });
+  });
+});