ServiceAccount : use InteractiveTable

public/app/features/serviceaccounts/ServiceAccountTable.tsx

@@ -0,0 +1,225 @@
+import React, { useMemo } from 'react';
+import Skeleton from 'react-loading-skeleton';
+
+import {
+  Avatar,
+  CellProps,
+  Column,
+  InteractiveTable,
+  Pagination,
+  Stack,
+  TextLink,
+  Button,
+  IconButton,
+  Icon,
+} from '@grafana/ui';
+import { UserRolePicker } from 'app/core/components/RolePicker/UserRolePicker';
+import { contextSrv } from 'app/core/core';
+import { AccessControlAction, OrgRole, Role, ServiceAccountDTO } from 'app/types';
+
+import { OrgRolePicker } from '../admin/OrgRolePicker';
+
+type Cell<T extends keyof ServiceAccountDTO = keyof ServiceAccountDTO> = CellProps<
+  ServiceAccountDTO,
+  ServiceAccountDTO[T]
+>;
+
+interface ServiceAccountTableProps {
+  services: ServiceAccountDTO[];
+  onRoleChange: (role: OrgRole, serviceAccount: ServiceAccountDTO) => void;
+  roleOptions: Role[];
+  onRemoveButtonClick: (serviceAccount: ServiceAccountDTO) => void;
+  onDisable: (serviceAccount: ServiceAccountDTO) => void;
+  onEnable: (serviceAccount: ServiceAccountDTO) => void;
+  onAddTokenClick: (serviceAccount: ServiceAccountDTO) => void;
+  showPaging?: boolean;
+  totalPages: number;
+  onChangePage: (page: number) => void;
+  currentPage: number;
+  isLoading: boolean;
+}
+
+export const ServiceAccountTable = ({
+  services,
+  onRoleChange,
+  roleOptions,
+  onRemoveButtonClick,
+  onDisable,
+  onEnable,
+  onAddTokenClick,
+  showPaging,
+  totalPages,
+  onChangePage,
+  currentPage,
+  isLoading,
+}: ServiceAccountTableProps) => {
+  const displayRolePicker =
+    contextSrv.hasPermission(AccessControlAction.ActionRolesList) &&
+    contextSrv.hasPermission(AccessControlAction.ActionUserRolesList);
+
+  const getCellContent = (
+    value: string,
+    original: ServiceAccountDTO,
+    isLoading: boolean,
+    columnName?: Column<ServiceAccountDTO>['id']
+  ) => {
+    if (isLoading) {
+      return columnName === 'avatarUrl' ? <Skeleton circle width={24} height={24} /> : <Skeleton width={100} />;
+    }
+    const href = `/org/serviceaccounts/${original.id}`;
+    const ariaLabel = `Edit service account's ${name} details`;
+    switch (columnName) {
+      case 'avatarUrl':
+        return (
+          <a aria-label={ariaLabel} href={href}>
+            <Avatar src={value} alt={'User avatar'} />
+          </a>
+        );
+      case 'id':
+        return (
+          <TextLink href={href} aria-label={ariaLabel} color="secondary">
+            {original.login}
+          </TextLink>
+        );
+      case 'tokens':
+        return (
+          <Stack alignItems="center">
+            <Icon name="key-skeleton-alt"></Icon>
+            <TextLink href={href} aria-label={ariaLabel} color="primary">
+              {value || 'No tokens'}
+            </TextLink>
+          </Stack>
+        );
+      default:
+        return (
+          <TextLink href={href} aria-label={ariaLabel} color="primary">
+            {value}
+          </TextLink>
+        );
+    }
+  };
+
+  const columns: Array<Column<ServiceAccountDTO>> = useMemo(
+    () => [
+      {
+        id: 'avatarUrl',
+        header: '',
+        cell: ({ cell: { value }, row: { original } }: Cell<'role'>) => {
+          return getCellContent(value, original, isLoading, 'avatarUrl');
+        },
+        sortType: 'string',
+      },
+      {
+        id: 'name',
+        header: 'Account',
+        cell: ({ cell: { value }, row: { original } }: Cell<'role'>) => {
+          return getCellContent(value, original, isLoading);
+        },
+        sortType: 'string',
+      },
+      {
+        id: 'id',
+        header: 'ID',
+        cell: ({ cell: { value }, row: { original } }: Cell<'role'>) => {
+          return getCellContent(value, original, isLoading, 'id');
+        },
+        sortType: 'string',
+      },
+      {
+        id: 'role',
+        header: 'Roles',
+        cell: ({ cell: { value }, row: { original } }: Cell<'role'>) => {
+          const canUpdateRole = contextSrv.hasPermissionInMetadata(AccessControlAction.ServiceAccountsWrite, original);
+          return isLoading ? (
+            <Skeleton width={100} />
+          ) : contextSrv.licensedAccessControlEnabled() ? (
+            displayRolePicker && (
+              <UserRolePicker
+                userId={original.id}
+                orgId={original.orgId}
+                basicRole={value}
+                roles={original.roles || []}
+                onBasicRoleChange={(newRole) => onRoleChange(newRole, original)}
+                roleOptions={roleOptions}
+                basicRoleDisabled={!canUpdateRole}
+                disabled={original.isExternal || original.isDisabled}
+                width={40}
+              />
+            )
+          ) : (
+            <OrgRolePicker
+              aria-label="Role"
+              value={value}
+              disabled={original.isExternal || !canUpdateRole || original.isDisabled}
+              onChange={(newRole) => onRoleChange(newRole, original)}
+            />
+          );
+        },
+      },
+      {
+        id: 'tokens',
+        header: 'Tokens',
+        cell: ({ cell: { value }, row: { original } }: Cell<'role'>) => {
+          return getCellContent(value, original, isLoading, 'tokens');
+        },
+        sortType: 'number',
+      },
+      {
+        id: 'actions',
+        header: '',
+        cell: ({ row: { original } }: Cell) => {
+          return isLoading ? (
+            <Skeleton width={100} />
+          ) : !original.isExternal ? (
+            <Stack alignItems="center" justifyContent="flex-end">
+              {contextSrv.hasPermission(AccessControlAction.ServiceAccountsWrite) && !original.tokens && (
+                <Button onClick={() => onAddTokenClick(original)} disabled={original.isDisabled}>
+                  Add token
+                </Button>
+              )}
+              {contextSrv.hasPermissionInMetadata(AccessControlAction.ServiceAccountsWrite, original) &&
+                (original.isDisabled ? (
+                  <Button variant="secondary" size="md" onClick={() => onEnable(original)}>
+                    Enable
+                  </Button>
+                ) : (
+                  <Button variant="secondary" size="md" onClick={() => onDisable(original)}>
+                    Disable
+                  </Button>
+                ))}
+
+              {contextSrv.hasPermissionInMetadata(AccessControlAction.ServiceAccountsDelete, original) && (
+                <IconButton
+                  name="trash-alt"
+                  aria-label={`Delete service account ${original.name}`}
+                  variant="secondary"
+                  onClick={() => onRemoveButtonClick(original)}
+                />
+              )}
+            </Stack>
+          ) : (
+            <Stack alignItems="center" justifyContent="flex-end">
+              <IconButton
+                disabled={true}
+                name="lock"
+                size="md"
+                tooltip={`This is a managed service account and cannot be modified.`}
+              />
+            </Stack>
+          );
+        },
+      },
+    ],
+    [displayRolePicker, isLoading, onAddTokenClick, onDisable, onEnable, onRemoveButtonClick, onRoleChange, roleOptions]
+  );
+  return (
+    <Stack direction={'column'} gap={2}>
+      <InteractiveTable columns={columns} data={services} getRowId={(service) => String(service.id)} />
+      {showPaging && totalPages > 1 && (
+        <Stack justifyContent={'flex-end'}>
+          <Pagination numberOfPages={totalPages} currentPage={currentPage} onNavigate={onChangePage} />
+        </Stack>
+      )}
+    </Stack>
+  );
+};

public/app/features/serviceaccounts/ServiceAccountsListPage.test.tsx

@@ -77,7 +77,7 @@ const getDefaultServiceAccount: () => ServiceAccountDTO = () => ({
 });
 
 describe('ServiceAccountsListPage tests', () => {
-  it('Should display list of service accounts', () => {
+  it('Should display list of service accounts', async () => {
     setup({
       serviceAccounts: [getDefaultServiceAccount()],
     });
@@ -153,7 +153,7 @@ describe('ServiceAccountsListPage tests', () => {
     });
 
     const user = userEvent.setup();
-    await user.click(screen.getByLabelText(/Delete service account/));
+    await user.click(screen.getByLabelText(`Delete service account ${getDefaultServiceAccount().name}`));
     await user.click(screen.getByRole('button', { name: 'Delete' }));
 
     expect(deleteServiceAccountMock).toHaveBeenCalledWith(42);