refactor(deployment): optimize the deployment robot popup form modal

petercat-ai · Dec 3, 2024 · dc58589 · dc58589
1 parent ec71a9a
commit dc58589
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 44 deletions.
diff --git a/client/.kiwi/en/DeployBotModal.ts b/client/.kiwi/en/DeployBotModal.ts
@@ -27,5 +27,10 @@ export default {
     tiaoGuo: 'Skip',
     baoCunChengGong: 'Saved successfully!',
     buShuChengGong: 'Deployment successful',
+    wanCheng: 'Done',
+    tiJiaoChengGong: 'Submission Successful',
+    shouQiBuShu: 'Collapse',
+    buShu: 'Deploy',
+    daKaiBuShu: 'Open Deployment',
   },
 };
diff --git a/client/.kiwi/ja/DeployBotModal.ts b/client/.kiwi/ja/DeployBotModal.ts
@@ -26,5 +26,10 @@ export default {
     tiaoGuo: 'スキップ',
     baoCunChengGong: '保存が成功しました！',
     buShuChengGong: 'デプロイが成功しました',
+    wanCheng: 'かんりょう',
+    tiJiaoChengGong: '提出が成功しました',
+    shouQiBuShu: '折りたたむ',
+    buShu: 'デプロイ',
+    daKaiBuShu: 'デプロイを開',
   },
 };
diff --git a/client/.kiwi/ko/DeployBotModal.ts b/client/.kiwi/ko/DeployBotModal.ts
@@ -24,5 +24,10 @@ export default {
     tiaoGuo: '건너뛰기',
     baoCunChengGong: '성공적으로 저장!',
     buShuChengGong: '배포 성공',
+    wanCheng: '완료',
+    tiJiaoChengGong: '제출이 성공했습니다',
+    shouQiBuShu: '접기',
+    buShu: '배포',
+    daKaiBuShu: '배포 열기',
   },
 };
diff --git a/client/.kiwi/zh-CN/DeployBotModal.ts b/client/.kiwi/zh-CN/DeployBotModal.ts
@@ -24,5 +24,10 @@ export default {
     tiaoGuo: '跳过',
     baoCunChengGong: '保存成功！',
     buShuChengGong: '部署成功',
+    wanCheng: '完成',
+    tiJiaoChengGong: '提交成功',
+    shouQiBuShu: '收起部署',
+    buShu: '部署',
+    daKaiBuShu: '打开部署',
   },
 };
diff --git a/client/.kiwi/zh-TW/DeployBotModal.ts b/client/.kiwi/zh-TW/DeployBotModal.ts
@@ -24,5 +24,10 @@ export default {
     tiaoGuo: '跳過',
     baoCunChengGong: '保存成功！',
     buShuChengGong: '部署成功',
+    wanCheng: '完成',
+    tiJiaoChengGong: '提交成功',
+    shouQiBuShu: '收起',
+    buShu: '部署',
+    daKaiBuShu: '打开部署',
   },
 };
