@k-int/stripes-kint-components 4.4.0 → 4.4.1

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 4.4.1 2023-02-08
+  * CustomPropertiesSettings
+    * Added displayConditions which act in the same way as below, allowing for programatic turning on/off of access to certain actions
+  * Settings (Multiple components)
+    * Added allowEdit property, which defaults to `true`, and if false, does not render edit button for any appSetting
+    * Added allowGlobalEdit property to `useSettings` hook, which allows the programatic turning on/off of `allowEdit` for ALL settings. More granular control will currently have to be handled manually via `dynamicPageExclusions` and then manual setting up of SettingsPage components with the requisite `allowEdit` booleans controlled by the implementing software.
 ## 4.4.0 2023-02-08
   * Removed all cyclic imports, linting
   * ActionList

package/es/lib/CustomProperties/Config/CustomPropertiesSettings.js

@@ -44,12 +44,24 @@ var CustomPropertiesSettings = function CustomPropertiesSettings(_ref) {
     catchQueryCalls = _ref.catchQueryCalls,
     contextFilterOptions = _ref.contextFilterOptions,
     customPropertiesEndpoint = _ref.customPropertiesEndpoint,
+    _ref$displayCondition = _ref.displayConditions,
+    displayConditions = _ref$displayCondition === void 0 ? {
+      create: true,
+      delete: true,
+      edit: true
+    } : _ref$displayCondition,
     helpPopovers = _ref.helpPopovers,
     passedIntlKey = _ref.intlKey,
     passedIntlNS = _ref.intlNS,
     _ref$labelOverrides = _ref.labelOverrides,
     labelOverrides = _ref$labelOverrides === void 0 ? {} : _ref$labelOverrides,
     refdataEndpoint = _ref.refdataEndpoint;
+  var _displayConditions$cr = displayConditions.create,
+    createCondition = _displayConditions$cr === void 0 ? true : _displayConditions$cr,
+    _displayConditions$de = displayConditions.delete,
+    deleteCondition = _displayConditions$de === void 0 ? true : _displayConditions$de,
+    _displayConditions$ed = displayConditions.edit,
+    editCondition = _displayConditions$ed === void 0 ? true : _displayConditions$ed;
   var callout = (0, _react.useContext)(_core.CalloutContext);
   var queryClient = (0, _reactQuery.useQueryClient)();
   var _useState = (0, _react.useState)(),
@@ -175,7 +187,7 @@ var CustomPropertiesSettings = function CustomPropertiesSettings(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, {
       defaultWidth: "fill",
       id: "settings-customProperties.lookupPane",
-      lastMenu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      lastMenu: createCondition && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
         buttonStyle: "primary",
         marginBottom0: true,
         onClick: function onClick() {
@@ -204,34 +216,41 @@ var CustomPropertiesSettings = function CustomPropertiesSettings(_ref) {
     }), customProperty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, {
       actionMenu: function actionMenu(_ref2) {
         var onToggle = _ref2.onToggle;
-        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-          buttonStyle: "dropdownItem",
-          marginBottom0: true,
-          onClick: function onClick() {
-            return setMode(EDITING);
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
-            icon: "edit",
-            children: kintIntl.formatKintMessage({
-              id: 'edit',
-              overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.edit
+        var actionsArray = [];
+        if (editCondition) {
+          actionsArray.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            buttonStyle: "dropdownItem",
+            marginBottom0: true,
+            onClick: function onClick() {
+              return setMode(EDITING);
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
+              icon: "edit",
+              children: kintIntl.formatKintMessage({
+                id: 'edit',
+                overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.edit
+              })
             })
-          })
-        }, "".concat(customProperty.name, "-action-edit")), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-          buttonStyle: "dropdownItem",
-          marginBottom0: true,
-          onClick: function onClick() {
-            setDeleteModal(true);
-            onToggle();
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
-            icon: "trash",
-            children: kintIntl.formatKintMessage({
-              id: 'delete',
-              overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.delete
+          }, "".concat(customProperty.name, "-action-edit")));
+        }
+        if (deleteCondition) {
+          actionsArray.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            buttonStyle: "dropdownItem",
+            marginBottom0: true,
+            onClick: function onClick() {
+              setDeleteModal(true);
+              onToggle();
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
+              icon: "trash",
+              children: kintIntl.formatKintMessage({
+                id: 'delete',
+                overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.delete
+              })
             })
-          })
-        }, "".concat(customProperty.name, "-action-delete"))];
+          }, "".concat(customProperty.name, "-action-delete")));
+        }
+        return actionsArray !== null && actionsArray !== void 0 && actionsArray.length ? actionsArray : null;
       },
       defaultWidth: "fill",
       dismissible: true,
