@backstage-community/plugin-rbac 1.43.0 → 1.45.0

package/dist/components/RolesList/DeleteRoleDialog.esm.js

@@ -13,10 +13,13 @@ import DialogTitle from '@mui/material/DialogTitle';
 import IconButton from '@mui/material/IconButton';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
+import { MarkdownContent } from '@backstage/core-components';
 import { rbacApiRef } from '../../api/RBACBackendClient.esm.js';
 import { getMembers } from '../../utils/rbac-utils.esm.js';
 import { removePermissions, removeConditions } from '../../utils/role-form-utils.esm.js';
 import { useToast } from '../ToastContext.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
+import { useLanguage } from '../../hooks/useLanguage.esm.js';
 
 const DeleteRoleDialog = ({
   open,
@@ -25,6 +28,8 @@ const DeleteRoleDialog = ({
   propOptions
 }) => {
   const { setToastMessage } = useToast();
+  const { t } = useTranslation();
+  const locale = useLanguage();
   const [deleteRoleValue, setDeleteRoleValue] = useState();
   const [disableDelete, setDisableDelete] = useState(false);
   const [error, setError] = useState("");
@@ -38,18 +43,18 @@ const DeleteRoleDialog = ({
         const allowedPolicies = policies.filter(
           (policy) => policy.effect !== "deny"
         );
-        await removePermissions(roleName, allowedPolicies, rbacApi);
+        await removePermissions(roleName, allowedPolicies, rbacApi, t);
       }
       if (Array.isArray(conditionalPolicies)) {
         const conditionalPoliciesIds = conditionalPolicies.map((cp) => cp.id);
-        await removeConditions(conditionalPoliciesIds, rbacApi);
+        await removeConditions(conditionalPoliciesIds, rbacApi, t);
       }
       const response = await rbacApi.deleteRole(roleName);
       if (response.status === 200 || response.status === 204) {
-        setToastMessage(`Role ${roleName} deleted successfully`);
+        setToastMessage(t("deleteDialog.successMessage", { roleName }));
         closeDialog();
       } else {
-        setError(`Unable to delete the role. ${response.statusText}`);
+        setError(`${t("errors.deleteRole")} ${response.statusText}`);
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : `${err}`);
@@ -65,12 +70,19 @@ const DeleteRoleDialog = ({
       setDisableDelete(true);
     }
   };
+  const content = t("deleteDialog.confirmation", {
+    roleName,
+    members: getMembers(propOptions.memberRefs, t).toLocaleLowerCase(
+      locale ?? "en"
+    ),
+    permissions: propOptions.permissions.toString()
+  });
   return /* @__PURE__ */ jsxs(Dialog, { maxWidth: "md", open, onClose: closeDialog, children: [
     /* @__PURE__ */ jsx(
       DialogTitle,
       {
         id: "delete-role",
-        title: "Delete Role",
+        title: t("deleteDialog.title"),
         sx: {
           marginBottom: "0 !important",
           backgroundColor: dialogBackgroundColor
@@ -100,7 +112,7 @@ const DeleteRoleDialog = ({
                   }
                 ),
                 " ",
-                "Delete this role?"
+                t("deleteDialog.question")
               ] }),
               /* @__PURE__ */ jsx(
                 IconButton,
@@ -122,34 +134,7 @@ const DeleteRoleDialog = ({
       }
     ),
     /* @__PURE__ */ jsxs(DialogContent, { sx: { backgroundColor: dialogBackgroundColor }, children: [
-      "Are you sure you want to delete the role",
-      " ",
-      /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontWeight: "bold" }, children: roleName }),
-      " ",
-      "?",
-      /* @__PURE__ */ jsx("br", {}),
-      /* @__PURE__ */ jsx("br", {}),
-      "Deleting this role is irreversible and will remove its functionality from the system. Proceed with caution.",
-      /* @__PURE__ */ jsx("br", {}),
-      /* @__PURE__ */ jsx("br", {}),
-      "The",
-      " ",
-      /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontWeight: "bold" }, children: `${getMembers(
-        propOptions.memberRefs
-      ).toLocaleLowerCase("en-US")}` }),
-      " ",
-      "associated with this role will lose access to all the",
-      " ",
-      /* @__PURE__ */ jsx(
-        Typography,
-        {
-          component: "span",
-          sx: { fontWeight: "bold" },
-          children: `${propOptions.permissions} permission policies`
-        }
-      ),
-      " ",
-      "specified in this role.",
+      /* @__PURE__ */ jsx(MarkdownContent, { content }),
       /* @__PURE__ */ jsx("br", {}),
       /* @__PURE__ */ jsx(
         TextField,
@@ -162,9 +147,9 @@ const DeleteRoleDialog = ({
           },
           required: true,
           variant: "outlined",
-          label: "Role name",
+          label: t("deleteDialog.roleNameLabel"),
           defaultValue: deleteRoleValue,
-          helperText: "Type the name of the role to confirm",
+          helperText: t("deleteDialog.roleNameHelper"),
           onChange: ({ target: { value } }) => onTextInput(value),
           onBlur: ({ target: { value } }) => onTextInput(value)
         }
@@ -189,10 +174,10 @@ const DeleteRoleDialog = ({
               style: disableDelete || !deleteRoleValue ? {} : { background: "red", color: "white" },
               onClick: deleteRole,
               disabled: disableDelete || !deleteRoleValue,
-              children: "Delete"
+              children: t("deleteDialog.deleteButton")
             }
           ),
-          /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: closeDialog, children: "Cancel" })
+          /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: closeDialog, children: t("deleteDialog.cancelButton") })
         ]
       }
     )

