@webiny/app-headless-cms 5.29.0 → 5.30.0

package/admin/plugins/fieldRenderers/number/numberInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","getBind","Bind","bindProps","value","onChange","label","placeholderText","helpText"],"sources":["numberInput.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { i18n } from \"@webiny/app/i18n\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/number\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-number\",\n    renderer: {\n        rendererName: \"number-input\",\n        name: t`Number Input`,\n        description: t`Renders a simple input with its type set to \"number\".`,\n        canUse({ field }) {\n            return (\n                field.type === \"number\" &&\n                !field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render({ field, getBind }) {\n            const Bind = getBind();\n\n            return (\n                <Bind>\n                    {bindProps => {\n                        return (\n                            <Input\n                                {...bindProps}\n                                onChange={value => {\n                                    return bindProps.onChange(value);\n                                }}\n                                label={field.label}\n                                placeholder={field.placeholderText}\n                                description={field.helpText}\n                                type=\"number\"\n                            />\n                        );\n                    }}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,sCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,kCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,cADR;IAENF,IAAI,EAAEL,CAAF,+FAFE;IAGNQ,WAAW,EAAER,CAAF,4IAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OACIA,KAAK,CAACN,IAAN,KAAe,QAAf,IACA,CAACM,KAAK,CAACC,cADP,IAEA,CAAC,IAAAC,YAAA,EAAIF,KAAJ,EAAW,0BAAX,CAHL;IAKH,CAVK;IAWNG,MAXM,yBAWqB;MAAA,IAAlBH,KAAkB,SAAlBA,KAAkB;MAAA,IAAXI,OAAW,SAAXA,OAAW;MACvB,IAAMC,IAAI,GAAGD,OAAO,EAApB;MAEA,oBACI,6BAAC,IAAD,QACK,UAAAE,SAAS,EAAI;QACV,oBACI,6BAAC,YAAD,oBACQA,SADR;UAEI,QAAQ,EAAE,kBAAAC,KAAK,EAAI;YACf,OAAOD,SAAS,CAACE,QAAV,CAAmBD,KAAnB,CAAP;UACH,CAJL;UAKI,KAAK,EAAEP,KAAK,CAACS,KALjB;UAMI,WAAW,EAAET,KAAK,CAACU,eANvB;UAOI,WAAW,EAAEV,KAAK,CAACW,QAPvB;UAQI,IAAI,EAAC;QART,GADJ;MAYH,CAdL,CADJ;IAkBH;EAhCK;AAH+B,CAA7C;eAuCelB,M"}
+{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","getBind","Bind","bindProps","value","onChange","label","placeholderText","helpText"],"sources":["numberInput.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { i18n } from \"@webiny/app/i18n\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/number\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-number\",\n    renderer: {\n        rendererName: \"number-input\",\n        name: t`Number Input`,\n        description: t`Renders a simple input with its type set to \"number\".`,\n        canUse({ field }) {\n            return (\n                field.type === \"number\" &&\n                !field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render({ field, getBind }) {\n            const Bind = getBind();\n\n            return (\n                <Bind>\n                    {bindProps => {\n                        return (\n                            <Input\n                                {...bindProps}\n                                onChange={value => {\n                                    return bindProps.onChange(value);\n                                }}\n                                label={field.label}\n                                placeholder={field.placeholderText}\n                                description={field.helpText}\n                                type=\"number\"\n                                data-testid={`fr.input.number.${field.label}`}\n                            />\n                        );\n                    }}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,sCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,kCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,cADR;IAENF,IAAI,EAAEL,CAAF,+FAFE;IAGNQ,WAAW,EAAER,CAAF,4IAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OACIA,KAAK,CAACN,IAAN,KAAe,QAAf,IACA,CAACM,KAAK,CAACC,cADP,IAEA,CAAC,IAAAC,YAAA,EAAIF,KAAJ,EAAW,0BAAX,CAHL;IAKH,CAVK;IAWNG,MAXM,yBAWqB;MAAA,IAAlBH,KAAkB,SAAlBA,KAAkB;MAAA,IAAXI,OAAW,SAAXA,OAAW;MACvB,IAAMC,IAAI,GAAGD,OAAO,EAApB;MAEA,oBACI,6BAAC,IAAD,QACK,UAAAE,SAAS,EAAI;QACV,oBACI,6BAAC,YAAD,oBACQA,SADR;UAEI,QAAQ,EAAE,kBAAAC,KAAK,EAAI;YACf,OAAOD,SAAS,CAACE,QAAV,CAAmBD,KAAnB,CAAP;UACH,CAJL;UAKI,KAAK,EAAEP,KAAK,CAACS,KALjB;UAMI,WAAW,EAAET,KAAK,CAACU,eANvB;UAOI,WAAW,EAAEV,KAAK,CAACW,QAPvB;UAQI,IAAI,EAAC,QART;UASI,yCAAgCX,KAAK,CAACS,KAAtC;QATJ,GADJ;MAaH,CAfL,CADJ;IAmBH;EAjCK;AAH+B,CAA7C;eAwCehB,M"}

package/admin/plugins/fieldRenderers/object/StyledComponents.d.ts

@@ -2,3 +2,5 @@ export declare const fieldsWrapperStyle: string;
 export declare const dynamicSectionTitleStyle: string;
 export declare const dynamicSectionGridStyle: string;
 export declare const fieldsGridStyle: string;
+export declare const ObjectItem: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const ItemHighLight: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;

package/admin/plugins/fieldRenderers/object/StyledComponents.js

@@ -1,9 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fieldsWrapperStyle = exports.fieldsGridStyle = exports.dynamicSectionTitleStyle = exports.dynamicSectionGridStyle = void 0;
+exports.fieldsWrapperStyle = exports.fieldsGridStyle = exports.dynamicSectionTitleStyle = exports.dynamicSectionGridStyle = exports.ObjectItem = exports.ItemHighLight = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _emotion = require("emotion");
 
@@ -14,4 +18,35 @@ exports.dynamicSectionTitleStyle = dynamicSectionTitleStyle;
 var dynamicSectionGridStyle = /*#__PURE__*/(0, _emotion.css)("& > .mdc-layout-grid__inner{grid-gap:8px;}label:dynamicSectionGridStyle;");
 exports.dynamicSectionGridStyle = dynamicSectionGridStyle;
 var fieldsGridStyle = /*#__PURE__*/(0, _emotion.css)("&.mdc-layout-grid{padding:8px;}label:fieldsGridStyle;");
-exports.fieldsGridStyle = fieldsGridStyle;
+exports.fieldsGridStyle = fieldsGridStyle;
+var ObjectItem = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "ObjectItem",
+  target: "efe1kdz0"
+})("position:relative;");
+exports.ObjectItem = ObjectItem;
+var ItemHighLight = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "efe1kdz1",
+  label: "ItemHighLight"
+})({
+  "&": {
+    opacity: 0,
+    animation: "wf-blink-in 1s",
+    border: "2px solid var(--mdc-theme-secondary)",
+    boxShadow: "0 0 15px var(--mdc-theme-secondary)",
+    backgroundColor: "rgba(42, 217, 134, 0.25)",
+    borderRadius: "2px",
+    position: "absolute",
+    top: 0,
+    left: -12,
+    right: -8,
+    bottom: 0,
+    zIndex: 1,
+    pointerEvents: "none"
+  },
+  "@keyframes wf-blink-in": {
+    "40%": {
+      opacity: 1
+    }
+  }
+});
+exports.ItemHighLight = ItemHighLight;

package/admin/plugins/fieldRenderers/object/StyledComponents.js.map

