@webiny/app-headless-cms 6.0.0-rc.2 → 6.0.0-rc.3

package/admin/components/FieldEditor/EditFieldDialog/AppearanceTab.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","i18n","css","validation","useBind","RendererOptions","useRendererPlugins","useModelField","RadioGroup","Text","Grid","Heading","t","ns","style","noComponentsMessage","process","env","NODE_ENV","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","radioContainer","AppearanceTab","renderers","field","rendererName","validate","create","selectedPlugin","value","find","pl","renderer","undefined","length","createElement","Column","span","className","onChange","console","info","fieldId","id","list","predefinedValues","enabled","Fragment","level","size","Object","assign","items","map","item","label","as","description","plugin"],"sources":["AppearanceTab.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { css } from \"@emotion/css\";\nimport { validation } from \"@webiny/validation\";\nimport { useBind } from \"@webiny/form\";\nimport { RendererOptions } from \"./AppearanceTab/RendererOptions.js\";\nimport { useRendererPlugins } from \"./useRendererPlugins.js\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { RadioGroup, Text, Grid, Heading } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-model-editor/tabs/appearance-tab\");\n\nconst style = {\n    noComponentsMessage: css({\n        textAlign: \"center\",\n        padding: 25\n    }),\n    radioContainer: css({\n        marginBottom: 10,\n        display: \"flex\"\n    })\n};\n\nconst AppearanceTab = () => {\n    const renderers = useRendererPlugins();\n    const { field } = useModelField();\n\n    const rendererName = useBind({\n        name: \"renderer.name\",\n        validate: validation.create(\"required\")\n    });\n\n    const selectedPlugin = rendererName.value\n        ? renderers.find(pl => pl.renderer.rendererName === rendererName.value)\n        : undefined;\n\n    if (renderers.length === 0) {\n        return (\n            <Grid>\n                <Grid.Column\n                    span={12}\n                    className={style.noComponentsMessage}\n                >{t`There are no components that can render this field.`}</Grid.Column>\n            </Grid>\n        );\n    }\n\n    useEffect(() => {\n        // If the currently selected render plugin is no longer available, select the first available one.\n        if (selectedPlugin) {\n            return;\n        }\n\n        if (renderers[0]) {\n            rendererName.onChange(renderers[0].renderer.rendererName);\n            return;\n        }\n\n        console.info(`No renderers for field ${field.fieldId} found.`, field);\n    }, [field.id, field.list, field.predefinedValues?.enabled, selectedPlugin]);\n\n    return (\n        <>\n            <Grid>\n                <>\n                    <Grid.Column span={12}>\n                        <Heading level={5}>Field renderer</Heading>\n                        <Text size={\"sm\"}>Choose a component that will render the field.</Text>\n                    </Grid.Column>\n                    <Grid.Column span={12}>\n                        <div className={\"mb-xl\"}>\n                            <RadioGroup\n                                {...rendererName}\n                                items={renderers.map(item => ({\n                                    id: item.renderer.rendererName,\n                                    value: item.renderer.rendererName,\n                                    label: (\n                                        <div>\n                                            <Text as={\"div\"} size={\"md\"}>\n                                                {item.renderer.name}\n                                            </Text>\n                                            <Text\n                                                as={\"div\"}\n                                                size={\"sm\"}\n                                                className={\"text-sm text-neutral-strong\"}\n                                            >\n                                                {item.renderer.description}\n                                            </Text>\n                                        </div>\n                                    )\n                                }))}\n                            />\n                        </div>\n                    </Grid.Column>\n                    <RendererOptions plugin={selectedPlugin} />\n                </>\n            </Grid>\n        </>\n    );\n};\n\nexport default AppearanceTab;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","i18n","css","validation","useBind","RendererOptions","useRendererPlugins","useModelField","RadioGroup","Text","Grid","Heading","t","ns","style","noComponentsMessage","process","env","NODE_ENV","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","radioContainer","AppearanceTab","renderers","field","rendererName","validate","create","selectedPlugin","value","find","pl","renderer","undefined","length","createElement","Column","span","className","onChange","console","info","fieldId","id","list","predefinedValues","enabled","Fragment","level","size","Object","assign","items","map","item","label","as","description","plugin"],"sources":["AppearanceTab.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { css } from \"@emotion/css\";\nimport { validation } from \"@webiny/validation\";\nimport { useBind } from \"@webiny/form\";\nimport { RendererOptions } from \"./AppearanceTab/RendererOptions.js\";\nimport { useRendererPlugins } from \"./useRendererPlugins.js\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { RadioGroup, Text, Grid, Heading } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-model-editor/tabs/appearance-tab\");\n\nconst style = {\n    noComponentsMessage: css({\n        textAlign: \"center\",\n        padding: 25\n    }),\n    radioContainer: css({\n        marginBottom: 10,\n        display: \"flex\"\n    })\n};\n\nconst AppearanceTab = () => {\n    const renderers = useRendererPlugins();\n    const { field } = useModelField();\n\n    const rendererName = useBind({\n        name: \"renderer.name\",\n        validate: validation.create(\"required\")\n    });\n\n    const selectedPlugin = rendererName.value\n        ? renderers.find(pl => pl.renderer.rendererName === rendererName.value)\n        : undefined;\n\n    if (renderers.length === 0) {\n        return (\n            <Grid>\n                <Grid.Column\n                    span={12}\n                    className={style.noComponentsMessage}\n                >{t`There are no components that can render this field.`}</Grid.Column>\n            </Grid>\n        );\n    }\n\n    useEffect(() => {\n        // If the currently selected render plugin is no longer available, select the first available one.\n        if (selectedPlugin) {\n            return;\n        }\n\n        if (renderers[0]) {\n            rendererName.onChange(renderers[0].renderer.rendererName);\n            return;\n        }\n\n        console.info(`No renderers for field ${field.fieldId} found.`, field);\n    }, [field.id, field.list, field.predefinedValues?.enabled, selectedPlugin]);\n\n    return (\n        <>\n            <Grid>\n                <>\n                    <Grid.Column span={12}>\n                        <Heading level={5}>Field renderer</Heading>\n                        <Text size={\"sm\"}>Choose a component that will render the field.</Text>\n                    </Grid.Column>\n                    <Grid.Column span={12}>\n                        <div className={\"mb-xl\"}>\n                            <RadioGroup\n                                {...rendererName}\n                                items={renderers.map(item => ({\n                                    id: item.renderer.rendererName,\n                                    value: item.renderer.rendererName,\n                                    label: (\n                                        <div>\n                                            <Text as={\"div\"} size={\"md\"}>\n                                                {item.renderer.name}\n                                            </Text>\n                                            <Text\n                                                as={\"div\"}\n                                                size={\"sm\"}\n                                                className={\"text-sm text-neutral-strong text-wrap\"}\n                                            >\n                                                {item.renderer.description}\n                                            </Text>\n                                        </div>\n                                    )\n                                }))}\n                            />\n                        </div>\n                    </Grid.Column>\n                    <RendererOptions plugin={selectedPlugin} />\n                </>\n            </Grid>\n        </>\n    );\n};\n\nexport default AppearanceTab;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,GAAG,QAAQ,cAAc;AAClC,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,OAAO,QAAQ,cAAc;AACtC,SAASC,eAAe;AACxB,SAASC,kBAAkB;AAC3B,SAASC,aAAa;AACtB,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,EAAEC,OAAO,QAAQ,kBAAkB;AAElE,MAAMC,CAAC,GAAGX,IAAI,CAACY,EAAE,CAAC,iEAAiE,CAAC;AAEpF,MAAMC,KAAK,GAAG;EACVC,mBAAmB,eAAEb,GAAG,CAAAc,OAAA,CAAAC,GAAA,CAAAC,QAAA;IAAAC,IAAA;IAAAC,MAAA;EAAA;IAAAD,IAAA;IAAAC,MAAA;IAAAC,QAAA,EAAAC;EAAA,CAGvB,CAAC;EACFC,cAAc,eAAErB,GAAG,CAAAc,OAAA,CAAAC,GAAA,CAAAC,QAAA;IAAAC,IAAA;IAAAC,MAAA;EAAA;IAAAD,IAAA;IAAAC,MAAA;IAAAC,QAAA,EAAAC;EAAA,CAGlB;AACL,CAAC;AAED,MAAME,aAAa,GAAGA,CAAA,KAAM;EACxB,MAAMC,SAAS,GAAGnB,kBAAkB,CAAC,CAAC;EACtC,MAAM;IAAEoB;EAAM,CAAC,GAAGnB,aAAa,CAAC,CAAC;EAEjC,MAAMoB,YAAY,GAAGvB,OAAO,CAAC;IACzBe,IAAI,EAAE,eAAe;IACrBS,QAAQ,EAAEzB,UAAU,CAAC0B,MAAM,CAAC,UAAU;EAC1C,CAAC,CAAC;EAEF,MAAMC,cAAc,GAAGH,YAAY,CAACI,KAAK,GACnCN,SAAS,CAACO,IAAI,CAACC,EAAE,IAAIA,EAAE,CAACC,QAAQ,CAACP,YAAY,KAAKA,YAAY,CAACI,KAAK,CAAC,GACrEI,SAAS;EAEf,IAAIV,SAAS,CAACW,MAAM,KAAK,CAAC,EAAE;IACxB,oBACIrC,KAAA,CAAAsC,aAAA,CAAC3B,IAAI,qBACDX,KAAA,CAAAsC,aAAA,CAAC3B,IAAI,CAAC4B,MAAM;MACRC,IAAI,EAAE,EAAG;MACTC,SAAS,EAAE1B,KAAK,CAACC;IAAoB,GACvCH,CAAC,qDAAmE,CACpE,CAAC;EAEf;EAEAZ,SAAS,CAAC,MAAM;IACZ;IACA,IAAI8B,cAAc,EAAE;MAChB;IACJ;IAEA,IAAIL,SAAS,CAAC,CAAC,CAAC,EAAE;MACdE,YAAY,CAACc,QAAQ,CAAChB,SAAS,CAAC,CAAC,CAAC,CAACS,QAAQ,CAACP,YAAY,CAAC;MACzD;IACJ;IAEAe,OAAO,CAACC,IAAI,CAAC,0BAA0BjB,KAAK,CAACkB,OAAO,SAAS,EAAElB,KAAK,CAAC;EACzE,CAAC,EAAE,CAACA,KAAK,CAACmB,EAAE,EAAEnB,KAAK,CAACoB,IAAI,EAAEpB,KAAK,CAACqB,gBAAgB,EAAEC,OAAO,EAAElB,cAAc,CAAC,CAAC;EAE3E,oBACI/B,KAAA,CAAAsC,aAAA,CAAAtC,KAAA,CAAAkD,QAAA,qBACIlD,KAAA,CAAAsC,aAAA,CAAC3B,IAAI,qBACDX,KAAA,CAAAsC,aAAA,CAAAtC,KAAA,CAAAkD,QAAA,qBACIlD,KAAA,CAAAsC,aAAA,CAAC3B,IAAI,CAAC4B,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBxC,KAAA,CAAAsC,aAAA,CAAC1B,OAAO;IAACuC,KAAK,EAAE;EAAE,GAAC,gBAAuB,CAAC,eAC3CnD,KAAA,CAAAsC,aAAA,CAAC5B,IAAI;IAAC0C,IAAI,EAAE;EAAK,GAAC,gDAAoD,CAC7D,CAAC,eACdpD,KAAA,CAAAsC,aAAA,CAAC3B,IAAI,CAAC4B,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBxC,KAAA,CAAAsC,aAAA;IAAKG,SAAS,EAAE;EAAQ,gBACpBzC,KAAA,CAAAsC,aAAA,CAAC7B,UAAU,EAAA4C,MAAA,CAAAC,MAAA,KACH1B,YAAY;IAChB2B,KAAK,EAAE7B,SAAS,CAAC8B,GAAG,CAACC,IAAI,KAAK;MAC1BX,EAAE,EAAEW,IAAI,CAACtB,QAAQ,CAACP,YAAY;MAC9BI,KAAK,EAAEyB,IAAI,CAACtB,QAAQ,CAACP,YAAY;MACjC8B,KAAK,eACD1D,KAAA,CAAAsC,aAAA,2BACItC,KAAA,CAAAsC,aAAA,CAAC5B,IAAI;QAACiD,EAAE,EAAE,KAAM;QAACP,IAAI,EAAE;MAAK,GACvBK,IAAI,CAACtB,QAAQ,CAACf,IACb,CAAC,eACPpB,KAAA,CAAAsC,aAAA,CAAC5B,IAAI;QACDiD,EAAE,EAAE,KAAM;QACVP,IAAI,EAAE,IAAK;QACXX,SAAS,EAAE;MAAwC,GAElDgB,IAAI,CAACtB,QAAQ,CAACyB,WACb,CACL;IAEb,CAAC,CAAC;EAAE,EACP,CACA,CACI,CAAC,eACd5D,KAAA,CAAAsC,aAAA,CAAChC,eAAe;IAACuD,MAAM,EAAE9B;EAAe,CAAE,CAC5C,CACA,CACR,CAAC;AAEX,CAAC;AAED,eAAeN,aAAa","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog/FieldSettingsTabs.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { CmsModelField } from "../../../../types.js";
+interface FieldSettingsTabsProps {
+    shadowField: CmsModelField;
+    predefinedValuesTabEnabled: boolean;
+    showValidatorsTab: boolean;
+    isSubtypeField: boolean;
+}
+export declare const FieldSettingsTabs: ({ shadowField, predefinedValuesTabEnabled, showValidatorsTab, isSubtypeField }: FieldSettingsTabsProps) => React.JSX.Element;
+export {};

package/admin/components/FieldEditor/EditFieldDialog/FieldSettingsTabs.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+import { i18n } from "@webiny/app/i18n/index.js";
+import GeneralTab from "./GeneralTab.js";
+import AppearanceTab from "./AppearanceTab.js";
+import PredefinedValues from "./PredefinedValues.js";
+import { ValidationTab } from "./ValidationTab/index.js";
+import { PermissionsTab } from "./PermissionsTab/PermissionsTab.js";
+import { RulesTab } from "./RulesTab/RulesTab.js";
+import { ModelFieldProvider } from "../../ModelFieldProvider/index.js";
+import { useModelEditor } from "../../ContentModelEditor/useModelEditor.js";
+const t = i18n.namespace("app-headless-cms/admin/components/editor");
+export const FieldSettingsTabs = ({
+  shadowField,
+  predefinedValuesTabEnabled,
+  showValidatorsTab,
+  isSubtypeField
+}) => {
+  const {
+    fieldOptions
+  } = useModelEditor();
+  return /*#__PURE__*/React.createElement(ModelFieldProvider, {
+    field: shadowField
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    spacing: "lg",
+    size: "md",
+    separator: true,
+    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "general",
+      trigger: t`General`,
+      value: "general",
+      content: /*#__PURE__*/React.createElement(GeneralTab, null)
+    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "predefined",
+      trigger: t`Predefined values`,
+      value: "predefined",
+      disabled: !predefinedValuesTabEnabled,
+      content: /*#__PURE__*/React.createElement(PredefinedValues, null)
+    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "validations",
+      trigger: t`Validations`,
+      value: "validations",
+      content: /*#__PURE__*/React.createElement(ValidationTab, {
+        field: shadowField
+      }),
+      visible: showValidatorsTab
+    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "appearance",
+      trigger: t`Appearance`,
+      value: "Appearance",
+      content: /*#__PURE__*/React.createElement(AppearanceTab, null),
+      disabled: isSubtypeField
+    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "permissions",
+      trigger: t`Permissions`,
+      value: "permissions",
+      content: /*#__PURE__*/React.createElement(PermissionsTab, null)
+    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "rules",
+      trigger: t`Rules`,
+      value: "rules",
+      content: /*#__PURE__*/React.createElement(RulesTab, {
+        fieldOptions: fieldOptions
+      })
+    })]
+  }));
+};
+
+//# sourceMappingURL=FieldSettingsTabs.js.map

