@k-int/stripes-kint-components 4.5.0 → 4.6.0

package/src/index.js

@@ -92,7 +92,11 @@ export {
   useParseActiveFilterStrings
 } from './lib/CustomProperties';
 
+// DEPRECATED -- TYPO HERE, EXPORT AS BOTH FOR NOW AND REMOVE BROKEN ONE LATER
 export * as customPropertyContants from './lib/constants/customProperties';
+export * as customPropertyConstants from './lib/constants/customProperties';
+
+export * as endpoints from './lib/constants/endpoints';
 
 export { default as CycleButton } from './lib/CycleButton';
 export { default as IconSelect } from './lib/IconSelect';
@@ -101,3 +105,5 @@ export { default as RichSelect, useSelectedOption } from './lib/RichSelect';
 export { default as FormattedKintMessage } from './lib/FormattedKintMessage';
 
 export { default as ResponsiveButtonGroup } from './lib/ResponsiveButtonGroup';
+
+export { default as SettingsFormContainer } from './lib/SettingsFormContainer';

package/src/lib/SettingsFormContainer/SettingsFormContainer.js

@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types';
+
+import { useModConfigEntries, useMutateModConfigEntry } from '../hooks';
+
+/*
+ * API is similar to ConfigManager
+ */
+const SettingsFormContainer = ({
+  ConfigFormComponent,
+  configName,
+  getInitialValues: passedGetInitialValues,
+  moduleName,
+  scope, // We don't use this currently but it's here for future reference
+  ...rest
+}) => {
+/*
+  * It is important to pass a namespaceAppend because the same hook could be rendered
+  * on the main App component. This means that in settings
+  * (Which is rendered inside App itself, stripes behaviour)
+  * the same query namespace would apply to the query in the config form, and also to
+  * the App level hook call, resulting in an infinite loop.
+  *
+  * We avoid this by ensuring all calls from this component have (at least) an extra namespace key item
+  */
+  const {
+    parsedSettings,
+    settings
+  } = useModConfigEntries({
+    moduleName,
+    configName,
+    namespaceAppend: ['SettingsFormContainer']
+  });
+
+  const { mutateAsync: editSettings } = useMutateModConfigEntry({
+    configName,
+    moduleName,
+    id: settings?.id
+  });
+
+  const onSubmit = (values) => {
+    const setting = {
+      ...settings,
+      value: JSON.stringify(values),
+      ...(moduleName ?
+        { module: moduleName, configName } :
+        { scope, key: configName })
+    };
+
+    editSettings(setting);
+  };
+
+  const getInitialValues = () => {
+    let initialValues = parsedSettings;
+    if (passedGetInitialValues) {
+      initialValues = passedGetInitialValues(parsedSettings, settings);
+    }
+
+    return initialValues;
+  };
+
+  return (
+    <div style={{ width: '100%' }}>
+      <ConfigFormComponent
+        initialValues={getInitialValues()}
+        onSubmit={onSubmit}
+        {...rest}
+      />
+    </div>
+  );
+};
+
+SettingsFormContainer.propTypes = {
+  ConfigFormComponent: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.func,
+  ]),
+  configName: PropTypes.string.isRequired,
+  getInitialValues: PropTypes.func,
+  moduleName: PropTypes.string.isRequired,
+  scope: PropTypes.string,
+};
+
+export default SettingsFormContainer;

package/src/lib/SettingsFormContainer/index.js

@@ -0,0 +1 @@
+export { default } from './SettingsFormContainer';

package/src/lib/constants/endpoints.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const MOD_SETTINGS_ENDPOINT = 'configurations/entries';

package/src/lib/hooks/index.js

@@ -15,3 +15,5 @@ export { default as useKintIntl } from './useKintIntl';
 export { default as useIntlKeyStore } from './useIntlKeyStore';
 export { default as useIntlKey } from './useIntlKey';
 export { default as useSASQQueryMeta } from './useSASQQueryMeta';
