Refactor api keys to use TablePage component

src/apps/dashboard/components/table/TablePage.tsx

@@ -1,4 +1,5 @@
 import Box from '@mui/material/Box/Box';
+import Stack from '@mui/material/Stack/Stack';
 import Typography from '@mui/material/Typography/Typography';
 import { type MRT_RowData, type MRT_TableInstance, MaterialReactTable } from 'material-react-table';
 import React from 'react';
@@ -7,6 +8,7 @@ import Page, { type PageProps } from 'components/Page';
 
 interface TablePageProps<T extends MRT_RowData> extends PageProps {
     title: string
+    subtitle?: string
     table: MRT_TableInstance<T>
 }
 
@@ -27,6 +29,7 @@ export const DEFAULT_TABLE_OPTIONS = {
 
 const TablePage = <T extends MRT_RowData>({
     title,
+    subtitle,
     table,
     children,
     ...pageProps
@@ -44,7 +47,8 @@ const TablePage = <T extends MRT_RowData>({
                     height: '100%'
                 }}
             >
-                <Box
+                <Stack
+                    spacing={2}
                     sx={{
                         marginBottom: 1
                     }}
@@ -52,7 +56,12 @@ const TablePage = <T extends MRT_RowData>({
                     <Typography variant='h2'>
                         {title}
                     </Typography>
-                </Box>
+                    {subtitle && (
+                        <Typography>
+                            {subtitle}
+                        </Typography>
+                    )}
+                </Stack>
                 <MaterialReactTable table={table} />
             </Box>
             {children}

src/apps/dashboard/routes/activity/index.tsx

@@ -40,7 +40,7 @@ const getUserCell = (users: UsersRecords) => function UserCell({ row }: Activity
     );
 };
 
-const Activity = () => {
+export const Component = () => {
     const [ searchParams, setSearchParams ] = useSearchParams();
 
     const [ activityView, setActivityView ] = useState(
@@ -201,4 +201,4 @@ const Activity = () => {
     );
 };
 
-export default Activity;
+Component.displayName = 'ActivityPage';

src/apps/dashboard/routes/keys/index.tsx

@@ -1,26 +1,25 @@
-import parseISO from 'date-fns/parseISO';
-
-import DateTimeCell from 'apps/dashboard/components/table/DateTimeCell';
-import Page from 'components/Page';
-import { useApi } from 'hooks/useApi';
-import globalize from 'lib/globalize';
-import React, { useCallback, useMemo } from 'react';
 import type { AuthenticationInfo } from '@jellyfin/sdk/lib/generated-client/models/authentication-info';
-import confirm from 'components/confirm/confirm';
-import { useApiKeys } from 'apps/dashboard/features/keys/api/useApiKeys';
-import { useRevokeKey } from 'apps/dashboard/features/keys/api/useRevokeKey';
-import { useCreateKey } from 'apps/dashboard/features/keys/api/useCreateKey';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
-import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
-import { MaterialReactTable, MRT_ColumnDef, useMaterialReactTable } from 'material-react-table';
-import DeleteIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import parseISO from 'date-fns/parseISO';
+import { type MRT_ColumnDef, useMaterialReactTable } from 'material-react-table';
+import React, { useCallback, useMemo } from 'react';
 
-const ApiKeys = () => {
+import DateTimeCell from 'apps/dashboard/components/table/DateTimeCell';
+import TablePage from 'apps/dashboard/components/table/TablePage';
+import { useApiKeys } from 'apps/dashboard/features/keys/api/useApiKeys';
+import { useRevokeKey } from 'apps/dashboard/features/keys/api/useRevokeKey';
+import { useCreateKey } from 'apps/dashboard/features/keys/api/useCreateKey';
+import confirm from 'components/confirm/confirm';
+import prompt from 'components/prompt/prompt';
+import { useApi } from 'hooks/useApi';
+import globalize from 'lib/globalize';
+
+export const Component = () => {
     const { api } = useApi();
     const { data: keys, isLoading } = useApiKeys();
     const revokeKey = useRevokeKey();
@@ -119,53 +118,28 @@ const ApiKeys = () => {
     const showNewKeyPopup = useCallback(() => {
         if (!api) return;
 
-        import('../../../../components/prompt/prompt').then(({ default: prompt }) => {
+        prompt({
-            prompt({
+            title: globalize.translate('HeaderNewApiKey'),
-                title: globalize.translate('HeaderNewApiKey'),
+            label: globalize.translate('LabelAppName'),
-                label: globalize.translate('LabelAppName'),
+            description: globalize.translate('LabelAppNameExample')
-                description: globalize.translate('LabelAppNameExample')
+        }).then((value) => {
-            }).then((value) => {
+            createKey.mutate({
-                createKey.mutate({
+                app: value
-                    app: value
-                });
-            }).catch(() => {
-                // popup closed
             });
-        }).catch(err => {
+        }).catch(() => {
-            console.error('[apikeys] failed to load api key popup', err);
+            // popup closed
         });
     }, [api, createKey]);
 
     return (
-        <Page
+        <TablePage
             id='apiKeysPage'
             title={globalize.translate('HeaderApiKeys')}
+            subtitle={globalize.translate('HeaderApiKeysHelp')}
             className='mainAnimatedPage type-interior'
-        >
+            table={table}
-            <Box
+        />
-                className='content-primary'
-                sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%'
-                }}
-            >
-                <Box
-                    sx={{
-                        marginBottom: 1
-                    }}
-                >
-                    <Stack spacing={2}>
-                        <Typography variant='h2'>
-                            {globalize.translate('HeaderApiKeys')}
-                        </Typography>
-                        <Typography>{globalize.translate('HeaderApiKeysHelp')}</Typography>
-                    </Stack>
-                </Box>
-                <MaterialReactTable table={table} />
-            </Box>
-        </Page>
     );
 };
 
-export default ApiKeys;
+Component.displayName = 'ApiKeysPage';