@k-int/stripes-kint-components 4.5.1 → 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/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>
   );
 }