package/admin/components/FieldEditor/EditFieldDialog/FieldSettingsTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Tabs","i18n","GeneralTab","AppearanceTab","PredefinedValues","ValidationTab","PermissionsTab","RulesTab","ModelFieldProvider","useModelEditor","t","namespace","FieldSettingsTabs","shadowField","predefinedValuesTabEnabled","showValidatorsTab","isSubtypeField","fieldOptions","createElement","field","spacing","size","separator","tabs","Tab","key","trigger","value","content","disabled","visible"],"sources":["FieldSettingsTabs.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tabs } from \"@webiny/admin-ui\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport type { CmsModelField } from \"~/types.js\";\nimport GeneralTab from \"./GeneralTab.js\";\nimport AppearanceTab from \"./AppearanceTab.js\";\nimport PredefinedValues from \"./PredefinedValues.js\";\nimport { ValidationTab } from \"./ValidationTab/index.js\";\nimport { PermissionsTab } from \"./PermissionsTab/PermissionsTab.js\";\nimport { RulesTab } from \"./RulesTab/RulesTab.js\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { useModelEditor } from \"~/admin/components/ContentModelEditor/useModelEditor.js\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\ninterface FieldSettingsTabsProps {\n    shadowField: CmsModelField;\n    predefinedValuesTabEnabled: boolean;\n    showValidatorsTab: boolean;\n    isSubtypeField: boolean;\n}\n\nexport const FieldSettingsTabs = ({\n    shadowField,\n    predefinedValuesTabEnabled,\n    showValidatorsTab,\n    isSubtypeField\n}: FieldSettingsTabsProps) => {\n    const { fieldOptions } = useModelEditor();\n\n    return (\n        <ModelFieldProvider field={shadowField}>\n            <Tabs\n                spacing={\"lg\"}\n                size={\"md\"}\n                separator\n                tabs={[\n                    <Tabs.Tab\n                        key={\"general\"}\n                        trigger={t`General`}\n                        value={\"general\"}\n                        content={<GeneralTab />}\n                    />,\n                    <Tabs.Tab\n                        key={\"predefined\"}\n                        trigger={t`Predefined values`}\n                        value={\"predefined\"}\n                        disabled={!predefinedValuesTabEnabled}\n                        content={<PredefinedValues />}\n                    />,\n                    <Tabs.Tab\n                        key={\"validations\"}\n                        trigger={t`Validations`}\n                        value={\"validations\"}\n                        content={<ValidationTab field={shadowField} />}\n                        visible={showValidatorsTab}\n                    />,\n                    <Tabs.Tab\n                        key={\"appearance\"}\n                        trigger={t`Appearance`}\n                        value={\"Appearance\"}\n                        content={<AppearanceTab />}\n                        disabled={isSubtypeField}\n                    />,\n                    <Tabs.Tab\n                        key={\"permissions\"}\n                        trigger={t`Permissions`}\n                        value={\"permissions\"}\n                        content={<PermissionsTab />}\n                    />,\n                    <Tabs.Tab\n                        key={\"rules\"}\n                        trigger={t`Rules`}\n                        value={\"rules\"}\n                        content={<RulesTab fieldOptions={fieldOptions} />}\n                    />\n                ]}\n            />\n        </ModelFieldProvider>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,IAAI,QAAQ,2BAA2B;AAEhD,OAAOC,UAAU;AACjB,OAAOC,aAAa;AACpB,OAAOC,gBAAgB;AACvB,SAASC,aAAa;AACtB,SAASC,cAAc;AACvB,SAASC,QAAQ;AACjB,SAASC,kBAAkB;AAC3B,SAASC,cAAc;AAEvB,MAAMC,CAAC,GAAGT,IAAI,CAACU,SAAS,CAAC,0CAA0C,CAAC;AASpE,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAC9BC,WAAW;EACXC,0BAA0B;EAC1BC,iBAAiB;EACjBC;AACoB,CAAC,KAAK;EAC1B,MAAM;IAAEC;EAAa,CAAC,GAAGR,cAAc,CAAC,CAAC;EAEzC,oBACIV,KAAA,CAAAmB,aAAA,CAACV,kBAAkB;IAACW,KAAK,EAAEN;EAAY,gBACnCd,KAAA,CAAAmB,aAAA,CAAClB,IAAI;IACDoB,OAAO,EAAE,IAAK;IACdC,IAAI,EAAE,IAAK;IACXC,SAAS;IACTC,IAAI,EAAE,cACFxB,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,SAAU;MACfC,OAAO,EAAEhB,CAAC,SAAU;MACpBiB,KAAK,EAAE,SAAU;MACjBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAAChB,UAAU,MAAE;IAAE,CAC3B,CAAC,eACFH,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,YAAa;MAClBC,OAAO,EAAEhB,CAAC,mBAAoB;MAC9BiB,KAAK,EAAE,YAAa;MACpBE,QAAQ,EAAE,CAACf,0BAA2B;MACtCc,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACd,gBAAgB,MAAE;IAAE,CACjC,CAAC,eACFL,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,aAAc;MACnBC,OAAO,EAAEhB,CAAC,aAAc;MACxBiB,KAAK,EAAE,aAAc;MACrBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACb,aAAa;QAACc,KAAK,EAAEN;MAAY,CAAE,CAAE;MAC/CiB,OAAO,EAAEf;IAAkB,CAC9B,CAAC,eACFhB,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,YAAa;MAClBC,OAAO,EAAEhB,CAAC,YAAa;MACvBiB,KAAK,EAAE,YAAa;MACpBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACf,aAAa,MAAE,CAAE;MAC3B0B,QAAQ,EAAEb;IAAe,CAC5B,CAAC,eACFjB,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,aAAc;MACnBC,OAAO,EAAEhB,CAAC,aAAc;MACxBiB,KAAK,EAAE,aAAc;MACrBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACZ,cAAc,MAAE;IAAE,CAC/B,CAAC,eACFP,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,OAAQ;MACbC,OAAO,EAAEhB,CAAC,OAAQ;MAClBiB,KAAK,EAAE,OAAQ;MACfC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACX,QAAQ;QAACU,YAAY,EAAEA;MAAa,CAAE;IAAE,CACrD,CAAC;EACJ,CACL,CACe,CAAC;AAE7B,CAAC","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog/GeneralTab.js

