Add Quickaction to home page

src/frontend/src/components/settings/QuickAction.tsx

@@ -10,26 +10,36 @@ import {
 } from '@mantine/core';
 import { IconHome } from '@tabler/icons-react';
 
-import { ActionButton } from '../../../../components/buttons/ActionButton';
-import { PlaceholderPill } from '../../../../components/items/Placeholder';
+import { ActionButton } from '../buttons/ActionButton';
+import { PlaceholderPill } from '../items/Placeholder';
 
-export function generateQuickAction(navigate: any) {
-  return () => (
-    <Stack gap={'xs'} ml={'sm'}>
+export const QuickAction = ({
+  navigate,
+  ml = 'sm'
+}: {
+  navigate?: any;
+  ml?: string;
+}) => {
+  return (
+    <Stack gap={'xs'} ml={ml}>
       <Title order={5}>
         <Trans>Quick Actions</Trans>
       </Title>
       <Flex align={'flex-end'}>
-        <ActionButton
-          icon={<IconHome />}
-          color="blue"
-          size="lg"
-          radius="sm"
-          variant="filled"
-          tooltip={t`Go to Home`}
-          onClick={() => navigate('home')}
-        />
-        <Divider orientation="vertical" mx="md" />
+        {navigate ? (
+          <>
+            <ActionButton
+              icon={<IconHome />}
+              color="blue"
+              size="lg"
+              radius="sm"
+              variant="filled"
+              tooltip={t`Go to Home`}
+              onClick={() => navigate('home')}
+            />
+            <Divider orientation="vertical" mx="md" />
+          </>
+        ) : null}
         <SimpleGrid cols={3}>
           <Paper shadow="xs" p="sm" withBorder>
             <Text>
@@ -48,4 +58,4 @@ export function generateQuickAction(navigate: any) {
       </Flex>
     </Stack>
   );
-}
+};

src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx

@@ -1,8 +1,10 @@
 import { Trans, t } from '@lingui/macro';
-import { Alert, Button, Divider, Stack, Title } from '@mantine/core';
+import { Alert, Button, Stack, Title } from '@mantine/core';
 import { IconBrandGithub } from '@tabler/icons-react';
 
-export default function HomePanel() {
+import { QuickAction } from '../../../../components/settings/QuickAction';
+
+export default function HomePanel(): JSX.Element {
   return (
     <Stack gap="xs">
       <Alert color="blue" title={t`This is new!`}>
@@ -21,10 +23,7 @@ export default function HomePanel() {
           <IconBrandGithub /> <Trans>Open an issue</Trans>
         </Button>
       </Alert>
-      <Title order={5}>
-        <Trans>Quick actions</Trans>
-      </Title>
-      TBD
+      <QuickAction ml="" />
       <Title order={5}>
         <Trans>System status</Trans>
       </Title>

src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx

@@ -23,10 +23,10 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import PermissionDenied from '../../../../components/errors/PermissionDenied';
 import { PanelGroup, PanelType } from '../../../../components/nav/PanelGroup';
 import { SettingsHeader } from '../../../../components/nav/SettingsHeader';
+import { QuickAction } from '../../../../components/settings/QuickAction';
 import { GlobalSettingList } from '../../../../components/settings/SettingList';
 import { Loadable } from '../../../../functions/loading';
 import { useUserState } from '../../../../states/UserState';
-import { generateQuickAction } from './generateQuickAction';
 
 const ReportTemplatePanel = Loadable(
   lazy(() => import('./ReportTemplatePanel'))
@@ -96,7 +96,6 @@ export default function AdminCenter() {
     return panel !== 'home';
   }, [panel]);
 
-  const QuickAction = generateQuickAction(navigate);
   const adminCenterPanels: PanelType[] = useMemo(() => {
     return [
       {
@@ -213,7 +212,7 @@ export default function AdminCenter() {
             switch_link="/settings/system"
             switch_text="System Settings"
           />
-          {showQuickAction ? <QuickAction /> : null}
+          {showQuickAction ? <QuickAction navigate={navigate} /> : null}
           <PanelGroup
             pageKey="admin-center"
             panels={adminCenterPanels}