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

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [5.11.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.10.0...v5.11.0) (2025-02-07)
+
+
+### Features
+
+* Added Tags helper app and hooks to stripes-kint-components (Moving out of erm-components longer term) ([e881639](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/e881639b49036d6016dc65d83bcf67e596652acc))
+
 # [5.10.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.9.0...v5.10.0) (2025-02-04)
 
 

package/es/index.js

@@ -400,6 +400,18 @@ var _ResponsiveButtonGroup = _interopRequireDefault(require("./lib/ResponsiveBut
 var _SettingsFormContainer = _interopRequireDefault(require("./lib/SettingsFormContainer"));
 var _ComboButton = _interopRequireDefault(require("./lib/ComboButton"));
 var _NumberField = _interopRequireDefault(require("./lib/NumberField"));
+var _Tags = require("./lib/Tags");
+Object.keys(_Tags).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Tags[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Tags[key];
+    }
+  });
+});
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/Tags/Tags.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactQuery = require("react-query");
+var _core = require("@folio/stripes/core");
+var _lodash = require("lodash");
+var _components = require("@folio/stripes/components");
+var _smartComponents = require("@folio/stripes/smart-components");
+var _tagsConfig = require("./tagsConfig");
+var _hooks = require("./hooks");
+var _hooks2 = require("../hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Tags = _ref => {
+  let {
+    invalidateLinks = [],
+    // If there are other queries that need invalidating, pass those here
+    labelOverrides = {},
+    link,
+    onToggle,
+    intlKey: passedIntlKey,
+    intlNS: passedIntlNS
+  } = _ref;
+  const kintIntl = (0, _hooks2.useKintIntl)(passedIntlKey, passedIntlNS);
+  const ky = (0, _core.useOkapiKy)();
+  const callout = (0, _react.useContext)(_core.CalloutContext);
+  const queryClient = (0, _reactQuery.useQueryClient)();
+
+  // TAG GET/POST
+  const {
+    data: {
+      tags = []
+    } = {}
+  } = (0, _hooks.useTags)([..._tagsConfig.tagNamespaceArray, link]);
+
+  // istanbul ignore next
+  const {
+    mutateAsync: postTags
+  } = (0, _reactQuery.useMutation)(['tags', 'stripes-erm-components', 'Tags', 'postTags'], data => ky.post('tags', {
+    json: data
+  }).then(() => {
+    queryClient.invalidateQueries('tags');
+  }));
+
+  // ENTITY GET/PUT
+  const {
+    data: entity
+  } = (0, _reactQuery.useQuery)([link, 'stripes-erm-components', 'Tags'], () => ky.get(link).json());
+
+  // istanbul ignore next
+  const {
+    mutateAsync: putEntity
+  } = (0, _reactQuery.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 = (0, _lodash.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 = (0, _lodash.sortBy)((0, _lodash.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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, {
+    defaultWidth: "20%",
+    dismissible: true,
+    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
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_smartComponents.TagsForm, {
+      entityTags: entityTags,
+      onAdd: onAdd,
+      onRemove: onRemove,
+      tags: tags
+    })
+  });
+};
+Tags.propTypes = {
+  intlKey: _propTypes.default.string,
+  intlNS: _propTypes.default.string,
+  invalidateLinks: _propTypes.default.arrayOf(_propTypes.default.string),
+  labelOverrides: _propTypes.default.object,
+  link: _propTypes.default.string,
+  onToggle: _propTypes.default.func
+};
+var _default = exports.default = Tags;

package/es/lib/Tags/Tags.test.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _stripesErmTesting = require("@folio/stripes-erm-testing");
+var _Tags = _interopRequireDefault(require("./Tags"));
+var _jest = require("../../../test/jest");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const onToggle = jest.fn();
+const onAdd = jest.fn();
+const link = 'erm/sas/14c16fc4-f986-4e60-aa59-4e627fcf160b';
+describe('Tags', () => {
+  let renderComponent;
+  beforeEach(() => {
+    renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tags.default, {
+        invalidateLinks: [],
+        link: link,
+        onAdd: onAdd,
+        onToggle: onToggle
+      })
+    }));
+  });
+  test('renders the expected label', () => {
+    const {
+      getByText
+    } = renderComponent;
+    expect(getByText('0 Tags')).toBeInTheDocument();
+  });
+  test('renders expected pane dismiss button ', async () => {
+    await (0, _stripesErmTesting.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 (0, _stripesErmTesting.Pane)('Tags').is({
+      visible: true
+    });
+  });
+  test('displays the tags pane header', async () => {
+    await (0, _stripesErmTesting.PaneHeader)('Tags').is({
+      visible: true
+    });
+  });
+});

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "tagsEnabledQueryKey", {
+  enumerable: true,
+  get: function () {
+    return _useTagsEnabled.tagsEnabledQueryKey;
+  }
+});
+Object.defineProperty(exports, "useTags", {
+  enumerable: true,
+  get: function () {
+    return _useTags.default;
+  }
+});
+Object.defineProperty(exports, "useTagsEnabled", {
+  enumerable: true,
+  get: function () {
+    return _useTagsEnabled.default;
+  }
+});
+var _useTagsEnabled = _interopRequireWildcard(require("./useTagsEnabled"));
+var _useTags = _interopRequireDefault(require("./useTags"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactQuery = require("react-query");
+var _core = require("@folio/stripes/core");
+var _tagsConfig = require("../tagsConfig");
+const useTags = (namespaceArray, options) => {
+  const ky = (0, _core.useOkapiKy)();
+  const nsArray = namespaceArray ?? _tagsConfig.tagNamespaceArray;
+  return (0, _reactQuery.useQuery)(nsArray, () => ky.get(_tagsConfig.defaultTagQuery).json(), options);
+};
+var _default = exports.default = useTags;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tagsEnabledQueryKey = exports.default = void 0;
+var _core = require("@folio/stripes/core");
+var _reactQuery = require("react-query");
+var _endpoints = require("../../constants/endpoints");
+const tagsEnabledQueryKey = exports.tagsEnabledQueryKey = [_endpoints.MOD_SETTINGS_ENDPOINT, 'query=(module==TAGS and configName==tags_enabled)', 'stripes-kint-components', 'useTagsEnabled'];
+const useTagsEnabled = () => {
+  const ky = (0, _core.useOkapiKy)();
+  const queryObject = (0, _reactQuery.useQuery)(tagsEnabledQueryKey, () => ky.get(`${_endpoints.MOD_SETTINGS_ENDPOINT}?query=(module==TAGS and configName==tags_enabled)`).json());
+  const {
+    data: {
+      configs: {
+        0: {
+          value
+        } = {}
+      } = []
+    } = {}
+  } = queryObject;
+  return !value || value === 'true';
+};
+var _default = exports.default = useTagsEnabled;

package/es/lib/Tags/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Tags: true
+};
+Object.defineProperty(exports, "Tags", {
+  enumerable: true,
+  get: function () {
+    return _Tags.default;
+  }
+});
+var _Tags = _interopRequireDefault(require("./Tags"));
+var _tagsConfig = require("./tagsConfig");
+Object.keys(_tagsConfig).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _tagsConfig[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tagsConfig[key];
+    }
+  });
+});
+var _hooks = require("./hooks");
+Object.keys(_hooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _hooks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _hooks[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/Tags/tagsConfig.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tagsPath = exports.tagNamespaceArray = exports.defaultTagsParams = exports.defaultTagQuery = void 0;
+const tagNamespaceArray = exports.tagNamespaceArray = ['tags', 'stripes-kint-components', 'Tags'];
+const tagsPath = exports.tagsPath = 'tags';
+const defaultTagsParams = exports.defaultTagsParams = ['limit=1000', 'query=cql.allRecords%3D1%20sortby%20label'];
+const defaultTagQuery = exports.defaultTagQuery = `${tagsPath}?${defaultTagsParams?.join('&')}`;

package/es/lib/hooks/useHelperApp.js

@@ -4,18 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _reactRouterDom = require("react-router-dom");
 var _queryString = _interopRequireDefault(require("query-string"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-let helperObject = {};
 const useHelperApp = helpers => {
   const history = (0, _reactRouterDom.useHistory)();
   const location = (0, _reactRouterDom.useLocation)();
+  const [helperObject, setHelperObject] = (0, _react.useState)({});
+  const [helperToggleFunctions, setHelperToggleFunctions] = (0, _react.useState)({});
   const query = _queryString.default.parse(location.search);
   const [currentHelper, setCurrentHelper] = (0, _react.useState)(query?.helper);
   const handleToggleHelper = (0, _react.useCallback)(helper => {
@@ -25,9 +24,16 @@ const useHelperApp = helpers => {
     return currentHelper === hlp;
   };
   (0, _react.useEffect)(() => {
-    // Keep object outside of hook to avoid redraw, oncly change when keys change
     if (!(0, _isEqual.default)(Object.keys(helperObject), Object.keys(helpers))) {
-      helperObject = helpers;
+      setHelperObject(helpers);
+    }
+    const newHelperToggleFunctions = {};
+    Object.keys(helperObject).forEach(h => {
+      newHelperToggleFunctions[h] = () => handleToggleHelper(h);
+    });
+    if (!(0, _isEqual.default)(Object.keys(helperToggleFunctions), Object.keys(newHelperToggleFunctions))) {
+      // This makes sure adding/removing helpers changes the functions
+      setHelperToggleFunctions(newHelperToggleFunctions);
     }
     if (currentHelper !== query?.helper) {
       const newQuery = {
@@ -38,11 +44,14 @@ const useHelperApp = helpers => {
         pathname: location.pathname,
         search: `?${_queryString.default.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 = (0, _react.useMemo)(() => props => {
+  const HelperComponent = (0, _react.useCallback)(props => {
     if (!query?.helper) return null;
     let Component = null;
     Component = helperObject[query?.helper];
@@ -51,13 +60,7 @@ const useHelperApp = helpers => {
       onToggle: () => handleToggleHelper(query?.helper),
       ...props
     });
-  }, [handleToggleHelper, query.helper]);
-
-  // Set up the helperToggleFunctions
-  const helperToggleFunctions = {};
-  Object.keys(helperObject).forEach(h => {
-    helperToggleFunctions[h] = () => handleToggleHelper(h);
-  });
+  }, [handleToggleHelper, helperObject, query?.helper]);
   return {
     currentHelper,
     HelperComponent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.10.0",
+  "version": "5.11.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"
@@ -13,7 +13,8 @@
     "build:es": "rm -rf ./es && babel --extensions .js --ignore ./src/**/tests/**/* ./src --out-dir es",
     "build": "yarn build:es",
     "clean": "rm -rf ./node_modules ./*/node_modules ./yarn.lock && yarn install --ignore-scripts",
-    "clean-build": "yarn clean && yarn build",
+    "clean-install": "yarn clean && yarn install --ignore-scripts",
+    "clean-build": "yarn clean-install && yarn build",
     "prepare": "yarn build",
     "semantic-release": "semantic-release"
   },

package/src/index.js

@@ -113,3 +113,5 @@ export { default as SettingsFormContainer } from './lib/SettingsFormContainer';
 export { default as ComboButton } from './lib/ComboButton';
 
 export { default as NumberField } from './lib/NumberField';
+
+export * from './lib/Tags';

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/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 };
 };

package/test/helpers/test-implementor-translations.json

@@ -76,5 +76,8 @@
   "edit": "Edit",
   "save": "Save",
   "cancel": "Cancel",
-  "apply": "Apply"
+  "apply": "Apply",
+  "tags": "Tags",
+  "numberOfTags": "{count, number} {count, plural, one {Tag} other {Tags}}",
+  "newTagCreated": "New tag created"
 }