refactor(config-ui): adjust the blueprint status and configuration panel (#4146)

* refactor(config-ui): adjust the blueprint status and configuration panel

* feat(config-ui): change the status daily to the next run date

* fix(config-ui): adjust the style for configuration
diff --git a/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx b/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
index 6f0edd1..e58cefb 100644
--- a/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
+++ b/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
@@ -34,7 +34,7 @@
 export const BlueprintDetail = ({ id }: Props) => {
   const [activeTab, setActiveTab] = useState<TabId>('status');
 
-  const { loading, blueprint, pipelineId, operating, onRun, onUpdate, onDelete, onRefresh } = useDetail({
+  const { loading, blueprint, pipelineId, operating, onRun, onUpdate, onRefresh } = useDetail({
     id,
   });
 
@@ -53,16 +53,7 @@
         <Tab
           id="status"
           title="Status"
-          panel={
-            <Status
-              blueprint={blueprint}
-              pipelineId={pipelineId}
-              operating={operating}
-              onRun={onRun}
-              onUpdate={onUpdate}
-              onDelete={onDelete}
-            />
-          }
+          panel={<Status blueprint={blueprint} pipelineId={pipelineId} operating={operating} onRun={onRun} />}
         />
         <Tab
           id="configuration"
diff --git a/config-ui/src/pages/blueprint/detail/panel/configuration.tsx b/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
index e73c0ff..a60f405 100644
--- a/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
+++ b/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
@@ -17,7 +17,7 @@
  */
 
 import React, { useState, useEffect, useMemo } from 'react';
-import { Icon, Button, Colors, Intent } from '@blueprintjs/core';
+import { Icon, Button, Switch, Colors, Intent } from '@blueprintjs/core';
 import dayjs from 'dayjs';
 
 import { Table, ColumnType } from '@/components';
@@ -88,6 +88,8 @@
     handleCancel();
   };
 
+  const handleToggleEnabled = (checked: boolean) => onUpdate({ enable: checked });
+
   const handleUpdateConnection = (updated: any) =>
     onUpdate({
       settings: {
@@ -201,12 +203,20 @@
           <h3>Sync Policy</h3>
           <div className="detail">
             <span>
-              {cron.label}
-              {cron.value !== 'manual' ? dayjs(cron.nextTime).format('HH:mm A') : null}
+              {cron.label} {cron.value !== 'manual' ? dayjs(cron.nextTime).format('HH:mm A') : null}
             </span>
             <Icon icon="annotation" color={Colors.BLUE2} onClick={() => setType('frequency')} />
           </div>
         </div>
+        <div className="block">
+          <h3>Enabled</h3>
+          <div className="detail">
+            <Switch
+              checked={blueprint.enable}
+              onChange={(e) => handleToggleEnabled((e.target as HTMLInputElement).checked)}
+            />
+          </div>
+        </div>
       </div>
       {blueprint.mode === ModeEnum.normal && (
         <div className="bottom">
diff --git a/config-ui/src/pages/blueprint/detail/panel/status.tsx b/config-ui/src/pages/blueprint/detail/panel/status.tsx
index f7401e1..b3d10dc 100644
--- a/config-ui/src/pages/blueprint/detail/panel/status.tsx
+++ b/config-ui/src/pages/blueprint/detail/panel/status.tsx
@@ -17,11 +17,11 @@
  */
 
 import React, { useMemo } from 'react';
-import { Button, Switch, Intent } from '@blueprintjs/core';
-import dayjs from 'dayjs';
+import { Button, Intent } from '@blueprintjs/core';
 
 import { getCron } from '@/config';
 import { PipelineInfo, PipelineHistorical } from '@/pages';
+import { formatTime } from '@/utils';
 
 import type { BlueprintType } from '../../types';
 
@@ -32,25 +32,17 @@
   pipelineId?: ID;
   operating: boolean;
   onRun: () => void;
-  onUpdate: (payload: any) => void;
-  onDelete: () => void;
 }
 
-export const Status = ({ blueprint, pipelineId, operating, onRun, onUpdate, onDelete }: Props) => {
+export const Status = ({ blueprint, pipelineId, operating, onRun }: Props) => {
   const cron = useMemo(() => getCron(blueprint.isManual, blueprint.cronConfig), [blueprint]);
 
   const handleRunNow = () => onRun();
 
-  const handleToggleEnabled = (checked: boolean) => onUpdate({ enable: checked });
-
-  const handleDelete = () => onDelete();
-
   return (
     <S.StatusPanel>
       <div className="info">
-        <span>
-          {cron.label} {cron.value !== 'manual' ? dayjs(cron.nextTime).format('HH:mm A') : null}
-        </span>
+        <span>{cron.value === 'manual' ? 'Manual' : `Next Run: ${formatTime(cron.nextTime, 'YYYY-MM-DD HH:mm')}`}</span>
         <span>
           <Button
             disabled={!blueprint.enable}
@@ -61,23 +53,6 @@
             onClick={handleRunNow}
           />
         </span>
-        <span>
-          <Switch
-            label="Blueprint Enabled"
-            checked={blueprint.enable}
-            onChange={(e) => handleToggleEnabled((e.target as HTMLInputElement).checked)}
-          />
-        </span>
-        <span>
-          <Button
-            disabled={blueprint.enable}
-            loading={operating}
-            small
-            intent={Intent.DANGER}
-            icon="trash"
-            onClick={handleDelete}
-          />
-        </span>
       </div>
       <div className="block">
         <h3>Current Pipeline</h3>
diff --git a/config-ui/src/pages/blueprint/detail/use-detail.ts b/config-ui/src/pages/blueprint/detail/use-detail.ts
index 15a4e9f..dda5c7a 100644
--- a/config-ui/src/pages/blueprint/detail/use-detail.ts
+++ b/config-ui/src/pages/blueprint/detail/use-detail.ts
@@ -85,16 +85,6 @@
     }
   };
 
-  const handleDelete = async () => {
-    const [success] = await operator(() => API.deleteBluprint(id), {
-      setOperating,
-    });
-
-    if (success) {
-      getBlueprint();
-    }
-  };
-
   return useMemo(
     () => ({
       loading,
@@ -103,7 +93,6 @@
       pipelineId,
       onRun: handleRun,
       onUpdate: handleUpdate,
-      onDelete: handleDelete,
       onRefresh: getBlueprint,
     }),
     [loading, operating, blueprint, pipelineId],