@k-int/stripes-kint-components 1.3.0 → 1.7.0

package/es/lib/EditableSettingsList/EditableSettingsList.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactFinalFormArrays = require("react-final-form-arrays");
+
+var _reactFinalForm = require("react-final-form");
+
+var _finalFormArrays = _interopRequireDefault(require("final-form-arrays"));
+
+var _EditableSettingsListFieldArray = _interopRequireDefault(require("./EditableSettingsListFieldArray"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+
+var EditableSettingsList = function EditableSettingsList(_ref) {
+  var data = _ref.data,
+      initialValues = _ref.initialValues,
+      onSave = _ref.onSave;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Form, {
+    enableReinitialize: true,
+    initialValues: initialValues,
+    keepDirtyOnReinitialize: true,
+    mutators: _finalFormArrays.default,
+    navigationCheck: true,
+    onSubmit: onSave,
+    subscription: {
+      value: true
+    },
+    children: function children(_ref2) {
+      var handleSubmit = _ref2.handleSubmit;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
+        onSubmit: handleSubmit,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
+          component: _EditableSettingsListFieldArray.default,
+          data: data,
+          name: "settings",
+          onSave: onSave
+        })
+      });
+    }
+  });
+};
+
+EditableSettingsList.propTypes = {
+  onSave: _propTypes.default.func,
+  data: _propTypes.default.shape({
+    refdatavalues: _propTypes.default.arrayOf(_propTypes.default.object)
+  }),
+  initialValues: _propTypes.default.object
+};
+var _default = EditableSettingsList;
+var _default2 = _default;
+exports.default = _default2;
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(EditableSettingsList, "EditableSettingsList", "/home/ethan/FolioModules/stripes-kint-components/src/lib/EditableSettingsList/EditableSettingsList.js");
+  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/EditableSettingsList/EditableSettingsList.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/es/lib/EditableSettingsList/EditableSettingsListFieldArray.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactFinalForm = require("react-final-form");
+
+var _SettingField = require("./SettingField");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+
+var EditableSettingsListFieldArray = function EditableSettingsListFieldArray(_ref) {
+  var data = _ref.data,
+      fields = _ref.fields,
+      onSave = _ref.onSave;
+
+  var handleSave = function handleSave(index) {
+    var setting = fields.value[index];
+    return onSave(setting);
+  };
+
+  return fields.map(function (setting, i) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+      component: _SettingField.SettingField,
+      "data-testid": "editableSettingsListFieldArray[".concat(i, "]"),
+      name: setting,
+      onSave: function onSave() {
+        return handleSave(i);
+      },
+      settingData: _objectSpread({
+        currentSetting: fields.value[i]
+      }, data)
+    }, setting);
+  });
+};
+
+EditableSettingsListFieldArray.propTypes = {
+  fields: _propTypes.default.object,
+  onSave: _propTypes.default.func,
+  data: _propTypes.default.shape({
+    refdatavalues: _propTypes.default.arrayOf(_propTypes.default.object)
+  }),
+  mutators: _propTypes.default.object,
+  initialValues: _propTypes.default.object
+};
+var _default = EditableSettingsListFieldArray;
+var _default2 = _default;
+exports.default = _default2;
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(EditableSettingsListFieldArray, "EditableSettingsListFieldArray", "/home/ethan/FolioModules/stripes-kint-components/src/lib/EditableSettingsList/EditableSettingsListFieldArray.js");
+  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/EditableSettingsList/EditableSettingsListFieldArray.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/es/lib/EditableSettingsList/EditableSettingsListFieldArray.test.js

