[PUI] Add permissions to groups (#7621)

* Add permissions to group API

* factor out permission formatting

* add group permission details to UI

* add nicer accordions with permissions

* add group to models

* Add Admin button to change permissions

* add missing instance renderer

* turn off default view permission to everything

* add  migration

* fix rule assigment

* Add now missing view permissions

* Adjust test for the now new default permission count

* add missing view permission

* fix permissions for search test

* adjust search testing to also account for missing permissions

* adjust to new defaults

* expand role testing

---------

Co-authored-by: Oliver <oliver.henry.walters@gmail.com>

src/frontend/src/components/render/Instance.tsx

@@ -37,7 +37,7 @@ import {
   RenderStockLocation,
   RenderStockLocationType
 } from './Stock';
-import { RenderOwner, RenderUser } from './User';
+import { RenderGroup, RenderOwner, RenderUser } from './User';
 
 type EnumDictionary<T extends string | symbol | number, U> = {
   [K in T]: U;
@@ -81,6 +81,7 @@ const RendererLookup: EnumDictionary<
   [ModelType.stockhistory]: RenderStockItem,
   [ModelType.supplierpart]: RenderSupplierPart,
   [ModelType.user]: RenderUser,
+  [ModelType.group]: RenderGroup,
   [ModelType.importsession]: RenderImportSession,
   [ModelType.reporttemplate]: RenderReportTemplate,
   [ModelType.labeltemplate]: RenderLabelTemplate,

src/frontend/src/components/render/ModelType.tsx

@@ -201,6 +201,14 @@ export const ModelInformationDict: ModelDict = {
     url_detail: '/user/:pk/',
     api_endpoint: ApiEndpoints.user_list
   },
+  group: {
+    label: t`Group`,
+    label_multiple: t`Groups`,
+    url_overview: '/user/group',
+    url_detail: '/user/group-:pk',
+    api_endpoint: ApiEndpoints.group_list,
+    admin_url: '/auth/group/'
+  },
   importsession: {
     label: t`Import Session`,
     label_multiple: t`Import Sessions`,

src/frontend/src/components/render/User.tsx

@@ -28,3 +28,9 @@ export function RenderUser({
     )
   );
 }
+
+export function RenderGroup({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
+  return instance && <RenderInlineModel primary={instance.name} />;
+}

src/frontend/src/enums/ModelType.tsx

@@ -27,6 +27,7 @@ export enum ModelType {
   contact = 'contact',
   owner = 'owner',
   user = 'user',
+  group = 'group',
   reporttemplate = 'reporttemplate',
   labeltemplate = 'labeltemplate',
   pluginconfig = 'pluginconfig'

src/frontend/src/tables/settings/GroupTable.tsx

@@ -1,13 +1,23 @@
 import { Trans, t } from '@lingui/macro';
-import { Group, LoadingOverlay, Stack, Text, Title } from '@mantine/core';
+import {
+  Accordion,
+  Group,
+  LoadingOverlay,
+  Pill,
+  PillGroup,
+  Stack,
+  Text,
+  Title
+} from '@mantine/core';
 import { useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
+import AdminButton from '../../components/buttons/AdminButton';
 import { EditApiForm } from '../../components/forms/ApiForm';
-import { PlaceholderPill } from '../../components/items/Placeholder';
 import { DetailDrawer } from '../../components/nav/DetailDrawer';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
+import { ModelType } from '../../enums/ModelType';
 import {
   useCreateApiFormModal,
   useDeleteApiFormModal
@@ -32,14 +42,42 @@ export function GroupDrawer({
   refreshTable: () => void;
 }) {
   const {
+    instance,
     refreshInstance,
     instanceQuery: { isFetching, error }
   } = useInstance({
     endpoint: ApiEndpoints.group_list,
     pk: id,
-    throwError: true
+    throwError: true,
+    params: {
+      permission_detail: true
+    }
   });
 
+  const permissionsAccordion = useMemo(() => {
+    if (!instance?.permissions) return null;
+
+    const data = instance.permissions;
+    return (
+      <Accordion w={'100%'}>
+        {Object.keys(data).map((key) => (
+          <Accordion.Item key={key} value={key}>
+            <Accordion.Control>
+              <Pill>{instance.permissions[key].length}</Pill> {key}
+            </Accordion.Control>
+            <Accordion.Panel>
+              <PillGroup>
+                {data[key].map((perm: string) => (
+                  <Pill key={perm}>{perm}</Pill>
+                ))}
+              </PillGroup>
+            </Accordion.Panel>
+          </Accordion.Item>
+        ))}
+      </Accordion>
+    );
+  }, [instance]);
+
   if (isFetching) {
     return <LoadingOverlay visible={true} />;
   }
@@ -72,13 +110,13 @@ export function GroupDrawer({
         }}
         id={`group-detail-drawer-${id}`}
       />
-
-      <Title order={5}>
-        <Trans>Permission set</Trans>
-      </Title>
-      <Group>
-        <PlaceholderPill />
+      <Group justify="space-between">
+        <Title order={5}>
+          <Trans>Permission set</Trans>
+        </Title>
+        <AdminButton model={ModelType.group} pk={instance.pk} />
       </Group>
+      <Group>{permissionsAccordion}</Group>
     </Stack>
   );
 }