@@ -1,3 +1,4 @@
+import zod from "zod";
 import React, { useEffect, useCallback, useRef, useMemo } from "react";
 import camelCase from "lodash/camelCase.js";
 import { Grid, Switch, Input, Textarea } from "@webiny/admin-ui";
@@ -7,6 +8,11 @@ import { useForm, Bind } from "@webiny/form";
 import { useModelFieldEditor } from "../index.js";
 import { useModelEditor } from "../../../hooks/index.js";
 import { useModelField } from "../../../hooks/index.js";
+const fieldIdSchema = zod.string().max(100).regex(/^!?[a-zA-Z]/, {
+  message: `Must not start with a number.`
+}).regex(/^(^[a-zA-Z0-9]+)$/, {
+  message: `Must be alphanumeric string.`
+});
 const GeneralTab = () => {
   const form = useForm();
   const {
@@ -17,9 +23,10 @@ const GeneralTab = () => {
   const {
     data: contentModel
   } = useModelEditor();
+  const editorContext = useModelFieldEditor();
   const {
     getField
-  } = useModelFieldEditor();
+  } = editorContext;
 
   // Had problems with autofocusing the "label" field. A couple of comments on this.
   // 1. It's probably caused by the Tabs component which wraps this component.
@@ -42,22 +49,33 @@ const GeneralTab = () => {
     baseOnChange(value.trim());
   }, []);
   const fieldIdValidator = useCallback(fieldId => {
-    if (fieldId.trim().toLowerCase() !== "id") {
-      return true;
+    const result = fieldIdSchema.safeParse(fieldId);
+    if (!result.success) {
+      throw new Error(result.error.issues[0].message);
     }
-    throw new Error(`Cannot use "id" as Field ID.`);
   }, []);
   const uniqueFieldIdValidator = useCallback(fieldId => {
+    // Check the current context.
     const existingField = getField({
       fieldId
     });
-    if (!existingField) {
-      return false;
+    if (existingField && existingField.id !== field.id) {
+      throw new Error("Please enter a unique Field ID.");
     }
-    if (existingField.id === field.id) {
-      return true;
+
+    // If we're inside a layout field (e.g. a tab), also check the parent context
+    // where hoisted fields live. A layout field context has a parent with no
+    // registered field type plugin (synthetic parent).
+    const parent = editorContext.parentEditorContext;
+    if (parent && editorContext.parent && !editorContext.getFieldPlugin(editorContext.parent.type)) {
+      const parentField = parent.getField({
+        fieldId
+      });
+      if (parentField && parentField.id !== field.id) {
+        throw new Error("Please enter a unique Field ID.");
+      }
     }
-    throw new Error("Please enter a unique Field ID.");
+    return true;
   }, []);
   let additionalSettings = null;
   if (typeof fieldPlugin.field.renderSettings === "function") {

package/admin/components/FieldEditor/EditFieldDialog/GeneralTab.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useCallback","useRef","useMemo","camelCase","Grid","Switch","Input","Textarea","validation","Tags","useForm","Bind","useModelFieldEditor","useModelEditor","useModelField","GeneralTab","form","field","fieldPlugin","inputRef","data","contentModel","getField","setTimeout","current","focus","afterChangeLabel","value","setValue","beforeChangeFieldId","baseOnChange","trim","fieldIdValidator","fieldId","toLowerCase","Error","uniqueFieldIdValidator","existingField","id","additionalSettings","renderSettings","predefinedValuesEnabled","allowPredefinedValues","renderPredefinedValues","createElement","Fragment","gap","Column","span","name","validators","create","afterChange","label","size","beforeChange","listLabel","disabled","allowList","description","protectedTags","tags"],"sources":["GeneralTab.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef, useMemo } from \"react\";\nimport camelCase from \"lodash/camelCase.js\";\nimport { Grid, Switch, Input, Textarea } from \"@webiny/admin-ui\";\nimport { validation } from \"@webiny/validation\";\nimport { Tags } from \"@webiny/ui/Tags/index.js\";\nimport { useForm, Bind } from \"@webiny/form\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor/index.js\";\nimport { useModelEditor } from \"~/admin/hooks/index.js\";\nimport { useModelField } from \"~/admin/hooks/index.js\";\n\nconst GeneralTab = () => {\n    const form = useForm();\n    const { field, fieldPlugin } = useModelField();\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const { data: contentModel } = useModelEditor();\n    const { getField } = useModelFieldEditor();\n\n    // Had problems with autofocusing the \"label\" field. A couple of comments on this.\n    // 1. It's probably caused by the Tabs component which wraps this component.\n    // 2. It seems that the \"autoFocus\" prop on the Input doesn't work. I can't see it attached in the actual DOM.\n    // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design\n    //    in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then\n    //    it seems it's behaving correctly. ¯\\_(ツ)_/¯\n    useEffect(() => {\n        setTimeout(() => {\n            if (!inputRef.current) {\n                return;\n            }\n            inputRef.current.focus();\n        }, /* The value of 400 was determined by manual testing. */ 400);\n    }, []);\n\n    const afterChangeLabel = useCallback((value: string) => {\n        form.setValue(\"fieldId\", camelCase(value));\n    }, []);\n\n    const beforeChangeFieldId = useCallback(\n        (value: string, baseOnChange: (value: string) => void) => {\n            baseOnChange(value.trim());\n        },\n        []\n    );\n\n    const fieldIdValidator = useCallback((fieldId: string) => {\n        if (fieldId.trim().toLowerCase() !== \"id\") {\n            return true;\n        }\n\n        throw new Error(`Cannot use \"id\" as Field ID.`);\n    }, []);\n\n    const uniqueFieldIdValidator = useCallback((fieldId: string) => {\n        const existingField = getField({ fieldId });\n        if (!existingField) {\n            return false;\n        }\n\n        if (existingField.id === field.id) {\n            return true;\n        }\n        throw new Error(\"Please enter a unique Field ID.\");\n    }, []);\n\n    let additionalSettings: React.ReactNode | null = null;\n    if (typeof fieldPlugin.field.renderSettings === \"function\") {\n        additionalSettings = fieldPlugin.field.renderSettings({\n            afterChangeLabel,\n            uniqueFieldIdValidator,\n            contentModel\n        });\n    }\n\n    const predefinedValuesEnabled = useMemo(\n        (): boolean =>\n            (fieldPlugin.field.allowPredefinedValues || false) &&\n            typeof fieldPlugin.field.renderPredefinedValues === \"function\",\n        [field.fieldId]\n    );\n\n    return (\n        <>\n            <Grid gap={\"comfortable\"}>\n                <Grid.Column span={6}>\n                    <Bind\n                        name={\"label\"}\n                        validators={validation.create(\"required\")}\n                        afterChange={(value: string) => {\n                            if (field.id) {\n                                return;\n                            }\n                            afterChangeLabel(value);\n                        }}\n                    >\n                        <Input\n                            label={\"Label\"}\n                            size={\"lg\"}\n                            inputRef={inputRef}\n                            data-testid=\"cms.editor.field.settings.general.label\"\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    <Bind\n                        name={\"fieldId\"}\n                        validators={[\n                            validation.create(\"required\"),\n                            uniqueFieldIdValidator,\n                            fieldIdValidator\n                        ]}\n                        beforeChange={beforeChangeFieldId}\n                    >\n                        <Input\n                            label={\"Field ID\"}\n                            size={\"lg\"}\n                            data-testid={`cms.editor.field.settings.general.label-${field.id}`}\n                        />\n                    </Bind>\n                </Grid.Column>\n\n                <Grid.Column span={6}>\n                    <Bind name={\"list\"}>\n                        <Switch\n                            label={fieldPlugin.field.listLabel}\n                            disabled={!fieldPlugin.field.allowList}\n                            data-testid={`cms.editor.field.settings.general.switch-multiplevalues`}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    <Bind name={\"predefinedValues.enabled\"}>\n                        <Switch\n                            label={\"Use predefined values\"}\n                            disabled={!predefinedValuesEnabled}\n                            data-testid={`cms.editor.field.settings.general.switch-predefinedvalues`}\n                        />\n                    </Bind>\n                </Grid.Column>\n\n                <Grid.Column span={12}>\n                    <Bind name={\"description\"}>\n                        <Input\n                            label={\"Description\"}\n                            description={\"This text will be shown below the label (optional)\"}\n                            size={\"lg\"}\n                            data-testid={`cms.editor.field.settings.general.description`}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <Bind name={\"note\"}>\n                        <Input\n                            label={\"Note\"}\n                            description={\"This text will be shown below the input (optional)\"}\n                            size={\"lg\"}\n                            data-testid={`cms.editor.field.settings.general.note`}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <Bind name={\"help\"}>\n                        <Textarea\n                            label={\"Help\"}\n                            description={\"This text will be shown in a tooltip (optional)\"}\n                            size={\"lg\"}\n                            data-testid={`cms.editor.field.settings.general.help`}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <Bind name={\"tags\"}>\n                        <Tags\n                            label={\"Tags\"}\n                            description={\n                                \"Field tags are useful for developers and are not visible in the UI (optional)\"\n                            }\n                            protectedTags={fieldPlugin.field.tags}\n                            data-testid={`cms.editor.field.settings.general.tags`}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={12}>{additionalSettings}</Grid.Column>\n            </Grid>\n        </>\n    );\n};\n\nexport default GeneralTab;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["zod","React","useEffect","useCallback","useRef","useMemo","camelCase","Grid","Switch","Input","Textarea","validation","Tags","useForm","Bind","useModelFieldEditor","useModelEditor","useModelField","fieldIdSchema","string","max","regex","message","GeneralTab","form","field","fieldPlugin","inputRef","data","contentModel","editorContext","getField","setTimeout","current","focus","afterChangeLabel","value","setValue","beforeChangeFieldId","baseOnChange","trim","fieldIdValidator","fieldId","result","safeParse","success","Error","error","issues","uniqueFieldIdValidator","existingField","id","parent","parentEditorContext","getFieldPlugin","type","parentField","additionalSettings","renderSettings","predefinedValuesEnabled","allowPredefinedValues","renderPredefinedValues","createElement","Fragment","gap","Column","span","name","validators","create","afterChange","label","size","beforeChange","listLabel","disabled","allowList","description","protectedTags","tags"],"sources":["GeneralTab.tsx"],"sourcesContent":["import zod from \"zod\";\nimport React, { useEffect, useCallback, useRef, useMemo } from \"react\";\nimport camelCase from \"lodash/camelCase.js\";\nimport { Grid, Switch, Input, Textarea } from \"@webiny/admin-ui\";\nimport { validation } from \"@webiny/validation\";\nimport { Tags } from \"@webiny/ui/Tags/index.js\";\nimport { useForm, Bind } from \"@webiny/form\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor/index.js\";\nimport { useModelEditor } from \"~/admin/hooks/index.js\";\nimport { useModelField } from \"~/admin/hooks/index.js\";\n\nconst fieldIdSchema = zod\n    .string()\n    .max(100)\n    .regex(/^!?[a-zA-Z]/, {\n        message: `Must not start with a number.`\n    })\n    .regex(/^(^[a-zA-Z0-9]+)$/, {\n        message: `Must be alphanumeric string.`\n    });\n\nconst GeneralTab = () => {\n    const form = useForm();\n    const { field, fieldPlugin } = useModelField();\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const { data: contentModel } = useModelEditor();\n    const editorContext = useModelFieldEditor();\n    const { getField } = editorContext;\n\n    // Had problems with autofocusing the \"label\" field. A couple of comments on this.\n    // 1. It's probably caused by the Tabs component which wraps this component.\n    // 2. It seems that the \"autoFocus\" prop on the Input doesn't work. I can't see it attached in the actual DOM.\n    // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design\n    //    in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then\n    //    it seems it's behaving correctly. ¯\\_(ツ)_/¯\n    useEffect(() => {\n        setTimeout(() => {\n            if (!inputRef.current) {\n                return;\n            }\n            inputRef.current.focus();\n        }, /* The value of 400 was determined by manual testing. */ 400);\n    }, []);\n\n    const afterChangeLabel = useCallback((value: string) => {\n        form.setValue(\"fieldId\", camelCase(value));\n    }, []);\n\n    const beforeChangeFieldId = useCallback(\n        (value: string, baseOnChange: (value: string) => void) => {\n            baseOnChange(value.trim());\n        },\n        []\n    );\n\n    const fieldIdValidator = useCallback((fieldId: string) => {\n        const result = fieldIdSchema.safeParse(fieldId);\n\n        if (!result.success) {\n            throw new Error(result.error.issues[0].message);\n        }\n    }, []);\n\n    const uniqueFieldIdValidator = useCallback((fieldId: string) => {\n        // Check the current context.\n        const existingField = getField({ fieldId });\n        if (existingField && existingField.id !== field.id) {\n            throw new Error(\"Please enter a unique Field ID.\");\n        }\n\n        // If we're inside a layout field (e.g. a tab), also check the parent context\n        // where hoisted fields live. A layout field context has a parent with no\n        // registered field type plugin (synthetic parent).\n        const parent = editorContext.parentEditorContext;\n        if (\n            parent &&\n            editorContext.parent &&\n            !editorContext.getFieldPlugin(editorContext.parent.type)\n        ) {\n            const parentField = parent.getField({ fieldId });\n            if (parentField && parentField.id !== field.id) {\n                throw new Error(\"Please enter a unique Field ID.\");\n            }\n        }\n\n        return true;\n    }, []);\n\n    let additionalSettings: React.ReactNode | null = null;\n    if (typeof fieldPlugin.field.renderSettings === \"function\") {\n        additionalSettings = fieldPlugin.field.renderSettings({\n            afterChangeLabel,\n            uniqueFieldIdValidator,\n            contentModel\n        });\n    }\n\n    const predefinedValuesEnabled = useMemo(\n        (): boolean =>\n            (fieldPlugin.field.allowPredefinedValues || false) &&\n            typeof fieldPlugin.field.renderPredefinedValues === \"function\",\n        [field.fieldId]\n    );\n\n    return (\n        <>\n            <Grid gap={\"comfortable\"}>\n                <Grid.Column span={6}>\n                    <Bind\n                        name={\"label\"}\n                        validators={validation.create(\"required\")}\n                        afterChange={(value: string) => {\n                            if (field.id) {\n                                return;\n                            }\n                            afterChangeLabel(value);\n                        }}\n                    >\n                        <Input\n                            label={\"Label\"}\n                            size={\"lg\"}\n                            inputRef={inputRef}\n                            data-testid=\"cms.editor.field.settings.general.label\"\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    <Bind\n                        name={\"fieldId\"}\n                        validators={[\n                            validation.create(\"required\"),\n                            uniqueFieldIdValidator,\n                            fieldIdValidator\n                        ]}\n                        beforeChange={beforeChangeFieldId}\n                    >\n                        <Input\n                            label={\"Field ID\"}\n                            size={\"lg\"}\n                            data-testid={`cms.editor.field.settings.general.label-${field.id}`}\n                        />\n                    </Bind>\n                </Grid.Column>\n\n                <Grid.Column span={6}>\n                    <Bind name={\"list\"}>\n                        <Switch\n                            label={fieldPlugin.field.listLabel}\n                            disabled={!fieldPlugin.field.allowList}\n                            data-testid={`cms.editor.field.settings.general.switch-multiplevalues`}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    <Bind name={\"predefinedValues.enabled\"}>\n                        <Switch\n                            label={\"Use predefined values\"}\n                            disabled={!predefinedValuesEnabled}\n                            data-testid={`cms.editor.field.settings.general.switch-predefinedvalues`}\n                        />\n                    </Bind>\n                </Grid.Column>\n\n                <Grid.Column span={12}>\n                    <Bind name={\"description\"}>\n                        <Input\n                            label={\"Description\"}\n                            description={\"This text will be shown below the label (optional)\"}\n                            size={\"lg\"}\n                            data-testid={`cms.editor.field.settings.general.description`}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <Bind name={\"note\"}>\n                        <Input\n                            label={\"Note\"}\n                            description={\"This text will be shown below the input (optional)\"}\n                            size={\"lg\"}\n                            data-testid={`cms.editor.field.settings.general.note`}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <Bind name={\"help\"}>\n                        <Textarea\n                            label={\"Help\"}\n                            description={\"This text will be shown in a tooltip (optional)\"}\n                            size={\"lg\"}\n                            data-testid={`cms.editor.field.settings.general.help`}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <Bind name={\"tags\"}>\n                        <Tags\n                            label={\"Tags\"}\n                            description={\n                                \"Field tags are useful for developers and are not visible in the UI (optional)\"\n                            }\n                            protectedTags={fieldPlugin.field.tags}\n                            data-testid={`cms.editor.field.settings.general.tags`}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={12}>{additionalSettings}</Grid.Column>\n            </Grid>\n        </>\n    );\n};\n\nexport default GeneralTab;\n"],"mappings":"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","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog/PermissionsTab/CannotUsePermissions.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const CannotUsePermissions: () => React.JSX.Element;

package/admin/components/FieldEditor/EditFieldDialog/PermissionsTab/CannotUsePermissions.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Alert } from "@webiny/admin-ui";
+export const CannotUsePermissions = () => {
+  return /*#__PURE__*/React.createElement(Alert, {
+    title: "Field Permissions feature is not activated",
+    type: "warning"
+  }, /*#__PURE__*/React.createElement("strong", null, "Field Permissions"), " feature is not activated.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "To learn more, please visit the official\xA0", /*#__PURE__*/React.createElement("a", {
+    href: "https://webiny.link/aacl",
+    target: "_blank",
+    rel: "noreferrer"
+  }, "documentation"), ".");
+};
+
+//# sourceMappingURL=CannotUsePermissions.js.map

