@k-int/stripes-kint-components 5.9.0 → 5.11.0

package/src/lib/Tags/Tags.js

@@ -0,0 +1,145 @@
+import { useContext } from 'react';
+import PropTypes from 'prop-types';
+
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { CalloutContext, useOkapiKy } from '@folio/stripes/core';
+
+import { uniqBy, sortBy, difference } from 'lodash';
+import { Pane } from '@folio/stripes/components';
+
+import { TagsForm } from '@folio/stripes/smart-components';
+
+import { tagNamespaceArray } from './tagsConfig';
+import { useTags } from './hooks';
+import { useKintIntl } from '../hooks';
+
+const Tags = ({
+  invalidateLinks = [], // If there are other queries that need invalidating, pass those here
+  labelOverrides = {},
+  link,
+  onToggle,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+}) => {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
+  const ky = useOkapiKy();
+  const callout = useContext(CalloutContext);
+  const queryClient = useQueryClient();
+
+  // TAG GET/POST
+  const { data: { tags = [] } = {} } = useTags(
+    [...tagNamespaceArray, link]
+  );
+
+  // istanbul ignore next
+  const { mutateAsync: postTags } = useMutation(
+    ['tags', 'stripes-erm-components', 'Tags', 'postTags'],
+    (data) => ky.post('tags', { json: data }).then(() => {
+      queryClient.invalidateQueries('tags');
+    })
+  );
+
+  // ENTITY GET/PUT
+  const { data: entity } = useQuery(
+    [link, 'stripes-erm-components', 'Tags'],
+    () => ky.get(link).json()
+  );
+
+  // istanbul ignore next
+  const { mutateAsync: putEntity } = useMutation(
+    [link, 'stripes-erm-components', 'Tags', 'putEntity'],
+    (data) => ky.put(link, { json: data }).then(() => {
+      queryClient.invalidateQueries(link);
+      if (invalidateLinks?.length) {
+        invalidateLinks.forEach(il => queryClient.invalidateQueries(il));
+      }
+    })
+  );
+
+  // add tags to global list of tags
+  // istanbul ignore next
+  const saveTags = (tagsToSave) => {
+    const newTag = difference(tagsToSave.map(t => (t.value || t)), tags.map(t => t.label.toLowerCase()));
+    if (!newTag || !newTag.length) return;
+
+    postTags({
+      label: newTag[0],
+      description: newTag[0]
+    });
+
+    callout.sendCallout({
+      message: kintIntl.formatKintMessage({
+        id: 'newTagCreated',
+        overrideValue: labelOverrides.newTagCreated
+      })
+    });
+  };
+
+  // add tag to the list of entity tags
+  // istanbul ignore next
+  const saveEntityTags = (tagsToSave) => {
+    const tagListMap = (entity?.tags ?? []).map(tag => ({ 'value': tag.value }));
+    const tagsMap = tagsToSave.map(tag => ({ 'value': tag.value || tag }));
+
+    const newTags = sortBy(uniqBy([...tagListMap, ...tagsMap], 'value'));
+
+    putEntity({
+      tags: newTags
+    });
+  };
+
+  const onAdd = (addTags) => {
+    saveEntityTags(addTags);
+    saveTags(addTags);
+  };
+
+  const onRemove = (tag) => {
+    const tagToDelete = (entity?.tags ?? []).filter(t => t.value.toLowerCase() === tag.toLowerCase());
+
+    putEntity({
+      tags: [{ id: tagToDelete[0].id, _delete:true }]
+    });
+  };
+
+  const entityTags = (entity?.tags ?? []).map(tag => tag.value.toLowerCase());
+  return (
+    <Pane
+      defaultWidth="20%"
+      dismissible
+      id="tags-helper-pane"
+      onClose={onToggle}
+      paneSub={kintIntl.formatKintMessage(
+        {
+          id: 'numberOfTags',
+          overrideValue: labelOverrides.numberOfTags
+        },
+        { count: entity?.tags?.length ?? 0 }
+      )}
+      paneTitle={kintIntl.formatKintMessage(
+        {
+          id: 'tags',
+          overrideValue: labelOverrides.tags
+        }
+      )}
+    >
+      <TagsForm
+        entityTags={entityTags}
+        onAdd={onAdd}
+        onRemove={onRemove}
+        tags={tags}
+      />
+    </Pane>
+  );
+};
+
+Tags.propTypes = {
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
+  invalidateLinks: PropTypes.arrayOf(PropTypes.string),
+  labelOverrides: PropTypes.object,
+  link: PropTypes.string,
+  onToggle: PropTypes.func
+};
+
+export default Tags;

