@webiny/app-headless-cms 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/admin/components/ContentModelEditor/FieldsSidebar.js

@@ -1,109 +1,84 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FieldsSidebar = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _plugins = require("@webiny/plugins");
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _Icon = require("@webiny/ui/Icon");
-
-var _Draggable = _interopRequireDefault(require("../Draggable"));
-
-var FieldContainer = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e1s2p6i00",
-  label: "FieldContainer"
-})({
-  padding: "10px 15px",
-  marginBottom: 20,
-  display: "flex",
-  width: "100%",
-  backgroundColor: "var(--mdc-theme-on-background)",
-  borderRadius: 15,
-  boxSizing: "border-box",
-  cursor: "grab",
-  opacity: 1,
-  transition: "opacity 225ms",
-  "&:hover": {
-    opacity: 0.8
-  },
-  "&:last-child": {
-    marginBottom: 0
-  }
-});
-var FileInfo = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e1s2p6i01",
-  label: "FileInfo"
-})({});
-var FieldLabel = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e1s2p6i02",
-  label: "FieldLabel"
-})({
-  textTransform: "uppercase",
-  lineHeight: "145%",
-  color: "var(--mdc-theme-on-surface)"
-});
-var FieldDescription = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e1s2p6i03",
-  label: "FieldDescription"
-})({
-  fontSize: 14,
-  color: "var(--mdc-theme-text-secondary-on-background)"
-});
-var FieldHandle = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e1s2p6i04",
-  label: "FieldHandle"
-})({
-  marginRight: 15,
-  color: "var(--mdc-theme-on-surface)"
-});
-
-var Field = function Field(props) {
-  var onFieldDragStart = props.onFieldDragStart,
-      _props$fieldType = props.fieldType,
-      type = _props$fieldType.type,
-      label = _props$fieldType.label,
-      icon = _props$fieldType.icon,
-      description = _props$fieldType.description;
-  return /*#__PURE__*/_react.default.createElement(_Draggable.default, {
-    beginDrag: {
-      type: "newField",
-      fieldType: type
-    }
-  }, function (_ref) {
-    var drag = _ref.drag;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: drag,
-      style: {
-        marginBottom: 10
-      },
-      "data-testid": "cms-editor-fields-field-".concat(type),
-      onDragStart: onFieldDragStart
-    }, /*#__PURE__*/_react.default.createElement(FieldContainer, null, /*#__PURE__*/_react.default.createElement(FieldHandle, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
-      icon: icon
-    })), /*#__PURE__*/_react.default.createElement(FileInfo, null, /*#__PURE__*/_react.default.createElement(FieldLabel, null, label), /*#__PURE__*/_react.default.createElement(FieldDescription, null, description))));
-  });
+import react from "react";
+import { plugins } from "@webiny/plugins";
+import Draggable from "../Draggable.js";
+import { Heading, Icon, Text } from "@webiny/admin-ui";
+const Field = (props)=>{
+    const { onFieldDragStart, fieldType: { type, label, icon, description } } = props;
+    return /*#__PURE__*/ react.createElement(Draggable, {
+        beginDrag: {
+            type: "newField",
+            fieldType: type
+        }
+    }, ({ drag })=>/*#__PURE__*/ react.createElement("div", {
+            ref: (element)=>{
+                drag(element);
+            },
+            "data-testid": `cms-editor-fields-field-${type}`,
+            onDragStart: onFieldDragStart,
+            className: "bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity"
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center gap-md"
+        }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Icon, {
+            icon: icon,
+            label: label,
+            size: "md",
+            color: "neutral-light"
+        })), /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, {
+            level: 6
+        }, label), /*#__PURE__*/ react.createElement(Text, {
+            size: "sm",
+            className: "text-neutral-strong"
+        }, description)))));
 };