package/admin/components/FieldEditor/EditFieldDialog/PermissionsTab/CannotUsePermissions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Alert","CannotUsePermissions","createElement","title","type","href","target","rel"],"sources":["CannotUsePermissions.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert } from \"@webiny/admin-ui\";\n\nexport const CannotUsePermissions = () => {\n    return (\n        <Alert title={\"Field Permissions feature is not activated\"} type={\"warning\"}>\n            <strong>Field Permissions</strong> feature is not activated.\n            <br />\n            <br />\n            To learn more, please visit the official&nbsp;\n            <a href={\"https://webiny.link/aacl\"} target={\"_blank\"} rel={\"noreferrer\"}>\n                documentation\n            </a>\n            .\n        </Alert>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,kBAAkB;AAExC,OAAO,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACtC,oBACIF,KAAA,CAAAG,aAAA,CAACF,KAAK;IAACG,KAAK,EAAE,4CAA6C;IAACC,IAAI,EAAE;EAAU,gBACxEL,KAAA,CAAAG,aAAA,iBAAQ,mBAAyB,CAAC,8BAClC,eAAAH,KAAA,CAAAG,aAAA,WAAK,CAAC,eACNH,KAAA,CAAAG,aAAA,WAAK,CAAC,gDAEN,eAAAH,KAAA,CAAAG,aAAA;IAAGG,IAAI,EAAE,0BAA2B;IAACC,MAAM,EAAE,QAAS;IAACC,GAAG,EAAE;EAAa,GAAC,eAEvE,CAAC,KAED,CAAC;AAEhB,CAAC","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog/PermissionsTab/FieldPermissionsSelection.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { FolderLevelPermissionsTarget } from "@webiny/app-aco";
+import type { FieldRule } from "../../../../../types.js";
+interface FieldPermissionsSelectionProps {
+    targetsList: FolderLevelPermissionsTarget[];
+    rules: FieldRule[];
+    onRemoveAccess: (params: {
+        rule: FieldRule;
+    }) => void;
+    onUpdatePermission: (params: {
+        rule: FieldRule;
+    }) => void;
+}
+export declare const FieldPermissionsSelection: ({ rules, targetsList, onRemoveAccess, onUpdatePermission }: FieldPermissionsSelectionProps) => React.JSX.Element;
+export {};

