From 7843c93dc51a8724e58e7c8d5d09804ce21e8d62 Mon Sep 17 00:00:00 2001
From: Simon Hornby <liquidwicked64@gmail.com>
Date: Fri, 15 Sep 2023 11:51:29 +0200
Subject: [PATCH] feat: add a button to download user access information
 (#4746)

---
 .../accessOverview/AccessOverview.tsx         | 17 +++++++++++
 .../admin/users/UsersList/UsersList.tsx       | 25 +++++++++++++++-
 .../useAccessOverviewApi.tsx                  | 30 +++++++++++++++++++
 frontend/src/interfaces/uiConfig.ts           |  1 +
 .../__snapshots__/create-config.test.ts.snap  |  2 ++
 src/lib/types/experimental.ts                 |  5 ++++
 src/server-dev.ts                             |  1 +
 7 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/component/accessOverview/AccessOverview.tsx
 create mode 100644 frontend/src/hooks/api/actions/useAccessOverviewApi/useAccessOverviewApi.tsx

diff --git a/frontend/src/component/accessOverview/AccessOverview.tsx b/frontend/src/component/accessOverview/AccessOverview.tsx
new file mode 100644
index 0000000000..c058f3df9e
--- /dev/null
+++ b/frontend/src/component/accessOverview/AccessOverview.tsx
@@ -0,0 +1,17 @@
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import { PermissionGuard } from 'component/common/PermissionGuard/PermissionGuard';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
+import { IconButton } from '@mui/material';
+import { Download } from '@mui/icons-material';
+import { useAccessOverviewApi } from 'hooks/api/actions/useAccessOverviewApi/useAccessOverviewApi';
+
+export const AccessOverview = () => {
+    const { downloadCSV } = useAccessOverviewApi();
+
+    return (
+        <IconButton onClick={downloadCSV}>
+            <Download />
+        </IconButton>
+    );
+};
diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx
index 9589027085..027b107e81 100644
--- a/frontend/src/component/admin/users/UsersList/UsersList.tsx
+++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx
@@ -6,6 +6,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import ConfirmUserAdded from '../ConfirmUserAdded/ConfirmUserAdded';
 import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
 import useAdminUsersApi from 'hooks/api/actions/useAdminUsersApi/useAdminUsersApi';
+import { useAccessOverviewApi } from 'hooks/api/actions/useAccessOverviewApi/useAccessOverviewApi';
 import { IUser } from 'interfaces/user';
 import { IRole } from 'interfaces/role';
 import useToast from 'hooks/useToast';
@@ -13,7 +14,7 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import { useUsersPlan } from 'hooks/useUsersPlan';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import { Button, useMediaQuery } from '@mui/material';
+import { Button, IconButton, Tooltip, useMediaQuery } from '@mui/material';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { UserTypeCell } from './UserTypeCell/UserTypeCell';
 import { useFlexLayout, useSortBy, useTable } from 'react-table';
@@ -31,12 +32,15 @@ import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColum
 import { UserLimitWarning } from './UserLimitWarning/UserLimitWarning';
 import { RoleCell } from 'component/common/Table/cells/RoleCell/RoleCell';
 import { useSearch } from 'hooks/useSearch';
+import { Download } from '@mui/icons-material';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const UsersList = () => {
     const navigate = useNavigate();
     const { users, roles, refetch, loading } = useUsers();
     const { setToastData, setToastApiError } = useToast();
     const { removeUser, userLoading, userApiErrors } = useAdminUsersApi();
+    const { downloadCSV } = useAccessOverviewApi();
     const [pwDialog, setPwDialog] = useState<{ open: boolean; user?: IUser }>({
         open: false,
     });
@@ -47,6 +51,8 @@ const UsersList = () => {
     const [delUser, setDelUser] = useState<IUser>();
     const { planUsers, isBillingUsers } = useUsersPlan(users);
 
+    const accessOverviewEnabled = useUiFlag('accessOverview');
+
     const [searchValue, setSearchValue] = useState('');
 
     const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
@@ -263,6 +269,23 @@ const UsersList = () => {
                                 onChange={setSearchValue}
                             />
                             <PageHeader.Divider />
+
+                            <ConditionallyRender
+                                condition={Boolean(accessOverviewEnabled)}
+                                show={() => (
+                                    <>
+                                        <Tooltip
+                                            title="Exports user access information"
+                                            arrow
+                                            describeChild
+                                        >
+                                            <IconButton onClick={downloadCSV}>
+                                                <Download />
+                                            </IconButton>
+                                        </Tooltip>
+                                    </>
+                                )}
+                            />
                             <Button
                                 variant="contained"
                                 color="primary"
diff --git a/frontend/src/hooks/api/actions/useAccessOverviewApi/useAccessOverviewApi.tsx b/frontend/src/hooks/api/actions/useAccessOverviewApi/useAccessOverviewApi.tsx
new file mode 100644
index 0000000000..404a20a21f
--- /dev/null
+++ b/frontend/src/hooks/api/actions/useAccessOverviewApi/useAccessOverviewApi.tsx
@@ -0,0 +1,30 @@
+import useAPI from '../useApi/useApi';
+
+export const useAccessOverviewApi = () => {
+    const { loading, makeRequest, createRequest, errors } = useAPI({
+        propagateErrors: true,
+    });
+
+    const downloadCSV = async () => {
+        const requestId = 'downloadCSV';
+        const req = createRequest(
+            'api/admin/access/overview',
+            {
+                method: 'GET',
+                responseType: 'blob',
+                headers: { Accept: 'text/csv' },
+            },
+            requestId
+        );
+
+        const file = await (await makeRequest(req.caller, req.id)).blob();
+        const url = window.URL.createObjectURL(file);
+        window.location.assign(url);
+    };
+
+    return {
+        downloadCSV,
+        errors,
+        loading,
+    };
+};
diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
index 471cf28913..2be6feb114 100644
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/frontend/src/interfaces/uiConfig.ts
@@ -66,6 +66,7 @@ export type UiFlags = {
     doraMetrics?: boolean;
     variantTypeNumber?: boolean;
     privateProjects?: boolean;
+    accessOverview?: boolean;
     [key: string]: boolean | Variant | undefined;
 };
 
diff --git a/src/lib/__snapshots__/create-config.test.ts.snap b/src/lib/__snapshots__/create-config.test.ts.snap
index 81104ce51d..b8889fc763 100644
--- a/src/lib/__snapshots__/create-config.test.ts.snap
+++ b/src/lib/__snapshots__/create-config.test.ts.snap
@@ -71,6 +71,7 @@ exports[`should create default config 1`] = `
       "isEnabled": [Function],
     },
     "flags": {
+      "accessOverview": false,
       "anonymiseEventLog": false,
       "caseInsensitiveInOperators": false,
       "customRootRolesKillSwitch": false,
@@ -108,6 +109,7 @@ exports[`should create default config 1`] = `
   },
   "flagResolver": FlagResolver {
     "experiments": {
+      "accessOverview": false,
       "anonymiseEventLog": false,
       "caseInsensitiveInOperators": false,
       "customRootRolesKillSwitch": false,
diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts
index abfd26b0f0..82d85088fe 100644
--- a/src/lib/types/experimental.ts
+++ b/src/lib/types/experimental.ts
@@ -29,6 +29,7 @@ export type IFlagKey =
     | 'featureNamingPattern'
     | 'doraMetrics'
     | 'variantTypeNumber'
+    | 'accessOverview'
     | 'privateProjects';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
@@ -137,6 +138,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_PRIVATE_PROJECTS,
         false,
     ),
+    accessOverview: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_ACCESS_OVERVIEW,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {
diff --git a/src/server-dev.ts b/src/server-dev.ts
index c9041eb559..4e5547de6b 100644
--- a/src/server-dev.ts
+++ b/src/server-dev.ts
@@ -44,6 +44,7 @@ process.nextTick(async () => {
                         doraMetrics: true,
                         variantTypeNumber: true,
                         privateProjects: true,
+                        accessOverview: true,
                     },
                 },
                 authentication: {