@backstage-community/plugin-rbac 1.32.4 → 1.33.0

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 { LinearProgress, TextField } from '@material-ui/core';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\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] = React.useState<SelectedMember>({\n    label: '',\n    etag: '',\n    type: '',\n    ref: '',\n  } as SelectedMember);\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      ? `${memberCount} members, ${parentCount} parent group, ${childCount} child groups`\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  return (\n    <>\n      <FormHelperText>\n        Search and select users and groups to be added. Selected users and\n        groups will appear in the members table.\n      </FormHelperText>\n      <br />\n      <Autocomplete\n        options={filteredMembers || []}\n        getOptionLabel={(option: SelectedMember) => option.label ?? ''}\n        getOptionSelected={(option: SelectedMember, value: SelectedMember) =>\n          value.etag\n            ? option.etag === value.etag\n            : selectedMember.etag === value.etag\n        }\n        loading={membersData.loading}\n        loadingText={<LinearProgress />}\n        disableClearable\n        value={selectedMember}\n        onChange={(_e, value: SelectedMember) => {\n          setSelectedMember(value);\n          if (value) {\n            setSearch(value.label);\n            setFieldValue('selectedMembers', [...selectedMembers, value]);\n          }\n        }}\n        inputValue={search}\n        onInputChange={(_e, newSearch: string, reason) =>\n          reason === 'input' && setSearch(newSearch)\n        }\n        getOptionDisabled={(option: SelectedMember) =>\n          !!selectedMembers.find(\n            (sm: SelectedMember) => sm.etag === option.etag,\n          )\n        }\n        renderOption={(option: SelectedMember, state) => (\n          <MembersDropdownOption option={option} state={state} />\n        )}\n        noOptionsText=\"No users and groups found.\"\n        clearOnEscape\n        renderInput={params => (\n          <TextField\n            {...params}\n            name=\"add-users-and-groups\"\n            variant=\"outlined\"\n            label=\"Users and groups\"\n            placeholder=\"Search by user name or group name\"\n            error={!!selectedMembersError}\n            helperText={selectedMembersError ?? ''}\n            required\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 { 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] = React.useState<SelectedMember>({\n    label: '',\n    etag: '',\n    type: '',\n    ref: '',\n  } as SelectedMember);\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      ? `${memberCount} members, ${parentCount} parent group, ${childCount} child groups`\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.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 members table.\n      </FormHelperText>\n      <br />\n      <Autocomplete\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          if (value) {\n            setSearch(value.label);\n            setFieldValue('selectedMembers', [...selectedMembers, value]);\n          }\n        }}\n        inputValue={search}\n        onInputChange={(_e, newSearch: string, reason) =>\n          reason === 'input' && setSearch(newSearch)\n        }\n        getOptionDisabled={(option: SelectedMember) =>\n          !!selectedMembers.find(\n            (sm: SelectedMember) => sm.etag === option.etag,\n          )\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            {...params}\n            name=\"add-users-and-groups\"\n            variant=\"outlined\"\n            label=\"Users and groups\"\n            placeholder=\"Search by user name or group name\"\n            error={!!selectedMembersError}\n            helperText={selectedMembersError ?? ''}\n            required\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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"}

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

@@ -1,28 +1,20 @@
 import React from 'react';
 import { Table } from '@backstage/core-components';
-import { makeStyles } from '@material-ui/core';
+import Box from '@mui/material/Box';
 import { getMembers } from '../../utils/rbac-utils.esm.js';
 import { selectedMembersColumns } from './AddedMembersTableColumn.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  empty: {