package/admin/components/FieldEditor/EditFieldDialog/PermissionsTab/FieldPermissionsSelection.js

@@ -0,0 +1,131 @@
+import React, { useMemo } from "react";
+import { ReactComponent as More } from "@webiny/icons/arrow_drop_down.svg";
+import { Button, DropdownMenu, List, Scrollbar, Text, Avatar } from "@webiny/admin-ui";
+const FIELD_ACCESS_LEVELS = [{
+  id: "hide",
+  label: "No Access",
+  description: "Hide this field from the user."
+}, {
+  id: "disable",
+  label: "Viewer (Read-only)",
+  description: "Allow the user to read, but not edit, this field."
+}];
+const ListItemGraphic = ({
+  target
+}) => {
+  if (target.type === "admin") {
+    return /*#__PURE__*/React.createElement(Avatar, {
+      size: "md",
+      image: /*#__PURE__*/React.createElement(Avatar.Image, {
+        src: target.meta.image,
+        alt: "User's avatar."
+      }),
+      fallback: /*#__PURE__*/React.createElement(Avatar.Fallback, {
+        delayMs: 0
+      }, target.name.charAt(0))
+    });
+  }
+  return /*#__PURE__*/React.createElement(Avatar, {
+    size: "md",
+    fallback: /*#__PURE__*/React.createElement(Avatar.Fallback, {
+      delayMs: 0
+    }, target.name.charAt(0))
+  });
+};
+const ListItemText = ({
+  target
+}) => {
+  if (target.type === "admin") {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      as: "div"
+    }, target.name), /*#__PURE__*/React.createElement(Text, {
+      as: "div",
+      size: "sm",
+      className: "text-neutral-strong font-normal"
+    }, target.meta.email || "E-mail not available."));
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, target.name);
+};
+const ListItemMeta = ({
+  rule,
+  onRemoveAccess,
+  onUpdatePermission
+}) => {
+  const currentLevel = useMemo(() => {
+    return FIELD_ACCESS_LEVELS.find(level => level.id === rule.action);
+  }, [rule.action]);
+  const handle = /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    text: currentLevel.label,
+    icon: /*#__PURE__*/React.createElement(More, null),
+    iconPosition: "end"
+  });
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    trigger: handle
+  }, FIELD_ACCESS_LEVELS.map(level => /*#__PURE__*/React.createElement(DropdownMenu.CheckboxItem, {
+    key: level.id,
+    checked: currentLevel.id === level.id,
+    text: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      as: "div"
+    }, level.label), /*#__PURE__*/React.createElement(Text, {
+      as: "div",
+      size: "sm",
+      className: "text-neutral-strong"
+    }, level.description)),
+    onClick: () => {
+      setTimeout(() => {
+        onUpdatePermission({
+          rule: {
+            ...rule,
+            action: level.id
+          }
+        });
+      }, 75);
+    }
+  })), /*#__PURE__*/React.createElement(DropdownMenu.Separator, null), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
+    onClick: () => onRemoveAccess({
+      rule
+    }),
+    text: "Remove permission"
+  }));
+};
+export const FieldPermissionsSelection = ({
+  rules = [],
+  targetsList,
+  onRemoveAccess,
+  onUpdatePermission
+}) => {
+  const selection = rules.map(rule => {
+    const target = targetsList.find(u => u.target === String(rule.value));
+    if (target) {
+      return {
+        rule,
+        target
+      };
+    }
+    return null;
+  }).filter(Boolean);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    as: "div",
+    className: "mb-md"
+  }, "People and teams with access"), /*#__PURE__*/React.createElement(Scrollbar, {
+    style: {
+      minHeight: "100px"
+    }
+  }, /*#__PURE__*/React.createElement(List, null, selection?.map(item => /*#__PURE__*/React.createElement(List.Item, {
+    key: String(item.rule.value),
+    title: /*#__PURE__*/React.createElement(ListItemText, {
+      target: item.target
+    }),
+    icon: /*#__PURE__*/React.createElement(ListItemGraphic, {
+      target: item.target
+    }),
+    actions: /*#__PURE__*/React.createElement(ListItemMeta, {
+      rule: item.rule,
+      onRemoveAccess: onRemoveAccess,
+      onUpdatePermission: onUpdatePermission
+    })
+  })))));
+};
+
+//# sourceMappingURL=FieldPermissionsSelection.js.map

