@backstage-community/plugin-rbac 1.32.2

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { parseEntityRef } from '@backstage/catalog-model';
+import { Link } from '@backstage/core-components';
+import { Box, IconButton } from '@material-ui/core';
+import Delete from '@mui/icons-material/Delete';
+
+const reviewStepMemebersTableColumns = () => [
+  {
+    title: "Name",
+    field: "label",
+    type: "string"
+  },
+  {
+    title: "Type",
+    field: "type",
+    type: "string"
+  },
+  {
+    title: "Members",
+    field: "members",
+    type: "numeric",
+    align: "left",
+    render: (mem) => {
+      if (mem || mem === 0) return mem;
+      return "-";
+    }
+  }
+];
+const selectedMembersColumns = (selectedMembers, setFieldValue) => {
+  const onRemove = (etag) => {
+    const updatedMembers = selectedMembers.filter(
+      (mem) => mem.etag !== etag
+    );
+    setFieldValue("selectedMembers", updatedMembers);
+  };
+  return [
+    {
+      title: "Name",
+      field: "label",
+      type: "string",
+      render: (props) => {
+        const { kind, namespace, name } = parseEntityRef(props.ref);
+        return /* @__PURE__ */ React.createElement(Link, { to: `/catalog/${namespace}/${kind}/${name}`, target: "blank" }, props.label);
+      }
+    },
+    {
+      title: "Type",
+      field: "type",
+      type: "string"
+    },
+    {
+      title: "Members",
+      field: "members",
+      type: "numeric",
+      align: "left",
+      emptyValue: "-"
+    },
+    {
+      title: "Actions",
+      sorting: false,
+      render: (mem) => {
+        return /* @__PURE__ */ React.createElement(Box, { key: mem.etag }, /* @__PURE__ */ React.createElement(
+          IconButton,
+          {
+            onClick: () => onRemove(mem.etag),
+            "aria-label": "Remove",
+            title: "Remove member"
+          },
+          /* @__PURE__ */ React.createElement(Delete, null)
+        ));
+      }
+    }
+  ];
+};
+
+export { reviewStepMemebersTableColumns, selectedMembersColumns };
+//# sourceMappingURL=AddedMembersTableColumn.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddedMembersTableColumn.esm.js","sources":["../../../src/components/CreateRole/AddedMembersTableColumn.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { Link, TableColumn } from '@backstage/core-components';\n\nimport { Box, IconButton } from '@material-ui/core';\nimport Delete from '@mui/icons-material/Delete';\nimport { FormikErrors } from 'formik';\n\nimport { RoleFormValues, SelectedMember } from './types';\n\nexport const reviewStepMemebersTableColumns = () => [\n  {\n    title: 'Name',\n    field: 'label',\n    type: 'string',\n  },\n  {\n    title: 'Type',\n    field: 'type',\n    type: 'string',\n  },\n  {\n    title: 'Members',\n    field: 'members',\n    type: 'numeric',\n    align: 'left',\n    render: (mem: number) => {\n      if (mem || mem === 0) return mem;\n      return '-';\n    },\n  },\n];\n\nexport const selectedMembersColumns = (\n  selectedMembers: SelectedMember[],\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>,\n): TableColumn<SelectedMember>[] => {\n  const onRemove = (etag: string) => {\n    const updatedMembers = selectedMembers.filter(\n      (mem: SelectedMember) => mem.etag !== etag,\n    );\n    setFieldValue('selectedMembers', updatedMembers);\n  };\n\n  return [\n    {\n      title: 'Name',\n      field: 'label',\n      type: 'string',\n      render: props => {\n        const { kind, namespace, name } = parseEntityRef(props.ref);\n        return (\n          <Link to={`/catalog/${namespace}/${kind}/${name}`} target=\"blank\">\n            {props.label}\n          </Link>\n        );\n      },\n    },\n    {\n      title: 'Type',\n      field: 'type',\n      type: 'string',\n    },\n    {\n      title: 'Members',\n      field: 'members',\n      type: 'numeric',\n      align: 'left',\n      emptyValue: '-',\n    },\n    {\n      title: 'Actions',\n      sorting: false,\n      render: (mem: SelectedMember) => {\n        return (\n          <Box key={mem.etag}>\n            <IconButton\n              onClick={() => onRemove(mem.etag)}\n              aria-label=\"Remove\"\n              title=\"Remove member\"\n            >\n              <Delete />\n            </IconButton>\n          </Box>\n        );\n      },\n    },\n  ];\n};\n"],"names":[],"mappings":";;;;;;AA0BO,MAAM,iCAAiC,MAAM;AAAA,EAClD;AAAA,IACE,KAAO,EAAA,MAAA;AAAA,IACP,KAAO,EAAA,OAAA;AAAA,IACP,IAAM,EAAA,QAAA;AAAA,GACR;AAAA,EACA;AAAA,IACE,KAAO,EAAA,MAAA;AAAA,IACP,KAAO,EAAA,MAAA;AAAA,IACP,IAAM,EAAA,QAAA;AAAA,GACR;AAAA,EACA;AAAA,IACE,KAAO,EAAA,SAAA;AAAA,IACP,KAAO,EAAA,SAAA;AAAA,IACP,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,IACP,MAAA,EAAQ,CAAC,GAAgB,KAAA;AACvB,MAAI,IAAA,GAAA,IAAO,GAAQ,KAAA,CAAA,EAAU,OAAA,GAAA,CAAA;AAC7B,MAAO,OAAA,GAAA,CAAA;AAAA,KACT;AAAA,GACF;AACF,EAAA;AAEa,MAAA,sBAAA,GAAyB,CACpC,eAAA,EACA,aAKkC,KAAA;AAClC,EAAM,MAAA,QAAA,GAAW,CAAC,IAAiB,KAAA;AACjC,IAAA,MAAM,iBAAiB,eAAgB,CAAA,MAAA;AAAA,MACrC,CAAC,GAAwB,KAAA,GAAA,CAAI,IAAS,KAAA,IAAA;AAAA,KACxC,CAAA;AACA,IAAA,aAAA,CAAc,mBAAmB,cAAc,CAAA,CAAA;AAAA,GACjD,CAAA;AAEA,EAAO,OAAA;AAAA,IACL;AAAA,MACE,KAAO,EAAA,MAAA;AAAA,MACP,KAAO,EAAA,OAAA;AAAA,MACP,IAAM,EAAA,QAAA;AAAA,MACN,QAAQ,CAAS,KAAA,KAAA;AACf,QAAA,MAAM,EAAE,IAAM,EAAA,SAAA,EAAW,MAAS,GAAA,cAAA,CAAe,MAAM,GAAG,CAAA,CAAA;AAC1D,QAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,EAAI,EAAA,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,MAAO,EAAA,OAAA,EAAA,EACvD,MAAM,KACT,CAAA,CAAA;AAAA,OAEJ;AAAA,KACF;AAAA,IACA;AAAA,MACE,KAAO,EAAA,MAAA;AAAA,MACP,KAAO,EAAA,MAAA;AAAA,MACP,IAAM,EAAA,QAAA;AAAA,KACR;AAAA,IACA;AAAA,MACE,KAAO,EAAA,SAAA;AAAA,MACP,KAAO,EAAA,SAAA;AAAA,MACP,IAAM,EAAA,SAAA;AAAA,MACN,KAAO,EAAA,MAAA;AAAA,MACP,UAAY,EAAA,GAAA;AAAA,KACd;AAAA,IACA;AAAA,MACE,KAAO,EAAA,SAAA;AAAA,MACP,OAAS,EAAA,KAAA;AAAA,MACT,MAAA,EAAQ,CAAC,GAAwB,KAAA;AAC/B,QAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,GAAK,EAAA,GAAA,CAAI,IACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAS,EAAA,MAAM,QAAS,CAAA,GAAA,CAAI,IAAI,CAAA;AAAA,YAChC,YAAW,EAAA,QAAA;AAAA,YACX,KAAM,EAAA,eAAA;AAAA,WAAA;AAAA,8CAEL,MAAO,EAAA,IAAA,CAAA;AAAA,SAEZ,CAAA,CAAA;AAAA,OAEJ;AAAA,KACF;AAAA,GACF,CAAA;AACF;;;;"}

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useAsync } from 'react-use';
+import { Progress, Page, Header, Content, ErrorPage } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
+import { rbacApiRef } from '../../api/RBACBackendClient.esm.js';
+import { initialPermissionPolicyRowValue } from './const.esm.js';
+import { RoleForm } from './RoleForm.esm.js';
+
+const CreateRolePage = () => {
+  const rbacApi = useApi(rbacApiRef);
+  const {
+    loading: membersLoading,
+    value: members,
+    error: membersError
+  } = useAsync(async () => {
+    return await rbacApi.getMembers();
+  });
+  const canReadUsersAndGroups = !membersLoading && !membersError && Array.isArray(members) && members.length > 0;
+  const initialValues = {
+    name: "",
+    namespace: "default",
+    kind: "role",
+    description: "",
+    selectedMembers: [],
+    permissionPoliciesRows: [initialPermissionPolicyRowValue]
+  };
+  if (membersLoading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  return canReadUsersAndGroups ? /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(Header, { title: "Create role", type: "RBAC", typeLink: ".." }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(
+    RoleForm,
+    {
+      initialValues,
+      titles: {
+        formTitle: "Create Role",
+        nameAndDescriptionTitle: "Enter name and description of role ",
+        usersAndGroupsTitle: "Add users and groups",
+        permissionPoliciesTitle: "Add permission policies"
+      },
+      membersData: {
+        members: Array.isArray(members) ? members : [],
+        loading: membersLoading,
+        error: membersError || {
+          name: members?.status,
+          message: members?.statusText
+        }
+      }
+    }
+  ))) : /* @__PURE__ */ React.createElement(ErrorPage, { statusMessage: "Unauthorized to create role" });
+};
+
+export { CreateRolePage };
+//# sourceMappingURL=CreateRolePage.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CreateRolePage.esm.js","sources":["../../../src/components/CreateRole/CreateRolePage.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { useAsync } from 'react-use';\n\nimport {\n  Content,\n  ErrorPage,\n  Header,\n  Page,\n  Progress,\n} from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nimport { rbacApiRef } from '../../api/RBACBackendClient';\nimport { MemberEntity } from '../../types';\nimport { initialPermissionPolicyRowValue } from './const';\nimport { RoleForm } from './RoleForm';\nimport { RoleFormValues } from './types';\n\nexport const CreateRolePage = () => {\n  const rbacApi = useApi(rbacApiRef);\n  const {\n    loading: membersLoading,\n    value: members,\n    error: membersError,\n  } = useAsync(async () => {\n    return await rbacApi.getMembers();\n  });\n\n  const canReadUsersAndGroups =\n    !membersLoading &&\n    !membersError &&\n    Array.isArray(members) &&\n    members.length > 0;\n\n  const initialValues: RoleFormValues = {\n    name: '',\n    namespace: 'default',\n    kind: 'role',\n    description: '',\n    selectedMembers: [],\n    permissionPoliciesRows: [initialPermissionPolicyRowValue],\n  };\n\n  if (membersLoading) {\n    return <Progress />;\n  }\n\n  return canReadUsersAndGroups ? (\n    <Page themeId=\"tool\">\n      <Header title=\"Create role\" type=\"RBAC\" typeLink=\"..\" />\n      <Content>\n        <RoleForm\n          initialValues={initialValues}\n          titles={{\n            formTitle: 'Create Role',\n            nameAndDescriptionTitle: 'Enter name and description of role ',\n            usersAndGroupsTitle: 'Add users and groups',\n            permissionPoliciesTitle: 'Add permission policies',\n          }}\n          membersData={{\n            members: Array.isArray(members) ? members : ([] as MemberEntity[]),\n            loading: membersLoading,\n            error: (membersError as unknown as Error) || {\n              name: (members as unknown as Response)?.status,\n              message: (members as unknown as Response)?.statusText,\n            },\n          }}\n        />\n      </Content>\n    </Page>\n  ) : (\n    <ErrorPage statusMessage=\"Unauthorized to create role\" />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAiCO,MAAM,iBAAiB,MAAM;AAClC,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA,CAAA;AACjC,EAAM,MAAA;AAAA,IACJ,OAAS,EAAA,cAAA;AAAA,IACT,KAAO,EAAA,OAAA;AAAA,IACP,KAAO,EAAA,YAAA;AAAA,GACT,GAAI,SAAS,YAAY;AACvB,IAAO,OAAA,MAAM,QAAQ,UAAW,EAAA,CAAA;AAAA,GACjC,CAAA,CAAA;AAED,EAAM,MAAA,qBAAA,GACJ,CAAC,cAAA,IACD,CAAC,YAAA,IACD,MAAM,OAAQ,CAAA,OAAO,CACrB,IAAA,OAAA,CAAQ,MAAS,GAAA,CAAA,CAAA;AAEnB,EAAA,MAAM,aAAgC,GAAA;AAAA,IACpC,IAAM,EAAA,EAAA;AAAA,IACN,SAAW,EAAA,SAAA;AAAA,IACX,IAAM,EAAA,MAAA;AAAA,IACN,WAAa,EAAA,EAAA;AAAA,IACb,iBAAiB,EAAC;AAAA,IAClB,sBAAA,EAAwB,CAAC,+BAA+B,CAAA;AAAA,GAC1D,CAAA;AAEA,EAAA,IAAI,cAAgB,EAAA;AAClB,IAAA,2CAAQ,QAAS,EAAA,IAAA,CAAA,CAAA;AAAA,GACnB;AAEA,EAAA,OAAO,qBACL,mBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,0BACX,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,KAAM,EAAA,aAAA,EAAc,MAAK,MAAO,EAAA,QAAA,EAAS,IAAK,EAAA,CAAA,sCACrD,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,aAAA;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,SAAW,EAAA,aAAA;AAAA,QACX,uBAAyB,EAAA,qCAAA;AAAA,QACzB,mBAAqB,EAAA,sBAAA;AAAA,QACrB,uBAAyB,EAAA,yBAAA;AAAA,OAC3B;AAAA,MACA,WAAa,EAAA;AAAA,QACX,SAAS,KAAM,CAAA,OAAA,CAAQ,OAAO,CAAA,GAAI,UAAW,EAAC;AAAA,QAC9C,OAAS,EAAA,cAAA;AAAA,QACT,OAAQ,YAAqC,IAAA;AAAA,UAC3C,MAAO,OAAiC,EAAA,MAAA;AAAA,UACxC,SAAU,OAAiC,EAAA,UAAA;AAAA,SAC7C;AAAA,OACF;AAAA,KAAA;AAAA,GAEJ,CACF,CAAA,mBAEC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAU,eAAc,6BAA8B,EAAA,CAAA,CAAA;AAE3D;;;;"}

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useQueryParamState, Progress, ErrorPage, Page, Header, Content } from '@backstage/core-components';
+import { usePermissionPolicies } from '../../hooks/usePermissionPolicies.esm.js';
+import { useSelectedMembers } from '../../hooks/useSelectedMembers.esm.js';
+import { RoleForm } from './RoleForm.esm.js';
+
+const EditRolePage = () => {
+  const { roleName, roleNamespace, roleKind } = useParams();
+  const [queryParamState] = useQueryParamState("activeStep");
+  const {
+    selectedMembers,
+    members,
+    role,
+    loading: loadingMembers,
+    roleError,
+    membersError,
+    canReadUsersAndGroups
+  } = useSelectedMembers(
+    roleName ? `${roleKind}:${roleNamespace}/${roleName}` : ""
+  );
+  const { data, loading: loadingPolicies } = usePermissionPolicies(
+    `${roleKind}:${roleNamespace}/${roleName}`
+  );
+  const initialValues = {
+    name: roleName || "",
+    namespace: roleNamespace || "default",
+    kind: roleKind || "role",
+    description: role?.metadata?.description ?? "",
+    selectedMembers,
+    permissionPoliciesRows: data
+  };
+  if (loadingMembers || loadingPolicies) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (roleError.name) {
+    return /* @__PURE__ */ React.createElement(ErrorPage, { status: roleError.name, statusMessage: roleError.message });
+  }
+  if (!canReadUsersAndGroups) {
+    return /* @__PURE__ */ React.createElement(ErrorPage, { statusMessage: "Unauthorized to edit role" });
+  }
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(Header, { title: "Edit role", type: "RBAC", typeLink: ".." }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(
+    RoleForm,
+    {
+      initialValues,
+      titles: {
+        formTitle: "Edit Role",
+        nameAndDescriptionTitle: "Edit name and description of role ",
+        usersAndGroupsTitle: "Edit users and groups",
+        permissionPoliciesTitle: "Edit permission policies"
+      },
+      roleName: roleName ? `${roleKind}:${roleNamespace}/${roleName}` : "",
+      step: Number(queryParamState),
+      membersData: {
+        members,
+        loading: loadingMembers,
+        error: membersError
+      },
+      submitLabel: "Save"
+    }
+  )));
+};
+
+export { EditRolePage };
+//# sourceMappingURL=EditRolePage.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditRolePage.esm.js","sources":["../../../src/components/CreateRole/EditRolePage.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { useParams } from 'react-router-dom';\n\nimport {\n  Content,\n  ErrorPage,\n  Header,\n  Page,\n  Progress,\n  useQueryParamState,\n} from '@backstage/core-components';\n\nimport { usePermissionPolicies } from '../../hooks/usePermissionPolicies';\nimport { useSelectedMembers } from '../../hooks/useSelectedMembers';\nimport { RoleForm } from './RoleForm';\nimport { RoleFormValues } from './types';\n\nexport const EditRolePage = () => {\n  const { roleName, roleNamespace, roleKind } = useParams();\n  const [queryParamState] = useQueryParamState<number>('activeStep');\n  const {\n    selectedMembers,\n    members,\n    role,\n    loading: loadingMembers,\n    roleError,\n    membersError,\n    canReadUsersAndGroups,\n  } = useSelectedMembers(\n    roleName ? `${roleKind}:${roleNamespace}/${roleName}` : '',\n  );\n\n  const { data, loading: loadingPolicies } = usePermissionPolicies(\n    `${roleKind}:${roleNamespace}/${roleName}`,\n  );\n\n  const initialValues: RoleFormValues = {\n    name: roleName || '',\n    namespace: roleNamespace || 'default',\n    kind: roleKind || 'role',\n    description: role?.metadata?.description ?? '',\n    selectedMembers,\n    permissionPoliciesRows: data,\n  };\n\n  if (loadingMembers || loadingPolicies) {\n    return <Progress />;\n  }\n  if (roleError.name) {\n    return (\n      <ErrorPage status={roleError.name} statusMessage={roleError.message} />\n    );\n  }\n  if (!canReadUsersAndGroups) {\n    return <ErrorPage statusMessage=\"Unauthorized to edit role\" />;\n  }\n\n  return (\n    <Page themeId=\"tool\">\n      <Header title=\"Edit role\" type=\"RBAC\" typeLink=\"..\" />\n      <Content>\n        <RoleForm\n          initialValues={initialValues}\n          titles={{\n            formTitle: 'Edit Role',\n            nameAndDescriptionTitle: 'Edit name and description of role ',\n            usersAndGroupsTitle: 'Edit users and groups',\n            permissionPoliciesTitle: 'Edit permission policies',\n          }}\n          roleName={roleName ? `${roleKind}:${roleNamespace}/${roleName}` : ''}\n          step={Number(queryParamState)}\n          membersData={{\n            members,\n            loading: loadingMembers,\n            error: membersError,\n          }}\n          submitLabel=\"Save\"\n        />\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,EAAE,QAAA,EAAU,aAAe,EAAA,QAAA,KAAa,SAAU,EAAA,CAAA;AACxD,EAAA,MAAM,CAAC,eAAe,CAAI,GAAA,kBAAA,CAA2B,YAAY,CAAA,CAAA;AACjE,EAAM,MAAA;AAAA,IACJ,eAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAS,EAAA,cAAA;AAAA,IACT,SAAA;AAAA,IACA,YAAA;AAAA,IACA,qBAAA;AAAA,GACE,GAAA,kBAAA;AAAA,IACF,WAAW,CAAG,EAAA,QAAQ,IAAI,aAAa,CAAA,CAAA,EAAI,QAAQ,CAAK,CAAA,GAAA,EAAA;AAAA,GAC1D,CAAA;AAEA,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,eAAA,EAAoB,GAAA,qBAAA;AAAA,IACzC,CAAG,EAAA,QAAQ,CAAI,CAAA,EAAA,aAAa,IAAI,QAAQ,CAAA,CAAA;AAAA,GAC1C,CAAA;AAEA,EAAA,MAAM,aAAgC,GAAA;AAAA,IACpC,MAAM,QAAY,IAAA,EAAA;AAAA,IAClB,WAAW,aAAiB,IAAA,SAAA;AAAA,IAC5B,MAAM,QAAY,IAAA,MAAA;AAAA,IAClB,WAAA,EAAa,IAAM,EAAA,QAAA,EAAU,WAAe,IAAA,EAAA;AAAA,IAC5C,eAAA;AAAA,IACA,sBAAwB,EAAA,IAAA;AAAA,GAC1B,CAAA;AAEA,EAAA,IAAI,kBAAkB,eAAiB,EAAA;AACrC,IAAA,2CAAQ,QAAS,EAAA,IAAA,CAAA,CAAA;AAAA,GACnB;AACA,EAAA,IAAI,UAAU,IAAM,EAAA;AAClB,IAAA,2CACG,SAAU,EAAA,EAAA,MAAA,EAAQ,UAAU,IAAM,EAAA,aAAA,EAAe,UAAU,OAAS,EAAA,CAAA,CAAA;AAAA,GAEzE;AACA,EAAA,IAAI,CAAC,qBAAuB,EAAA;AAC1B,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAU,EAAA,EAAA,aAAA,EAAc,2BAA4B,EAAA,CAAA,CAAA;AAAA,GAC9D;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAA,sCACX,MAAO,EAAA,EAAA,KAAA,EAAM,WAAY,EAAA,IAAA,EAAK,MAAO,EAAA,QAAA,EAAS,IAAK,EAAA,CAAA,sCACnD,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,aAAA;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,SAAW,EAAA,WAAA;AAAA,QACX,uBAAyB,EAAA,oCAAA;AAAA,QACzB,mBAAqB,EAAA,uBAAA;AAAA,QACrB,uBAAyB,EAAA,0BAAA;AAAA,OAC3B;AAAA,MACA,QAAA,EAAU,WAAW,CAAG,EAAA,QAAQ,IAAI,aAAa,CAAA,CAAA,EAAI,QAAQ,CAAK,CAAA,GAAA,EAAA;AAAA,MAClE,IAAA,EAAM,OAAO,eAAe,CAAA;AAAA,MAC5B,WAAa,EAAA;AAAA,QACX,OAAA;AAAA,QACA,OAAS,EAAA,cAAA;AAAA,QACT,KAAO,EAAA,YAAA;AAAA,OACT;AAAA,MACA,WAAY,EAAA,MAAA;AAAA,KAAA;AAAA,GAEhB,CACF,CAAA,CAAA;AAEJ;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MembersDropdownOption.esm.js","sources":["../../../src/components/CreateRole/MembersDropdownOption.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { Box, makeStyles } from '@material-ui/core';\nimport { AutocompleteRenderOptionState } from '@material-ui/lab/Autocomplete';\nimport Typography from '@mui/material/Typography';\nimport match from 'autosuggest-highlight/match';\nimport parse from 'autosuggest-highlight/parse';\n\nimport { SelectedMember } from './types';\n\ntype MembersDropdownOptionProps = {\n  option: SelectedMember;\n  state: AutocompleteRenderOptionState;\n};\n\nconst useStyles = makeStyles(theme => ({\n  optionLabel: {\n    color: theme.palette.text.primary,\n  },\n  optionDescription: {\n    color: theme.palette.text.secondary,\n  },\n}));\n\nexport const MembersDropdownOption = ({\n  option,\n  state,\n}: MembersDropdownOptionProps) => {\n  const classes = useStyles();\n  const { inputValue } = state;\n  const { label, etag } = option;\n  const matches = match(label, inputValue, { insideWords: true });\n  const parts = parse(label, matches);\n\n  return (\n    <Box key={`${etag}`}>\n      {parts.map(part => (\n        <Typography\n          key={`${part.text}-${etag}`}\n          component=\"span\"\n          className={classes.optionLabel}\n          sx={{\n            fontWeight: part.highlight ? 400 : 700,\n          }}\n          data-testid={option.label}\n        >\n          {part.text}\n        </Typography>\n      ))}\n      <br />\n      <Typography className={classes.optionDescription}>\n        {option.description}\n      </Typography>{' '}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA8BA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,WAAa,EAAA;AAAA,IACX,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,GAC5B;AAAA,EACA,iBAAmB,EAAA;AAAA,IACjB,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA;AAAA,GAC5B;AACF,CAAE,CAAA,CAAA,CAAA;AAEK,MAAM,wBAAwB,CAAC;AAAA,EACpC,MAAA;AAAA,EACA,KAAA;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAM,MAAA,EAAE,YAAe,GAAA,KAAA,CAAA;AACvB,EAAM,MAAA,EAAE,KAAO,EAAA,IAAA,EAAS,GAAA,MAAA,CAAA;AACxB,EAAA,MAAM,UAAU,KAAM,CAAA,KAAA,EAAO,YAAY,EAAE,WAAA,EAAa,MAAM,CAAA,CAAA;AAC9D,EAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,KAAA,EAAO,OAAO,CAAA,CAAA;AAElC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAI,GAAK,EAAA,CAAA,EAAG,IAAI,CACd,CAAA,EAAA,EAAA,KAAA,CAAM,IAAI,CACT,IAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,CAAA,EAAG,IAAK,CAAA,IAAI,IAAI,IAAI,CAAA,CAAA;AAAA,MACzB,SAAU,EAAA,MAAA;AAAA,MACV,WAAW,OAAQ,CAAA,WAAA;AAAA,MACnB,EAAI,EAAA;AAAA,QACF,UAAA,EAAY,IAAK,CAAA,SAAA,GAAY,GAAM,GAAA,GAAA;AAAA,OACrC;AAAA,MACA,eAAa,MAAO,CAAA,KAAA;AAAA,KAAA;AAAA,IAEnB,IAAK,CAAA,IAAA;AAAA,GAET,CAAA,kBACA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAG,CACJ,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,iBAAA,EAAA,EAC5B,MAAO,CAAA,WACV,GAAc,GAChB,CAAA,CAAA;AAEJ;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionPoliciesForm.esm.js","sources":["../../../src/components/CreateRole/PermissionPoliciesForm.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { useAsync } from 'react-use';\n\nimport { Progress } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nimport { makeStyles } from '@material-ui/core';\nimport Button from '@material-ui/core/Button';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport AddIcon from '@mui/icons-material/Add';\nimport { FormikErrors } from 'formik';\n\nimport { rbacApiRef } from '../../api/RBACBackendClient';\nimport { useConditionRules } from '../../hooks/useConditionRules';\nimport { PermissionsData } from '../../types';\nimport { getPluginsPermissionPoliciesData } from '../../utils/create-role-utils';\nimport { ConditionsData } from '../ConditionalAccess/types';\nimport { initialPermissionPolicyRowValue } from './const';\nimport { PermissionPoliciesFormRow } from './PermissionPoliciesFormRow';\nimport { RoleFormValues } from './types';\n\nconst useStyles = makeStyles(theme => ({\n  permissionPoliciesForm: {\n    padding: '20px',\n    border: `2px solid ${theme.palette.border}`,\n    borderRadius: '5px',\n  },\n  addButton: {\n    color: theme.palette.primary.light,\n  },\n}));\n\ntype PermissionPoliciesFormProps = {\n  permissionPoliciesRows: PermissionsData[];\n  permissionPoliciesRowsError: FormikErrors<PermissionsData>[];\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>;\n  setFieldError: (field: string, value: string | undefined) => void;\n  handleBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n};\n\nexport const PermissionPoliciesForm = ({\n  permissionPoliciesRows,\n  permissionPoliciesRowsError,\n  setFieldValue,\n  setFieldError,\n  handleBlur,\n}: PermissionPoliciesFormProps) => {\n  const classes = useStyles();\n  const rbacApi = useApi(rbacApiRef);\n  const conditionRules = useConditionRules();\n\n  const {\n    value: permissionPolicies,\n    loading: permissionPoliciesLoading,\n    error: permissionPoliciesErr,\n  } = useAsync(async () => {\n    return await rbacApi.listPermissions();\n  });\n\n  const permissionPoliciesData =\n    !permissionPoliciesLoading && Array.isArray(permissionPolicies)\n      ? getPluginsPermissionPoliciesData(permissionPolicies)\n      : undefined;\n\n  const onChangePlugin = (plugin: string, index: number) => {\n    setFieldValue(`permissionPoliciesRows[${index}].plugin`, plugin, true);\n    setFieldValue(`permissionPoliciesRows[${index}].permission`, '', false);\n    setFieldValue(`permissionPoliciesRows[${index}].isResourced`, false, false);\n    setFieldValue(\n      `permissionPoliciesRows[${index}].conditions`,\n      undefined,\n      false,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].policies`,\n      initialPermissionPolicyRowValue.policies,\n      false,\n    );\n  };\n\n  const onChangePermission = (\n    permission: string,\n    index: number,\n    isResourced: boolean,\n    policies?: string[],\n  ) => {\n    setFieldValue(\n      `permissionPoliciesRows[${index}].permission`,\n      permission,\n      true,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].isResourced`,\n      isResourced,\n      false,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].conditions`,\n      undefined,\n      false,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].policies`,\n      policies\n        ? policies.map(p => ({ policy: p, effect: 'allow' }))\n        : initialPermissionPolicyRowValue.policies,\n      false,\n    );\n  };\n\n  const onChangePolicy = (\n    isChecked: boolean,\n    policyIndex: number,\n    index: number,\n  ) => {\n    setFieldValue(\n      `permissionPoliciesRows[${index}].policies[${policyIndex}].effect`,\n      isChecked ? 'allow' : 'deny',\n      true,\n    );\n  };\n\n  const onAddConditions = (index: number, conditions?: ConditionsData) => {\n    setFieldValue(`permissionPoliciesRows[${index}].conditions`, conditions);\n    if (!conditions)\n      setFieldValue(`permissionPoliciesRows[${index}].id`, undefined);\n  };\n\n  const onRowRemove = (index: number) => {\n    const finalPps = permissionPoliciesRows.filter(\n      (_pp, ppIndex) => index !== ppIndex,\n    );\n    setFieldError(`permissionPoliciesRows[${index}]`, undefined);\n    setFieldValue('permissionPoliciesRows', finalPps, false);\n  };\n\n  const onRowAdd = () =>\n    setFieldValue(\n      'permissionPoliciesRows',\n      [...permissionPoliciesRows, initialPermissionPolicyRowValue],\n      false,\n    );\n\n  return (\n    <div>\n      <FormHelperText>\n        Permission policies can be selected for each plugin. You can add\n        multiple permission policies using +Add option.\n      </FormHelperText>\n      <br />\n      {permissionPoliciesLoading ? (\n        <Progress />\n      ) : (\n        <div className={classes.permissionPoliciesForm}>\n          {permissionPoliciesRows.map((pp, index) => (\n            <PermissionPoliciesFormRow\n              key={index}\n              permissionPoliciesRowError={\n                permissionPoliciesRowsError?.[index] ?? {}\n              }\n              rowName={`permissionPoliciesRows[${index}]`}\n              permissionPoliciesRowData={pp}\n              permissionPoliciesData={permissionPoliciesData}\n              rowCount={permissionPoliciesRows.length}\n              conditionRules={conditionRules}\n              onChangePlugin={(plugin: string) => onChangePlugin(plugin, index)}\n              onChangePermission={(\n                permission: string,\n                isResourced: boolean,\n                policies?: string[],\n              ) => onChangePermission(permission, index, isResourced, policies)}\n              onChangePolicy={(isChecked: boolean, policyIndex: number) =>\n                onChangePolicy(isChecked, policyIndex, index)\n              }\n              onAddConditions={(conditions?: ConditionsData) =>\n                onAddConditions(index, conditions)\n              }\n              onRemove={() => onRowRemove(index)}\n              handleBlur={handleBlur}\n              getPermissionDisabled={(permission: string) => {\n                const pluginPermissionPolicies = permissionPoliciesRows.filter(\n                  ppr => ppr.plugin === pp.plugin,\n                );\n                const previouslySelectedPermission =\n                  !!pluginPermissionPolicies.find(\n                    ppp => ppp.permission === permission,\n                  );\n                return (\n                  previouslySelectedPermission &&\n                  !permissionPoliciesData?.pluginsPermissions[pp.plugin]\n                    ?.policies[permission ?? '']?.isResourced\n                );\n              }}\n            />\n          ))}\n          <Button\n            className={classes.addButton}\n            size=\"small\"\n            onClick={onRowAdd}\n            name=\"add-permission-policy\"\n          >\n            <AddIcon />\n            Add\n          </Button>\n        </div>\n      )}\n      {!permissionPoliciesLoading &&\n        (permissionPoliciesErr?.message ||\n          !Array.isArray(permissionPolicies)) && (\n          <>\n            <br />\n            <FormHelperText error>\n              {`Error fetching the permission policies: ${\n                permissionPoliciesErr?.message ||\n                (permissionPolicies as Response)?.statusText\n              }`}\n            </FormHelperText>\n          </>\n        )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

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

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