@backstage-community/plugin-rbac 1.32.4 → 1.33.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextField } from '@material-ui/core';
+import TextField from '@mui/material/TextField';
 
 const RoleDetailsForm = ({
   name,

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

@@ -1 +1 @@
-{"version":3,"file":"RoleDetailsForm.esm.js","sources":["../../../src/components/CreateRole/RoleDetailsForm.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { TextField } from '@material-ui/core';\n\ntype RoleDetailsFormProps = {\n  name: string;\n  description?: string;\n  nameError?: string;\n  handleBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  handleChange: React.ChangeEventHandler<\n    HTMLTextAreaElement | HTMLInputElement\n  >;\n};\n\nexport const RoleDetailsForm = ({\n  name,\n  description,\n  nameError,\n  handleBlur,\n  handleChange,\n}: RoleDetailsFormProps) => {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '20px',\n      }}\n    >\n      <TextField\n        required\n        label=\"Name\"\n        variant=\"outlined\"\n        id=\"role-name\"\n        data-testid=\"role-name\"\n        aria-labelledby=\"name\"\n        helperText={nameError ?? 'Enter name of the role'}\n        value={name}\n        name=\"name\"\n        onChange={handleChange}\n        onBlur={handleBlur}\n        error={!!nameError}\n      />\n      <TextField\n        label=\"Description\"\n        variant=\"outlined\"\n        helperText=\"Enter a brief description about the role (The purpose of the role)\"\n        value={description}\n        data-testid=\"role-description\"\n        id=\"role-description\"\n        name=\"description\"\n        aria-labelledby=\"description\"\n        onChange={handleChange}\n        onBlur={handleBlur}\n        multiline\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AA6BO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,IAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,GAAK,EAAA;AAAA;AACP,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,QAAQ,EAAA,IAAA;AAAA,QACR,KAAM,EAAA,MAAA;AAAA,QACN,OAAQ,EAAA,UAAA;AAAA,QACR,EAAG,EAAA,WAAA;AAAA,QACH,aAAY,EAAA,WAAA;AAAA,QACZ,iBAAgB,EAAA,MAAA;AAAA,QAChB,YAAY,SAAa,IAAA,wBAAA;AAAA,QACzB,KAAO,EAAA,IAAA;AAAA,QACP,IAAK,EAAA,MAAA;AAAA,QACL,QAAU,EAAA,YAAA;AAAA,QACV,MAAQ,EAAA,UAAA;AAAA,QACR,KAAA,EAAO,CAAC,CAAC;AAAA;AAAA,KACX;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,aAAA;AAAA,QACN,OAAQ,EAAA,UAAA;AAAA,QACR,UAAW,EAAA,oEAAA;AAAA,QACX,KAAO,EAAA,WAAA;AAAA,QACP,aAAY,EAAA,kBAAA;AAAA,QACZ,EAAG,EAAA,kBAAA;AAAA,QACH,IAAK,EAAA,aAAA;AAAA,QACL,iBAAgB,EAAA,aAAA;AAAA,QAChB,QAAU,EAAA,YAAA;AAAA,QACV,MAAQ,EAAA,UAAA;AAAA,QACR,SAAS,EAAA;AAAA;AAAA;AACX,GACF;AAEJ;;;;"}
+{"version":3,"file":"RoleDetailsForm.esm.js","sources":["../../../src/components/CreateRole/RoleDetailsForm.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport TextField from '@mui/material/TextField';\n\ntype RoleDetailsFormProps = {\n  name: string;\n  description?: string;\n  nameError?: string;\n  handleBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  handleChange: React.ChangeEventHandler<\n    HTMLTextAreaElement | HTMLInputElement\n  >;\n};\n\nexport const RoleDetailsForm = ({\n  name,\n  description,\n  nameError,\n  handleBlur,\n  handleChange,\n}: RoleDetailsFormProps) => {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '20px',\n      }}\n    >\n      <TextField\n        required\n        label=\"Name\"\n        variant=\"outlined\"\n        id=\"role-name\"\n        data-testid=\"role-name\"\n        aria-labelledby=\"name\"\n        helperText={nameError ?? 'Enter name of the role'}\n        value={name}\n        name=\"name\"\n        onChange={handleChange}\n        onBlur={handleBlur}\n        error={!!nameError}\n      />\n      <TextField\n        label=\"Description\"\n        variant=\"outlined\"\n        helperText=\"Enter a brief description about the role (The purpose of the role)\"\n        value={description}\n        data-testid=\"role-description\"\n        id=\"role-description\"\n        name=\"description\"\n        aria-labelledby=\"description\"\n        onChange={handleChange}\n        onBlur={handleBlur}\n        multiline\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AA6BO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,IAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,GAAK,EAAA;AAAA;AACP,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,QAAQ,EAAA,IAAA;AAAA,QACR,KAAM,EAAA,MAAA;AAAA,QACN,OAAQ,EAAA,UAAA;AAAA,QACR,EAAG,EAAA,WAAA;AAAA,QACH,aAAY,EAAA,WAAA;AAAA,QACZ,iBAAgB,EAAA,MAAA;AAAA,QAChB,YAAY,SAAa,IAAA,wBAAA;AAAA,QACzB,KAAO,EAAA,IAAA;AAAA,QACP,IAAK,EAAA,MAAA;AAAA,QACL,QAAU,EAAA,YAAA;AAAA,QACV,MAAQ,EAAA,UAAA;AAAA,QACR,KAAA,EAAO,CAAC,CAAC;AAAA;AAAA,KACX;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,aAAA;AAAA,QACN,OAAQ,EAAA,UAAA;AAAA,QACR,UAAW,EAAA,oEAAA;AAAA,QACX,KAAO,EAAA,WAAA;AAAA,QACP,aAAY,EAAA,kBAAA;AAAA,QACZ,EAAG,EAAA,kBAAA;AAAA,QACH,IAAK,EAAA,aAAA;AAAA,QACL,iBAAgB,EAAA,aAAA;AAAA,QAChB,QAAU,EAAA,YAAA;AAAA,QACV,MAAQ,EAAA,UAAA;AAAA,QACR,SAAS,EAAA;AAAA;AAAA;AACX,GACF;AAEJ;;;;"}

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

@@ -3,8 +3,14 @@ import { useNavigate } from 'react-router-dom';
 import { parseEntityRef } from '@backstage/catalog-model';
 import { SimpleStepper, SimpleStepperStep } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
-import { Card, CardHeader, Divider, CardContent, Box, Paper, Button } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardHeader from '@mui/material/CardHeader';
+import Divider from '@mui/material/Divider';
+import Paper from '@mui/material/Paper';
 import { useFormik } from 'formik';
 import { rbacApiRef } from '../../api/RBACBackendClient.esm.js';
 import { validationSchema, getRoleData, getPermissionPoliciesData, getNewConditionalPolicies, getRemovedConditionalPoliciesIds, getUpdatedConditionalPolicies, getConditionalPermissionPoliciesData } from '../../utils/create-role-utils.esm.js';

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

@@ -1 +1 @@
-{"version":3,"file":"RoleForm.esm.js","sources":["../../../src/components/CreateRole/RoleForm.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 { useNavigate } from 'react-router-dom';\n\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { SimpleStepper, SimpleStepperStep } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nimport {\n  Box,\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Divider,\n  Paper,\n} from '@material-ui/core';\nimport { Alert } from '@material-ui/lab';\nimport { FormikErrors, FormikHelpers, useFormik } from 'formik';\n\nimport { rbacApiRef } from '../../api/RBACBackendClient';\nimport { MemberEntity, PermissionsData, RoleError } from '../../types';\nimport {\n  getConditionalPermissionPoliciesData,\n  getNewConditionalPolicies,\n  getPermissionPoliciesData,\n  getRemovedConditionalPoliciesIds,\n  getRoleData,\n  getUpdatedConditionalPolicies,\n  validationSchema,\n} from '../../utils/create-role-utils';\nimport { isSamePermissionPolicy, onlyInLeft } from '../../utils/rbac-utils';\nimport {\n  createConditions,\n  createPermissions,\n  modifyConditions,\n  removeConditions,\n  removePermissions,\n} from '../../utils/role-form-utils';\nimport { AddedMembersTable } from './AddedMembersTable';\nimport { AddMembersForm } from './AddMembersForm';\nimport { PermissionPoliciesForm } from './PermissionPoliciesForm';\nimport { ReviewStep } from './ReviewStep';\nimport { RoleDetailsForm } from './RoleDetailsForm';\nimport { RoleFormValues } from './types';\n\ntype RoleFormProps = {\n  membersData: { members: MemberEntity[]; loading: boolean; error: Error };\n  titles: {\n    formTitle: string;\n    nameAndDescriptionTitle: string;\n    usersAndGroupsTitle: string;\n    permissionPoliciesTitle: string;\n  };\n  submitLabel?: string;\n  roleName?: string;\n  step?: number;\n  initialValues: RoleFormValues;\n};\n\nexport const RoleForm = ({\n  roleName,\n  step,\n  titles,\n  membersData,\n  submitLabel,\n  initialValues,\n}: RoleFormProps) => {\n  const [activeStep, setActiveStep] = React.useState<number>(step || 0);\n  const navigate = useNavigate();\n  const rbacApi = useApi(rbacApiRef);\n\n  const navigateTo = (rName?: string, action?: string) => {\n    const currentRoleName = rName || roleName;\n    const stateProp =\n      currentRoleName && action\n        ? {\n            state: {\n              toastMessage: `Role ${currentRoleName} ${action} successfully`,\n            },\n          }\n        : undefined;\n    if (step && currentRoleName) {\n      const { kind, namespace, name } = parseEntityRef(currentRoleName);\n      navigate(`../roles/${kind}/${namespace}/${name}`, stateProp);\n    } else {\n      navigate('..', stateProp);\n    }\n  };\n\n  const updateRole = async (\n    name: string,\n    values: RoleFormValues,\n    formikHelpers: FormikHelpers<RoleFormValues>,\n  ) => {\n    try {\n      const newData = getRoleData(values);\n      const newName = newData.name;\n      const newPermissionsData = getPermissionPoliciesData(values);\n      const newConditions = getNewConditionalPolicies(values);\n      const deleteConditions = getRemovedConditionalPoliciesIds(\n        values,\n        initialValues,\n      );\n      const updateConditions = getUpdatedConditionalPolicies(\n        values,\n        initialValues,\n      );\n\n      const oldData = getRoleData(initialValues);\n      const res = await rbacApi.updateRole(oldData, newData);\n      if ((res as RoleError).error) {\n        throw new Error(\n          `${'Unable to edit the role. '}${(res as RoleError).error.message}`,\n        );\n      } else {\n        const oldPermissionsData = getPermissionPoliciesData(initialValues);\n        const newPermissions = onlyInLeft(\n          newPermissionsData,\n          oldPermissionsData,\n          isSamePermissionPolicy,\n        );\n        const deletePermissions = onlyInLeft(\n          oldPermissionsData,\n          newPermissionsData,\n          isSamePermissionPolicy,\n        );\n\n        await removePermissions(name, deletePermissions, rbacApi);\n        await createPermissions(newPermissions, rbacApi);\n\n        await removeConditions(deleteConditions, rbacApi);\n        await modifyConditions(updateConditions, rbacApi);\n        await createConditions(newConditions, rbacApi);\n\n        navigateTo(newName, 'updated');\n      }\n    } catch (e) {\n      formikHelpers.setStatus({ submitError: e });\n    }\n  };\n\n  const newRole = async (\n    values: RoleFormValues,\n    formikHelpers: FormikHelpers<RoleFormValues>,\n  ) => {\n    try {\n      const newData = getRoleData(values);\n      const newPermissionsData = getPermissionPoliciesData(values);\n      const newConditionalPermissionPoliciesData =\n        getConditionalPermissionPoliciesData(values);\n\n      const res = await rbacApi.createRole(newData);\n      if ((res as RoleError).error) {\n        throw new Error(\n          `${'Unable to create role. '}${(res as RoleError).error.message}`,\n        );\n      }\n\n      await createPermissions(\n        newPermissionsData,\n        rbacApi,\n        'Role was created successfully but unable to add permission policies to the role.',\n      );\n\n      await createConditions(\n        newConditionalPermissionPoliciesData,\n        rbacApi,\n        'Role created successfully but unable to add conditions to the role.',\n      );\n\n      navigateTo(newData.name, 'created');\n    } catch (e) {\n      formikHelpers.setStatus({ submitError: e });\n    }\n  };\n\n  const formik = useFormik<RoleFormValues>({\n    enableReinitialize: true,\n    initialValues,\n    validationSchema: validationSchema,\n    onSubmit: async (\n      values: RoleFormValues,\n      formikHelpers: FormikHelpers<RoleFormValues>,\n    ) => {\n      if (roleName) {\n        updateRole(roleName, values, formikHelpers);\n      } else {\n        newRole(values, formikHelpers);\n      }\n    },\n  });\n\n  const validateStepField = (fieldName: string) => {\n    switch (fieldName) {\n      case 'name': {\n        formik.validateField(fieldName);\n        return formik.errors.name;\n      }\n      case 'selectedMembers': {\n        formik.validateField(fieldName);\n        return formik.errors.selectedMembers;\n      }\n      case 'permissionPoliciesRows': {\n        formik.values.permissionPoliciesRows.forEach((_pp, index) => {\n          formik.validateField(`permissionPoliciesRows[${index}].plugin`);\n          formik.validateField(`permissionPoliciesRows[${index}].permission`);\n        });\n        return formik.errors.permissionPoliciesRows;\n      }\n      default:\n        return undefined;\n    }\n  };\n\n  const handleNext = (fieldName?: string) => {\n    const error = fieldName && validateStepField(fieldName);\n    if (!fieldName || !error) {\n      formik.setErrors({});\n      const stepNum = Math.min(activeStep + 1, 3);\n      setActiveStep(stepNum);\n    }\n  };\n\n  const canNextPermissionPoliciesStep = () => {\n    return (\n      formik.values.permissionPoliciesRows.filter(pp => !!pp.plugin).length ===\n        formik.values.permissionPoliciesRows.length &&\n      (!formik.errors.permissionPoliciesRows ||\n        (\n          formik.errors.permissionPoliciesRows as unknown as FormikErrors<\n            PermissionsData[]\n          >[]\n        )?.filter(err => !!err)?.length === 0)\n    );\n  };\n\n  const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0));\n  const handleCancel = () => {\n    navigateTo();\n  };\n\n  const handleReset = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    setActiveStep(0);\n    formik.handleReset(e);\n  };\n\n  return (\n    <Card style={{ overflow: 'auto' }}>\n      <CardHeader title={titles.formTitle} />\n      <Divider />\n      <CardContent\n        component=\"form\"\n        onSubmit={formik.handleSubmit}\n        style={{ position: 'relative' }}\n      >\n        <SimpleStepper activeStep={activeStep}>\n          <SimpleStepperStep\n            title={titles.nameAndDescriptionTitle}\n            actions={{\n              showBack: false,\n              showNext: true,\n              nextText: 'Next',\n              canNext: () => !!formik.values.name && !formik.errors.name,\n              onNext: () => handleNext('name'),\n            }}\n          >\n            <RoleDetailsForm\n              name={formik.values.name}\n              description={formik.values.description}\n              handleBlur={formik.handleBlur}\n              handleChange={formik.handleChange}\n              nameError={formik.errors.name}\n            />\n          </SimpleStepperStep>\n          <SimpleStepperStep\n            title={titles.usersAndGroupsTitle}\n            actions={{\n              showNext: true,\n              nextText: 'Next',\n              canNext: () =>\n                formik.values.selectedMembers?.length > 0 &&\n                !formik.errors.selectedMembers,\n              onNext: () => handleNext('selectedMembers'),\n              showBack: true,\n              backText: 'Back',\n              onBack: handleBack,\n            }}\n          >\n            <Box>\n              <AddMembersForm\n                selectedMembers={formik.values.selectedMembers}\n                selectedMembersError={formik.errors.selectedMembers as string}\n                setFieldValue={formik.setFieldValue}\n                membersData={membersData}\n              />\n              <br />\n              <AddedMembersTable\n                selectedMembers={formik.values.selectedMembers}\n                setFieldValue={formik.setFieldValue}\n              />\n            </Box>\n          </SimpleStepperStep>\n          <SimpleStepperStep\n            title={titles.permissionPoliciesTitle}\n            actions={{\n              showNext: true,\n              nextText: 'Next',\n              canNext: () => canNextPermissionPoliciesStep(),\n              onNext: () => handleNext('permissionPoliciesRows'),\n              showBack: true,\n              backText: 'Back',\n              onBack: handleBack,\n            }}\n          >\n            <PermissionPoliciesForm\n              permissionPoliciesRows={formik.values.permissionPoliciesRows}\n              permissionPoliciesRowsError={\n                formik.errors\n                  .permissionPoliciesRows as FormikErrors<PermissionsData>[]\n              }\n              setFieldValue={formik.setFieldValue}\n              setFieldError={formik.setFieldError}\n              handleBlur={formik.handleBlur}\n            />\n          </SimpleStepperStep>\n          <SimpleStepperStep title=\"\" end>\n            <Paper square elevation={0}>\n              <ReviewStep values={formik.values} isEditing={!!roleName} />\n              <br />\n              <Button onClick={handleBack}>Back</Button>\n              <Button onClick={e => handleReset(e)}>Reset</Button>\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                type=\"submit\"\n                disabled={\n                  !!formik.errors.name ||\n                  !!formik.errors.selectedMembers ||\n                  !formik.dirty\n                }\n              >\n                {submitLabel || 'Create'}\n              </Button>\n            </Paper>\n          </SimpleStepperStep>\n        </SimpleStepper>\n        {formik.status?.submitError && (\n          <Box style={{ paddingBottom: '16px' }}>\n            <Alert severity=\"error\">{`${formik.status.submitError}`}</Alert>\n          </Box>\n        )}\n        <Button\n          style={{ position: 'absolute', right: '0', bottom: '0' }}\n          onClick={handleCancel}\n          color=\"primary\"\n        >\n          Cancel\n        </Button>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA0EO,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAqB,KAAA;AACnB,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,IAAI,KAAM,CAAA,QAAA,CAAiB,QAAQ,CAAC,CAAA;AACpE,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AAEjC,EAAM,MAAA,UAAA,GAAa,CAAC,KAAA,EAAgB,MAAoB,KAAA;AACtD,IAAA,MAAM,kBAAkB,KAAS,IAAA,QAAA;AACjC,IAAM,MAAA,SAAA,GACJ,mBAAmB,MACf,GAAA;AAAA,MACE,KAAO,EAAA;AAAA,QACL,YAAc,EAAA,CAAA,KAAA,EAAQ,eAAe,CAAA,CAAA,EAAI,MAAM,CAAA,aAAA;AAAA;AACjD,KAEF,GAAA,KAAA,CAAA;AACN,IAAA,IAAI,QAAQ,eAAiB,EAAA;AAC3B,MAAA,MAAM,EAAE,IAAM,EAAA,SAAA,EAAW,IAAK,EAAA,GAAI,eAAe,eAAe,CAAA;AAChE,MAAA,QAAA,CAAS,YAAY,IAAI,CAAA,CAAA,EAAI,SAAS,CAAI,CAAA,EAAA,IAAI,IAAI,SAAS,CAAA;AAAA,KACtD,MAAA;AACL,MAAA,QAAA,CAAS,MAAM,SAAS,CAAA;AAAA;AAC1B,GACF;AAEA,EAAA,MAAM,UAAa,GAAA,OACjB,IACA,EAAA,MAAA,EACA,aACG,KAAA;AACH,IAAI,IAAA;AACF,MAAM,MAAA,OAAA,GAAU,YAAY,MAAM,CAAA;AAClC,MAAA,MAAM,UAAU,OAAQ,CAAA,IAAA;AACxB,MAAM,MAAA,kBAAA,GAAqB,0BAA0B,MAAM,CAAA;AAC3D,MAAM,MAAA,aAAA,GAAgB,0BAA0B,MAAM,CAAA;AACtD,MAAA,MAAM,gBAAmB,GAAA,gCAAA;AAAA,QACvB,MAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,MAAM,gBAAmB,GAAA,6BAAA;AAAA,QACvB,MAAA;AAAA,QACA;AAAA,OACF;AAEA,MAAM,MAAA,OAAA,GAAU,YAAY,aAAa,CAAA;AACzC,MAAA,MAAM,GAAM,GAAA,MAAM,OAAQ,CAAA,UAAA,CAAW,SAAS,OAAO,CAAA;AACrD,MAAA,IAAK,IAAkB,KAAO,EAAA;AAC5B,QAAA,MAAM,IAAI,KAAA;AAAA,UACR,CAAG,EAAA,2BAA2B,CAAI,EAAA,GAAA,CAAkB,MAAM,OAAO,CAAA;AAAA,SACnE;AAAA,OACK,MAAA;AACL,QAAM,MAAA,kBAAA,GAAqB,0BAA0B,aAAa,CAAA;AAClE,QAAA,MAAM,cAAiB,GAAA,UAAA;AAAA,UACrB,kBAAA;AAAA,UACA,kBAAA;AAAA,UACA;AAAA,SACF;AACA,QAAA,MAAM,iBAAoB,GAAA,UAAA;AAAA,UACxB,kBAAA;AAAA,UACA,kBAAA;AAAA,UACA;AAAA,SACF;AAEA,QAAM,MAAA,iBAAA,CAAkB,IAAM,EAAA,iBAAA,EAAmB,OAAO,CAAA;AACxD,QAAM,MAAA,iBAAA,CAAkB,gBAAgB,OAAO,CAAA;AAE/C,QAAM,MAAA,gBAAA,CAAiB,kBAAkB,OAAO,CAAA;AAChD,QAAM,MAAA,gBAAA,CAAiB,kBAAkB,OAAO,CAAA;AAChD,QAAM,MAAA,gBAAA,CAAiB,eAAe,OAAO,CAAA;AAE7C,QAAA,UAAA,CAAW,SAAS,SAAS,CAAA;AAAA;AAC/B,aACO,CAAG,EAAA;AACV,MAAA,aAAA,CAAc,SAAU,CAAA,EAAE,WAAa,EAAA,CAAA,EAAG,CAAA;AAAA;AAC5C,GACF;AAEA,EAAM,MAAA,OAAA,GAAU,OACd,MAAA,EACA,aACG,KAAA;AACH,IAAI,IAAA;AACF,MAAM,MAAA,OAAA,GAAU,YAAY,MAAM,CAAA;AAClC,MAAM,MAAA,kBAAA,GAAqB,0BAA0B,MAAM,CAAA;AAC3D,MAAM,MAAA,oCAAA,GACJ,qCAAqC,MAAM,CAAA;AAE7C,MAAA,MAAM,GAAM,GAAA,MAAM,OAAQ,CAAA,UAAA,CAAW,OAAO,CAAA;AAC5C,MAAA,IAAK,IAAkB,KAAO,EAAA;AAC5B,QAAA,MAAM,IAAI,KAAA;AAAA,UACR,CAAG,EAAA,yBAAyB,CAAI,EAAA,GAAA,CAAkB,MAAM,OAAO,CAAA;AAAA,SACjE;AAAA;AAGF,MAAM,MAAA,iBAAA;AAAA,QACJ,kBAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA,OACF;AAEA,MAAM,MAAA,gBAAA;AAAA,QACJ,oCAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA,OACF;AAEA,MAAW,UAAA,CAAA,OAAA,CAAQ,MAAM,SAAS,CAAA;AAAA,aAC3B,CAAG,EAAA;AACV,MAAA,aAAA,CAAc,SAAU,CAAA,EAAE,WAAa,EAAA,CAAA,EAAG,CAAA;AAAA;AAC5C,GACF;AAEA,EAAA,MAAM,SAAS,SAA0B,CAAA;AAAA,IACvC,kBAAoB,EAAA,IAAA;AAAA,IACpB,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA,EAAU,OACR,MAAA,EACA,aACG,KAAA;AACH,MAAA,IAAI,QAAU,EAAA;AACZ,QAAW,UAAA,CAAA,QAAA,EAAU,QAAQ,aAAa,CAAA;AAAA,OACrC,MAAA;AACL,QAAA,OAAA,CAAQ,QAAQ,aAAa,CAAA;AAAA;AAC/B;AACF,GACD,CAAA;AAED,EAAM,MAAA,iBAAA,GAAoB,CAAC,SAAsB,KAAA;AAC/C,IAAA,QAAQ,SAAW;AAAA,MACjB,KAAK,MAAQ,EAAA;AACX,QAAA,MAAA,CAAO,cAAc,SAAS,CAAA;AAC9B,QAAA,OAAO,OAAO,MAAO,CAAA,IAAA;AAAA;AACvB,MACA,KAAK,iBAAmB,EAAA;AACtB,QAAA,MAAA,CAAO,cAAc,SAAS,CAAA;AAC9B,QAAA,OAAO,OAAO,MAAO,CAAA,eAAA;AAAA;AACvB,MACA,KAAK,wBAA0B,EAAA;AAC7B,QAAA,MAAA,CAAO,MAAO,CAAA,sBAAA,CAAuB,OAAQ,CAAA,CAAC,KAAK,KAAU,KAAA;AAC3D,UAAO,MAAA,CAAA,aAAA,CAAc,CAA0B,uBAAA,EAAA,KAAK,CAAU,QAAA,CAAA,CAAA;AAC9D,UAAO,MAAA,CAAA,aAAA,CAAc,CAA0B,uBAAA,EAAA,KAAK,CAAc,YAAA,CAAA,CAAA;AAAA,SACnE,CAAA;AACD,QAAA,OAAO,OAAO,MAAO,CAAA,sBAAA;AAAA;AACvB,MACA;AACE,QAAO,OAAA,KAAA,CAAA;AAAA;AACX,GACF;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,SAAuB,KAAA;AACzC,IAAM,MAAA,KAAA,GAAQ,SAAa,IAAA,iBAAA,CAAkB,SAAS,CAAA;AACtD,IAAI,IAAA,CAAC,SAAa,IAAA,CAAC,KAAO,EAAA;AACxB,MAAO,MAAA,CAAA,SAAA,CAAU,EAAE,CAAA;AACnB,MAAA,MAAM,OAAU,GAAA,IAAA,CAAK,GAAI,CAAA,UAAA,GAAa,GAAG,CAAC,CAAA;AAC1C,MAAA,aAAA,CAAc,OAAO,CAAA;AAAA;AACvB,GACF;AAEA,EAAA,MAAM,gCAAgC,MAAM;AAC1C,IAAA,OACE,MAAO,CAAA,MAAA,CAAO,sBAAuB,CAAA,MAAA,CAAO,CAAM,EAAA,KAAA,CAAC,CAAC,EAAA,CAAG,MAAM,CAAA,CAAE,MAC7D,KAAA,MAAA,CAAO,MAAO,CAAA,sBAAA,CAAuB,MACtC,KAAA,CAAC,MAAO,CAAA,MAAA,CAAO,sBAEZ,IAAA,MAAA,CAAO,MAAO,CAAA,sBAAA,EAGb,MAAO,CAAA,CAAA,GAAA,KAAO,CAAC,CAAC,GAAG,CAAA,EAAG,MAAW,KAAA,CAAA,CAAA;AAAA,GAE1C;AAEA,EAAM,MAAA,UAAA,GAAa,MAAM,aAAc,CAAA,IAAA,CAAK,IAAI,UAAa,GAAA,CAAA,EAAG,CAAC,CAAC,CAAA;AAClE,EAAA,MAAM,eAAe,MAAM;AACzB,IAAW,UAAA,EAAA;AAAA,GACb;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,CAAuD,KAAA;AAC1E,IAAA,aAAA,CAAc,CAAC,CAAA;AACf,IAAA,MAAA,CAAO,YAAY,CAAC,CAAA;AAAA,GACtB;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,KAAO,EAAA,EAAE,UAAU,MAAO,EAAA,EAAA,kBAC7B,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAO,MAAO,CAAA,SAAA,EAAW,CACrC,kBAAA,KAAA,CAAA,aAAA,CAAC,aAAQ,CACT,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,MAAA;AAAA,MACV,UAAU,MAAO,CAAA,YAAA;AAAA,MACjB,KAAA,EAAO,EAAE,QAAA,EAAU,UAAW;AAAA,KAAA;AAAA,oBAE9B,KAAA,CAAA,aAAA,CAAC,iBAAc,UACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,OAAO,MAAO,CAAA,uBAAA;AAAA,QACd,OAAS,EAAA;AAAA,UACP,QAAU,EAAA,KAAA;AAAA,UACV,QAAU,EAAA,IAAA;AAAA,UACV,QAAU,EAAA,MAAA;AAAA,UACV,OAAA,EAAS,MAAM,CAAC,CAAC,OAAO,MAAO,CAAA,IAAA,IAAQ,CAAC,MAAA,CAAO,MAAO,CAAA,IAAA;AAAA,UACtD,MAAA,EAAQ,MAAM,UAAA,CAAW,MAAM;AAAA;AACjC,OAAA;AAAA,sBAEA,KAAA,CAAA,aAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAM,OAAO,MAAO,CAAA,IAAA;AAAA,UACpB,WAAA,EAAa,OAAO,MAAO,CAAA,WAAA;AAAA,UAC3B,YAAY,MAAO,CAAA,UAAA;AAAA,UACnB,cAAc,MAAO,CAAA,YAAA;AAAA,UACrB,SAAA,EAAW,OAAO,MAAO,CAAA;AAAA;AAAA;AAC3B,KAEF,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,OAAO,MAAO,CAAA,mBAAA;AAAA,QACd,OAAS,EAAA;AAAA,UACP,QAAU,EAAA,IAAA;AAAA,UACV,QAAU,EAAA,MAAA;AAAA,UACV,OAAA,EAAS,MACP,MAAO,CAAA,MAAA,CAAO,iBAAiB,MAAS,GAAA,CAAA,IACxC,CAAC,MAAA,CAAO,MAAO,CAAA,eAAA;AAAA,UACjB,MAAA,EAAQ,MAAM,UAAA,CAAW,iBAAiB,CAAA;AAAA,UAC1C,QAAU,EAAA,IAAA;AAAA,UACV,QAAU,EAAA,MAAA;AAAA,UACV,MAAQ,EAAA;AAAA;AACV,OAAA;AAAA,0CAEC,GACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,eAAA,EAAiB,OAAO,MAAO,CAAA,eAAA;AAAA,UAC/B,oBAAA,EAAsB,OAAO,MAAO,CAAA,eAAA;AAAA,UACpC,eAAe,MAAO,CAAA,aAAA;AAAA,UACtB;AAAA;AAAA,OACF,kBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAG,CACJ,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,eAAA,EAAiB,OAAO,MAAO,CAAA,eAAA;AAAA,UAC/B,eAAe,MAAO,CAAA;AAAA;AAAA,OAE1B;AAAA,KAEF,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,OAAO,MAAO,CAAA,uBAAA;AAAA,QACd,OAAS,EAAA;AAAA,UACP,QAAU,EAAA,IAAA;AAAA,UACV,QAAU,EAAA,MAAA;AAAA,UACV,OAAA,EAAS,MAAM,6BAA8B,EAAA;AAAA,UAC7C,MAAA,EAAQ,MAAM,UAAA,CAAW,wBAAwB,CAAA;AAAA,UACjD,QAAU,EAAA,IAAA;AAAA,UACV,QAAU,EAAA,MAAA;AAAA,UACV,MAAQ,EAAA;AAAA;AACV,OAAA;AAAA,sBAEA,KAAA,CAAA,aAAA;AAAA,QAAC,sBAAA;AAAA,QAAA;AAAA,UACC,sBAAA,EAAwB,OAAO,MAAO,CAAA,sBAAA;AAAA,UACtC,2BAAA,EACE,OAAO,MACJ,CAAA,sBAAA;AAAA,UAEL,eAAe,MAAO,CAAA,aAAA;AAAA,UACtB,eAAe,MAAO,CAAA,aAAA;AAAA,UACtB,YAAY,MAAO,CAAA;AAAA;AAAA;AACrB,uBAED,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,EAAkB,OAAM,EAAG,EAAA,GAAA,EAAG,wBAC5B,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,MAAM,EAAA,IAAA,EAAC,WAAW,CACvB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,MAAQ,EAAA,MAAA,CAAO,QAAQ,SAAW,EAAA,CAAC,CAAC,QAAA,EAAU,mBACzD,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAG,mBACH,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,SAAS,UAAY,EAAA,EAAA,MAAI,CACjC,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAO,OAAS,EAAA,CAAA,CAAA,KAAK,YAAY,CAAC,CAAA,EAAA,EAAG,OAAK,CAC3C,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACR,KAAM,EAAA,SAAA;AAAA,QACN,IAAK,EAAA,QAAA;AAAA,QACL,QACE,EAAA,CAAC,CAAC,MAAA,CAAO,MAAO,CAAA,IAAA,IAChB,CAAC,CAAC,MAAO,CAAA,MAAA,CAAO,eAChB,IAAA,CAAC,MAAO,CAAA;AAAA,OAAA;AAAA,MAGT,WAAe,IAAA;AAAA,KAEpB,CACF,CACF,CAAA;AAAA,IACC,OAAO,MAAQ,EAAA,WAAA,wCACb,GAAI,EAAA,EAAA,KAAA,EAAO,EAAE,aAAe,EAAA,MAAA,sBAC1B,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,UAAS,OAAS,EAAA,EAAA,CAAA,EAAG,OAAO,MAAO,CAAA,WAAW,EAAG,CAC1D,CAAA;AAAA,oBAEF,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,QAAA,EAAU,YAAY,KAAO,EAAA,GAAA,EAAK,QAAQ,GAAI,EAAA;AAAA,QACvD,OAAS,EAAA,YAAA;AAAA,QACT,KAAM,EAAA;AAAA,OAAA;AAAA,MACP;AAAA;AAED,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"RoleForm.esm.js","sources":["../../../src/components/CreateRole/RoleForm.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 { useNavigate } from 'react-router-dom';\n\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { SimpleStepper, SimpleStepperStep } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport CardHeader from '@mui/material/CardHeader';\nimport Divider from '@mui/material/Divider';\nimport Paper from '@mui/material/Paper';\nimport { FormikErrors, FormikHelpers, useFormik } from 'formik';\n\nimport { rbacApiRef } from '../../api/RBACBackendClient';\nimport { MemberEntity, PermissionsData, RoleError } from '../../types';\nimport {\n  getConditionalPermissionPoliciesData,\n  getNewConditionalPolicies,\n  getPermissionPoliciesData,\n  getRemovedConditionalPoliciesIds,\n  getRoleData,\n  getUpdatedConditionalPolicies,\n  validationSchema,\n} from '../../utils/create-role-utils';\nimport { isSamePermissionPolicy, onlyInLeft } from '../../utils/rbac-utils';\nimport {\n  createConditions,\n  createPermissions,\n  modifyConditions,\n  removeConditions,\n  removePermissions,\n} from '../../utils/role-form-utils';\nimport { AddedMembersTable } from './AddedMembersTable';\nimport { AddMembersForm } from './AddMembersForm';\nimport { PermissionPoliciesForm } from './PermissionPoliciesForm';\nimport { ReviewStep } from './ReviewStep';\nimport { RoleDetailsForm } from './RoleDetailsForm';\nimport { RoleFormValues } from './types';\n\ntype RoleFormProps = {\n  membersData: { members: MemberEntity[]; loading: boolean; error: Error };\n  titles: {\n    formTitle: string;\n    nameAndDescriptionTitle: string;\n    usersAndGroupsTitle: string;\n    permissionPoliciesTitle: string;\n  };\n  submitLabel?: string;\n  roleName?: string;\n  step?: number;\n  initialValues: RoleFormValues;\n};\n\nexport const RoleForm = ({\n  roleName,\n  step,\n  titles,\n  membersData,\n  submitLabel,\n  initialValues,\n}: RoleFormProps) => {\n  const [activeStep, setActiveStep] = React.useState<number>(step || 0);\n  const navigate = useNavigate();\n  const rbacApi = useApi(rbacApiRef);\n\n  const navigateTo = (rName?: string, action?: string) => {\n    const currentRoleName = rName || roleName;\n    const stateProp =\n      currentRoleName && action\n        ? {\n            state: {\n              toastMessage: `Role ${currentRoleName} ${action} successfully`,\n            },\n          }\n        : undefined;\n    if (step && currentRoleName) {\n      const { kind, namespace, name } = parseEntityRef(currentRoleName);\n      navigate(`../roles/${kind}/${namespace}/${name}`, stateProp);\n    } else {\n      navigate('..', stateProp);\n    }\n  };\n\n  const updateRole = async (\n    name: string,\n    values: RoleFormValues,\n    formikHelpers: FormikHelpers<RoleFormValues>,\n  ) => {\n    try {\n      const newData = getRoleData(values);\n      const newName = newData.name;\n      const newPermissionsData = getPermissionPoliciesData(values);\n      const newConditions = getNewConditionalPolicies(values);\n      const deleteConditions = getRemovedConditionalPoliciesIds(\n        values,\n        initialValues,\n      );\n      const updateConditions = getUpdatedConditionalPolicies(\n        values,\n        initialValues,\n      );\n\n      const oldData = getRoleData(initialValues);\n      const res = await rbacApi.updateRole(oldData, newData);\n      if ((res as RoleError).error) {\n        throw new Error(\n          `${'Unable to edit the role. '}${(res as RoleError).error.message}`,\n        );\n      } else {\n        const oldPermissionsData = getPermissionPoliciesData(initialValues);\n        const newPermissions = onlyInLeft(\n          newPermissionsData,\n          oldPermissionsData,\n          isSamePermissionPolicy,\n        );\n        const deletePermissions = onlyInLeft(\n          oldPermissionsData,\n          newPermissionsData,\n          isSamePermissionPolicy,\n        );\n\n        await removePermissions(name, deletePermissions, rbacApi);\n        await createPermissions(newPermissions, rbacApi);\n\n        await removeConditions(deleteConditions, rbacApi);\n        await modifyConditions(updateConditions, rbacApi);\n        await createConditions(newConditions, rbacApi);\n\n        navigateTo(newName, 'updated');\n      }\n    } catch (e) {\n      formikHelpers.setStatus({ submitError: e });\n    }\n  };\n\n  const newRole = async (\n    values: RoleFormValues,\n    formikHelpers: FormikHelpers<RoleFormValues>,\n  ) => {\n    try {\n      const newData = getRoleData(values);\n      const newPermissionsData = getPermissionPoliciesData(values);\n      const newConditionalPermissionPoliciesData =\n        getConditionalPermissionPoliciesData(values);\n\n      const res = await rbacApi.createRole(newData);\n      if ((res as RoleError).error) {\n        throw new Error(\n          `${'Unable to create role. '}${(res as RoleError).error.message}`,\n        );\n      }\n\n      await createPermissions(\n        newPermissionsData,\n        rbacApi,\n        'Role was created successfully but unable to add permission policies to the role.',\n      );\n\n      await createConditions(\n        newConditionalPermissionPoliciesData,\n        rbacApi,\n        'Role created successfully but unable to add conditions to the role.',\n      );\n\n      navigateTo(newData.name, 'created');\n    } catch (e) {\n      formikHelpers.setStatus({ submitError: e });\n    }\n  };\n\n  const formik = useFormik<RoleFormValues>({\n    enableReinitialize: true,\n    initialValues,\n    validationSchema: validationSchema,\n    onSubmit: async (\n      values: RoleFormValues,\n      formikHelpers: FormikHelpers<RoleFormValues>,\n    ) => {\n      if (roleName) {\n        updateRole(roleName, values, formikHelpers);\n      } else {\n        newRole(values, formikHelpers);\n      }\n    },\n  });\n\n  const validateStepField = (fieldName: string) => {\n    switch (fieldName) {\n      case 'name': {\n        formik.validateField(fieldName);\n        return formik.errors.name;\n      }\n      case 'selectedMembers': {\n        formik.validateField(fieldName);\n        return formik.errors.selectedMembers;\n      }\n      case 'permissionPoliciesRows': {\n        formik.values.permissionPoliciesRows.forEach((_pp, index) => {\n          formik.validateField(`permissionPoliciesRows[${index}].plugin`);\n          formik.validateField(`permissionPoliciesRows[${index}].permission`);\n        });\n        return formik.errors.permissionPoliciesRows;\n      }\n      default:\n        return undefined;\n    }\n  };\n\n  const handleNext = (fieldName?: string) => {\n    const error = fieldName && validateStepField(fieldName);\n    if (!fieldName || !error) {\n      formik.setErrors({});\n      const stepNum = Math.min(activeStep + 1, 3);\n      setActiveStep(stepNum);\n    }\n  };\n\n  const canNextPermissionPoliciesStep = () => {\n    return (\n      formik.values.permissionPoliciesRows.filter(pp => !!pp.plugin).length ===\n        formik.values.permissionPoliciesRows.length &&\n      (!formik.errors.permissionPoliciesRows ||\n        (\n          formik.errors.permissionPoliciesRows as unknown as FormikErrors<\n            PermissionsData[]\n          >[]\n        )?.filter(err => !!err)?.length === 0)\n    );\n  };\n\n  const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0));\n  const handleCancel = () => {\n    navigateTo();\n  };\n\n  const handleReset = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    setActiveStep(0);\n    formik.handleReset(e);\n  };\n\n  return (\n    <Card style={{ overflow: 'auto' }}>\n      <CardHeader title={titles.formTitle} />\n      <Divider />\n      <CardContent\n        component=\"form\"\n        onSubmit={formik.handleSubmit}\n        style={{ position: 'relative' }}\n      >\n        <SimpleStepper activeStep={activeStep}>\n          <SimpleStepperStep\n            title={titles.nameAndDescriptionTitle}\n            actions={{\n              showBack: false,\n              showNext: true,\n              nextText: 'Next',\n              canNext: () => !!formik.values.name && !formik.errors.name,\n              onNext: () => handleNext('name'),\n            }}\n          >\n            <RoleDetailsForm\n              name={formik.values.name}\n              description={formik.values.description}\n              handleBlur={formik.handleBlur}\n              handleChange={formik.handleChange}\n              nameError={formik.errors.name}\n            />\n          </SimpleStepperStep>\n          <SimpleStepperStep\n            title={titles.usersAndGroupsTitle}\n            actions={{\n              showNext: true,\n              nextText: 'Next',\n              canNext: () =>\n                formik.values.selectedMembers?.length > 0 &&\n                !formik.errors.selectedMembers,\n              onNext: () => handleNext('selectedMembers'),\n              showBack: true,\n              backText: 'Back',\n              onBack: handleBack,\n            }}\n          >\n            <Box>\n              <AddMembersForm\n                selectedMembers={formik.values.selectedMembers}\n                selectedMembersError={formik.errors.selectedMembers as string}\n                setFieldValue={formik.setFieldValue}\n                membersData={membersData}\n              />\n              <br />\n              <AddedMembersTable\n                selectedMembers={formik.values.selectedMembers}\n                setFieldValue={formik.setFieldValue}\n              />\n            </Box>\n          </SimpleStepperStep>\n          <SimpleStepperStep\n            title={titles.permissionPoliciesTitle}\n            actions={{\n              showNext: true,\n              nextText: 'Next',\n              canNext: () => canNextPermissionPoliciesStep(),\n              onNext: () => handleNext('permissionPoliciesRows'),\n              showBack: true,\n              backText: 'Back',\n              onBack: handleBack,\n            }}\n          >\n            <PermissionPoliciesForm\n              permissionPoliciesRows={formik.values.permissionPoliciesRows}\n              permissionPoliciesRowsError={\n                formik.errors\n                  .permissionPoliciesRows as FormikErrors<PermissionsData>[]\n              }\n              setFieldValue={formik.setFieldValue}\n              setFieldError={formik.setFieldError}\n              handleBlur={formik.handleBlur}\n            />\n          </SimpleStepperStep>\n          <SimpleStepperStep title=\"\" end>\n            <Paper square elevation={0}>\n              <ReviewStep values={formik.values} isEditing={!!roleName} />\n              <br />\n              <Button onClick={handleBack}>Back</Button>\n              <Button onClick={e => handleReset(e)}>Reset</Button>\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                type=\"submit\"\n                disabled={\n                  !!formik.errors.name ||\n                  !!formik.errors.selectedMembers ||\n                  !formik.dirty\n                }\n              >\n                {submitLabel || 'Create'}\n              </Button>\n            </Paper>\n          </SimpleStepperStep>\n        </SimpleStepper>\n        {formik.status?.submitError && (\n          <Box style={{ paddingBottom: '16px' }}>\n            <Alert severity=\"error\">{`${formik.status.submitError}`}</Alert>\n          </Box>\n        )}\n        <Button\n          style={{ position: 'absolute', right: '0', bottom: '0' }}\n          onClick={handleCancel}\n          color=\"primary\"\n        >\n          Cancel\n        </Button>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/DownloadUserStatistics.esm.js

@@ -1,16 +1,9 @@
 import React from 'react';
 import { useApi } from '@backstage/core-plugin-api';
-import { makeStyles } from '@material-ui/core';
+import Button from '@mui/material/Button';
 import { licensedUsersApiRef } from '../api/LicensedUsersClient.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  linkStyle: {
-    color: theme.palette.link,
-    textDecoration: "underline"
-  }
-}));
 function DownloadCSVLink() {
-  const classes = useStyles();
   const licensedUsersClient = useApi(licensedUsersApiRef);
   const handleDownload = async (event) => {
     event.preventDefault();
@@ -37,11 +30,15 @@ function DownloadCSVLink() {
     }
   };
   return /* @__PURE__ */ React.createElement(
-    "a",
+    Button,
     {
       href: "/download-csv",
       onClick: handleDownload,
-      className: classes.linkStyle
+      sx: {
+        color: (theme) => theme.palette.link,
+        textDecoration: "underline"
+      },
+      size: "small"
     },
     "Download User List"
   );

package/dist/components/DownloadUserStatistics.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DownloadUserStatistics.esm.js","sources":["../../src/components/DownloadUserStatistics.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 { useApi } from '@backstage/core-plugin-api';\n\nimport { makeStyles } from '@material-ui/core';\n\nimport { licensedUsersApiRef } from '../api/LicensedUsersClient';\n\nconst useStyles = makeStyles(theme => ({\n  linkStyle: {\n    color: theme.palette.link,\n    textDecoration: 'underline',\n  },\n}));\n\nfunction DownloadCSVLink() {\n  const classes = useStyles();\n  const licensedUsersClient = useApi(licensedUsersApiRef);\n  const handleDownload = async (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    event.preventDefault(); // Prevent the default link behavior\n\n    try {\n      const response = await licensedUsersClient.downloadStatistics();\n\n      if (response.ok) {\n        // Get the CSV data as a string\n        const csvData = await response.text();\n\n        // Create a Blob from the CSV data\n        const blob = new Blob([csvData], { type: 'text/csv' });\n        const url = window.URL.createObjectURL(blob);\n\n        // Create a temporary link to trigger the download\n        const a = document.createElement('a');\n        a.href = url;\n        a.download = 'licensed-users.csv';\n        document.body.appendChild(a);\n        a.click();\n\n        // Clean up the temporary link and object URL\n        document.body.removeChild(a);\n        window.URL.revokeObjectURL(url);\n      } else {\n        throw new Error(\n          `Failed to download the csv file with list licensed users  ${response.statusText}`,\n        );\n      }\n    } catch (error) {\n      throw new Error(`Error during the download: ${error}`);\n    }\n  };\n\n  return (\n    <a\n      href=\"/download-csv\"\n      onClick={handleDownload}\n      className={classes.linkStyle}\n    >\n      Download User List\n    </a>\n  );\n}\n\nexport default DownloadCSVLink;\n"],"names":[],"mappings":";;;;;AAuBA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,SAAW,EAAA;AAAA,IACT,KAAA,EAAO,MAAM,OAAQ,CAAA,IAAA;AAAA,IACrB,cAAgB,EAAA;AAAA;AAEpB,CAAE,CAAA,CAAA;AAEF,SAAS,eAAkB,GAAA;AACzB,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,mBAAA,GAAsB,OAAO,mBAAmB,CAAA;AACtD,EAAM,MAAA,cAAA,GAAiB,OACrB,KACG,KAAA;AACH,IAAA,KAAA,CAAM,cAAe,EAAA;AAErB,IAAI,IAAA;AACF,MAAM,MAAA,QAAA,GAAW,MAAM,mBAAA,CAAoB,kBAAmB,EAAA;AAE9D,MAAA,IAAI,SAAS,EAAI,EAAA;AAEf,QAAM,MAAA,OAAA,GAAU,MAAM,QAAA,CAAS,IAAK,EAAA;AAGpC,QAAM,MAAA,IAAA,GAAO,IAAI,IAAK,CAAA,CAAC,OAAO,CAAG,EAAA,EAAE,IAAM,EAAA,UAAA,EAAY,CAAA;AACrD,QAAA,MAAM,GAAM,GAAA,MAAA,CAAO,GAAI,CAAA,eAAA,CAAgB,IAAI,CAAA;AAG3C,QAAM,MAAA,CAAA,GAAI,QAAS,CAAA,aAAA,CAAc,GAAG,CAAA;AACpC,QAAA,CAAA,CAAE,IAAO,GAAA,GAAA;AACT,QAAA,CAAA,CAAE,QAAW,GAAA,oBAAA;AACb,QAAS,QAAA,CAAA,IAAA,CAAK,YAAY,CAAC,CAAA;AAC3B,QAAA,CAAA,CAAE,KAAM,EAAA;AAGR,QAAS,QAAA,CAAA,IAAA,CAAK,YAAY,CAAC,CAAA;AAC3B,QAAO,MAAA,CAAA,GAAA,CAAI,gBAAgB,GAAG,CAAA;AAAA,OACzB,MAAA;AACL,QAAA,MAAM,IAAI,KAAA;AAAA,UACR,CAAA,0DAAA,EAA6D,SAAS,UAAU,CAAA;AAAA,SAClF;AAAA;AACF,aACO,KAAO,EAAA;AACd,MAAA,MAAM,IAAI,KAAA,CAAM,CAA8B,2BAAA,EAAA,KAAK,CAAE,CAAA,CAAA;AAAA;AACvD,GACF;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,eAAA;AAAA,MACL,OAAS,EAAA,cAAA;AAAA,MACT,WAAW,OAAQ,CAAA;AAAA,KAAA;AAAA,IACpB;AAAA,GAED;AAEJ;;;;"}
+{"version":3,"file":"DownloadUserStatistics.esm.js","sources":["../../src/components/DownloadUserStatistics.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 { useApi } from '@backstage/core-plugin-api';\n\nimport Button from '@mui/material/Button';\n\nimport { licensedUsersApiRef } from '../api/LicensedUsersClient';\n\nfunction DownloadCSVLink() {\n  const licensedUsersClient = useApi(licensedUsersApiRef);\n  const handleDownload = async (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    event.preventDefault(); // Prevent the default link behavior\n\n    try {\n      const response = await licensedUsersClient.downloadStatistics();\n\n      if (response.ok) {\n        // Get the CSV data as a string\n        const csvData = await response.text();\n\n        // Create a Blob from the CSV data\n        const blob = new Blob([csvData], { type: 'text/csv' });\n        const url = window.URL.createObjectURL(blob);\n\n        // Create a temporary link to trigger the download\n        const a = document.createElement('a');\n        a.href = url;\n        a.download = 'licensed-users.csv';\n        document.body.appendChild(a);\n        a.click();\n\n        // Clean up the temporary link and object URL\n        document.body.removeChild(a);\n        window.URL.revokeObjectURL(url);\n      } else {\n        throw new Error(\n          `Failed to download the csv file with list licensed users  ${response.statusText}`,\n        );\n      }\n    } catch (error) {\n      throw new Error(`Error during the download: ${error}`);\n    }\n  };\n\n  return (\n    <Button\n      href=\"/download-csv\"\n      onClick={handleDownload}\n      sx={{\n        color: theme => theme.palette.link,\n        textDecoration: 'underline',\n      }}\n      size=\"small\"\n    >\n      Download User List\n    </Button>\n  );\n}\n\nexport default DownloadCSVLink;\n"],"names":[],"mappings":";;;;;AAuBA,SAAS,eAAkB,GAAA;AACzB,EAAM,MAAA,mBAAA,GAAsB,OAAO,mBAAmB,CAAA;AACtD,EAAM,MAAA,cAAA,GAAiB,OACrB,KACG,KAAA;AACH,IAAA,KAAA,CAAM,cAAe,EAAA;AAErB,IAAI,IAAA;AACF,MAAM,MAAA,QAAA,GAAW,MAAM,mBAAA,CAAoB,kBAAmB,EAAA;AAE9D,MAAA,IAAI,SAAS,EAAI,EAAA;AAEf,QAAM,MAAA,OAAA,GAAU,MAAM,QAAA,CAAS,IAAK,EAAA;AAGpC,QAAM,MAAA,IAAA,GAAO,IAAI,IAAK,CAAA,CAAC,OAAO,CAAG,EAAA,EAAE,IAAM,EAAA,UAAA,EAAY,CAAA;AACrD,QAAA,MAAM,GAAM,GAAA,MAAA,CAAO,GAAI,CAAA,eAAA,CAAgB,IAAI,CAAA;AAG3C,QAAM,MAAA,CAAA,GAAI,QAAS,CAAA,aAAA,CAAc,GAAG,CAAA;AACpC,QAAA,CAAA,CAAE,IAAO,GAAA,GAAA;AACT,QAAA,CAAA,CAAE,QAAW,GAAA,oBAAA;AACb,QAAS,QAAA,CAAA,IAAA,CAAK,YAAY,CAAC,CAAA;AAC3B,QAAA,CAAA,CAAE,KAAM,EAAA;AAGR,QAAS,QAAA,CAAA,IAAA,CAAK,YAAY,CAAC,CAAA;AAC3B,QAAO,MAAA,CAAA,GAAA,CAAI,gBAAgB,GAAG,CAAA;AAAA,OACzB,MAAA;AACL,QAAA,MAAM,IAAI,KAAA;AAAA,UACR,CAAA,0DAAA,EAA6D,SAAS,UAAU,CAAA;AAAA,SAClF;AAAA;AACF,aACO,KAAO,EAAA;AACd,MAAA,MAAM,IAAI,KAAA,CAAM,CAA8B,2BAAA,EAAA,KAAK,CAAE,CAAA,CAAA;AAAA;AACvD,GACF;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,eAAA;AAAA,MACL,OAAS,EAAA,cAAA;AAAA,MACT,EAAI,EAAA;AAAA,QACF,KAAA,EAAO,CAAS,KAAA,KAAA,KAAA,CAAM,OAAQ,CAAA,IAAA;AAAA,QAC9B,cAAgB,EAAA;AAAA,OAClB;AAAA,MACA,IAAK,EAAA;AAAA,KAAA;AAAA,IACN;AAAA,GAED;AAEJ;;;;"}

package/dist/components/EditRole.esm.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { parseEntityRef } from '@backstage/catalog-model';
 import { Link } from '@backstage/core-components';
-import { Tooltip, Typography, IconButton } from '@material-ui/core';
-import EditIcon from '@material-ui/icons/Edit';
+import EditIcon from '@mui/icons-material/Edit';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 
 const EditRole = ({
   roleName,

package/dist/components/EditRole.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditRole.esm.js","sources":["../../src/components/EditRole.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 } from '@backstage/core-components';\n\nimport { IconButton, Tooltip, Typography } from '@material-ui/core';\nimport EditIcon from '@material-ui/icons/Edit';\n\ntype EditRoleProps = {\n  roleName: string;\n  disable: boolean;\n  tooltip?: string;\n  dataTestId: string;\n  to?: string;\n};\n\nconst EditRole = ({\n  roleName,\n  tooltip,\n  disable,\n  dataTestId,\n  to,\n}: EditRoleProps) => {\n  const { name, namespace, kind } = parseEntityRef(roleName);\n  return (\n    <Tooltip title={tooltip || ''}>\n      <Typography component=\"span\" data-testid={dataTestId}>\n        <IconButton\n          color=\"inherit\"\n          component={Link}\n          aria-label=\"Update\"\n          disabled={disable}\n          title={tooltip || 'Edit Role'}\n          to={to || `../role/${kind}/${namespace}/${name}`}\n        >\n          <EditIcon />\n        </IconButton>\n      </Typography>\n    </Tooltip>\n  );\n};\n\nexport default EditRole;\n"],"names":[],"mappings":";;;;;;AA+BA,MAAM,WAAW,CAAC;AAAA,EAChB,QAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAqB,KAAA;AACnB,EAAA,MAAM,EAAE,IAAM,EAAA,SAAA,EAAW,IAAK,EAAA,GAAI,eAAe,QAAQ,CAAA;AACzD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,KAAA,EAAO,OAAW,IAAA,EAAA,EAAA,sCACxB,UAAW,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,aAAA,EAAa,UACxC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,SAAW,EAAA,IAAA;AAAA,MACX,YAAW,EAAA,QAAA;AAAA,MACX,QAAU,EAAA,OAAA;AAAA,MACV,OAAO,OAAW,IAAA,WAAA;AAAA,MAClB,IAAI,EAAM,IAAA,CAAA,QAAA,EAAW,IAAI,CAAI,CAAA,EAAA,SAAS,IAAI,IAAI,CAAA;AAAA,KAAA;AAAA,wCAE7C,QAAS,EAAA,IAAA;AAAA,GAEd,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"EditRole.esm.js","sources":["../../src/components/EditRole.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 } from '@backstage/core-components';\n\nimport EditIcon from '@mui/icons-material/Edit';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\n\ntype EditRoleProps = {\n  roleName: string;\n  disable: boolean;\n  tooltip?: string;\n  dataTestId: string;\n  to?: string;\n};\n\nconst EditRole = ({\n  roleName,\n  tooltip,\n  disable,\n  dataTestId,\n  to,\n}: EditRoleProps) => {\n  const { name, namespace, kind } = parseEntityRef(roleName);\n  return (\n    <Tooltip title={tooltip || ''}>\n      <Typography component=\"span\" data-testid={dataTestId}>\n        <IconButton\n          color=\"inherit\"\n          component={Link}\n          aria-label=\"Update\"\n          disabled={disable}\n          title={tooltip || 'Edit Role'}\n          to={to || `../role/${kind}/${namespace}/${name}`}\n        >\n          <EditIcon />\n        </IconButton>\n      </Typography>\n    </Tooltip>\n  );\n};\n\nexport default EditRole;\n"],"names":[],"mappings":";;;;;;;;AAiCA,MAAM,WAAW,CAAC;AAAA,EAChB,QAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAqB,KAAA;AACnB,EAAA,MAAM,EAAE,IAAM,EAAA,SAAA,EAAW,IAAK,EAAA,GAAI,eAAe,QAAQ,CAAA;AACzD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,KAAA,EAAO,OAAW,IAAA,EAAA,EAAA,sCACxB,UAAW,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,aAAA,EAAa,UACxC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,SAAW,EAAA,IAAA;AAAA,MACX,YAAW,EAAA,QAAA;AAAA,MACX,QAAU,EAAA,OAAA;AAAA,MACV,OAAO,OAAW,IAAA,WAAA;AAAA,MAClB,IAAI,EAAM,IAAA,CAAA,QAAA,EAAW,IAAI,CAAI,CAAA,EAAA,SAAS,IAAI,IAAI,CAAA;AAAA,KAAA;AAAA,wCAE7C,QAAS,EAAA,IAAA;AAAA,GAEd,CACF,CAAA;AAEJ;;;;"}

package/dist/components/RoleOverview/AboutCard.esm.js

@@ -1,36 +1,20 @@
 import React from 'react';
 import { Progress, WarningPanel, MarkdownContent } from '@backstage/core-components';
 import { AboutField } from '@backstage/plugin-catalog';
-import { makeStyles, Card, CardHeader, CardContent, Grid } from '@material-ui/core';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardHeader from '@mui/material/CardHeader';
+import Grid from '@mui/material/Grid';
+import { makeStyles } from '@mui/styles';
 import { useRole } from '../../hooks/useRole.esm.js';
 
 const useStyles = makeStyles({
-  gridItemCard: {
-    display: "flex",
-    flexDirection: "column",
-    height: "calc(100% - 10px)",
-    // for pages without content header
-    marginBottom: "10px"
-  },
-  fullHeightCard: {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%"
-  },
-  gridItemCardContent: {
-    flex: 1
-  },
-  fullHeightCardContent: {
-    flex: 1
-  },
   text: {
     wordBreak: "break-word"
   }
 });
 const AboutCard = ({ roleName }) => {
   const classes = useStyles();
-  const cardClass = classes.gridItemCard;
-  const cardContentClass = classes.gridItemCardContent;
   const { role, roleError, loading } = useRole(roleName);
   if (loading) {
     return /* @__PURE__ */ React.createElement(Progress, null);
@@ -50,39 +34,61 @@ const AboutCard = ({ roleName }) => {
   } else {
     lastModified = "No information";
   }
-  return /* @__PURE__ */ React.createElement(Card, { className: cardClass }, /* @__PURE__ */ React.createElement(CardHeader, { title: "About" }), /* @__PURE__ */ React.createElement(CardContent, { className: cardContentClass }, roleError.name ? /* @__PURE__ */ React.createElement("div", { style: { paddingBottom: "16px" } }, /* @__PURE__ */ React.createElement(
-    WarningPanel,
+  return /* @__PURE__ */ React.createElement(
+    Card,
     {
-      message: roleError?.message,
-      title: "Something went wrong while fetching role",
-      severity: "error"
-    }
-  )) : /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(AboutField, { label: "Description", gridSizes: { xs: 4, sm: 8, lg: 4 } }, /* @__PURE__ */ React.createElement(
-    MarkdownContent,
-    {
-      className: classes.text,
-      content: role?.metadata?.description ?? "No description"
-    }
-  )), /* @__PURE__ */ React.createElement(AboutField, { label: "Modified By", gridSizes: { xs: 4, sm: 8, lg: 4 } }, /* @__PURE__ */ React.createElement(
-    MarkdownContent,
-    {
-      className: classes.text,
-      content: role?.metadata?.modifiedBy ?? "No information"
-    }
-  )), /* @__PURE__ */ React.createElement(
-    AboutField,
-    {
-      label: "Last Modified",
-      gridSizes: { xs: 4, sm: 8, lg: 4 }
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "calc(100% - 10px)",
+        // for pages without content header
+        marginBottom: "10px"
+      }
     },
+    /* @__PURE__ */ React.createElement(CardHeader, { title: "About" }),
     /* @__PURE__ */ React.createElement(
-      MarkdownContent,
+      CardContent,
       {
-        className: classes.text,
-        content: lastModified
-      }
+        sx: {
+          flex: 1,
+          padding: (theme) => theme.spacing(4)
+        }
+      },
+      roleError.name ? /* @__PURE__ */ React.createElement("div", { style: { paddingBottom: "16px" } }, /* @__PURE__ */ React.createElement(
+        WarningPanel,
+        {
+          message: roleError?.message,
+          title: "Something went wrong while fetching role",
+          severity: "error"
+        }
+      )) : /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(AboutField, { label: "Description", gridSizes: { xs: 4, sm: 8, lg: 4 } }, /* @__PURE__ */ React.createElement(
+        MarkdownContent,
+        {
+          className: classes.text,
+          content: role?.metadata?.description ?? "No description"
+        }
+      )), /* @__PURE__ */ React.createElement(AboutField, { label: "Modified By", gridSizes: { xs: 4, sm: 8, lg: 4 } }, /* @__PURE__ */ React.createElement(
+        MarkdownContent,
+        {
+          className: classes.text,
+          content: role?.metadata?.modifiedBy ?? "No information"
+        }
+      )), /* @__PURE__ */ React.createElement(
+        AboutField,
+        {
+          label: "Last Modified",
+          gridSizes: { xs: 4, sm: 8, lg: 4 }
+        },
+        /* @__PURE__ */ React.createElement(
+          MarkdownContent,
+          {
+            className: classes.text,
+            content: lastModified
+          }
+        )
+      ))
     )
-  ))));
+  );
 };
 
 export { AboutCard };

package/dist/components/RoleOverview/AboutCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AboutCard.esm.js","sources":["../../../src/components/RoleOverview/AboutCard.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 {\n  MarkdownContent,\n  Progress,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { AboutField } from '@backstage/plugin-catalog';\n\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  Grid,\n  makeStyles,\n} from '@material-ui/core';\n\nimport { useRole } from '../../hooks/useRole';\n\nconst useStyles = makeStyles({\n  gridItemCard: {\n    display: 'flex',\n    flexDirection: 'column',\n    height: 'calc(100% - 10px)', // for pages without content header\n    marginBottom: '10px',\n  },\n  fullHeightCard: {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n  },\n  gridItemCardContent: {\n    flex: 1,\n  },\n  fullHeightCardContent: {\n    flex: 1,\n  },\n  text: {\n    wordBreak: 'break-word',\n  },\n});\n\ntype AboutCardProps = {\n  roleName: string;\n};\n\nexport const AboutCard = ({ roleName }: AboutCardProps) => {\n  const classes = useStyles();\n  const cardClass = classes.gridItemCard;\n  const cardContentClass = classes.gridItemCardContent;\n\n  const { role, roleError, loading } = useRole(roleName);\n  if (loading) {\n    return <Progress />;\n  }\n\n  let lastModified = role?.metadata?.lastModified;\n  if (lastModified) {\n    const date = new Date(lastModified);\n    const time = date.toLocaleString('en-US', {\n      hour: '2-digit' as const,\n      minute: '2-digit' as const,\n      hour12: false,\n      timeZone: 'UTC',\n    });\n    lastModified = `${date.getUTCDate()} ${date.toLocaleString('default', {\n      month: 'short',\n    })} ${date.getUTCFullYear()}, ${time}`;\n  } else {\n    lastModified = 'No information';\n  }\n\n  return (\n    <Card className={cardClass}>\n      <CardHeader title=\"About\" />\n      <CardContent className={cardContentClass}>\n        {roleError.name ? (\n          <div style={{ paddingBottom: '16px' }}>\n            <WarningPanel\n              message={roleError?.message}\n              title=\"Something went wrong while fetching role\"\n              severity=\"error\"\n            />\n          </div>\n        ) : (\n          <Grid container>\n            <AboutField label=\"Description\" gridSizes={{ xs: 4, sm: 8, lg: 4 }}>\n              <MarkdownContent\n                className={classes.text}\n                content={role?.metadata?.description ?? 'No description'}\n              />\n            </AboutField>\n            <AboutField label=\"Modified By\" gridSizes={{ xs: 4, sm: 8, lg: 4 }}>\n              <MarkdownContent\n                className={classes.text}\n                content={role?.metadata?.modifiedBy ?? 'No information'}\n              />\n            </AboutField>\n            <AboutField\n              label=\"Last Modified\"\n              gridSizes={{ xs: 4, sm: 8, lg: 4 }}\n            >\n              <MarkdownContent\n                className={classes.text}\n                content={lastModified}\n              />\n            </AboutField>\n          </Grid>\n        )}\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AboutCard.esm.js","sources":["../../../src/components/RoleOverview/AboutCard.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 {\n  MarkdownContent,\n  Progress,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { AboutField } from '@backstage/plugin-catalog';\n\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport CardHeader from '@mui/material/CardHeader';\nimport Grid from '@mui/material/Grid';\nimport { makeStyles } from '@mui/styles';\n\nimport { useRole } from '../../hooks/useRole';\n\nconst useStyles = makeStyles({\n  text: {\n    wordBreak: 'break-word',\n  },\n});\n\ntype AboutCardProps = {\n  roleName: string;\n};\n\nexport const AboutCard = ({ roleName }: AboutCardProps) => {\n  const classes = useStyles();\n  const { role, roleError, loading } = useRole(roleName);\n  if (loading) {\n    return <Progress />;\n  }\n\n  let lastModified = role?.metadata?.lastModified;\n  if (lastModified) {\n    const date = new Date(lastModified);\n    const time = date.toLocaleString('en-US', {\n      hour: '2-digit' as const,\n      minute: '2-digit' as const,\n      hour12: false,\n      timeZone: 'UTC',\n    });\n    lastModified = `${date.getUTCDate()} ${date.toLocaleString('default', {\n      month: 'short',\n    })} ${date.getUTCFullYear()}, ${time}`;\n  } else {\n    lastModified = 'No information';\n  }\n\n  return (\n    <Card\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        height: 'calc(100% - 10px)', // for pages without content header\n        marginBottom: '10px',\n      }}\n    >\n      <CardHeader title=\"About\" />\n      <CardContent\n        sx={{\n          flex: 1,\n          padding: theme => theme.spacing(4),\n        }}\n      >\n        {roleError.name ? (\n          <div style={{ paddingBottom: '16px' }}>\n            <WarningPanel\n              message={roleError?.message}\n              title=\"Something went wrong while fetching role\"\n              severity=\"error\"\n            />\n          </div>\n        ) : (\n          <Grid container>\n            <AboutField label=\"Description\" gridSizes={{ xs: 4, sm: 8, lg: 4 }}>\n              <MarkdownContent\n                className={classes.text}\n                content={role?.metadata?.description ?? 'No description'}\n              />\n            </AboutField>\n            <AboutField label=\"Modified By\" gridSizes={{ xs: 4, sm: 8, lg: 4 }}>\n              <MarkdownContent\n                className={classes.text}\n                content={role?.metadata?.modifiedBy ?? 'No information'}\n              />\n            </AboutField>\n            <AboutField\n              label=\"Last Modified\"\n              gridSizes={{ xs: 4, sm: 8, lg: 4 }}\n            >\n              <MarkdownContent\n                className={classes.text}\n                content={lastModified}\n              />\n            </AboutField>\n          </Grid>\n        )}\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/RoleOverview/MembersCard.esm.js

@@ -2,20 +2,15 @@ import React from 'react';
 import { parseEntityRef } from '@backstage/catalog-model';
 import { WarningPanel, Table } from '@backstage/core-components';
 import { usePermission } from '@backstage/plugin-permission-react';
-import { makeStyles, Card, CardContent } from '@material-ui/core';
-import CachedIcon from '@material-ui/icons/Cached';
+import CachedIcon from '@mui/icons-material/Cached';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
 import { policyEntityUpdatePermission } from '@backstage-community/plugin-rbac-common';
 import { getMembers } from '../../utils/rbac-utils.esm.js';
 import EditRole from '../EditRole.esm.js';
 import { columns } from './MembersListColumns.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  empty: {
-    padding: theme.spacing(2),
-    display: "flex",
-    justifyContent: "center"
-  }
-}));
 const getRefreshIcon = () => /* @__PURE__ */ React.createElement(CachedIcon, null);
 const getEditIcon = (isAllowed, roleName) => {
   const { kind, name, namespace } = parseEntityRef(roleName);
@@ -36,7 +31,6 @@ const MembersCard = ({ roleName, membersInfo }) => {
     permission: policyEntityUpdatePermission,
     resourceRef: policyEntityUpdatePermission.resourceType
   });
-  const classes = useStyles();
   const actions = [
     {
       icon: getRefreshIcon,
@@ -78,7 +72,14 @@ const MembersCard = ({ roleName, membersInfo }) => {
       data: data ?? [],
       isLoading: loading,
       columns,
-      emptyContent: /* @__PURE__ */ React.createElement("div", { "data-testid": "members-table-empty", className: classes.empty }, "No records found")
+      emptyContent: /* @__PURE__ */ React.createElement(
+        Box,
+        {
+          "data-testid": "members-table-empty",
+          sx: { display: "flex", justifyContent: "center", p: 2 }
+        },
+        "No records found"
+      )
     }
   )));
 };