package/admin/components/FieldEditor/EditFieldDialog/PermissionsTab/FieldPermissionsSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","ReactComponent","More","Button","DropdownMenu","List","Scrollbar","Text","Avatar","FIELD_ACCESS_LEVELS","id","label","description","ListItemGraphic","target","type","createElement","size","image","Image","src","meta","alt","fallback","Fallback","delayMs","name","charAt","ListItemText","as","className","email","Fragment","ListItemMeta","rule","onRemoveAccess","onUpdatePermission","currentLevel","find","level","action","handle","variant","text","icon","iconPosition","trigger","map","CheckboxItem","key","checked","onClick","setTimeout","Separator","Item","FieldPermissionsSelection","rules","targetsList","selection","u","String","value","filter","Boolean","style","minHeight","item","title","actions"],"sources":["FieldPermissionsSelection.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { ReactComponent as More } from \"@webiny/icons/arrow_drop_down.svg\";\nimport { Button, DropdownMenu, List, Scrollbar, Text, Avatar } from \"@webiny/admin-ui\";\nimport type { FolderLevelPermissionsTarget } from \"@webiny/app-aco\";\nimport type { FieldRule } from \"~/types.js\";\n\nconst FIELD_ACCESS_LEVELS = [\n    {\n        id: \"hide\",\n        label: \"No Access\",\n        description: \"Hide this field from the user.\"\n    },\n    {\n        id: \"disable\",\n        label: \"Viewer (Read-only)\",\n        description: \"Allow the user to read, but not edit, this field.\"\n    }\n];\n\ninterface FieldPermissionsSelectionProps {\n    targetsList: FolderLevelPermissionsTarget[];\n    rules: FieldRule[];\n    onRemoveAccess: (params: { rule: FieldRule }) => void;\n    onUpdatePermission: (params: { rule: FieldRule }) => void;\n}\n\ntype Selection = Array<{ rule: FieldRule; target: FolderLevelPermissionsTarget }>;\n\ninterface ListItemGraphicProps {\n    target: FolderLevelPermissionsTarget;\n}\n\nconst ListItemGraphic = ({ target }: ListItemGraphicProps) => {\n    if (target.type === \"admin\") {\n        return (\n            <Avatar\n                size={\"md\"}\n                image={<Avatar.Image src={target.meta.image} alt={\"User's avatar.\"} />}\n                fallback={<Avatar.Fallback delayMs={0}>{target.name.charAt(0)}</Avatar.Fallback>}\n            />\n        );\n    }\n\n    return (\n        <Avatar\n            size={\"md\"}\n            fallback={<Avatar.Fallback delayMs={0}>{target.name.charAt(0)}</Avatar.Fallback>}\n        />\n    );\n};\n\ninterface ListItemTextProps {\n    target: FolderLevelPermissionsTarget;\n}\n\nconst ListItemText = ({ target }: ListItemTextProps) => {\n    if (target.type === \"admin\") {\n        return (\n            <div>\n                <Text as=\"div\">{target.name}</Text>\n                <Text as={\"div\"} size={\"sm\"} className={\"text-neutral-strong font-normal\"}>\n                    {target.meta.email || \"E-mail not available.\"}\n                </Text>\n            </div>\n        );\n    }\n\n    return <>{target.name}</>;\n};\n\ninterface ListItemMetaProps {\n    rule: FieldRule;\n    onRemoveAccess: (params: { rule: FieldRule }) => void;\n    onUpdatePermission: (params: { rule: FieldRule }) => void;\n}\n\nconst ListItemMeta = ({ rule, onRemoveAccess, onUpdatePermission }: ListItemMetaProps) => {\n    const currentLevel = useMemo(() => {\n        return FIELD_ACCESS_LEVELS.find(level => level.id === rule.action)!;\n    }, [rule.action]);\n\n    const handle = (\n        <Button variant={\"ghost\"} text={currentLevel.label} icon={<More />} iconPosition={\"end\"} />\n    );\n\n    return (\n        <DropdownMenu trigger={handle}>\n            {FIELD_ACCESS_LEVELS.map(level => (\n                <DropdownMenu.CheckboxItem\n                    key={level.id}\n                    checked={currentLevel.id === level.id}\n                    text={\n                        <div>\n                            <Text as={\"div\"}>{level.label}</Text>\n                            <Text as={\"div\"} size={\"sm\"} className={\"text-neutral-strong\"}>\n                                {level.description}\n                            </Text>\n                        </div>\n                    }\n                    onClick={() => {\n                        setTimeout(() => {\n                            onUpdatePermission({\n                                rule: {\n                                    ...rule,\n                                    action: level.id\n                                }\n                            });\n                        }, 75);\n                    }}\n                />\n            ))}\n            <DropdownMenu.Separator />\n            <DropdownMenu.Item\n                onClick={() => onRemoveAccess({ rule })}\n                text={\"Remove permission\"}\n            />\n        </DropdownMenu>\n    );\n};\n\nexport const FieldPermissionsSelection = ({\n    rules = [],\n    targetsList,\n    onRemoveAccess,\n    onUpdatePermission\n}: FieldPermissionsSelectionProps) => {\n    const selection = rules\n        .map(rule => {\n            const target = targetsList.find(u => u.target === String(rule.value));\n            if (target) {\n                return { rule, target };\n            }\n\n            return null;\n        })\n        .filter(Boolean) as Selection;\n\n    return (\n        <>\n            <Text as={\"div\"} className={\"mb-md\"}>\n                People and teams with access\n            </Text>\n            <Scrollbar style={{ minHeight: \"100px\" }}>\n                <List>\n                    {selection?.map(item => (\n                        <List.Item\n                            key={String(item.rule.value)}\n                            title={<ListItemText target={item.target} />}\n                            icon={<ListItemGraphic target={item.target} />}\n                            actions={\n                                <ListItemMeta\n                                    rule={item.rule}\n                                    onRemoveAccess={onRemoveAccess}\n                                    onUpdatePermission={onUpdatePermission}\n                                />\n                            }\n                        />\n                    ))}\n                </List>\n            </Scrollbar>\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog/PermissionsTab/PermissionsTab.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const PermissionsTab: ({ gridClassName }: {
+    gridClassName?: string;
+}) => React.JSX.Element;