package/dist/components/RolesList/DeleteRoleDialog.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteRoleDialog.esm.js","sources":["../../../src/components/RolesList/DeleteRoleDialog.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 { useState } from 'react';\n\nimport { useApi } from '@backstage/core-plugin-api';\n\nimport CloseIcon from '@mui/icons-material/Close';\nimport ErrorIcon from '@mui/icons-material/Error';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport IconButton from '@mui/material/IconButton';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\n\nimport { RoleBasedPolicy } from '@backstage-community/plugin-rbac-common';\n\nimport { rbacApiRef } from '../../api/RBACBackendClient';\nimport { getMembers } from '../../utils/rbac-utils';\nimport {\n  removeConditions,\n  removePermissions,\n} from '../../utils/role-form-utils';\nimport { useToast } from '../ToastContext';\n\ntype DeleteRoleDialogProps = {\n  open: boolean;\n  closeDialog: () => void;\n  roleName: string;\n  propOptions: {\n    memberRefs: string[];\n    permissions: number;\n  };\n};\n\nconst DeleteRoleDialog = ({\n  open,\n  closeDialog,\n  roleName,\n  propOptions,\n}: DeleteRoleDialogProps) => {\n  const { setToastMessage } = useToast();\n  const [deleteRoleValue, setDeleteRoleValue] = useState<string>();\n  const [disableDelete, setDisableDelete] = useState(false);\n  const [error, setError] = useState<string>('');\n\n  const rbacApi = useApi(rbacApiRef);\n\n  const dialogBackgroundColor = (theme: { palette: { mode: string } }) =>\n    theme.palette.mode === 'dark' ? '#1b1d21' : '#fff';\n\n  const deleteRole = async () => {\n    try {\n      const policies = await rbacApi.getAssociatedPolicies(roleName);\n      const conditionalPolicies = await rbacApi.getRoleConditions(roleName);\n\n      if (Array.isArray(policies)) {\n        const allowedPolicies = policies.filter(\n          (policy: RoleBasedPolicy) => policy.effect !== 'deny',\n        );\n        await removePermissions(roleName, allowedPolicies, rbacApi);\n      }\n\n      if (Array.isArray(conditionalPolicies)) {\n        const conditionalPoliciesIds = conditionalPolicies.map(cp => cp.id);\n        await removeConditions(conditionalPoliciesIds, rbacApi);\n      }\n\n      const response = await rbacApi.deleteRole(roleName);\n      if (response.status === 200 || response.status === 204) {\n        setToastMessage(`Role ${roleName} deleted successfully`);\n        closeDialog();\n      } else {\n        setError(`Unable to delete the role. ${response.statusText}`);\n      }\n    } catch (err) {\n      setError(err instanceof Error ? err.message : `${err}`);\n    }\n  };\n\n  const onTextInput = (value: string) => {\n    setDeleteRoleValue(value);\n    if (value === '') {\n      setDisableDelete(true);\n    } else if (value === roleName) {\n      setDisableDelete(false);\n    } else {\n      setDisableDelete(true);\n    }\n  };\n\n  return (\n    <Dialog maxWidth=\"md\" open={open} onClose={closeDialog}>\n      <DialogTitle\n        id=\"delete-role\"\n        title=\"Delete Role\"\n        sx={{\n          marginBottom: '0 !important',\n          backgroundColor: dialogBackgroundColor,\n        }}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            gap: theme => theme.spacing(1),\n          }}\n        >\n          <Typography component=\"span\" sx={{ fontWeight: 'bold' }}>\n            <ErrorIcon\n              style={{\n                color: 'red',\n                alignContent: 'center',\n                marginTop: '7px',\n                marginRight: '5px',\n                marginBottom: '-3px',\n              }}\n              fontSize=\"small\"\n            />{' '}\n            Delete this role?\n          </Typography>\n\n          <IconButton\n            aria-label=\"close\"\n            sx={{\n              padding: '8px !important',\n              color: theme => theme.palette.grey[500],\n              borderRadius: '50%',\n              '&:hover': { borderRadius: '50%' },\n            }}\n            onClick={closeDialog}\n          >\n            <CloseIcon />\n          </IconButton>\n        </Box>\n      </DialogTitle>\n      <DialogContent sx={{ backgroundColor: dialogBackgroundColor }}>\n        Are you sure you want to delete the role{' '}\n        <Typography component=\"span\" sx={{ fontWeight: 'bold' }}>\n          {roleName}\n        </Typography>{' '}\n        ?\n        <br />\n        <br />\n        Deleting this role is irreversible and will remove its functionality\n        from the system. Proceed with caution.\n        <br />\n        <br />\n        The{' '}\n        <Typography component=\"span\" sx={{ fontWeight: 'bold' }}>{`${getMembers(\n          propOptions.memberRefs,\n        ).toLocaleLowerCase('en-US')}`}</Typography>{' '}\n        associated with this role will lose access to all the{' '}\n        <Typography\n          component=\"span\"\n          sx={{ fontWeight: 'bold' }}\n        >{`${propOptions.permissions} permission policies`}</Typography>{' '}\n        specified in this role.\n        <br />\n        <TextField\n          name=\"delete-role\"\n          data-testid=\"delete-role\"\n          sx={{\n            marginTop: '24px',\n            backgroundColor: `${dialogBackgroundColor} !important`,\n          }}\n          required\n          variant=\"outlined\"\n          label=\"Role name\"\n          defaultValue={deleteRoleValue}\n          helperText=\"Type the name of the role to confirm\"\n          onChange={({ target: { value } }) => onTextInput(value)}\n          onBlur={({ target: { value } }) => onTextInput(value)}\n        />\n      </DialogContent>\n      {error && (\n        <Box maxWidth=\"650px\" marginLeft=\"20px\">\n          <Alert severity=\"error\">{error}</Alert>\n        </Box>\n      )}\n      <DialogActions\n        sx={{\n          paddingLeft: '25px',\n          paddingBottom: '30px',\n          justifyContent: 'left',\n          paddingTop: '16px',\n          backgroundColor: dialogBackgroundColor,\n        }}\n      >\n        <Button\n          variant=\"contained\"\n          style={\n            disableDelete || !deleteRoleValue\n              ? {}\n              : { background: 'red', color: 'white' }\n          }\n          onClick={deleteRole}\n          disabled={disableDelete || !deleteRoleValue}\n        >\n          Delete\n        </Button>\n        <Button variant=\"outlined\" onClick={closeDialog}>\n          Cancel\n        </Button>\n      </DialogActions>\n    </Dialog>\n  );\n};\n\nexport default DeleteRoleDialog;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DeleteRoleDialog.esm.js","sources":["../../../src/components/RolesList/DeleteRoleDialog.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 { useState } from 'react';\n\nimport { useApi } from '@backstage/core-plugin-api';\n\nimport CloseIcon from '@mui/icons-material/Close';\nimport ErrorIcon from '@mui/icons-material/Error';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport IconButton from '@mui/material/IconButton';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport { MarkdownContent } from '@backstage/core-components';\n\nimport { RoleBasedPolicy } from '@backstage-community/plugin-rbac-common';\n\nimport { rbacApiRef } from '../../api/RBACBackendClient';\nimport { getMembers } from '../../utils/rbac-utils';\nimport {\n  removeConditions,\n  removePermissions,\n} from '../../utils/role-form-utils';\nimport { useToast } from '../ToastContext';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { useLanguage } from '../../hooks/useLanguage';\n\ntype DeleteRoleDialogProps = {\n  open: boolean;\n  closeDialog: () => void;\n  roleName: string;\n  propOptions: {\n    memberRefs: string[];\n    permissions: number;\n  };\n};\n\nconst DeleteRoleDialog = ({\n  open,\n  closeDialog,\n  roleName,\n  propOptions,\n}: DeleteRoleDialogProps) => {\n  const { setToastMessage } = useToast();\n  const { t } = useTranslation();\n  const locale = useLanguage();\n  const [deleteRoleValue, setDeleteRoleValue] = useState<string>();\n  const [disableDelete, setDisableDelete] = useState(false);\n  const [error, setError] = useState<string>('');\n\n  const rbacApi = useApi(rbacApiRef);\n\n  const dialogBackgroundColor = (theme: { palette: { mode: string } }) =>\n    theme.palette.mode === 'dark' ? '#1b1d21' : '#fff';\n\n  const deleteRole = async () => {\n    try {\n      const policies = await rbacApi.getAssociatedPolicies(roleName);\n      const conditionalPolicies = await rbacApi.getRoleConditions(roleName);\n\n      if (Array.isArray(policies)) {\n        const allowedPolicies = policies.filter(\n          (policy: RoleBasedPolicy) => policy.effect !== 'deny',\n        );\n        await removePermissions(roleName, allowedPolicies, rbacApi, t);\n      }\n\n      if (Array.isArray(conditionalPolicies)) {\n        const conditionalPoliciesIds = conditionalPolicies.map(cp => cp.id);\n        await removeConditions(conditionalPoliciesIds, rbacApi, t);\n      }\n\n      const response = await rbacApi.deleteRole(roleName);\n      if (response.status === 200 || response.status === 204) {\n        setToastMessage(t('deleteDialog.successMessage' as any, { roleName }));\n        closeDialog();\n      } else {\n        setError(`${t('errors.deleteRole')} ${response.statusText}`);\n      }\n    } catch (err) {\n      setError(err instanceof Error ? err.message : `${err}`);\n    }\n  };\n\n  const onTextInput = (value: string) => {\n    setDeleteRoleValue(value);\n    if (value === '') {\n      setDisableDelete(true);\n    } else if (value === roleName) {\n      setDisableDelete(false);\n    } else {\n      setDisableDelete(true);\n    }\n  };\n\n  const content = t('deleteDialog.confirmation' as any, {\n    roleName,\n    members: getMembers(propOptions.memberRefs, t).toLocaleLowerCase(\n      locale ?? 'en',\n    ),\n    permissions: propOptions.permissions.toString(),\n  });\n\n  return (\n    <Dialog maxWidth=\"md\" open={open} onClose={closeDialog}>\n      <DialogTitle\n        id=\"delete-role\"\n        title={t('deleteDialog.title')}\n        sx={{\n          marginBottom: '0 !important',\n          backgroundColor: dialogBackgroundColor,\n        }}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            gap: theme => theme.spacing(1),\n          }}\n        >\n          <Typography component=\"span\" sx={{ fontWeight: 'bold' }}>\n            <ErrorIcon\n              style={{\n                color: 'red',\n                alignContent: 'center',\n                marginTop: '7px',\n                marginRight: '5px',\n                marginBottom: '-3px',\n              }}\n              fontSize=\"small\"\n            />{' '}\n            {t('deleteDialog.question')}\n          </Typography>\n\n          <IconButton\n            aria-label=\"close\"\n            sx={{\n              padding: '8px !important',\n              color: theme => theme.palette.grey[500],\n              borderRadius: '50%',\n              '&:hover': { borderRadius: '50%' },\n            }}\n            onClick={closeDialog}\n          >\n            <CloseIcon />\n          </IconButton>\n        </Box>\n      </DialogTitle>\n      <DialogContent sx={{ backgroundColor: dialogBackgroundColor }}>\n        <MarkdownContent content={content} />\n        <br />\n        <TextField\n          name=\"delete-role\"\n          data-testid=\"delete-role\"\n          sx={{\n            marginTop: '24px',\n            backgroundColor: `${dialogBackgroundColor} !important`,\n          }}\n          required\n          variant=\"outlined\"\n          label={t('deleteDialog.roleNameLabel')}\n          defaultValue={deleteRoleValue}\n          helperText={t('deleteDialog.roleNameHelper')}\n          onChange={({ target: { value } }) => onTextInput(value)}\n          onBlur={({ target: { value } }) => onTextInput(value)}\n        />\n      </DialogContent>\n      {error && (\n        <Box maxWidth=\"650px\" marginLeft=\"20px\">\n          <Alert severity=\"error\">{error}</Alert>\n        </Box>\n      )}\n      <DialogActions\n        sx={{\n          paddingLeft: '25px',\n          paddingBottom: '30px',\n          justifyContent: 'left',\n          paddingTop: '16px',\n          backgroundColor: dialogBackgroundColor,\n        }}\n      >\n        <Button\n          variant=\"contained\"\n          style={\n            disableDelete || !deleteRoleValue\n              ? {}\n              : { background: 'red', color: 'white' }\n          }\n          onClick={deleteRole}\n          disabled={disableDelete || !deleteRoleValue}\n        >\n          {t('deleteDialog.deleteButton')}\n        </Button>\n        <Button variant=\"outlined\" onClick={closeDialog}>\n          {t('deleteDialog.cancelButton')}\n        </Button>\n      </DialogActions>\n    </Dialog>\n  );\n};\n\nexport default DeleteRoleDialog;\n"],"names":[],"mappings":"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"}

package/dist/components/RolesList/RolesList.esm.js

@@ -10,13 +10,17 @@ import DownloadCSVLink from '../DownloadUserStatistics.esm.js';
 import { SnackbarAlert } from '../SnackbarAlert.esm.js';
 import { useToast } from '../ToastContext.esm.js';
 import DeleteRoleDialog from './DeleteRoleDialog.esm.js';
-import { columns } from './RolesListColumns.esm.js';
+import { getColumns } from './RolesListColumns.esm.js';
 import { RolesListToolbar } from './RolesListToolbar.esm.js';
 import { useDeleteDialog } from '../DeleteDialogContext.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
+import { useLanguage } from '../../hooks/useLanguage.esm.js';
 
 const RolesList = () => {
   const { toastMessage, setToastMessage } = useToast();
   const { openDialog, setOpenDialog, deleteComponent } = useDeleteDialog();
+  const { t } = useTranslation();
+  const locale = useLanguage();
   useLocationToast(setToastMessage);
   const [searchText, setSearchText] = useState();
   const [page, setPage] = useState(0);
@@ -30,21 +34,21 @@ const RolesList = () => {
   const onAlertClose = () => {
     setToastMessage("");
   };
+  const columns = getColumns(t, locale);
   const filteredRoles = useMemo(
-    () => filterTableData({ data, columns, searchText }),
-    [data, searchText]
+    () => filterTableData({ data, columns, searchText, locale }),
+    [data, searchText, columns, locale]
   );
   const getErrorWarning = () => {
-    const errorTitleBase = "Something went wrong while fetching the";
     const errorWarningArr = [
-      { message: error?.rolesError, title: `${errorTitleBase} roles` },
+      { message: error?.rolesError, title: t("errors.fetchRoles") },
       {
         message: error?.policiesError,
-        title: `${errorTitleBase} permission policies`
+        title: t("errors.fetchPolicies")
       },
       {
         message: error?.roleConditionError,
-        title: `${errorTitleBase} role conditions`
+        title: t("errors.fetchConditions")
       }
     ];
     return errorWarningArr.find(({ message }) => message) || {
@@ -77,7 +81,9 @@ const RolesList = () => {
     /* @__PURE__ */ jsx(
       Table,
       {
-        title: !loading && data?.length ? `All roles (${filteredRoles.length})` : `All roles`,
+        title: !loading && data?.length ? t("table.titleWithCount", {
+          count: filteredRoles.length.toString()
+        }) : t("table.title"),
         options: { padding: "default", search: true, paging: true },
         data,
         isLoading: loading,
@@ -87,7 +93,7 @@ const RolesList = () => {
           {
             "data-testid": "roles-table-empty",
             sx: { display: "flex", justifyContent: "center", p: 2 },
-            children: "No records found"
+            children: t("table.emptyContent")
           }
         ),
         onSearchChange: setSearchText,
@@ -95,6 +101,10 @@ const RolesList = () => {
         onRowsPerPageChange: (newPageSize) => {
           setPageSize(newPageSize);
           setPage(0);
+        },
+        localization: {
+          toolbar: { searchPlaceholder: t("table.searchPlaceholder") },
+          pagination: { labelRowsSelect: t("table.labelRowsSelect") }
         }
       }
     ),

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

@@ -1 +1 @@
-{"version":3,"file":"RolesList.esm.js","sources":["../../../src/components/RolesList/RolesList.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 { useState, useMemo } from 'react';\n\nimport { Progress, Table, WarningPanel } from '@backstage/core-components';\n\nimport Box from '@mui/material/Box';\n\nimport { useCheckIfLicensePluginEnabled } from '../../hooks/useCheckIfLicensePluginEnabled';\nimport { useLocationToast } from '../../hooks/useLocationToast';\nimport { useRoles } from '../../hooks/useRoles';\nimport { filterTableData } from '../../utils/filter-table-data';\nimport DownloadCSVLink from '../DownloadUserStatistics';\nimport { SnackbarAlert } from '../SnackbarAlert';\nimport { useToast } from '../ToastContext';\nimport DeleteRoleDialog from './DeleteRoleDialog';\nimport { columns } from './RolesListColumns';\nimport { RolesListToolbar } from './RolesListToolbar';\nimport { useDeleteDialog } from '../DeleteDialogContext';\n\nexport const RolesList = () => {\n  const { toastMessage, setToastMessage } = useToast();\n  const { openDialog, setOpenDialog, deleteComponent } = useDeleteDialog();\n  useLocationToast(setToastMessage);\n  const [searchText, setSearchText] = useState<string>();\n  const [page, setPage] = useState(0);\n  const [pageSize, setPageSize] = useState(5);\n  const { loading, data, retry, createRoleAllowed, createRoleLoading, error } =\n    useRoles(page, pageSize);\n\n  const closeDialog = () => {\n    setOpenDialog(false);\n    retry.roleRetry();\n    retry.policiesRetry();\n  };\n\n  const onAlertClose = () => {\n    setToastMessage('');\n  };\n  const filteredRoles = useMemo(\n    () => filterTableData({ data, columns, searchText }),\n    [data, searchText],\n  );\n\n  const getErrorWarning = () => {\n    const errorTitleBase = 'Something went wrong while fetching the';\n    const errorWarningArr = [\n      { message: error?.rolesError, title: `${errorTitleBase} roles` },\n      {\n        message: error?.policiesError,\n        title: `${errorTitleBase} permission policies`,\n      },\n      {\n        message: error?.roleConditionError,\n        title: `${errorTitleBase} role conditions`,\n      },\n    ];\n\n    return (\n      errorWarningArr.find(({ message }) => message) || {\n        message: '',\n        title: '',\n      }\n    );\n  };\n\n  const errorWarning = getErrorWarning();\n\n  const isLicensePluginEnabled = useCheckIfLicensePluginEnabled();\n  if (isLicensePluginEnabled.loading) {\n    return <Progress />;\n  }\n\n  return (\n    <>\n      <SnackbarAlert toastMessage={toastMessage} onAlertClose={onAlertClose} />\n      <RolesListToolbar\n        createRoleAllowed={createRoleAllowed}\n        createRoleLoading={createRoleLoading}\n      />\n      {errorWarning.message && (\n        <div style={{ paddingBottom: '16px' }}>\n          <WarningPanel\n            message={errorWarning.message}\n            title={errorWarning.title}\n            severity=\"error\"\n          />\n        </div>\n      )}\n      <Table\n        title={\n          !loading && data?.length\n            ? `All roles (${filteredRoles.length})`\n            : `All roles`\n        }\n        options={{ padding: 'default', search: true, paging: true }}\n        data={data}\n        isLoading={loading}\n        columns={columns}\n        emptyContent={\n          <Box\n            data-testid=\"roles-table-empty\"\n            sx={{ display: 'flex', justifyContent: 'center', p: 2 }}\n          >\n            No records found\n          </Box>\n        }\n        onSearchChange={setSearchText}\n        onPageChange={setPage}\n        onRowsPerPageChange={newPageSize => {\n          setPageSize(newPageSize);\n          setPage(0);\n        }}\n      />\n      {isLicensePluginEnabled.isEnabled && <DownloadCSVLink />}\n      {openDialog && (\n        <DeleteRoleDialog\n          open={openDialog}\n          closeDialog={closeDialog}\n          roleName={deleteComponent.roleName}\n          propOptions={{\n            memberRefs:\n              data.find(d => d.name === deleteComponent.roleName)?.members ||\n              [],\n            permissions:\n              data.find(d => d.name === deleteComponent.roleName)\n                ?.permissions || 0,\n          }}\n        />\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RolesList.esm.js","sources":["../../../src/components/RolesList/RolesList.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 { useState, useMemo } from 'react';\n\nimport { Progress, Table, WarningPanel } from '@backstage/core-components';\n\nimport Box from '@mui/material/Box';\n\nimport { useCheckIfLicensePluginEnabled } from '../../hooks/useCheckIfLicensePluginEnabled';\nimport { useLocationToast } from '../../hooks/useLocationToast';\nimport { useRoles } from '../../hooks/useRoles';\nimport { filterTableData } from '../../utils/filter-table-data';\nimport DownloadCSVLink from '../DownloadUserStatistics';\nimport { SnackbarAlert } from '../SnackbarAlert';\nimport { useToast } from '../ToastContext';\nimport DeleteRoleDialog from './DeleteRoleDialog';\nimport { getColumns } from './RolesListColumns';\nimport { RolesListToolbar } from './RolesListToolbar';\nimport { useDeleteDialog } from '../DeleteDialogContext';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { useLanguage } from '../../hooks/useLanguage';\n\nexport const RolesList = () => {\n  const { toastMessage, setToastMessage } = useToast();\n  const { openDialog, setOpenDialog, deleteComponent } = useDeleteDialog();\n  const { t } = useTranslation();\n  const locale = useLanguage();\n\n  useLocationToast(setToastMessage);\n  const [searchText, setSearchText] = useState<string>();\n  const [page, setPage] = useState(0);\n  const [pageSize, setPageSize] = useState(5);\n  const { loading, data, retry, createRoleAllowed, createRoleLoading, error } =\n    useRoles(page, pageSize);\n\n  const closeDialog = () => {\n    setOpenDialog(false);\n    retry.roleRetry();\n    retry.policiesRetry();\n  };\n\n  const onAlertClose = () => {\n    setToastMessage('');\n  };\n  const columns = getColumns(t, locale);\n  const filteredRoles = useMemo(\n    () => filterTableData({ data, columns, searchText, locale }),\n    [data, searchText, columns, locale],\n  );\n\n  const getErrorWarning = () => {\n    const errorWarningArr = [\n      { message: error?.rolesError, title: t('errors.fetchRoles') },\n      {\n        message: error?.policiesError,\n        title: t('errors.fetchPolicies'),\n      },\n      {\n        message: error?.roleConditionError,\n        title: t('errors.fetchConditions'),\n      },\n    ];\n\n    return (\n      errorWarningArr.find(({ message }) => message) || {\n        message: '',\n        title: '',\n      }\n    );\n  };\n\n  const errorWarning = getErrorWarning();\n\n  const isLicensePluginEnabled = useCheckIfLicensePluginEnabled();\n  if (isLicensePluginEnabled.loading) {\n    return <Progress />;\n  }\n\n  return (\n    <>\n      <SnackbarAlert toastMessage={toastMessage} onAlertClose={onAlertClose} />\n      <RolesListToolbar\n        createRoleAllowed={createRoleAllowed}\n        createRoleLoading={createRoleLoading}\n      />\n      {errorWarning.message && (\n        <div style={{ paddingBottom: '16px' }}>\n          <WarningPanel\n            message={errorWarning.message}\n            title={errorWarning.title}\n            severity=\"error\"\n          />\n        </div>\n      )}\n      <Table\n        title={\n          !loading && data?.length\n            ? t('table.titleWithCount' as any, {\n                count: filteredRoles.length.toString(),\n              })\n            : t('table.title')\n        }\n        options={{ padding: 'default', search: true, paging: true }}\n        data={data}\n        isLoading={loading}\n        columns={columns}\n        emptyContent={\n          <Box\n            data-testid=\"roles-table-empty\"\n            sx={{ display: 'flex', justifyContent: 'center', p: 2 }}\n          >\n            {t('table.emptyContent')}\n          </Box>\n        }\n        onSearchChange={setSearchText}\n        onPageChange={setPage}\n        onRowsPerPageChange={newPageSize => {\n          setPageSize(newPageSize);\n          setPage(0);\n        }}\n        localization={{\n          toolbar: { searchPlaceholder: t('table.searchPlaceholder') },\n          pagination: { labelRowsSelect: t('table.labelRowsSelect') },\n        }}\n      />\n      {isLicensePluginEnabled.isEnabled && <DownloadCSVLink />}\n      {openDialog && (\n        <DeleteRoleDialog\n          open={openDialog}\n          closeDialog={closeDialog}\n          roleName={deleteComponent.roleName}\n          propOptions={{\n            memberRefs:\n              data.find(d => d.name === deleteComponent.roleName)?.members ||\n              [],\n            permissions:\n              data.find(d => d.name === deleteComponent.roleName)\n                ?.permissions || 0,\n          }}\n        />\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/RolesList/RolesListColumns.esm.js

@@ -7,70 +7,72 @@ import { getMembers } from '../../utils/rbac-utils.esm.js';
 import EditRole from '../EditRole.esm.js';
 import DeleteRole from './DeleteRole.esm.js';
 
-const columns = [
-  {
-    title: "Name",
-    field: "name",
-    type: "string",
-    render: (props) => {
-      const { kind, namespace, name } = parseEntityRef(props.name);
-      return /* @__PURE__ */ jsx(Link, { to: `roles/${kind}/${namespace}/${name}`, children: props.name });
-    }
-  },
-  {
-    title: "Users and groups",
-    field: "members",
-    type: "string",
-    align: "left",
-    render: (props) => getMembers(props.members),
-    customSort: (a, b) => {
-      if (a.members.length === 0) {
-        return -1;
+const getColumns = (t, locale) => {
+  return [
+    {
+      title: t("table.headers.name"),
+      field: "name",
+      type: "string",
+      render: (props) => {
+        const { kind, namespace, name } = parseEntityRef(props.name);
+        return /* @__PURE__ */ jsx(Link, { to: `roles/${kind}/${namespace}/${name}`, children: props.name });
       }
-      if (b.members.length === 0) {
-        return 1;
+    },
+    {
+      title: t("table.headers.usersAndGroups"),
+      field: "members",
+      type: "string",
+      align: "left",
+      render: (props) => getMembers(props.members, t),
+      customSort: (a, b) => {
+        if (a.members.length === 0) {
+          return -1;
+        }
+        if (b.members.length === 0) {
+          return 1;
+        }
+        if (a.members.length === b.members.length) {
+          return 0;
+        }
+        return a.members.length < b.members.length ? -1 : 1;
       }
-      if (a.members.length === b.members.length) {
-        return 0;
+    },
+    {
+      title: t("table.headers.accessiblePlugins"),
+      field: "accessiblePlugins",
+      type: "string",
+      align: "left",
+      render: (props) => {
+        const pls = props.accessiblePlugins.map(
+          (p) => p[0].toLocaleUpperCase(locale) + p.slice(1)
+        );
+        const plsTooltip = pls.join(", ");
+        const plsOverflowCount = pls.length > 2 ? `+ ${pls.length - 2}` : "";
+        return pls.length > 0 ? /* @__PURE__ */ jsx(Tooltip, { title: plsTooltip || "", placement: "top-start", children: /* @__PURE__ */ jsx(Typography, { children: pls.length === 1 ? `${pls[0]}` : `${pls[0]}, ${pls[1]} ${plsOverflowCount}` }) }) : "-";
       }
-      return a.members.length < b.members.length ? -1 : 1;
+    },
+    {
+      title: t("table.headers.actions"),
+      sorting: false,
+      render: (props) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          EditRole,
+          {
+            canEdit: props.actionsPermissionResults.edit.allowed,
+            roleName: props.name
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DeleteRole,
+          {
+            canEdit: props.actionsPermissionResults.edit.allowed,
+            roleName: props.name
+          }
+        )
+      ] })
     }
-  },
-  {
-    title: "Accessible plugins",
-    field: "accessiblePlugins",
-    type: "string",
-    align: "left",
-    render: (props) => {
-      const pls = props.accessiblePlugins.map(
-        (p) => p[0].toLocaleUpperCase("en-US") + p.slice(1)
-      );
-      const plsTooltip = pls.join(", ");
-      const plsOverflowCount = pls.length > 2 ? `+ ${pls.length - 2}` : "";
-      return pls.length > 0 ? /* @__PURE__ */ jsx(Tooltip, { title: plsTooltip || "", placement: "top-start", children: /* @__PURE__ */ jsx(Typography, { children: pls.length === 1 ? `${pls[0]}` : `${pls[0]}, ${pls[1]} ${plsOverflowCount}` }) }) : "-";
-    }
-  },
-  {
-    title: "Actions",
-    sorting: false,
-    render: (props) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        EditRole,
-        {
-          canEdit: props.actionsPermissionResults.edit.allowed,
-          roleName: props.name
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        DeleteRole,
-        {
-          canEdit: props.actionsPermissionResults.edit.allowed,
-          roleName: props.name
-        }
-      )
-    ] })
-  }
-];
+  ];
+};
 
-export { columns };
+export { getColumns };
 //# sourceMappingURL=RolesListColumns.esm.js.map

package/dist/components/RolesList/RolesListColumns.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"RolesListColumns.esm.js","sources":["../../../src/components/RolesList/RolesListColumns.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 { parseEntityRef } from '@backstage/catalog-model';\nimport { Link, TableColumn } from '@backstage/core-components';\n\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\n\nimport { RolesData } from '../../types';\nimport { getMembers } from '../../utils/rbac-utils';\nimport EditRole from '../EditRole';\nimport DeleteRole from './DeleteRole';\n\nexport const columns: TableColumn<RolesData>[] = [\n  {\n    title: 'Name',\n    field: 'name',\n    type: 'string',\n    render: (props: RolesData) => {\n      const { kind, namespace, name } = parseEntityRef(props.name);\n      return (\n        <Link to={`roles/${kind}/${namespace}/${name}`}>{props.name}</Link>\n      );\n    },\n  },\n  {\n    title: 'Users and groups',\n    field: 'members',\n    type: 'string',\n    align: 'left',\n    render: props => getMembers(props.members),\n    customSort: (a, b) => {\n      if (a.members.length === 0) {\n        return -1;\n      }\n      if (b.members.length === 0) {\n        return 1;\n      }\n      if (a.members.length === b.members.length) {\n        return 0;\n      }\n      return a.members.length < b.members.length ? -1 : 1;\n    },\n  },\n  {\n    title: 'Accessible plugins',\n    field: 'accessiblePlugins',\n    type: 'string',\n    align: 'left',\n    render: (props: RolesData) => {\n      const pls = props.accessiblePlugins.map(\n        p => p[0].toLocaleUpperCase('en-US') + p.slice(1),\n      );\n      const plsTooltip = pls.join(', ');\n      const plsOverflowCount = pls.length > 2 ? `+ ${pls.length - 2}` : '';\n\n      return pls.length > 0 ? (\n        <Tooltip title={plsTooltip || ''} placement=\"top-start\">\n          <Typography>\n            {pls.length === 1\n              ? `${pls[0]}`\n              : `${pls[0]}, ${pls[1]} ${plsOverflowCount}`}\n          </Typography>\n        </Tooltip>\n      ) : (\n        '-'\n      );\n    },\n  },\n  {\n    title: 'Actions',\n    sorting: false,\n    render: (props: RolesData) => (\n      <>\n        <EditRole\n          canEdit={props.actionsPermissionResults.edit.allowed}\n          roleName={props.name}\n        />\n        <DeleteRole\n          canEdit={props.actionsPermissionResults.edit.allowed}\n          roleName={props.name}\n        />\n      </>\n    ),\n  },\n];\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RolesListColumns.esm.js","sources":["../../../src/components/RolesList/RolesListColumns.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 { parseEntityRef } from '@backstage/catalog-model';\nimport { Link, TableColumn } from '@backstage/core-components';\n\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\n\nimport { RolesData } from '../../types';\nimport { getMembers } from '../../utils/rbac-utils';\nimport EditRole from '../EditRole';\nimport DeleteRole from './DeleteRole';\nimport { TranslationFunction } from '@backstage/core-plugin-api/alpha';\nimport { rbacTranslationRef } from '../../translations';\n\nexport const getColumns = (\n  t: TranslationFunction<typeof rbacTranslationRef.T>,\n  locale: string,\n): TableColumn<RolesData>[] => {\n  return [\n    {\n      title: t('table.headers.name'),\n      field: 'name',\n      type: 'string',\n      render: (props: RolesData) => {\n        const { kind, namespace, name } = parseEntityRef(props.name);\n        return (\n          <Link to={`roles/${kind}/${namespace}/${name}`}>{props.name}</Link>\n        );\n      },\n    },\n    {\n      title: t('table.headers.usersAndGroups'),\n      field: 'members',\n      type: 'string',\n      align: 'left',\n      render: props => getMembers(props.members, t),\n      customSort: (a, b) => {\n        if (a.members.length === 0) {\n          return -1;\n        }\n        if (b.members.length === 0) {\n          return 1;\n        }\n        if (a.members.length === b.members.length) {\n          return 0;\n        }\n        return a.members.length < b.members.length ? -1 : 1;\n      },\n    },\n    {\n      title: t('table.headers.accessiblePlugins'),\n      field: 'accessiblePlugins',\n      type: 'string',\n      align: 'left',\n      render: (props: RolesData) => {\n        const pls = props.accessiblePlugins.map(\n          p => p[0].toLocaleUpperCase(locale) + p.slice(1),\n        );\n        const plsTooltip = pls.join(', ');\n        const plsOverflowCount = pls.length > 2 ? `+ ${pls.length - 2}` : '';\n\n        return pls.length > 0 ? (\n          <Tooltip title={plsTooltip || ''} placement=\"top-start\">\n            <Typography>\n              {pls.length === 1\n                ? `${pls[0]}`\n                : `${pls[0]}, ${pls[1]} ${plsOverflowCount}`}\n            </Typography>\n          </Tooltip>\n        ) : (\n          '-'\n        );\n      },\n    },\n    {\n      title: t('table.headers.actions'),\n      sorting: false,\n      render: (props: RolesData) => (\n        <>\n          <EditRole\n            canEdit={props.actionsPermissionResults.edit.allowed}\n            roleName={props.name}\n          />\n          <DeleteRole\n            canEdit={props.actionsPermissionResults.edit.allowed}\n            roleName={props.name}\n          />\n        </>\n      ),\n    },\n  ];\n};\n"],"names":[],"mappings":"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"}

package/dist/components/RolesList/RolesListToolbar.esm.js

@@ -3,11 +3,14 @@ import { Link, LinkButton } from '@backstage/core-components';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import Typography from '@mui/material/Typography';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
+import { Trans } from '../Trans.esm.js';
 
 const RolesListToolbar = ({
   createRoleAllowed,
   createRoleLoading
 }) => {
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsxs("div", { children: [
     !createRoleLoading && !createRoleAllowed && /* @__PURE__ */ jsxs(Alert, { severity: "warning", "data-testid": "create-role-warning", children: [
       /* @__PURE__ */ jsx(
@@ -16,22 +19,29 @@ const RolesListToolbar = ({
           sx: {
             fontWeight: "bold"
           },
-          children: "Unable to create role."
+          children: t("toolbar.warning.title")
         }
       ),
-      "To enable create/edit role button, make sure required users/groups are available in catalog as a role cannot be created without users/groups and also the role associated with your user should have the permission policies mentioned",
-      " ",
       /* @__PURE__ */ jsx(
-        Link,
+        Trans,
         {
-          to: "https://github.com/backstage/community-plugins/tree/main/workspaces/rbac/plugins/rbac#prerequisites",
-          target: "_blank",
-          children: "here"
+          message: "toolbar.warning.message",
+          params: {
+            link: /* @__PURE__ */ jsx(
+              Link,
+              {
+                to: "https://github.com/backstage/community-plugins/tree/main/workspaces/rbac/plugins/rbac#prerequisites",
+                target: "_blank",
+                children: t("toolbar.warning.linkText")
+              }
+            )
+          }
         }
       ),
       /* @__PURE__ */ jsxs(Typography, { sx: { mt: 1 }, fontSize: "small", children: [
-        /* @__PURE__ */ jsx(Typography, { component: "span", fontWeight: "bold", fontSize: "small", children: "Note" }),
-        ": Even after ingesting users/groups in catalog and applying above permissions if the create/edit button is still disabled then please contact your administrator as you might be conditionally restricted from accessing the create/edit button."
+        /* @__PURE__ */ jsx(Typography, { component: "span", fontWeight: "bold", fontSize: "small", children: t("toolbar.warning.note") }),
+        ": ",
+        t("toolbar.warning.noteText")
       ] })
     ] }),
     /* @__PURE__ */ jsx("br", {}),
@@ -52,7 +62,7 @@ const RolesListToolbar = ({
             variant: "contained",
             disabled: !createRoleAllowed,
             "data-testid": "create-role",
-            children: "Create"
+            children: t("toolbar.createButton")
           }
         )
       }

package/dist/components/RolesList/RolesListToolbar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"RolesListToolbar.esm.js","sources":["../../../src/components/RolesList/RolesListToolbar.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 { Link, LinkButton } from '@backstage/core-components';\n\nimport Alert from '@mui/material/Alert';\nimport AlertTitle from '@mui/material/AlertTitle';\nimport Typography from '@mui/material/Typography';\n\nexport const RolesListToolbar = ({\n  createRoleAllowed,\n  createRoleLoading,\n}: {\n  createRoleAllowed: boolean;\n  createRoleLoading: boolean;\n}) => {\n  return (\n    <div>\n      {!createRoleLoading && !createRoleAllowed && (\n        <Alert severity=\"warning\" data-testid=\"create-role-warning\">\n          <AlertTitle\n            sx={{\n              fontWeight: 'bold',\n            }}\n          >\n            Unable to create role.\n          </AlertTitle>\n          To enable create/edit role button, make sure required users/groups are\n          available in catalog as a role cannot be created without users/groups\n          and also the role associated with your user should have the permission\n          policies mentioned{' '}\n          <Link\n            to=\"https://github.com/backstage/community-plugins/tree/main/workspaces/rbac/plugins/rbac#prerequisites\"\n            target=\"_blank\"\n          >\n            here\n          </Link>\n          <Typography sx={{ mt: 1 }} fontSize=\"small\">\n            <Typography component=\"span\" fontWeight=\"bold\" fontSize=\"small\">\n              Note\n            </Typography>\n            : Even after ingesting users/groups in catalog and applying above\n            permissions if the create/edit button is still disabled then please\n            contact your administrator as you might be conditionally restricted\n            from accessing the create/edit button.\n          </Typography>\n        </Alert>\n      )}\n      <br />\n      <Typography\n        component=\"span\"\n        sx={{\n          display: 'flex',\n          justifyContent: 'end',\n          marginBottom: '24px !important',\n        }}\n      >\n        <LinkButton\n          to=\"role/new\"\n          color=\"primary\"\n          variant=\"contained\"\n          disabled={!createRoleAllowed}\n          data-testid=\"create-role\"\n        >\n          Create\n        </LinkButton>\n      </Typography>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,iBAAA;AAAA,EACA;AACF,CAGM,KAAA;AACJ,EAAA,4BACG,KACE,EAAA,EAAA,QAAA,EAAA;AAAA,IAAC,CAAA,iBAAA,IAAqB,CAAC,iBACtB,oBAAA,IAAA,CAAC,SAAM,QAAS,EAAA,SAAA,EAAU,eAAY,qBACpC,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,UAAY,EAAA;AAAA,WACd;AAAA,UACD,QAAA,EAAA;AAAA;AAAA,OAED;AAAA,MAAa,wOAAA;AAAA,MAIM,GAAA;AAAA,sBACnB,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,EAAG,EAAA,qGAAA;AAAA,UACH,MAAO,EAAA,QAAA;AAAA,UACR,QAAA,EAAA;AAAA;AAAA,OAED;AAAA,sBACA,IAAA,CAAC,cAAW,EAAI,EAAA,EAAE,IAAI,CAAE,EAAA,EAAG,UAAS,OAClC,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,cAAW,SAAU,EAAA,MAAA,EAAO,YAAW,MAAO,EAAA,QAAA,EAAS,SAAQ,QAEhE,EAAA,MAAA,EAAA,CAAA;AAAA,QAAa;AAAA,OAKf,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,wBAED,IAAG,EAAA,EAAA,CAAA;AAAA,oBACJ,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,MAAA;AAAA,QACV,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,MAAA;AAAA,UACT,cAAgB,EAAA,KAAA;AAAA,UAChB,YAAc,EAAA;AAAA,SAChB;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,EAAG,EAAA,UAAA;AAAA,YACH,KAAM,EAAA,SAAA;AAAA,YACN,OAAQ,EAAA,WAAA;AAAA,YACR,UAAU,CAAC,iBAAA;AAAA,YACX,aAAY,EAAA,aAAA;AAAA,YACb,QAAA,EAAA;AAAA;AAAA;AAED;AAAA;AACF,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"RolesListToolbar.esm.js","sources":["../../../src/components/RolesList/RolesListToolbar.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 { Link, LinkButton } from '@backstage/core-components';\n\nimport Alert from '@mui/material/Alert';\nimport AlertTitle from '@mui/material/AlertTitle';\nimport Typography from '@mui/material/Typography';\n\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { Trans } from '../Trans';\n\nexport const RolesListToolbar = ({\n  createRoleAllowed,\n  createRoleLoading,\n}: {\n  createRoleAllowed: boolean;\n  createRoleLoading: boolean;\n}) => {\n  const { t } = useTranslation();\n\n  return (\n    <div>\n      {!createRoleLoading && !createRoleAllowed && (\n        <Alert severity=\"warning\" data-testid=\"create-role-warning\">\n          <AlertTitle\n            sx={{\n              fontWeight: 'bold',\n            }}\n          >\n            {t('toolbar.warning.title')}\n          </AlertTitle>\n          <Trans\n            message=\"toolbar.warning.message\"\n            params={{\n              link: (\n                <Link\n                  to=\"https://github.com/backstage/community-plugins/tree/main/workspaces/rbac/plugins/rbac#prerequisites\"\n                  target=\"_blank\"\n                >\n                  {t('toolbar.warning.linkText')}\n                </Link>\n              ),\n            }}\n          />\n          <Typography sx={{ mt: 1 }} fontSize=\"small\">\n            <Typography component=\"span\" fontWeight=\"bold\" fontSize=\"small\">\n              {t('toolbar.warning.note')}\n            </Typography>\n            : {t('toolbar.warning.noteText')}\n          </Typography>\n        </Alert>\n      )}\n      <br />\n      <Typography\n        component=\"span\"\n        sx={{\n          display: 'flex',\n          justifyContent: 'end',\n          marginBottom: '24px !important',\n        }}\n      >\n        <LinkButton\n          to=\"role/new\"\n          color=\"primary\"\n          variant=\"contained\"\n          disabled={!createRoleAllowed}\n          data-testid=\"create-role\"\n        >\n          {t('toolbar.createButton')}\n        </LinkButton>\n      </Typography>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,iBAAA;AAAA,EACA;AACF,CAGM,KAAA;AACJ,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAA,4BACG,KACE,EAAA,EAAA,QAAA,EAAA;AAAA,IAAC,CAAA,iBAAA,IAAqB,CAAC,iBACtB,oBAAA,IAAA,CAAC,SAAM,QAAS,EAAA,SAAA,EAAU,eAAY,qBACpC,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,UAAY,EAAA;AAAA,WACd;AAAA,UAEC,YAAE,uBAAuB;AAAA;AAAA,OAC5B;AAAA,sBACA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,yBAAA;AAAA,UACR,MAAQ,EAAA;AAAA,YACN,IACE,kBAAA,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,EAAG,EAAA,qGAAA;AAAA,gBACH,MAAO,EAAA,QAAA;AAAA,gBAEN,YAAE,0BAA0B;AAAA;AAAA;AAC/B;AAEJ;AAAA,OACF;AAAA,sBACA,IAAA,CAAC,cAAW,EAAI,EAAA,EAAE,IAAI,CAAE,EAAA,EAAG,UAAS,OAClC,EAAA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,WAAU,MAAO,EAAA,UAAA,EAAW,QAAO,QAAS,EAAA,OAAA,EACrD,QAAE,EAAA,CAAA,CAAA,sBAAsB,CAC3B,EAAA,CAAA;AAAA,QAAa,IAAA;AAAA,QACV,EAAE,0BAA0B;AAAA,OACjC,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,wBAED,IAAG,EAAA,EAAA,CAAA;AAAA,oBACJ,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,MAAA;AAAA,QACV,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,MAAA;AAAA,UACT,cAAgB,EAAA,KAAA;AAAA,UAChB,YAAc,EAAA;AAAA,SAChB;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,EAAG,EAAA,UAAA;AAAA,YACH,KAAM,EAAA,SAAA;AAAA,YACN,OAAQ,EAAA,WAAA;AAAA,YACR,UAAU,CAAC,iBAAA;AAAA,YACX,aAAY,EAAA,aAAA;AAAA,YAEX,YAAE,sBAAsB;AAAA;AAAA;AAC3B;AAAA;AACF,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Router.esm.js

@@ -10,17 +10,19 @@ import { EditRolePage } from './CreateRole/EditRolePage.esm.js';
 import { RbacPage } from './RbacPage.esm.js';
 import { RoleOverviewPage } from './RoleOverview/RoleOverviewPage.esm.js';
 import { ToastContextProvider } from './ToastContext.esm.js';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 
 const Router = ({ useHeader = true }) => {
   const config = useApi(configApiRef);
+  const { t } = useTranslation();
   const isRBACPluginEnabled = config.getOptionalBoolean("permission.enabled");
   if (!isRBACPluginEnabled) {
     return /* @__PURE__ */ jsx(
       ErrorPage,
       {
         status: "404",
-        statusMessage: "Enable the RBAC backend plugin to use this feature.",
-        additionalInfo: "To enable RBAC, set `permission.enabled` to `true` in the app-config file."
+        statusMessage: t("errors.rbacDisabled"),
+        additionalInfo: t("errors.rbacDisabledInfo")
       }
     );
   }

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

@@ -1 +1 @@
-{"version":3,"file":"Router.esm.js","sources":["../../src/components/Router.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 { Route, Routes } from 'react-router-dom';\n\nimport { ErrorPage } from '@backstage/core-components';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { RequirePermission } from '@backstage/plugin-permission-react';\n\nimport { policyEntityCreatePermission } from '@backstage-community/plugin-rbac-common';\n\nimport { createRoleRouteRef, editRoleRouteRef, roleRouteRef } from '../routes';\nimport { CreateRolePage } from './CreateRole/CreateRolePage';\nimport { EditRolePage } from './CreateRole/EditRolePage';\nimport { RbacPage } from './RbacPage';\nimport { RoleOverviewPage } from './RoleOverview/RoleOverviewPage';\nimport { ToastContextProvider } from './ToastContext';\n\n/**\n *\n * @public\n */\nexport const Router = ({ useHeader = true }: { useHeader?: boolean }) => {\n  const config = useApi(configApiRef);\n  const isRBACPluginEnabled = config.getOptionalBoolean('permission.enabled');\n\n  if (!isRBACPluginEnabled) {\n    return (\n      <ErrorPage\n        status=\"404\"\n        statusMessage=\"Enable the RBAC backend plugin to use this feature.\"\n        additionalInfo=\"To enable RBAC, set `permission.enabled` to `true` in the app-config file.\"\n      />\n    );\n  }\n\n  return (\n    <ToastContextProvider>\n      <Routes>\n        <Route path=\"/\" element={<RbacPage useHeader={useHeader} />} />\n        <Route path={roleRouteRef.path} element={<RoleOverviewPage />} />\n        <Route\n          path={createRoleRouteRef.path}\n          element={\n            <RequirePermission permission={policyEntityCreatePermission}>\n              <CreateRolePage />\n            </RequirePermission>\n          }\n        />\n        <Route path={editRoleRouteRef.path} element={<EditRolePage />} />\n      </Routes>\n    </ToastContextProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkCO,MAAM,MAAS,GAAA,CAAC,EAAE,SAAA,GAAY,MAAoC,KAAA;AACvE,EAAM,MAAA,MAAA,GAAS,OAAO,YAAY,CAAA;AAClC,EAAM,MAAA,mBAAA,GAAsB,MAAO,CAAA,kBAAA,CAAmB,oBAAoB,CAAA;AAE1E,EAAA,IAAI,CAAC,mBAAqB,EAAA;AACxB,IACE,uBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,MAAO,EAAA,KAAA;AAAA,QACP,aAAc,EAAA,qDAAA;AAAA,QACd,cAAe,EAAA;AAAA;AAAA,KACjB;AAAA;AAIJ,EACE,uBAAA,GAAA,CAAC,oBACC,EAAA,EAAA,QAAA,kBAAA,IAAA,CAAC,MACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAM,IAAK,EAAA,GAAA,EAAI,yBAAU,GAAA,CAAA,QAAA,EAAA,EAAS,WAAsB,CAAI,EAAA,CAAA;AAAA,oBAC7D,GAAA,CAAC,SAAM,IAAM,EAAA,YAAA,CAAa,MAAM,OAAS,kBAAA,GAAA,CAAC,oBAAiB,CAAI,EAAA,CAAA;AAAA,oBAC/D,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,MAAM,kBAAmB,CAAA,IAAA;AAAA,QACzB,yBACG,GAAA,CAAA,iBAAA,EAAA,EAAkB,YAAY,4BAC7B,EAAA,QAAA,kBAAA,GAAA,CAAC,kBAAe,CAClB,EAAA;AAAA;AAAA,KAEJ;AAAA,oBACA,GAAA,CAAC,SAAM,IAAM,EAAA,gBAAA,CAAiB,MAAM,OAAS,kBAAA,GAAA,CAAC,gBAAa,CAAI,EAAA;AAAA,GAAA,EACjE,CACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Router.esm.js","sources":["../../src/components/Router.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 { Route, Routes } from 'react-router-dom';\n\nimport { ErrorPage } from '@backstage/core-components';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { RequirePermission } from '@backstage/plugin-permission-react';\n\nimport { policyEntityCreatePermission } from '@backstage-community/plugin-rbac-common';\n\nimport { createRoleRouteRef, editRoleRouteRef, roleRouteRef } from '../routes';\nimport { CreateRolePage } from './CreateRole/CreateRolePage';\nimport { EditRolePage } from './CreateRole/EditRolePage';\nimport { RbacPage } from './RbacPage';\nimport { RoleOverviewPage } from './RoleOverview/RoleOverviewPage';\nimport { ToastContextProvider } from './ToastContext';\nimport { useTranslation } from '../hooks/useTranslation';\n\n/**\n *\n * @public\n */\nexport const Router = ({ useHeader = true }: { useHeader?: boolean }) => {\n  const config = useApi(configApiRef);\n  const { t } = useTranslation();\n  const isRBACPluginEnabled = config.getOptionalBoolean('permission.enabled');\n\n  if (!isRBACPluginEnabled) {\n    return (\n      <ErrorPage\n        status=\"404\"\n        statusMessage={t('errors.rbacDisabled')}\n        additionalInfo={t('errors.rbacDisabledInfo')}\n      />\n    );\n  }\n\n  return (\n    <ToastContextProvider>\n      <Routes>\n        <Route path=\"/\" element={<RbacPage useHeader={useHeader} />} />\n        <Route path={roleRouteRef.path} element={<RoleOverviewPage />} />\n        <Route\n          path={createRoleRouteRef.path}\n          element={\n            <RequirePermission permission={policyEntityCreatePermission}>\n              <CreateRolePage />\n            </RequirePermission>\n          }\n        />\n        <Route path={editRoleRouteRef.path} element={<EditRolePage />} />\n      </Routes>\n    </ToastContextProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAmCO,MAAM,MAAS,GAAA,CAAC,EAAE,SAAA,GAAY,MAAoC,KAAA;AACvE,EAAM,MAAA,MAAA,GAAS,OAAO,YAAY,CAAA;AAClC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAM,MAAA,mBAAA,GAAsB,MAAO,CAAA,kBAAA,CAAmB,oBAAoB,CAAA;AAE1E,EAAA,IAAI,CAAC,mBAAqB,EAAA;AACxB,IACE,uBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,MAAO,EAAA,KAAA;AAAA,QACP,aAAA,EAAe,EAAE,qBAAqB,CAAA;AAAA,QACtC,cAAA,EAAgB,EAAE,yBAAyB;AAAA;AAAA,KAC7C;AAAA;AAIJ,EACE,uBAAA,GAAA,CAAC,oBACC,EAAA,EAAA,QAAA,kBAAA,IAAA,CAAC,MACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAM,IAAK,EAAA,GAAA,EAAI,yBAAU,GAAA,CAAA,QAAA,EAAA,EAAS,WAAsB,CAAI,EAAA,CAAA;AAAA,oBAC7D,GAAA,CAAC,SAAM,IAAM,EAAA,YAAA,CAAa,MAAM,OAAS,kBAAA,GAAA,CAAC,oBAAiB,CAAI,EAAA,CAAA;AAAA,oBAC/D,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,MAAM,kBAAmB,CAAA,IAAA;AAAA,QACzB,yBACG,GAAA,CAAA,iBAAA,EAAA,EAAkB,YAAY,4BAC7B,EAAA,QAAA,kBAAA,GAAA,CAAC,kBAAe,CAClB,EAAA;AAAA;AAAA,KAEJ;AAAA,oBACA,GAAA,CAAC,SAAM,IAAM,EAAA,gBAAA,CAAiB,MAAM,OAAS,kBAAA,GAAA,CAAC,gBAAa,CAAI,EAAA;AAAA,GAAA,EACjE,CACF,EAAA,CAAA;AAEJ;;;;"}