package/dist/components/RoleOverview/MembersCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MembersCard.esm.js","sources":["../../../src/components/RoleOverview/MembersCard.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 { Table, WarningPanel } from '@backstage/core-components';\nimport { usePermission } from '@backstage/plugin-permission-react';\n\nimport { Card, CardContent, makeStyles } from '@material-ui/core';\nimport CachedIcon from '@material-ui/icons/Cached';\n\nimport { policyEntityUpdatePermission } from '@backstage-community/plugin-rbac-common';\n\nimport { MembersInfo } from '../../hooks/useMembers';\nimport { MembersData } from '../../types';\nimport { getMembers } from '../../utils/rbac-utils';\nimport EditRole from '../EditRole';\nimport { columns } from './MembersListColumns';\n\ntype MembersCardProps = {\n  roleName: string;\n  membersInfo: MembersInfo;\n};\n\nconst useStyles = makeStyles(theme => ({\n  empty: {\n    padding: theme.spacing(2),\n    display: 'flex',\n    justifyContent: 'center',\n  },\n}));\n\nconst getRefreshIcon = () => <CachedIcon />;\nconst getEditIcon = (isAllowed: boolean, roleName: string) => {\n  const { kind, name, namespace } = parseEntityRef(roleName);\n\n  return (\n    <EditRole\n      dataTestId={isAllowed ? 'update-members' : 'disable-update-members'}\n      roleName={roleName}\n      disable={!isAllowed}\n      to={`../../role/${kind}/${namespace}/${name}?activeStep=${1}`}\n    />\n  );\n};\n\nexport const MembersCard = ({ roleName, membersInfo }: MembersCardProps) => {\n  const { data, loading, retry, error, canReadUsersAndGroups } = membersInfo;\n  const [members, setMembers] = React.useState<MembersData[]>();\n  const policyEntityPermissionResult = usePermission({\n    permission: policyEntityUpdatePermission,\n    resourceRef: policyEntityUpdatePermission.resourceType,\n  });\n\n  const classes = useStyles();\n  const actions = [\n    {\n      icon: getRefreshIcon,\n      tooltip: 'Refresh',\n      isFreeAction: true,\n      onClick: () => {\n        retry.roleRetry();\n        retry.membersRetry();\n      },\n    },\n    {\n      icon: () =>\n        getEditIcon(\n          policyEntityPermissionResult.allowed && canReadUsersAndGroups,\n          roleName,\n        ),\n      tooltip:\n        policyEntityPermissionResult.allowed && canReadUsersAndGroups\n          ? 'Edit'\n          : 'Unauthorized to edit',\n      isFreeAction: true,\n      onClick: () => {},\n    },\n  ];\n\n  const onSearchResultsChange = (searchResults: MembersData[]) => {\n    setMembers(searchResults);\n  };\n\n  return (\n    <Card>\n      <CardContent>\n        {!loading && error && (\n          <div style={{ paddingBottom: '16px' }}>\n            <WarningPanel\n              message={(error as Error)?.message || (error as Error)?.name}\n              title=\"Something went wrong while fetching the users and groups\"\n              severity=\"error\"\n            />\n          </div>\n        )}\n        <Table\n          title={\n            !loading && data?.length\n              ? `Users and groups (${getMembers(members || data)})`\n              : 'Users and groups'\n          }\n          actions={actions}\n          renderSummaryRow={summary => onSearchResultsChange(summary.data)}\n          options={{ padding: 'default', search: true, paging: true }}\n          data={data ?? []}\n          isLoading={loading}\n          columns={columns}\n          emptyContent={\n            <div data-testid=\"members-table-empty\" className={classes.empty}>\n              No records found\n            </div>\n          }\n        />\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MembersCard.esm.js","sources":["../../../src/components/RoleOverview/MembersCard.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 { Table, WarningPanel } from '@backstage/core-components';\nimport { usePermission } from '@backstage/plugin-permission-react';\n\nimport CachedIcon from '@mui/icons-material/Cached';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\n\nimport { policyEntityUpdatePermission } from '@backstage-community/plugin-rbac-common';\n\nimport { MembersInfo } from '../../hooks/useMembers';\nimport { MembersData } from '../../types';\nimport { getMembers } from '../../utils/rbac-utils';\nimport EditRole from '../EditRole';\nimport { columns } from './MembersListColumns';\n\ntype MembersCardProps = {\n  roleName: string;\n  membersInfo: MembersInfo;\n};\n\nconst getRefreshIcon = () => <CachedIcon />;\nconst getEditIcon = (isAllowed: boolean, roleName: string) => {\n  const { kind, name, namespace } = parseEntityRef(roleName);\n\n  return (\n    <EditRole\n      dataTestId={isAllowed ? 'update-members' : 'disable-update-members'}\n      roleName={roleName}\n      disable={!isAllowed}\n      to={`../../role/${kind}/${namespace}/${name}?activeStep=${1}`}\n    />\n  );\n};\n\nexport const MembersCard = ({ roleName, membersInfo }: MembersCardProps) => {\n  const { data, loading, retry, error, canReadUsersAndGroups } = membersInfo;\n  const [members, setMembers] = React.useState<MembersData[]>();\n  const policyEntityPermissionResult = usePermission({\n    permission: policyEntityUpdatePermission,\n    resourceRef: policyEntityUpdatePermission.resourceType,\n  });\n\n  const actions = [\n    {\n      icon: getRefreshIcon,\n      tooltip: 'Refresh',\n      isFreeAction: true,\n      onClick: () => {\n        retry.roleRetry();\n        retry.membersRetry();\n      },\n    },\n    {\n      icon: () =>\n        getEditIcon(\n          policyEntityPermissionResult.allowed && canReadUsersAndGroups,\n          roleName,\n        ),\n      tooltip:\n        policyEntityPermissionResult.allowed && canReadUsersAndGroups\n          ? 'Edit'\n          : 'Unauthorized to edit',\n      isFreeAction: true,\n      onClick: () => {},\n    },\n  ];\n\n  const onSearchResultsChange = (searchResults: MembersData[]) => {\n    setMembers(searchResults);\n  };\n\n  return (\n    <Card>\n      <CardContent>\n        {!loading && error && (\n          <div style={{ paddingBottom: '16px' }}>\n            <WarningPanel\n              message={(error as Error)?.message || (error as Error)?.name}\n              title=\"Something went wrong while fetching the users and groups\"\n              severity=\"error\"\n            />\n          </div>\n        )}\n        <Table\n          title={\n            !loading && data?.length\n              ? `Users and groups (${getMembers(members || data)})`\n              : 'Users and groups'\n          }\n          actions={actions}\n          renderSummaryRow={summary => onSearchResultsChange(summary.data)}\n          options={{ padding: 'default', search: true, paging: true }}\n          data={data ?? []}\n          isLoading={loading}\n          columns={columns}\n          emptyContent={\n            <Box\n              data-testid=\"members-table-empty\"\n              sx={{ display: 'flex', justifyContent: 'center', p: 2 }}\n            >\n              No records found\n            </Box>\n          }\n        />\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/RoleOverview/PermissionsCard.esm.js

@@ -2,20 +2,15 @@ import React from 'react';
 import { parseEntityRef } from '@backstage/catalog-model';
 import { WarningPanel, Table } from '@backstage/core-components';
 import { usePermission } from '@backstage/plugin-permission-react';
-import { makeStyles, Card, CardContent } from '@material-ui/core';
-import CachedIcon from '@material-ui/icons/Cached';
+import CachedIcon from '@mui/icons-material/Cached';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
 import { policyEntityUpdatePermission } from '@backstage-community/plugin-rbac-common';
 import { usePermissionPolicies } from '../../hooks/usePermissionPolicies.esm.js';
 import EditRole from '../EditRole.esm.js';
 import { columns } from './PermissionsListColumns.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  empty: {
-    padding: theme.spacing(2),
-    display: "flex",
-    justifyContent: "center"
-  }
-}));
 const getRefreshIcon = () => /* @__PURE__ */ React.createElement(CachedIcon, null);
 const getEditIcon = (isAllowed, roleName) => {
   const { kind, name, namespace } = parseEntityRef(roleName);
@@ -39,7 +34,6 @@ const PermissionsCard = ({
     permission: policyEntityUpdatePermission,
     resourceRef: policyEntityUpdatePermission.resourceType
   });
-  const classes = useStyles();
   const onSearchResultsChange = (searchResults) => {
     setPermissions(searchResults);
   };
@@ -90,7 +84,14 @@ const PermissionsCard = ({
       data,
       columns,
       isLoading: loading,
-      emptyContent: /* @__PURE__ */ React.createElement("div", { "data-testid": "permission-table-empty", className: classes.empty }, "No records found")
+      emptyContent: /* @__PURE__ */ React.createElement(
+        Box,
+        {
+          "data-testid": "permission-table-empty",
+          sx: { display: "flex", justifyContent: "center", p: 2 }
+        },
+        "No records found"
+      )
     }
   )));
 };