-    padding: theme.spacing(2),
-    display: "flex",
-    justifyContent: "center"
-  }
-}));
 const AddedMembersTable = ({
   selectedMembers,
   setFieldValue
 }) => {
-  const classes = useStyles();
   return /* @__PURE__ */ React.createElement(
     Table,
     {
       title: selectedMembers.length > 0 ? `Users and groups (${getMembers(selectedMembers)})` : "Users and groups",
       data: selectedMembers,
       columns: selectedMembersColumns(selectedMembers, setFieldValue),
-      emptyContent: /* @__PURE__ */ React.createElement("div", { className: classes.empty }, "No records. Selected users and groups appear here.")
+      emptyContent: /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", justifyContent: "center", p: 2 } }, "No records. 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 { makeStyles } from '@material-ui/core';\nimport { FormikErrors } from 'formik';\n\nimport { getMembers } from '../../utils/rbac-utils';\nimport { selectedMembersColumns } from './AddedMembersTableColumn';\nimport { RoleFormValues, SelectedMember } from './types';\n\nconst useStyles = makeStyles(theme => ({\n  empty: {\n    padding: theme.spacing(2),\n    display: 'flex',\n    justifyContent: 'center',\n  },\n}));\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  const classes = useStyles();\n  return (\n    <Table\n      title={\n        selectedMembers.length > 0\n          ? `Users and groups (${getMembers(selectedMembers)})`\n          : 'Users and groups'\n      }\n      data={selectedMembers}\n      columns={selectedMembersColumns(selectedMembers, setFieldValue)}\n      emptyContent={\n        <div className={classes.empty}>\n          No records. Selected users and groups appear here.\n        </div>\n      }\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AA0BA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,KAAO,EAAA;AAAA,IACL,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACxB,OAAS,EAAA,MAAA;AAAA,IACT,cAAgB,EAAA;AAAA;AAEpB,CAAE,CAAA,CAAA;AAWK,MAAM,oBAAoB,CAAC;AAAA,EAChC,eAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EACE,gBAAgB,MAAS,GAAA,CAAA,GACrB,qBAAqB,UAAW,CAAA,eAAe,CAAC,CAChD,CAAA,CAAA,GAAA,kBAAA;AAAA,MAEN,IAAM,EAAA,eAAA;AAAA,MACN,OAAA,EAAS,sBAAuB,CAAA,eAAA,EAAiB,aAAa,CAAA;AAAA,MAC9D,8BACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,SAAO,oDAE/B;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          ? `Users and groups (${getMembers(selectedMembers)})`\n          : 'Users and groups'\n      }\n      data={selectedMembers}\n      columns={selectedMembersColumns(selectedMembers, setFieldValue)}\n      emptyContent={\n        <Box sx={{ display: 'flex', justifyContent: 'center', p: 2 }}>\n          No records. 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,qBAAqB,UAAW,CAAA,eAAe,CAAC,CAChD,CAAA,CAAA,GAAA,kBAAA;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,oDAE9D;AAAA;AAAA,GAEJ;AAEJ;;;;"}

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { parseEntityRef } from '@backstage/catalog-model';
 import { Link } from '@backstage/core-components';
-import { Box, IconButton } from '@material-ui/core';
 import Delete from '@mui/icons-material/Delete';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
 
 const reviewStepMemebersTableColumns = () => [
   {

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 { Box, IconButton } from '@material-ui/core';\nimport Delete from '@mui/icons-material/Delete';\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            >\n              <Delete />\n            </IconButton>\n          </Box>\n        );\n      },\n    },\n  ];\n};\n"],"names":[],"mappings":";;;;;;AA0BO,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;AAAA,WAAA;AAAA,8CAEL,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            >\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;AAAA,WAAA;AAAA,8CAEL,MAAO,EAAA,IAAA;AAAA,SAEZ,CAAA;AAAA;AAEJ;AACF,GACF;AACF;;;;"}

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

@@ -1,39 +1,44 @@
 import React from 'react';
-import { makeStyles, Box } from '@material-ui/core';
 import Typography from '@mui/material/Typography';
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
 
-const useStyles = makeStyles((theme) => ({
-  optionLabel: {
-    color: theme.palette.text.primary
-  },
-  optionDescription: {
-    color: theme.palette.text.secondary
-  }
-}));
 const MembersDropdownOption = ({
+  props,
   option,
   state
 }) => {
-  const classes = useStyles();
   const { inputValue } = state;
   const { label, etag } = option;
   const matches = match(label, inputValue, { insideWords: true });
   const parts = parse(label, matches);
-  return /* @__PURE__ */ React.createElement(Box, { key: `${etag}` }, parts.map((part) => /* @__PURE__ */ React.createElement(
-    Typography,
+  return /* @__PURE__ */ React.createElement(
+    "li",
     {
-      key: `${part.text}-${etag}`,
-      component: "span",
-      className: classes.optionLabel,
-      sx: {
-        fontWeight: part.highlight ? 400 : 700
-      },
-      "data-testid": option.label
+      ...props,
+      key: `${etag}`,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start"
+      }
     },
-    part.text
-  )), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(Typography, { className: classes.optionDescription }, option.description), " ");
+    /* @__PURE__ */ React.createElement(Typography, { component: "span" }, parts.map((part) => /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        key: `${part.text}-${etag}`,
+        component: "span",
+        sx: {
+          fontWeight: part.highlight ? 400 : 700,
+          color: (theme) => theme.palette.text.primary
+        },
+        "data-testid": option.label
+      },
+      part.text
+    ))),
+    /* @__PURE__ */ React.createElement(Typography, { sx: { color: (theme) => theme.palette.text.secondary } }, option.description),
+    " "
+  );
 };
 
 export { MembersDropdownOption };

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 { Box, makeStyles } from '@material-ui/core';\nimport { AutocompleteRenderOptionState } from '@material-ui/lab/Autocomplete';\nimport Typography from '@mui/material/Typography';\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};\n\nconst useStyles = makeStyles(theme => ({\n  optionLabel: {\n    color: theme.palette.text.primary,\n  },\n  optionDescription: {\n    color: theme.palette.text.secondary,\n  },\n}));\n\nexport const MembersDropdownOption = ({\n  option,\n  state,\n}: MembersDropdownOptionProps) => {\n  const classes = useStyles();\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    <Box key={`${etag}`}>\n      {parts.map(part => (\n        <Typography\n          key={`${part.text}-${etag}`}\n          component=\"span\"\n          className={classes.optionLabel}\n          sx={{\n            fontWeight: part.highlight ? 400 : 700,\n          }}\n          data-testid={option.label}\n        >\n          {part.text}\n        </Typography>\n      ))}\n      <br />\n      <Typography className={classes.optionDescription}>\n        {option.description}\n      </Typography>{' '}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA8BA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,WAAa,EAAA;AAAA,IACX,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,GAC5B;AAAA,EACA,iBAAmB,EAAA;AAAA,IACjB,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA;AAE9B,CAAE,CAAA,CAAA;AAEK,MAAM,wBAAwB,CAAC;AAAA,EACpC,MAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,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,CAAC,OAAI,GAAK,EAAA,CAAA,EAAG,IAAI,CACd,CAAA,EAAA,EAAA,KAAA,CAAM,IAAI,CACT,IAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,CAAA,EAAG,IAAK,CAAA,IAAI,IAAI,IAAI,CAAA,CAAA;AAAA,MACzB,SAAU,EAAA,MAAA;AAAA,MACV,WAAW,OAAQ,CAAA,WAAA;AAAA,MACnB,EAAI,EAAA;AAAA,QACF,UAAA,EAAY,IAAK,CAAA,SAAA,GAAY,GAAM,GAAA;AAAA,OACrC;AAAA,MACA,eAAa,MAAO,CAAA;AAAA,KAAA;AAAA,IAEnB,IAAK,CAAA;AAAA,GAET,CAAA,kBACA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAG,CACJ,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,iBAAA,EAAA,EAC5B,MAAO,CAAA,WACV,GAAc,GAChB,CAAA;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 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      }}\n    >\n      <Typography component=\"span\">\n        {parts.map(part => (\n          <Typography\n            key={`${part.text}-${etag}`}\n            component=\"span\"\n            sx={{\n              fontWeight: 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      <Typography sx={{ color: theme => theme.palette.text.secondary }}>\n        {option.description}\n      </Typography>{' '}\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;AA8BO,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;AAAA;AACd,KAAA;AAAA,wCAEC,UAAW,EAAA,EAAA,SAAA,EAAU,MACnB,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,UAAA,EAAY,IAAK,CAAA,SAAA,GAAY,GAAM,GAAA,GAAA;AAAA,UACnC,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,CAAA;AAAA,oBACC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,EAAI,EAAA,EAAE,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA,EAClD,EAAA,EAAA,MAAA,CAAO,WACV,CAAA;AAAA,IAAc;AAAA,GAChB;AAEJ;;;;"}

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

@@ -2,26 +2,28 @@ import React from 'react';
 import { useAsync } from 'react-use';
 import { Progress } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
-import { makeStyles } from '@material-ui/core';
-import Button from '@material-ui/core/Button';
-import FormHelperText from '@material-ui/core/FormHelperText';
 import AddIcon from '@mui/icons-material/Add';
+import Button from '@mui/material/Button';
+import FormHelperText from '@mui/material/FormHelperText';
+import { styled } from '@mui/material/styles';
 import { rbacApiRef } from '../../api/RBACBackendClient.esm.js';
 import { useConditionRules } from '../../hooks/useConditionRules.esm.js';
 import { getPluginsPermissionPoliciesData } from '../../utils/create-role-utils.esm.js';
 import { initialPermissionPolicyRowValue } from './const.esm.js';
 import { PermissionPoliciesFormRow } from './PermissionPoliciesFormRow.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  permissionPoliciesForm: {
-    padding: "20px",
-    border: `2px solid ${theme.palette.border}`,
-    borderRadius: "5px"
-  },
-  addButton: {
-    color: theme.palette.primary.light
-  }
-}));
+const classes = {
+  permissionPoliciesForm: "permission-policies-form"
+};
+const PermissionPoliciesFormContainer = styled("div")(
+  ({ theme }) => ({
+    [`&.${classes.permissionPoliciesForm}`]: {
+      padding: "20px",
+      border: `2px solid ${theme.palette.border}`,
+      borderRadius: "5px"
+    }
+  })
+);
 const PermissionPoliciesForm = ({
   permissionPoliciesRows,
   permissionPoliciesRowsError,
@@ -29,7 +31,6 @@ const PermissionPoliciesForm = ({
   setFieldError,
   handleBlur
 }) => {
-  const classes = useStyles();
   const rbacApi = useApi(rbacApiRef);
   const conditionRules = useConditionRules();
   const {
@@ -101,43 +102,52 @@ const PermissionPoliciesForm = ({
     [...permissionPoliciesRows, initialPermissionPolicyRowValue],
     false
   );
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FormHelperText, null, "Permission policies can be selected for each plugin. You can add multiple permission policies using +Add option."), /* @__PURE__ */ React.createElement("br", null), permissionPoliciesLoading ? /* @__PURE__ */ React.createElement(Progress, null) : /* @__PURE__ */ React.createElement("div", { className: classes.permissionPoliciesForm }, permissionPoliciesRows.map((pp, index) => /* @__PURE__ */ React.createElement(
-    PermissionPoliciesFormRow,
-    {
-      key: index,
-      permissionPoliciesRowError: permissionPoliciesRowsError?.[index] ?? {},
-      rowName: `permissionPoliciesRows[${index}]`,
-      permissionPoliciesRowData: pp,
-      permissionPoliciesData,
-      rowCount: permissionPoliciesRows.length,
-      conditionRules,
-      onChangePlugin: (plugin) => onChangePlugin(plugin, index),
-      onChangePermission: (permission, isResourced, policies) => onChangePermission(permission, index, isResourced, policies),
-      onChangePolicy: (isChecked, policyIndex) => onChangePolicy(isChecked, policyIndex, index),
-      onAddConditions: (conditions) => onAddConditions(index, conditions),
-      onRemove: () => onRowRemove(index),
-      handleBlur,
-      getPermissionDisabled: (permission) => {
-        const pluginPermissionPolicies = permissionPoliciesRows.filter(
-          (ppr) => ppr.plugin === pp.plugin
-        );
-        const previouslySelectedPermission = !!pluginPermissionPolicies.find(
-          (ppp) => ppp.permission === permission
-        );
-        return previouslySelectedPermission && !permissionPoliciesData?.pluginsPermissions[pp.plugin]?.policies[permission ?? ""]?.isResourced;
-      }
-    }
-  )), /* @__PURE__ */ React.createElement(
-    Button,
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FormHelperText, null, "Permission policies can be selected for each plugin. You can add multiple permission policies using +Add option."), /* @__PURE__ */ React.createElement("br", null), permissionPoliciesLoading ? /* @__PURE__ */ React.createElement(Progress, null) : /* @__PURE__ */ React.createElement(
+    PermissionPoliciesFormContainer,
     {
-      className: classes.addButton,
-      size: "small",
-      onClick: onRowAdd,
-      name: "add-permission-policy"
+      className: classes.permissionPoliciesForm
     },
-    /* @__PURE__ */ React.createElement(AddIcon, null),
-    "Add"
-  )), !permissionPoliciesLoading && (permissionPoliciesErr?.message || !Array.isArray(permissionPolicies)) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(FormHelperText, { error: true }, `Error fetching the permission policies: ${permissionPoliciesErr?.message || permissionPolicies?.statusText}`)));
+    permissionPoliciesRows.map((pp, index) => /* @__PURE__ */ React.createElement(
+      PermissionPoliciesFormRow,
+      {
+        key: index,
+        permissionPoliciesRowError: permissionPoliciesRowsError?.[index] ?? {},
+        rowName: `permissionPoliciesRows[${index}]`,
+        permissionPoliciesRowData: pp,
+        permissionPoliciesData,
+        rowCount: permissionPoliciesRows.length,
+        conditionRules,
+        onChangePlugin: (plugin) => onChangePlugin(plugin, index),
+        onChangePermission: (permission, isResourced, policies) => onChangePermission(permission, index, isResourced, policies),
+        onChangePolicy: (isChecked, policyIndex) => onChangePolicy(isChecked, policyIndex, index),
+        onAddConditions: (conditions) => onAddConditions(index, conditions),
+        onRemove: () => onRowRemove(index),
+        handleBlur,
+        getPermissionDisabled: (permission) => {
+          const pluginPermissionPolicies = permissionPoliciesRows.filter(
+            (ppr) => ppr.plugin === pp.plugin
+          );
+          const previouslySelectedPermission = !!pluginPermissionPolicies.find(
+            (ppp) => ppp.permission === permission
+          );
+          return previouslySelectedPermission && !permissionPoliciesData?.pluginsPermissions[pp.plugin]?.policies[permission ?? ""]?.isResourced;
+        }
+      }
+    )),
+    /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        sx: {
+          color: (theme) => theme.palette.primary.light
+        },
+        size: "small",
+        onClick: onRowAdd,
+        name: "add-permission-policy"
+      },
+      /* @__PURE__ */ React.createElement(AddIcon, null),
+      "Add"
+    )
+  ), !permissionPoliciesLoading && (permissionPoliciesErr?.message || !Array.isArray(permissionPolicies)) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(FormHelperText, { error: true }, `Error fetching the permission policies: ${permissionPoliciesErr?.message || permissionPolicies?.statusText}`)));
 };
 
 export { PermissionPoliciesForm };

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