package/src/lib/Tags/Tags.test.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import {
+  IconButton,
+  Pane,
+  PaneHeader
+} from '@folio/stripes-erm-testing';
+
+import Tags from './Tags';
+import { renderWithKintHarness } from '../../../test/jest';
+
+const onToggle = jest.fn();
+const onAdd = jest.fn();
+const link = 'erm/sas/14c16fc4-f986-4e60-aa59-4e627fcf160b';
+
+describe('Tags', () => {
+  let renderComponent;
+  beforeEach(() => {
+    renderComponent = renderWithKintHarness(
+      <MemoryRouter>
+        <Tags
+          invalidateLinks={[]}
+          link={link}
+          onAdd={onAdd}
+          onToggle={onToggle}
+        />
+      </MemoryRouter>
+    );
+  });
+
+  test('renders the expected label', () => {
+    const { getByText } = renderComponent;
+    expect(getByText('0 Tags')).toBeInTheDocument();
+  });
+
+  test('renders expected pane dismiss button ', async () => {
+    await IconButton('Close Tags').exists();
+  });
+
+  test('renders expected open menu button ', () => {
+    const { getByRole } = renderComponent;
+    expect(
+      getByRole('button', {
+        name: 'stripes-components.multiSelection.dropdownTriggerLabel',
+      })
+    ).toBeInTheDocument();
+  });
+
+  test('renders tags heading  ', () => {
+    const { getByRole } = renderComponent;
+    expect(getByRole('heading', { name: 'Tags' })).toBeInTheDocument();
+  });
+
+  test('renders expected region with zero tags', () => {
+    const { getByRole } = renderComponent;
+    expect(getByRole('region', { name: 'Tags 0 Tags' })).toBeInTheDocument();
+  });
+
+  test('renders the expected multiSelectDescription', () => {
+    const { getByText } = renderComponent;
+    expect(getByText('Contains a list of any selected values, followed by an autocomplete textfield for selecting additional values.')).toBeInTheDocument();
+  });
+
+  test('renders the expected label', () => {
+    const { getByText } = renderComponent;
+    expect(getByText('0 items selected')).toBeInTheDocument();
+  });
+
+  test('displays the tags pane', async () => {
+    await Pane('Tags').is({ visible: true });
+  });
+
+  test('displays the tags pane header', async () => {
+    await PaneHeader('Tags').is({ visible: true });
+  });
+});

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

@@ -0,0 +1,2 @@
+export { default as useTagsEnabled, tagsEnabledQueryKey } from './useTagsEnabled';
+export { default as useTags } from './useTags';

package/src/lib/Tags/hooks/useTags.js

@@ -0,0 +1,16 @@
+import { useQuery } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+import { defaultTagQuery, tagNamespaceArray } from '../tagsConfig';
+
+const useTags = (namespaceArray, options) => {
+  const ky = useOkapiKy();
+  const nsArray = namespaceArray ?? tagNamespaceArray;
+
+  return useQuery(
+    nsArray,
+    () => ky.get(defaultTagQuery).json(),
+    options
+  );
+};
+
+export default useTags;

package/src/lib/Tags/hooks/useTagsEnabled.js