package/dist/components/RoleOverview/PermissionsCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PermissionsCard.esm.js","sources":["../../../src/components/RoleOverview/PermissionsCard.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 { Table, WarningPanel } from '@backstage/core-components';\nimport { usePermission } from '@backstage/plugin-permission-react';\n\nimport { Card, CardContent, makeStyles } from '@material-ui/core';\nimport CachedIcon from '@material-ui/icons/Cached';\n\nimport { policyEntityUpdatePermission } from '@backstage-community/plugin-rbac-common';\n\nimport { usePermissionPolicies } from '../../hooks/usePermissionPolicies';\nimport { PermissionsData } from '../../types';\nimport EditRole from '../EditRole';\nimport { columns } from './PermissionsListColumns';\n\nconst useStyles = makeStyles(theme => ({\n  empty: {\n    padding: theme.spacing(2),\n    display: 'flex',\n    justifyContent: 'center',\n  },\n}));\n\ntype PermissionsCardProps = {\n  entityReference: string;\n  canReadUsersAndGroups: boolean;\n};\n\nconst getRefreshIcon = () => <CachedIcon />;\nconst getEditIcon = (isAllowed: boolean, roleName: string) => {\n  const { kind, name, namespace } = parseEntityRef(roleName);\n\n  return (\n    <EditRole\n      dataTestId={isAllowed ? 'update-policies' : 'disable-update-policies'}\n      roleName={roleName}\n      disable={!isAllowed}\n      to={`../../role/${kind}/${namespace}/${name}?activeStep=${2}`}\n    />\n  );\n};\n\nexport const PermissionsCard = ({\n  entityReference,\n  canReadUsersAndGroups,\n}: PermissionsCardProps) => {\n  const { data, loading, retry, error } =\n    usePermissionPolicies(entityReference);\n  const [permissions, setPermissions] = React.useState<PermissionsData[]>();\n  const permissionResult = usePermission({\n    permission: policyEntityUpdatePermission,\n    resourceRef: policyEntityUpdatePermission.resourceType,\n  });\n  const classes = useStyles();\n\n  const onSearchResultsChange = (searchResults: PermissionsData[]) => {\n    setPermissions(searchResults);\n  };\n\n  let numberOfPolicies = 0;\n  (permissions || data)?.forEach(p => {\n    if (p.conditions) {\n      numberOfPolicies++;\n      return;\n    }\n    numberOfPolicies =\n      numberOfPolicies +\n      p.policies.filter(pol => pol.effect === 'allow').length;\n  });\n  const actions = [\n    {\n      icon: getRefreshIcon,\n      tooltip: 'Refresh',\n      isFreeAction: true,\n      onClick: () => {\n        retry.permissionPoliciesRetry();\n        retry.policiesRetry();\n        retry.conditionalPoliciesRetry();\n      },\n    },\n    {\n      icon: () =>\n        getEditIcon(\n          permissionResult.allowed && canReadUsersAndGroups,\n          entityReference,\n        ),\n      tooltip:\n        permissionResult.allowed && canReadUsersAndGroups\n          ? 'Edit'\n          : 'Unauthorized to edit',\n      isFreeAction: true,\n      onClick: () => {},\n    },\n  ];\n\n  return (\n    <Card>\n      <CardContent>\n        {error?.name && error.name !== 404 && (\n          <div style={{ paddingBottom: '16px' }}>\n            <WarningPanel\n              message={error?.message}\n              title=\"Something went wrong while fetching the permission policies\"\n              severity=\"error\"\n            />\n          </div>\n        )}\n        <Table\n          title={\n            !loading && data.length > 0\n              ? `Permission Policies (${numberOfPolicies})`\n              : 'Permission Policies'\n          }\n          actions={actions}\n          renderSummaryRow={summary => onSearchResultsChange(summary.data)}\n          options={{ padding: 'default', search: true, paging: true }}\n          data={data}\n          columns={columns}\n          isLoading={loading}\n          emptyContent={\n            <div data-testid=\"permission-table-empty\" className={classes.empty}>\n              No records found\n            </div>\n          }\n        />\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PermissionsCard.esm.js","sources":["../../../src/components/RoleOverview/PermissionsCard.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 { Table, WarningPanel } from '@backstage/core-components';\nimport { usePermission } from '@backstage/plugin-permission-react';\n\nimport CachedIcon from '@mui/icons-material/Cached';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\n\nimport { policyEntityUpdatePermission } from '@backstage-community/plugin-rbac-common';\n\nimport { usePermissionPolicies } from '../../hooks/usePermissionPolicies';\nimport { PermissionsData } from '../../types';\nimport EditRole from '../EditRole';\nimport { columns } from './PermissionsListColumns';\n\ntype PermissionsCardProps = {\n  entityReference: string;\n  canReadUsersAndGroups: boolean;\n};\n\nconst getRefreshIcon = () => <CachedIcon />;\nconst getEditIcon = (isAllowed: boolean, roleName: string) => {\n  const { kind, name, namespace } = parseEntityRef(roleName);\n\n  return (\n    <EditRole\n      dataTestId={isAllowed ? 'update-policies' : 'disable-update-policies'}\n      roleName={roleName}\n      disable={!isAllowed}\n      to={`../../role/${kind}/${namespace}/${name}?activeStep=${2}`}\n    />\n  );\n};\n\nexport const PermissionsCard = ({\n  entityReference,\n  canReadUsersAndGroups,\n}: PermissionsCardProps) => {\n  const { data, loading, retry, error } =\n    usePermissionPolicies(entityReference);\n  const [permissions, setPermissions] = React.useState<PermissionsData[]>();\n  const permissionResult = usePermission({\n    permission: policyEntityUpdatePermission,\n    resourceRef: policyEntityUpdatePermission.resourceType,\n  });\n\n  const onSearchResultsChange = (searchResults: PermissionsData[]) => {\n    setPermissions(searchResults);\n  };\n\n  let numberOfPolicies = 0;\n  (permissions || data)?.forEach(p => {\n    if (p.conditions) {\n      numberOfPolicies++;\n      return;\n    }\n    numberOfPolicies =\n      numberOfPolicies +\n      p.policies.filter(pol => pol.effect === 'allow').length;\n  });\n  const actions = [\n    {\n      icon: getRefreshIcon,\n      tooltip: 'Refresh',\n      isFreeAction: true,\n      onClick: () => {\n        retry.permissionPoliciesRetry();\n        retry.policiesRetry();\n        retry.conditionalPoliciesRetry();\n      },\n    },\n    {\n      icon: () =>\n        getEditIcon(\n          permissionResult.allowed && canReadUsersAndGroups,\n          entityReference,\n        ),\n      tooltip:\n        permissionResult.allowed && canReadUsersAndGroups\n          ? 'Edit'\n          : 'Unauthorized to edit',\n      isFreeAction: true,\n      onClick: () => {},\n    },\n  ];\n\n  return (\n    <Card>\n      <CardContent>\n        {error?.name && error.name !== 404 && (\n          <div style={{ paddingBottom: '16px' }}>\n            <WarningPanel\n              message={error?.message}\n              title=\"Something went wrong while fetching the permission policies\"\n              severity=\"error\"\n            />\n          </div>\n        )}\n        <Table\n          title={\n            !loading && data.length > 0\n              ? `Permission Policies (${numberOfPolicies})`\n              : 'Permission Policies'\n          }\n          actions={actions}\n          renderSummaryRow={summary => onSearchResultsChange(summary.data)}\n          options={{ padding: 'default', search: true, paging: true }}\n          data={data}\n          columns={columns}\n          isLoading={loading}\n          emptyContent={\n            <Box\n              data-testid=\"permission-table-empty\"\n              sx={{ display: 'flex', justifyContent: 'center', p: 2 }}\n            >\n              No records found\n            </Box>\n          }\n        />\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsCA,MAAM,cAAA,GAAiB,sBAAM,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,IAAA,CAAA;AACzC,MAAM,WAAA,GAAc,CAAC,SAAA,EAAoB,QAAqB,KAAA;AAC5D,EAAA,MAAM,EAAE,IAAM,EAAA,IAAA,EAAM,SAAU,EAAA,GAAI,eAAe,QAAQ,CAAA;AAEzD,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,UAAA,EAAY,YAAY,iBAAoB,GAAA,yBAAA;AAAA,MAC5C,QAAA;AAAA,MACA,SAAS,CAAC,SAAA;AAAA,MACV,EAAA,EAAI,cAAc,IAAI,CAAA,CAAA,EAAI,SAAS,CAAI,CAAA,EAAA,IAAI,eAAe,CAAC,CAAA;AAAA;AAAA,GAC7D;AAEJ,CAAA;AAEO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,eAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EAAA,MAAM,EAAE,IAAM,EAAA,OAAA,EAAS,OAAO,KAAM,EAAA,GAClC,sBAAsB,eAAe,CAAA;AACvC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,MAAM,QAA4B,EAAA;AACxE,EAAA,MAAM,mBAAmB,aAAc,CAAA;AAAA,IACrC,UAAY,EAAA,4BAAA;AAAA,IACZ,aAAa,4BAA6B,CAAA;AAAA,GAC3C,CAAA;AAED,EAAM,MAAA,qBAAA,GAAwB,CAAC,aAAqC,KAAA;AAClE,IAAA,cAAA,CAAe,aAAa,CAAA;AAAA,GAC9B;AAEA,EAAA,IAAI,gBAAmB,GAAA,CAAA;AACvB,EAAC,CAAA,WAAA,IAAe,IAAO,GAAA,OAAA,CAAQ,CAAK,CAAA,KAAA;AAClC,IAAA,IAAI,EAAE,UAAY,EAAA;AAChB,MAAA,gBAAA,EAAA;AACA,MAAA;AAAA;AAEF,IACE,gBAAA,GAAA,gBAAA,GACA,EAAE,QAAS,CAAA,MAAA,CAAO,SAAO,GAAI,CAAA,MAAA,KAAW,OAAO,CAAE,CAAA,MAAA;AAAA,GACpD,CAAA;AACD,EAAA,MAAM,OAAU,GAAA;AAAA,IACd;AAAA,MACE,IAAM,EAAA,cAAA;AAAA,MACN,OAAS,EAAA,SAAA;AAAA,MACT,YAAc,EAAA,IAAA;AAAA,MACd,SAAS,MAAM;AACb,QAAA,KAAA,CAAM,uBAAwB,EAAA;AAC9B,QAAA,KAAA,CAAM,aAAc,EAAA;AACpB,QAAA,KAAA,CAAM,wBAAyB,EAAA;AAAA;AACjC,KACF;AAAA,IACA;AAAA,MACE,MAAM,MACJ,WAAA;AAAA,QACE,iBAAiB,OAAW,IAAA,qBAAA;AAAA,QAC5B;AAAA,OACF;AAAA,MACF,OACE,EAAA,gBAAA,CAAiB,OAAW,IAAA,qBAAA,GACxB,MACA,GAAA,sBAAA;AAAA,MACN,YAAc,EAAA,IAAA;AAAA,MACd,SAAS,MAAM;AAAA;AAAC;AAClB,GACF;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,EACE,OAAO,IAAQ,IAAA,KAAA,CAAM,IAAS,KAAA,GAAA,wCAC5B,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,aAAA,EAAe,QAC3B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,SAAS,KAAO,EAAA,OAAA;AAAA,MAChB,KAAM,EAAA,6DAAA;AAAA,MACN,QAAS,EAAA;AAAA;AAAA,GAEb,CAEF,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EACE,CAAC,OAAW,IAAA,IAAA,CAAK,SAAS,CACtB,GAAA,CAAA,qBAAA,EAAwB,gBAAgB,CACxC,CAAA,CAAA,GAAA,qBAAA;AAAA,MAEN,OAAA;AAAA,MACA,gBAAkB,EAAA,CAAA,OAAA,KAAW,qBAAsB,CAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,MAC/D,SAAS,EAAE,OAAA,EAAS,WAAW,MAAQ,EAAA,IAAA,EAAM,QAAQ,IAAK,EAAA;AAAA,MAC1D,IAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAW,EAAA,OAAA;AAAA,MACX,YACE,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,aAAY,EAAA,wBAAA;AAAA,UACZ,IAAI,EAAE,OAAA,EAAS,QAAQ,cAAgB,EAAA,QAAA,EAAU,GAAG,CAAE;AAAA,SAAA;AAAA,QACvD;AAAA;AAED;AAAA,GAGN,CACF,CAAA;AAEJ;;;;"}

package/dist/components/RoleOverview/RoleOverviewPage.esm.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import { Page, Header, TabbedLayout } from '@backstage/core-components';
-import { Grid } from '@material-ui/core';
+import Grid from '@mui/material/Grid';
 import { useLocationToast } from '../../hooks/useLocationToast.esm.js';
 import { useMembers } from '../../hooks/useMembers.esm.js';
 import { SnackbarAlert } from '../SnackbarAlert.esm.js';