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

package/es/lib/hooks/usePrevNextPagination.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactRouterDom = require("react-router-dom");
+var _queryString = _interopRequireDefault(require("query-string"));
+var _pagination = require("../constants/pagination");
+var _useLocalPageStore = _interopRequireDefault(require("./useLocalPageStore"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Currently there are several places in which this hook is used twice within the same component
+// Once in order to get the current page, and again in order to handle changes to paginations
+// This hook should be refactored in order to resolve these issue - @EthanFreestone
+const usePrevNextPagination = function () {
+  let {
+    count = 0,
+    // Only needed for reading back MCL props
+    defaultToPageOne = true,
+    // A prop to allow the implementor to turn off the defaulting to page=1
+    pageSize = _pagination.DEFAULT_PAGINATION_SIZE,
+    // Only needed for reading back MCL props
+    id = _pagination.DEFAULT_PAGE_KEY,
+    // This id is ONLY used for syncToLocation: false cases, as a key to the zustand store
+    syncToLocation = true,
+    // Used to turn on/off location syncing, so can be used as standalone state if required,
+    hasNextPage = null // Override for canGoNext, used in the case in which resources are fetched with no stats
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  /* ------ ZUSTAND STORE ------ */
+  // For NON-SYNC-TO-LOCATION use cases, store the currentPage in a keyed store
+  const pageStore = (0, _useLocalPageStore.default)(state => state.pageStore);
+  const setPage = (0, _useLocalPageStore.default)(state => state.setPage);
+
+  /* ------ CURRENTPAGE STATE ------ */
+  // Set up initialValue
+  const getInitialCurrentPage = (0, _react.useCallback)(() => {
+    let initialCurrentPage;
+    if (!syncToLocation) {
+      if (pageStore[id]) {
+        initialCurrentPage = pageStore[id];
+      } else {
+        // Initialise store state
+        setPage(id, 1);
+        initialCurrentPage = 1;
+      }
+    }
+    return initialCurrentPage;
+  }, [id, pageStore, setPage, syncToLocation]);
+  // State itself
+  const [currentPage, setCurrentPage] = (0, _react.useState)(getInitialCurrentPage());
+  const location = (0, _reactRouterDom.useLocation)();
+  const history = (0, _reactRouterDom.useHistory)();
+
+  /* ------ HANDLEPAGECHANGE ------ */
+  // Takes in a direction "prev" or "next" and performs the requisite logic to move
+  // currentPage state and/or zustand store state
+  const handlePageChange = (0, _react.useCallback)(direction => {
+    const urlQuery = _queryString.default.parse(location.search);
+    let newPage;
+    if (direction === _pagination.NEXT) {
+      newPage = currentPage + 1;
+    } else if (direction === _pagination.PREV) {
+      newPage = currentPage - 1;
+    }
+    if (!syncToLocation) {
+      // We're manipulating the state directly in this case
+      // We're dealing with the zustand store in this case,
+      // change the store and the currentPage will update below
+      setPage(id, newPage);
+      setCurrentPage(newPage);
+    } else if (newPage !== urlQuery?.page) {
+      const newQuery = {
+        ...urlQuery,
+        page: newPage
+      };
+      history.push({
+        pathname: location.pathname,
+        search: `?${_queryString.default.stringify(newQuery)}`
+      });
+    }
+  }, [currentPage, history, id, location.pathname, location.search, setPage, syncToLocation]);
+  const [resetPageState, setResetPageState] = (0, _react.useState)(false);
+  const resetPage = (0, _react.useCallback)(() => {
+    if (syncToLocation) {
+      setResetPageState(true);
+    } else {
+      setPage(id, 1);
+      setCurrentPage(1);
+    }
+  }, [id, setPage, syncToLocation]);
+  (0, _react.useEffect)(() => {
+    if (syncToLocation) {
+      const urlQuery = _queryString.default.parse(location.search);
+      if (urlQuery?.page && currentPage !== urlQuery?.page) {
+        setCurrentPage(Number(urlQuery?.page));
+      } else if (!urlQuery?.page && defaultToPageOne) {
+        // If url query "page" is not yet set, set it to 1
+        setCurrentPage(1);
+        const newQuery = {
+          ...urlQuery,
+          page: 1
+        };
+        history.push({
+          pathname: location.pathname,
+          search: `?${_queryString.default.stringify(newQuery)}`
+        });
+      }
+      if (resetPageState) {
+        const newQuery = {
+          ...urlQuery,
+          page: 1
+        };
+        history.push({
+          pathname: location.pathname,
+          search: `?${_queryString.default.stringify(newQuery)}`
+        });
+        setResetPageState(false);
+      }
+    } else if (currentPage !== pageStore[id]) {
+      // Only do this when not syncing to location...
+      // If current page state is not what we have in the store, set current page state
+      setCurrentPage(pageStore[id]);
+    }
+  }, [currentPage, defaultToPageOne, history, id, location, pageStore, resetPageState, syncToLocation]);
+
+  // Set up MCL specific props based on page
+  const pagingCanGoNext = hasNextPage ?? (currentPage && currentPage < Number(count) / pageSize);
+  const pagingCanGoPrevious = currentPage && Number(currentPage) > 1;
+  const pagingOffset = currentPage ? (currentPage - 1) * pageSize : 0;
+  const onNeedMoreData = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (args[_pagination.MCL_NEED_MORE_DATA_PREV_NEXT_ARG_INDEX]) {
+      handlePageChange(args[_pagination.MCL_NEED_MORE_DATA_PREV_NEXT_ARG_INDEX]);
+    }
+  };
+
+  // Set up SASQ callback handling
+  // If extras are needed, these can be set up
+  // manually using resetPage per SASQ
+  const queryStateReducer = (0, _react.useCallback)((_currState, nextState) => {
+    const resetPageEvents = ['clear.all', 'reset.all', 'filter.state', 'filter.clearGroup', 'sort.change', 'search.reset', 'search.submit'];
+    if (resetPageEvents.includes(nextState.changeType)) {
+      resetPage();
+    }
+    return nextState;
+  }, [resetPage]);
+  const paginationSASQProps = (0, _react.useMemo)(() => ({
+    queryStateReducer
+  }), [queryStateReducer]);
+  return {
+    currentPage,
+    handlePageChange,
+    paginationMCLProps: {
+      onNeedMoreData,
+      pagingCanGoNext,
+      pagingCanGoPrevious,
+      pagingOffset,
+      pagingType: 'prev-next'
+    },
+    paginationSASQProps,
+    queryStateReducer,
+    resetPage
+  };
+};
+var _default = exports.default = usePrevNextPagination;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.10.0",
+  "version": "5.12.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"
   },
@@ -39,12 +40,12 @@
     "@babel/preset-flow": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@folio/eslint-config-stripes": "^7.0.0",
-    "@folio/jest-config-stripes": "^2.0.0",
-    "@folio/stripes": "^9.0.0",
-    "@folio/stripes-cli": "^3.0.0",
+    "@folio/eslint-config-stripes": "^7.0.0 || ^8.0.0",
+    "@folio/jest-config-stripes": "^2.0.0 || ^3.0.0",
+    "@folio/stripes": "^9.0.0 || ^10.0.0",
+    "@folio/stripes-cli": "^3.0.0 || ^4.0.0",
     "@folio/stripes-erm-testing": "^2.0.0",
-    "@formatjs/cli": "^6.1.3",
+    "@formatjs/cli": "^6.6.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/gitlab": "^12.0.6",
@@ -63,7 +64,7 @@
     "prop-types-extra": ">=1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-intl": "^6.4.4",
+    "react-intl": "^6.4.4 || ^7.1.5",
     "react-query": "^3.6.0",
     "react-redux": "^9.0.0",
     "react-router": "^5.2.0",
@@ -76,7 +77,7 @@
     "sinon": "^18.0.0"
   },
   "peerDependencies": {
-    "@folio/stripes": ">=9.0.0",
+    "@folio/stripes": "^9.0.0 || ^10.0.0",
     "final-form": ">=4.18.4",
     "final-form-arrays": ">=3.0.1",
     "lodash": ">=4.17.0",
@@ -85,7 +86,7 @@
     "react": "*",
     "react-final-form": ">=6.3.0",
     "react-final-form-arrays": ">=3.1.0",
-    "react-intl": ">=6.4.4",
+    "react-intl": "^6.4.4 || ^7.1.5",
     "react-query": ">=3.9.0",
     "react-router-dom": ">=5.2.0"
   },

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/EditableRefdataList/EditableRefdataList.js

