@backstage-community/plugin-rbac 1.35.0 → 1.37.0

package/dist/components/ConditionalAccess/RulesDropdownOption.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import Typography from '@mui/material/Typography';
 
 const RulesDropdownOption = ({
@@ -7,14 +7,14 @@ const RulesDropdownOption = ({
   props
 }) => {
   const description = rulesData?.[label]?.description ?? "";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     "li",
     {
       ...props,
       style: { display: "flex", flexFlow: "column", alignItems: "flex-start" },
       key: label
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       Typography,
       {
         sx: {
@@ -23,7 +23,7 @@ const RulesDropdownOption = ({
       },
       label
     ),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       Typography,
       {
         sx: {

package/dist/components/ConditionalAccess/RulesDropdownOption.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"RulesDropdownOption.esm.js","sources":["../../../src/components/ConditionalAccess/RulesDropdownOption.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 Typography from '@mui/material/Typography';\n\nimport { RulesData } from './types';\n\ntype RulesDropdownOptionProps = {\n  label: string;\n  rulesData?: RulesData;\n  props: React.HTMLAttributes<HTMLLIElement>;\n};\n\nexport const RulesDropdownOption = ({\n  label,\n  rulesData,\n  props,\n}: RulesDropdownOptionProps) => {\n  const description = rulesData?.[label]?.description ?? '';\n  return (\n    <li\n      {...props}\n      style={{ display: 'flex', flexFlow: 'column', alignItems: 'flex-start' }}\n      key={label}\n    >\n      <Typography\n        sx={{\n          color: theme => theme.palette.text.primary,\n        }}\n      >\n        {label}\n      </Typography>\n      <Typography\n        sx={{\n          color: theme => theme.palette.text.secondary,\n          fontSize: '14px',\n        }}\n      >\n        {description}\n      </Typography>\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;AA2BO,MAAM,sBAAsB,CAAC;AAAA,EAClC,KAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,WAAc,GAAA,SAAA,GAAY,KAAK,CAAA,EAAG,WAAe,IAAA,EAAA;AACvD,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,OAAO,EAAE,OAAA,EAAS,QAAQ,QAAU,EAAA,QAAA,EAAU,YAAY,YAAa,EAAA;AAAA,MACvE,GAAK,EAAA;AAAA,KAAA;AAAA,oBAEL,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA;AACrC,OAAA;AAAA,MAEC;AAAA,KACH;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA;AAAA,UACnC,QAAU,EAAA;AAAA;AACZ,OAAA;AAAA,MAEC;AAAA;AACH,GACF;AAEJ;;;;"}
+{"version":3,"file":"RulesDropdownOption.esm.js","sources":["../../../src/components/ConditionalAccess/RulesDropdownOption.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 Typography from '@mui/material/Typography';\n\nimport { RulesData } from './types';\n\ntype RulesDropdownOptionProps = {\n  label: string;\n  rulesData?: RulesData;\n  props: React.HTMLAttributes<HTMLLIElement>;\n};\n\nexport const RulesDropdownOption = ({\n  label,\n  rulesData,\n  props,\n}: RulesDropdownOptionProps) => {\n  const description = rulesData?.[label]?.description ?? '';\n  return (\n    <li\n      {...props}\n      style={{ display: 'flex', flexFlow: 'column', alignItems: 'flex-start' }}\n      key={label}\n    >\n      <Typography\n        sx={{\n          color: theme => theme.palette.text.primary,\n        }}\n      >\n        {label}\n      </Typography>\n      <Typography\n        sx={{\n          color: theme => theme.palette.text.secondary,\n          fontSize: '14px',\n        }}\n      >\n        {description}\n      </Typography>\n    </li>\n  );\n};\n"],"names":["React"],"mappings":";;;AA2BO,MAAM,sBAAsB,CAAC;AAAA,EAClC,KAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,WAAc,GAAA,SAAA,GAAY,KAAK,CAAA,EAAG,WAAe,IAAA,EAAA;AACvD,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,OAAO,EAAE,OAAA,EAAS,QAAQ,QAAU,EAAA,QAAA,EAAU,YAAY,YAAa,EAAA;AAAA,MACvE,GAAK,EAAA;AAAA,KAAA;AAAA,oBAELA,cAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA;AACrC,OAAA;AAAA,MAEC;AAAA,KACH;AAAA,oBACAA,cAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA;AAAA,UACnC,QAAU,EAAA;AAAA;AACZ,OAAA;AAAA,MAEC;AAAA;AACH,GACF;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 import Autocomplete from '@mui/material/Autocomplete';
 import FormHelperText from '@mui/material/FormHelperText';
@@ -15,9 +15,9 @@ const AddMembersForm = ({
   setFieldValue,
   membersData
 }) => {
-  const [search, setSearch] = React.useState("");
-  const [selectedMember, setSelectedMember] = React.useState(selectedMembers);
-  React.useEffect(() => {
+  const [search, setSearch] = React__default.useState("");
+  const [selectedMember, setSelectedMember] = React__default.useState(selectedMembers);
+  React__default.useEffect(() => {
     setSelectedMember(selectedMembers);
   }, [selectedMembers]);
   const getDescription = (member) => {
@@ -30,7 +30,7 @@ const AddMembersForm = ({
       childCount > 0 ? `${childCount} child groups` : ""
     ].filter(Boolean).join(", ") : undefined;
   };
-  const membersOptions = React.useMemo(() => {
+  const membersOptions = React__default.useMemo(() => {
     return membersData.members ? membersData.members.map((member, index) => {
       const tag = member.metadata.etag ?? `${member.metadata.name}-${member.kind}-${index}`;
       return {
@@ -45,7 +45,7 @@ const AddMembersForm = ({
       };
     }) : [];
   }, [membersData.members]);
-  const filteredMembers = React.useMemo(() => {
+  const filteredMembers = React__default.useMemo(() => {
     if (search) {
       return membersOptions.filter(
         (m) => m.label.toLocaleLowerCase("en-US").includes(search.toLocaleLowerCase("en-US"))
@@ -54,7 +54,7 @@ const AddMembersForm = ({
     return membersOptions.slice(0, 99);
   }, [membersOptions, search]);
   const handleIsOptionEqualToValue = (option, value) => value.etag ? option.etag === value.etag : selectedMember?.[0].etag === value.etag;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormHelperText, null, "Search and select users and groups to be added. Selected users and groups will appear in the table below."), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(FormHelperText, null, "Search and select users and groups to be added. Selected users and groups will appear in the table below."), /* @__PURE__ */ React__default.createElement("br", null), /* @__PURE__ */ React__default.createElement(
     Autocomplete,
     {
       disableCloseOnSelect: true,
@@ -65,7 +65,7 @@ const AddMembersForm = ({
       getOptionLabel: (option) => option.label ?? "",
       isOptionEqualToValue: handleIsOptionEqualToValue,
       loading: membersData.loading,
-      loadingText: /* @__PURE__ */ React.createElement(LinearProgress, null),
+      loadingText: /* @__PURE__ */ React__default.createElement(LinearProgress, null),
       disableClearable: true,
       value: selectedMember,
       onChange: (_e, value) => {
@@ -76,10 +76,10 @@ const AddMembersForm = ({
       renderTags: () => "",
       inputValue: search,
       onInputChange: (_e, newSearch, reason) => reason === "input" && setSearch(newSearch),
-      renderOption: (props, option, state) => /* @__PURE__ */ React.createElement(MembersDropdownOption, { props, option, state }),
+      renderOption: (props, option, state) => /* @__PURE__ */ React__default.createElement(MembersDropdownOption, { props, option, state }),
       noOptionsText: "No users and groups found.",
       clearOnEscape: true,
-      renderInput: (params) => /* @__PURE__ */ React.createElement(
+      renderInput: (params) => /* @__PURE__ */ React__default.createElement(
         TextField,
         {
           "data-testid": "users-and-groups-text-field",
@@ -92,7 +92,7 @@ const AddMembersForm = ({
           required: true,
           InputProps: {
             ...params.InputProps,
-            endAdornment: /* @__PURE__ */ React.createElement(React.Fragment, null, search && /* @__PURE__ */ React.createElement(
+            endAdornment: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, search && /* @__PURE__ */ React__default.createElement(
               IconButton,
               {
                 size: "small",
@@ -101,13 +101,13 @@ const AddMembersForm = ({
                 },
                 "aria-label": "clear search"
               },
-              /* @__PURE__ */ React.createElement(HighlightOffIcon, { fontSize: "small" })
+              /* @__PURE__ */ React__default.createElement(HighlightOffIcon, { fontSize: "small" })
             ), params.InputProps.endAdornment)
           }
         }
       )
     }
-  ), /* @__PURE__ */ React.createElement("br", null), membersData.error?.message && /* @__PURE__ */ React.createElement(FormHelperText, { error: !!membersData.error }, `Error fetching user and groups: ${membersData.error.message}`));
+  ), /* @__PURE__ */ React__default.createElement("br", null), membersData.error?.message && /* @__PURE__ */ React__default.createElement(FormHelperText, { error: !!membersData.error }, `Error fetching user and groups: ${membersData.error.message}`));
 };
 
 export { AddMembersForm };

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

@@ -1 +1 @@
-{"version":3,"file":"AddMembersForm.esm.js","sources":["../../../src/components/CreateRole/AddMembersForm.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 { stringifyEntityRef } from '@backstage/catalog-model';\n\nimport Autocomplete from '@mui/material/Autocomplete';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport LinearProgress from '@mui/material/LinearProgress';\nimport TextField from '@mui/material/TextField';\nimport HighlightOffIcon from '@mui/icons-material/HighlightOff';\nimport IconButton from '@mui/material/IconButton';\nimport { FormikErrors } from 'formik';\n\nimport { MemberEntity } from '../../types';\nimport {\n  getChildGroupsCount,\n  getMembersCount,\n  getParentGroupsCount,\n} from '../../utils/create-role-utils';\nimport { MembersDropdownOption } from './MembersDropdownOption';\nimport { RoleFormValues, SelectedMember } from './types';\n\ntype AddMembersFormProps = {\n  selectedMembers: SelectedMember[];\n  selectedMembersError?: string;\n  membersData: { members: MemberEntity[]; loading: boolean; error: Error };\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>;\n};\n\nexport const AddMembersForm = ({\n  selectedMembers,\n  selectedMembersError,\n  setFieldValue,\n  membersData,\n}: AddMembersFormProps) => {\n  const [search, setSearch] = React.useState<string>('');\n  const [selectedMember, setSelectedMember] =\n    React.useState<SelectedMember[]>(selectedMembers);\n  React.useEffect(() => {\n    setSelectedMember(selectedMembers);\n  }, [selectedMembers]);\n\n  const getDescription = (member: MemberEntity) => {\n    const memberCount = getMembersCount(member);\n    const parentCount = getParentGroupsCount(member);\n    const childCount = getChildGroupsCount(member);\n\n    return member.kind === 'Group'\n      ? [\n          memberCount > 0 ? `${memberCount} members` : '',\n          parentCount > 0 ? `${parentCount} parent group` : '',\n          childCount > 0 ? `${childCount} child groups` : '',\n        ]\n          .filter(Boolean) // Remove any empty strings\n          .join(', ')\n      : undefined;\n  };\n\n  const membersOptions: SelectedMember[] = React.useMemo(() => {\n    return membersData.members\n      ? membersData.members.map((member: MemberEntity, index: number) => {\n          const tag =\n            member.metadata.etag ??\n            `${member.metadata.name}-${member.kind}-${index}`;\n          return {\n            id: tag,\n            label: member.spec?.profile?.displayName ?? member.metadata.name,\n            description: getDescription(member),\n            etag: tag,\n            type: member.kind,\n            namespace: member.metadata.namespace,\n            members: getMembersCount(member),\n            ref: stringifyEntityRef(member),\n          };\n        })\n      : ([] as SelectedMember[]);\n  }, [membersData.members]);\n\n  const filteredMembers = React.useMemo(() => {\n    if (search) {\n      return membersOptions\n        .filter(m =>\n          m.label\n            .toLocaleLowerCase('en-US')\n            .includes(search.toLocaleLowerCase('en-US')),\n        )\n        .slice(0, 99);\n    }\n\n    return membersOptions.slice(0, 99);\n  }, [membersOptions, search]);\n\n  const handleIsOptionEqualToValue = (\n    option: SelectedMember,\n    value: SelectedMember,\n  ) =>\n    value.etag\n      ? option.etag === value.etag\n      : selectedMember?.[0].etag === value.etag;\n\n  return (\n    <>\n      <FormHelperText>\n        Search and select users and groups to be added. Selected users and\n        groups will appear in the table below.\n      </FormHelperText>\n      <br />\n      <Autocomplete\n        disableCloseOnSelect\n        data-testid=\"users-and-groups-autocomplete\"\n        sx={{ width: '30%' }}\n        multiple\n        options={filteredMembers || []}\n        getOptionLabel={(option: SelectedMember) => option.label ?? ''}\n        isOptionEqualToValue={handleIsOptionEqualToValue}\n        loading={membersData.loading}\n        loadingText={<LinearProgress />}\n        disableClearable\n        value={selectedMember}\n        onChange={(_e, value: SelectedMember[]) => {\n          setSelectedMember(value);\n          setFieldValue('selectedMembers', value);\n          setSearch('');\n        }}\n        renderTags={() => ''}\n        inputValue={search}\n        onInputChange={(_e, newSearch: string, reason) =>\n          reason === 'input' && setSearch(newSearch)\n        }\n        renderOption={(props, option: SelectedMember, state) => (\n          <MembersDropdownOption props={props} option={option} state={state} />\n        )}\n        noOptionsText=\"No users and groups found.\"\n        clearOnEscape\n        renderInput={params => (\n          <TextField\n            data-testid=\"users-and-groups-text-field\"\n            {...params}\n            name=\"add-users-and-groups\"\n            variant=\"outlined\"\n            label=\"Select users and groups\"\n            error={!!selectedMembersError}\n            helperText={selectedMembersError ?? ''}\n            required\n            InputProps={{\n              ...params.InputProps,\n              endAdornment: (\n                <>\n                  {search && (\n                    <IconButton\n                      size=\"small\"\n                      onClick={() => {\n                        setSearch('');\n                      }}\n                      aria-label=\"clear search\"\n                    >\n                      <HighlightOffIcon fontSize=\"small\" />\n                    </IconButton>\n                  )}\n                  {params.InputProps.endAdornment}\n                </>\n              ),\n            }}\n          />\n        )}\n      />\n      <br />\n      {membersData.error?.message && (\n        <FormHelperText error={!!membersData.error}>\n          {`Error fetching user and groups: ${membersData.error.message}`}\n        </FormHelperText>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AddMembersForm.esm.js","sources":["../../../src/components/CreateRole/AddMembersForm.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 { stringifyEntityRef } from '@backstage/catalog-model';\n\nimport Autocomplete from '@mui/material/Autocomplete';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport LinearProgress from '@mui/material/LinearProgress';\nimport TextField from '@mui/material/TextField';\nimport HighlightOffIcon from '@mui/icons-material/HighlightOff';\nimport IconButton from '@mui/material/IconButton';\nimport { FormikErrors } from 'formik';\n\nimport { MemberEntity } from '../../types';\nimport {\n  getChildGroupsCount,\n  getMembersCount,\n  getParentGroupsCount,\n} from '../../utils/create-role-utils';\nimport { MembersDropdownOption } from './MembersDropdownOption';\nimport { RoleFormValues, SelectedMember } from './types';\n\ntype AddMembersFormProps = {\n  selectedMembers: SelectedMember[];\n  selectedMembersError?: string;\n  membersData: { members: MemberEntity[]; loading: boolean; error: Error };\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>;\n};\n\nexport const AddMembersForm = ({\n  selectedMembers,\n  selectedMembersError,\n  setFieldValue,\n  membersData,\n}: AddMembersFormProps) => {\n  const [search, setSearch] = React.useState<string>('');\n  const [selectedMember, setSelectedMember] =\n    React.useState<SelectedMember[]>(selectedMembers);\n  React.useEffect(() => {\n    setSelectedMember(selectedMembers);\n  }, [selectedMembers]);\n\n  const getDescription = (member: MemberEntity) => {\n    const memberCount = getMembersCount(member);\n    const parentCount = getParentGroupsCount(member);\n    const childCount = getChildGroupsCount(member);\n\n    return member.kind === 'Group'\n      ? [\n          memberCount > 0 ? `${memberCount} members` : '',\n          parentCount > 0 ? `${parentCount} parent group` : '',\n          childCount > 0 ? `${childCount} child groups` : '',\n        ]\n          .filter(Boolean) // Remove any empty strings\n          .join(', ')\n      : undefined;\n  };\n\n  const membersOptions: SelectedMember[] = React.useMemo(() => {\n    return membersData.members\n      ? membersData.members.map((member: MemberEntity, index: number) => {\n          const tag =\n            member.metadata.etag ??\n            `${member.metadata.name}-${member.kind}-${index}`;\n          return {\n            id: tag,\n            label: member.spec?.profile?.displayName ?? member.metadata.name,\n            description: getDescription(member),\n            etag: tag,\n            type: member.kind,\n            namespace: member.metadata.namespace,\n            members: getMembersCount(member),\n            ref: stringifyEntityRef(member),\n          };\n        })\n      : ([] as SelectedMember[]);\n  }, [membersData.members]);\n\n  const filteredMembers = React.useMemo(() => {\n    if (search) {\n      return membersOptions\n        .filter(m =>\n          m.label\n            .toLocaleLowerCase('en-US')\n            .includes(search.toLocaleLowerCase('en-US')),\n        )\n        .slice(0, 99);\n    }\n\n    return membersOptions.slice(0, 99);\n  }, [membersOptions, search]);\n\n  const handleIsOptionEqualToValue = (\n    option: SelectedMember,\n    value: SelectedMember,\n  ) =>\n    value.etag\n      ? option.etag === value.etag\n      : selectedMember?.[0].etag === value.etag;\n\n  return (\n    <>\n      <FormHelperText>\n        Search and select users and groups to be added. Selected users and\n        groups will appear in the table below.\n      </FormHelperText>\n      <br />\n      <Autocomplete\n        disableCloseOnSelect\n        data-testid=\"users-and-groups-autocomplete\"\n        sx={{ width: '30%' }}\n        multiple\n        options={filteredMembers || []}\n        getOptionLabel={(option: SelectedMember) => option.label ?? ''}\n        isOptionEqualToValue={handleIsOptionEqualToValue}\n        loading={membersData.loading}\n        loadingText={<LinearProgress />}\n        disableClearable\n        value={selectedMember}\n        onChange={(_e, value: SelectedMember[]) => {\n          setSelectedMember(value);\n          setFieldValue('selectedMembers', value);\n          setSearch('');\n        }}\n        renderTags={() => ''}\n        inputValue={search}\n        onInputChange={(_e, newSearch: string, reason) =>\n          reason === 'input' && setSearch(newSearch)\n        }\n        renderOption={(props, option: SelectedMember, state) => (\n          <MembersDropdownOption props={props} option={option} state={state} />\n        )}\n        noOptionsText=\"No users and groups found.\"\n        clearOnEscape\n        renderInput={params => (\n          <TextField\n            data-testid=\"users-and-groups-text-field\"\n            {...params}\n            name=\"add-users-and-groups\"\n            variant=\"outlined\"\n            label=\"Select users and groups\"\n            error={!!selectedMembersError}\n            helperText={selectedMembersError ?? ''}\n            required\n            InputProps={{\n              ...params.InputProps,\n              endAdornment: (\n                <>\n                  {search && (\n                    <IconButton\n                      size=\"small\"\n                      onClick={() => {\n                        setSearch('');\n                      }}\n                      aria-label=\"clear search\"\n                    >\n                      <HighlightOffIcon fontSize=\"small\" />\n                    </IconButton>\n                  )}\n                  {params.InputProps.endAdornment}\n                </>\n              ),\n            }}\n          />\n        )}\n      />\n      <br />\n      {membersData.error?.message && (\n        <FormHelperText error={!!membersData.error}>\n          {`Error fetching user and groups: ${membersData.error.message}`}\n        </FormHelperText>\n      )}\n    </>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { Table } from '@backstage/core-components';
 import Box from '@mui/material/Box';
 import { getMembers } from '../../utils/rbac-utils.esm.js';
@@ -8,13 +8,13 @@ const AddedMembersTable = ({
   selectedMembers,
   setFieldValue
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Table,
     {
       title: selectedMembers.length > 0 ? `${getMembers(selectedMembers)}` : "No users and groups selected",
       data: selectedMembers,
       columns: selectedMembersColumns(selectedMembers, setFieldValue),
-      emptyContent: /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", justifyContent: "center", p: 2 } }, "Selected users and groups appear here.")
+      emptyContent: /* @__PURE__ */ React__default.createElement(Box, { sx: { display: "flex", justifyContent: "center", p: 2 } }, "Selected users and groups appear here.")
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"AddedMembersTable.esm.js","sources":["../../../src/components/CreateRole/AddedMembersTable.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 { Table } from '@backstage/core-components';\n\nimport Box from '@mui/material/Box';\nimport { FormikErrors } from 'formik';\n\nimport { getMembers } from '../../utils/rbac-utils';\nimport { selectedMembersColumns } from './AddedMembersTableColumn';\nimport { RoleFormValues, SelectedMember } from './types';\n\ntype AddedMembersTableProps = {\n  selectedMembers: SelectedMember[];\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>;\n};\n\nexport const AddedMembersTable = ({\n  selectedMembers,\n  setFieldValue,\n}: AddedMembersTableProps) => {\n  return (\n    <Table\n      title={\n        selectedMembers.length > 0\n          ? `${getMembers(selectedMembers)}`\n          : 'No users and groups selected'\n      }\n      data={selectedMembers}\n      columns={selectedMembersColumns(selectedMembers, setFieldValue)}\n      emptyContent={\n        <Box sx={{ display: 'flex', justifyContent: 'center', p: 2 }}>\n          Selected users and groups appear here.\n        </Box>\n      }\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAmCO,MAAM,oBAAoB,CAAC;AAAA,EAChC,eAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EACE,gBAAgB,MAAS,GAAA,CAAA,GACrB,GAAG,UAAW,CAAA,eAAe,CAAC,CAC9B,CAAA,GAAA,8BAAA;AAAA,MAEN,IAAM,EAAA,eAAA;AAAA,MACN,OAAA,EAAS,sBAAuB,CAAA,eAAA,EAAiB,aAAa,CAAA;AAAA,MAC9D,YACE,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,OAAA,EAAS,MAAQ,EAAA,cAAA,EAAgB,QAAU,EAAA,CAAA,EAAG,CAAE,EAAA,EAAA,EAAG,wCAE9D;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"AddedMembersTable.esm.js","sources":["../../../src/components/CreateRole/AddedMembersTable.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 { Table } from '@backstage/core-components';\n\nimport Box from '@mui/material/Box';\nimport { FormikErrors } from 'formik';\n\nimport { getMembers } from '../../utils/rbac-utils';\nimport { selectedMembersColumns } from './AddedMembersTableColumn';\nimport { RoleFormValues, SelectedMember } from './types';\n\ntype AddedMembersTableProps = {\n  selectedMembers: SelectedMember[];\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>;\n};\n\nexport const AddedMembersTable = ({\n  selectedMembers,\n  setFieldValue,\n}: AddedMembersTableProps) => {\n  return (\n    <Table\n      title={\n        selectedMembers.length > 0\n          ? `${getMembers(selectedMembers)}`\n          : 'No users and groups selected'\n      }\n      data={selectedMembers}\n      columns={selectedMembersColumns(selectedMembers, setFieldValue)}\n      emptyContent={\n        <Box sx={{ display: 'flex', justifyContent: 'center', p: 2 }}>\n          Selected users and groups appear here.\n        </Box>\n      }\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAmCO,MAAM,oBAAoB,CAAC;AAAA,EAChC,eAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EACE,gBAAgB,MAAS,GAAA,CAAA,GACrB,GAAG,UAAW,CAAA,eAAe,CAAC,CAC9B,CAAA,GAAA,8BAAA;AAAA,MAEN,IAAM,EAAA,eAAA;AAAA,MACN,OAAA,EAAS,sBAAuB,CAAA,eAAA,EAAiB,aAAa,CAAA;AAAA,MAC9D,YACE,kBAAAA,cAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,OAAA,EAAS,MAAQ,EAAA,cAAA,EAAgB,QAAU,EAAA,CAAA,EAAG,CAAE,EAAA,EAAA,EAAG,wCAE9D;AAAA;AAAA,GAEJ;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { parseEntityRef } from '@backstage/catalog-model';
 import { Link } from '@backstage/core-components';
 import Delete from '@mui/icons-material/Delete';
@@ -41,7 +41,7 @@ const selectedMembersColumns = (selectedMembers, setFieldValue) => {
       type: "string",
       render: (props) => {
         const { kind, namespace, name } = parseEntityRef(props.ref);
-        return /* @__PURE__ */ React.createElement(Link, { to: `/catalog/${namespace}/${kind}/${name}`, target: "blank" }, props.label);
+        return /* @__PURE__ */ React__default.createElement(Link, { to: `/catalog/${namespace}/${kind}/${name}`, target: "blank" }, props.label);
       }
     },
     {
@@ -60,7 +60,7 @@ const selectedMembersColumns = (selectedMembers, setFieldValue) => {
       title: "Actions",
       sorting: false,
       render: (mem) => {
-        return /* @__PURE__ */ React.createElement(Box, { key: mem.etag }, /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ React__default.createElement(Box, { key: mem.etag }, /* @__PURE__ */ React__default.createElement(
           IconButton,
           {
             onClick: () => onRemove(mem.etag),
@@ -69,7 +69,7 @@ const selectedMembersColumns = (selectedMembers, setFieldValue) => {
             style: { padding: "0.5rem", borderRadius: "50%" },
             sx: { "&:hover": { borderRadius: "50%" } }
           },
-          /* @__PURE__ */ React.createElement(Delete, null)
+          /* @__PURE__ */ React__default.createElement(Delete, null)
         ));
       }
     }

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

@@ -1 +1 @@
-{"version":3,"file":"AddedMembersTableColumn.esm.js","sources":["../../../src/components/CreateRole/AddedMembersTableColumn.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 { parseEntityRef } from '@backstage/catalog-model';\nimport { Link, TableColumn } from '@backstage/core-components';\n\nimport Delete from '@mui/icons-material/Delete';\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport { FormikErrors } from 'formik';\n\nimport { RoleFormValues, SelectedMember } from './types';\n\nexport const reviewStepMemebersTableColumns = () => [\n  {\n    title: 'Name',\n    field: 'label',\n    type: 'string',\n  },\n  {\n    title: 'Type',\n    field: 'type',\n    type: 'string',\n  },\n  {\n    title: 'Members',\n    field: 'members',\n    type: 'numeric',\n    align: 'left',\n    render: (mem: number) => {\n      if (mem || mem === 0) return mem;\n      return '-';\n    },\n  },\n];\n\nexport const selectedMembersColumns = (\n  selectedMembers: SelectedMember[],\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>,\n): TableColumn<SelectedMember>[] => {\n  const onRemove = (etag: string) => {\n    const updatedMembers = selectedMembers.filter(\n      (mem: SelectedMember) => mem.etag !== etag,\n    );\n    setFieldValue('selectedMembers', updatedMembers);\n  };\n\n  return [\n    {\n      title: 'Name',\n      field: 'label',\n      type: 'string',\n      render: props => {\n        const { kind, namespace, name } = parseEntityRef(props.ref);\n        return (\n          <Link to={`/catalog/${namespace}/${kind}/${name}`} target=\"blank\">\n            {props.label}\n          </Link>\n        );\n      },\n    },\n    {\n      title: 'Type',\n      field: 'type',\n      type: 'string',\n    },\n    {\n      title: 'Members',\n      field: 'members',\n      type: 'numeric',\n      align: 'left',\n      emptyValue: '-',\n    },\n    {\n      title: 'Actions',\n      sorting: false,\n      render: (mem: SelectedMember) => {\n        return (\n          <Box key={mem.etag}>\n            <IconButton\n              onClick={() => onRemove(mem.etag)}\n              aria-label=\"Remove\"\n              title=\"Remove member\"\n              style={{ padding: '0.5rem', borderRadius: '50%' }}\n              sx={{ '&:hover': { borderRadius: '50%' } }}\n            >\n              <Delete />\n            </IconButton>\n          </Box>\n        );\n      },\n    },\n  ];\n};\n"],"names":[],"mappings":";;;;;;;AA2BO,MAAM,iCAAiC,MAAM;AAAA,EAClD;AAAA,IACE,KAAO,EAAA,MAAA;AAAA,IACP,KAAO,EAAA,OAAA;AAAA,IACP,IAAM,EAAA;AAAA,GACR;AAAA,EACA;AAAA,IACE,KAAO,EAAA,MAAA;AAAA,IACP,KAAO,EAAA,MAAA;AAAA,IACP,IAAM,EAAA;AAAA,GACR;AAAA,EACA;AAAA,IACE,KAAO,EAAA,SAAA;AAAA,IACP,KAAO,EAAA,SAAA;AAAA,IACP,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,IACP,MAAA,EAAQ,CAAC,GAAgB,KAAA;AACvB,MAAI,IAAA,GAAA,IAAO,GAAQ,KAAA,CAAA,EAAU,OAAA,GAAA;AAC7B,MAAO,OAAA,GAAA;AAAA;AACT;AAEJ;AAEa,MAAA,sBAAA,GAAyB,CACpC,eAAA,EACA,aAKkC,KAAA;AAClC,EAAM,MAAA,QAAA,GAAW,CAAC,IAAiB,KAAA;AACjC,IAAA,MAAM,iBAAiB,eAAgB,CAAA,MAAA;AAAA,MACrC,CAAC,GAAwB,KAAA,GAAA,CAAI,IAAS,KAAA;AAAA,KACxC;AACA,IAAA,aAAA,CAAc,mBAAmB,cAAc,CAAA;AAAA,GACjD;AAEA,EAAO,OAAA;AAAA,IACL;AAAA,MACE,KAAO,EAAA,MAAA;AAAA,MACP,KAAO,EAAA,OAAA;AAAA,MACP,IAAM,EAAA,QAAA;AAAA,MACN,QAAQ,CAAS,KAAA,KAAA;AACf,QAAA,MAAM,EAAE,IAAM,EAAA,SAAA,EAAW,MAAS,GAAA,cAAA,CAAe,MAAM,GAAG,CAAA;AAC1D,QAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,EAAI,EAAA,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,MAAO,EAAA,OAAA,EAAA,EACvD,MAAM,KACT,CAAA;AAAA;AAEJ,KACF;AAAA,IACA;AAAA,MACE,KAAO,EAAA,MAAA;AAAA,MACP,KAAO,EAAA,MAAA;AAAA,MACP,IAAM,EAAA;AAAA,KACR;AAAA,IACA;AAAA,MACE,KAAO,EAAA,SAAA;AAAA,MACP,KAAO,EAAA,SAAA;AAAA,MACP,IAAM,EAAA,SAAA;AAAA,MACN,KAAO,EAAA,MAAA;AAAA,MACP,UAAY,EAAA;AAAA,KACd;AAAA,IACA;AAAA,MACE,KAAO,EAAA,SAAA;AAAA,MACP,OAAS,EAAA,KAAA;AAAA,MACT,MAAA,EAAQ,CAAC,GAAwB,KAAA;AAC/B,QAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,GAAK,EAAA,GAAA,CAAI,IACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAS,EAAA,MAAM,QAAS,CAAA,GAAA,CAAI,IAAI,CAAA;AAAA,YAChC,YAAW,EAAA,QAAA;AAAA,YACX,KAAM,EAAA,eAAA;AAAA,YACN,KAAO,EAAA,EAAE,OAAS,EAAA,QAAA,EAAU,cAAc,KAAM,EAAA;AAAA,YAChD,IAAI,EAAE,SAAA,EAAW,EAAE,YAAA,EAAc,OAAQ;AAAA,WAAA;AAAA,8CAExC,MAAO,EAAA,IAAA;AAAA,SAEZ,CAAA;AAAA;AAEJ;AACF,GACF;AACF;;;;"}
+{"version":3,"file":"AddedMembersTableColumn.esm.js","sources":["../../../src/components/CreateRole/AddedMembersTableColumn.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 { parseEntityRef } from '@backstage/catalog-model';\nimport { Link, TableColumn } from '@backstage/core-components';\n\nimport Delete from '@mui/icons-material/Delete';\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport { FormikErrors } from 'formik';\n\nimport { RoleFormValues, SelectedMember } from './types';\n\nexport const reviewStepMemebersTableColumns = () => [\n  {\n    title: 'Name',\n    field: 'label',\n    type: 'string',\n  },\n  {\n    title: 'Type',\n    field: 'type',\n    type: 'string',\n  },\n  {\n    title: 'Members',\n    field: 'members',\n    type: 'numeric',\n    align: 'left',\n    render: (mem: number) => {\n      if (mem || mem === 0) return mem;\n      return '-';\n    },\n  },\n];\n\nexport const selectedMembersColumns = (\n  selectedMembers: SelectedMember[],\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>,\n): TableColumn<SelectedMember>[] => {\n  const onRemove = (etag: string) => {\n    const updatedMembers = selectedMembers.filter(\n      (mem: SelectedMember) => mem.etag !== etag,\n    );\n    setFieldValue('selectedMembers', updatedMembers);\n  };\n\n  return [\n    {\n      title: 'Name',\n      field: 'label',\n      type: 'string',\n      render: props => {\n        const { kind, namespace, name } = parseEntityRef(props.ref);\n        return (\n          <Link to={`/catalog/${namespace}/${kind}/${name}`} target=\"blank\">\n            {props.label}\n          </Link>\n        );\n      },\n    },\n    {\n      title: 'Type',\n      field: 'type',\n      type: 'string',\n    },\n    {\n      title: 'Members',\n      field: 'members',\n      type: 'numeric',\n      align: 'left',\n      emptyValue: '-',\n    },\n    {\n      title: 'Actions',\n      sorting: false,\n      render: (mem: SelectedMember) => {\n        return (\n          <Box key={mem.etag}>\n            <IconButton\n              onClick={() => onRemove(mem.etag)}\n              aria-label=\"Remove\"\n              title=\"Remove member\"\n              style={{ padding: '0.5rem', borderRadius: '50%' }}\n              sx={{ '&:hover': { borderRadius: '50%' } }}\n            >\n              <Delete />\n            </IconButton>\n          </Box>\n        );\n      },\n    },\n  ];\n};\n"],"names":["React"],"mappings":";;;;;;;AA2BO,MAAM,iCAAiC,MAAM;AAAA,EAClD;AAAA,IACE,KAAO,EAAA,MAAA;AAAA,IACP,KAAO,EAAA,OAAA;AAAA,IACP,IAAM,EAAA;AAAA,GACR;AAAA,EACA;AAAA,IACE,KAAO,EAAA,MAAA;AAAA,IACP,KAAO,EAAA,MAAA;AAAA,IACP,IAAM,EAAA;AAAA,GACR;AAAA,EACA;AAAA,IACE,KAAO,EAAA,SAAA;AAAA,IACP,KAAO,EAAA,SAAA;AAAA,IACP,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,IACP,MAAA,EAAQ,CAAC,GAAgB,KAAA;AACvB,MAAI,IAAA,GAAA,IAAO,GAAQ,KAAA,CAAA,EAAU,OAAA,GAAA;AAC7B,MAAO,OAAA,GAAA;AAAA;AACT;AAEJ;AAEa,MAAA,sBAAA,GAAyB,CACpC,eAAA,EACA,aAKkC,KAAA;AAClC,EAAM,MAAA,QAAA,GAAW,CAAC,IAAiB,KAAA;AACjC,IAAA,MAAM,iBAAiB,eAAgB,CAAA,MAAA;AAAA,MACrC,CAAC,GAAwB,KAAA,GAAA,CAAI,IAAS,KAAA;AAAA,KACxC;AACA,IAAA,aAAA,CAAc,mBAAmB,cAAc,CAAA;AAAA,GACjD;AAEA,EAAO,OAAA;AAAA,IACL;AAAA,MACE,KAAO,EAAA,MAAA;AAAA,MACP,KAAO,EAAA,OAAA;AAAA,MACP,IAAM,EAAA,QAAA;AAAA,MACN,QAAQ,CAAS,KAAA,KAAA;AACf,QAAA,MAAM,EAAE,IAAM,EAAA,SAAA,EAAW,MAAS,GAAA,cAAA,CAAe,MAAM,GAAG,CAAA;AAC1D,QAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,EAAI,EAAA,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,MAAO,EAAA,OAAA,EAAA,EACvD,MAAM,KACT,CAAA;AAAA;AAEJ,KACF;AAAA,IACA;AAAA,MACE,KAAO,EAAA,MAAA;AAAA,MACP,KAAO,EAAA,MAAA;AAAA,MACP,IAAM,EAAA;AAAA,KACR;AAAA,IACA;AAAA,MACE,KAAO,EAAA,SAAA;AAAA,MACP,KAAO,EAAA,SAAA;AAAA,MACP,IAAM,EAAA,SAAA;AAAA,MACN,KAAO,EAAA,MAAA;AAAA,MACP,UAAY,EAAA;AAAA,KACd;AAAA,IACA;AAAA,MACE,KAAO,EAAA,SAAA;AAAA,MACP,OAAS,EAAA,KAAA;AAAA,MACT,MAAA,EAAQ,CAAC,GAAwB,KAAA;AAC/B,QAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,GAAK,EAAA,GAAA,CAAI,IACZ,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAS,EAAA,MAAM,QAAS,CAAA,GAAA,CAAI,IAAI,CAAA;AAAA,YAChC,YAAW,EAAA,QAAA;AAAA,YACX,KAAM,EAAA,eAAA;AAAA,YACN,KAAO,EAAA,EAAE,OAAS,EAAA,QAAA,EAAU,cAAc,KAAM,EAAA;AAAA,YAChD,IAAI,EAAE,SAAA,EAAW,EAAE,YAAA,EAAc,OAAQ;AAAA,WAAA;AAAA,uDAExC,MAAO,EAAA,IAAA;AAAA,SAEZ,CAAA;AAAA;AAEJ;AACF,GACF;AACF;;;;"}

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

@@ -0,0 +1,90 @@
+import React__default from 'react';
+import CloseIcon from '@mui/icons-material/Close';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import WarningOutlinedIcon from '@mui/icons-material/WarningOutlined';
+
+const CancelDialog = ({
+  open,
+  editForm,
+  closeDialog,
+  navigateTo
+}) => {
+  const dialogBackgroundColor = (theme) => theme.palette.mode === "dark" ? "#1b1d21" : "#fff";
+  return /* @__PURE__ */ React__default.createElement(Dialog, { maxWidth: "md", open, onClose: closeDialog }, /* @__PURE__ */ React__default.createElement(Box, { sx: { backgroundColor: dialogBackgroundColor } }, /* @__PURE__ */ React__default.createElement(
+    DialogTitle,
+    {
+      id: "cancel-dialog",
+      title: "Cancel role creation",
+      sx: {
+        marginBottom: "0 !important",
+        p: 2
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Typography,
+        {
+          component: "span",
+          sx: {
+            fontWeight: (theme) => theme.typography.fontWeightBold,
+            display: "flex",
+            alignItems: "center",
+            gap: (theme) => theme.spacing(1)
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(
+          WarningOutlinedIcon,
+          {
+            sx: {
+              color: "#F0AB00"
+            },
+            fontSize: "small"
+          }
+        ),
+        " ",
+        `Exit role ${editForm ? "editing" : "creation"}?`
+      ),
+      /* @__PURE__ */ React__default.createElement(
+        IconButton,
+        {
+          "aria-label": "close",
+          sx: {
+            color: (theme) => theme.palette.grey[500],
+            borderRadius: "50%",
+            p: 0
+          },
+          onClick: closeDialog
+        },
+        /* @__PURE__ */ React__default.createElement(CloseIcon, null)
+      )
+    )
+  ), /* @__PURE__ */ React__default.createElement(DialogContent, { sx: { p: 2 } }, "Exiting this page will permanently discard the information you entered.", /* @__PURE__ */ React__default.createElement("br", null), "Are you sure you want to exit?"), /* @__PURE__ */ React__default.createElement(
+    DialogActions,
+    {
+      sx: {
+        justifyContent: "left",
+        p: 2
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(Button, { variant: "contained", onClick: navigateTo }, "Discard"),
+    /* @__PURE__ */ React__default.createElement(Button, { variant: "outlined", onClick: closeDialog }, "Cancel")
+  )));
+};
+
+export { CancelDialog as default };
+//# sourceMappingURL=CancelDialog.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CancelDialog.esm.js","sources":["../../../src/components/CreateRole/CancelDialog.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 CloseIcon from '@mui/icons-material/Close';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport IconButton from '@mui/material/IconButton';\nimport Typography from '@mui/material/Typography';\nimport WarningOutlinedIcon from '@mui/icons-material/WarningOutlined';\n\ntype CancelDialogProps = {\n  open: boolean;\n  editForm: boolean;\n  closeDialog: () => void;\n  navigateTo: () => void;\n};\n\nconst CancelDialog = ({\n  open,\n  editForm,\n  closeDialog,\n  navigateTo,\n}: CancelDialogProps) => {\n  const dialogBackgroundColor = (theme: { palette: { mode: string } }) =>\n    theme.palette.mode === 'dark' ? '#1b1d21' : '#fff';\n\n  return (\n    <Dialog maxWidth=\"md\" open={open} onClose={closeDialog}>\n      <Box sx={{ backgroundColor: dialogBackgroundColor }}>\n        <DialogTitle\n          id=\"cancel-dialog\"\n          title=\"Cancel role creation\"\n          sx={{\n            marginBottom: '0 !important',\n            p: 2,\n          }}\n        >\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n            }}\n          >\n            <Typography\n              component=\"span\"\n              sx={{\n                fontWeight: theme => theme.typography.fontWeightBold,\n                display: 'flex',\n                alignItems: 'center',\n                gap: theme => theme.spacing(1),\n              }}\n            >\n              <WarningOutlinedIcon\n                sx={{\n                  color: '#F0AB00',\n                }}\n                fontSize=\"small\"\n              />{' '}\n              {`Exit role ${editForm ? 'editing' : 'creation'}?`}\n            </Typography>\n\n            <IconButton\n              aria-label=\"close\"\n              sx={{\n                color: theme => theme.palette.grey[500],\n                borderRadius: '50%',\n                p: 0,\n              }}\n              onClick={closeDialog}\n            >\n              <CloseIcon />\n            </IconButton>\n          </Box>\n        </DialogTitle>\n        <DialogContent sx={{ p: 2 }}>\n          Exiting this page will permanently discard the information you\n          entered.\n          <br />\n          Are you sure you want to exit?\n        </DialogContent>\n        <DialogActions\n          sx={{\n            justifyContent: 'left',\n            p: 2,\n          }}\n        >\n          <Button variant=\"contained\" onClick={navigateTo}>\n            Discard\n          </Button>\n          <Button variant=\"outlined\" onClick={closeDialog}>\n            Cancel\n          </Button>\n        </DialogActions>\n      </Box>\n    </Dialog>\n  );\n};\n\nexport default CancelDialog;\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAmCA,MAAM,eAAe,CAAC;AAAA,EACpB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,wBAAwB,CAAC,KAAA,KAC7B,MAAM,OAAQ,CAAA,IAAA,KAAS,SAAS,SAAY,GAAA,MAAA;AAE9C,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,QAAS,EAAA,IAAA,EAAK,IAAY,EAAA,OAAA,EAAS,WACzC,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,eAAA,EAAiB,uBAC1B,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,eAAA;AAAA,MACH,KAAM,EAAA,sBAAA;AAAA,MACN,EAAI,EAAA;AAAA,QACF,YAAc,EAAA,cAAA;AAAA,QACd,CAAG,EAAA;AAAA;AACL,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,QAAA;AAAA,UACZ,cAAgB,EAAA;AAAA;AAClB,OAAA;AAAA,sBAEAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,MAAA;AAAA,UACV,EAAI,EAAA;AAAA,YACF,UAAA,EAAY,CAAS,KAAA,KAAA,KAAA,CAAM,UAAW,CAAA,cAAA;AAAA,YACtC,OAAS,EAAA,MAAA;AAAA,YACT,UAAY,EAAA,QAAA;AAAA,YACZ,GAAK,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAC/B,SAAA;AAAA,wBAEAA,cAAA,CAAA,aAAA;AAAA,UAAC,mBAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA;AAAA,cACF,KAAO,EAAA;AAAA,aACT;AAAA,YACA,QAAS,EAAA;AAAA;AAAA,SACX;AAAA,QAAG,GAAA;AAAA,QACF,CAAA,UAAA,EAAa,QAAW,GAAA,SAAA,GAAY,UAAU,CAAA,CAAA;AAAA,OACjD;AAAA,sBAEAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,YAAW,EAAA,OAAA;AAAA,UACX,EAAI,EAAA;AAAA,YACF,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,KAAK,GAAG,CAAA;AAAA,YACtC,YAAc,EAAA,KAAA;AAAA,YACd,CAAG,EAAA;AAAA,WACL;AAAA,UACA,OAAS,EAAA;AAAA,SAAA;AAAA,qDAER,SAAU,EAAA,IAAA;AAAA;AACb;AACF,GAEF,kBAAAA,cAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,EAAA,EAAI,EAAE,CAAA,EAAG,CAAE,EAAA,EAAA,EAAG,yEAG3B,kBAAAA,cAAA,CAAA,aAAA,CAAC,IAAG,EAAA,IAAA,CAAA,EAAE,gCAER,CACA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,cAAgB,EAAA,MAAA;AAAA,QAChB,CAAG,EAAA;AAAA;AACL,KAAA;AAAA,iDAEC,MAAO,EAAA,EAAA,OAAA,EAAQ,WAAY,EAAA,OAAA,EAAS,cAAY,SAEjD,CAAA;AAAA,iDACC,MAAO,EAAA,EAAA,OAAA,EAAQ,UAAW,EAAA,OAAA,EAAS,eAAa,QAEjD;AAAA,GAEJ,CACF,CAAA;AAEJ;;;;"}

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

@@ -1,9 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { useAsync } from 'react-use';
 import { Progress, Page, Header, Content, ErrorPage } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import { rbacApiRef } from '../../api/RBACBackendClient.esm.js';
-import { initialPermissionPolicyRowValue } from './const.esm.js';
 import { RoleForm } from './RoleForm.esm.js';
 
 const CreateRolePage = () => {
@@ -22,12 +21,13 @@ const CreateRolePage = () => {
     kind: "role",
     description: "",
     selectedMembers: [],
-    permissionPoliciesRows: [initialPermissionPolicyRowValue]
+    selectedPlugins: [],
+    permissionPoliciesRows: []
   };
   if (membersLoading) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
+    return /* @__PURE__ */ React__default.createElement(Progress, null);
   }
-  return canReadUsersAndGroups ? /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(Header, { title: "Create role", type: "RBAC", typeLink: ".." }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(
+  return canReadUsersAndGroups ? /* @__PURE__ */ React__default.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React__default.createElement(Header, { title: "Create role", type: "RBAC", typeLink: ".." }), /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(
     RoleForm,
     {
       initialValues,
@@ -46,7 +46,7 @@ const CreateRolePage = () => {
         }
       }
     }
-  ))) : /* @__PURE__ */ React.createElement(ErrorPage, { statusMessage: "Unauthorized to create role" });
+  ))) : /* @__PURE__ */ React__default.createElement(ErrorPage, { statusMessage: "Unauthorized to create role" });
 };
 
 export { CreateRolePage };

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

@@ -1 +1 @@
-{"version":3,"file":"CreateRolePage.esm.js","sources":["../../../src/components/CreateRole/CreateRolePage.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';\nimport { useAsync } from 'react-use';\n\nimport {\n  Content,\n  ErrorPage,\n  Header,\n  Page,\n  Progress,\n} from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nimport { rbacApiRef } from '../../api/RBACBackendClient';\nimport { MemberEntity } from '../../types';\nimport { initialPermissionPolicyRowValue } from './const';\nimport { RoleForm } from './RoleForm';\nimport { RoleFormValues } from './types';\n\nexport const CreateRolePage = () => {\n  const rbacApi = useApi(rbacApiRef);\n  const {\n    loading: membersLoading,\n    value: members,\n    error: membersError,\n  } = useAsync(async () => {\n    return await rbacApi.getMembers();\n  });\n\n  const canReadUsersAndGroups =\n    !membersLoading &&\n    !membersError &&\n    Array.isArray(members) &&\n    members.length > 0;\n\n  const initialValues: RoleFormValues = {\n    name: '',\n    namespace: 'default',\n    kind: 'role',\n    description: '',\n    selectedMembers: [],\n    permissionPoliciesRows: [initialPermissionPolicyRowValue],\n  };\n\n  if (membersLoading) {\n    return <Progress />;\n  }\n\n  return canReadUsersAndGroups ? (\n    <Page themeId=\"tool\">\n      <Header title=\"Create role\" type=\"RBAC\" typeLink=\"..\" />\n      <Content>\n        <RoleForm\n          initialValues={initialValues}\n          titles={{\n            formTitle: 'Create Role',\n            nameAndDescriptionTitle: 'Enter name and description of role ',\n            usersAndGroupsTitle: 'Add users and groups',\n            permissionPoliciesTitle: 'Add permission policies',\n          }}\n          membersData={{\n            members: Array.isArray(members) ? members : ([] as MemberEntity[]),\n            loading: membersLoading,\n            error: (membersError as unknown as Error) || {\n              name: (members as unknown as Response)?.status,\n              message: (members as unknown as Response)?.statusText,\n            },\n          }}\n        />\n      </Content>\n    </Page>\n  ) : (\n    <ErrorPage statusMessage=\"Unauthorized to create role\" />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAiCO,MAAM,iBAAiB,MAAM;AAClC,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AACjC,EAAM,MAAA;AAAA,IACJ,OAAS,EAAA,cAAA;AAAA,IACT,KAAO,EAAA,OAAA;AAAA,IACP,KAAO,EAAA;AAAA,GACT,GAAI,SAAS,YAAY;AACvB,IAAO,OAAA,MAAM,QAAQ,UAAW,EAAA;AAAA,GACjC,CAAA;AAED,EAAM,MAAA,qBAAA,GACJ,CAAC,cAAA,IACD,CAAC,YAAA,IACD,MAAM,OAAQ,CAAA,OAAO,CACrB,IAAA,OAAA,CAAQ,MAAS,GAAA,CAAA;AAEnB,EAAA,MAAM,aAAgC,GAAA;AAAA,IACpC,IAAM,EAAA,EAAA;AAAA,IACN,SAAW,EAAA,SAAA;AAAA,IACX,IAAM,EAAA,MAAA;AAAA,IACN,WAAa,EAAA,EAAA;AAAA,IACb,iBAAiB,EAAC;AAAA,IAClB,sBAAA,EAAwB,CAAC,+BAA+B;AAAA,GAC1D;AAEA,EAAA,IAAI,cAAgB,EAAA;AAClB,IAAA,2CAAQ,QAAS,EAAA,IAAA,CAAA;AAAA;AAGnB,EAAA,OAAO,qBACL,mBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,0BACX,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,KAAM,EAAA,aAAA,EAAc,MAAK,MAAO,EAAA,QAAA,EAAS,IAAK,EAAA,CAAA,sCACrD,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,aAAA;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,SAAW,EAAA,aAAA;AAAA,QACX,uBAAyB,EAAA,qCAAA;AAAA,QACzB,mBAAqB,EAAA,sBAAA;AAAA,QACrB,uBAAyB,EAAA;AAAA,OAC3B;AAAA,MACA,WAAa,EAAA;AAAA,QACX,SAAS,KAAM,CAAA,OAAA,CAAQ,OAAO,CAAA,GAAI,UAAW,EAAC;AAAA,QAC9C,OAAS,EAAA,cAAA;AAAA,QACT,OAAQ,YAAqC,IAAA;AAAA,UAC3C,MAAO,OAAiC,EAAA,MAAA;AAAA,UACxC,SAAU,OAAiC,EAAA;AAAA;AAC7C;AACF;AAAA,GAEJ,CACF,CAAA,mBAEC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAU,eAAc,6BAA8B,EAAA,CAAA;AAE3D;;;;"}
+{"version":3,"file":"CreateRolePage.esm.js","sources":["../../../src/components/CreateRole/CreateRolePage.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';\nimport { useAsync } from 'react-use';\n\nimport {\n  Content,\n  ErrorPage,\n  Header,\n  Page,\n  Progress,\n} from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nimport { rbacApiRef } from '../../api/RBACBackendClient';\nimport { MemberEntity } from '../../types';\nimport { RoleForm } from './RoleForm';\nimport { RoleFormValues } from './types';\n\nexport const CreateRolePage = () => {\n  const rbacApi = useApi(rbacApiRef);\n  const {\n    loading: membersLoading,\n    value: members,\n    error: membersError,\n  } = useAsync(async () => {\n    return await rbacApi.getMembers();\n  });\n\n  const canReadUsersAndGroups =\n    !membersLoading &&\n    !membersError &&\n    Array.isArray(members) &&\n    members.length > 0;\n\n  const initialValues: RoleFormValues = {\n    name: '',\n    namespace: 'default',\n    kind: 'role',\n    description: '',\n    selectedMembers: [],\n    selectedPlugins: [],\n    permissionPoliciesRows: [],\n  };\n\n  if (membersLoading) {\n    return <Progress />;\n  }\n\n  return canReadUsersAndGroups ? (\n    <Page themeId=\"tool\">\n      <Header title=\"Create role\" type=\"RBAC\" typeLink=\"..\" />\n      <Content>\n        <RoleForm\n          initialValues={initialValues}\n          titles={{\n            formTitle: 'Create Role',\n            nameAndDescriptionTitle: 'Enter name and description of role ',\n            usersAndGroupsTitle: 'Add users and groups',\n            permissionPoliciesTitle: 'Add permission policies',\n          }}\n          membersData={{\n            members: Array.isArray(members) ? members : ([] as MemberEntity[]),\n            loading: membersLoading,\n            error: (membersError as unknown as Error) || {\n              name: (members as unknown as Response)?.status,\n              message: (members as unknown as Response)?.statusText,\n            },\n          }}\n        />\n      </Content>\n    </Page>\n  ) : (\n    <ErrorPage statusMessage=\"Unauthorized to create role\" />\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AAgCO,MAAM,iBAAiB,MAAM;AAClC,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AACjC,EAAM,MAAA;AAAA,IACJ,OAAS,EAAA,cAAA;AAAA,IACT,KAAO,EAAA,OAAA;AAAA,IACP,KAAO,EAAA;AAAA,GACT,GAAI,SAAS,YAAY;AACvB,IAAO,OAAA,MAAM,QAAQ,UAAW,EAAA;AAAA,GACjC,CAAA;AAED,EAAM,MAAA,qBAAA,GACJ,CAAC,cAAA,IACD,CAAC,YAAA,IACD,MAAM,OAAQ,CAAA,OAAO,CACrB,IAAA,OAAA,CAAQ,MAAS,GAAA,CAAA;AAEnB,EAAA,MAAM,aAAgC,GAAA;AAAA,IACpC,IAAM,EAAA,EAAA;AAAA,IACN,SAAW,EAAA,SAAA;AAAA,IACX,IAAM,EAAA,MAAA;AAAA,IACN,WAAa,EAAA,EAAA;AAAA,IACb,iBAAiB,EAAC;AAAA,IAClB,iBAAiB,EAAC;AAAA,IAClB,wBAAwB;AAAC,GAC3B;AAEA,EAAA,IAAI,cAAgB,EAAA;AAClB,IAAA,oDAAQ,QAAS,EAAA,IAAA,CAAA;AAAA;AAGnB,EAAA,OAAO,qBACL,mBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,0BACXA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,KAAM,EAAA,aAAA,EAAc,MAAK,MAAO,EAAA,QAAA,EAAS,IAAK,EAAA,CAAA,+CACrD,OACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,aAAA;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,SAAW,EAAA,aAAA;AAAA,QACX,uBAAyB,EAAA,qCAAA;AAAA,QACzB,mBAAqB,EAAA,sBAAA;AAAA,QACrB,uBAAyB,EAAA;AAAA,OAC3B;AAAA,MACA,WAAa,EAAA;AAAA,QACX,SAAS,KAAM,CAAA,OAAA,CAAQ,OAAO,CAAA,GAAI,UAAW,EAAC;AAAA,QAC9C,OAAS,EAAA,cAAA;AAAA,QACT,OAAQ,YAAqC,IAAA;AAAA,UAC3C,MAAO,OAAiC,EAAA,MAAA;AAAA,UACxC,SAAU,OAAiC,EAAA;AAAA;AAC7C;AACF;AAAA,GAEJ,CACF,CAAA,mBAECA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAU,eAAc,6BAA8B,EAAA,CAAA;AAE3D;;;;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { useParams } from 'react-router-dom';
 import { useQueryParamState, Progress, ErrorPage, Page, Header, Content } from '@backstage/core-components';
 import { usePermissionPolicies } from '../../hooks/usePermissionPolicies.esm.js';
@@ -28,18 +28,22 @@ const EditRolePage = () => {
     kind: roleKind || "role",
     description: role?.metadata?.description ?? "",
     selectedMembers,
+    selectedPlugins: data.map((pp) => pp.plugin).filter((p, i, ar) => ar.indexOf(p) === i).map((sp) => ({
+      label: sp.charAt(0).toLocaleUpperCase("en-US") + sp.substring(1),
+      value: sp
+    })),
     permissionPoliciesRows: data
   };
   if (loadingMembers || loadingPolicies) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
+    return /* @__PURE__ */ React__default.createElement(Progress, null);
   }
   if (roleError.name) {
-    return /* @__PURE__ */ React.createElement(ErrorPage, { status: roleError.name, statusMessage: roleError.message });
+    return /* @__PURE__ */ React__default.createElement(ErrorPage, { status: roleError.name, statusMessage: roleError.message });
   }
   if (!canReadUsersAndGroups) {
-    return /* @__PURE__ */ React.createElement(ErrorPage, { statusMessage: "Unauthorized to edit role" });
+    return /* @__PURE__ */ React__default.createElement(ErrorPage, { statusMessage: "Unauthorized to edit role" });
   }
-  return /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(Header, { title: "Edit role", type: "RBAC", typeLink: ".." }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React__default.createElement(Header, { title: "Edit role", type: "RBAC", typeLink: ".." }), /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(
     RoleForm,
     {
       initialValues,

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

@@ -1 +1 @@
-{"version":3,"file":"EditRolePage.esm.js","sources":["../../../src/components/CreateRole/EditRolePage.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';\nimport { useParams } from 'react-router-dom';\n\nimport {\n  Content,\n  ErrorPage,\n  Header,\n  Page,\n  Progress,\n  useQueryParamState,\n} from '@backstage/core-components';\n\nimport { usePermissionPolicies } from '../../hooks/usePermissionPolicies';\nimport { useSelectedMembers } from '../../hooks/useSelectedMembers';\nimport { RoleForm } from './RoleForm';\nimport { RoleFormValues } from './types';\n\nexport const EditRolePage = () => {\n  const { roleName, roleNamespace, roleKind } = useParams();\n  const [queryParamState] = useQueryParamState<number>('activeStep');\n  const {\n    selectedMembers,\n    members,\n    role,\n    loading: loadingMembers,\n    roleError,\n    membersError,\n    canReadUsersAndGroups,\n  } = useSelectedMembers(\n    roleName ? `${roleKind}:${roleNamespace}/${roleName}` : '',\n  );\n\n  const { data, loading: loadingPolicies } = usePermissionPolicies(\n    `${roleKind}:${roleNamespace}/${roleName}`,\n  );\n\n  const initialValues: RoleFormValues = {\n    name: roleName || '',\n    namespace: roleNamespace || 'default',\n    kind: roleKind || 'role',\n    description: role?.metadata?.description ?? '',\n    selectedMembers,\n    permissionPoliciesRows: data,\n  };\n\n  if (loadingMembers || loadingPolicies) {\n    return <Progress />;\n  }\n  if (roleError.name) {\n    return (\n      <ErrorPage status={roleError.name} statusMessage={roleError.message} />\n    );\n  }\n  if (!canReadUsersAndGroups) {\n    return <ErrorPage statusMessage=\"Unauthorized to edit role\" />;\n  }\n\n  return (\n    <Page themeId=\"tool\">\n      <Header title=\"Edit role\" type=\"RBAC\" typeLink=\"..\" />\n      <Content>\n        <RoleForm\n          initialValues={initialValues}\n          titles={{\n            formTitle: 'Edit Role',\n            nameAndDescriptionTitle: 'Edit name and description of role ',\n            usersAndGroupsTitle: 'Edit users and groups',\n            permissionPoliciesTitle: 'Edit permission policies',\n          }}\n          roleName={roleName ? `${roleKind}:${roleNamespace}/${roleName}` : ''}\n          step={Number(queryParamState)}\n          membersData={{\n            members,\n            loading: loadingMembers,\n            error: membersError,\n          }}\n          submitLabel=\"Save\"\n        />\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,EAAE,QAAA,EAAU,aAAe,EAAA,QAAA,KAAa,SAAU,EAAA;AACxD,EAAA,MAAM,CAAC,eAAe,CAAI,GAAA,kBAAA,CAA2B,YAAY,CAAA;AACjE,EAAM,MAAA;AAAA,IACJ,eAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAS,EAAA,cAAA;AAAA,IACT,SAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACE,GAAA,kBAAA;AAAA,IACF,WAAW,CAAG,EAAA,QAAQ,IAAI,aAAa,CAAA,CAAA,EAAI,QAAQ,CAAK,CAAA,GAAA;AAAA,GAC1D;AAEA,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,eAAA,EAAoB,GAAA,qBAAA;AAAA,IACzC,CAAG,EAAA,QAAQ,CAAI,CAAA,EAAA,aAAa,IAAI,QAAQ,CAAA;AAAA,GAC1C;AAEA,EAAA,MAAM,aAAgC,GAAA;AAAA,IACpC,MAAM,QAAY,IAAA,EAAA;AAAA,IAClB,WAAW,aAAiB,IAAA,SAAA;AAAA,IAC5B,MAAM,QAAY,IAAA,MAAA;AAAA,IAClB,WAAA,EAAa,IAAM,EAAA,QAAA,EAAU,WAAe,IAAA,EAAA;AAAA,IAC5C,eAAA;AAAA,IACA,sBAAwB,EAAA;AAAA,GAC1B;AAEA,EAAA,IAAI,kBAAkB,eAAiB,EAAA;AACrC,IAAA,2CAAQ,QAAS,EAAA,IAAA,CAAA;AAAA;AAEnB,EAAA,IAAI,UAAU,IAAM,EAAA;AAClB,IAAA,2CACG,SAAU,EAAA,EAAA,MAAA,EAAQ,UAAU,IAAM,EAAA,aAAA,EAAe,UAAU,OAAS,EAAA,CAAA;AAAA;AAGzE,EAAA,IAAI,CAAC,qBAAuB,EAAA;AAC1B,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAU,EAAA,EAAA,aAAA,EAAc,2BAA4B,EAAA,CAAA;AAAA;AAG9D,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAA,sCACX,MAAO,EAAA,EAAA,KAAA,EAAM,WAAY,EAAA,IAAA,EAAK,MAAO,EAAA,QAAA,EAAS,IAAK,EAAA,CAAA,sCACnD,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,aAAA;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,SAAW,EAAA,WAAA;AAAA,QACX,uBAAyB,EAAA,oCAAA;AAAA,QACzB,mBAAqB,EAAA,uBAAA;AAAA,QACrB,uBAAyB,EAAA;AAAA,OAC3B;AAAA,MACA,QAAA,EAAU,WAAW,CAAG,EAAA,QAAQ,IAAI,aAAa,CAAA,CAAA,EAAI,QAAQ,CAAK,CAAA,GAAA,EAAA;AAAA,MAClE,IAAA,EAAM,OAAO,eAAe,CAAA;AAAA,MAC5B,WAAa,EAAA;AAAA,QACX,OAAA;AAAA,QACA,OAAS,EAAA,cAAA;AAAA,QACT,KAAO,EAAA;AAAA,OACT;AAAA,MACA,WAAY,EAAA;AAAA;AAAA,GAEhB,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"EditRolePage.esm.js","sources":["../../../src/components/CreateRole/EditRolePage.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';\nimport { useParams } from 'react-router-dom';\n\nimport {\n  Content,\n  ErrorPage,\n  Header,\n  Page,\n  Progress,\n  useQueryParamState,\n} from '@backstage/core-components';\n\nimport { usePermissionPolicies } from '../../hooks/usePermissionPolicies';\nimport { useSelectedMembers } from '../../hooks/useSelectedMembers';\nimport { RoleForm } from './RoleForm';\nimport { RoleFormValues } from './types';\n\nexport const EditRolePage = () => {\n  const { roleName, roleNamespace, roleKind } = useParams();\n  const [queryParamState] = useQueryParamState<number>('activeStep');\n  const {\n    selectedMembers,\n    members,\n    role,\n    loading: loadingMembers,\n    roleError,\n    membersError,\n    canReadUsersAndGroups,\n  } = useSelectedMembers(\n    roleName ? `${roleKind}:${roleNamespace}/${roleName}` : '',\n  );\n\n  const { data, loading: loadingPolicies } = usePermissionPolicies(\n    `${roleKind}:${roleNamespace}/${roleName}`,\n  );\n\n  const initialValues: RoleFormValues = {\n    name: roleName || '',\n    namespace: roleNamespace || 'default',\n    kind: roleKind || 'role',\n    description: role?.metadata?.description ?? '',\n    selectedMembers,\n    selectedPlugins: data\n      .map(pp => pp.plugin)\n      .filter((p, i, ar) => ar.indexOf(p) === i)\n      .map(sp => ({\n        label: sp.charAt(0).toLocaleUpperCase('en-US') + sp.substring(1),\n        value: sp,\n      })),\n    permissionPoliciesRows: data,\n  };\n\n  if (loadingMembers || loadingPolicies) {\n    return <Progress />;\n  }\n  if (roleError.name) {\n    return (\n      <ErrorPage status={roleError.name} statusMessage={roleError.message} />\n    );\n  }\n  if (!canReadUsersAndGroups) {\n    return <ErrorPage statusMessage=\"Unauthorized to edit role\" />;\n  }\n\n  return (\n    <Page themeId=\"tool\">\n      <Header title=\"Edit role\" type=\"RBAC\" typeLink=\"..\" />\n      <Content>\n        <RoleForm\n          initialValues={initialValues}\n          titles={{\n            formTitle: 'Edit Role',\n            nameAndDescriptionTitle: 'Edit name and description of role ',\n            usersAndGroupsTitle: 'Edit users and groups',\n            permissionPoliciesTitle: 'Edit permission policies',\n          }}\n          roleName={roleName ? `${roleKind}:${roleNamespace}/${roleName}` : ''}\n          step={Number(queryParamState)}\n          membersData={{\n            members,\n            loading: loadingMembers,\n            error: membersError,\n          }}\n          submitLabel=\"Save\"\n        />\n      </Content>\n    </Page>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import Typography from '@mui/material/Typography';
 import Checkbox from '@mui/material/Checkbox';
 import Box from '@mui/material/Box';
@@ -14,7 +14,7 @@ const MembersDropdownOption = ({
   const { label, etag } = option;
   const matches = match(label, inputValue, { insideWords: true });
   const parts = parse(label, matches);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     "li",
     {
       ...props,
@@ -26,7 +26,7 @@ const MembersDropdownOption = ({
         width: "auto"
       }
     },
-    /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Checkbox, { style: { marginRight: 8 }, checked: state.selected })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { component: "span", sx: { marginTop: "0.5rem" } }, parts.map((part) => /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Checkbox, { style: { marginRight: 8 }, checked: state.selected })), /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Typography, { component: "span", sx: { marginTop: "0.5rem" } }, parts.map((part) => /* @__PURE__ */ React__default.createElement(
       Typography,
       {
         key: `${part.text}-${etag}`,
@@ -38,7 +38,7 @@ const MembersDropdownOption = ({
         "data-testid": option.label
       },
       part.text
-    )))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    )))), /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
       Typography,
       {
         sx: {

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

@@ -1 +1 @@
-{"version":3,"file":"MembersDropdownOption.esm.js","sources":["../../../src/components/CreateRole/MembersDropdownOption.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 { SelectedMember } from './types';\n\ntype MembersDropdownOptionProps = {\n  option: SelectedMember;\n  state: AutocompleteRenderOptionState;\n  props: React.HTMLAttributes<HTMLLIElement>;\n};\n\nexport const MembersDropdownOption = ({\n  props,\n  option,\n  state,\n}: MembersDropdownOptionProps) => {\n  const { inputValue } = state;\n  const { label, etag } = option;\n  const matches = match(label, inputValue, { insideWords: true });\n  const parts = parse(label, matches);\n\n  return (\n    <li\n      {...props}\n      key={`${etag}`}\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        width: 'auto',\n      }}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <div>\n          <Checkbox style={{ marginRight: 8 }} checked={state.selected} />\n        </div>\n        <div>\n          <div>\n            <Typography component=\"span\" sx={{ marginTop: '0.5rem' }}>\n              {parts.map(part => (\n                <Typography\n                  key={`${part.text}-${etag}`}\n                  component=\"span\"\n                  sx={{\n                    fontWeight: !state.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          </div>\n          <div>\n            <Typography\n              sx={{\n                color: theme => theme.palette.text.secondary,\n                whiteSpace: 'nowrap',\n              }}\n            >\n              {option.description}\n            </Typography>{' '}\n          </div>\n        </div>\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,IAAA,EAAS,GAAA,MAAA;AACxB,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,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,GAAG,IAAI,CAAA,CAAA;AAAA,MACZ,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,UAAY,EAAA,YAAA;AAAA,QACZ,KAAO,EAAA;AAAA;AACT,KAAA;AAAA,wCAEC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,OAAA,EAAS,QAAQ,UAAY,EAAA,QAAA,EACtC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,6BACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,OAAO,EAAE,WAAA,EAAa,GAAK,EAAA,OAAA,EAAS,KAAM,CAAA,QAAA,EAAU,CAChE,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,6BACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,IAAI,EAAE,SAAA,EAAW,UAC3C,EAAA,EAAA,KAAA,CAAM,IAAI,CACT,IAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,CAAA,EAAG,IAAK,CAAA,IAAI,IAAI,IAAI,CAAA,CAAA;AAAA,QACzB,SAAU,EAAA,MAAA;AAAA,QACV,EAAI,EAAA;AAAA,UACF,YAAY,CAAC,KAAA,CAAM,UAAc,IAAA,IAAA,CAAK,YAAY,GAAM,GAAA,GAAA;AAAA,UACxD,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,SACrC;AAAA,QACA,eAAa,MAAO,CAAA;AAAA,OAAA;AAAA,MAEnB,IAAK,CAAA;AAAA,KAET,CACH,CACF,CAAA,sCACC,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA;AAAA,UACnC,UAAY,EAAA;AAAA;AACd,OAAA;AAAA,MAEC,MAAO,CAAA;AAAA,KACV,EAAc,GAChB,CACF,CACF;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"MembersDropdownOption.esm.js","sources":["../../../src/components/CreateRole/MembersDropdownOption.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 { SelectedMember } from './types';\n\ntype MembersDropdownOptionProps = {\n  option: SelectedMember;\n  state: AutocompleteRenderOptionState;\n  props: React.HTMLAttributes<HTMLLIElement>;\n};\n\nexport const MembersDropdownOption = ({\n  props,\n  option,\n  state,\n}: MembersDropdownOptionProps) => {\n  const { inputValue } = state;\n  const { label, etag } = option;\n  const matches = match(label, inputValue, { insideWords: true });\n  const parts = parse(label, matches);\n\n  return (\n    <li\n      {...props}\n      key={`${etag}`}\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        width: 'auto',\n      }}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <div>\n          <Checkbox style={{ marginRight: 8 }} checked={state.selected} />\n        </div>\n        <div>\n          <div>\n            <Typography component=\"span\" sx={{ marginTop: '0.5rem' }}>\n              {parts.map(part => (\n                <Typography\n                  key={`${part.text}-${etag}`}\n                  component=\"span\"\n                  sx={{\n                    fontWeight: !state.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          </div>\n          <div>\n            <Typography\n              sx={{\n                color: theme => theme.palette.text.secondary,\n                whiteSpace: 'nowrap',\n              }}\n            >\n              {option.description}\n            </Typography>{' '}\n          </div>\n        </div>\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,IAAA,EAAS,GAAA,MAAA;AACxB,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,IAAI,CAAA,CAAA;AAAA,MACZ,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,UAAY,EAAA,YAAA;AAAA,QACZ,KAAO,EAAA;AAAA;AACT,KAAA;AAAA,iDAEC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,OAAA,EAAS,QAAQ,UAAY,EAAA,QAAA,EACtC,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,6BACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,OAAO,EAAE,WAAA,EAAa,GAAK,EAAA,OAAA,EAAS,KAAM,CAAA,QAAA,EAAU,CAChE,CACA,kBAAAA,cAAA,CAAA,aAAA,CAAC,KACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,6BACEA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,IAAI,EAAE,SAAA,EAAW,UAC3C,EAAA,EAAA,KAAA,CAAM,IAAI,CACT,IAAA,qBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,CAAA,EAAG,IAAK,CAAA,IAAI,IAAI,IAAI,CAAA,CAAA;AAAA,QACzB,SAAU,EAAA,MAAA;AAAA,QACV,EAAI,EAAA;AAAA,UACF,YAAY,CAAC,KAAA,CAAM,UAAc,IAAA,IAAA,CAAK,YAAY,GAAM,GAAA,GAAA;AAAA,UACxD,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,SACrC;AAAA,QACA,eAAa,MAAO,CAAA;AAAA,OAAA;AAAA,MAEnB,IAAK,CAAA;AAAA,KAET,CACH,CACF,CAAA,+CACC,KACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA;AAAA,UACnC,UAAY,EAAA;AAAA;AACd,OAAA;AAAA,MAEC,MAAO,CAAA;AAAA,KACV,EAAc,GAChB,CACF,CACF;AAAA,GACF;AAEJ;;;;"}