@@ -0,0 +1,19 @@
+import { useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+import { MOD_SETTINGS_ENDPOINT } from '../../constants/endpoints';
+
+export const tagsEnabledQueryKey = [MOD_SETTINGS_ENDPOINT, 'query=(module==TAGS and configName==tags_enabled)', 'stripes-kint-components', 'useTagsEnabled'];
+
+const useTagsEnabled = () => {
+  const ky = useOkapiKy();
+
+  const queryObject = useQuery(
+    tagsEnabledQueryKey,
+    () => ky.get(`${MOD_SETTINGS_ENDPOINT}?query=(module==TAGS and configName==tags_enabled)`).json()
+  );
+
+  const { data: { configs: { 0: { value } = {} } = [] } = {} } = queryObject;
+  return !value || value === 'true';
+};
+
+export default useTagsEnabled;

package/src/lib/Tags/index.js

@@ -0,0 +1,4 @@
+export { default as Tags } from './Tags';
+
+export * from './tagsConfig';
+export * from './hooks';

package/src/lib/Tags/tagsConfig.js

@@ -0,0 +1,16 @@
+const tagNamespaceArray = ['tags', 'stripes-kint-components', 'Tags'];
+
+const tagsPath = 'tags';
+const defaultTagsParams = [
+  'limit=1000',
+  'query=cql.allRecords%3D1%20sortby%20label'
+];
+
+const defaultTagQuery = `${tagsPath}?${defaultTagsParams?.join('&')}`;
+
+export {
+  tagsPath,
+  defaultTagsParams,
+  defaultTagQuery,
+  tagNamespaceArray
+};

package/src/lib/Typedown/README.md

@@ -24,22 +24,24 @@ import Typedown from '@k-int/stripes-kint-components';
 
 ### Props
 
-| Name | Type | Description | Default | Required |
-|---|---|---|---|---|
-| className | string | CSS class name to apply to the component's outer div. |  | ✕ |
-| dataOptions | array | An array of objects representing the dropdown options.  Each object should have a property (specified by `uniqueIdentificationPath`) that serves as a unique identifier. |  | ✓ |
-| displayClearItem | bool | Whether to display a clear icon when an item is selected. | `true` | ✕ |
-| endOfList | node/func | Component or function to render when the dropdown list is empty. Defaults to `<EndOfList />` from `@folio/stripes/components`. | `<EndOfList />` | ✕ |
-| filterPath | string | Path to the property in `dataOptions` objects to use for filtering. If not provided, filtering is done on the property specified by `uniqueIdentificationPath`. |  | ✕ |
-| id | string |  Id to apply to the component's outer div. | | ✕ |
-| input | object |  An object containing the input props typically provided by a form library like `react-final-form` or `redux-form`.  Should include `name`, `value`, and `onChange`. |  | ✓ |
-| isSelected | func | A function `(inputValue, dataOption)` that determines if a given `dataOption` is currently selected. Useful when selected values are complex objects. If not provided, selection is determined by comparing the value of the `uniqueIdentificationPath` property of the `input.value` and the `dataOption`. |  | ✕ |
-| label | string/element | Label for the input field. |  | ✕ |
-| meta | object | Meta information about the field, typically provided by a form library. Useful for displaying error messages etc. |  | ✕ |
-| onChange | func | A callback function `(value)` that is called when a value is selected from the dropdown.  This is in addition to the `input.onChange` provided. |  | ✕ |
-| onType | func | A callback function `(event)` that is called when the user types in the search field. Allows for custom filtering or data fetching based on user input. |  | ✕ |
-| renderFooter | func | A function `(displayData, currentlyTyped, exactMatch)` that renders a footer below the dropdown list. Receives the currently filtered `displayData`, what the user has typed, and whether it is an exact match. |  | ✕ |
-| renderListItem | func | A function `(option, currentlyTyped, exactMatch, optionIsSelected)` that renders each item in the dropdown list. Receives the current option, what the user has typed, whether there is an exact match, and if the option is selected. If not provided, the value of the `uniqueIdentificationPath` property of the option is displayed. |  | ✕ |
-| required | bool | Whether the input is required. |  | ✕ |
-| selectedStyles | string | CSS class name to apply to the selected item display. |  | ✕ |
-| uniqueIdentificationPath | string | Path to the property in `dataOptions` objects that serves as a unique identifier for each option and is used to determine if an option is selected. | `'id'` | ✕ |
+| Name                     | Type      | Description                                                                                                                                                                                                                                                                                                                              | Default         | Required |
+|--------------------------|-----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------|---|
+| className                | string    | CSS class name to apply to the component's outer div.                                                                                                                                                                                                                                                                                    |                 | ✕ |
+| dataOptions              | array     | An array of objects representing the dropdown options.  Each object should have a property (specified by `uniqueIdentificationPath`) that serves as a unique identifier.                                                                                                                                                                 |                 | ✓ |
+| displayClearItem         | bool      | Whether to display a clear icon when an item is selected.                                                                                                                                                                                                                                                                                | `true`          | ✕ |
+| displayValueWhileOpen    | bool      | Whether or not to display the "value" underneath the typedown search while the dropdown is open. Defaults to true to avoid size changing onClick.                                                                                                                                                                                        | `true`          | ✕ |
+| endOfList                | node/func | Component or function to render when the dropdown list is empty. Defaults to `<EndOfList />` from `@folio/stripes/components`.                                                                                                                                                                                                           | `<EndOfList />` | ✕ |
+| filterPath               | string    | Path to the property in `dataOptions` objects to use for filtering. If not provided, filtering is done on the property specified by `uniqueIdentificationPath`.                                                                                                                                                                          |                 | ✕ |
+| id                       | string    | Id to apply to the component's outer div.                                                                                                                                                                                                                                                                                                |                 | ✕ |
+| initialTimeoutDelay      | number    | Delay applied to `open` occurring on first render. Set to 800ms to avoid any stripes animations, such as being the first element focused in an opening modal.                                                                                                                                                                            | 800             | ✕ |
+| input                    | object | An object containing the input props typically provided by a form library like `react-final-form` or `redux-form`.  Should include `name`, `value`, and `onChange`.                                                                                                                                                                      |                 | ✓ |
+| isSelected               | func | A function `(inputValue, dataOption)` that determines if a given `dataOption` is currently selected. Useful when selected values are complex objects. If not provided, selection is determined by comparing the value of the `uniqueIdentificationPath` property of the `input.value` and the `dataOption`.                              |                 | ✕ |
+| label                    | string/element | Label for the input field.                                                                                                                                                                                                                                                                                                               |                 | ✕ |
+| meta                     | object | Meta information about the field, typically provided by a form library. Useful for displaying error messages etc.                                                                                                                                                                                                                        |                 | ✕ |
+| onChange                 | func | A callback function `(value)` that is called when a value is selected from the dropdown.  This is in addition to the `input.onChange` provided.                                                                                                                                                                                          |                 | ✕ |
+| onType                   | func | A callback function `(event)` that is called when the user types in the search field. Allows for custom filtering or data fetching based on user input.                                                                                                                                                                                  |                 | ✕ |
+| renderFooter             | func | A function `(displayData, currentlyTyped, exactMatch)` that renders a footer below the dropdown list. Receives the currently filtered `displayData`, what the user has typed, and whether it is an exact match.                                                                                                                          |                 | ✕ |
+| renderListItem           | func | A function `(option, currentlyTyped, exactMatch, optionIsSelected)` that renders each item in the dropdown list. Receives the current option, what the user has typed, whether there is an exact match, and if the option is selected. If not provided, the value of the `uniqueIdentificationPath` property of the option is displayed. |                 | ✕ |
+| required                 | bool | Whether the input is required.                                                                                                                                                                                                                                                                                                           |                 | ✕ |
+| selectedStyles           | string | CSS class name to apply to the selected item display.                                                                                                                                                                                                                                                                                    |                 | ✕ |
+| uniqueIdentificationPath | string | Path to the property in `dataOptions` objects that serves as a unique identifier for each option and is used to determine if an option is selected.                                                                                                                                                                                      | `'id'`          | ✕ |

package/src/lib/Typedown/Typedown.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
@@ -16,8 +16,10 @@ const Typedown = ({
   className,
   dataOptions,
   displayClearItem = true,
+  displayValueWhileOpen = true,
   endOfList,
   id,
+  initialOpenDelay = 800, // Initial opening delay of 800ms (handles any stripes animations)
   input,
   isSelected,
   filterPath,
@@ -85,7 +87,12 @@ const Typedown = ({
       resizeRef,
       searchWidth
     }
-  } = useTypedown(input.name);
+  } = useTypedown(
+    input.name,
+    {
+      timeout: initialOpenDelay
+    }
+  );
 
   const renderItem = useCallback((option, optionIsSelected = false) => (
     <div
@@ -197,6 +204,10 @@ const Typedown = ({
     );
   };
 
+  const displayValue = useMemo(() => {
+    return !!selectedUniqueId && (!open || displayValueWhileOpen);
+  }, [displayValueWhileOpen, open, selectedUniqueId]);
+
   return (
     <div
       ref={resizeRef}
@@ -229,7 +240,7 @@ const Typedown = ({
       >
         {dropDown()}
       </Popper>
-      {selectedUniqueId && !open &&
+      {displayValue &&
         <div
           className={classnames(
             css.selectedDisplay
@@ -257,6 +268,7 @@ Typedown.propTypes = {
   className: PropTypes.string,
   dataOptions: PropTypes.arrayOf(PropTypes.object),
   displayClearItem: PropTypes.bool,
+  displayValueWhileOpen: PropTypes.bool,
   endOfList: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.node,
@@ -264,6 +276,7 @@ Typedown.propTypes = {
   ]),
   filterPath: PropTypes.string,
   id: PropTypes.string,
+  initialOpenDelay: PropTypes.number,
   input: PropTypes.object,
   isSelected: PropTypes.func,
   label: PropTypes.oneOfType([

package/src/lib/hooks/typedownHooks/useTypedown.js

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
 import {
@@ -18,7 +18,10 @@ import selectorSafe from '../../utils/selectorSafe';
 
 import useTypedownToggle from './useTypedownToggle';
 
-const useTypedown = (name) => {
+const useTypedown = (
+  name,
+  { timeout = 800 } = {}
+) => {
   // SEARCHFIELD COMPONENT
   const searchFieldComponent = document.getElementById(`typedown-searchField-${selectorSafe(name)}`);
 
@@ -114,6 +117,17 @@ const useTypedown = (name) => {
 
   // SET UP VARIABLES
   const { open } = useTypedownToggle(name);
+  const [useOpen, setUseOpen] = useState(false);
+
+  useEffect(() => {
+    // Use setTimeout to update the message after 2000 milliseconds (2 seconds)
+    const timeoutId = setTimeout(() => {
+      setUseOpen(true);
+    }, timeout); // Wait 0.8 seconds for open prop to get used
+
+    // Cleanup function to clear the timeout if the component unmounts
+    return () => clearTimeout(timeoutId);
+  }, [timeout]);
 
   // RESIZE STUFF
   const { width: searchWidth, ref: resizeRef } = useResizeDetector();
@@ -134,7 +148,7 @@ const useTypedown = (name) => {
       searchFieldKeyDownHandler
     },
     variables: {
-      open,
+      open: useOpen ? open : false,
       portal,
       resizeRef,
       searchWidth

package/src/lib/hooks/useHelperApp.js

@@ -1,15 +1,16 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
 import queryString from 'query-string';
 import isEqual from 'lodash/isEqual';
 
-let helperObject = {};
-
 const useHelperApp = (helpers) => {
   const history = useHistory();
   const location = useLocation();
 
+  const [helperObject, setHelperObject] = useState({});
+  const [helperToggleFunctions, setHelperToggleFunctions] = useState({});
+
   const query = queryString.parse(location.search);
 
   const [currentHelper, setCurrentHelper] = useState(query?.helper);
@@ -22,9 +23,18 @@ const useHelperApp = (helpers) => {
   };
 
   useEffect(() => {
-    // Keep object outside of hook to avoid redraw, oncly change when keys change
     if (!isEqual(Object.keys(helperObject), Object.keys(helpers))) {
-      helperObject = helpers;
+      setHelperObject(helpers);
+    }
+
+    const newHelperToggleFunctions = {};
+    Object.keys(helperObject).forEach(h => {
+      newHelperToggleFunctions[h] = () => handleToggleHelper(h);
+    });
+
+    if (!isEqual(Object.keys(helperToggleFunctions), Object.keys(newHelperToggleFunctions))) {
+      // This makes sure adding/removing helpers changes the functions
+      setHelperToggleFunctions(newHelperToggleFunctions);
     }
 
     if (currentHelper !== query?.helper) {
@@ -37,11 +47,14 @@ const useHelperApp = (helpers) => {
         pathname: location.pathname,
         search: `?${queryString.stringify(newQuery)}`
       });
+
+      // When helper changes, reset helperToggleFunctions
+      setHelperToggleFunctions(newHelperToggleFunctions);
     }
-  }, [currentHelper, helpers, history, location, query]);
+  }, [currentHelper, handleToggleHelper, helperObject, helperToggleFunctions, helpers, history, location, query]);
 
   // Set the HelperComponent
-  const HelperComponent = useMemo(() => ((props) => {
+  const HelperComponent = useCallback((props) => {
     if (!query?.helper) return null;
 
     let Component = null;
@@ -56,13 +69,8 @@ const useHelperApp = (helpers) => {
         {...props}
       />
     );
-  }), [handleToggleHelper, query.helper]);
+  }, [handleToggleHelper, helperObject, query?.helper]);
 
-  // Set up the helperToggleFunctions
-  const helperToggleFunctions = {};
-  Object.keys(helperObject).forEach(h => {
-    helperToggleFunctions[h] = () => handleToggleHelper(h);
-  });
 
   return { currentHelper, HelperComponent, helperToggleFunctions, isOpen };
 };