@@ -1 +1 @@
-{"version":3,"file":"PermissionPoliciesForm.esm.js","sources":["../../../src/components/CreateRole/PermissionPoliciesForm.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 { Progress } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nimport { makeStyles } from '@material-ui/core';\nimport Button from '@material-ui/core/Button';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport AddIcon from '@mui/icons-material/Add';\nimport { FormikErrors } from 'formik';\n\nimport { rbacApiRef } from '../../api/RBACBackendClient';\nimport { useConditionRules } from '../../hooks/useConditionRules';\nimport { PermissionsData } from '../../types';\nimport { getPluginsPermissionPoliciesData } from '../../utils/create-role-utils';\nimport { ConditionsData } from '../ConditionalAccess/types';\nimport { initialPermissionPolicyRowValue } from './const';\nimport { PermissionPoliciesFormRow } from './PermissionPoliciesFormRow';\nimport { RoleFormValues } from './types';\n\nconst useStyles = makeStyles(theme => ({\n  permissionPoliciesForm: {\n    padding: '20px',\n    border: `2px solid ${theme.palette.border}`,\n    borderRadius: '5px',\n  },\n  addButton: {\n    color: theme.palette.primary.light,\n  },\n}));\n\ntype PermissionPoliciesFormProps = {\n  permissionPoliciesRows: PermissionsData[];\n  permissionPoliciesRowsError: FormikErrors<PermissionsData>[];\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>;\n  setFieldError: (field: string, value: string | undefined) => void;\n  handleBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n};\n\nexport const PermissionPoliciesForm = ({\n  permissionPoliciesRows,\n  permissionPoliciesRowsError,\n  setFieldValue,\n  setFieldError,\n  handleBlur,\n}: PermissionPoliciesFormProps) => {\n  const classes = useStyles();\n  const rbacApi = useApi(rbacApiRef);\n  const conditionRules = useConditionRules();\n\n  const {\n    value: permissionPolicies,\n    loading: permissionPoliciesLoading,\n    error: permissionPoliciesErr,\n  } = useAsync(async () => {\n    return await rbacApi.listPermissions();\n  });\n\n  const permissionPoliciesData =\n    !permissionPoliciesLoading && Array.isArray(permissionPolicies)\n      ? getPluginsPermissionPoliciesData(permissionPolicies)\n      : undefined;\n\n  const onChangePlugin = (plugin: string, index: number) => {\n    setFieldValue(`permissionPoliciesRows[${index}].plugin`, plugin, true);\n    setFieldValue(`permissionPoliciesRows[${index}].permission`, '', false);\n    setFieldValue(`permissionPoliciesRows[${index}].isResourced`, false, false);\n    setFieldValue(\n      `permissionPoliciesRows[${index}].conditions`,\n      undefined,\n      false,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].policies`,\n      initialPermissionPolicyRowValue.policies,\n      false,\n    );\n  };\n\n  const onChangePermission = (\n    permission: string,\n    index: number,\n    isResourced: boolean,\n    policies?: string[],\n  ) => {\n    setFieldValue(\n      `permissionPoliciesRows[${index}].permission`,\n      permission,\n      true,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].isResourced`,\n      isResourced,\n      false,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].conditions`,\n      undefined,\n      false,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].policies`,\n      policies\n        ? policies.map(p => ({ policy: p, effect: 'allow' }))\n        : initialPermissionPolicyRowValue.policies,\n      false,\n    );\n  };\n\n  const onChangePolicy = (\n    isChecked: boolean,\n    policyIndex: number,\n    index: number,\n  ) => {\n    setFieldValue(\n      `permissionPoliciesRows[${index}].policies[${policyIndex}].effect`,\n      isChecked ? 'allow' : 'deny',\n      true,\n    );\n  };\n\n  const onAddConditions = (index: number, conditions?: ConditionsData) => {\n    setFieldValue(`permissionPoliciesRows[${index}].conditions`, conditions);\n    if (!conditions)\n      setFieldValue(`permissionPoliciesRows[${index}].id`, undefined);\n  };\n\n  const onRowRemove = (index: number) => {\n    const finalPps = permissionPoliciesRows.filter(\n      (_pp, ppIndex) => index !== ppIndex,\n    );\n    setFieldError(`permissionPoliciesRows[${index}]`, undefined);\n    setFieldValue('permissionPoliciesRows', finalPps, false);\n  };\n\n  const onRowAdd = () =>\n    setFieldValue(\n      'permissionPoliciesRows',\n      [...permissionPoliciesRows, initialPermissionPolicyRowValue],\n      false,\n    );\n\n  return (\n    <div>\n      <FormHelperText>\n        Permission policies can be selected for each plugin. You can add\n        multiple permission policies using +Add option.\n      </FormHelperText>\n      <br />\n      {permissionPoliciesLoading ? (\n        <Progress />\n      ) : (\n        <div className={classes.permissionPoliciesForm}>\n          {permissionPoliciesRows.map((pp, index) => (\n            <PermissionPoliciesFormRow\n              key={index}\n              permissionPoliciesRowError={\n                permissionPoliciesRowsError?.[index] ?? {}\n              }\n              rowName={`permissionPoliciesRows[${index}]`}\n              permissionPoliciesRowData={pp}\n              permissionPoliciesData={permissionPoliciesData}\n              rowCount={permissionPoliciesRows.length}\n              conditionRules={conditionRules}\n              onChangePlugin={(plugin: string) => onChangePlugin(plugin, index)}\n              onChangePermission={(\n                permission: string,\n                isResourced: boolean,\n                policies?: string[],\n              ) => onChangePermission(permission, index, isResourced, policies)}\n              onChangePolicy={(isChecked: boolean, policyIndex: number) =>\n                onChangePolicy(isChecked, policyIndex, index)\n              }\n              onAddConditions={(conditions?: ConditionsData) =>\n                onAddConditions(index, conditions)\n              }\n              onRemove={() => onRowRemove(index)}\n              handleBlur={handleBlur}\n              getPermissionDisabled={(permission: string) => {\n                const pluginPermissionPolicies = permissionPoliciesRows.filter(\n                  ppr => ppr.plugin === pp.plugin,\n                );\n                const previouslySelectedPermission =\n                  !!pluginPermissionPolicies.find(\n                    ppp => ppp.permission === permission,\n                  );\n                return (\n                  previouslySelectedPermission &&\n                  !permissionPoliciesData?.pluginsPermissions[pp.plugin]\n                    ?.policies[permission ?? '']?.isResourced\n                );\n              }}\n            />\n          ))}\n          <Button\n            className={classes.addButton}\n            size=\"small\"\n            onClick={onRowAdd}\n            name=\"add-permission-policy\"\n          >\n            <AddIcon />\n            Add\n          </Button>\n        </div>\n      )}\n      {!permissionPoliciesLoading &&\n        (permissionPoliciesErr?.message ||\n          !Array.isArray(permissionPolicies)) && (\n          <>\n            <br />\n            <FormHelperText error>\n              {`Error fetching the permission policies: ${\n                permissionPoliciesErr?.message ||\n                (permissionPolicies as Response)?.statusText\n              }`}\n            </FormHelperText>\n          </>\n        )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PermissionPoliciesForm.esm.js","sources":["../../../src/components/CreateRole/PermissionPoliciesForm.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 { Progress } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nimport AddIcon from '@mui/icons-material/Add';\nimport Button from '@mui/material/Button';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport { styled, Theme } from '@mui/material/styles';\nimport { FormikErrors } from 'formik';\n\nimport { rbacApiRef } from '../../api/RBACBackendClient';\nimport { useConditionRules } from '../../hooks/useConditionRules';\nimport { PermissionsData } from '../../types';\nimport { getPluginsPermissionPoliciesData } from '../../utils/create-role-utils';\nimport { ConditionsData } from '../ConditionalAccess/types';\nimport { initialPermissionPolicyRowValue } from './const';\nimport { PermissionPoliciesFormRow } from './PermissionPoliciesFormRow';\nimport { RoleFormValues } from './types';\n\nconst classes = {\n  permissionPoliciesForm: 'permission-policies-form',\n};\n\nconst PermissionPoliciesFormContainer = styled('div')(\n  ({ theme }: { theme: Theme }) => ({\n    [`&.${classes.permissionPoliciesForm}`]: {\n      padding: '20px',\n      border: `2px solid ${theme.palette.border}`,\n      borderRadius: '5px',\n    },\n  }),\n);\n\ntype PermissionPoliciesFormProps = {\n  permissionPoliciesRows: PermissionsData[];\n  permissionPoliciesRowsError: FormikErrors<PermissionsData>[];\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>;\n  setFieldError: (field: string, value: string | undefined) => void;\n  handleBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n};\n\nexport const PermissionPoliciesForm = ({\n  permissionPoliciesRows,\n  permissionPoliciesRowsError,\n  setFieldValue,\n  setFieldError,\n  handleBlur,\n}: PermissionPoliciesFormProps) => {\n  const rbacApi = useApi(rbacApiRef);\n  const conditionRules = useConditionRules();\n\n  const {\n    value: permissionPolicies,\n    loading: permissionPoliciesLoading,\n    error: permissionPoliciesErr,\n  } = useAsync(async () => {\n    return await rbacApi.listPermissions();\n  });\n\n  const permissionPoliciesData =\n    !permissionPoliciesLoading && Array.isArray(permissionPolicies)\n      ? getPluginsPermissionPoliciesData(permissionPolicies)\n      : undefined;\n\n  const onChangePlugin = (plugin: string, index: number) => {\n    setFieldValue(`permissionPoliciesRows[${index}].plugin`, plugin, true);\n    setFieldValue(`permissionPoliciesRows[${index}].permission`, '', false);\n    setFieldValue(`permissionPoliciesRows[${index}].isResourced`, false, false);\n    setFieldValue(\n      `permissionPoliciesRows[${index}].conditions`,\n      undefined,\n      false,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].policies`,\n      initialPermissionPolicyRowValue.policies,\n      false,\n    );\n  };\n\n  const onChangePermission = (\n    permission: string,\n    index: number,\n    isResourced: boolean,\n    policies?: string[],\n  ) => {\n    setFieldValue(\n      `permissionPoliciesRows[${index}].permission`,\n      permission,\n      true,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].isResourced`,\n      isResourced,\n      false,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].conditions`,\n      undefined,\n      false,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].policies`,\n      policies\n        ? policies.map(p => ({ policy: p, effect: 'allow' }))\n        : initialPermissionPolicyRowValue.policies,\n      false,\n    );\n  };\n\n  const onChangePolicy = (\n    isChecked: boolean,\n    policyIndex: number,\n    index: number,\n  ) => {\n    setFieldValue(\n      `permissionPoliciesRows[${index}].policies[${policyIndex}].effect`,\n      isChecked ? 'allow' : 'deny',\n      true,\n    );\n  };\n\n  const onAddConditions = (index: number, conditions?: ConditionsData) => {\n    setFieldValue(`permissionPoliciesRows[${index}].conditions`, conditions);\n    if (!conditions)\n      setFieldValue(`permissionPoliciesRows[${index}].id`, undefined);\n  };\n\n  const onRowRemove = (index: number) => {\n    const finalPps = permissionPoliciesRows.filter(\n      (_pp, ppIndex) => index !== ppIndex,\n    );\n    setFieldError(`permissionPoliciesRows[${index}]`, undefined);\n    setFieldValue('permissionPoliciesRows', finalPps, false);\n  };\n\n  const onRowAdd = () =>\n    setFieldValue(\n      'permissionPoliciesRows',\n      [...permissionPoliciesRows, initialPermissionPolicyRowValue],\n      false,\n    );\n\n  return (\n    <div>\n      <FormHelperText>\n        Permission policies can be selected for each plugin. You can add\n        multiple permission policies using +Add option.\n      </FormHelperText>\n      <br />\n      {permissionPoliciesLoading ? (\n        <Progress />\n      ) : (\n        <PermissionPoliciesFormContainer\n          className={classes.permissionPoliciesForm}\n        >\n          {permissionPoliciesRows.map((pp, index) => (\n            <PermissionPoliciesFormRow\n              key={index}\n              permissionPoliciesRowError={\n                permissionPoliciesRowsError?.[index] ?? {}\n              }\n              rowName={`permissionPoliciesRows[${index}]`}\n              permissionPoliciesRowData={pp}\n              permissionPoliciesData={permissionPoliciesData}\n              rowCount={permissionPoliciesRows.length}\n              conditionRules={conditionRules}\n              onChangePlugin={(plugin: string) => onChangePlugin(plugin, index)}\n              onChangePermission={(\n                permission: string,\n                isResourced: boolean,\n                policies?: string[],\n              ) => onChangePermission(permission, index, isResourced, policies)}\n              onChangePolicy={(isChecked: boolean, policyIndex: number) =>\n                onChangePolicy(isChecked, policyIndex, index)\n              }\n              onAddConditions={(conditions?: ConditionsData) =>\n                onAddConditions(index, conditions)\n              }\n              onRemove={() => onRowRemove(index)}\n              handleBlur={handleBlur}\n              getPermissionDisabled={(permission: string) => {\n                const pluginPermissionPolicies = permissionPoliciesRows.filter(\n                  ppr => ppr.plugin === pp.plugin,\n                );\n                const previouslySelectedPermission =\n                  !!pluginPermissionPolicies.find(\n                    ppp => ppp.permission === permission,\n                  );\n                return (\n                  previouslySelectedPermission &&\n                  !permissionPoliciesData?.pluginsPermissions[pp.plugin]\n                    ?.policies[permission ?? '']?.isResourced\n                );\n              }}\n            />\n          ))}\n          <Button\n            sx={{\n              color: theme => theme.palette.primary.light,\n            }}\n            size=\"small\"\n            onClick={onRowAdd}\n            name=\"add-permission-policy\"\n          >\n            <AddIcon />\n            Add\n          </Button>\n        </PermissionPoliciesFormContainer>\n      )}\n      {!permissionPoliciesLoading &&\n        (permissionPoliciesErr?.message ||\n          !Array.isArray(permissionPolicies)) && (\n          <>\n            <br />\n            <FormHelperText error>\n              {`Error fetching the permission policies: ${\n                permissionPoliciesErr?.message ||\n                (permissionPolicies as Response)?.statusText\n              }`}\n            </FormHelperText>\n          </>\n        )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,27 +1,17 @@
 import React from 'react';
-import { makeStyles, FormLabel } from '@material-ui/core';
-import IconButton from '@material-ui/core/IconButton';
-import TextField from '@material-ui/core/TextField';
-import Autocomplete from '@material-ui/lab/Autocomplete';
 import ChecklistRtlIcon from '@mui/icons-material/ChecklistRtl';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import RemoveIcon from '@mui/icons-material/Remove';
+import Autocomplete from '@mui/material/Autocomplete';
+import FormLabel from '@mui/material/FormLabel';
+import IconButton from '@mui/material/IconButton';
+import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { getRulesNumber } from '../../utils/create-role-utils.esm.js';
 import { ConditionalAccessSidebar } from '../ConditionalAccess/ConditionalAccessSidebar.esm.js';
 import { PoliciesCheckboxGroup } from './PoliciesCheckboxGroup.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  removeButton: {
-    color: theme.palette.grey[500],
-    flexGrow: 0,
-    alignSelf: "center"
-  },
-  conditionalAccessButton: {
-    fontSize: theme.typography.fontSize
-  }
-}));
 const PermissionPoliciesFormRow = ({
   permissionPoliciesRowData,
   permissionPoliciesData,
@@ -37,7 +27,6 @@ const PermissionPoliciesFormRow = ({
   getPermissionDisabled,
   onAddConditions
 }) => {
-  const classes = useStyles();
   const { plugin: pluginError, permission: permissionError } = permissionPoliciesRowError;
   const { data: conditionRulesData, error: conditionRulesError } = conditionRules;
   const totalRules = getRulesNumber(permissionPoliciesRowData.conditions);
@@ -130,7 +119,9 @@ const PermissionPoliciesFormRow = ({
         color: "primary",
         hidden: !permissionPoliciesData?.pluginsPermissions[permissionPoliciesRowData.plugin]?.policies[permissionPoliciesRowData.permission]?.isResourced,
         "aria-label": "configure-access",
-        className: classes.conditionalAccessButton,
+        sx: {
+          fontSize: (theme) => theme.typography.fontSize
+        },
         onClick: () => setSidebarOpen(true),
         disabled: !!conditionRulesError
       },
@@ -143,7 +134,11 @@ const PermissionPoliciesFormRow = ({
       IconButton,
       {
         title: "Remove",
-        className: classes.removeButton,
+        sx: {
+          color: (theme) => theme.palette.grey[500],
+          flexGrow: 0,
+          alignSelf: "center"
+        },
         onClick: () => onRemove(),
         disabled: rowCount === 1,
         "data-testid": `${rowName}-remove`

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

@@ -1 +1 @@
-{"version":3,"file":"PermissionPoliciesFormRow.esm.js","sources":["../../../src/components/CreateRole/PermissionPoliciesFormRow.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 { FormLabel, makeStyles } from '@material-ui/core';\nimport IconButton from '@material-ui/core/IconButton';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport ChecklistRtlIcon from '@mui/icons-material/ChecklistRtl';\nimport HelpOutlineIcon from '@mui/icons-material/HelpOutline';\nimport RemoveIcon from '@mui/icons-material/Remove';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport { FormikErrors } from 'formik';\n\nimport { PermissionsData } from '../../types';\nimport { getRulesNumber } from '../../utils/create-role-utils';\nimport { ConditionalAccessSidebar } from '../ConditionalAccess/ConditionalAccessSidebar';\nimport { ConditionRules, ConditionsData } from '../ConditionalAccess/types';\nimport { PoliciesCheckboxGroup } from './PoliciesCheckboxGroup';\nimport { PluginsPermissionPoliciesData } from './types';\n\nconst useStyles = makeStyles(theme => ({\n  removeButton: {\n    color: theme.palette.grey[500],\n    flexGrow: 0,\n    alignSelf: 'center',\n  },\n  conditionalAccessButton: {\n    fontSize: theme.typography.fontSize,\n  },\n}));\n\ntype PermissionPoliciesFormRowProps = {\n  permissionPoliciesRowData: PermissionsData;\n  permissionPoliciesData?: PluginsPermissionPoliciesData;\n  permissionPoliciesRowError: FormikErrors<PermissionsData>;\n  rowCount: number;\n  rowName: string;\n  conditionRules: ConditionRules;\n  onRemove: () => void;\n  onChangePlugin: (plugin: string) => void;\n  onChangePermission: (\n    permission: string,\n    isResourced: boolean,\n    policies?: string[],\n  ) => void;\n  onChangePolicy: (isChecked: boolean, policyIndex: number) => void;\n  handleBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  getPermissionDisabled: (permission: string) => boolean;\n  onAddConditions: (conditions?: ConditionsData) => void;\n};\n\nexport const PermissionPoliciesFormRow = ({\n  permissionPoliciesRowData,\n  permissionPoliciesData,\n  permissionPoliciesRowError,\n  rowCount,\n  rowName,\n  conditionRules,\n  onRemove,\n  onChangePermission,\n  onChangePolicy,\n  onChangePlugin,\n  handleBlur,\n  getPermissionDisabled,\n  onAddConditions,\n}: PermissionPoliciesFormRowProps) => {\n  const classes = useStyles();\n  const { plugin: pluginError, permission: permissionError } =\n    permissionPoliciesRowError;\n  const { data: conditionRulesData, error: conditionRulesError } =\n    conditionRules;\n  const totalRules = getRulesNumber(permissionPoliciesRowData.conditions);\n\n  const [sidebarOpen, setSidebarOpen] = React.useState<boolean>(false);\n\n  const tooltipTitle = () => (\n    <div>\n      <Typography component=\"p\" align=\"center\">\n        Define access conditions for the selected resource type using Rules.\n        Rules vary by resource type.{' '}\n        <b>Users have access to the resource type content by default</b> unless\n        configured otherwise.\n      </Typography>\n    </div>\n  );\n\n  const getTotalRules = (): string => {\n    let accessMessage = 'Configure access';\n\n    if (totalRules > 0) {\n      accessMessage += ` (${totalRules} ${totalRules > 1 ? 'rules' : 'rule'})`;\n    }\n    return accessMessage;\n  };\n\n  return (\n    <div>\n      <div style={{ display: 'flex', flexFlow: 'column', gap: '15px' }}>\n        <FormLabel\n          style={{\n            fontWeight: 800,\n            fontSize: '0.8rem',\n          }}\n        >\n          What can users/groups access?\n        </FormLabel>\n        <div\n          style={{\n            display: 'flex',\n            gap: '20px',\n            marginBottom: '15px',\n          }}\n        >\n          <Autocomplete\n            options={permissionPoliciesData?.plugins ?? []}\n            style={{ width: '35%', flexGrow: '1' }}\n            value={permissionPoliciesRowData.plugin || null}\n            onChange={(_e, value) => {\n              onChangePlugin(value ?? '');\n            }}\n            renderInput={(params: any) => (\n              <TextField\n                {...params}\n                label=\"Plugin\"\n                name={`${rowName}.plugin`}\n                variant=\"outlined\"\n                placeholder=\"Select a plugin\"\n                error={!!pluginError}\n                helperText={pluginError ?? ''}\n                onBlur={handleBlur}\n                required\n              />\n            )}\n          />\n          <Autocomplete\n            disabled={!permissionPoliciesRowData.plugin}\n            options={\n              permissionPoliciesData?.pluginsPermissions?.[\n                permissionPoliciesRowData.plugin\n              ]?.permissions ?? []\n            }\n            style={{ width: '35%', flexGrow: '1' }}\n            value={permissionPoliciesRowData.permission || null}\n            onChange={(_e, value) =>\n              onChangePermission(\n                value ?? '',\n                permissionPoliciesData?.pluginsPermissions?.[\n                  permissionPoliciesRowData.plugin\n                ]?.policies[value ?? '']?.isResourced ?? false,\n                value\n                  ? permissionPoliciesData?.pluginsPermissions?.[\n                      permissionPoliciesRowData.plugin\n                    ]?.policies?.[value].policies\n                  : undefined,\n              )\n            }\n            getOptionDisabled={getPermissionDisabled}\n            getOptionLabel={option => option || ''}\n            renderInput={(params: any) => (\n              <TextField\n                {...params}\n                label=\"Resource type\"\n                name={`${rowName}.permission`}\n                variant=\"outlined\"\n                placeholder=\"Select a resource type\"\n                error={!!permissionError}\n                helperText={permissionError ?? ''}\n                onBlur={handleBlur}\n                required\n              />\n            )}\n          />\n          <div style={{ width: '23%', alignSelf: 'center', flexGrow: 1 }}>\n            {permissionPoliciesRowData.isResourced &&\n              !!conditionRulesData?.[`${permissionPoliciesRowData.plugin}`]?.[\n                `${permissionPoliciesRowData.permission}`\n              ]?.rules.length && (\n                <IconButton\n                  title=\"\"\n                  color=\"primary\"\n                  hidden={\n                    !permissionPoliciesData?.pluginsPermissions[\n                      permissionPoliciesRowData.plugin\n                    ]?.policies[permissionPoliciesRowData.permission]\n                      ?.isResourced\n                  }\n                  aria-label=\"configure-access\"\n                  className={classes.conditionalAccessButton}\n                  onClick={() => setSidebarOpen(true)}\n                  disabled={!!conditionRulesError}\n                >\n                  <ChecklistRtlIcon fontSize=\"small\" />\n                  {getTotalRules()}\n                  &nbsp;\n                  <Tooltip title={tooltipTitle()} placement=\"top\">\n                    <HelpOutlineIcon fontSize=\"inherit\" />\n                  </Tooltip>\n                </IconButton>\n              )}\n          </div>\n          <IconButton\n            title=\"Remove\"\n            className={classes.removeButton}\n            onClick={() => onRemove()}\n            disabled={rowCount === 1}\n            data-testid={`${rowName}-remove`}\n          >\n            <RemoveIcon id={`${rowName}-remove`} />\n          </IconButton>\n        </div>\n      </div>\n      <PoliciesCheckboxGroup\n        permissionPoliciesRowData={permissionPoliciesRowData}\n        onChangePolicy={onChangePolicy}\n        rowName={rowName}\n      />\n      <ConditionalAccessSidebar\n        open={sidebarOpen}\n        onClose={() => {\n          setSidebarOpen(false);\n        }}\n        onSave={(conditions?: ConditionsData) => {\n          onAddConditions(conditions);\n          setSidebarOpen(false);\n        }}\n        conditionsFormVal={permissionPoliciesRowData.conditions}\n        selPluginResourceType={permissionPoliciesRowData.permission}\n        conditionRulesData={\n          conditionRulesData?.[`${permissionPoliciesRowData.plugin}`]?.[\n            `${permissionPoliciesRowData.permission}`\n          ]\n        }\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PermissionPoliciesFormRow.esm.js","sources":["../../../src/components/CreateRole/PermissionPoliciesFormRow.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 ChecklistRtlIcon from '@mui/icons-material/ChecklistRtl';\nimport HelpOutlineIcon from '@mui/icons-material/HelpOutline';\nimport RemoveIcon from '@mui/icons-material/Remove';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport FormLabel from '@mui/material/FormLabel';\nimport IconButton from '@mui/material/IconButton';\nimport TextField from '@mui/material/TextField';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport { FormikErrors } from 'formik';\n\nimport { PermissionsData } from '../../types';\nimport { getRulesNumber } from '../../utils/create-role-utils';\nimport { ConditionalAccessSidebar } from '../ConditionalAccess/ConditionalAccessSidebar';\nimport { ConditionRules, ConditionsData } from '../ConditionalAccess/types';\nimport { PoliciesCheckboxGroup } from './PoliciesCheckboxGroup';\nimport { PluginsPermissionPoliciesData } from './types';\n\ntype PermissionPoliciesFormRowProps = {\n  permissionPoliciesRowData: PermissionsData;\n  permissionPoliciesData?: PluginsPermissionPoliciesData;\n  permissionPoliciesRowError: FormikErrors<PermissionsData>;\n  rowCount: number;\n  rowName: string;\n  conditionRules: ConditionRules;\n  onRemove: () => void;\n  onChangePlugin: (plugin: string) => void;\n  onChangePermission: (\n    permission: string,\n    isResourced: boolean,\n    policies?: string[],\n  ) => void;\n  onChangePolicy: (isChecked: boolean, policyIndex: number) => void;\n  handleBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  getPermissionDisabled: (permission: string) => boolean;\n  onAddConditions: (conditions?: ConditionsData) => void;\n};\n\nexport const PermissionPoliciesFormRow = ({\n  permissionPoliciesRowData,\n  permissionPoliciesData,\n  permissionPoliciesRowError,\n  rowCount,\n  rowName,\n  conditionRules,\n  onRemove,\n  onChangePermission,\n  onChangePolicy,\n  onChangePlugin,\n  handleBlur,\n  getPermissionDisabled,\n  onAddConditions,\n}: PermissionPoliciesFormRowProps) => {\n  const { plugin: pluginError, permission: permissionError } =\n    permissionPoliciesRowError;\n  const { data: conditionRulesData, error: conditionRulesError } =\n    conditionRules;\n  const totalRules = getRulesNumber(permissionPoliciesRowData.conditions);\n\n  const [sidebarOpen, setSidebarOpen] = React.useState<boolean>(false);\n\n  const tooltipTitle = () => (\n    <div>\n      <Typography component=\"p\" align=\"center\">\n        Define access conditions for the selected resource type using Rules.\n        Rules vary by resource type.{' '}\n        <b>Users have access to the resource type content by default</b> unless\n        configured otherwise.\n      </Typography>\n    </div>\n  );\n\n  const getTotalRules = (): string => {\n    let accessMessage = 'Configure access';\n\n    if (totalRules > 0) {\n      accessMessage += ` (${totalRules} ${totalRules > 1 ? 'rules' : 'rule'})`;\n    }\n    return accessMessage;\n  };\n\n  return (\n    <div>\n      <div style={{ display: 'flex', flexFlow: 'column', gap: '15px' }}>\n        <FormLabel\n          style={{\n            fontWeight: 800,\n            fontSize: '0.8rem',\n          }}\n        >\n          What can users/groups access?\n        </FormLabel>\n        <div\n          style={{\n            display: 'flex',\n            gap: '20px',\n            marginBottom: '15px',\n          }}\n        >\n          <Autocomplete\n            options={permissionPoliciesData?.plugins ?? []}\n            style={{ width: '35%', flexGrow: '1' }}\n            value={permissionPoliciesRowData.plugin || null}\n            onChange={(_e, value) => {\n              onChangePlugin(value ?? '');\n            }}\n            renderInput={(params: any) => (\n              <TextField\n                {...params}\n                label=\"Plugin\"\n                name={`${rowName}.plugin`}\n                variant=\"outlined\"\n                placeholder=\"Select a plugin\"\n                error={!!pluginError}\n                helperText={pluginError ?? ''}\n                onBlur={handleBlur}\n                required\n              />\n            )}\n          />\n          <Autocomplete\n            disabled={!permissionPoliciesRowData.plugin}\n            options={\n              permissionPoliciesData?.pluginsPermissions?.[\n                permissionPoliciesRowData.plugin\n              ]?.permissions ?? []\n            }\n            style={{ width: '35%', flexGrow: '1' }}\n            value={permissionPoliciesRowData.permission || null}\n            onChange={(_e, value) =>\n              onChangePermission(\n                value ?? '',\n                permissionPoliciesData?.pluginsPermissions?.[\n                  permissionPoliciesRowData.plugin\n                ]?.policies[value ?? '']?.isResourced ?? false,\n                value\n                  ? permissionPoliciesData?.pluginsPermissions?.[\n                      permissionPoliciesRowData.plugin\n                    ]?.policies?.[value].policies\n                  : undefined,\n              )\n            }\n            getOptionDisabled={getPermissionDisabled}\n            getOptionLabel={option => option || ''}\n            renderInput={(params: any) => (\n              <TextField\n                {...params}\n                label=\"Resource type\"\n                name={`${rowName}.permission`}\n                variant=\"outlined\"\n                placeholder=\"Select a resource type\"\n                error={!!permissionError}\n                helperText={permissionError ?? ''}\n                onBlur={handleBlur}\n                required\n              />\n            )}\n          />\n          <div style={{ width: '23%', alignSelf: 'center', flexGrow: 1 }}>\n            {permissionPoliciesRowData.isResourced &&\n              !!conditionRulesData?.[`${permissionPoliciesRowData.plugin}`]?.[\n                `${permissionPoliciesRowData.permission}`\n              ]?.rules.length && (\n                <IconButton\n                  title=\"\"\n                  color=\"primary\"\n                  hidden={\n                    !permissionPoliciesData?.pluginsPermissions[\n                      permissionPoliciesRowData.plugin\n                    ]?.policies[permissionPoliciesRowData.permission]\n                      ?.isResourced\n                  }\n                  aria-label=\"configure-access\"\n                  sx={{\n                    fontSize: theme => theme.typography.fontSize,\n                  }}\n                  onClick={() => setSidebarOpen(true)}\n                  disabled={!!conditionRulesError}\n                >\n                  <ChecklistRtlIcon fontSize=\"small\" />\n                  {getTotalRules()}\n                  &nbsp;\n                  <Tooltip title={tooltipTitle()} placement=\"top\">\n                    <HelpOutlineIcon fontSize=\"inherit\" />\n                  </Tooltip>\n                </IconButton>\n              )}\n          </div>\n          <IconButton\n            title=\"Remove\"\n            sx={{\n              color: theme => theme.palette.grey[500],\n              flexGrow: 0,\n              alignSelf: 'center',\n            }}\n            onClick={() => onRemove()}\n            disabled={rowCount === 1}\n            data-testid={`${rowName}-remove`}\n          >\n            <RemoveIcon id={`${rowName}-remove`} />\n          </IconButton>\n        </div>\n      </div>\n      <PoliciesCheckboxGroup\n        permissionPoliciesRowData={permissionPoliciesRowData}\n        onChangePolicy={onChangePolicy}\n        rowName={rowName}\n      />\n      <ConditionalAccessSidebar\n        open={sidebarOpen}\n        onClose={() => {\n          setSidebarOpen(false);\n        }}\n        onSave={(conditions?: ConditionsData) => {\n          onAddConditions(conditions);\n          setSidebarOpen(false);\n        }}\n        conditionsFormVal={permissionPoliciesRowData.conditions}\n        selPluginResourceType={permissionPoliciesRowData.permission}\n        conditionRulesData={\n          conditionRulesData?.[`${permissionPoliciesRowData.plugin}`]?.[\n            `${permissionPoliciesRowData.permission}`\n          ]\n        }\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControl from '@material-ui/core/FormControl';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormLabel from '@material-ui/core/FormLabel';
+import Checkbox from '@mui/material/Checkbox';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormGroup from '@mui/material/FormGroup';
+import FormLabel from '@mui/material/FormLabel';
 
 const PoliciesCheckboxGroup = ({
   permissionPoliciesRowData,

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

@@ -1 +1 @@
-{"version":3,"file":"PoliciesCheckboxGroup.esm.js","sources":["../../../src/components/CreateRole/PoliciesCheckboxGroup.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 Checkbox from '@material-ui/core/Checkbox';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport FormGroup from '@material-ui/core/FormGroup';\nimport FormLabel from '@material-ui/core/FormLabel';\n\nimport { PermissionsData } from '../../types';\nimport { RowPolicy } from './types';\n\nexport const PoliciesCheckboxGroup = ({\n  permissionPoliciesRowData,\n  rowName,\n  onChangePolicy,\n}: {\n  permissionPoliciesRowData: PermissionsData;\n  rowName: string;\n\n  onChangePolicy: (isChecked: boolean, policyIndex: number) => void;\n}) => {\n  return (\n    <FormControl\n      required\n      style={{\n        justifyContent: 'flex-start',\n        gap: '1px',\n        width: '402px',\n        flexGrow: '1',\n        marginBottom: '25px',\n      }}\n    >\n      <FormLabel\n        style={{\n          fontWeight: 800,\n          fontSize: '0.8rem',\n        }}\n      >\n        What actions they can do?\n      </FormLabel>\n      <FormGroup\n        style={{\n          display: 'flex',\n          gap: '7px',\n          flexDirection: 'row',\n          paddingLeft: '9px',\n        }}\n      >\n        {permissionPoliciesRowData.policies.map(\n          (p: RowPolicy, index: number, self) => {\n            const labelCheckedArray = self.filter(\n              val => val.effect === 'allow',\n            );\n            const labelCheckedCount = labelCheckedArray.length;\n            return (\n              <FormControlLabel\n                key={p.policy}\n                disabled={\n                  !(\n                    permissionPoliciesRowData.plugin &&\n                    permissionPoliciesRowData.permission\n                  ) ||\n                  permissionPoliciesRowData.policies.length === 1 ||\n                  (labelCheckedCount === 1 &&\n                    labelCheckedArray[0].policy === p.policy)\n                }\n                label={p.policy}\n                name={`${rowName}.policies[${index}].policy`}\n                control={\n                  <Checkbox\n                    checked={p.effect === 'allow'}\n                    name={`${rowName}.policies[${index}].policy-${p.policy}`}\n                    onChange={e => onChangePolicy(e.target.checked, index)}\n                    color=\"primary\"\n                  />\n                }\n              />\n            );\n          },\n        )}\n      </FormGroup>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA0BO,MAAM,wBAAwB,CAAC;AAAA,EACpC,yBAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAKM,KAAA;AACJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,QAAQ,EAAA,IAAA;AAAA,MACR,KAAO,EAAA;AAAA,QACL,cAAgB,EAAA,YAAA;AAAA,QAChB,GAAK,EAAA,KAAA;AAAA,QACL,KAAO,EAAA,OAAA;AAAA,QACP,QAAU,EAAA,GAAA;AAAA,QACV,YAAc,EAAA;AAAA;AAChB,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,UAAY,EAAA,GAAA;AAAA,UACZ,QAAU,EAAA;AAAA;AACZ,OAAA;AAAA,MACD;AAAA,KAED;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,OAAS,EAAA,MAAA;AAAA,UACT,GAAK,EAAA,KAAA;AAAA,UACL,aAAe,EAAA,KAAA;AAAA,UACf,WAAa,EAAA;AAAA;AACf,OAAA;AAAA,MAEC,0BAA0B,QAAS,CAAA,GAAA;AAAA,QAClC,CAAC,CAAc,EAAA,KAAA,EAAe,IAAS,KAAA;AACrC,UAAA,MAAM,oBAAoB,IAAK,CAAA,MAAA;AAAA,YAC7B,CAAA,GAAA,KAAO,IAAI,MAAW,KAAA;AAAA,WACxB;AACA,UAAA,MAAM,oBAAoB,iBAAkB,CAAA,MAAA;AAC5C,UACE,uBAAA,KAAA,CAAA,aAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cACC,KAAK,CAAE,CAAA,MAAA;AAAA,cACP,UACE,EACE,yBAAA,CAA0B,MAC1B,IAAA,yBAAA,CAA0B,eAE5B,yBAA0B,CAAA,QAAA,CAAS,MAAW,KAAA,CAAA,IAC7C,sBAAsB,CACrB,IAAA,iBAAA,CAAkB,CAAC,CAAA,CAAE,WAAW,CAAE,CAAA,MAAA;AAAA,cAEtC,OAAO,CAAE,CAAA,MAAA;AAAA,cACT,IAAM,EAAA,CAAA,EAAG,OAAO,CAAA,UAAA,EAAa,KAAK,CAAA,QAAA,CAAA;AAAA,cAClC,OACE,kBAAA,KAAA,CAAA,aAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,OAAA,EAAS,EAAE,MAAW,KAAA,OAAA;AAAA,kBACtB,MAAM,CAAG,EAAA,OAAO,aAAa,KAAK,CAAA,SAAA,EAAY,EAAE,MAAM,CAAA,CAAA;AAAA,kBACtD,UAAU,CAAK,CAAA,KAAA,cAAA,CAAe,CAAE,CAAA,MAAA,CAAO,SAAS,KAAK,CAAA;AAAA,kBACrD,KAAM,EAAA;AAAA;AAAA;AACR;AAAA,WAEJ;AAAA;AAEJ;AACF;AACF,GACF;AAEJ;;;;"}
+{"version":3,"file":"PoliciesCheckboxGroup.esm.js","sources":["../../../src/components/CreateRole/PoliciesCheckboxGroup.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 Checkbox from '@mui/material/Checkbox';\nimport FormControl from '@mui/material/FormControl';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport FormGroup from '@mui/material/FormGroup';\nimport FormLabel from '@mui/material/FormLabel';\n\nimport { PermissionsData } from '../../types';\nimport { RowPolicy } from './types';\n\nexport const PoliciesCheckboxGroup = ({\n  permissionPoliciesRowData,\n  rowName,\n  onChangePolicy,\n}: {\n  permissionPoliciesRowData: PermissionsData;\n  rowName: string;\n\n  onChangePolicy: (isChecked: boolean, policyIndex: number) => void;\n}) => {\n  return (\n    <FormControl\n      required\n      style={{\n        justifyContent: 'flex-start',\n        gap: '1px',\n        width: '402px',\n        flexGrow: '1',\n        marginBottom: '25px',\n      }}\n    >\n      <FormLabel\n        style={{\n          fontWeight: 800,\n          fontSize: '0.8rem',\n        }}\n      >\n        What actions they can do?\n      </FormLabel>\n      <FormGroup\n        style={{\n          display: 'flex',\n          gap: '7px',\n          flexDirection: 'row',\n          paddingLeft: '9px',\n        }}\n      >\n        {permissionPoliciesRowData.policies.map(\n          (p: RowPolicy, index: number, self) => {\n            const labelCheckedArray = self.filter(\n              val => val.effect === 'allow',\n            );\n            const labelCheckedCount = labelCheckedArray.length;\n            return (\n              <FormControlLabel\n                key={p.policy}\n                disabled={\n                  !(\n                    permissionPoliciesRowData.plugin &&\n                    permissionPoliciesRowData.permission\n                  ) ||\n                  permissionPoliciesRowData.policies.length === 1 ||\n                  (labelCheckedCount === 1 &&\n                    labelCheckedArray[0].policy === p.policy)\n                }\n                label={p.policy}\n                name={`${rowName}.policies[${index}].policy`}\n                control={\n                  <Checkbox\n                    checked={p.effect === 'allow'}\n                    name={`${rowName}.policies[${index}].policy-${p.policy}`}\n                    onChange={e => onChangePolicy(e.target.checked, index)}\n                    color=\"primary\"\n                  />\n                }\n              />\n            );\n          },\n        )}\n      </FormGroup>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA0BO,MAAM,wBAAwB,CAAC;AAAA,EACpC,yBAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAKM,KAAA;AACJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,QAAQ,EAAA,IAAA;AAAA,MACR,KAAO,EAAA;AAAA,QACL,cAAgB,EAAA,YAAA;AAAA,QAChB,GAAK,EAAA,KAAA;AAAA,QACL,KAAO,EAAA,OAAA;AAAA,QACP,QAAU,EAAA,GAAA;AAAA,QACV,YAAc,EAAA;AAAA;AAChB,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,UAAY,EAAA,GAAA;AAAA,UACZ,QAAU,EAAA;AAAA;AACZ,OAAA;AAAA,MACD;AAAA,KAED;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,OAAS,EAAA,MAAA;AAAA,UACT,GAAK,EAAA,KAAA;AAAA,UACL,aAAe,EAAA,KAAA;AAAA,UACf,WAAa,EAAA;AAAA;AACf,OAAA;AAAA,MAEC,0BAA0B,QAAS,CAAA,GAAA;AAAA,QAClC,CAAC,CAAc,EAAA,KAAA,EAAe,IAAS,KAAA;AACrC,UAAA,MAAM,oBAAoB,IAAK,CAAA,MAAA;AAAA,YAC7B,CAAA,GAAA,KAAO,IAAI,MAAW,KAAA;AAAA,WACxB;AACA,UAAA,MAAM,oBAAoB,iBAAkB,CAAA,MAAA;AAC5C,UACE,uBAAA,KAAA,CAAA,aAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cACC,KAAK,CAAE,CAAA,MAAA;AAAA,cACP,UACE,EACE,yBAAA,CAA0B,MAC1B,IAAA,yBAAA,CAA0B,eAE5B,yBAA0B,CAAA,QAAA,CAAS,MAAW,KAAA,CAAA,IAC7C,sBAAsB,CACrB,IAAA,iBAAA,CAAkB,CAAC,CAAA,CAAE,WAAW,CAAE,CAAA,MAAA;AAAA,cAEtC,OAAO,CAAE,CAAA,MAAA;AAAA,cACT,IAAM,EAAA,CAAA,EAAG,OAAO,CAAA,UAAA,EAAa,KAAK,CAAA,QAAA,CAAA;AAAA,cAClC,OACE,kBAAA,KAAA,CAAA,aAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,OAAA,EAAS,EAAE,MAAW,KAAA,OAAA;AAAA,kBACtB,MAAM,CAAG,EAAA,OAAO,aAAa,KAAK,CAAA,SAAA,EAAY,EAAE,MAAM,CAAA,CAAA;AAAA,kBACtD,UAAU,CAAK,CAAA,KAAA,cAAA,CAAe,CAAE,CAAA,MAAA,CAAO,SAAS,KAAK,CAAA;AAAA,kBACrD,KAAM,EAAA;AAAA;AAAA;AACR;AAAA,WAEJ;AAAA;AAEJ;AACF;AACF,GACF;AAEJ;;;;"}