feat: add status page basic info change

src/client/components/monitor/StatusPage/EditForm.tsx

@@ -5,21 +5,28 @@ import { z } from 'zod';
 
 const { Text } = Typography;
 
-interface Values {
+export interface MonitorStatusPageEditFormValues {
   title: string;
   slug: string;
 }
 
 interface MonitorStatusPageEditFormProps {
   isLoading?: boolean;
-  onFinish: (values: Values) => void;
+  initialValues?: Partial<MonitorStatusPageEditFormValues>;
+  onFinish: (values: MonitorStatusPageEditFormValues) => void;
+  onCancel?: () => void;
+  saveButtonLabel?: string;
 }
 
 export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps> =
   React.memo((props) => {
     return (
       <div>
-        <Form<Values> layout="vertical" onFinish={props.onFinish}>
+        <Form<MonitorStatusPageEditFormValues>
+          layout="vertical"
+          initialValues={props.initialValues}
+          onFinish={props.onFinish}
+        >
           <Form.Item
             label="Title"
             name="title"
@@ -64,9 +71,18 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
           >
             <Input addonBefore={`${window.origin}/status/`} />
           </Form.Item>
-          <Button type="primary" htmlType="submit" loading={props.isLoading}>
-            Next
-          </Button>
+
+          <div className="flex gap-4">
+            <Button type="primary" htmlType="submit" loading={props.isLoading}>
+              {props.saveButtonLabel ?? 'Save'}
+            </Button>
+
+            {props.onCancel && (
+              <Button htmlType="button" onClick={props.onCancel}>
+                Cancel
+              </Button>
+            )}
+          </div>
         </Form>
       </div>
     );

src/client/components/monitor/StatusPage/index.tsx

@@ -1,8 +1,15 @@
 import { Button, Empty } from 'antd';
-import React from 'react';
+import React, { useState } from 'react';
 import { trpc } from '../../../api/trpc';
 import { MonitorHealthBar } from '../MonitorHealthBar';
 import { useAllowEdit } from './useAllowEdit';
+import {
+  MonitorStatusPageEditForm,
+  MonitorStatusPageEditFormValues,
+} from './EditForm';
+import clsx from 'clsx';
+import { useRequest } from '../../../hooks/useRequest';
+import { useNavigate } from 'react-router';
 
 interface MonitorStatusPageProps {
   slug: string;
@@ -15,41 +22,94 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
     const { data: info } = trpc.monitor.getPageInfo.useQuery({
       slug,
     });
+    const editPageMutation = trpc.monitor.editPage.useMutation();
+    const trpcUtils = trpc.useContext();
+    const navigate = useNavigate();
 
     const allowEdit = useAllowEdit(info?.workspaceId);
+    const [editMode, setEditMode] = useState(false);
 
     const monitorList = info?.monitorList ?? [];
 
+    const [{ loading }, handleSave] = useRequest(
+      async (values: MonitorStatusPageEditFormValues) => {
+        if (!info) {
+          return;
+        }
+
+        const newPageInfo = await editPageMutation.mutateAsync({
+          id: info.id,
+          workspaceId: info.workspaceId,
+          ...values,
+        });
+
+        trpcUtils.monitor.getPageInfo.setData(
+          {
+            slug,
+          },
+          newPageInfo
+        );
+        setEditMode(false);
+
+        if (info.slug !== newPageInfo.slug) {
+          // if slug is changed, should to navigate to new url
+          navigate(`/status/${newPageInfo.slug}`);
+        }
+      }
+    );
+
     return (
-      <div className="w-4/5 mx-auto py-8 ">
-        <div className="text-2xl mb-4">{info?.title}</div>
-
-        <div>{allowEdit && <Button type="primary">Edit</Button>}</div>
-
-        <div className="text-lg mb-2">Services</div>
-
-        {info && (
-          <div className="shadow-2xl p-2.5">
-            {monitorList.length > 0 ? (
-              monitorList.map((item) => (
-                <div
-                  key={item.id}
-                  className="hover:bg-black hover:bg-opacity-20"
-                >
-                  <MonitorHealthBar
-                    workspaceId={info.workspaceId}
-                    monitorId={item.id}
-                    count={40}
-                    size="large"
-                    showCurrentStatus={true}
-                  />
-                </div>
-              ))
-            ) : (
-              <Empty description="No any monitor has been set" />
-            )}
+      <div className="w-full h-full flex gap-6">
+        {editMode && (
+          <div className="w-1/3 overflow-auto py-8 px-4 border-r border-gray-600">
+            <MonitorStatusPageEditForm
+              isLoading={loading}
+              initialValues={info ?? {}}
+              onFinish={handleSave}
+            />
           </div>
         )}
+        <div
+          className={clsx(
+            'mx-auto py-8 overflow-auto',
+            !editMode ? 'w-4/5' : 'w-2/3'
+          )}
+        >
+          <div className="text-2xl mb-4">{info?.title}</div>
+
+          <div>
+            {allowEdit && !editMode && (
+              <Button type="primary" onClick={() => setEditMode(true)}>
+                Edit
+              </Button>
+            )}
+          </div>
+
+          <div className="text-lg mb-2">Services</div>
+
+          {info && (
+            <div className="shadow-2xl p-2.5">
+              {monitorList.length > 0 ? (
+                monitorList.map((item) => (
+                  <div
+                    key={item.id}
+                    className="hover:bg-black hover:bg-opacity-20"
+                  >
+                    <MonitorHealthBar
+                      workspaceId={info.workspaceId}
+                      monitorId={item.id}
+                      count={40}
+                      size="large"
+                      showCurrentStatus={true}
+                    />
+                  </div>
+                ))
+              ) : (
+                <Empty description="No any monitor has been set" />
+              )}
+            </div>
+          )}
+        </div>
       </div>
     );
   }

src/client/pages/Monitor/PageAdd.tsx

@@ -32,6 +32,7 @@ export const MonitorPageAdd: React.FC = React.memo(() => {
   return (
     <div className="px-8 py-4">
       <MonitorStatusPageEditForm
+        saveButtonLabel="Next"
         isLoading={createPageMutation.isLoading}
         onFinish={handleFinish}
       />

src/server/trpc/routers/monitor.ts

@@ -523,6 +523,9 @@ export const monitorRouter = router({
         const existSlugCount = await prisma.monitorStatusPage.count({
           where: {
             slug,
+            id: {
+              not: id,
+            },
           },
         });