@@ -0,0 +1,181 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+require("@folio/stripes-erm-components/test/jest/__mock__");
+
+var _helpers = require("@folio/stripes-erm-components/test/jest/helpers");
+
+var _reactFinalFormArrays = require("react-final-form-arrays");
+
+var _EditableSettingsListFieldArray = _interopRequireDefault(require("./EditableSettingsListFieldArray"));
+
+var _helpers2 = require("../../../test/jest/helpers");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+
+var onSubmit = jest.fn();
+jest.mock('./SettingField', function () {
+  return {
+    SettingField: function SettingField() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "SettingField"
+      });
+    }
+  };
+});
+var settings = [{
+  id: 'ff8081817d94374a017d94449a660049',
+  key: 'S3BucketName',
+  section: 'fileStorage',
+  settingType: 'String',
+  value: 'diku-shared'
+}];
+var multipleSettings = [{
+  id: '2c91809c7da2041f017da20b99000045',
+  vocab: 'FileStorageEngines',
+  section: 'fileStorage',
+  value: 'DB',
+  settingType: 'String',
+  key: 'storageEngine'
+}, {
+  id: '2c91809c7da2041f017da20b99080046',
+  section: 'fileStorage',
+  value: 'http://s3_endpoint_host.domain:9000',
+  settingType: 'String',
+  key: 'S3Endpoint'
+}, {
+  id: '2c91809c7da2041f017da20b990d0047',
+  section: 'fileStorage',
+  value: 'ACCESS_KEY',
+  settingType: 'String',
+  key: 'S3AccessKey'
+}];
+describe('EditableSettingsListFieldArray', function () {
+  describe('with empty initial values', function () {
+    var renderComponent;
+    beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              renderComponent = (0, _helpers2.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_helpers.TestForm, {
+                initialValues: {},
+                onSubmit: onSubmit,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
+                  component: _EditableSettingsListFieldArray.default,
+                  name: "settings"
+                })
+              }));
+
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    it('renders empty field', function () {
+      var _renderComponent = renderComponent,
+          queryAllByTestId = _renderComponent.queryAllByTestId;
+      expect(queryAllByTestId(/editableSettingsListFieldArray\[.*\]/).length).toEqual(0);
+    });
+  });
+  describe('with initial value set', function () {
+    var renderComponent;
+    beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              renderComponent = (0, _helpers2.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_helpers.TestForm, {
+                initialValues: {
+                  settings: settings
+                },
+                onSubmit: onSubmit,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
+                  component: _EditableSettingsListFieldArray.default,
+                  name: "settings"
+                })
+              }));
+
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    it('renders the SettingField component', function () {
+      var _renderComponent2 = renderComponent,
+          getByText = _renderComponent2.getByText;
+      expect(getByText('SettingField')).toBeInTheDocument();
+    });
+  });
+  describe('with multiple initial values set', function () {
+    var renderComponent;
+    beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              renderComponent = (0, _helpers2.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_helpers.TestForm, {
+                initialValues: {
+                  settings: multipleSettings
+                },
+                onSubmit: onSubmit,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
+                  component: _EditableSettingsListFieldArray.default,
+                  name: "settings"
+                })
+              }));
+
+            case 1:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    })));
+    it('renders the correct number of SettingField components', function () {
+      var _renderComponent3 = renderComponent,
+          getAllByText = _renderComponent3.getAllByText;
+      expect(getAllByText('SettingField').length).toEqual(multipleSettings.length);
+    });
+  });
+});
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(onSubmit, "onSubmit", "/home/ethan/FolioModules/stripes-kint-components/src/lib/EditableSettingsList/EditableSettingsListFieldArray.test.js");
+  reactHotLoader.register(settings, "settings", "/home/ethan/FolioModules/stripes-kint-components/src/lib/EditableSettingsList/EditableSettingsListFieldArray.test.js");
+  reactHotLoader.register(multipleSettings, "multipleSettings", "/home/ethan/FolioModules/stripes-kint-components/src/lib/EditableSettingsList/EditableSettingsListFieldArray.test.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/es/lib/{Settings → EditableSettingsList/SettingField}/EditSettingValue.js

@@ -3,17 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactIntl = require("react-intl");
+
 var _reactFinalForm = require("react-final-form");
 
 var _components = require("@folio/stripes/components");
 
-var _RefdataButtons = _interopRequireDefault(require("./RefdataButtons"));
+var _RefdataButtons = _interopRequireDefault(require("../../RefdataButtons"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
@@ -27,11 +38,22 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 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 __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+
 var EditSettingValue = function EditSettingValue(props) {
   var input = props.input,
       setting = props.currentSetting,
       refdata = props.refdata,
       templates = props.templates;
+  var intl = (0, _reactIntl.useIntl)();
+  var fieldLabel = intl.formatMessage({
+    id: 'stripes-kint-components.settings.valueFor',
+    values: {
+      name: setting.key
+    }
+  });
 
   switch (setting.settingType) {
     case 'Refdata':
@@ -40,17 +62,19 @@ var EditSettingValue = function EditSettingValue(props) {
       var RefdataComponent = _components.Select;
 
       if (refdata.length > 0 && refdata.length <= 4) {
-        RefdataComponent = _RefdataButtons["default"];
+        RefdataComponent = _RefdataButtons.default;
       }
 
-      return /*#__PURE__*/_react["default"].createElement(_reactFinalForm.Field, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+        "aria-label": fieldLabel,
         component: RefdataComponent,
         dataOptions: refdata,
         name: "".concat(input.name, ".value")
       });
 
     case 'Password':
-      return /*#__PURE__*/_react["default"].createElement(_reactFinalForm.Field, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+        "aria-label": fieldLabel,
         autoFocus: true,
         component: _components.TextField,
         name: "".concat(input.name, ".value"),
@@ -74,7 +98,8 @@ var EditSettingValue = function EditSettingValue(props) {
             label: t.name
           };
         })));
-        return /*#__PURE__*/_react["default"].createElement(_reactFinalForm.Field, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+          "aria-label": fieldLabel,
           component: _components.Select,
           dataOptions: selectTemplateValues,
           name: "".concat(input.name, ".value"),
@@ -86,7 +111,8 @@ var EditSettingValue = function EditSettingValue(props) {
 
     default:
       // If in doubt, go with String
-      return /*#__PURE__*/_react["default"].createElement(_reactFinalForm.Field, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+        "aria-label": fieldLabel,
         autoFocus: true,
         component: _components.TextField,
         name: "".concat(input.name, ".value"),
@@ -98,5 +124,42 @@ var EditSettingValue = function EditSettingValue(props) {
   }
 };
 
+__signature__(EditSettingValue, "useIntl{intl}", function () {
+  return [_reactIntl.useIntl];
+});
+
+EditSettingValue.propTypes = {
+  currentSetting: _propTypes.default.shape({
+    settingType: _propTypes.default.string
+  }),
+  input: _propTypes.default.shape({
+    name: _propTypes.default.string
+  }),
+  refdata: _propTypes.default.arrayOf(_propTypes.default.object),
+  templates: _propTypes.default.arrayOf(_propTypes.default.shape({
+    name: _propTypes.default.string,
+    id: _propTypes.default.string
+  }))
+};
 var _default = EditSettingValue;
-exports["default"] = _default;
+var _default2 = _default;
+exports.default = _default2;
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(EditSettingValue, "EditSettingValue", "/home/ethan/FolioModules/stripes-kint-components/src/lib/EditableSettingsList/SettingField/EditSettingValue.js");
+  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/EditableSettingsList/SettingField/EditSettingValue.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();