@backstage-community/plugin-rbac 1.40.1 → 1.41.0

package/dist/components/CreateRole/PluginsDropdownOption.esm.js

@@ -1,4 +1,5 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createElement } from 'react';
 import Typography from '@mui/material/Typography';
 import Checkbox from '@mui/material/Checkbox';
 import Box from '@mui/material/Box';
@@ -14,7 +15,7 @@ const PluginsDropdownOption = ({
   const { label, value } = option;
   const matches = match(label, inputValue, { insideWords: true });
   const parts = parse(label, matches);
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ createElement(
     "li",
     {
       ...props,
@@ -23,27 +24,29 @@ const PluginsDropdownOption = ({
         ...value === "" ? { borderBottom: `1px solid #D2D2D2` } : {}
       }
     },
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ jsxs(
       Box,
       {
         sx: {
           display: "flex"
-        }
-      },
-      /* @__PURE__ */ React__default.createElement(Checkbox, { style: { marginRight: 8 }, checked: state.selected }),
-      /* @__PURE__ */ React__default.createElement(Typography, { component: "span", sx: { marginTop: "0.5rem" } }, parts.map((part) => /* @__PURE__ */ React__default.createElement(
-        Typography,
-        {
-          key: `${part.text}-${label}`,
-          component: "span",
-          sx: {
-            fontWeight: !inputValue || part.highlight ? 400 : 700,
-            color: (theme) => theme.palette.text.primary
-          },
-          "data-testid": option.label
         },
-        part.text
-      )))
+        children: [
+          /* @__PURE__ */ jsx(Checkbox, { style: { marginRight: 8 }, checked: state.selected }),
+          /* @__PURE__ */ jsx(Typography, { component: "span", sx: { marginTop: "0.5rem" }, children: parts.map((part) => /* @__PURE__ */ jsx(
+            Typography,
+            {
+              component: "span",
+              sx: {
+                fontWeight: !inputValue || part.highlight ? 400 : 700,
+                color: (theme) => theme.palette.text.primary
+              },
+              "data-testid": option.label,
+              children: part.text
+            },
+            `${part.text}-${label}`
+          )) })
+        ]
+      }
     )
   );
 };

package/dist/components/CreateRole/PluginsDropdownOption.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PluginsDropdownOption.esm.js","sources":["../../../src/components/CreateRole/PluginsDropdownOption.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { AutocompleteRenderOptionState } from '@mui/material/Autocomplete';\nimport Typography from '@mui/material/Typography';\nimport Checkbox from '@mui/material/Checkbox';\nimport Box from '@mui/material/Box';\nimport match from 'autosuggest-highlight/match';\nimport parse from 'autosuggest-highlight/parse';\n\nimport { SelectedPlugin } from '../../types';\n\ntype PluginsDropdownOptionProps = {\n  option: SelectedPlugin;\n  state: AutocompleteRenderOptionState;\n  props: React.HTMLAttributes<HTMLLIElement>;\n};\n\nexport const PluginsDropdownOption = ({\n  props,\n  option,\n  state,\n}: PluginsDropdownOptionProps) => {\n  const { inputValue } = state;\n  const { label, value } = option;\n  const matches = match(label, inputValue, { insideWords: true });\n  const parts = parse(label, matches);\n\n  return (\n    <li\n      {...props}\n      key={`${label}`}\n      style={{\n        ...(value === '' ? { borderBottom: `1px solid #D2D2D2` } : {}),\n      }}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n        }}\n      >\n        <Checkbox style={{ marginRight: 8 }} checked={state.selected} />\n        <Typography component=\"span\" sx={{ marginTop: '0.5rem' }}>\n          {parts.map(part => (\n            <Typography\n              key={`${part.text}-${label}`}\n              component=\"span\"\n              sx={{\n                fontWeight: !inputValue || part.highlight ? 400 : 700,\n                color: theme => theme.palette.text.primary,\n              }}\n              data-testid={option.label}\n            >\n              {part.text}\n            </Typography>\n          ))}\n        </Typography>\n      </Box>\n    </li>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AAgCO,MAAM,wBAAwB,CAAC;AAAA,EACpC,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAM,MAAA,EAAE,YAAe,GAAA,KAAA;AACvB,EAAM,MAAA,EAAE,KAAO,EAAA,KAAA,EAAU,GAAA,MAAA;AACzB,EAAA,MAAM,UAAU,KAAM,CAAA,KAAA,EAAO,YAAY,EAAE,WAAA,EAAa,MAAM,CAAA;AAC9D,EAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,KAAA,EAAO,OAAO,CAAA;AAElC,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,GAAG,KAAK,CAAA,CAAA;AAAA,MACb,KAAO,EAAA;AAAA,QACL,GAAI,KAAU,KAAA,EAAA,GAAK,EAAE,YAAc,EAAA,CAAA,iBAAA,CAAA,KAAwB;AAAC;AAC9D,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,OAAS,EAAA;AAAA;AACX,OAAA;AAAA,sBAEAA,cAAA,CAAA,aAAA,CAAC,YAAS,KAAO,EAAA,EAAE,aAAa,CAAE,EAAA,EAAG,OAAS,EAAA,KAAA,CAAM,QAAU,EAAA,CAAA;AAAA,sBAC9DA,cAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,EAAA,EAAI,EAAE,SAAA,EAAW,QAAS,EAAA,EAAA,EACpD,KAAM,CAAA,GAAA,CAAI,CACT,IAAA,qBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,GAAK,EAAA,CAAA,EAAG,IAAK,CAAA,IAAI,IAAI,KAAK,CAAA,CAAA;AAAA,UAC1B,SAAU,EAAA,MAAA;AAAA,UACV,EAAI,EAAA;AAAA,YACF,UAAY,EAAA,CAAC,UAAc,IAAA,IAAA,CAAK,YAAY,GAAM,GAAA,GAAA;AAAA,YAClD,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,WACrC;AAAA,UACA,eAAa,MAAO,CAAA;AAAA,SAAA;AAAA,QAEnB,IAAK,CAAA;AAAA,OAET,CACH;AAAA;AACF,GACF;AAEJ;;;;"}
+{"version":3,"file":"PluginsDropdownOption.esm.js","sources":["../../../src/components/CreateRole/PluginsDropdownOption.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport type { HTMLAttributes } from 'react';\n\nimport { AutocompleteRenderOptionState } from '@mui/material/Autocomplete';\nimport Typography from '@mui/material/Typography';\nimport Checkbox from '@mui/material/Checkbox';\nimport Box from '@mui/material/Box';\nimport match from 'autosuggest-highlight/match';\nimport parse from 'autosuggest-highlight/parse';\n\nimport { SelectedPlugin } from '../../types';\n\ntype PluginsDropdownOptionProps = {\n  option: SelectedPlugin;\n  state: AutocompleteRenderOptionState;\n  props: HTMLAttributes<HTMLLIElement>;\n};\n\nexport const PluginsDropdownOption = ({\n  props,\n  option,\n  state,\n}: PluginsDropdownOptionProps) => {\n  const { inputValue } = state;\n  const { label, value } = option;\n  const matches = match(label, inputValue, { insideWords: true });\n  const parts = parse(label, matches);\n\n  return (\n    <li\n      {...props}\n      key={`${label}`}\n      style={{\n        ...(value === '' ? { borderBottom: `1px solid #D2D2D2` } : {}),\n      }}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n        }}\n      >\n        <Checkbox style={{ marginRight: 8 }} checked={state.selected} />\n        <Typography component=\"span\" sx={{ marginTop: '0.5rem' }}>\n          {parts.map(part => (\n            <Typography\n              key={`${part.text}-${label}`}\n              component=\"span\"\n              sx={{\n                fontWeight: !inputValue || part.highlight ? 400 : 700,\n                color: theme => theme.palette.text.primary,\n              }}\n              data-testid={option.label}\n            >\n              {part.text}\n            </Typography>\n          ))}\n        </Typography>\n      </Box>\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAgCO,MAAM,wBAAwB,CAAC;AAAA,EACpC,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAM,MAAA,EAAE,YAAe,GAAA,KAAA;AACvB,EAAM,MAAA,EAAE,KAAO,EAAA,KAAA,EAAU,GAAA,MAAA;AACzB,EAAA,MAAM,UAAU,KAAM,CAAA,KAAA,EAAO,YAAY,EAAE,WAAA,EAAa,MAAM,CAAA;AAC9D,EAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,KAAA,EAAO,OAAO,CAAA;AAElC,EACE,uBAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,GAAG,KAAK,CAAA,CAAA;AAAA,MACb,KAAO,EAAA;AAAA,QACL,GAAI,KAAU,KAAA,EAAA,GAAK,EAAE,YAAc,EAAA,CAAA,iBAAA,CAAA,KAAwB;AAAC;AAC9D,KAAA;AAAA,oBAEA,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,OAAS,EAAA;AAAA,SACX;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,QAAA,EAAA,EAAS,OAAO,EAAE,WAAA,EAAa,GAAK,EAAA,OAAA,EAAS,MAAM,QAAU,EAAA,CAAA;AAAA,0BAC9D,GAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,EAAA,EAAI,EAAE,SAAA,EAAW,QAAS,EAAA,EACpD,QAAM,EAAA,KAAA,CAAA,GAAA,CAAI,CACT,IAAA,qBAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cAEC,SAAU,EAAA,MAAA;AAAA,cACV,EAAI,EAAA;AAAA,gBACF,UAAY,EAAA,CAAC,UAAc,IAAA,IAAA,CAAK,YAAY,GAAM,GAAA,GAAA;AAAA,gBAClD,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,eACrC;AAAA,cACA,eAAa,MAAO,CAAA,KAAA;AAAA,cAEnB,QAAK,EAAA,IAAA,CAAA;AAAA,aAAA;AAAA,YARD,CAAG,EAAA,IAAA,CAAK,IAAI,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,WAU7B,CACH,EAAA;AAAA;AAAA;AAAA;AACF,GACF;AAEJ;;;;"}

package/dist/components/CreateRole/ReviewStep.esm.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { StructuredMetadataTable } from '@backstage/core-components';
 import Typography from '@mui/material/Typography';
 import { getPermissionsNumber } from '../../utils/create-role-utils.esm.js';
@@ -13,8 +13,14 @@ const tableMetadata = (values) => {
     values
   )})`;
   return {
-    "Name, description, and owner of role": /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Typography, { sx: { margin: "0px" } }, values.name), /* @__PURE__ */ React__default.createElement("br", null), /* @__PURE__ */ React__default.createElement(Typography, { sx: { margin: "0px" } }, values.description || "-"), /* @__PURE__ */ React__default.createElement("br", null), /* @__PURE__ */ React__default.createElement(Typography, { sx: { margin: "0px" } }, values.owner || "-")),
-    [membersKey]: /* @__PURE__ */ React__default.createElement(
+    "Name, description, and owner of role": /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Typography, { sx: { margin: "0px" }, children: values.name }),
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx(Typography, { sx: { margin: "0px" }, children: values.description || "-" }),
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx(Typography, { sx: { margin: "0px" }, children: values.owner || "-" })
+    ] }),
+    [membersKey]: /* @__PURE__ */ jsx(
       ReviewStepTable,
       {
         rows: values.selectedMembers,
@@ -22,7 +28,7 @@ const tableMetadata = (values) => {
         tableWrapperWidth: 550
       }
     ),
-    [permissionPoliciesKey]: /* @__PURE__ */ React__default.createElement(
+    [permissionPoliciesKey]: /* @__PURE__ */ jsx(
       ReviewStepTable,
       {
         rows: values.permissionPoliciesRows,
@@ -36,14 +42,17 @@ const ReviewStep = ({
   values,
   isEditing
 }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { style: { overflow: "auto" } }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h6" }, isEditing ? "Review and save" : "Review and create"), /* @__PURE__ */ React__default.createElement(
-    StructuredMetadataTable,
-    {
-      dense: true,
-      metadata: tableMetadata(values),
-      options: { titleFormat: (key) => key }
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { style: { overflow: "auto" }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", children: isEditing ? "Review and save" : "Review and create" }),
+    /* @__PURE__ */ jsx(
+      StructuredMetadataTable,
+      {
+        dense: true,
+        metadata: tableMetadata(values),
+        options: { titleFormat: (key) => key }
+      }
+    )
+  ] });
 };
 
 export { ReviewStep };

package/dist/components/CreateRole/ReviewStep.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReviewStep.esm.js","sources":["../../../src/components/CreateRole/ReviewStep.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { StructuredMetadataTable } from '@backstage/core-components';\n\nimport Typography from '@mui/material/Typography';\n\nimport { getPermissionsNumber } from '../../utils/create-role-utils';\nimport { getMembers } from '../../utils/rbac-utils';\nimport { reviewStepMemebersTableColumns } from './AddedMembersTableColumn';\nimport { ReviewStepTable } from './ReviewStepTable';\nimport { selectedPermissionPoliciesColumn } from './SelectedPermissionPoliciesColumn';\nimport { RoleFormValues } from './types';\n\nconst tableMetadata = (values: RoleFormValues) => {\n  const membersKey =\n    values.selectedMembers.length > 0\n      ? `Users and groups (${getMembers(values.selectedMembers)})`\n      : 'Users and groups';\n  const permissionPoliciesKey = `Permission policies (${getPermissionsNumber(\n    values,\n  )})`;\n  return {\n    'Name, description, and owner of role': (\n      <>\n        <Typography sx={{ margin: '0px' }}>{values.name}</Typography>\n        <br />\n        <Typography sx={{ margin: '0px' }}>\n          {values.description || '-'}\n        </Typography>\n        <br />\n        <Typography sx={{ margin: '0px' }}>{values.owner || '-'}</Typography>\n      </>\n    ),\n    [membersKey]: (\n      <ReviewStepTable\n        rows={values.selectedMembers}\n        columns={reviewStepMemebersTableColumns()}\n        tableWrapperWidth={550}\n      />\n    ),\n    [permissionPoliciesKey]: (\n      <ReviewStepTable\n        rows={values.permissionPoliciesRows}\n        columns={selectedPermissionPoliciesColumn()}\n        tableWrapperWidth={700}\n      />\n    ),\n  };\n};\n\nexport const ReviewStep = ({\n  values,\n  isEditing,\n}: {\n  values: RoleFormValues;\n  isEditing: boolean;\n}) => {\n  return (\n    <div style={{ overflow: 'auto' }}>\n      <Typography variant=\"h6\">\n        {isEditing ? 'Review and save' : 'Review and create'}\n      </Typography>\n      <StructuredMetadataTable\n        dense\n        metadata={tableMetadata(values)}\n        options={{ titleFormat: (key: string) => key }}\n      />\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AA4BA,MAAM,aAAA,GAAgB,CAAC,MAA2B,KAAA;AAChD,EAAM,MAAA,UAAA,GACJ,MAAO,CAAA,eAAA,CAAgB,MAAS,GAAA,CAAA,GAC5B,qBAAqB,UAAW,CAAA,MAAA,CAAO,eAAe,CAAC,CACvD,CAAA,CAAA,GAAA,kBAAA;AACN,EAAA,MAAM,wBAAwB,CAAwB,qBAAA,EAAA,oBAAA;AAAA,IACpD;AAAA,GACD,CAAA,CAAA,CAAA;AACD,EAAO,OAAA;AAAA,IACL,wDAEIA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAI,EAAE,MAAQ,EAAA,KAAA,EAAU,EAAA,EAAA,MAAA,CAAO,IAAK,CAChD,kBAAAA,cAAA,CAAA,aAAA,CAAC,UAAG,CACJ,kBAAAA,cAAA,CAAA,aAAA,CAAC,cAAW,EAAI,EAAA,EAAE,MAAQ,EAAA,KAAA,MACvB,MAAO,CAAA,WAAA,IAAe,GACzB,CACA,kBAAAA,cAAA,CAAA,aAAA,CAAC,UAAG,CACJ,kBAAAA,cAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAI,EAAE,MAAQ,EAAA,KAAA,MAAU,MAAO,CAAA,KAAA,IAAS,GAAI,CAC1D,CAAA;AAAA,IAEF,CAAC,UAAU,mBACTA,cAAA,CAAA,aAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,MAAM,MAAO,CAAA,eAAA;AAAA,QACb,SAAS,8BAA+B,EAAA;AAAA,QACxC,iBAAmB,EAAA;AAAA;AAAA,KACrB;AAAA,IAEF,CAAC,qBAAqB,mBACpBA,cAAA,CAAA,aAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,MAAM,MAAO,CAAA,sBAAA;AAAA,QACb,SAAS,gCAAiC,EAAA;AAAA,QAC1C,iBAAmB,EAAA;AAAA;AAAA;AACrB,GAEJ;AACF,CAAA;AAEO,MAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA;AACF,CAGM,KAAA;AACJ,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,KAAO,EAAA,EAAE,UAAU,MAAO,EAAA,EAAA,kBAC5BA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,IAAA,EAAA,EACjB,SAAY,GAAA,iBAAA,GAAoB,mBACnC,CACA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,KAAK,EAAA,IAAA;AAAA,MACL,QAAA,EAAU,cAAc,MAAM,CAAA;AAAA,MAC9B,OAAS,EAAA,EAAE,WAAa,EAAA,CAAC,QAAgB,GAAI;AAAA;AAAA,GAEjD,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ReviewStep.esm.js","sources":["../../../src/components/CreateRole/ReviewStep.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { StructuredMetadataTable } from '@backstage/core-components';\n\nimport Typography from '@mui/material/Typography';\n\nimport { getPermissionsNumber } from '../../utils/create-role-utils';\nimport { getMembers } from '../../utils/rbac-utils';\nimport { reviewStepMemebersTableColumns } from './AddedMembersTableColumn';\nimport { ReviewStepTable } from './ReviewStepTable';\nimport { selectedPermissionPoliciesColumn } from './SelectedPermissionPoliciesColumn';\nimport { RoleFormValues } from './types';\n\nconst tableMetadata = (values: RoleFormValues) => {\n  const membersKey =\n    values.selectedMembers.length > 0\n      ? `Users and groups (${getMembers(values.selectedMembers)})`\n      : 'Users and groups';\n  const permissionPoliciesKey = `Permission policies (${getPermissionsNumber(\n    values,\n  )})`;\n  return {\n    'Name, description, and owner of role': (\n      <>\n        <Typography sx={{ margin: '0px' }}>{values.name}</Typography>\n        <br />\n        <Typography sx={{ margin: '0px' }}>\n          {values.description || '-'}\n        </Typography>\n        <br />\n        <Typography sx={{ margin: '0px' }}>{values.owner || '-'}</Typography>\n      </>\n    ),\n    [membersKey]: (\n      <ReviewStepTable\n        rows={values.selectedMembers}\n        columns={reviewStepMemebersTableColumns()}\n        tableWrapperWidth={550}\n      />\n    ),\n    [permissionPoliciesKey]: (\n      <ReviewStepTable\n        rows={values.permissionPoliciesRows}\n        columns={selectedPermissionPoliciesColumn()}\n        tableWrapperWidth={700}\n      />\n    ),\n  };\n};\n\nexport const ReviewStep = ({\n  values,\n  isEditing,\n}: {\n  values: RoleFormValues;\n  isEditing: boolean;\n}) => {\n  return (\n    <div style={{ overflow: 'auto' }}>\n      <Typography variant=\"h6\">\n        {isEditing ? 'Review and save' : 'Review and create'}\n      </Typography>\n      <StructuredMetadataTable\n        dense\n        metadata={tableMetadata(values)}\n        options={{ titleFormat: (key: string) => key }}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA0BA,MAAM,aAAA,GAAgB,CAAC,MAA2B,KAAA;AAChD,EAAM,MAAA,UAAA,GACJ,MAAO,CAAA,eAAA,CAAgB,MAAS,GAAA,CAAA,GAC5B,qBAAqB,UAAW,CAAA,MAAA,CAAO,eAAe,CAAC,CACvD,CAAA,CAAA,GAAA,kBAAA;AACN,EAAA,MAAM,wBAAwB,CAAwB,qBAAA,EAAA,oBAAA;AAAA,IACpD;AAAA,GACD,CAAA,CAAA,CAAA;AACD,EAAO,OAAA;AAAA,IACL,wDAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,cAAW,EAAI,EAAA,EAAE,QAAQ,KAAM,EAAA,EAAI,iBAAO,IAAK,EAAA,CAAA;AAAA,0BAC/C,IAAG,EAAA,EAAA,CAAA;AAAA,sBACJ,GAAA,CAAC,cAAW,EAAI,EAAA,EAAE,QAAQ,KAAM,EAAA,EAC7B,QAAO,EAAA,MAAA,CAAA,WAAA,IAAe,GACzB,EAAA,CAAA;AAAA,0BACC,IAAG,EAAA,EAAA,CAAA;AAAA,sBACJ,GAAA,CAAC,cAAW,EAAI,EAAA,EAAE,QAAQ,KAAM,EAAA,EAAI,QAAO,EAAA,MAAA,CAAA,KAAA,IAAS,GAAI,EAAA;AAAA,KAC1D,EAAA,CAAA;AAAA,IAEF,CAAC,UAAU,mBACT,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,MAAM,MAAO,CAAA,eAAA;AAAA,QACb,SAAS,8BAA+B,EAAA;AAAA,QACxC,iBAAmB,EAAA;AAAA;AAAA,KACrB;AAAA,IAEF,CAAC,qBAAqB,mBACpB,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,MAAM,MAAO,CAAA,sBAAA;AAAA,QACb,SAAS,gCAAiC,EAAA;AAAA,QAC1C,iBAAmB,EAAA;AAAA;AAAA;AACrB,GAEJ;AACF,CAAA;AAEO,MAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA;AACF,CAGM,KAAA;AACJ,EAAA,4BACG,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,QAAA,EAAU,QACtB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,IACjB,EAAA,QAAA,EAAA,SAAA,GAAY,oBAAoB,mBACnC,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,uBAAA;AAAA,MAAA;AAAA,QACC,KAAK,EAAA,IAAA;AAAA,QACL,QAAA,EAAU,cAAc,MAAM,CAAA;AAAA,QAC9B,OAAS,EAAA,EAAE,WAAa,EAAA,CAAC,QAAgB,GAAI;AAAA;AAAA;AAC/C,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/CreateRole/ReviewStepTable.esm.js

@@ -1,27 +1,34 @@
-import React__default from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Fragment } from 'react';
 
 const ReviewStepTable = ({
   columns,
   rows,
   tableWrapperWidth
 }) => {
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
         maxHeight: "230px",
         overflow: "auto",
         width: `${tableWrapperWidth}px`
-      }
-    },
-    /* @__PURE__ */ React__default.createElement("table", { style: { width: `${tableWrapperWidth - 50}px` } }, /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, columns.map((col) => /* @__PURE__ */ React__default.createElement("th", { style: { width: "150px" }, key: col.title }, col.title)))), /* @__PURE__ */ React__default.createElement("tbody", null, rows.map((row, rowIndex) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: rowIndex }, /* @__PURE__ */ React__default.createElement("tr", null, columns.map((rowCol) => /* @__PURE__ */ React__default.createElement(
-      "td",
-      {
-        style: { width: "150px" },
-        key: `${rowCol.title}-${rowCol.field}`
       },
-      rowCol.render ? rowCol.render(row[rowCol.field]) : row[rowCol.field] || (rowCol.emptyValue ?? "")
-    ))), /* @__PURE__ */ React__default.createElement("tr", null)))))
+      children: /* @__PURE__ */ jsxs("table", { style: { width: `${tableWrapperWidth - 50}px` }, children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx("th", { style: { width: "150px" }, children: col.title }, col.title)) }) }),
+        /* @__PURE__ */ jsx("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("tr", { children: columns.map((rowCol) => /* @__PURE__ */ jsx(
+            "td",
+            {
+              style: { width: "150px" },
+              children: rowCol.render ? rowCol.render(row[rowCol.field]) : row[rowCol.field] || (rowCol.emptyValue ?? "")
+            },
+            `${rowCol.title}-${rowCol.field}`
+          )) }),
+          /* @__PURE__ */ jsx("tr", {})
+        ] }, rowIndex)) })
+      ] })
+    }
   );
 };
 

package/dist/components/CreateRole/ReviewStepTable.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReviewStepTable.esm.js","sources":["../../../src/components/CreateRole/ReviewStepTable.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nexport const ReviewStepTable = ({\n  columns,\n  rows,\n  tableWrapperWidth,\n}: {\n  columns: any[];\n  rows: any[];\n  tableWrapperWidth: number;\n}) => {\n  return (\n    <div\n      style={{\n        maxHeight: '230px',\n        overflow: 'auto',\n        width: `${tableWrapperWidth}px`,\n      }}\n    >\n      <table style={{ width: `${tableWrapperWidth - 50}px` }}>\n        <thead>\n          <tr>\n            {columns.map(col => (\n              <th style={{ width: '150px' }} key={col.title}>\n                {col.title}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row, rowIndex) => (\n            <React.Fragment key={rowIndex}>\n              <tr>\n                {columns.map(rowCol => (\n                  <td\n                    style={{ width: '150px' }}\n                    key={`${rowCol.title}-${rowCol.field}`}\n                  >\n                    {rowCol.render\n                      ? rowCol.render(row[rowCol.field])\n                      : row[rowCol.field] || (rowCol.emptyValue ?? '')}\n                  </td>\n                ))}\n              </tr>\n              <tr />\n            </React.Fragment>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;AAiBO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAIM,KAAA;AACJ,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAW,EAAA,OAAA;AAAA,QACX,QAAU,EAAA,MAAA;AAAA,QACV,KAAA,EAAO,GAAG,iBAAiB,CAAA,EAAA;AAAA;AAC7B,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA,CAAC,WAAM,KAAO,EAAA,EAAE,OAAO,CAAG,EAAA,iBAAA,GAAoB,EAAE,CAAA,EAAA,CAAA,EAC9C,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,+BACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EACE,OAAQ,CAAA,GAAA,CAAI,CACX,GAAA,qBAAAA,cAAA,CAAA,aAAA,CAAC,QAAG,KAAO,EAAA,EAAE,KAAO,EAAA,OAAA,EAAW,EAAA,GAAA,EAAK,IAAI,KACrC,EAAA,EAAA,GAAA,CAAI,KACP,CACD,CACH,CACF,CACA,kBAAAA,cAAA,CAAA,aAAA,CAAC,OACE,EAAA,IAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,KAAK,QACd,qBAAAA,cAAA,CAAA,aAAA,CAACA,cAAM,CAAA,QAAA,EAAN,EAAe,GAAA,EAAK,4BAClBA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EACE,OAAQ,CAAA,GAAA,CAAI,CACX,MAAA,qBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,KAAA,EAAO,OAAQ,EAAA;AAAA,QACxB,KAAK,CAAG,EAAA,MAAA,CAAO,KAAK,CAAA,CAAA,EAAI,OAAO,KAAK,CAAA;AAAA,OAAA;AAAA,MAEnC,MAAO,CAAA,MAAA,GACJ,MAAO,CAAA,MAAA,CAAO,IAAI,MAAO,CAAA,KAAK,CAAC,CAAA,GAC/B,GAAI,CAAA,MAAA,CAAO,KAAK,CAAA,KAAM,OAAO,UAAc,IAAA,EAAA;AAAA,KAElD,CACH,CACA,kBAAAA,cAAA,CAAA,aAAA,CAAC,UAAG,CACN,CACD,CACH,CACF;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"ReviewStepTable.esm.js","sources":["../../../src/components/CreateRole/ReviewStepTable.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { Fragment } from 'react';\n\nexport const ReviewStepTable = ({\n  columns,\n  rows,\n  tableWrapperWidth,\n}: {\n  columns: any[];\n  rows: any[];\n  tableWrapperWidth: number;\n}) => {\n  return (\n    <div\n      style={{\n        maxHeight: '230px',\n        overflow: 'auto',\n        width: `${tableWrapperWidth}px`,\n      }}\n    >\n      <table style={{ width: `${tableWrapperWidth - 50}px` }}>\n        <thead>\n          <tr>\n            {columns.map(col => (\n              <th style={{ width: '150px' }} key={col.title}>\n                {col.title}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row, rowIndex) => (\n            <Fragment key={rowIndex}>\n              <tr>\n                {columns.map(rowCol => (\n                  <td\n                    style={{ width: '150px' }}\n                    key={`${rowCol.title}-${rowCol.field}`}\n                  >\n                    {rowCol.render\n                      ? rowCol.render(row[rowCol.field])\n                      : row[rowCol.field] || (rowCol.emptyValue ?? '')}\n                  </td>\n                ))}\n              </tr>\n              <tr />\n            </Fragment>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AAiBO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAIM,KAAA;AACJ,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAW,EAAA,OAAA;AAAA,QACX,QAAU,EAAA,MAAA;AAAA,QACV,KAAA,EAAO,GAAG,iBAAiB,CAAA,EAAA;AAAA,OAC7B;AAAA,MAEA,QAAA,kBAAA,IAAA,CAAC,WAAM,KAAO,EAAA,EAAE,OAAO,CAAG,EAAA,iBAAA,GAAoB,EAAE,CAAA,EAAA,CAAA,EAC9C,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WACC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EACE,kBAAQ,GAAI,CAAA,CAAA,GAAA,yBACV,IAAG,EAAA,EAAA,KAAA,EAAO,EAAE,KAAO,EAAA,OAAA,IACjB,QAAI,EAAA,GAAA,CAAA,KAAA,EAAA,EAD6B,IAAI,KAExC,CACD,GACH,CACF,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,WACE,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CAAC,GAAK,EAAA,QAAA,0BACb,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,IAAA,EAAA,EACE,QAAQ,EAAA,OAAA,CAAA,GAAA,CAAI,CACX,MAAA,qBAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,EAAE,KAAA,EAAO,OAAQ,EAAA;AAAA,cAGvB,QAAO,EAAA,MAAA,CAAA,MAAA,GACJ,MAAO,CAAA,MAAA,CAAO,IAAI,MAAO,CAAA,KAAK,CAAC,CAAA,GAC/B,GAAI,CAAA,MAAA,CAAO,KAAK,CAAA,KAAM,OAAO,UAAc,IAAA,EAAA;AAAA,aAAA;AAAA,YAJ1C,CAAG,EAAA,MAAA,CAAO,KAAK,CAAA,CAAA,EAAI,OAAO,KAAK,CAAA;AAAA,WAMvC,CACH,EAAA,CAAA;AAAA,8BACC,IAAG,EAAA,EAAA;AAAA,SAbS,EAAA,EAAA,QAcf,CACD,CACH,EAAA;AAAA,OACF,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/CreateRole/RoleDetailsForm.esm.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import TextField from '@mui/material/TextField';
 
 const RoleDetailsForm = ({
@@ -9,64 +9,66 @@ const RoleDetailsForm = ({
   handleBlur,
   handleChange
 }) => {
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
         display: "flex",
         flexDirection: "column",
         gap: "20px"
-      }
-    },
-    /* @__PURE__ */ React__default.createElement(
-      TextField,
-      {
-        required: true,
-        label: "Name",
-        variant: "outlined",
-        id: "role-name",
-        "data-testid": "role-name",
-        "aria-labelledby": "name",
-        helperText: nameError ?? "Enter name of the role",
-        value: name,
-        name: "name",
-        onChange: handleChange,
-        onBlur: handleBlur,
-        error: !!nameError
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      TextField,
-      {
-        label: "Description",
-        variant: "outlined",
-        helperText: "Enter a brief description about the role (The purpose of the role)",
-        value: description,
-        "data-testid": "role-description",
-        id: "role-description",
-        name: "description",
-        "aria-labelledby": "description",
-        onChange: handleChange,
-        onBlur: handleBlur,
-        multiline: true
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      TextField,
-      {
-        label: "Owner",
-        variant: "outlined",
-        helperText: "Optional: Enter a user or group who will have permission to edit this role and create additional roles. In the next step, specify which users they can assign to their roles and which plugins they can grant access to. If left blank, automatically assigns the author at creation.",
-        value: owner,
-        "data-testid": "role-owner",
-        id: "role-owner",
-        name: "owner",
-        "aria-labelledby": "owner",
-        onChange: handleChange,
-        onBlur: handleBlur,
-        multiline: true
-      }
-    )
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            required: true,
+            label: "Name",
+            variant: "outlined",
+            id: "role-name",
+            "data-testid": "role-name",
+            "aria-labelledby": "name",
+            helperText: nameError ?? "Enter name of the role",
+            value: name,
+            name: "name",
+            onChange: handleChange,
+            onBlur: handleBlur,
+            error: !!nameError
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Description",
+            variant: "outlined",
+            helperText: "Enter a brief description about the role (The purpose of the role)",
+            value: description,
+            "data-testid": "role-description",
+            id: "role-description",
+            name: "description",
+            "aria-labelledby": "description",
+            onChange: handleChange,
+            onBlur: handleBlur,
+            multiline: true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Owner",
+            variant: "outlined",
+            helperText: "Optional: Enter a user or group who will have permission to edit this role and create additional roles. In the next step, specify which users they can assign to their roles and which plugins they can grant access to. If left blank, automatically assigns the author at creation.",
+            value: owner,
+            "data-testid": "role-owner",
+            id: "role-owner",
+            name: "owner",
+            "aria-labelledby": "owner",
+            onChange: handleChange,
+            onBlur: handleBlur,
+            multiline: true
+          }
+        )
+      ]
+    }
   );
 };
 

package/dist/components/CreateRole/RoleDetailsForm.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoleDetailsForm.esm.js","sources":["../../../src/components/CreateRole/RoleDetailsForm.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport TextField from '@mui/material/TextField';\n\ntype RoleDetailsFormProps = {\n  name: string;\n  description?: string;\n  owner?: string;\n  nameError?: string;\n  handleBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  handleChange: React.ChangeEventHandler<\n    HTMLTextAreaElement | HTMLInputElement\n  >;\n};\n\nexport const RoleDetailsForm = ({\n  name,\n  description,\n  owner,\n  nameError,\n  handleBlur,\n  handleChange,\n}: RoleDetailsFormProps) => {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '20px',\n      }}\n    >\n      <TextField\n        required\n        label=\"Name\"\n        variant=\"outlined\"\n        id=\"role-name\"\n        data-testid=\"role-name\"\n        aria-labelledby=\"name\"\n        helperText={nameError ?? 'Enter name of the role'}\n        value={name}\n        name=\"name\"\n        onChange={handleChange}\n        onBlur={handleBlur}\n        error={!!nameError}\n      />\n      <TextField\n        label=\"Description\"\n        variant=\"outlined\"\n        helperText=\"Enter a brief description about the role (The purpose of the role)\"\n        value={description}\n        data-testid=\"role-description\"\n        id=\"role-description\"\n        name=\"description\"\n        aria-labelledby=\"description\"\n        onChange={handleChange}\n        onBlur={handleBlur}\n        multiline\n      />\n      <TextField\n        label=\"Owner\"\n        variant=\"outlined\"\n        helperText=\"Optional: Enter a user or group who will have permission to edit this role and create additional roles. In the next step, specify which users they can assign to their roles and which plugins they can grant access to. If left blank, automatically assigns the author at creation.\"\n        value={owner}\n        data-testid=\"role-owner\"\n        id=\"role-owner\"\n        name=\"owner\"\n        aria-labelledby=\"owner\"\n        onChange={handleChange}\n        onBlur={handleBlur}\n        multiline\n      />\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;AA8BO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,IAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,GAAK,EAAA;AAAA;AACP,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,QAAQ,EAAA,IAAA;AAAA,QACR,KAAM,EAAA,MAAA;AAAA,QACN,OAAQ,EAAA,UAAA;AAAA,QACR,EAAG,EAAA,WAAA;AAAA,QACH,aAAY,EAAA,WAAA;AAAA,QACZ,iBAAgB,EAAA,MAAA;AAAA,QAChB,YAAY,SAAa,IAAA,wBAAA;AAAA,QACzB,KAAO,EAAA,IAAA;AAAA,QACP,IAAK,EAAA,MAAA;AAAA,QACL,QAAU,EAAA,YAAA;AAAA,QACV,MAAQ,EAAA,UAAA;AAAA,QACR,KAAA,EAAO,CAAC,CAAC;AAAA;AAAA,KACX;AAAA,oBACAA,cAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,aAAA;AAAA,QACN,OAAQ,EAAA,UAAA;AAAA,QACR,UAAW,EAAA,oEAAA;AAAA,QACX,KAAO,EAAA,WAAA;AAAA,QACP,aAAY,EAAA,kBAAA;AAAA,QACZ,EAAG,EAAA,kBAAA;AAAA,QACH,IAAK,EAAA,aAAA;AAAA,QACL,iBAAgB,EAAA,aAAA;AAAA,QAChB,QAAU,EAAA,YAAA;AAAA,QACV,MAAQ,EAAA,UAAA;AAAA,QACR,SAAS,EAAA;AAAA;AAAA,KACX;AAAA,oBACAA,cAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,OAAA;AAAA,QACN,OAAQ,EAAA,UAAA;AAAA,QACR,UAAW,EAAA,uRAAA;AAAA,QACX,KAAO,EAAA,KAAA;AAAA,QACP,aAAY,EAAA,YAAA;AAAA,QACZ,EAAG,EAAA,YAAA;AAAA,QACH,IAAK,EAAA,OAAA;AAAA,QACL,iBAAgB,EAAA,OAAA;AAAA,QAChB,QAAU,EAAA,YAAA;AAAA,QACV,MAAQ,EAAA,UAAA;AAAA,QACR,SAAS,EAAA;AAAA;AAAA;AACX,GACF;AAEJ;;;;"}
+{"version":3,"file":"RoleDetailsForm.esm.js","sources":["../../../src/components/CreateRole/RoleDetailsForm.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport type { FocusEventHandler, ChangeEventHandler } from 'react';\n\nimport TextField from '@mui/material/TextField';\n\ntype RoleDetailsFormProps = {\n  name: string;\n  description?: string;\n  owner?: string;\n  nameError?: string;\n  handleBlur: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  handleChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n};\n\nexport const RoleDetailsForm = ({\n  name,\n  description,\n  owner,\n  nameError,\n  handleBlur,\n  handleChange,\n}: RoleDetailsFormProps) => {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '20px',\n      }}\n    >\n      <TextField\n        required\n        label=\"Name\"\n        variant=\"outlined\"\n        id=\"role-name\"\n        data-testid=\"role-name\"\n        aria-labelledby=\"name\"\n        helperText={nameError ?? 'Enter name of the role'}\n        value={name}\n        name=\"name\"\n        onChange={handleChange}\n        onBlur={handleBlur}\n        error={!!nameError}\n      />\n      <TextField\n        label=\"Description\"\n        variant=\"outlined\"\n        helperText=\"Enter a brief description about the role (The purpose of the role)\"\n        value={description}\n        data-testid=\"role-description\"\n        id=\"role-description\"\n        name=\"description\"\n        aria-labelledby=\"description\"\n        onChange={handleChange}\n        onBlur={handleBlur}\n        multiline\n      />\n      <TextField\n        label=\"Owner\"\n        variant=\"outlined\"\n        helperText=\"Optional: Enter a user or group who will have permission to edit this role and create additional roles. In the next step, specify which users they can assign to their roles and which plugins they can grant access to. If left blank, automatically assigns the author at creation.\"\n        value={owner}\n        data-testid=\"role-owner\"\n        id=\"role-owner\"\n        name=\"owner\"\n        aria-labelledby=\"owner\"\n        onChange={handleChange}\n        onBlur={handleBlur}\n        multiline\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AA4BO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,IAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,GAAK,EAAA;AAAA,OACP;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,QAAQ,EAAA,IAAA;AAAA,YACR,KAAM,EAAA,MAAA;AAAA,YACN,OAAQ,EAAA,UAAA;AAAA,YACR,EAAG,EAAA,WAAA;AAAA,YACH,aAAY,EAAA,WAAA;AAAA,YACZ,iBAAgB,EAAA,MAAA;AAAA,YAChB,YAAY,SAAa,IAAA,wBAAA;AAAA,YACzB,KAAO,EAAA,IAAA;AAAA,YACP,IAAK,EAAA,MAAA;AAAA,YACL,QAAU,EAAA,YAAA;AAAA,YACV,MAAQ,EAAA,UAAA;AAAA,YACR,KAAA,EAAO,CAAC,CAAC;AAAA;AAAA,SACX;AAAA,wBACA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,KAAM,EAAA,aAAA;AAAA,YACN,OAAQ,EAAA,UAAA;AAAA,YACR,UAAW,EAAA,oEAAA;AAAA,YACX,KAAO,EAAA,WAAA;AAAA,YACP,aAAY,EAAA,kBAAA;AAAA,YACZ,EAAG,EAAA,kBAAA;AAAA,YACH,IAAK,EAAA,aAAA;AAAA,YACL,iBAAgB,EAAA,aAAA;AAAA,YAChB,QAAU,EAAA,YAAA;AAAA,YACV,MAAQ,EAAA,UAAA;AAAA,YACR,SAAS,EAAA;AAAA;AAAA,SACX;AAAA,wBACA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,KAAM,EAAA,OAAA;AAAA,YACN,OAAQ,EAAA,UAAA;AAAA,YACR,UAAW,EAAA,uRAAA;AAAA,YACX,KAAO,EAAA,KAAA;AAAA,YACP,aAAY,EAAA,YAAA;AAAA,YACZ,EAAG,EAAA,YAAA;AAAA,YACH,IAAK,EAAA,OAAA;AAAA,YACL,iBAAgB,EAAA,OAAA;AAAA,YAChB,QAAU,EAAA,YAAA;AAAA,YACV,MAAQ,EAAA,UAAA;AAAA,YACR,SAAS,EAAA;AAAA;AAAA;AACX;AAAA;AAAA,GACF;AAEJ;;;;"}