@@ -333,6 +352,11 @@ CustomPropertiesSettings.propTypes = {
     label: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.string])
   })),
   customPropertiesEndpoint: _propTypes.default.string,
+  displayConditions: _propTypes.default.shape({
+    create: _propTypes.default.bool,
+    delete: _propTypes.default.bool,
+    view: _propTypes.default.bool
+  }),
   helpPopovers: _propTypes.default.object,
   intlKey: _propTypes.default.string,
   intlNS: _propTypes.default.string,

package/es/lib/EditableSettingsList/EditableSettingsList.js

@@ -13,7 +13,9 @@ var _EditableSettingsListFieldArray = _interopRequireDefault(require("./Editable
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var EditableSettingsList = function EditableSettingsList(_ref) {
-  var data = _ref.data,
+  var _ref$allowEdit = _ref.allowEdit,
+    allowEdit = _ref$allowEdit === void 0 ? true : _ref$allowEdit,
+    data = _ref.data,
     initialValues = _ref.initialValues,
     passedIntlKey = _ref.intlKey,
     passedIntlNS = _ref.intlNS,
@@ -36,6 +38,7 @@ var EditableSettingsList = function EditableSettingsList(_ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
         onSubmit: handleSubmit,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
+          allowEdit: allowEdit,
           component: _EditableSettingsListFieldArray.default,
           data: data,
           intlKey: passedIntlKey,
@@ -50,7 +53,7 @@ var EditableSettingsList = function EditableSettingsList(_ref) {
   });
 };
 EditableSettingsList.propTypes = {
-  onSave: _propTypes.default.func,
+  allowEdit: _propTypes.default.bool,
   data: _propTypes.default.shape({
     refdatavalues: _propTypes.default.arrayOf(_propTypes.default.object)
   }),
@@ -58,7 +61,8 @@ EditableSettingsList.propTypes = {
   intlKey: _propTypes.default.string,
   intlNS: _propTypes.default.string,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.object]),
-  labelOverrides: _propTypes.default.object
+  labelOverrides: _propTypes.default.object,
+  onSave: _propTypes.default.func
 };
 var _default = EditableSettingsList;
 exports.default = _default;

package/es/lib/EditableSettingsList/EditableSettingsListFieldArray.js

@@ -17,7 +17,9 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var EditableSettingsListFieldArray = function EditableSettingsListFieldArray(_ref) {
-  var data = _ref.data,
+  var _ref$allowEdit = _ref.allowEdit,
+    allowEdit = _ref$allowEdit === void 0 ? true : _ref$allowEdit,
+    data = _ref.data,
     fields = _ref.fields,
     passedIntlKey = _ref.intlKey,
     passedIntlNS = _ref.intlNS,
@@ -30,6 +32,7 @@ var EditableSettingsListFieldArray = function EditableSettingsListFieldArray(_re
   };
   return fields.map(function (setting, i) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+      allowEdit: allowEdit,
       component: _SettingField.SettingField,
       "data-testid": "editableSettingsListFieldArray[".concat(i, "]"),
       intlKey: passedIntlKey,
@@ -46,6 +49,7 @@ var EditableSettingsListFieldArray = function EditableSettingsListFieldArray(_re
   });
 };
 EditableSettingsListFieldArray.propTypes = {
+  allowEdit: _propTypes.default.bool,
   fields: _propTypes.default.object,
   intlKey: _propTypes.default.string,
   intlNS: _propTypes.default.string,

package/es/lib/EditableSettingsList/SettingField/SettingField.js

@@ -30,7 +30,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var SettingField = function SettingField(settingFieldProps) {
-  var passedIntlKey = settingFieldProps.intlKey,
+  var _settingFieldProps$al = settingFieldProps.allowEdit,
+    allowEdit = _settingFieldProps$al === void 0 ? true : _settingFieldProps$al,
+    passedIntlKey = settingFieldProps.intlKey,
     passedIntlNS = settingFieldProps.intlNS,
     _settingFieldProps$la = settingFieldProps.labelOverrides,
     labelOverrides = _settingFieldProps$la === void 0 ? {} : _settingFieldProps$la,
@@ -129,16 +131,19 @@ var SettingField = function SettingField(settingFieldProps) {
     }) : kintIntl.formatKintMessage({
       id: 'edit'
     });
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-      marginBottom0: true,
-      onClick: function onClick(e) {
-        e.preventDefault();
-        return editing ? onSave().then(function () {
-          return setEditing(false);
-        }) : setEditing(true);
-      },
-      children: EditText
-    });
+    if (allowEdit) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        marginBottom0: true,
+        onClick: function onClick(e) {
+          e.preventDefault();
+          return editing ? onSave().then(function () {
+            return setEditing(false);
+          }) : setEditing(true);
+        },
+        children: EditText
+      });
+    }
+    return null;
   };
   var RenderFunction;
   if (editing === false) {
@@ -174,6 +179,7 @@ var SettingField = function SettingField(settingFieldProps) {
   });
 };
 SettingField.propTypes = {
+  allowEdit: _propTypes.default.bool,
   settingData: _propTypes.default.shape({
     refdatavalues: _propTypes.default.arrayOf(_propTypes.default.object),
     currentSetting: _propTypes.default.object,

package/es/lib/SettingPage/SettingPage.js

@@ -17,7 +17,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 // Importing directly here to avoid cyclic dependency
 
 var SettingPage = function SettingPage(_ref) {
-  var passedIntlKey = _ref.intlKey,
+  var _ref$allowEdit = _ref.allowEdit,
+    allowEdit = _ref$allowEdit === void 0 ? true : _ref$allowEdit,
+    passedIntlKey = _ref.intlKey,
     passedIntlNS = _ref.intlNS,
     _ref$labelOverrides = _ref.labelOverrides,
     labelOverrides = _ref$labelOverrides === void 0 ? {} : _ref$labelOverrides,
@@ -31,6 +33,7 @@ var SettingPage = function SettingPage(_ref) {
     handleSubmit = _useSettingSection.handleSubmit,
     settings = _useSettingSection.settings;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditableSettingsList.EditableSettingsList, {
+    allowEdit: allowEdit,
     initialValues: {
       'settings': settings
     },
@@ -43,6 +46,7 @@ var SettingPage = function SettingPage(_ref) {
   });
 };
 SettingPage.propTypes = {
+  allowEdit: _propTypes.default.bool,
   intlKey: _propTypes.default.string,
   intlNS: _propTypes.default.string,
   labelOverrides: _propTypes.default.object,

package/es/lib/settingsHooks/useSettings.js

@@ -28,7 +28,9 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var useSettings = function useSettings(_ref) {
-  var dynamicPageExclusions = _ref.dynamicPageExclusions,
+  var _ref$allowGlobalEdit = _ref.allowGlobalEdit,
+    allowGlobalEdit = _ref$allowGlobalEdit === void 0 ? true : _ref$allowGlobalEdit,
+    dynamicPageExclusions = _ref.dynamicPageExclusions,
     passedIntlKey = _ref.intlKey,
     passedIntlNS = _ref.intlNS,
     _ref$labelOverrides = _ref.labelOverrides,
@@ -72,6 +74,7 @@ var useSettings = function useSettings(_ref) {
           intlNS: passedIntlNS,
           sectionName: section,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingPage.SettingPage, _objectSpread({
+            allowEdit: allowGlobalEdit,
             intlKey: passedIntlKey,
             intlNS: passedIntlNS,
             labelOverrides: labelOverrides,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"

package/src/lib/CustomProperties/Config/CustomPropertiesSettings.js

@@ -25,12 +25,23 @@ const CustomPropertiesSettings = ({
   catchQueryCalls,
   contextFilterOptions,
   customPropertiesEndpoint,
+  displayConditions = {
+    create: true,
+    delete: true,
+    edit: true
+  },
   helpPopovers,
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,
   labelOverrides = {},
   refdataEndpoint,
 }) => {
+  const {
+    create: createCondition = true,
+    delete: deleteCondition = true,
+    edit: editCondition = true
+  } = displayConditions;
+
   const callout = useContext(CalloutContext);
   const queryClient = useQueryClient();
 
@@ -146,7 +157,7 @@ const CustomPropertiesSettings = ({
       <Pane
         defaultWidth="fill"
         id="settings-customProperties.lookupPane"
-        lastMenu={
+        lastMenu={createCondition &&
           <Button
             buttonStyle="primary"
             marginBottom0
@@ -180,47 +191,57 @@ const CustomPropertiesSettings = ({
       </Pane>
       {customProperty &&
         <Pane
-          actionMenu={({ onToggle }) => (
-            [
-              <Button
-                key={`${customProperty.name}-action-edit`}
-                buttonStyle="dropdownItem"
-                marginBottom0
-                onClick={() => setMode(EDITING)}
-              >
-                <Icon icon="edit">
-                  {
-                    kintIntl.formatKintMessage(
-                      {
-                        id: 'edit',
-                        overrideValue: labelOverrides?.edit,
-                      }
-                    )
-                  }
-                </Icon>
-              </Button>,
-              <Button
-                key={`${customProperty.name}-action-delete`}
-                buttonStyle="dropdownItem"
-                marginBottom0
-                onClick={() => {
-                  setDeleteModal(true);
-                  onToggle();
-                }}
-              >
-                <Icon icon="trash">
-                  {
-                    kintIntl.formatKintMessage(
-                      {
-                        id: 'delete',
-                        overrideValue: labelOverrides?.delete,
-                      }
-                    )
-                  }
-                </Icon>
-              </Button>
-            ]
-          )}
+          actionMenu={({ onToggle }) => {
+            const actionsArray = [];
+            if (editCondition) {
+              actionsArray.push(
+                <Button
+                  key={`${customProperty.name}-action-edit`}
+                  buttonStyle="dropdownItem"
+                  marginBottom0
+                  onClick={() => setMode(EDITING)}
+                >
+                  <Icon icon="edit">
+                    {
+                      kintIntl.formatKintMessage(
+                        {
+                          id: 'edit',
+                          overrideValue: labelOverrides?.edit,
+                        }
+                      )
+                    }
+                  </Icon>
+                </Button>
+              );
+            }
+
+            if (deleteCondition) {
+              actionsArray.push(
+                <Button
+                  key={`${customProperty.name}-action-delete`}
+                  buttonStyle="dropdownItem"
+                  marginBottom0
+                  onClick={() => {
+                    setDeleteModal(true);
+                    onToggle();
+                  }}
+                >
+                  <Icon icon="trash">
+                    {
+                      kintIntl.formatKintMessage(
+                        {
+                          id: 'delete',
+                          overrideValue: labelOverrides?.delete,
+                        }
+                      )
+                    }
+                  </Icon>
+                </Button>
+              );
+            }
+
+            return (actionsArray?.length ? actionsArray : null);
+          }}
           defaultWidth="fill"
           dismissible
           id="settings-customProperties-viewPane"
@@ -349,6 +370,11 @@ CustomPropertiesSettings.propTypes = {
     ])
   })),
   customPropertiesEndpoint: PropTypes.string,
+  displayConditions: PropTypes.shape({
+    create: PropTypes.bool,
+    delete: PropTypes.bool,
+    view: PropTypes.bool,
+  }),
   helpPopovers: PropTypes.object,
   intlKey: PropTypes.string,
   intlNS: PropTypes.string,

package/src/lib/CustomProperties/Config/README.md

@@ -23,6 +23,7 @@ ctx | `<moduleIntlKey>.customProperties.ctx` | Override for the display of field
 deleteError | `<moduleIntlKey>customProperties.config.delete.errorMessage` | Override for the default callout message shown when a custom property fails to delete. Accepts a function to which it will provide the error message and the customProperty in question. | error; The error on delete, label: The label of the custom property |
 defaultVisibility | `<moduleIntlKey>.customProperties.defaultVisibility` | Override for the display of field "defaultVisibility" | | |
 description | `<moduleIntlKey>.customProperties.description` | Override for the display of field "description" | | |
+displayConditions | object | An object of the form `{delete: false, edit: true, create: true}`, with keys `delete`, `edit` and `create`, and a boolean value. These will each default to true if not specified. These booleans will act as an additional check before rendering the actions for create/delete/edit, as well as whether or not to render the action button in the view pane at all. | `{delete: true, edit: true, create: true}` | ✕ |
 editModalTitle | `<moduleIntlKey>.customProperties.config.editModal` | Override for the modal header on editing a custom property | name: Label of custom property, falling back to name. |
 label | `<moduleIntlKey>.customProperties.label` | Override for the display of field "label" | | |
 name | `<moduleIntlKey>.customProperties.name` | Override for the display of field "name" | | |newModalTitle | `<moduleIntlKey>.customProperties.config.newModal` | Override for the modal header on attempting to create a custom property | "Edit custom property" |

package/src/lib/EditableRefdataList/README.md

@@ -21,6 +21,6 @@ afterQueryCalls | object | An object of the form `{delete: func1, put: func2}` w
 allowSpecial | boolean | A boolean to turn off/on the stripping out of special characters and replacing them with `_`. Generally turning this on will cause problems with queries to KIWT endpoints and internally with Stripes filters, where a refdata value includes `&&`, `||`, `\` or `"`. | false | ✕ |
 catchQueryCalls | object | An object of the form `{delete: func1, put: func2}` where `func1`/`func2` are functions to be called with a HTTPError object when the `delete`/`put` calls fail. | `{delete: <Fires a callout of the format "<strong>Error: {label}</strong> was not deleted. {error}">}` | | ✕ |
 desc | String | A string corresponding to the refdataValue category, usually of the form `DomainClass.Field`. See `useRefdata` for more information. | | ✕ |
-endpoint | String | A string containing the path to the endpoint for refdata | | ✓ |
 displayConditions | object | An object of the form `{delete: false, edit: true, create: true}`, with keys `delete`, `edit` and `create`, and a boolean value. These will each default to true if not specified. These booleans will act as an additional check before rendering the actions for create/delete/edit, as well as whether or not to render the actions column at all. | `{delete: true, edit: true, create: true}` | ✕ |
+endpoint | String | A string containing the path to the endpoint for refdata | | ✓ |
 labelOverrides | object | An object containing translation overrides. Currently accepts: `deleteError: (err, object) => { ... output a callout message }`. | | ✕ |

package/src/lib/EditableSettingsList/EditableSettingsList.js

@@ -7,6 +7,7 @@ import arrayMutators from 'final-form-arrays';
 import EditableSettingsListFieldArray from './EditableSettingsListFieldArray';
 
 const EditableSettingsList = ({
+  allowEdit = true, // A gloabal boolean permission to turn on/off editing of all appSettings in the frontend
   data,
   initialValues,
   intlKey: passedIntlKey,
@@ -28,6 +29,7 @@ const EditableSettingsList = ({
       {({ handleSubmit }) => (
         <form onSubmit={handleSubmit}>
           <FieldArray
+            allowEdit={allowEdit}
             component={EditableSettingsListFieldArray}
             data={data}
             intlKey={passedIntlKey}
@@ -44,7 +46,7 @@ const EditableSettingsList = ({
 };
 
 EditableSettingsList.propTypes = {
-  onSave: PropTypes.func,
+  allowEdit: PropTypes.bool,
   data: PropTypes.shape({
     refdatavalues: PropTypes.arrayOf(PropTypes.object)
   }),
@@ -57,6 +59,7 @@ EditableSettingsList.propTypes = {
     PropTypes.object
   ]),
   labelOverrides: PropTypes.object,
+  onSave: PropTypes.func,
 };
 
 export default EditableSettingsList;

package/src/lib/EditableSettingsList/EditableSettingsListFieldArray.js

@@ -5,6 +5,7 @@ import { Field } from 'react-final-form';
 import { SettingField } from './SettingField';
 
 const EditableSettingsListFieldArray = ({
+  allowEdit = true,
   data,
   fields,
   intlKey: passedIntlKey,
@@ -22,6 +23,7 @@ const EditableSettingsListFieldArray = ({
       return (
         <Field
           key={setting}
+          allowEdit={allowEdit}
           component={SettingField}
           data-testid={`editableSettingsListFieldArray[${i}]`}
           intlKey={passedIntlKey}
@@ -40,6 +42,7 @@ const EditableSettingsListFieldArray = ({
 };
 
 EditableSettingsListFieldArray.propTypes = {
+  allowEdit: PropTypes.bool,
   fields: PropTypes.object,
   intlKey: PropTypes.string,
   intlNS: PropTypes.string,

package/src/lib/EditableSettingsList/SettingField/SettingField.js

@@ -17,6 +17,7 @@ import renderHelpTextCSS from '../../../../styles/renderHelpText.css';
 
 const SettingField = (settingFieldProps) => {
   const {
+    allowEdit = true,
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
@@ -81,21 +82,24 @@ const SettingField = (settingFieldProps) => {
       kintIntl.formatKintMessage({
         id: 'edit'
       });
-    return (
-      <Button
-        marginBottom0
-        onClick={(e) => {
-          e.preventDefault();
-          return (
-            editing ?
-              onSave().then(() => setEditing(false)) :
-              setEditing(true)
-          );
-        }}
-      >
-        {EditText}
-      </Button>
-    );
+    if (allowEdit) {
+      return (
+        <Button
+          marginBottom0
+          onClick={(e) => {
+            e.preventDefault();
+            return (
+              editing ?
+                onSave().then(() => setEditing(false)) :
+                setEditing(true)
+            );
+          }}
+        >
+          {EditText}
+        </Button>
+      );
+    }
+    return null;
   };
 
   let RenderFunction;
@@ -146,6 +150,7 @@ const SettingField = (settingFieldProps) => {
 };
 
 SettingField.propTypes = {
+  allowEdit: PropTypes.bool,
   settingData: PropTypes.shape({
     refdatavalues: PropTypes.arrayOf(PropTypes.object),
     currentSetting: PropTypes.object,

package/src/lib/SettingPage/SettingPage.js

@@ -7,6 +7,7 @@ import { SettingsContext } from '../contexts';
 import useSettingSection from '../settingsHooks/useSettingSection';
 
 const SettingPage = ({
+  allowEdit = true,
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,
   labelOverrides = {},
@@ -21,6 +22,7 @@ const SettingPage = ({
 
   return (
     <EditableSettingsList
+      allowEdit={allowEdit}
       initialValues={{ 'settings': settings }}
       intlKey={passedIntlKey}
       intlNS={passedIntlNS}
@@ -33,6 +35,7 @@ const SettingPage = ({
 };
 
 SettingPage.propTypes = {
+  allowEdit: PropTypes.bool,
   intlKey: PropTypes.string,
   intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,

package/src/lib/settingsHooks/useSettings.js

@@ -13,6 +13,7 @@ import { generateKiwtQueryParams, sortByLabel, toCamelCase } from '../utils';
 import { useKintIntl, useIntlKey } from '../hooks';
 
 const useSettings = ({
+  allowGlobalEdit = true,
   dynamicPageExclusions,
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,
@@ -56,6 +57,7 @@ const useSettings = ({
             sectionName={section}
           >
             <SettingPage
+              allowEdit={allowGlobalEdit}
               intlKey={passedIntlKey}
               intlNS={passedIntlNS}
               labelOverrides={labelOverrides}