-
-var FieldsSidebar = function FieldsSidebar(_ref2) {
-  var onFieldDragStart = _ref2.onFieldDragStart;
-
-  var fieldTypePlugin = _plugins.plugins.byType("cms-editor-field-type");
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fieldTypePlugin.map(function (fieldPlugin) {
-    return /*#__PURE__*/_react.default.createElement(Field, {
-      key: fieldPlugin.field.type,
-      fieldType: fieldPlugin.field,
-      onFieldDragStart: onFieldDragStart
-    });
-  }));
+const LayoutFieldItem = (props)=>{
+    const { onFieldDragStart, layoutField: { type, label, icon, description } } = props;
+    return /*#__PURE__*/ react.createElement(Draggable, {
+        beginDrag: {
+            type: "newLayoutField",
+            layoutFieldType: type
+        }
+    }, ({ drag })=>/*#__PURE__*/ react.createElement("div", {
+            ref: (element)=>{
+                drag(element);
+            },
+            "data-testid": `cms-editor-fields-layout-field-${type}`,
+            onDragStart: onFieldDragStart,
+            className: "bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity"
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center gap-md"
+        }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Icon, {
+            icon: icon,
+            label: label,
+            size: "md",
+            color: "neutral-light"
+        })), /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, {
+            level: 6
+        }, label), /*#__PURE__*/ react.createElement(Text, {
+            size: "sm",
+            className: "text-neutral-strong"
+        }, description)))));
+};
+const FieldsSidebar = ({ onFieldDragStart })=>{
+    const fieldTypePlugin = plugins.byType("cms-editor-field-type").filter((p)=>!p.field.hideInAdmin);
+    const layoutFieldPlugins = plugins.byType("cms-editor-layout-field-type");
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "md",
+        className: "text-neutral-strong uppercase mt-0 mb-md font-semibold"
+    }, "Fields"), fieldTypePlugin.map((fieldPlugin)=>/*#__PURE__*/ react.createElement(Field, {
+            key: fieldPlugin.field.type,
+            fieldType: fieldPlugin.field,
+            onFieldDragStart: onFieldDragStart
+        })), layoutFieldPlugins.length > 0 && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "md",
+        className: "text-neutral-strong uppercase my-md font-semibold"
+    }, "Layout"), layoutFieldPlugins.map((lp)=>/*#__PURE__*/ react.createElement(LayoutFieldItem, {
+            key: lp.field.type,
+            layoutField: lp.field,
+            onFieldDragStart: onFieldDragStart
+        }))));
 };
+export { FieldsSidebar };
 
-exports.FieldsSidebar = FieldsSidebar;
+//# sourceMappingURL=FieldsSidebar.js.map

package/admin/components/ContentModelEditor/FieldsSidebar.js.map