@@ -1 +1 @@
-{"version":3,"names":["fieldsWrapperStyle","css","dynamicSectionTitleStyle","dynamicSectionGridStyle","fieldsGridStyle"],"sources":["StyledComponents.ts"],"sourcesContent":["import { css } from \"emotion\";\n\nexport const fieldsWrapperStyle = css`\n    border-left: 2px solid var(--mdc-theme-on-background);\n    padding-left: 16px;\n\n    &:focus-within {\n        border-color: var(--mdc-theme-primary);\n    }\n`;\n\nexport const dynamicSectionTitleStyle = css`\n    margin-top: 24px;\n`;\n\nexport const dynamicSectionGridStyle = css`\n    & > .mdc-layout-grid__inner {\n        grid-gap: 8px;\n    }\n`;\n\nexport const fieldsGridStyle = css`\n    &.mdc-layout-grid {\n        padding: 8px;\n    }\n`;\n"],"mappings":";;;;;;;AAAA;;AAEO,IAAMA,kBAAkB,oBAAGC,YAAH,2JAAxB;;AASA,IAAMC,wBAAwB,oBAAGD,YAAH,oDAA9B;;AAIA,IAAME,uBAAuB,oBAAGF,YAAH,6EAA7B;;AAMA,IAAMG,eAAe,oBAAGH,YAAH,0DAArB"}
+{"version":3,"names":["fieldsWrapperStyle","css","dynamicSectionTitleStyle","dynamicSectionGridStyle","fieldsGridStyle","ObjectItem","styled","ItemHighLight","opacity","animation","border","boxShadow","backgroundColor","borderRadius","position","top","left","right","bottom","zIndex","pointerEvents"],"sources":["StyledComponents.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\n\nexport const fieldsWrapperStyle = css`\n    border-left: 2px solid var(--mdc-theme-on-background);\n    padding-left: 16px;\n\n    &:focus-within {\n        border-color: var(--mdc-theme-primary);\n    }\n`;\n\nexport const dynamicSectionTitleStyle = css`\n    margin-top: 24px;\n`;\n\nexport const dynamicSectionGridStyle = css`\n    & > .mdc-layout-grid__inner {\n        grid-gap: 8px;\n    }\n`;\n\nexport const fieldsGridStyle = css`\n    &.mdc-layout-grid {\n        padding: 8px;\n    }\n`;\n\nexport const ObjectItem = styled.div`\n    position: relative;\n`;\n\nexport const ItemHighLight = styled(\"div\")({\n    \"&\": {\n        opacity: 0,\n        animation: \"wf-blink-in 1s\",\n        border: \"2px solid var(--mdc-theme-secondary)\",\n        boxShadow: \"0 0 15px var(--mdc-theme-secondary)\",\n        backgroundColor: \"rgba(42, 217, 134, 0.25)\",\n        borderRadius: \"2px\",\n        position: \"absolute\",\n        top: 0,\n        left: -12,\n        right: -8,\n        bottom: 0,\n        zIndex: 1,\n        pointerEvents: \"none\"\n    },\n    \"@keyframes wf-blink-in\": { \"40%\": { opacity: 1 } }\n});\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEO,IAAMA,kBAAkB,oBAAGC,YAAH,2JAAxB;;AASA,IAAMC,wBAAwB,oBAAGD,YAAH,oDAA9B;;AAIA,IAAME,uBAAuB,oBAAGF,YAAH,6EAA7B;;AAMA,IAAMG,eAAe,oBAAGH,YAAH,0DAArB;;AAMA,IAAMI,UAAU,oBAAGC,eAAH;EAAA;EAAA;AAAA,wBAAhB;;AAIA,IAAMC,aAAa,oBAAGD,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACvC,KAAK;IACDE,OAAO,EAAE,CADR;IAEDC,SAAS,EAAE,gBAFV;IAGDC,MAAM,EAAE,sCAHP;IAIDC,SAAS,EAAE,qCAJV;IAKDC,eAAe,EAAE,0BALhB;IAMDC,YAAY,EAAE,KANb;IAODC,QAAQ,EAAE,UAPT;IAQDC,GAAG,EAAE,CARJ;IASDC,IAAI,EAAE,CAAC,EATN;IAUDC,KAAK,EAAE,CAAC,CAVP;IAWDC,MAAM,EAAE,CAXP;IAYDC,MAAM,EAAE,CAZP;IAaDC,aAAa,EAAE;EAbd,CADkC;EAgBvC,0BAA0B;IAAE,OAAO;MAAEZ,OAAO,EAAE;IAAX;EAAT;AAhBa,CAAjB,CAAnB"}

package/admin/plugins/fieldRenderers/object/arrow_drop_down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8.71 11.71l2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71z"/></svg>

package/admin/plugins/fieldRenderers/object/arrow_drop_up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8.71 12.29L11.3 9.7c.39-.39 1.02-.39 1.41 0l2.59 2.59c.63.63.18 1.71-.71 1.71H9.41c-.89 0-1.33-1.08-.7-1.71z"/></svg>

package/admin/plugins/fieldRenderers/object/multipleObjects.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,15 +11,17 @@ exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _i18n = require("@webiny/app/i18n");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _DynamicSection = _interopRequireDefault(require("../DynamicSection"));
+var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
-var _Fields = require("../../../components/ContentEntryForm/Fields");
+var _react = _interopRequireWildcard(require("react"));
 
-var _close = require("../../../icons/close.svg");
+var _shortid = _interopRequireDefault(require("shortid"));
+
+var _i18n = require("@webiny/app/i18n");
 
 var _Button = require("@webiny/ui/Button");
 
@@ -27,6 +31,16 @@ var _FormElementMessage = require("@webiny/ui/FormElementMessage");
 
 var _Typography = require("@webiny/ui/Typography");
 
+var _DynamicSection = _interopRequireDefault(require("../DynamicSection"));
+
+var _Fields = require("../../../components/ContentEntryForm/Fields");
+
+var _close = require("../../../icons/close.svg");
+
+var _arrow_drop_up = require("./arrow_drop_up.svg");
+
+var _arrow_drop_down = require("./arrow_drop_down.svg");
+
 var _Accordion = _interopRequireDefault(require("../Accordion"));
 
 var _StyledComponents = require("./StyledComponents");
@@ -35,6 +49,85 @@ var _templateObject, _templateObject2;
 
 var t = _i18n.i18n.ns("app-headless-cms/admin/fields/text");
 
+var Actions = function Actions(_ref) {
+  var setHighlightIndex = _ref.setHighlightIndex,
+      bind = _ref.bind,
+      index = _ref.index;
+  return index > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_arrow_drop_down.ReactComponent, null),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      bind.field.moveValueDown(index);
+      setHighlightIndex(function (map) {
+        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index + 1, _shortid.default.generate()));
+      });
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_arrow_drop_up.ReactComponent, null),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      bind.field.moveValueUp(index);
+      setHighlightIndex(function (map) {
+        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index - 1, _shortid.default.generate()));
+      });
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_close.ReactComponent, null),
+    onClick: function onClick() {
+      return bind.field.removeValue(index);
+    }
+  })) : null;
+};
+
+var ObjectsRenderer = function ObjectsRenderer(props) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      highlightMap = _useState2[0],
+      setHighlightIndex = _useState2[1];
+
+  var field = props.field,
+      contentModel = props.contentModel;
+  return /*#__PURE__*/_react.default.createElement(_DynamicSection.default, Object.assign({}, props, {
+    emptyValue: {},
+    showLabel: false,
+    renderTitle: function renderTitle(value) {
+      return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+        span: 12,
+        className: _StyledComponents.dynamicSectionTitleStyle
+      }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "headline5"
+      }, "".concat(field.label, " ").concat(value.length ? "(".concat(value.length, ")") : "")), field.helpText && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, field.helpText));
+    },
+    gridClassName: _StyledComponents.dynamicSectionGridStyle
+  }), function (_ref2) {
+    var Bind = _ref2.Bind,
+        bind = _ref2.bind,
+        index = _ref2.index;
+    return /*#__PURE__*/_react.default.createElement(_StyledComponents.ObjectItem, null, highlightMap[index] ? /*#__PURE__*/_react.default.createElement(_StyledComponents.ItemHighLight, {
+      key: highlightMap[index]
+    }) : null, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+      title: "".concat(props.field.label, " #").concat(index + 1),
+      action: /*#__PURE__*/_react.default.createElement(Actions, {
+        setHighlightIndex: setHighlightIndex,
+        index: index,
+        bind: bind
+      }) // Open first Accordion by default
+      ,
+      defaultValue: index === 0
+    }, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+      span: 12,
+      className: _StyledComponents.fieldsWrapperStyle
+    }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, Object.assign({
+      Bind: Bind
+    }, bind.index, {
+      contentModel: contentModel,
+      fields: (field.settings || {}).fields || [],
+      layout: (field.settings || {}).layout || [],
+      gridClassName: _StyledComponents.fieldsGridStyle
+    })))));
+  });
+};
+
 var plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-objects",
@@ -42,51 +135,12 @@ var plugin = {
     rendererName: "objects",
     name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Objects"]))),
     description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders a set of fields."]))),
-    canUse: function canUse(_ref) {
-      var field = _ref.field;
+    canUse: function canUse(_ref3) {
+      var field = _ref3.field;
       return field.type === "object" && !!field.multipleValues;
     },
     render: function render(props) {
-      var field = props.field,
-          contentModel = props.contentModel;
-      return /*#__PURE__*/_react.default.createElement(_DynamicSection.default, Object.assign({}, props, {
-        emptyValue: {},
-        showLabel: false,
-        renderTitle: function renderTitle(value) {
-          return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-            span: 12,
-            className: _StyledComponents.dynamicSectionTitleStyle
-          }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-            use: "headline5"
-          }, "".concat(field.label, " ").concat(value.length ? "(".concat(value.length, ")") : "")), field.helpText && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, field.helpText));
-        },
-        gridClassName: _StyledComponents.dynamicSectionGridStyle
-      }), function (_ref2) {
-        var Bind = _ref2.Bind,
-            bind = _ref2.bind,
-            index = _ref2.index;
-        return /*#__PURE__*/_react.default.createElement(_Accordion.default, {
-          title: "".concat(props.field.label, " #").concat(index + 1),
-          action: index > 0 ? /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-            icon: /*#__PURE__*/_react.default.createElement(_close.ReactComponent, null),
-            onClick: function onClick() {
-              return bind.field.removeValue(index);
-            }
-          }) : null // Open first Accordion by default
-          ,
-          defaultValue: index === 0
-        }, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-          span: 12,
-          className: _StyledComponents.fieldsWrapperStyle
-        }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, Object.assign({
-          Bind: Bind
-        }, bind.index, {
-          contentModel: contentModel,
-          fields: (field.settings || {}).fields || [],
-          layout: (field.settings || {}).layout || [],
-          gridClassName: _StyledComponents.fieldsGridStyle
-        }))));
-      });
+      return /*#__PURE__*/_react.default.createElement(ObjectsRenderer, props);
     }
   }
 };

