@k-int/stripes-kint-components 5.29.0 → 5.30.0

package/src/lib/Settings/StaticSettingsField/StaticSettingsField.js

@@ -1,78 +1,18 @@
 import PropTypes from 'prop-types';
 
 import { Field } from 'react-final-form';
-import {
-  Select,
-  TextField,
-} from '@folio/stripes/components';
 
-import RefdataButtons from '../../RefdataButtons';
+import StaticSettingsFieldComponent from './StaticSettingsFieldComponent';
 
 // This is pretty much EXACTLY equivalent to the EditSettingValue in EditableSettingsList,
 // but slightly tweaked to be more accommodating
-const StaticSettingsField = ({
-  refdata,
-  setting = {},
-  templates,
-  ...fieldProps // Anything else will be passed directly onto the <Field> component
-}) => {
-  // Adding default sort to refdata object in ascending order by label
-  const sortByLabel = (a, b) => (a.label.localeCompare(b.label));
-  const sortedRefdata = refdata?.sort(sortByLabel);
-
-  switch (setting.settingType) {
-    case 'Refdata':
-      // Grab refdata values corresponding to setting
-      // eslint-disable-next-line no-case-declarations
-      let RefdataComponent = Select;
-      if (refdata.length > 0 && refdata.length <= 4) {
-        RefdataComponent = RefdataButtons;
-      }
-
-      return (
-        <Field
-          component={RefdataComponent}
-          dataOptions={sortedRefdata}
-          {...fieldProps}
-        />
-      );
-
-    case 'Password':
-      return (
-        <Field
-          component={TextField}
-          parse={v => v} // Lets us send an empty string instead of 'undefined'
-          type="password"
-          {...fieldProps}
-        />
-      );
-    case 'Template': {
-      // Grab template values corresponding to setting
-      // eslint-disable-next-line no-case-declarations
-      const selectTemplateValues = [
-        { value: '', label: '' },
-        ...templates.map(t => ({ value: t.id, label: t.name }))
-      ];
-
-      return (
-        <Field
-          component={Select}
-          dataOptions={selectTemplateValues}
-          parse={v => v}
-          {...fieldProps}
-        />
-      );
-    }
-    default:
-      // If in doubt, go with String
-      return (
-        <Field
-          component={TextField}
-          parse={v => v} // Lets us send an empty string instead of 'undefined'
-          {...fieldProps}
-        />
-      );
-  }
+const StaticSettingsField = (props) => {
+  return (
+    <Field
+      component={StaticSettingsFieldComponent}
+      {...props}
+    />
+  );
 };
 
 StaticSettingsField.propTypes = {

package/src/lib/Settings/StaticSettingsField/StaticSettingsFieldComponent/StaticSettingsFieldComponent.js

@@ -0,0 +1,42 @@
+import { useCallback, useMemo } from 'react';
+
+import { Select, TextField } from '@folio/stripes/components';
+import RefdataButtons from '../../../RefdataButtons';
+
+const StaticSettingsFieldComponent = ({
+  refdata,
+  setting = {},
+  templates,
+  ...fieldProps // Anything else will be passed directly onto the <Field> component
+}) => {
+  // Adding default sort to refdata object in ascending order by label
+  const sortByLabel = useCallback((a, b) => (a.label.localeCompare(b.label)), []);
+  const sortedRefdata = useMemo(() => refdata?.sort(sortByLabel), [refdata, sortByLabel]);
+
+  switch (setting.settingType) {
+    case 'Refdata':
+      // Grab refdata values corresponding to setting
+      // eslint-disable-next-line no-case-declarations
+      let RefdataComponent = Select;
+      if (refdata.length > 0 && refdata.length <= 4) {
+        RefdataComponent = RefdataButtons;
+      }
+
+      return <RefdataComponent {...fieldProps} dataOptions={sortedRefdata} />;
+    case 'Password':
+      return <TextField {...fieldProps} type="password" />;
+    case 'Template':
+      // Grab template values corresponding to setting
+      // eslint-disable-next-line no-case-declarations
+      const selectTemplateValues = [
+        { value: '', label: '' },
+        ...templates.map(t => ({ value: t.id, label: t.name }))
+      ];
+      return <Select {...fieldProps} dataOptions={selectTemplateValues} />;
+    default:
+      // If in doubt, go with String
+      return <TextField {...fieldProps} />;
+  }
+};
+
+export default StaticSettingsFieldComponent;

package/src/lib/Settings/StaticSettingsField/StaticSettingsFieldComponent/index.js

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

package/src/lib/Settings/StaticSettingsField/index.js

@@ -1 +1,2 @@
-export { default } from './StaticSettingsField';
+export { default as StaticSettingsField } from './StaticSettingsField';
+export { default as StaticSettingsFieldComponent } from './StaticSettingsFieldComponent';

package/src/lib/Settings/constants/queryKeys.js

@@ -1,5 +1,16 @@
 export const BASE_APP_SETTING_QUERY_KEY = ['stripes-kint-components', 'useSetting', 'appSettings'];
-export const GET_SETTING_SECTION_QUERY_KEY = (queryParams, sectionName) => [...BASE_APP_SETTING_QUERY_KEY, sectionName, queryParams];
+export const GET_SETTING_SECTION_QUERY_KEY = (queryParams, sectionName) => {
+  const queryNamespace = [...BASE_APP_SETTING_QUERY_KEY];
+  if (sectionName) {
+    queryNamespace.push(sectionName);
+  }
+
+  if (queryParams) {
+    queryNamespace.push(queryParams);
+  }
+
+  return [...BASE_APP_SETTING_QUERY_KEY, sectionName, queryParams];
+};
 
 export const BASE_APP_SETTING_MUTATE_KEY = ['stripes-kint-components', 'useSetting', 'putSetting'];
 export const GET_SETTING_SECTION_MUTATE_KEY = (sectionName) => [...BASE_APP_SETTING_MUTATE_KEY, sectionName];

package/src/lib/Settings/hooks/useSettingSection/useSettingSection.js

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useOkapiKy } from '@folio/stripes/core';
 import { generateKiwtQueryParams } from '../../../utils';
 
@@ -11,6 +11,7 @@ const useSettingSection = ({
   getMutateNamespaceGenerator = () => GET_SETTING_SECTION_MUTATE_KEY(sectionName)
 }) => {
   const ky = useOkapiKy();
+  const queryClient = useQueryClient();
   const queryParams = generateKiwtQueryParams({
     filters: [
       {
@@ -34,7 +35,10 @@ const useSettingSection = ({
 
   const { mutateAsync: putSetting, ...settingsMutate } = useMutation(
     getMutateNamespaceGenerator(),
-    (data) => ky.put(`${settingEndpoint}${data.id ? '/' + data.id : ''}`, { json: data })
+    (data) => ky.put(`${settingEndpoint}${data.id ? '/' + data.id : ''}`, { json: data }).then(async res => {
+      await queryClient.invalidateQueries(getQueryNamespaceGenerator({ queryParams }));
+      return res;
+    })
   );
 
   return ({

package/src/lib/Settings/index.js

@@ -18,7 +18,7 @@ export { default as RefdataCategoriesSettings } from './RefdataCategoriesSetting
 export { default as EditableRefdataList } from './EditableRefdataList';
 export { default as EditableRefdataCategoryList } from './EditableRefdataCategoryList';
 
-export { default as StaticSettingsField } from './StaticSettingsField';
+export { StaticSettingsField, StaticSettingsFieldComponent } from './StaticSettingsField';
 
 // Contexts
 export {

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

@@ -1,18 +1,64 @@
 import { useOkapiKy } from '@folio/stripes/core';
 import { useQuery } from 'react-query';
-import { MOD_SETTINGS_ENDPOINT } from '../../constants/endpoints';
+import {
+  CONFIG_ENDPOINT,
+  SETTINGS_ENDPOINT,
+} from '../../constants/endpoints';
 
-export const tagsEnabledQueryKey = [MOD_SETTINGS_ENDPOINT, 'query=(module==TAGS and configName==tags_enabled)', 'stripes-kint-components', 'useTagsEnabled'];
+export const TAGS_ENABLED_BASE_QUERY_KEY = ['stripes-kint-components', 'useTagsEnabled'];
 
-const useTagsEnabled = () => {
+const TAGS_CONFIG_QUERY =
+  'query=(module==TAGS and configName==tags_enabled)';
+
+const TAGS_SETTINGS_QUERY =
+  'query=(scope==ui-tags.tags.manage and key==tags_enabled)';
+
+export const TAGS_ENABLED_CONFIG_QUERY_KEY = [
+  ...TAGS_ENABLED_BASE_QUERY_KEY,
+  CONFIG_ENDPOINT,
+  TAGS_CONFIG_QUERY,
+];
+
+export const TAGS_ENABLED_QUERY_KEY = [
+  ...TAGS_ENABLED_BASE_QUERY_KEY,
+  SETTINGS_ENDPOINT,
+  TAGS_SETTINGS_QUERY,
+];
+
+// DEPRECATED This remains for backwards compatibility but may not always be applicable, see useSettings configuration for details.
+export const tagsEnabledQueryKey = TAGS_ENABLED_CONFIG_QUERY_KEY;
+
+/**
+ * useTagsEnabled
+ *
+ * By default uses mod-config, for backwards compatibility.
+ * Pass { useSettings: true } to use mod-settings instead.
+ *
+ * Returns:
+ *   true  if the setting is missing or true
+ *   false if the setting is explicitly false
+ */
+
+const useTagsEnabled = ({ useSettings = false } = {}) => {
   const ky = useOkapiKy();
 
+  const endpoint = useSettings ? SETTINGS_ENDPOINT : CONFIG_ENDPOINT;
+  const query = useSettings ? TAGS_SETTINGS_QUERY : TAGS_CONFIG_QUERY;
+  const queryKey = useSettings ? TAGS_ENABLED_QUERY_KEY : TAGS_ENABLED_CONFIG_QUERY_KEY;
+
   const queryObject = useQuery(
-    tagsEnabledQueryKey,
-    () => ky.get(`${MOD_SETTINGS_ENDPOINT}?query=(module==TAGS and configName==tags_enabled)`).json()
+    queryKey,
+    () => ky.get(`${endpoint}?${query}`).json()
   );
 
+  if (useSettings) {
+    // mod-settings returns this value as a boolean instead of as a string, so the below approach !value is not applicable.
+    const value = queryObject?.data?.items?.[0]?.value;
+    return value === undefined || value === null || value;
+  }
+
   const { data: { configs: { 0: { value } = {} } = [] } = {} } = queryObject;
+
   return !value || value === 'true';
 };
 

package/src/lib/constants/endpoints.js

@@ -1,2 +1,8 @@
 // eslint-disable-next-line import/prefer-default-export
-export const MOD_SETTINGS_ENDPOINT = 'configurations/entries';
+export const SETTINGS_ENDPOINT = 'settings/entries';
+export const CONFIG_ENDPOINT = 'configurations/entries';
+
+// DEPRECATED Here for backwards compatibility as we move from mod-config to what is now mod-settings
+// This was always confusingly named, and will be removed in a future major version bump
+export const MOD_SETTINGS_ENDPOINT = CONFIG_ENDPOINT;
+