@@ -1 +1 @@
-{"version":3,"names":["FieldContainer","styled","padding","marginBottom","display","width","backgroundColor","borderRadius","boxSizing","cursor","opacity","transition","FileInfo","FieldLabel","textTransform","lineHeight","color","FieldDescription","fontSize","FieldHandle","marginRight","Field","props","onFieldDragStart","fieldType","type","label","icon","description","drag","FieldsSidebar","fieldTypePlugin","plugins","byType","map","fieldPlugin","field"],"sources":["FieldsSidebar.tsx"],"sourcesContent":["import React, { DragEventHandler } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport styled from \"@emotion/styled\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport Draggable from \"../Draggable\";\nimport { CmsEditorFieldTypePlugin } from \"~/types\";\n\nconst FieldContainer = styled(\"div\")({\n    padding: \"10px 15px\",\n    marginBottom: 20,\n    display: \"flex\",\n    width: \"100%\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 15,\n    boxSizing: \"border-box\",\n    cursor: \"grab\",\n    opacity: 1,\n    transition: \"opacity 225ms\",\n    \"&:hover\": {\n        opacity: 0.8\n    },\n    \"&:last-child\": {\n        marginBottom: 0\n    }\n});\n\nconst FileInfo = styled(\"div\")({});\n\nconst FieldLabel = styled(\"div\")({\n    textTransform: \"uppercase\",\n    lineHeight: \"145%\",\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst FieldDescription = styled(\"div\")({\n    fontSize: 14,\n    color: \"var(--mdc-theme-text-secondary-on-background)\"\n});\n\nconst FieldHandle = styled(\"div\")({\n    marginRight: 15,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\ninterface FieldProps {\n    onFieldDragStart: DragEventHandler;\n    fieldType: CmsEditorFieldTypePlugin[\"field\"];\n}\nconst Field: React.FC<FieldProps> = props => {\n    const {\n        onFieldDragStart,\n        fieldType: { type, label, icon, description }\n    } = props;\n    return (\n        <Draggable beginDrag={{ type: \"newField\", fieldType: type }}>\n            {({ drag }) => (\n                <div\n                    ref={drag}\n                    style={{ marginBottom: 10 }}\n                    data-testid={`cms-editor-fields-field-${type}`}\n                    onDragStart={onFieldDragStart}\n                >\n                    <FieldContainer>\n                        <FieldHandle>\n                            <Icon icon={icon as React.ReactElement} />\n                        </FieldHandle>\n                        <FileInfo>\n                            <FieldLabel>{label}</FieldLabel>\n                            <FieldDescription>{description}</FieldDescription>\n                        </FileInfo>\n                    </FieldContainer>\n                </div>\n            )}\n        </Draggable>\n    );\n};\n\ninterface FieldsSidebarProps {\n    onFieldDragStart: DragEventHandler;\n}\nexport const FieldsSidebar: React.FC<FieldsSidebarProps> = ({ onFieldDragStart }) => {\n    const fieldTypePlugin = plugins.byType<CmsEditorFieldTypePlugin>(\"cms-editor-field-type\");\n\n    return (\n        <React.Fragment>\n            {fieldTypePlugin.map(fieldPlugin => (\n                <Field\n                    key={fieldPlugin.field.type}\n                    fieldType={fieldPlugin.field}\n                    onFieldDragStart={onFieldDragStart}\n                />\n            ))}\n        </React.Fragment>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAGA,IAAMA,cAAc,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACjCC,OAAO,EAAE,WADwB;EAEjCC,YAAY,EAAE,EAFmB;EAGjCC,OAAO,EAAE,MAHwB;EAIjCC,KAAK,EAAE,MAJ0B;EAKjCC,eAAe,EAAE,gCALgB;EAMjCC,YAAY,EAAE,EANmB;EAOjCC,SAAS,EAAE,YAPsB;EAQjCC,MAAM,EAAE,MARyB;EASjCC,OAAO,EAAE,CATwB;EAUjCC,UAAU,EAAE,eAVqB;EAWjC,WAAW;IACPD,OAAO,EAAE;EADF,CAXsB;EAcjC,gBAAgB;IACZP,YAAY,EAAE;EADF;AAdiB,CAAjB,CAApB;AAmBA,IAAMS,QAAQ,oBAAGX,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB,EAAjB,CAAd;AAEA,IAAMY,UAAU,oBAAGZ,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC7Ba,aAAa,EAAE,WADc;EAE7BC,UAAU,EAAE,MAFiB;EAG7BC,KAAK,EAAE;AAHsB,CAAjB,CAAhB;AAMA,IAAMC,gBAAgB,oBAAGhB,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACnCiB,QAAQ,EAAE,EADyB;EAEnCF,KAAK,EAAE;AAF4B,CAAjB,CAAtB;AAKA,IAAMG,WAAW,oBAAGlB,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC9BmB,WAAW,EAAE,EADiB;EAE9BJ,KAAK,EAAE;AAFuB,CAAjB,CAAjB;;AASA,IAAMK,KAA2B,GAAG,SAA9BA,KAA8B,CAAAC,KAAK,EAAI;EACzC,IACIC,gBADJ,GAGID,KAHJ,CACIC,gBADJ;EAAA,uBAGID,KAHJ,CAEIE,SAFJ;EAAA,IAEiBC,IAFjB,oBAEiBA,IAFjB;EAAA,IAEuBC,KAFvB,oBAEuBA,KAFvB;EAAA,IAE8BC,IAF9B,oBAE8BA,IAF9B;EAAA,IAEoCC,WAFpC,oBAEoCA,WAFpC;EAIA,oBACI,6BAAC,kBAAD;IAAW,SAAS,EAAE;MAAEH,IAAI,EAAE,UAAR;MAAoBD,SAAS,EAAEC;IAA/B;EAAtB,GACK;IAAA,IAAGI,IAAH,QAAGA,IAAH;IAAA,oBACG;MACI,GAAG,EAAEA,IADT;MAEI,KAAK,EAAE;QAAE1B,YAAY,EAAE;MAAhB,CAFX;MAGI,iDAAwCsB,IAAxC,CAHJ;MAII,WAAW,EAAEF;IAJjB,gBAMI,6BAAC,cAAD,qBACI,6BAAC,WAAD,qBACI,6BAAC,UAAD;MAAM,IAAI,EAAEI;IAAZ,EADJ,CADJ,eAII,6BAAC,QAAD,qBACI,6BAAC,UAAD,QAAaD,KAAb,CADJ,eAEI,6BAAC,gBAAD,QAAmBE,WAAnB,CAFJ,CAJJ,CANJ,CADH;EAAA,CADL,CADJ;AAsBH,CA3BD;;AAgCO,IAAME,aAA2C,GAAG,SAA9CA,aAA8C,QAA0B;EAAA,IAAvBP,gBAAuB,SAAvBA,gBAAuB;;EACjF,IAAMQ,eAAe,GAAGC,gBAAA,CAAQC,MAAR,CAAyC,uBAAzC,CAAxB;;EAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,QACKF,eAAe,CAACG,GAAhB,CAAoB,UAAAC,WAAW;IAAA,oBAC5B,6BAAC,KAAD;MACI,GAAG,EAAEA,WAAW,CAACC,KAAZ,CAAkBX,IAD3B;MAEI,SAAS,EAAEU,WAAW,CAACC,KAF3B;MAGI,gBAAgB,EAAEb;IAHtB,EAD4B;EAAA,CAA/B,CADL,CADJ;AAWH,CAdM"}
+{"version":3,"file":"admin/components/ContentModelEditor/FieldsSidebar.js","sources":["../../../../src/admin/components/ContentModelEditor/FieldsSidebar.tsx"],"sourcesContent":["import type { DragEventHandler } from \"react\";\nimport React from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport Draggable from \"../Draggable.js\";\nimport type { CmsModelFieldTypePlugin, CmsModelLayoutFieldTypePlugin } from \"~/types.js\";\nimport { Heading, Icon, Text } from \"@webiny/admin-ui\";\n\ninterface FieldProps {\n    onFieldDragStart: DragEventHandler;\n    fieldType: CmsModelFieldTypePlugin[\"field\"];\n}\n\nconst Field = (props: FieldProps) => {\n    const {\n        onFieldDragStart,\n        fieldType: { type, label, icon, description }\n    } = props;\n    return (\n        <Draggable beginDrag={{ type: \"newField\", fieldType: type }}>\n            {({ drag }) => (\n                <div\n                    ref={element => {\n                        drag(element);\n                    }}\n                    data-testid={`cms-editor-fields-field-${type}`}\n                    onDragStart={onFieldDragStart}\n                    className={\n                        \"bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity\"\n                    }\n                >\n                    <div className={\"flex items-center gap-md\"}>\n                        <div>\n                            <Icon\n                                icon={icon as React.ReactElement}\n                                label={label}\n                                size={\"md\"}\n                                color={\"neutral-light\"}\n                            />\n                        </div>\n                        <div>\n                            <Heading level={6}>{label}</Heading>\n                            <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                                {description}\n                            </Text>\n                        </div>\n                    </div>\n                </div>\n            )}\n        </Draggable>\n    );\n};\n\ninterface LayoutFieldItemProps {\n    onFieldDragStart: DragEventHandler;\n    layoutField: CmsModelLayoutFieldTypePlugin[\"field\"];\n}\n\nconst LayoutFieldItem = (props: LayoutFieldItemProps) => {\n    const {\n        onFieldDragStart,\n        layoutField: { type, label, icon, description }\n    } = props;\n    return (\n        <Draggable beginDrag={{ type: \"newLayoutField\", layoutFieldType: type }}>\n            {({ drag }) => (\n                <div\n                    ref={element => {\n                        drag(element);\n                    }}\n                    data-testid={`cms-editor-fields-layout-field-${type}`}\n                    onDragStart={onFieldDragStart}\n                    className={\n                        \"bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity\"\n                    }\n                >\n                    <div className={\"flex items-center gap-md\"}>\n                        <div>\n                            <Icon icon={icon} label={label} size={\"md\"} color={\"neutral-light\"} />\n                        </div>\n                        <div>\n                            <Heading level={6}>{label}</Heading>\n                            <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                                {description}\n                            </Text>\n                        </div>\n                    </div>\n                </div>\n            )}\n        </Draggable>\n    );\n};\n\ninterface FieldsSidebarProps {\n    onFieldDragStart: DragEventHandler;\n}\n\nexport const FieldsSidebar = ({ onFieldDragStart }: FieldsSidebarProps) => {\n    const fieldTypePlugin = plugins\n        .byType<CmsModelFieldTypePlugin>(\"cms-editor-field-type\")\n        .filter(p => !p.field.hideInAdmin);\n\n    const layoutFieldPlugins = plugins.byType<CmsModelLayoutFieldTypePlugin>(\n        \"cms-editor-layout-field-type\"\n    );\n\n    return (\n        <>\n            <Text\n                as=\"div\"\n                size={\"md\"}\n                className={\"text-neutral-strong uppercase mt-0 mb-md font-semibold\"}\n            >\n                Fields\n            </Text>\n            {fieldTypePlugin.map(fieldPlugin => (\n                <Field\n                    key={fieldPlugin.field.type}\n                    fieldType={fieldPlugin.field}\n                    onFieldDragStart={onFieldDragStart}\n                />\n            ))}\n            {layoutFieldPlugins.length > 0 && (\n                <>\n                    <Text\n                        as=\"div\"\n                        size={\"md\"}\n                        className={\"text-neutral-strong uppercase my-md font-semibold\"}\n                    >\n                        Layout\n                    </Text>\n                    {layoutFieldPlugins.map(lp => (\n                        <LayoutFieldItem\n                            key={lp.field.type}\n                            layoutField={lp.field}\n                            onFieldDragStart={onFieldDragStart}\n                        />\n                    ))}\n                </>\n            )}\n        </>\n    );\n};\n"],"names":["Field","props","onFieldDragStart","type","label","icon","description","Draggable","drag","element","Icon","Heading","Text","LayoutFieldItem","FieldsSidebar","fieldTypePlugin","plugins","p","layoutFieldPlugins","fieldPlugin","lp"],"mappings":";;;;AAYA,MAAMA,QAAQ,CAACC;IACX,MAAM,EACFC,gBAAgB,EAChB,WAAW,EAAEC,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,EAChD,GAAGL;IACJ,OAAO,WAAP,GACI,oBAACM,WAASA;QAAC,WAAW;YAAE,MAAM;YAAY,WAAWJ;QAAK;OACrD,CAAC,EAAEK,IAAI,EAAE,iBACN,oBAAC;YACG,KAAKC,CAAAA;gBACDD,KAAKC;YACT;YACA,eAAa,CAAC,wBAAwB,EAAEN,MAAM;YAC9C,aAAaD;YACb,WACI;yBAGJ,oBAAC;YAAI,WAAW;yBACZ,oBAAC,2BACG,oBAACQ,MAAIA;YACD,MAAML;YACN,OAAOD;YACP,MAAM;YACN,OAAO;2BAGf,oBAAC,2BACG,oBAACO,SAAOA;YAAC,OAAO;WAAIP,QAAAA,WAAAA,GACpB,oBAACQ,MAAIA;YAAC,MAAM;YAAM,WAAW;WACxBN;AAQjC;AAOA,MAAMO,kBAAkB,CAACZ;IACrB,MAAM,EACFC,gBAAgB,EAChB,aAAa,EAAEC,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,EAClD,GAAGL;IACJ,OAAO,WAAP,GACI,oBAACM,WAASA;QAAC,WAAW;YAAE,MAAM;YAAkB,iBAAiBJ;QAAK;OACjE,CAAC,EAAEK,IAAI,EAAE,iBACN,oBAAC;YACG,KAAKC,CAAAA;gBACDD,KAAKC;YACT;YACA,eAAa,CAAC,+BAA+B,EAAEN,MAAM;YACrD,aAAaD;YACb,WACI;yBAGJ,oBAAC;YAAI,WAAW;yBACZ,oBAAC,2BACG,oBAACQ,MAAIA;YAAC,MAAML;YAAM,OAAOD;YAAO,MAAM;YAAM,OAAO;2BAEvD,oBAAC,2BACG,oBAACO,SAAOA;YAAC,OAAO;WAAIP,QAAAA,WAAAA,GACpB,oBAACQ,MAAIA;YAAC,MAAM;YAAM,WAAW;WACxBN;AAQjC;AAMO,MAAMQ,gBAAgB,CAAC,EAAEZ,gBAAgB,EAAsB;IAClE,MAAMa,kBAAkBC,QAAAA,MACb,CAA0B,yBAChC,MAAM,CAACC,CAAAA,IAAK,CAACA,EAAE,KAAK,CAAC,WAAW;IAErC,MAAMC,qBAAqBF,QAAQ,MAAM,CACrC;IAGJ,OAAO,WAAP,GACI,wDACI,oBAACJ,MAAIA;QACD,IAAG;QACH,MAAM;QACN,WAAW;OACd,WAGAG,gBAAgB,GAAG,CAACI,CAAAA,cAAAA,WAAAA,GACjB,oBAACnB,OAAKA;YACF,KAAKmB,YAAY,KAAK,CAAC,IAAI;YAC3B,WAAWA,YAAY,KAAK;YAC5B,kBAAkBjB;aAGzBgB,mBAAmB,MAAM,GAAG,KAAK,WAAL,GACzB,wDACI,oBAACN,MAAIA;QACD,IAAG;QACH,MAAM;QACN,WAAW;OACd,WAGAM,mBAAmB,GAAG,CAACE,CAAAA,KAAAA,WAAAA,GACpB,oBAACP,iBAAeA;YACZ,KAAKO,GAAG,KAAK,CAAC,IAAI;YAClB,aAAaA,GAAG,KAAK;YACrB,kBAAkBlB;;AAO9C"}

package/admin/components/ContentModelEditor/Header.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const EditorBar: React.FC;
+declare const EditorBar: () => React.JSX.Element;
 export default EditorBar;

package/admin/components/ContentModelEditor/Header.js

@@ -1,41 +1,16 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _TopAppBar = require("@webiny/ui/TopAppBar");
-
-var _plugins = require("@webiny/app/plugins");
-
-var _emotion = require("emotion");
-
-var topBar = /*#__PURE__*/(0, _emotion.css)({
-  boxShadow: "1px 0px 5px 0px rgba(128,128,128,1)"
-}, "label:topBar;");
-
-var EditorBar = function EditorBar() {
-  return /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBar, {
-    className: topBar,
-    fixed: true,
-    "data-testid": "cms-editor-top-bar"
-  }, /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
-    style: {
-      width: "50%"
-    },
-    alignEnd: true
-  }, (0, _plugins.renderPlugins)("content-model-editor-default-bar-left")), /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
-    style: {
-      width: "50%"
-    },
-    alignEnd: true
-  }, (0, _plugins.renderPlugins)("content-model-editor-default-bar-right")));
-};
-
-var _default = EditorBar;
-exports.default = _default;
+import react from "react";
+import { HeaderBar } from "@webiny/admin-ui";
+import { renderPlugins } from "@webiny/app/plugins/index.js";
+const EditorBar = ()=>/*#__PURE__*/ react.createElement(HeaderBar, {
+        "data-testid": "cms-editor-top-bar",
+        start: /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center justify-start gap-sm"
+        }, renderPlugins("content-model-editor-default-bar-left")),
+        end: /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center justify-end gap-xs"
+        }, renderPlugins("content-model-editor-default-bar-right"))
+    });
+const Header = EditorBar;
+export default Header;
+
+//# sourceMappingURL=Header.js.map