package/admin/plugins/fieldRenderers/object/multipleObjects.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","props","contentModel","value","dynamicSectionTitleStyle","label","length","helpText","dynamicSectionGridStyle","Bind","bind","index","removeValue","fieldsWrapperStyle","settings","fields","layout","fieldsGridStyle"],"sources":["multipleObjects.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport DynamicSection from \"../DynamicSection\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport Accordion from \"~/admin/plugins/fieldRenderers/Accordion\";\nimport {\n    fieldsWrapperStyle,\n    dynamicSectionTitleStyle,\n    dynamicSectionGridStyle,\n    fieldsGridStyle\n} from \"./StyledComponents\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects\",\n    renderer: {\n        rendererName: \"objects\",\n        name: t`Objects`,\n        description: t`Renders a set of fields.`,\n        canUse({ field }) {\n            return field.type === \"object\" && !!field.multipleValues;\n        },\n        render(props) {\n            const { field, contentModel } = props;\n\n            return (\n                <DynamicSection\n                    {...props}\n                    emptyValue={{}}\n                    showLabel={false}\n                    renderTitle={value => (\n                        <Cell span={12} className={dynamicSectionTitleStyle}>\n                            <Typography use={\"headline5\"}>\n                                {`${field.label} ${value.length ? `(${value.length})` : \"\"}`}\n                            </Typography>\n                            {field.helpText && (\n                                <FormElementMessage>{field.helpText}</FormElementMessage>\n                            )}\n                        </Cell>\n                    )}\n                    gridClassName={dynamicSectionGridStyle}\n                >\n                    {({ Bind, bind, index }) => (\n                        <Accordion\n                            title={`${props.field.label} #${index + 1}`}\n                            action={\n                                index > 0 ? (\n                                    <IconButton\n                                        icon={<DeleteIcon />}\n                                        onClick={() => bind.field.removeValue(index)}\n                                    />\n                                ) : null\n                            }\n                            // Open first Accordion by default\n                            defaultValue={index === 0}\n                        >\n                            <Cell span={12} className={fieldsWrapperStyle}>\n                                <Fields\n                                    Bind={Bind}\n                                    {...bind.index}\n                                    contentModel={contentModel}\n                                    fields={(field.settings || {}).fields || []}\n                                    layout={(field.settings || {}).layout || []}\n                                    gridClassName={fieldsGridStyle}\n                                />\n                            </Cell>\n                        </Accordion>\n                    )}\n                </DynamicSection>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAOA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,mCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,SADR;IAENF,IAAI,EAAEL,CAAF,0FAFE;IAGNQ,WAAW,EAAER,CAAF,6GAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAOA,KAAK,CAACN,IAAN,KAAe,QAAf,IAA2B,CAAC,CAACM,KAAK,CAACC,cAA1C;IACH,CANK;IAONC,MAPM,kBAOCC,KAPD,EAOQ;MACV,IAAQH,KAAR,GAAgCG,KAAhC,CAAQH,KAAR;MAAA,IAAeI,YAAf,GAAgCD,KAAhC,CAAeC,YAAf;MAEA,oBACI,6BAAC,uBAAD,oBACQD,KADR;QAEI,UAAU,EAAE,EAFhB;QAGI,SAAS,EAAE,KAHf;QAII,WAAW,EAAE,qBAAAE,KAAK;UAAA,oBACd,6BAAC,UAAD;YAAM,IAAI,EAAE,EAAZ;YAAgB,SAAS,EAAEC;UAA3B,gBACI,6BAAC,sBAAD;YAAY,GAAG,EAAE;UAAjB,aACQN,KAAK,CAACO,KADd,cACuBF,KAAK,CAACG,MAAN,cAAmBH,KAAK,CAACG,MAAzB,SAAqC,EAD5D,EADJ,EAIKR,KAAK,CAACS,QAAN,iBACG,6BAAC,sCAAD,QAAqBT,KAAK,CAACS,QAA3B,CALR,CADc;QAAA,CAJtB;QAcI,aAAa,EAAEC;MAdnB,IAgBK;QAAA,IAAGC,IAAH,SAAGA,IAAH;QAAA,IAASC,IAAT,SAASA,IAAT;QAAA,IAAeC,KAAf,SAAeA,KAAf;QAAA,oBACG,6BAAC,kBAAD;UACI,KAAK,YAAKV,KAAK,CAACH,KAAN,CAAYO,KAAjB,eAA2BM,KAAK,GAAG,CAAnC,CADT;UAEI,MAAM,EACFA,KAAK,GAAG,CAAR,gBACI,6BAAC,kBAAD;YACI,IAAI,eAAE,6BAAC,qBAAD,OADV;YAEI,OAAO,EAAE;cAAA,OAAMD,IAAI,CAACZ,KAAL,CAAWc,WAAX,CAAuBD,KAAvB,CAAN;YAAA;UAFb,EADJ,GAKI,IARZ,CAUI;UAVJ;UAWI,YAAY,EAAEA,KAAK,KAAK;QAX5B,gBAaI,6BAAC,UAAD;UAAM,IAAI,EAAE,EAAZ;UAAgB,SAAS,EAAEE;QAA3B,gBACI,6BAAC,cAAD;UACI,IAAI,EAAEJ;QADV,GAEQC,IAAI,CAACC,KAFb;UAGI,YAAY,EAAET,YAHlB;UAII,MAAM,EAAE,CAACJ,KAAK,CAACgB,QAAN,IAAkB,EAAnB,EAAuBC,MAAvB,IAAiC,EAJ7C;UAKI,MAAM,EAAE,CAACjB,KAAK,CAACgB,QAAN,IAAkB,EAAnB,EAAuBE,MAAvB,IAAiC,EAL7C;UAMI,aAAa,EAAEC;QANnB,GADJ,CAbJ,CADH;MAAA,CAhBL,CADJ;IA6CH;EAvDK;AAH+B,CAA7C;eA8De1B,M"}
+{"version":3,"names":["t","i18n","ns","Actions","setHighlightIndex","bind","index","e","stopPropagation","field","moveValueDown","map","shortid","generate","moveValueUp","removeValue","ObjectsRenderer","props","useState","highlightMap","contentModel","value","dynamicSectionTitleStyle","label","length","helpText","dynamicSectionGridStyle","Bind","fieldsWrapperStyle","settings","fields","layout","fieldsGridStyle","plugin","type","name","renderer","rendererName","description","canUse","multipleValues","render"],"sources":["multipleObjects.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction, useState } from \"react\";\nimport shortid from \"shortid\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport {\n    BindComponentRenderProp,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldRendererProps\n} from \"~/types\";\nimport DynamicSection from \"../DynamicSection\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport { ReactComponent as ArrowUp } from \"./arrow_drop_up.svg\";\nimport { ReactComponent as ArrowDown } from \"./arrow_drop_down.svg\";\nimport Accordion from \"~/admin/plugins/fieldRenderers/Accordion\";\nimport {\n    fieldsWrapperStyle,\n    dynamicSectionTitleStyle,\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"./StyledComponents\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\ninterface ActionsProps {\n    setHighlightIndex: Dispatch<SetStateAction<{ [key: number]: string }>>;\n    index: number;\n    bind: {\n        index: BindComponentRenderProp;\n        field: BindComponentRenderProp;\n    };\n}\n\nconst Actions: React.FC<ActionsProps> = ({ setHighlightIndex, bind, index }) => {\n    return index > 0 ? (\n        <>\n            <IconButton\n                icon={<ArrowDown />}\n                onClick={e => {\n                    e.stopPropagation();\n                    bind.field.moveValueDown(index);\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: shortid.generate()\n                    }));\n                }}\n            />\n            <IconButton\n                icon={<ArrowUp />}\n                onClick={e => {\n                    e.stopPropagation();\n                    bind.field.moveValueUp(index);\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: shortid.generate()\n                    }));\n                }}\n            />\n\n            <IconButton icon={<DeleteIcon />} onClick={() => bind.field.removeValue(index)} />\n        </>\n    ) : null;\n};\n\nconst ObjectsRenderer: React.FC<CmsEditorFieldRendererProps> = props => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const { field, contentModel } = props;\n\n    return (\n        <DynamicSection\n            {...props}\n            emptyValue={{}}\n            showLabel={false}\n            renderTitle={value => (\n                <Cell span={12} className={dynamicSectionTitleStyle}>\n                    <Typography use={\"headline5\"}>\n                        {`${field.label} ${value.length ? `(${value.length})` : \"\"}`}\n                    </Typography>\n                    {field.helpText && <FormElementMessage>{field.helpText}</FormElementMessage>}\n                </Cell>\n            )}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => (\n                <ObjectItem>\n                    {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                    <Accordion\n                        title={`${props.field.label} #${index + 1}`}\n                        action={\n                            <Actions\n                                setHighlightIndex={setHighlightIndex}\n                                index={index}\n                                bind={bind}\n                            />\n                        }\n                        // Open first Accordion by default\n                        defaultValue={index === 0}\n                    >\n                        <Cell span={12} className={fieldsWrapperStyle}>\n                            <Fields\n                                Bind={Bind}\n                                {...bind.index}\n                                contentModel={contentModel}\n                                fields={(field.settings || {}).fields || []}\n                                layout={(field.settings || {}).layout || []}\n                                gridClassName={fieldsGridStyle}\n                            />\n                        </Cell>\n                    </Accordion>\n                </ObjectItem>\n            )}\n        </DynamicSection>\n    );\n};\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects\",\n    renderer: {\n        rendererName: \"objects\",\n        name: t`Objects`,\n        description: t`Renders a set of fields.`,\n        canUse({ field }) {\n            return field.type === \"object\" && !!field.multipleValues;\n        },\n        render(props) {\n            return <ObjectsRenderer {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/radioButtons.js

@@ -56,7 +56,8 @@ var plugin = {
           }, /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
             label: option.label,
             value: getValue(value),
-            onChange: onChange(value)
+            onChange: onChange(value),
+            "data-testid": "fr.input.".concat(field.label, ".").concat(option.label)
           }));
         }));
       }));