+export { default as useModConfigEntries } from './useModConfigEntries';
+export { default as useMutateModConfigEntry } from './useMutateModConfigEntry';

package/src/lib/hooks/useModConfigEntries.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+
+import { useQuery } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+import { modConfigEntriesQueryKey, parseModConfigEntry } from '../utils';
+import { MOD_SETTINGS_ENDPOINT } from '../constants/endpoints';
+
+const useModConfigEntries = ({
+  configName,
+  moduleName,
+  namespaceAppend,
+  queryParams
+}) => {
+  const ky = useOkapiKy();
+
+  const query = `?query=(module=${moduleName} and configName=${configName})`;
+  const path = `${MOD_SETTINGS_ENDPOINT}${query}`;
+
+  const namespace = modConfigEntriesQueryKey({
+    configName,
+    moduleName,
+    namespaceAppend
+  });
+
+  const queryObject = useQuery(
+    namespace,
+    () => ky(path).json(),
+    queryParams
+  );
+
+  const { data: { configs: { 0: settings = {} } = [] } = {} } = queryObject;
+  const parsedSettings = parseModConfigEntry(settings);
+
+  return {
+    parsedSettings,
+    queryObject,
+    settings
+  };
+};
+
+useModConfigEntries.propTypes = {
+  moduleName: PropTypes.string,
+  configName: PropTypes.string,
+  queryParams: PropTypes.object,
+};
+
+export default useModConfigEntries;

package/src/lib/hooks/useMutateModConfigEntry.js

@@ -0,0 +1,51 @@
+
+import { useMutation, useQueryClient } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+
+import { modConfigEntriesQueryKey } from '../utils';
+import { MOD_SETTINGS_ENDPOINT } from '../constants/endpoints';
+
+// This will simply take in some information and decide whether to mutate via POST or via PUT
+const useMutateModConfigEntry = ({
+  configName,
+  moduleName,
+  id
+}) => {
+  const ky = useOkapiKy();
+  const queryClient = useQueryClient();
+
+  const baseNamespace = modConfigEntriesQueryKey({
+    configName,
+    moduleName
+  });
+
+  const putQueryObject = useMutation(
+    [...baseNamespace, 'putConfigEntry', id],
+    async (data) => ky.put(
+      `${MOD_SETTINGS_ENDPOINT}/${id}`,
+      { json: data }
+    ).json()
+      .then(() => {
+        queryClient.invalidateQueries(baseNamespace);
+      })
+  );
+
+  const postQueryObject = useMutation(
+    [...baseNamespace, 'postConfigEntry'],
+    async (data) => ky.post(
+      `${MOD_SETTINGS_ENDPOINT}`,
+      { json: data }
+    ).json()
+      .then(() => {
+        queryClient.invalidateQueries(baseNamespace);
+      })
+  );
+
+  if (id) {
+    return putQueryObject;
+  }
+
+  return postQueryObject;
+};
+
+export default useMutateModConfigEntry;

package/src/lib/utils/index.js

@@ -23,3 +23,6 @@ export { default as parseKiwtQueryGroups } from './parseKiwtQueryGroups';
 
 // HTTP Utils
 export { default as parseErrorResponse } from './parseErrorResponse';
+
+export { default as modConfigEntriesQueryKey } from './modConfigEntriesQueryKey';
+export { default as parseModConfigEntry } from './parseModConfigEntry';

package/src/lib/utils/modConfigEntriesQueryKey.js

@@ -0,0 +1,19 @@
+const modConfigEntriesQueryKey = ({
+  configName,
+  moduleName,
+  namespaceAppend
+} = {}) => {
+  const namespace = ['stripes-kint-components', 'modConfigSettings', moduleName, configName];
+
+  if (Array.isArray(namespaceAppend)) {
+    namespaceAppend.forEach(appendItem => {
+      namespace.push(appendItem);
+    });
+  } else if (namespaceAppend) {
+    namespace.push(namespaceAppend);
+  }
+
+  return namespace;
+};
+
+export default modConfigEntriesQueryKey;