package/admin/components/ContentModelEditor/Header.js.map

@@ -1 +1 @@
-{"version":3,"names":["topBar","css","boxShadow","EditorBar","width","renderPlugins"],"sources":["Header.tsx"],"sourcesContent":["import React from \"react\";\nimport { TopAppBar, TopAppBarSection } from \"@webiny/ui/TopAppBar\";\nimport { renderPlugins } from \"@webiny/app/plugins\";\n\nimport { css } from \"emotion\";\n\nconst topBar = css({\n    boxShadow: \"1px 0px 5px 0px rgba(128,128,128,1)\"\n});\n\nconst EditorBar: React.FC = () => {\n    return (\n        <TopAppBar className={topBar} fixed data-testid={\"cms-editor-top-bar\"}>\n            <TopAppBarSection style={{ width: \"50%\" }} alignEnd>\n                {renderPlugins(\"content-model-editor-default-bar-left\")}\n            </TopAppBarSection>\n\n            <TopAppBarSection style={{ width: \"50%\" }} alignEnd>\n                {renderPlugins(\"content-model-editor-default-bar-right\")}\n            </TopAppBarSection>\n        </TopAppBar>\n    );\n};\n\nexport default EditorBar;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,MAAM,gBAAG,IAAAC,YAAA,EAAI;EACfC,SAAS,EAAE;AADI,CAAJ,kBAAf;;AAIA,IAAMC,SAAmB,GAAG,SAAtBA,SAAsB,GAAM;EAC9B,oBACI,6BAAC,oBAAD;IAAW,SAAS,EAAEH,MAAtB;IAA8B,KAAK,MAAnC;IAAoC,eAAa;EAAjD,gBACI,6BAAC,2BAAD;IAAkB,KAAK,EAAE;MAAEI,KAAK,EAAE;IAAT,CAAzB;IAA2C,QAAQ;EAAnD,GACK,IAAAC,sBAAA,EAAc,uCAAd,CADL,CADJ,eAKI,6BAAC,2BAAD;IAAkB,KAAK,EAAE;MAAED,KAAK,EAAE;IAAT,CAAzB;IAA2C,QAAQ;EAAnD,GACK,IAAAC,sBAAA,EAAc,wCAAd,CADL,CALJ,CADJ;AAWH,CAZD;;eAceF,S"}
+{"version":3,"file":"admin/components/ContentModelEditor/Header.js","sources":["../../../../src/admin/components/ContentModelEditor/Header.tsx"],"sourcesContent":["import React from \"react\";\nimport { HeaderBar } from \"@webiny/admin-ui\";\nimport { renderPlugins } from \"@webiny/app/plugins/index.js\";\n\nconst EditorBar = () => {\n    return (\n        <HeaderBar\n            data-testid={\"cms-editor-top-bar\"}\n            start={\n                <div className={\"flex items-center justify-start gap-sm\"}>\n                    {renderPlugins(\"content-model-editor-default-bar-left\")}\n                </div>\n            }\n            end={\n                <div className={\"flex items-center justify-end gap-xs\"}>\n                    {renderPlugins(\"content-model-editor-default-bar-right\")}\n                </div>\n            }\n        />\n    );\n};\n\nexport default EditorBar;\n"],"names":["EditorBar","HeaderBar","renderPlugins"],"mappings":";;;AAIA,MAAMA,YAAY,IACP,WAAP,GACI,oBAACC,WAASA;QACN,eAAa;QACb,qBACI,oBAAC;YAAI,WAAW;WACXC,cAAc;QAGvB,mBACI,oBAAC;YAAI,WAAW;WACXA,cAAc;;AAOnC,eAAeF"}

package/admin/components/ContentModelEditor/ModelIsBeingDeletedError/ModelIsBeingDeletedError.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { CmsModel } from "@webiny/app-headless-cms-common/types/index.js";
+export interface ImageProps {
+    className?: string;
+    alt?: string;
+}
+export interface IModelIsBeingDeletedProps {
+    model: Pick<CmsModel, "name">;
+}
+export declare const ModelIsBeingDeletedError: (props: IModelIsBeingDeletedProps) => React.JSX.Element;

package/admin/components/ContentModelEditor/ModelIsBeingDeletedError/ModelIsBeingDeletedError.js

@@ -0,0 +1,57 @@
+import react_helmet from "react-helmet";
+import { css } from "@emotion/css";
+import styled from "@emotion/styled";
+import { Text } from "@webiny/admin-ui";
+import SecureRouteError from "./SecureRouteError.js";
+import { useRouter } from "@webiny/app-admin";
+import { Routes } from "../../../../routes.js";
+import * as __rspack_external_react from "react";
+const ContentWrapper = styled("div")({
+    display: "block",
+    paddingTop: "15%",
+    textAlign: "center",
+    margin: "auto"
+});
+const styles = {
+    authErrorImgStyle: css({
+        width: "192px",
+        paddingBottom: "24px"
+    }),
+    bodyStyle: css({
+        color: "var(--mdc-theme-text-primary-on-background)",
+        display: "block",
+        " strong": {
+            fontWeight: "bold"
+        }
+    }),
+    linkStyle: css({
+        cursor: "pointer",
+        textDecoration: "none",
+        "&:hover": {
+            textDecoration: "underline"
+        }
+    })
+};
+const Image = ({ className = styles.authErrorImgStyle, alt = "Not Authorized" })=>/*#__PURE__*/ __rspack_external_react.createElement("img", {
+        className: className,
+        src: SecureRouteError,
+        alt: alt
+    });
+const ModelIsBeingDeletedError = (props)=>{
+    const { goToRoute } = useRouter();
+    const goBack = ()=>{
+        goToRoute(Routes.ContentModels.List);
+    };
+    return /*#__PURE__*/ __rspack_external_react.createElement(ContentWrapper, null, /*#__PURE__*/ __rspack_external_react.createElement(react_helmet, {
+        title: "Cannot access the model!"
+    }), /*#__PURE__*/ __rspack_external_react.createElement(Image, null), /*#__PURE__*/ __rspack_external_react.createElement(Text, {
+        size: "md",
+        className: styles.bodyStyle
+    }, "Model ", /*#__PURE__*/ __rspack_external_react.createElement("strong", null, props.model.name), " is being deleted and cannot be accessed or changed."), /*#__PURE__*/ __rspack_external_react.createElement("p", null, /*#__PURE__*/ __rspack_external_react.createElement("br", null)), /*#__PURE__*/ __rspack_external_react.createElement("a", {
+        onClick: goBack,
+        className: styles.linkStyle
+    }, "Go back"));
+};
+export { ModelIsBeingDeletedError };
+
+//# sourceMappingURL=ModelIsBeingDeletedError.js.map

package/admin/components/ContentModelEditor/ModelIsBeingDeletedError/ModelIsBeingDeletedError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/ContentModelEditor/ModelIsBeingDeletedError/ModelIsBeingDeletedError.js","sources":["../../../../../src/admin/components/ContentModelEditor/ModelIsBeingDeletedError/ModelIsBeingDeletedError.tsx"],"sourcesContent":["import * as React from \"react\";\nimport Helmet from \"react-helmet\";\nimport { css } from \"@emotion/css\";\nimport styled from \"@emotion/styled\";\nimport { Text } from \"@webiny/admin-ui\";\nimport authErrorImg from \"./SecureRouteError.svg\";\nimport type { CmsModel } from \"@webiny/app-headless-cms-common/types/index.js\";\nimport { useRouter } from \"@webiny/app-admin\";\nimport { Routes } from \"~/routes.js\";\n\nconst ContentWrapper = styled(\"div\")({\n    display: \"block\",\n    paddingTop: \"15%\",\n    textAlign: \"center\",\n    margin: \"auto\"\n});\n\nconst styles = {\n    authErrorImgStyle: css({\n        width: \"192px\",\n        paddingBottom: \"24px\"\n    }),\n    bodyStyle: css({\n        color: \"var(--mdc-theme-text-primary-on-background)\",\n        display: \"block\",\n        \" strong\": {\n            fontWeight: \"bold\"\n        }\n    }),\n    linkStyle: css({\n        cursor: \"pointer\",\n        textDecoration: \"none\",\n        \"&:hover\": {\n            textDecoration: \"underline\"\n        }\n    })\n};\n\nexport interface ImageProps {\n    className?: string;\n    alt?: string;\n}\n\nconst Image = ({ className = styles.authErrorImgStyle, alt = \"Not Authorized\" }: ImageProps) => {\n    return <img className={className} src={authErrorImg} alt={alt} />;\n};\n\nexport interface IModelIsBeingDeletedProps {\n    model: Pick<CmsModel, \"name\">;\n}\n\nexport const ModelIsBeingDeletedError = (props: IModelIsBeingDeletedProps) => {\n    const { goToRoute } = useRouter();\n\n    const goBack = (): void => {\n        goToRoute(Routes.ContentModels.List);\n    };\n\n    return (\n        <ContentWrapper>\n            <Helmet title={\"Cannot access the model!\"} />\n            <Image />\n\n            <Text size={\"md\"} className={styles.bodyStyle}>\n                Model <strong>{props.model.name}</strong> is being deleted and cannot be accessed or\n                changed.\n            </Text>\n\n            <p>\n                <br />\n            </p>\n\n            <a onClick={goBack} className={styles.linkStyle}>\n                Go back\n            </a>\n        </ContentWrapper>\n    );\n};\n"],"names":["ContentWrapper","styled","styles","css","Image","className","alt","authErrorImg","ModelIsBeingDeletedError","props","goToRoute","useRouter","goBack","Routes","Helmet","Text"],"mappings":";;;;;;;;AAUA,MAAMA,iBAAiBC,OAAO,OAAO;IACjC,SAAS;IACT,YAAY;IACZ,WAAW;IACX,QAAQ;AACZ;AAEA,MAAMC,SAAS;IACX,mBAAmBC,IAAI;QACnB,OAAO;QACP,eAAe;IACnB;IACA,WAAWA,IAAI;QACX,OAAO;QACP,SAAS;QACT,WAAW;YACP,YAAY;QAChB;IACJ;IACA,WAAWA,IAAI;QACX,QAAQ;QACR,gBAAgB;QAChB,WAAW;YACP,gBAAgB;QACpB;IACJ;AACJ;AAOA,MAAMC,QAAQ,CAAC,EAAEC,YAAYH,OAAO,iBAAiB,EAAEI,MAAM,gBAAgB,EAAc,GAChF,WAAP,GAAO,sCAAC;QAAI,WAAWD;QAAW,KAAKE;QAAc,KAAKD;;AAOvD,MAAME,2BAA2B,CAACC;IACrC,MAAM,EAAEC,SAAS,EAAE,GAAGC;IAEtB,MAAMC,SAAS;QACXF,UAAUG,OAAO,aAAa,CAAC,IAAI;IACvC;IAEA,OAAO,WAAP,GACI,sCAACb,gBAAcA,MAAAA,WAAAA,GACX,sCAACc,cAAMA;QAAC,OAAO;sBACf,sCAACV,OAAKA,OAAAA,WAAAA,GAEN,sCAACW,MAAIA;QAAC,MAAM;QAAM,WAAWb,OAAO,SAAS;OAAE,wBACrC,sCAAC,gBAAQO,MAAM,KAAK,CAAC,IAAI,GAAU,uEAI7C,sCAAC,yBACG,sCAAC,4BAGL,sCAAC;QAAE,SAASG;QAAQ,WAAWV,OAAO,SAAS;OAAE;AAK7D"}