package/admin/components/FieldEditor/EditFieldDialog/PermissionsTab/PermissionsTab.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { useQuery } from "@apollo/react-hooks";
+import { Grid } from "@webiny/admin-ui";
+import { useBind } from "@webiny/form";
+import { useWcp } from "@webiny/app-admin";
+import { LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS, UsersTeamsMultiAutocomplete } from "@webiny/app-aco";
+import { FieldPermissionsSelection } from "./FieldPermissionsSelection.js";
+import { CannotUsePermissions } from "./CannotUsePermissions.js";
+export const PermissionsTab = ({
+  gridClassName
+}) => {
+  const wcp = useWcp();
+  const bind = useBind({
+    name: "rules"
+  });
+  const allRules = bind.value || [];
+  const accessRules = allRules.filter(r => r.type === "accessControl");
+  const otherRules = allRules.filter(r => r.type !== "accessControl");
+  const listTargetsQuery = useQuery(LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS);
+  const targetsList = listTargetsQuery.data?.aco.listFolderLevelPermissionsTargets.data || [];
+  const addPermission = value => {
+    const selectedUserOrTeam = value[value.length - 1];
+    const newRule = {
+      type: "accessControl",
+      target: "identity",
+      operator: "matches",
+      value: selectedUserOrTeam,
+      action: "disable"
+    };
+    bind.onChange([...otherRules, ...accessRules, newRule]);
+  };
+  const updatePermission = ({
+    rule: updatedRule
+  }) => {
+    const updatedAccessRules = accessRules.map(rule => {
+      if (rule.value === updatedRule.value) {
+        return updatedRule;
+      }
+      return rule;
+    });
+    bind.onChange([...otherRules, ...updatedAccessRules]);
+  };
+  const removeUserTeam = ({
+    rule: removedRule
+  }) => {
+    const updatedAccessRules = accessRules.filter(rule => rule.value !== removedRule.value);
+    bind.onChange([...otherRules, ...updatedAccessRules]);
+  };
+  if (!wcp.canUseHcmsFieldPermissions()) {
+    return /*#__PURE__*/React.createElement(Grid, {
+      className: gridClassName
+    }, /*#__PURE__*/React.createElement(Grid.Column, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(CannotUsePermissions, null)));
+  }
+  return /*#__PURE__*/React.createElement(Grid, {
+    className: gridClassName
+  }, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(UsersTeamsMultiAutocomplete, {
+    options: targetsList,
+    value: accessRules.map(rule => String(rule.value)),
+    onChange: addPermission
+  })), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(FieldPermissionsSelection, {
+    rules: accessRules,
+    targetsList: targetsList,
+    onRemoveAccess: removeUserTeam,
+    onUpdatePermission: updatePermission
+  })));
+};
+
+//# sourceMappingURL=PermissionsTab.js.map