package/admin/plugins/fieldRenderers/radioButtons.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","getBind","Bind","predefinedValues","options","values","label","helpText","onChange","getValue","map","option","index","value","Number","String"],"sources":["radioButtons.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Radio, RadioGroup } from \"@webiny/ui/Radio\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-radio-buttons\",\n    renderer: {\n        rendererName: \"radio-buttons\",\n        name: t`Radio Buttons`,\n        description: t`Renders radio buttons, allowing selection of a single value.`,\n        canUse({ field }) {\n            return !field.multipleValues && !!get(field, \"predefinedValues.enabled\");\n        },\n        render({ field, getBind }) {\n            const Bind = getBind();\n\n            const { values: options = [] } = field.predefinedValues || {\n                options: []\n            };\n\n            return (\n                <Bind>\n                    <RadioGroup label={field.label} description={field.helpText}>\n                        {({ onChange, getValue }) => (\n                            <React.Fragment>\n                                {options.map((option, index) => {\n                                    const value =\n                                        field.type === \"number\"\n                                            ? Number(option.value)\n                                            : option.value;\n                                    return (\n                                        <div key={String(option.value) + index}>\n                                            <Radio\n                                                label={option.label}\n                                                value={getValue(value)}\n                                                onChange={onChange(value)}\n                                            />\n                                        </div>\n                                    );\n                                })}\n                            </React.Fragment>\n                        )}\n                    </RadioGroup>\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,yCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,eADR;IAENF,IAAI,EAAEL,CAAF,gGAFE;IAGNQ,WAAW,EAAER,CAAF,iJAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAO,CAACA,KAAK,CAACC,cAAP,IAAyB,CAAC,CAAC,IAAAC,YAAA,EAAIF,KAAJ,EAAW,0BAAX,CAAlC;IACH,CANK;IAONG,MAPM,yBAOqB;MAAA,IAAlBH,KAAkB,SAAlBA,KAAkB;MAAA,IAAXI,OAAW,SAAXA,OAAW;MACvB,IAAMC,IAAI,GAAGD,OAAO,EAApB;;MAEA,YAAiCJ,KAAK,CAACM,gBAAN,IAA0B;QACvDC,OAAO,EAAE;MAD8C,CAA3D;MAAA,yBAAQC,MAAR;MAAA,IAAgBD,OAAhB,6BAA0B,EAA1B;;MAIA,oBACI,6BAAC,IAAD,qBACI,6BAAC,iBAAD;QAAY,KAAK,EAAEP,KAAK,CAACS,KAAzB;QAAgC,WAAW,EAAET,KAAK,CAACU;MAAnD,GACK;QAAA,IAAGC,QAAH,SAAGA,QAAH;QAAA,IAAaC,QAAb,SAAaA,QAAb;QAAA,oBACG,6BAAC,cAAD,CAAO,QAAP,QACKL,OAAO,CAACM,GAAR,CAAY,UAACC,MAAD,EAASC,KAAT,EAAmB;UAC5B,IAAMC,KAAK,GACPhB,KAAK,CAACN,IAAN,KAAe,QAAf,GACMuB,MAAM,CAACH,MAAM,CAACE,KAAR,CADZ,GAEMF,MAAM,CAACE,KAHjB;UAIA,oBACI;YAAK,GAAG,EAAEE,MAAM,CAACJ,MAAM,CAACE,KAAR,CAAN,GAAuBD;UAAjC,gBACI,6BAAC,YAAD;YACI,KAAK,EAAED,MAAM,CAACL,KADlB;YAEI,KAAK,EAAEG,QAAQ,CAACI,KAAD,CAFnB;YAGI,QAAQ,EAAEL,QAAQ,CAACK,KAAD;UAHtB,EADJ,CADJ;QASH,CAdA,CADL,CADH;MAAA,CADL,CADJ,CADJ;IAyBH;EAvCK;AAH+B,CAA7C;eA8CevB,M"}
+{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","getBind","Bind","predefinedValues","options","values","label","helpText","onChange","getValue","map","option","index","value","Number","String"],"sources":["radioButtons.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Radio, RadioGroup } from \"@webiny/ui/Radio\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-radio-buttons\",\n    renderer: {\n        rendererName: \"radio-buttons\",\n        name: t`Radio Buttons`,\n        description: t`Renders radio buttons, allowing selection of a single value.`,\n        canUse({ field }) {\n            return !field.multipleValues && !!get(field, \"predefinedValues.enabled\");\n        },\n        render({ field, getBind }) {\n            const Bind = getBind();\n\n            const { values: options = [] } = field.predefinedValues || {\n                options: []\n            };\n\n            return (\n                <Bind>\n                    <RadioGroup label={field.label} description={field.helpText}>\n                        {({ onChange, getValue }) => (\n                            <React.Fragment>\n                                {options.map((option, index) => {\n                                    const value =\n                                        field.type === \"number\"\n                                            ? Number(option.value)\n                                            : option.value;\n                                    return (\n                                        <div key={String(option.value) + index}>\n                                            <Radio\n                                                label={option.label}\n                                                value={getValue(value)}\n                                                onChange={onChange(value)}\n                                                data-testid={`fr.input.${field.label}.${option.label}`}\n                                            />\n                                        </div>\n                                    );\n                                })}\n                            </React.Fragment>\n                        )}\n                    </RadioGroup>\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,yCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,eADR;IAENF,IAAI,EAAEL,CAAF,gGAFE;IAGNQ,WAAW,EAAER,CAAF,iJAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAO,CAACA,KAAK,CAACC,cAAP,IAAyB,CAAC,CAAC,IAAAC,YAAA,EAAIF,KAAJ,EAAW,0BAAX,CAAlC;IACH,CANK;IAONG,MAPM,yBAOqB;MAAA,IAAlBH,KAAkB,SAAlBA,KAAkB;MAAA,IAAXI,OAAW,SAAXA,OAAW;MACvB,IAAMC,IAAI,GAAGD,OAAO,EAApB;;MAEA,YAAiCJ,KAAK,CAACM,gBAAN,IAA0B;QACvDC,OAAO,EAAE;MAD8C,CAA3D;MAAA,yBAAQC,MAAR;MAAA,IAAgBD,OAAhB,6BAA0B,EAA1B;;MAIA,oBACI,6BAAC,IAAD,qBACI,6BAAC,iBAAD;QAAY,KAAK,EAAEP,KAAK,CAACS,KAAzB;QAAgC,WAAW,EAAET,KAAK,CAACU;MAAnD,GACK;QAAA,IAAGC,QAAH,SAAGA,QAAH;QAAA,IAAaC,QAAb,SAAaA,QAAb;QAAA,oBACG,6BAAC,cAAD,CAAO,QAAP,QACKL,OAAO,CAACM,GAAR,CAAY,UAACC,MAAD,EAASC,KAAT,EAAmB;UAC5B,IAAMC,KAAK,GACPhB,KAAK,CAACN,IAAN,KAAe,QAAf,GACMuB,MAAM,CAACH,MAAM,CAACE,KAAR,CADZ,GAEMF,MAAM,CAACE,KAHjB;UAIA,oBACI;YAAK,GAAG,EAAEE,MAAM,CAACJ,MAAM,CAACE,KAAR,CAAN,GAAuBD;UAAjC,gBACI,6BAAC,YAAD;YACI,KAAK,EAAED,MAAM,CAACL,KADlB;YAEI,KAAK,EAAEG,QAAQ,CAACI,KAAD,CAFnB;YAGI,QAAQ,EAAEL,QAAQ,CAACK,KAAD,CAHtB;YAII,kCAAyBhB,KAAK,CAACS,KAA/B,cAAwCK,MAAM,CAACL,KAA/C;UAJJ,EADJ,CADJ;QAUH,CAfA,CADL,CADH;MAAA,CADL,CADJ,CADJ;IA0BH;EAxCK;AAH+B,CAA7C;eA+CehB,M"}

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesAutocomplete.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -35,6 +33,8 @@ var _createEntryUrl = require("./createEntryUrl");
 
 var _EntryStatus = require("./EntryStatus");
 