package/src/lib/utils/parseKiwtQueryGroups.js

@@ -1,22 +1,49 @@
+/**
+ * parseKiwtQueryGroups
+ * Given a string containing query groups like
+ *   (foo == bar && (bat == baz || bat == quux))
+ * parse it into a series of nested arrys like
+ * [
+ *   foo == bar, &&
+ *   [
+ *     bat == baz, ||, bat == quux
+ *   ]
+ * ]
+ * Nested groups are parsed recursively. There are four tokens:
+ *  ||
+ *  &&
+ *  (
+ *  )
+ *
+ * @param {string} query
+ * @returns [] tokenized query as a series of nested arrays
+ * @throws Error if parens are unmatched
+ */
 const parseKiwtQueryGroups = (query) => {
-  // Split out all operators and brackets, but keeping them all intact in the correct potition.
-  const splitString = query.split(/(?<=\|\||&&|\(|\))|(?=\|\||&&|\(|\))/);
-  // Keep track of what to skip over when wereturn from each level of nesting
-  let skipCount = [0];
+  // Split on tokens, keeping them all in tact in the correct position.
+  // This could be handled without the filter, which omits empty-string
+  // matches, using a look-behind:
+  //   query.split(/(?<=\|\||&&|\(|\))|(?=\|\||&&|\(|\))/);
+  // but Webkit hasn't implemented look-behind yet so that breaks Safari.
+  // https://bugs.webkit.org/show_bug.cgi?id=174931
+  // <sigh>
+  const splitString = query.split(/(\|\||&&|\(|\))/).filter(Boolean);
 
+  // Keep track of what to skip over when we return from each level of nesting
+  let skipCount = [0];
 
-  // Ensure brackets are properly closed
-  let unclosedBrackets = 0;
+  // Ensure parens are properly closed
+  let unclosedParens = 0;
   const groupParser = (parseArray, nestLevel = 0) => {
     const group = [];
-    // Iterate over each element in the array, recursively calling this when hitting brackets
+    // Iterate over each element in the array, recursively calling this when hitting parens
     parseArray?.every((element, index) => {
       if (skipCount[nestLevel] > 0) {
         skipCount[nestLevel] -= 1;
         return true; // Equivalent to BREAK -- move onto next element
       }
 
-      // Deal with unexpected extra closure
+      // abort: dangling close-paren
       if (nestLevel === 0 && element === ')') {
         throw new Error('Unexpected character \')\' found, stopping parse.');
       }
@@ -34,13 +61,13 @@ const parseKiwtQueryGroups = (query) => {
       } else if (element === ')') {
         // Remove the corresponding skipCount level because we're going down a nesting level
         skipCount.pop();
-        unclosedBrackets -= 1;
+        unclosedParens -= 1;
 
         return false; // Equivalent to BREAK -- go up a nesting level
       } else if (element === '(') {
         // Add next index to skipcount for the nesting
         skipCount.push(0);
-        unclosedBrackets += 1;
+        unclosedParens += 1;
 
         group.push(groupParser(parseArray.slice(index + 1, parseArray?.length), nestLevel + 1));
       }
@@ -54,8 +81,8 @@ const parseKiwtQueryGroups = (query) => {
 
   const outputGroups = groupParser(splitString);
 
-  // Deal with unclosed parentheses
-  if (unclosedBrackets > 0) {
+  // abort: dangling open-paren
+  if (unclosedParens > 0) {
     throw new Error('Found unclosed paretheses, stopping parse.');
   }
 

package/src/lib/utils/parseKiwtQueryGroups.test.js

@@ -0,0 +1,60 @@
+import parseKiwtQueryGroups from './parseKiwtQueryGroups';
+
+describe('parseKiwtQueryGroups', () => {
+  it('handles simple queries without parens', () => {
+    const result = parseKiwtQueryGroups('foo==bar');
+    expect(result).toEqual(['foo==bar']);
+  });
+
+  it('handles simple queries with parens', () => {
+    const result = parseKiwtQueryGroups('(foo==bar)');
+    expect(result).toEqual([['foo==bar']]);
+  });
+
+  it('handles conjunctions', () => {
+    const result = parseKiwtQueryGroups('(foo==bar&&bat==baz)');
+    expect(result).toEqual([['foo==bar', '&&', 'bat==baz']]);
+  });
+
+  it('handles disjunctions', () => {
+    const result = parseKiwtQueryGroups('(foo==bar||bat==baz)');
+    expect(result).toEqual([['foo==bar', '||', 'bat==baz']]);
+  });
+
+  it('handles nested clauses', () => {
+    const result = parseKiwtQueryGroups('(foo==bar&&(bat==baz||bat==quux))');
+    expect(result).toEqual([['foo==bar', '&&', ['bat==baz', '||', 'bat==quux']]]);
+  });
+
+  it('throws on dangling (', () => {
+    try {
+      parseKiwtQueryGroups('(foo==bar');
+    } catch (e) {
+      expect(e.message).toMatch('Found unclosed paretheses, stopping parse.');
+    }
+  });
+
+  it('throws on dangling )', () => {
+    try {
+      parseKiwtQueryGroups('bat==quux)');
+    } catch (e) {
+      expect(e.message).toMatch('Unexpected character \')\' found, stopping parse.');
+    }
+  });
+
+  it('throws on nested dangling (', () => {
+    try {
+      parseKiwtQueryGroups('(foo==bar&&(bat==baz||bat==quux)');
+    } catch (e) {
+      expect(e.message).toMatch('Found unclosed paretheses, stopping parse.');
+    }
+  });
+
+  it('throws on nested dangling )', () => {
+    try {
+      parseKiwtQueryGroups('foo==bar&&(bat==baz||bat==quux))&&(monkey==bagel||thunder==chicken)');
+    } catch (e) {
+      expect(e.message).toMatch('Unexpected character \')\' found, stopping parse.');
+    }
+  });
+});

package/src/lib/utils/parseModConfigEntry.js

@@ -0,0 +1,15 @@
+const parseModConfigEntry = (setting) => {
+  let parsedSettings = {};
+  if (setting.value) {
+    try {
+      parsedSettings = JSON.parse(setting.value);
+    } catch (error) {
+      // Error parsing settings JSON
+      console.error(error); // eslint-disable-line no-console
+    }
+  }
+
+  return parsedSettings;
+};
+
+export default parseModConfigEntry;

package/test/jest/helpers/KintHarness.js

@@ -1,13 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Harness } from '@folio/stripes-erm-testing';
+import { BaseHarness } from '@folio/stripes-erm-testing';
+
+import { useIntlKeyStore } from '../../../src';
 
 import { SettingsContext } from '../../../src/lib/contexts';
 import translationsProperties from '../../helpers';
 
+const InternalKintIntlHarness = ({ children, intlKey, moduleName }) => {
+  const addKey = useIntlKeyStore(state => state.addKey);
+  addKey(intlKey, moduleName);
+
+  return children;
+};
 
 export default function KintHarness({
   children,
+  intlKey = 'ui-test-implementor',
+  moduleName = '@folio/test-implementor',
   settingsValues = {
     intlKey: 'stripes-kint-components',
     refdataEndpoint: 'path/to/refdata',
@@ -19,12 +29,19 @@ export default function KintHarness({
 }) {
   return (
     <SettingsContext.Provider value={settingsValues}>
-      <Harness
+      <BaseHarness
+        intlKey={intlKey}
+        moduleName={moduleName}
         translations={translations}
         {...harnessProps}
       >
-        {children}
-      </Harness>
+        <InternalKintIntlHarness
+          intlKey={intlKey}
+          moduleName={moduleName}
+        >
+          {children}
+        </InternalKintIntlHarness>
+      </BaseHarness>
     </SettingsContext.Provider>
   );
 }