@@ -106,16 +106,16 @@ const EditableRefdataList = ({
       // or one provided in labelOverrides, which is passed the error message and refdata in question
       delete: async (err) => {
         const errorResp = await parseErrorResponse(err.response);
-        console.log("ERRORRESP: %o", errorResp);
+        // console.log('ERRORRESP: %o', errorResp);
         callout.sendCallout({
           message: kintIntl.formatKintMessage({
             id: 'refdata.deleteRefdataValue.errorMessage',
             overrideValue: labelOverrides?.deleteError
           },
-          {
-            label: deleteModal?.refdata?.label,
-            error: errorResp?.message
-          }),
+            {
+              label: deleteModal?.refdata?.label,
+              error: errorResp?.message
+            }),
           type: 'error',
         });
       },

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -1,8 +1,8 @@
-import { forwardRef, useImperativeHandle } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { useInfiniteQuery } from 'react-query';
+import { useQuery } from 'react-query';
 
 import {
   useNamespace,
@@ -25,7 +25,7 @@ import {
 } from '@folio/stripes/components';
 
 import { generateKiwtQuery } from '../utils';
-import { useKintIntl, useKiwtSASQuery, useLocalStorageState } from '../hooks';
+import { useKintIntl, useKiwtSASQuery, useLocalStorageState, usePrevNextPagination } from '../hooks';
 
 import TableBody from './TableBody';
 
@@ -41,6 +41,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     intlNS: passedIntlNS,
     labelOverrides = {},
     mainPaneProps,
+    mclProps = {},
     noSearchField,
     persistedPanesetProps = {},
     RenderBody,
@@ -50,6 +51,12 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     searchFieldProps
   } = props;
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+  const [count, setCount] = useState(0);
+
+  const { currentPage, paginationMCLProps, paginationSASQProps } = usePrevNextPagination({
+    count,
+    pageSize: fetchParameters.SASQ_MAP?.perPage
+  });
 
   const { query, queryGetter, querySetter } = useKiwtSASQuery();
   const { 0: namespace } = useNamespace();
@@ -57,11 +64,14 @@ const SASQLookupComponent = forwardRef((props, ref) => {
 
   const filterPaneVisibileKey = `${namespace}-${id}-filterPaneVisibility`;
 
-  const fetchPageData = ({ pageParam = 0 }) => {
-    const queryMap = fetchParameters.SASQ_MAP;
-    queryMap.offset = pageParam;
-    return ky(`${fetchParameters.endpoint}${generateKiwtQuery(queryMap, query)}`).json();
-  };
+  const queryParams = useMemo(() => (
+    generateKiwtQuery(
+      {
+        ...fetchParameters.SASQ_MAP,
+        page: currentPage,
+      }, (query ?? {})
+    )
+  ), [currentPage, fetchParameters.SASQ_MAP, query]);
 
   const [filterPaneVisible, setFilterPaneVisible] = useLocalStorageState(filterPaneVisibileKey, true);
   const toggleFilterPane = () => setFilterPaneVisible(!filterPaneVisible);
@@ -72,65 +82,57 @@ const SASQLookupComponent = forwardRef((props, ref) => {
   }
   queryNamespace.push('viewAll');
   queryNamespace.push(query);
+  queryNamespace.push(currentPage);
 
   const {
-    data: totalData = {},
-    ...restOfInfiniteQueryProps
-  } = useInfiniteQuery(
+    data = {},
+    ...restOfQueryProps
+  } = useQuery(
     queryNamespace,
-    fetchPageData
+    () => {
+      return ky.get(`${fetchParameters.endpoint}${queryParams}`).json();
+    },
+    {
+      enabled: !!currentPage,
+    }
   );
 
+  useEffect(() => {
+    if (count !== data?.totalRecords) {
+      setCount(data?.totalRecords);
+    }
+  }, [count, data.totalRecords]);
+
   useImperativeHandle(ref, () => (
     {
       lookupQueryProps: {
-        data: totalData,
-        ...restOfInfiniteQueryProps
-      }
+        data,
+        ...restOfQueryProps
+      },
+      queryParams
     }
   ));
 
-  const data = totalData.pages?.reduce(
-    (acc, curr) => {
-      const newAcc = { ...acc };
-      for (const [key, value] of Object.entries(curr)) {
-        if (
-          key !== 'page' &&
-          key !== 'result' &&
-          acc[key] !== value
-        ) {
-          newAcc[key] = value;
-        }
-      }
-
-      const newResults = [...(acc.results ?? [])];
-      newResults.push(...(curr.results ?? []));
-      newAcc.results = newResults;
-
-      return newAcc;
-    },
-    {}
-  ) ?? {};
-
   return (
     <SearchAndSortQuery
       initialSearchState={{ query: '' }}
       queryGetter={queryGetter}
       querySetter={querySetter}
       {...sasqProps}
+      {...paginationSASQProps}
     >
       {
         (sasqRenderProps) => {
           const {
-          activeFilters,
-          filterChanged,
-          getFilterHandlers,
-          getSearchHandlers,
-          onSubmitSearch,
-          resetAll,
-          searchChanged,
-          searchValue
-        } = sasqRenderProps;
+            activeFilters,
+            filterChanged,
+            getFilterHandlers,
+            getSearchHandlers,
+            onSubmitSearch,
+            resetAll,
+            searchChanged,
+            searchValue
+          } = sasqRenderProps;
 
           const searchHandlers = getSearchHandlers();
           const disableReset = !filterChanged && !searchChanged;
@@ -143,7 +145,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
             filterPaneFirstMenu,
             filterPaneLastMenu,
             ...restOfFilterPaneProps
-            } = filterPaneProps;
+          } = filterPaneProps;
           const {
             mainPaneFirstMenu,
             mainPaneLastMenu,
@@ -269,7 +271,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
                   query={query}
                   rowNavigation={rowNavigation}
                   toggleFilterPane={toggleFilterPane}
-                  {...restOfInfiniteQueryProps}
+                  {...restOfQueryProps}
                   {...sasqRenderProps}
                   /*
                    * This is insane, it looks like SASQProps `initialSortState`
@@ -277,7 +279,16 @@ const SASQLookupComponent = forwardRef((props, ref) => {
                    * sort handler. Passing through SASQProps.
                    */
                   {...sasqProps}
-                  {...props}
+                  // pass down all props handed to us except mclProps (pass those down below with our extra prev/next goodies)
+                  {
+                    ...{
+                      ...props,
+                      mclProps: {
+                        ...paginationMCLProps,
+                        ...mclProps,
+                      }
+                    }
+                  }
                 />
               </Pane>
               {children}

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';