diff --git a/client/app/factory/edit/components/DeployBotModal/DeployContent.tsx b/client/app/factory/edit/components/DeployBotModal/DeployContent.tsx
@@ -224,9 +224,6 @@ export const DeployContent: React.FC<IDeployContentProps> = ({
   };
   return (
     <>
-      <span className="text-[14px] text-gray-800">
-        {I18N.DeployBotModal.DeployContent.buShuDaoQiTa}
-      </span>
       {renderPublicMarket()}
       {renderDeployWebsite()}
       {renderBindRepo()}

diff --git a/client/app/factory/edit/components/DeployBotModal/index.tsx b/client/app/factory/edit/components/DeployBotModal/index.tsx
@@ -9,6 +9,7 @@ import {
   ModalBody,
   ModalFooter,
   Button,
+  Image,
 } from '@nextui-org/react';
 import {
   useBindBotToRepo,
@@ -31,8 +32,17 @@ interface IModalProps {
   onClose: () => void;
 }
 
+enum DeployStatusEnum {
+  HIDEDEPLOYINFO = 'HIDEDEPLOYINFO',
+  SHOWEPLOYINFO = 'PREEDIT',
+  PRESUBMIT = 'PRESUBMIT',
+}
+
 const MyBotDeployModal: React.FC<IModalProps> = ({ isOpen, onClose }) => {
   const [deployInfo, setDeployInfo] = useState<DeployState>({});
+  const [deployStatus, setDeployStatus] = useState<DeployStatusEnum>(
+    DeployStatusEnum.HIDEDEPLOYINFO,
+  );
   const { botProfile } = useBot();
   const {
     bindBotToRepo,
@@ -96,7 +106,11 @@ const MyBotDeployModal: React.FC<IModalProps> = ({ isOpen, onClose }) => {
   useEffect(() => {
     if (lodash.isEqual(originDeployModel, deployInfo)) {
       setDeployBtnDisabled(true);
+      deployStatus === DeployStatusEnum.PRESUBMIT &&
+        setDeployStatus(DeployStatusEnum.SHOWEPLOYINFO);
     } else {
+      deployStatus !== DeployStatusEnum.HIDEDEPLOYINFO &&
+        setDeployStatus(DeployStatusEnum.PRESUBMIT);
       setDeployBtnDisabled(false);
     }
   }, [deployInfo, originDeployModel]);
@@ -151,17 +165,96 @@ const MyBotDeployModal: React.FC<IModalProps> = ({ isOpen, onClose }) => {
     isDeployWebsiteSuccess ||
     isBindBotSuccess;
 
+  const renderFooterBtn = () => {
+    if (deployStatus === DeployStatusEnum.HIDEDEPLOYINFO) {
+      return (
+        <>
+          <Button
+            className="border-[1.5px] border-[#3F3F46] rounded-[46px]"
+            variant="light"
+            onPress={() => {
+              setDeployStatus(DeployStatusEnum.SHOWEPLOYINFO);
+            }}
+          >
+            {I18N.DeployBotModal.index.buShu}<Image src="../images/chevron-down.svg" alt={I18N.DeployBotModal.index.daKaiBuShu} />
+          </Button>
+          <Button
+            className="border-[1.5px] border-[#3F3F46] rounded-[46px] bg-[#3F3F46] text-white"
+            onPress={() => onClose()}
+          >
+            {I18N.DeployBotModal.index.wanCheng}</Button>
+        </>
+      );
+    }
+    if (deployStatus === DeployStatusEnum.SHOWEPLOYINFO) {
+      return (
+        <>
+          <Button
+            className="border-[1.5px] border-[#3F3F46] rounded-[46px]"
+            variant="light"
+            onPress={() => {
+              setDeployStatus(DeployStatusEnum.HIDEDEPLOYINFO);
+            }}
+          >
+            {I18N.DeployBotModal.index.buShu}<Image src="../images/chevron-up.svg" alt={I18N.DeployBotModal.index.shouQiBuShu} />
+          </Button>
+          <Button
+            isDisabled={deployBtnDisabled}
+            isLoading={
+              isPublicBotLoading ||
+              isUnPublicBotLoading ||
+              isDeployWebsiteLoading ||
+              isBindBotLoading
+            }
+            className="border-[1.5px] border-[#3F3F46] rounded-[46px] bg-[#3F3F46] text-white"
+            onPress={() => handleOK()}
+          >
+            {I18N.components.BotCreateFrom.queRen}</Button>
+        </>
+      );
+    }
+    if (deployStatus === DeployStatusEnum.PRESUBMIT) {
+      return (
+        <>
+          <Button
+            className="border-[1.5px] border-[#3F3F46] rounded-[46px]"
+            variant="light"
+            onPress={() => onClose()}
+          >
+            {I18N.DeployBotModal.index.tiaoGuo}
+          </Button>
+          <Button
+            isDisabled={deployBtnDisabled}
+            isLoading={
+              isPublicBotLoading ||
+              isUnPublicBotLoading ||
+              isDeployWebsiteLoading ||
+              isBindBotLoading
+            }
+            className="border-[1.5px] border-[#3F3F46] rounded-[46px] bg-[#3F3F46] text-white"
+            onPress={() => handleOK()}
+          >
+            {I18N.components.BotCreateFrom.queRen}
+          </Button>
+        </>
+      );
+    }
+    return null;
+  };
+
   const renderResultPath = (result: { approval_path: any }, text: string) => {
     return (
       <>
         {result?.approval_path ? (
           <div className="w-full flex flex-col gap-1 justify-center items-center">
             <span>
-              {text}
-              {" "}
-              {I18N.DeployBotModal.DeployContent.shenHeZhong}
+              {text} {I18N.DeployBotModal.DeployContent.shenHeZhong}
             </span>
-            <a href={result.approval_path} target="_blank" className="block max-w-full break-words">
+            <a
+              href={result.approval_path}
+              target="_blank"
+              className="block max-w-full break-words"
+            >
               {result.approval_path}
             </a>
           </div>
@@ -188,7 +281,7 @@ const MyBotDeployModal: React.FC<IModalProps> = ({ isOpen, onClose }) => {
                       <span className="mt-[28px]">
                         <DeploySuccessIcon />
                       </span>
-                      <span>{I18N.DeployBotModal.index.buShuChengGong}</span>
+                      <span>{I18N.DeployBotModal.index.tiJiaoChengGong}</span>
                     </div>
                   </ModalHeader>
                   <ModalBody className="py-[0px] flex flex-col gap-2 justify-center items-center">
@@ -206,8 +299,7 @@ const MyBotDeployModal: React.FC<IModalProps> = ({ isOpen, onClose }) => {
                       className="border-[1.5px] border-[#3F3F46] rounded-[46px] bg-[#3F3F46] text-white"
                       onPress={() => onClose()}
                     >
-                      {I18N.components.BotCreateFrom.queRen}
-                    </Button>
+                      {I18N.DeployBotModal.index.wanCheng}</Button>
                   </ModalFooter>
                 </>
               ) : (
@@ -220,40 +312,25 @@ const MyBotDeployModal: React.FC<IModalProps> = ({ isOpen, onClose }) => {
                       <span>{I18N.DeployBotModal.index.baoCunChengGong}</span>
                     </div>
                   </ModalHeader>
-                  <ModalBody className="py-[0px]">
-                    <Spinner
-                      loading={isGetUserReposLoading || isGetBotApprovalLoading}
-                    >
-                      <DeployContent
-                        deployInfo={deployInfo}
-                        websiteApproval={websiteApproval}
-                        marketApproval={marketApproval}
-                        peterCatBotRepos={peterCatBotRepos ?? []}
-                        onChange={handleDeployChange}
-                      />
-                    </Spinner>
-                  </ModalBody>
-                  <ModalFooter className="flex justify-center items-center">
-                    <Button
-                      className="border-[1.5px] border-[#3F3F46] rounded-[46px]"
-                      variant="light"
-                      onPress={() => onClose()}
-                    >
-                      {I18N.DeployBotModal.index.tiaoGuo}
-                    </Button>
-                    <Button
-                      isDisabled={deployBtnDisabled}
-                      isLoading={
-                        isPublicBotLoading ||
-                        isUnPublicBotLoading ||
-                        isDeployWebsiteLoading ||
-                        isBindBotLoading
-                      }
-                      className="border-[1.5px] border-[#3F3F46] rounded-[46px] bg-[#3F3F46] text-white"
-                      onPress={() => handleOK()}
-                    >
-                      {I18N.components.BotCreateFrom.queRen}
-                    </Button>
+                  {deployStatus === DeployStatusEnum.HIDEDEPLOYINFO ? null : (
+                    <ModalBody className="py-[0px]">
+                      <Spinner
+                        loading={
+                          isGetUserReposLoading || isGetBotApprovalLoading
+                        }
+                      >
+                        <DeployContent
+                          deployInfo={deployInfo}
+                          websiteApproval={websiteApproval}
+                          marketApproval={marketApproval}
+                          peterCatBotRepos={peterCatBotRepos ?? []}
+                          onChange={handleDeployChange}
+                        />
+                      </Spinner>
+                    </ModalBody>
+                  )}
+                  <ModalFooter className="justify-center items-center">
+                    {renderFooterBtn()}
                   </ModalFooter>
                 </>
               )}

diff --git a/client/public/images/chevron-down.svg b/client/public/images/chevron-down.svg
diff --git a/client/public/images/chevron-up.svg b/client/public/images/chevron-up.svg