package/admin/components/FieldEditor/EditFieldDialog/PermissionsTab/PermissionsTab.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useQuery","Grid","useBind","useWcp","LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS","UsersTeamsMultiAutocomplete","FieldPermissionsSelection","CannotUsePermissions","PermissionsTab","gridClassName","wcp","bind","name","allRules","value","accessRules","filter","r","type","otherRules","listTargetsQuery","targetsList","data","aco","listFolderLevelPermissionsTargets","addPermission","selectedUserOrTeam","length","newRule","target","operator","action","onChange","updatePermission","rule","updatedRule","updatedAccessRules","map","removeUserTeam","removedRule","canUseHcmsFieldPermissions","createElement","className","Column","span","options","String","rules","onRemoveAccess","onUpdatePermission"],"sources":["PermissionsTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { useQuery } from \"@apollo/react-hooks\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { useBind } from \"@webiny/form\";\nimport { useWcp } from \"@webiny/app-admin\";\nimport {\n    LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS,\n    UsersTeamsMultiAutocomplete\n} from \"@webiny/app-aco\";\nimport type { FolderLevelPermissionsTarget } from \"@webiny/app-aco\";\nimport type { FieldRule } from \"~/types.js\";\nimport { FieldPermissionsSelection } from \"./FieldPermissionsSelection.js\";\nimport { CannotUsePermissions } from \"./CannotUsePermissions.js\";\n\nexport const PermissionsTab = ({ gridClassName }: { gridClassName?: string }) => {\n    const wcp = useWcp();\n    const bind = useBind({ name: \"rules\" });\n    const allRules: FieldRule[] = bind.value || [];\n    const accessRules = allRules.filter(r => r.type === \"accessControl\");\n    const otherRules = allRules.filter(r => r.type !== \"accessControl\");\n\n    const listTargetsQuery = useQuery(LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS);\n    const targetsList: FolderLevelPermissionsTarget[] =\n        listTargetsQuery.data?.aco.listFolderLevelPermissionsTargets.data || [];\n\n    const addPermission = (value: string[]) => {\n        const selectedUserOrTeam = value[value.length - 1];\n        const newRule: FieldRule = {\n            type: \"accessControl\",\n            target: \"identity\",\n            operator: \"matches\",\n            value: selectedUserOrTeam,\n            action: \"disable\"\n        };\n\n        bind.onChange([...otherRules, ...accessRules, newRule]);\n    };\n\n    const updatePermission = ({ rule: updatedRule }: { rule: FieldRule }) => {\n        const updatedAccessRules = accessRules.map(rule => {\n            if (rule.value === updatedRule.value) {\n                return updatedRule;\n            }\n            return rule;\n        });\n        bind.onChange([...otherRules, ...updatedAccessRules]);\n    };\n\n    const removeUserTeam = ({ rule: removedRule }: { rule: FieldRule }) => {\n        const updatedAccessRules = accessRules.filter(rule => rule.value !== removedRule.value);\n        bind.onChange([...otherRules, ...updatedAccessRules]);\n    };\n\n    if (!wcp.canUseHcmsFieldPermissions()) {\n        return (\n            <Grid className={gridClassName}>\n                <Grid.Column span={12}>\n                    <CannotUsePermissions />\n                </Grid.Column>\n            </Grid>\n        );\n    }\n\n    return (\n        <Grid className={gridClassName}>\n            <Grid.Column span={12}>\n                <UsersTeamsMultiAutocomplete\n                    options={targetsList}\n                    value={accessRules.map(\n                        rule => String(rule.value) as `admin:${string}` | `team:${string}`\n                    )}\n                    onChange={addPermission}\n                />\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <FieldPermissionsSelection\n                    rules={accessRules}\n                    targetsList={targetsList}\n                    onRemoveAccess={removeUserTeam}\n                    onUpdatePermission={updatePermission}\n                />\n            </Grid.Column>\n        </Grid>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog/RulesTab/RulesTab.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { FieldOption } from "@webiny/app-headless-cms-common/Fields/fieldOptions.js";
+interface ActionOption {
+    value: string;
+    label: string;
+}
+interface RulesTabProps {
+    gridClassName?: string;
+    fieldOptions: FieldOption[];
+    actionOptions?: ActionOption[];
+}
+export declare const RulesTab: ({ gridClassName, fieldOptions, actionOptions }: RulesTabProps) => React.JSX.Element;
+export {};