feat: add duplicate feature for monitor

src/client/components/monitor/MonitorInfoEditor.tsx

@@ -121,7 +121,7 @@ export const MonitorInfoEditor: React.FC<MonitorInfoEditorProps> = React.memo(
           </Form.Item>
 
           <Button type="primary" htmlType="submit" loading={isLoading}>
-            {t('Save')}
+            {isEdit ? t('Save') : t('Create')}
           </Button>
         </Form>
       </div>

src/client/routes/monitor/$monitorId/index.tsx

@@ -5,10 +5,20 @@ import { ErrorTip } from '@/components/ErrorTip';
 import { Loading } from '@/components/Loading';
 import { NotFoundTip } from '@/components/NotFoundTip';
 import { MonitorInfo } from '@/components/monitor/MonitorInfo';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { useCurrentWorkspaceId } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
-import { createFileRoute } from '@tanstack/react-router';
+import { useTranslation } from '@i18next-toolkit/react';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { pick } from 'lodash-es';
+import { LuCopy, LuMoreVertical } from 'react-icons/lu';
 
 export const Route = createFileRoute('/monitor/$monitorId/')({
   beforeLoad: routeAuthBeforeLoad,
@@ -22,6 +32,8 @@ function MonitorDetailComponent() {
     workspaceId,
     monitorId,
   });
+  const { t } = useTranslation();
+  const navigate = useNavigate();
 
   if (!monitorId) {
     return <ErrorTip />;
@@ -36,7 +48,44 @@ function MonitorDetailComponent() {
   }
 
   return (
-    <CommonWrapper header={<CommonHeader title={monitor.name} />}>
+    <CommonWrapper
+      header={
+        <CommonHeader
+          title={monitor.name}
+          actions={
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild={true} className="cursor-pointer">
+                <Button variant="outline" size="icon" className="shrink-0">
+                  <LuMoreVertical />
+                </Button>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent>
+                <DropdownMenuItem
+                  onClick={() =>
+                    navigate({
+                      to: '/monitor/add',
+                      search: pick(monitor, [
+                        'name',
+                        'type',
+                        'notifications',
+                        'interval',
+                        'maxRetries',
+                        'trendingMode',
+                        'payload',
+                      ]),
+                    })
+                  }
+                >
+                  <LuCopy className="mr-2" />
+                  {t('Duplicate')}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          }
+        />
+      }
+    >
       <ScrollArea className="h-full overflow-hidden p-4">
         <MonitorInfo monitorId={monitor.id} />
       </ScrollArea>

src/client/routes/monitor/add.tsx

@@ -1,10 +1,8 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import { t, useTranslation } from '@i18next-toolkit/react';
-import { Button } from '@/components/ui/button';
+import { useTranslation } from '@i18next-toolkit/react';
 import { useEvent } from '@/hooks/useEvent';
 import { useCurrentWorkspaceId } from '@/store/user';
-import { trpc } from '@/api/trpc';
-import { Card, CardContent, CardFooter } from '@/components/ui/card';
+import { Card, CardContent } from '@/components/ui/card';
 import { CommonWrapper } from '@/components/CommonWrapper';
 import {
   MonitorInfoEditor,
@@ -14,6 +12,8 @@ import { routeAuthBeforeLoad } from '@/utils/route';
 import { useMonitorUpsert } from '@/api/model/monitor';
 import { CommonHeader } from '@/components/CommonHeader';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { useMemo } from 'react';
+import { isEmpty } from 'lodash-es';
 
 export const Route = createFileRoute('/monitor/add')({
   beforeLoad: routeAuthBeforeLoad,
@@ -25,6 +25,11 @@ function MonitorAddComponent() {
   const workspaceId = useCurrentWorkspaceId();
   const navigate = useNavigate();
   const mutation = useMonitorUpsert();
+  const search = Route.useSearch();
+  const initialValues = useMemo(
+    () => (isEmpty(search) ? undefined : (search as MonitorInfoEditorValues)),
+    []
+  );
 
   const handleSubmit = useEvent(async (values: MonitorInfoEditorValues) => {
     const res = await mutation.mutateAsync({
@@ -45,7 +50,10 @@ function MonitorAddComponent() {
       <ScrollArea className="h-full overflow-hidden p-4">
         <Card>
           <CardContent className="pt-4">
-            <MonitorInfoEditor onSave={handleSubmit} />
+            <MonitorInfoEditor
+              initialValues={initialValues}
+              onSave={handleSubmit}
+            />
           </CardContent>
         </Card>
       </ScrollArea>