+var _utils = require("@webiny/utils");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var t = _i18n.i18n.ns("app-headless-cms/admin/fields/ref");
@@ -47,9 +47,8 @@ var getItemOption = function getItemOption(options, id) {
     return null;
   }
 
-  var _id$split = id.split("#"),
-      _id$split2 = (0, _slicedToArray2.default)(_id$split, 1),
-      entryId = _id$split2[0];
+  var _parseIdentifier = (0, _utils.parseIdentifier)(id),
+      entryId = _parseIdentifier.id;
 
   return options.find(function (item) {
     return item.entryId === entryId;
@@ -119,6 +118,7 @@ var ContentEntriesAutocomplete = function ContentEntriesAutocomplete(_ref) {
       value: value || undefined,
       options: options,
       label: field.label,
+      "data-testid": "fr.input.autocomplete.".concat(field.label),
       description: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, field.helpText, /*#__PURE__*/_react.default.createElement(_EntryStatus.EntryStatus, {
         item: item
       }, entryInfo)),

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesAutocomplete.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","unpublishedLabel","publishedLabel","getItemOption","options","id","length","split","entryId","find","item","ContentEntriesAutocomplete","bind","field","useReference","setSearch","value","loading","onChange","entryInfo","published","link","createEntryUrl","publishItLink","here","useNewRefEntry","renderNewEntryModal","refModelId","helpText","entry","renderItem","undefined","label","debounce","search"],"sources":["ContentEntriesAutocomplete.tsx"],"sourcesContent":["import React from \"react\";\nimport debounce from \"lodash/debounce\";\nimport NewRefEntryFormDialog, { NewEntryButton } from \"./NewRefEntryFormDialog\";\nimport { AutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Link } from \"@webiny/react-router\";\nimport { useNewRefEntry } from \"../hooks/useNewRefEntry\";\nimport { useReference } from \"./useReference\";\nimport { renderItem } from \"./renderItem\";\nimport { createEntryUrl } from \"./createEntryUrl\";\nimport { CmsEditorField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { OptionItem } from \"./types\";\nimport { EntryStatus } from \"./EntryStatus\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst unpublishedLabel = t`Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry.`;\nconst publishedLabel = t`Selected content entry is published. You can view it {here}.`;\n\nconst getItemOption = (options: OptionItem[], id?: string | null): OptionItem | null => {\n    if (!id || !options || options.length === 0) {\n        return null;\n    }\n    const [entryId] = id.split(\"#\");\n    return options.find(item => item.entryId === entryId) || null;\n};\n\ninterface ContentEntriesAutocompleteProps {\n    bind: BindComponentRenderProp;\n    field: CmsEditorField;\n}\nconst ContentEntriesAutocomplete: React.FC<ContentEntriesAutocompleteProps> = ({ bind, field }) => {\n    const { options, setSearch, value, loading, onChange } = useReference({\n        bind,\n        field\n    });\n\n    let entryInfo: string | null = null;\n    if (value && !value.published) {\n        const link = createEntryUrl(value);\n        entryInfo = unpublishedLabel({ publishItLink: <Link to={link}>{t`publish it`}</Link> });\n    } else if (value) {\n        const link = createEntryUrl(value);\n        entryInfo = publishedLabel({\n            here: <Link to={link}>{t`here`}</Link>\n        });\n    }\n    const { renderNewEntryModal, refModelId, helpText } = useNewRefEntry({ field });\n\n    const item = getItemOption(options, bind.value ? bind.value.id : null);\n    /*\n     * Wrap AutoComplete input in NewRefEntry modal.\n     */\n    if (renderNewEntryModal) {\n        return (\n            <NewRefEntryFormDialog\n                modelId={refModelId}\n                onChange={entry => {\n                    /**\n                     * TODO @ts-refactor @ashutosh\n                     * Need to figure out correct types.\n                     */\n                    // @ts-ignore\n                    return onChange(entry, entry);\n                }}\n            >\n                <AutoComplete\n                    {...bind}\n                    renderItem={renderItem}\n                    onChange={onChange}\n                    loading={loading}\n                    value={value || undefined}\n                    options={options}\n                    label={field.label}\n                    description={\n                        <>\n                            {field.helpText}\n                            <EntryStatus item={item}>{entryInfo}</EntryStatus>\n                        </>\n                    }\n                    onInput={debounce(search => setSearch(search), 250)}\n                    noResultFound={<NewEntryButton />}\n                />\n            </NewRefEntryFormDialog>\n        );\n    }\n\n    return (\n        <AutoComplete\n            {...bind}\n            renderItem={renderItem}\n            onChange={onChange}\n            loading={loading}\n            value={value || undefined}\n            options={options}\n            label={field.label}\n            description={\n                <>\n                    {field.helpText}\n                    <EntryStatus item={item}>{entryInfo}</EntryStatus>\n                </>\n            }\n            onInput={debounce(search => setSearch(search), 250)}\n            noResultFound={helpText}\n        />\n    );\n};\n\nexport default ContentEntriesAutocomplete;\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","ns","unpublishedLabel","publishedLabel","getItemOption","options","id","length","parseIdentifier","entryId","find","item","ContentEntriesAutocomplete","bind","field","useReference","setSearch","value","loading","onChange","entryInfo","published","link","createEntryUrl","publishItLink","here","useNewRefEntry","renderNewEntryModal","refModelId","helpText","entry","renderItem","undefined","label","debounce","search"],"sources":["ContentEntriesAutocomplete.tsx"],"sourcesContent":["import React from \"react\";\nimport debounce from \"lodash/debounce\";\nimport NewRefEntryFormDialog, { NewEntryButton } from \"./NewRefEntryFormDialog\";\nimport { AutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Link } from \"@webiny/react-router\";\nimport { useNewRefEntry } from \"../hooks/useNewRefEntry\";\nimport { useReference } from \"./useReference\";\nimport { renderItem } from \"./renderItem\";\nimport { createEntryUrl } from \"./createEntryUrl\";\nimport { CmsEditorField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { OptionItem } from \"./types\";\nimport { EntryStatus } from \"./EntryStatus\";\nimport { parseIdentifier } from \"@webiny/utils\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst unpublishedLabel = t`Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry.`;\nconst publishedLabel = t`Selected content entry is published. You can view it {here}.`;\n\nconst getItemOption = (options: OptionItem[], id?: string | null): OptionItem | null => {\n    if (!id || !options || options.length === 0) {\n        return null;\n    }\n    const { id: entryId } = parseIdentifier(id);\n    return options.find(item => item.entryId === entryId) || null;\n};\n\ninterface ContentEntriesAutocompleteProps {\n    bind: BindComponentRenderProp;\n    field: CmsEditorField;\n}\nconst ContentEntriesAutocomplete: React.FC<ContentEntriesAutocompleteProps> = ({ bind, field }) => {\n    const { options, setSearch, value, loading, onChange } = useReference({\n        bind,\n        field\n    });\n\n    let entryInfo: string | null = null;\n    if (value && !value.published) {\n        const link = createEntryUrl(value);\n        entryInfo = unpublishedLabel({ publishItLink: <Link to={link}>{t`publish it`}</Link> });\n    } else if (value) {\n        const link = createEntryUrl(value);\n        entryInfo = publishedLabel({\n            here: <Link to={link}>{t`here`}</Link>\n        });\n    }\n    const { renderNewEntryModal, refModelId, helpText } = useNewRefEntry({ field });\n\n    const item = getItemOption(options, bind.value ? bind.value.id : null);\n    /*\n     * Wrap AutoComplete input in NewRefEntry modal.\n     */\n    if (renderNewEntryModal) {\n        return (\n            <NewRefEntryFormDialog\n                modelId={refModelId}\n                onChange={entry => {\n                    /**\n                     * TODO @ts-refactor @ashutosh\n                     * Need to figure out correct types.\n                     */\n                    // @ts-ignore\n                    return onChange(entry, entry);\n                }}\n            >\n                <AutoComplete\n                    {...bind}\n                    renderItem={renderItem}\n                    onChange={onChange}\n                    loading={loading}\n                    value={value || undefined}\n                    options={options}\n                    label={field.label}\n                    data-testid={`fr.input.autocomplete.${field.label}`}\n                    description={\n                        <>\n                            {field.helpText}\n                            <EntryStatus item={item}>{entryInfo}</EntryStatus>\n                        </>\n                    }\n                    onInput={debounce(search => setSearch(search), 250)}\n                    noResultFound={<NewEntryButton />}\n                />\n            </NewRefEntryFormDialog>\n        );\n    }\n\n    return (\n        <AutoComplete\n            {...bind}\n            renderItem={renderItem}\n            onChange={onChange}\n            loading={loading}\n            value={value || undefined}\n            options={options}\n            label={field.label}\n            description={\n                <>\n                    {field.helpText}\n                    <EntryStatus item={item}>{entryInfo}</EntryStatus>\n                </>\n            }\n            onInput={debounce(search => setSearch(search), 250)}\n            noResultFound={helpText}\n        />\n    );\n};\n\nexport default ContentEntriesAutocomplete;\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/components/useReference.js

@@ -25,6 +25,8 @@ var _graphql = require("./graphql");
 
 var _helpers = require("./helpers");
 
+var _utils = require("@webiny/utils");
+
 var getValueHash = function getValueHash(value) {
   if (!value || !value.id && !value.entryId) {
     return null;
@@ -32,7 +34,10 @@ var getValueHash = function getValueHash(value) {
     return value.entryId;
   }
 
-  return value.id.split("#").shift();
+  var _parseIdentifier = (0, _utils.parseIdentifier)(value.id),
+      id = _parseIdentifier.id;
+
+  return id;
 };
 
 var useReference = function useReference(_ref) {

package/admin/plugins/fieldRenderers/ref/components/useReference.js.map

@@ -1 +1 @@
-{"version":3,"names":["getValueHash","value","id","entryId","split","shift","useReference","bind","field","allEntries","useRef","client","useApolloClient","useState","search","setSearch","loading","setLoading","entries","setEntries","latestEntries","setLatestEntries","valueEntry","setValueEntry","models","settings","modelsHash","map","model","modelId","join","valueHash","searchEntries","query","SEARCH_CONTENT_ENTRIES","variables","modelIds","m","limit","data","collection","convertReferenceEntriesToOptionCollection","content","current","useEffect","length","fetchPolicy","then","latestEntryData","entry","GET_CONTENT_ENTRY","res","dataEntry","latest","option","convertReferenceEntryToOption","published","prev","onChange","useCallback","options","useMemo","Object","values","defaultOptions","outputOptions","some","opt","push"],"sources":["useReference.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useApolloClient } from \"~/admin/hooks\";\nimport {\n    SEARCH_CONTENT_ENTRIES,\n    GET_CONTENT_ENTRY,\n    CmsEntryGetQueryResponse,\n    CmsEntryGetQueryVariables,\n    CmsEntrySearchQueryResponse,\n    CmsEntrySearchQueryVariables\n} from \"./graphql\";\nimport { CmsEditorField, CmsModel } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { OptionItem, OptionItemCollection } from \"./types\";\nimport {\n    convertReferenceEntriesToOptionCollection,\n    convertReferenceEntryToOption\n} from \"./helpers\";\n\ninterface UseReferenceHookArgs {\n    bind: BindComponentRenderProp;\n    field: CmsEditorField;\n}\n\ninterface UseReferenceHookValue {\n    onChange: (value: any, entry: OptionItem) => void;\n    setSearch: (value: string) => void;\n    value: OptionItem | null;\n    loading: boolean;\n    options: OptionItem[];\n}\n\ntype UseReferenceHook = (args: UseReferenceHookArgs) => UseReferenceHookValue;\n\nconst getValueHash = (value: any): string | null => {\n    if (!value || (!value.id && !value.entryId)) {\n        return null;\n    } else if (value.entryId) {\n        return value.entryId;\n    }\n    return value.id.split(\"#\").shift();\n};\n\nexport const useReference: UseReferenceHook = ({ bind, field }) => {\n    const allEntries = useRef<OptionItemCollection>({});\n    const client = useApolloClient();\n    const [search, setSearch] = useState<string>(\"\");\n    const [loading, setLoading] = useState<boolean>(false);\n    const [entries, setEntries] = useState<OptionItemCollection>({});\n    const [latestEntries, setLatestEntries] = useState<OptionItemCollection>({});\n    const [valueEntry, setValueEntry] = useState<OptionItem | null>(null);\n\n    const models = (field.settings ? field.settings.models || [] : []) as Pick<\n        CmsModel,\n        \"modelId\" | \"name\"\n    >[];\n    const modelsHash = models.map(model => model.modelId).join(\",\");\n\n    const value = bind.value;\n    const valueHash = getValueHash(value);\n\n    const searchEntries = async () => {\n        if (!search) {\n            return;\n        }\n\n        setLoading(true);\n        const { data } = await client.query<\n            CmsEntrySearchQueryResponse,\n            CmsEntrySearchQueryVariables\n        >({\n            query: SEARCH_CONTENT_ENTRIES,\n            variables: {\n                modelIds: models.map(m => m.modelId),\n                query: search,\n                limit: 10\n            }\n        });\n        setLoading(false);\n\n        const collection = convertReferenceEntriesToOptionCollection(data.content.data);\n        if (valueEntry) {\n            collection[valueEntry.entryId] = valueEntry;\n        }\n        allEntries.current = {\n            ...allEntries.current,\n            ...collection\n        };\n\n        setEntries(collection);\n    };\n\n    useEffect(() => {\n        searchEntries();\n    }, [search]);\n\n    useEffect(() => {\n        if (models.length === 0) {\n            return;\n        }\n        client\n            .query<CmsEntrySearchQueryResponse, CmsEntrySearchQueryVariables>({\n                query: SEARCH_CONTENT_ENTRIES,\n                variables: {\n                    modelIds: models.map(m => m.modelId),\n                    limit: 10\n                },\n                /**\n                 * We cannot update this query response in cache after a reference entry being created/deleted,\n                 * which result in cached response being stale, therefore, we're setting the fetchPolicy to \"network-only\" to by passing cache.\n                 */\n                fetchPolicy: \"network-only\"\n            })\n            .then(({ data }) => {\n                const latestEntryData = convertReferenceEntriesToOptionCollection(\n                    data.content.data\n                );\n                if (valueEntry) {\n                    latestEntryData[valueEntry.entryId] = valueEntry;\n                }\n\n                setLatestEntries(latestEntryData);\n                allEntries.current = {\n                    ...allEntries.current,\n                    ...latestEntryData\n                };\n            });\n    }, [modelsHash]);\n\n    useEffect(() => {\n        if (!value || !models) {\n            setValueEntry(() => null);\n            return;\n        }\n\n        const entry = valueHash ? allEntries.current[valueHash] : null;\n        if (entry) {\n            /**\n             * if entry exists set valueEntry to that one so we do not load new one\n             */\n            setValueEntry(() => {\n                return entry;\n            });\n            return;\n        }\n\n        setLoading(true);\n        /**\n         * Query loads both latest and published entries.\n         * We do this in a single query because there might not be a published entry so we can use the latest one.\n         */\n        client\n            .query<CmsEntryGetQueryResponse, CmsEntryGetQueryVariables>({\n                query: GET_CONTENT_ENTRY,\n                variables: {\n                    entry: {\n                        modelId: value.modelId,\n                        id: value.id\n                    }\n                }\n            })\n            .then(res => {\n                setLoading(false);\n                const dataEntry = res.data.latest.data;\n                if (!dataEntry) {\n                    return;\n                }\n                const option: OptionItem = {\n                    ...convertReferenceEntryToOption(dataEntry),\n                    latest: dataEntry.id,\n                    published: res.data.published.data ? res.data.published.data.id : null\n                };\n                allEntries.current[option.entryId] = option;\n                setLatestEntries(prev => {\n                    return {\n                        ...prev,\n                        [option.entryId]: {\n                            ...option\n                        }\n                    };\n                });\n                /**\n                 * Calculate a couple of props for the Autocomplete component.\n                 */\n                setValueEntry(() => {\n                    return option;\n                });\n            });\n    }, [valueHash, modelsHash]);\n\n    const onChange = useCallback((value: string, entry: OptionItem) => {\n        if (value !== null) {\n            setSearch(\"\");\n\n            setValueEntry(() => {\n                return entry;\n            });\n            bind.onChange({\n                modelId: entry.modelId,\n                id: entry.id\n            });\n            return;\n        }\n\n        setValueEntry(() => null);\n        bind.onChange(null);\n    }, []);\n\n    /**\n     * Format options for the Autocomplete component.\n     */\n    const options = useMemo(() => Object.values(entries), [valueHash, entries]);\n\n    /**\n     * Format default options for the Autocomplete component.\n     */\n    const defaultOptions = useMemo(() => {\n        return Object.values(latestEntries);\n    }, [valueHash, latestEntries]);\n\n    const outputOptions: OptionItem[] = (search && options ? options : defaultOptions) || [];\n\n    if (valueEntry && outputOptions.some(opt => opt.entryId === valueEntry.entryId) === false) {\n        outputOptions.push(valueEntry);\n    }\n\n    return {\n        onChange,\n        setSearch,\n        value: valueEntry,\n        loading,\n        options: outputOptions\n    };\n};\n"],"mappings":"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"}
+{"version":3,"names":["getValueHash","value","id","entryId","parseIdentifier","useReference","bind","field","allEntries","useRef","client","useApolloClient","useState","search","setSearch","loading","setLoading","entries","setEntries","latestEntries","setLatestEntries","valueEntry","setValueEntry","models","settings","modelsHash","map","model","modelId","join","valueHash","searchEntries","query","SEARCH_CONTENT_ENTRIES","variables","modelIds","m","limit","data","collection","convertReferenceEntriesToOptionCollection","content","current","useEffect","length","fetchPolicy","then","latestEntryData","entry","GET_CONTENT_ENTRY","res","dataEntry","latest","option","convertReferenceEntryToOption","published","prev","onChange","useCallback","options","useMemo","Object","values","defaultOptions","outputOptions","some","opt","push"],"sources":["useReference.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useApolloClient } from \"~/admin/hooks\";\nimport {\n    SEARCH_CONTENT_ENTRIES,\n    GET_CONTENT_ENTRY,\n    CmsEntryGetQueryResponse,\n    CmsEntryGetQueryVariables,\n    CmsEntrySearchQueryResponse,\n    CmsEntrySearchQueryVariables\n} from \"./graphql\";\nimport { CmsEditorField, CmsModel } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { OptionItem, OptionItemCollection } from \"./types\";\nimport {\n    convertReferenceEntriesToOptionCollection,\n    convertReferenceEntryToOption\n} from \"./helpers\";\nimport { parseIdentifier } from \"@webiny/utils\";\n\ninterface UseReferenceHookArgs {\n    bind: BindComponentRenderProp;\n    field: CmsEditorField;\n}\n\ninterface UseReferenceHookValue {\n    onChange: (value: any, entry: OptionItem) => void;\n    setSearch: (value: string) => void;\n    value: OptionItem | null;\n    loading: boolean;\n    options: OptionItem[];\n}\n\ntype UseReferenceHook = (args: UseReferenceHookArgs) => UseReferenceHookValue;\n\nconst getValueHash = (value: any): string | null => {\n    if (!value || (!value.id && !value.entryId)) {\n        return null;\n    } else if (value.entryId) {\n        return value.entryId;\n    }\n    const { id } = parseIdentifier(value.id);\n    return id;\n};\n\nexport const useReference: UseReferenceHook = ({ bind, field }) => {\n    const allEntries = useRef<OptionItemCollection>({});\n    const client = useApolloClient();\n    const [search, setSearch] = useState<string>(\"\");\n    const [loading, setLoading] = useState<boolean>(false);\n    const [entries, setEntries] = useState<OptionItemCollection>({});\n    const [latestEntries, setLatestEntries] = useState<OptionItemCollection>({});\n    const [valueEntry, setValueEntry] = useState<OptionItem | null>(null);\n\n    const models = (field.settings ? field.settings.models || [] : []) as Pick<\n        CmsModel,\n        \"modelId\" | \"name\"\n    >[];\n    const modelsHash = models.map(model => model.modelId).join(\",\");\n\n    const value = bind.value;\n    const valueHash = getValueHash(value);\n\n    const searchEntries = async () => {\n        if (!search) {\n            return;\n        }\n\n        setLoading(true);\n        const { data } = await client.query<\n            CmsEntrySearchQueryResponse,\n            CmsEntrySearchQueryVariables\n        >({\n            query: SEARCH_CONTENT_ENTRIES,\n            variables: {\n                modelIds: models.map(m => m.modelId),\n                query: search,\n                limit: 10\n            }\n        });\n        setLoading(false);\n\n        const collection = convertReferenceEntriesToOptionCollection(data.content.data);\n        if (valueEntry) {\n            collection[valueEntry.entryId] = valueEntry;\n        }\n        allEntries.current = {\n            ...allEntries.current,\n            ...collection\n        };\n\n        setEntries(collection);\n    };\n\n    useEffect(() => {\n        searchEntries();\n    }, [search]);\n\n    useEffect(() => {\n        if (models.length === 0) {\n            return;\n        }\n        client\n            .query<CmsEntrySearchQueryResponse, CmsEntrySearchQueryVariables>({\n                query: SEARCH_CONTENT_ENTRIES,\n                variables: {\n                    modelIds: models.map(m => m.modelId),\n                    limit: 10\n                },\n                /**\n                 * We cannot update this query response in cache after a reference entry being created/deleted,\n                 * which result in cached response being stale, therefore, we're setting the fetchPolicy to \"network-only\" to by passing cache.\n                 */\n                fetchPolicy: \"network-only\"\n            })\n            .then(({ data }) => {\n                const latestEntryData = convertReferenceEntriesToOptionCollection(\n                    data.content.data\n                );\n                if (valueEntry) {\n                    latestEntryData[valueEntry.entryId] = valueEntry;\n                }\n\n                setLatestEntries(latestEntryData);\n                allEntries.current = {\n                    ...allEntries.current,\n                    ...latestEntryData\n                };\n            });\n    }, [modelsHash]);\n\n    useEffect(() => {\n        if (!value || !models) {\n            setValueEntry(() => null);\n            return;\n        }\n\n        const entry = valueHash ? allEntries.current[valueHash] : null;\n        if (entry) {\n            /**\n             * if entry exists set valueEntry to that one so we do not load new one\n             */\n            setValueEntry(() => {\n                return entry;\n            });\n            return;\n        }\n\n        setLoading(true);\n        /**\n         * Query loads both latest and published entries.\n         * We do this in a single query because there might not be a published entry so we can use the latest one.\n         */\n        client\n            .query<CmsEntryGetQueryResponse, CmsEntryGetQueryVariables>({\n                query: GET_CONTENT_ENTRY,\n                variables: {\n                    entry: {\n                        modelId: value.modelId,\n                        id: value.id\n                    }\n                }\n            })\n            .then(res => {\n                setLoading(false);\n                const dataEntry = res.data.latest.data;\n                if (!dataEntry) {\n                    return;\n                }\n                const option: OptionItem = {\n                    ...convertReferenceEntryToOption(dataEntry),\n                    latest: dataEntry.id,\n                    published: res.data.published.data ? res.data.published.data.id : null\n                };\n                allEntries.current[option.entryId] = option;\n                setLatestEntries(prev => {\n                    return {\n                        ...prev,\n                        [option.entryId]: {\n                            ...option\n                        }\n                    };\n                });\n                /**\n                 * Calculate a couple of props for the Autocomplete component.\n                 */\n                setValueEntry(() => {\n                    return option;\n                });\n            });\n    }, [valueHash, modelsHash]);\n\n    const onChange = useCallback((value: string, entry: OptionItem) => {\n        if (value !== null) {\n            setSearch(\"\");\n\n            setValueEntry(() => {\n                return entry;\n            });\n            bind.onChange({\n                modelId: entry.modelId,\n                id: entry.id\n            });\n            return;\n        }\n\n        setValueEntry(() => null);\n        bind.onChange(null);\n    }, []);\n\n    /**\n     * Format options for the Autocomplete component.\n     */\n    const options = useMemo(() => Object.values(entries), [valueHash, entries]);\n\n    /**\n     * Format default options for the Autocomplete component.\n     */\n    const defaultOptions = useMemo(() => {\n        return Object.values(latestEntries);\n    }, [valueHash, latestEntries]);\n\n    const outputOptions: OptionItem[] = (search && options ? options : defaultOptions) || [];\n\n    if (valueEntry && outputOptions.some(opt => opt.entryId === valueEntry.entryId) === false) {\n        outputOptions.push(valueEntry);\n    }\n\n    return {\n        onChange,\n        setSearch,\n        value: valueEntry,\n        loading,\n        options: outputOptions\n    };\n};\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/richText/richTextInput.js

@@ -62,7 +62,8 @@ var plugin = {
           onChange: bind.onChange,
           label: field.label,
           placeholder: field.placeholderText,
-          description: field.helpText
+          description: field.helpText,
+          "data-testid": "fr.input.richtext.".concat(field.label)
         }));
       });
     }

package/admin/plugins/fieldRenderers/richText/richTextInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","getKey","field","bind","formId","form","data","id","fieldId","plugin","type","name","renderer","rendererName","description","canUse","multipleValues","get","render","getBind","Bind","rteProps","useMemo","createPropsFromConfig","plugins","byType","map","pl","config","onChange","label","placeholderText","helpText"],"sources":["richTextInput.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport get from \"lodash/get\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorContentEntry, CmsEditorField, CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { createPropsFromConfig, RichTextEditor } from \"@webiny/app-admin/components/RichTextEditor\";\nimport { plugins } from \"@webiny/plugins\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/rich-text\");\n\nconst getKey = (\n    field: CmsEditorField,\n    bind: BindComponentRenderProp<string, CmsEditorContentEntry>\n): string => {\n    const formId = bind.form.data.id || \"new\";\n    return `${formId}.${field.fieldId}`;\n};\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-rich-text\",\n    renderer: {\n        rendererName: \"rich-text-input\",\n        name: t`Rich Text Input`,\n        description: t`Renders a rich text editor.`,\n        canUse({ field }) {\n            return (\n                field.type === \"rich-text\" &&\n                !field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render({ field, getBind }) {\n            const Bind = getBind();\n\n            const rteProps = useMemo(() => {\n                /**\n                 * TODO @ts-refactor\n                 * Missing cms-rte-config plugin type.\n                 */\n                // @ts-ignore\n                return createPropsFromConfig(plugins.byType(\"cms-rte-config\").map(pl => pl.config));\n            }, []);\n\n            return (\n                <Bind>\n                    {bind => {\n                        return (\n                            <RichTextEditor\n                                key={getKey(field, bind as any)}\n                                {...rteProps}\n                                {...bind}\n                                onChange={bind.onChange}\n                                label={field.label}\n                                placeholder={field.placeholderText}\n                                description={field.helpText}\n                            />\n                        );\n                    }}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AAGA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,yCAAR,CAAV;;AAEA,IAAMC,MAAM,GAAG,SAATA,MAAS,CACXC,KADW,EAEXC,IAFW,EAGF;EACT,IAAMC,MAAM,GAAGD,IAAI,CAACE,IAAL,CAAUC,IAAV,CAAeC,EAAf,IAAqB,KAApC;EACA,iBAAUH,MAAV,cAAoBF,KAAK,CAACM,OAA1B;AACH,CAND;;AAQA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,qCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,iBADR;IAENF,IAAI,EAAEb,CAAF,kGAFE;IAGNgB,WAAW,EAAEhB,CAAF,gHAHL;IAINiB,MAJM,wBAIY;MAAA,IAATb,KAAS,QAATA,KAAS;MACd,OACIA,KAAK,CAACQ,IAAN,KAAe,WAAf,IACA,CAACR,KAAK,CAACc,cADP,IAEA,CAAC,IAAAC,YAAA,EAAIf,KAAJ,EAAW,0BAAX,CAHL;IAKH,CAVK;IAWNgB,MAXM,yBAWqB;MAAA,IAAlBhB,KAAkB,SAAlBA,KAAkB;MAAA,IAAXiB,OAAW,SAAXA,OAAW;MACvB,IAAMC,IAAI,GAAGD,OAAO,EAApB;MAEA,IAAME,QAAQ,GAAG,IAAAC,cAAA,EAAQ,YAAM;QAC3B;AAChB;AACA;AACA;QACgB;QACA,OAAO,IAAAC,qCAAA,EAAsBC,gBAAA,CAAQC,MAAR,CAAe,gBAAf,EAAiCC,GAAjC,CAAqC,UAAAC,EAAE;UAAA,OAAIA,EAAE,CAACC,MAAP;QAAA,CAAvC,CAAtB,CAAP;MACH,CAPgB,EAOd,EAPc,CAAjB;MASA,oBACI,6BAAC,IAAD,QACK,UAAAzB,IAAI,EAAI;QACL,oBACI,6BAAC,8BAAD;UACI,GAAG,EAAEF,MAAM,CAACC,KAAD,EAAQC,IAAR;QADf,GAEQkB,QAFR,EAGQlB,IAHR;UAII,QAAQ,EAAEA,IAAI,CAAC0B,QAJnB;UAKI,KAAK,EAAE3B,KAAK,CAAC4B,KALjB;UAMI,WAAW,EAAE5B,KAAK,CAAC6B,eANvB;UAOI,WAAW,EAAE7B,KAAK,CAAC8B;QAPvB,GADJ;MAWH,CAbL,CADJ;IAiBH;EAxCK;AAH+B,CAA7C;eA+CevB,M"}
+{"version":3,"names":["t","i18n","ns","getKey","field","bind","formId","form","data","id","fieldId","plugin","type","name","renderer","rendererName","description","canUse","multipleValues","get","render","getBind","Bind","rteProps","useMemo","createPropsFromConfig","plugins","byType","map","pl","config","onChange","label","placeholderText","helpText"],"sources":["richTextInput.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport get from \"lodash/get\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorContentEntry, CmsEditorField, CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { createPropsFromConfig, RichTextEditor } from \"@webiny/app-admin/components/RichTextEditor\";\nimport { plugins } from \"@webiny/plugins\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/rich-text\");\n\nconst getKey = (\n    field: CmsEditorField,\n    bind: BindComponentRenderProp<string, CmsEditorContentEntry>\n): string => {\n    const formId = bind.form.data.id || \"new\";\n    return `${formId}.${field.fieldId}`;\n};\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-rich-text\",\n    renderer: {\n        rendererName: \"rich-text-input\",\n        name: t`Rich Text Input`,\n        description: t`Renders a rich text editor.`,\n        canUse({ field }) {\n            return (\n                field.type === \"rich-text\" &&\n                !field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render({ field, getBind }) {\n            const Bind = getBind();\n\n            const rteProps = useMemo(() => {\n                /**\n                 * TODO @ts-refactor\n                 * Missing cms-rte-config plugin type.\n                 */\n                // @ts-ignore\n                return createPropsFromConfig(plugins.byType(\"cms-rte-config\").map(pl => pl.config));\n            }, []);\n\n            return (\n                <Bind>\n                    {bind => {\n                        return (\n                            <RichTextEditor\n                                key={getKey(field, bind as any)}\n                                {...rteProps}\n                                {...bind}\n                                onChange={bind.onChange}\n                                label={field.label}\n                                placeholder={field.placeholderText}\n                                description={field.helpText}\n                                data-testid={`fr.input.richtext.${field.label}`}\n                            />\n                        );\n                    }}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AAGA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,yCAAR,CAAV;;AAEA,IAAMC,MAAM,GAAG,SAATA,MAAS,CACXC,KADW,EAEXC,IAFW,EAGF;EACT,IAAMC,MAAM,GAAGD,IAAI,CAACE,IAAL,CAAUC,IAAV,CAAeC,EAAf,IAAqB,KAApC;EACA,iBAAUH,MAAV,cAAoBF,KAAK,CAACM,OAA1B;AACH,CAND;;AAQA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,qCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,iBADR;IAENF,IAAI,EAAEb,CAAF,kGAFE;IAGNgB,WAAW,EAAEhB,CAAF,gHAHL;IAINiB,MAJM,wBAIY;MAAA,IAATb,KAAS,QAATA,KAAS;MACd,OACIA,KAAK,CAACQ,IAAN,KAAe,WAAf,IACA,CAACR,KAAK,CAACc,cADP,IAEA,CAAC,IAAAC,YAAA,EAAIf,KAAJ,EAAW,0BAAX,CAHL;IAKH,CAVK;IAWNgB,MAXM,yBAWqB;MAAA,IAAlBhB,KAAkB,SAAlBA,KAAkB;MAAA,IAAXiB,OAAW,SAAXA,OAAW;MACvB,IAAMC,IAAI,GAAGD,OAAO,EAApB;MAEA,IAAME,QAAQ,GAAG,IAAAC,cAAA,EAAQ,YAAM;QAC3B;AAChB;AACA;AACA;QACgB;QACA,OAAO,IAAAC,qCAAA,EAAsBC,gBAAA,CAAQC,MAAR,CAAe,gBAAf,EAAiCC,GAAjC,CAAqC,UAAAC,EAAE;UAAA,OAAIA,EAAE,CAACC,MAAP;QAAA,CAAvC,CAAtB,CAAP;MACH,CAPgB,EAOd,EAPc,CAAjB;MASA,oBACI,6BAAC,IAAD,QACK,UAAAzB,IAAI,EAAI;QACL,oBACI,6BAAC,8BAAD;UACI,GAAG,EAAEF,MAAM,CAACC,KAAD,EAAQC,IAAR;QADf,GAEQkB,QAFR,EAGQlB,IAHR;UAII,QAAQ,EAAEA,IAAI,CAAC0B,QAJnB;UAKI,KAAK,EAAE3B,KAAK,CAAC4B,KALjB;UAMI,WAAW,EAAE5B,KAAK,CAAC6B,eANvB;UAOI,WAAW,EAAE7B,KAAK,CAAC8B,QAPvB;UAQI,2CAAkC9B,KAAK,CAAC4B,KAAxC;QARJ,GADJ;MAYH,CAdL,CADJ;IAkBH;EAzCK;AAH+B,CAA7C;eAgDerB,M"}

package/admin/plugins/fieldRenderers/richText/richTextInputs.js

@@ -34,9 +34,9 @@ var _templateObject, _templateObject2;
 var t = _i18n.i18n.ns("app-headless-cms/admin/fields/rich-text");
 
 var getKey = function getKey(field, bind, index) {
-  var _index, _index$form, _index$form$data;
+  var _bind$index$form, _bind$index$form$data;
 
-  var formId = ((_index = bind.index) === null || _index === void 0 ? void 0 : (_index$form = _index.form) === null || _index$form === void 0 ? void 0 : (_index$form$data = _index$form.data) === null || _index$form$data === void 0 ? void 0 : _index$form$data.id) || "new";
+  var formId = ((_bind$index$form = bind.index.form) === null || _bind$index$form === void 0 ? void 0 : (_bind$index$form$data = _bind$index$form.data) === null || _bind$index$form$data === void 0 ? void 0 : _bind$index$form$data.id) || "new";
   return "".concat(formId, ".").concat(field.fieldId, ".").concat(index);
 };