feat: introduce admin apps page (#1296)

* feat: introduce admin apps page

* feat: add access restriction and fix incorrectly placed key prop

packages/web/src/components/AdminSettingsLayout/index.tsx

@@ -3,6 +3,8 @@ import GroupIcon from '@mui/icons-material/Group';
 import GroupsIcon from '@mui/icons-material/Groups';
 import LockIcon from '@mui/icons-material/LockPerson';
 import BrushIcon from '@mui/icons-material/Brush';
+import AppsIcon from '@mui/icons-material/Apps';
+
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import { useTheme } from '@mui/material/styles';
@@ -30,11 +32,13 @@ function createDrawerLinks({
   canReadUser,
   canUpdateConfig,
   canManageSamlAuthProvider,
+  canUpdateApp,
 }: {
   canReadRole: boolean;
   canReadUser: boolean;
   canUpdateConfig: boolean;
   canManageSamlAuthProvider: boolean;
+  canUpdateApp: boolean;
 }) {
   const items = [
     canReadUser
@@ -69,6 +73,14 @@ function createDrawerLinks({
           dataTest: 'authentication-drawer-link',
         }
       : null,
+    canUpdateApp
+      ? {
+          Icon: AppsIcon,
+          primary: 'adminSettingsDrawer.apps',
+          to: URLS.ADMIN_APPS,
+          dataTest: 'apps-drawer-link',
+        }
+      : null,
   ].filter(Boolean) as DrawerLink[];
 
   return items;
@@ -101,6 +113,7 @@ export default function SettingsLayout({
       currentUserAbility.can('read', 'SamlAuthProvider') &&
       currentUserAbility.can('update', 'SamlAuthProvider') &&
       currentUserAbility.can('create', 'SamlAuthProvider'),
+    canUpdateApp: currentUserAbility.can('update', 'App'),
   });
 
   return (

packages/web/src/components/AppRow/index.tsx

@@ -7,13 +7,13 @@ import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 
 import useFormatMessage from 'hooks/useFormatMessage';
 import AppIcon from 'components/AppIcon';
-import * as URLS from 'config/urls';
 import type { IApp } from '@automatisch/types';
 
 import { CardContent, Typography } from './style';
 
 type AppRowProps = {
   application: IApp;
+  url: string;
 };
 
 const countTranslation = (value: React.ReactNode) => (
@@ -25,11 +25,11 @@ const countTranslation = (value: React.ReactNode) => (
 
 function AppRow(props: AppRowProps): React.ReactElement {
   const formatMessage = useFormatMessage();
-  const { name, key, primaryColor, iconUrl, connectionCount, flowCount } =
+  const { name, primaryColor, iconUrl, connectionCount, flowCount } =
     props.application;
 
   return (
-    <Link to={URLS.APP(key)} data-test="app-row">
+    <Link to={props.url} data-test="app-row">
       <Card sx={{ mb: 1 }}>
         <CardActionArea>
           <CardContent>
@@ -48,7 +48,7 @@ function AppRow(props: AppRowProps): React.ReactElement {
                 sx={{ display: ['none', 'inline-block'] }}
               >
                 {formatMessage('app.connectionCount', {
-                  count: countTranslation(connectionCount),
+                  count: countTranslation(connectionCount || '-'),
                 })}
               </Typography>
             </Box>
@@ -60,7 +60,7 @@ function AppRow(props: AppRowProps): React.ReactElement {
                 sx={{ display: ['none', 'inline-block'] }}
               >
                 {formatMessage('app.flowCount', {
-                  count: countTranslation(flowCount),
+                  count: countTranslation(flowCount || '-'),
                 })}
               </Typography>
             </Box>