(incubator-devlake) 01/01: fix(config-ui): something error in sync frequency custom

[mi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

mintsweet pushed a commit to branch fix-sync-frequency-custom
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git

commit 53d1b8ab8f7f94721f2a5b7c9b3e570629744336
Author: mintsweet <0x...@gmail.com>
AuthorDate: Wed Nov 8 21:18:34 2023 +1300

    fix(config-ui): something error in sync frequency custom
---
 config-ui/src/config/cron.ts                         | 13 +++++--------
 config-ui/src/features/connections/utils.ts          |  2 +-
 .../detail/components/sync-policy/index.tsx          | 20 ++++++++++++--------
 .../src/pages/blueprint/detail/status-panel.tsx      |  2 +-
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/config-ui/src/config/cron.ts b/config-ui/src/config/cron.ts
index db01160cc..987981517 100644
--- a/config-ui/src/config/cron.ts
+++ b/config-ui/src/config/cron.ts
@@ -59,9 +59,8 @@ export const getCron = (isManual: boolean, config: string) => {
   if (isManual) {
     return {
       label: 'Manual',
-      value: 'manual',
-      description: '',
       config: '',
+      description: '',
       nextTime: '',
       nextTimes: [],
     };
@@ -72,15 +71,13 @@ export const getCron = (isManual: boolean, config: string) => {
   return preset
     ? {
         ...preset,
-        value: preset.config,
         nextTime: getNextTime(preset.config),
         nextTimes: getNextTimes(preset.config),
       }
     : {
         label: 'Custom',
-        value: '',
-        description: '',
         config,
+        description: '',
         nextTime: getNextTime(config),
         nextTimes: getNextTimes(config),
       };
@@ -89,22 +86,22 @@ export const getCron = (isManual: boolean, config: string) => {
 export const getCronOptions = () => {
   return [
     {
-      value: 'manual',
       label: 'Manual',
+      value: 'manual',
       subLabel: '',
     },
   ]
     .concat(
       cronPresets.map((cp) => ({
-        value: cp.config,
         label: cp.label,
+        value: cp.config,
         subLabel: cp.description,
       })),
     )
     .concat([
       {
-        value: '',
         label: 'Custom',
+        value: 'custom',
         subLabel: '',
       },
     ]);
diff --git a/config-ui/src/features/connections/utils.ts b/config-ui/src/features/connections/utils.ts
index 2a383fd77..ef65137a6 100644
--- a/config-ui/src/features/connections/utils.ts
+++ b/config-ui/src/features/connections/utils.ts
@@ -39,7 +39,7 @@ export const transformConnection = (plugin: string, connection: IConnectionAPI):
     password: connection.password,
     appId: connection.appId,
     secretKey: connection.secretKey,
-    enableGraphql:connection.enableGraphql,
+    enableGraphql: connection.enableGraphql,
   };
 };
 
diff --git a/config-ui/src/pages/blueprint/detail/components/sync-policy/index.tsx b/config-ui/src/pages/blueprint/detail/components/sync-policy/index.tsx
index f743ad38b..b4678aff8 100644
--- a/config-ui/src/pages/blueprint/detail/components/sync-policy/index.tsx
+++ b/config-ui/src/pages/blueprint/detail/components/sync-policy/index.tsx
@@ -16,7 +16,7 @@
  *
  */
 
-import { useMemo } from 'react';
+import { useState, useMemo } from 'react';
 import dayjs from 'dayjs';
 import { Tag, Checkbox, FormGroup, InputGroup, Radio, RadioGroup } from '@blueprintjs/core';
 import { TimePrecision } from '@blueprintjs/datetime';
@@ -51,6 +51,8 @@ export const SyncPolicy = ({
   onChangeSkipOnFail,
   onChangeTimeAfter,
 }: Props) => {
+  const [selectedValue, setSelectedValue] = useState('Daily');
+
   const [timezone, quickTimeOpts, cronOpts] = useMemo(() => {
     const timezone = dayjs().format('ZZ').replace('00', '');
     const quickTimeOpts = [
@@ -71,14 +73,16 @@ export const SyncPolicy = ({
 
   const handleChangeFrequency = (e: React.FormEvent<HTMLInputElement>) => {
     const value = (e.target as HTMLInputElement).value;
-    if (value === 'manual') {
+    setSelectedValue(value);
+    if (value === 'Manual') {
       onChangeIsManual(true);
-    } else if (!value) {
+    } else if (value === 'Custom') {
       onChangeIsManual(false);
       onChangeCronConfig('* * * * *');
     } else {
+      const opt = cronOpts.find((it) => it.label === value) as any;
       onChangeIsManual(false);
-      onChangeCronConfig(value);
+      onChangeCronConfig(opt.value);
     }
   };
 
@@ -127,12 +131,12 @@ export const SyncPolicy = ({
           label="Sync Frequency"
           subLabel="Blueprints will run on creation and recurringly based on the schedule."
         >
-          <RadioGroup selectedValue={cron.value} onChange={handleChangeFrequency}>
-            {cronOpts.map(({ value, label, subLabel }) => (
-              <Radio key={value} label={`${label} ${subLabel}`} value={value} />
+          <RadioGroup selectedValue={selectedValue} onChange={handleChangeFrequency}>
+            {cronOpts.map(({ label, subLabel }) => (
+              <Radio key={label} label={`${label} ${subLabel}`} value={label} />
             ))}
           </RadioGroup>
-          {!cron.value && (
+          {selectedValue === 'Custom' && (
             <>
               <S.Input>
                 <FormGroup label="Minute">
diff --git a/config-ui/src/pages/blueprint/detail/status-panel.tsx b/config-ui/src/pages/blueprint/detail/status-panel.tsx
index c30e1f9a8..3f0763b95 100644
--- a/config-ui/src/pages/blueprint/detail/status-panel.tsx
+++ b/config-ui/src/pages/blueprint/detail/status-panel.tsx
@@ -125,7 +125,7 @@ export const StatusPanel = ({ from, blueprint, pipelineId, onRefresh }: Props) =
       {from === FromEnum.project && (
         <S.ProjectACtion>
           <span>
-            {cron.value === 'manual' ? 'Manual' : `Next Run: ${formatTime(cron.nextTime, 'YYYY-MM-DD HH:mm')}`}
+            {cron.label === 'Manual' ? 'Manual' : `Next Run: ${formatTime(cron.nextTime, 'YYYY-MM-DD HH:mm')}`}
           </span>
           <Tooltip2
             position={Position.TOP}