fix: Fixed token modal (#61)

* bugfix: webhook form error * chore: css Co-authored-by: frankzhaopeng <[email protected]>
FeatureProbe · Dec 5, 2022 · 627d3bf · 627d3bf
1 parent e3a5957
commit 627d3bf
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 25 deletions.
diff --git a/src/components/Rule/index.module.scss b/src/components/Rule/index.module.scss
@@ -8,6 +8,14 @@
     .ui.floating.dropdown > .menu {
       min-width: 120px !important;
     }
+
+    .ui.floating.dropdown > .menu > .item:first-child {
+      margin-top: 4px;
+    }
+
+    .ui.floating.dropdown > .menu > .item:last-child {
+      margin-bottom: 4px;
+    }
   }
 }
 
@@ -51,7 +59,7 @@
 .rule-item {
   display: flex;
   margin-bottom: 12px;
-  align-items: center;
+  align-items: flex-start;
 }
 
 .rule-item-prefix {
@@ -65,6 +73,8 @@
   color: #ffffff;
   margin: 0 14px 0 10px;
   background-color: #26a4ba;
+  position: relative;
+  top: 4px;
 }
 
 .rule-item-first {
@@ -88,7 +98,7 @@
 }
 
 .rule-item-operator {
-  max-width: 180px;
+  max-width: 160px;
   position: relative;
   font-size: small;
 }
@@ -111,7 +121,8 @@
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  align-self: center;
+  position: relative;
+  top: 7px;
 }
 
 .rule-item-type-box {
@@ -141,6 +152,13 @@
 
 .rule-item-operator-dropdown {
   min-width: 95% !important;
+
+  :global {
+    .menu {
+      width: 180px !important;
+    }
+  }
+
 }
 
 .rule-add {

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
@@ -525,9 +525,6 @@
   "token.visited.time": "Last used",
   "token.delete.tips.title": "Sure to delete this token?",
   "token.delete.tips.content": "Token will be invalid after deleted.",
-  "token.application.add.tips": "Once the application token is created, it cannot be changed",
-  "token.personal.add.tips": "Once the personal token is created, it cannot be changed",
-  "token.role.tips": "Do not support granting more roles than you have access to",
   "token.application.create.text": "Create application token",
   "token.personal.create.text": "Create personal token",
   "token.form.name.text": "Token name",

diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json
@@ -525,9 +525,6 @@
   "token.visited.time": "最后使用时间",
   "token.delete.tips.title": "确定删除该Token？",
   "token.delete.tips.content": "删除后，该Token将失效",
-  "token.application.add.tips": "应用Token一旦创建，不可更改",
-  "token.personal.add.tips": "个人Token一旦创建，不可更改",
-  "token.role.tips": "不支持授予比您权限更多的角色",
   "token.application.create.text": "创建应用Token",
   "token.personal.create.text": "创建个人Token",
   "token.form.name.text": "Token名称",

diff --git a/src/pages/apiToken/components/TokenModal/index.tsx b/src/pages/apiToken/components/TokenModal/index.tsx
@@ -90,11 +90,13 @@ const TokenModal: React.FC<IProps> = (props) => {
   }, [userInfo]);
 
   const onClose = useCallback(() => {
+    setValue('name', '');
+    setValue('role', '');
     setStatus(false);
     init();
     clearErrors();
     handleCancel && handleCancel();
-  }, [init, clearErrors, handleCancel]);
+  }, [init, clearErrors, handleCancel, setValue]);
 
   const onCopy = useCallback(async () => {
     try {
@@ -132,7 +134,7 @@ const TokenModal: React.FC<IProps> = (props) => {
         setToken(res.data?.token);
         refresh && refresh();
       } else {
-        message.error(intl.formatMessage({ id: 'token.create.error' }));
+        message.error(res.message || intl.formatMessage({ id: 'token.create.error' }));
       }
     } finally {
       setIsLoading(false);
@@ -182,14 +184,16 @@ const TokenModal: React.FC<IProps> = (props) => {
           </span>
           <Icon customclass={styles['modal-close-icon']} type="close" onClick={onClose} />
         </div>
-        <div className={styles['header-tips-container']}>
-          <div className={styles['header-tips']}>
-            <span className={styles['warning-circle']}>
-              <Icon type="warning-circle" />
-            </span>
-            {status ? <FormattedMessage id="token.copy.tips" /> : <FormattedMessage id="token.application.add.tips" />}
+        {status && (
+          <div className={styles['header-tips-container']}>
+            <div className={styles['header-tips']}>
+              <span className={styles['warning-circle']}>
+                <Icon type="warning-circle" />
+              </span>
+              <FormattedMessage id="token.copy.tips" />
+            </div>
           </div>
-        </div>
+        )}
         {status ? (
           <div>
             <div className={styles['copy-token']}>
@@ -255,9 +259,6 @@ const TokenModal: React.FC<IProps> = (props) => {
                 }}
               />
             </FormItem>
-            <div className={styles['role-tips']}>
-              <FormattedMessage id="token.role.tips" />
-            </div>
             <div
               className={styles['footer']}
               onClick={(e: SyntheticEvent) => {

diff --git a/src/pages/apiToken/index.tsx b/src/pages/apiToken/index.tsx
@@ -120,7 +120,6 @@ const ApiToken = () => {
                     </>
                   </Table>
                   {tokenList.length === 0 && <NoData />}
-                  <TokenModal refresh={load} handleCancel={handleCancelAdd} open={modalOpen} />
                 </div>
               </div>
               {tokenList.length !== 0 && (
@@ -135,6 +134,7 @@ const ApiToken = () => {
               )}
             </>
           )}
+          <TokenModal refresh={load} handleCancel={handleCancelAdd} open={modalOpen} />
         </SettingCard>
       </Provider>
     </SettingLayout>

diff --git a/src/pages/personalToken/components/TokenModal/index.tsx b/src/pages/personalToken/components/TokenModal/index.tsx
@@ -49,11 +49,13 @@ const TokenModal: React.FC<IProps> = (props) => {
   }, [register, intl]);
 
   const onClose = useCallback(() => {
+    setValue('name', '');
+    setValue('role', '');
     setStatus(false);
     init();
     clearErrors();
     handleCancel && handleCancel();
-  }, [init, clearErrors, handleCancel]);
+  }, [init, clearErrors, handleCancel, setValue]);
 
   const onCopy = useCallback(async () => {
     try {
@@ -90,7 +92,7 @@ const TokenModal: React.FC<IProps> = (props) => {
         setToken(res.data?.token);
         refresh && refresh();
       } else {
-        message.error(intl.formatMessage({ id: 'token.create.error' }));
+        message.error(res.message || intl.formatMessage({ id: 'token.create.error' }));
       }
     } finally {
       setIsLoading(false);

diff --git a/src/pages/personalToken/index.tsx b/src/pages/personalToken/index.tsx
@@ -114,7 +114,6 @@ const ApiToken = () => {
                     </>
                   </Table>
                   {tokenList.length === 0 && <NoData />}
-                  <TokenModal refresh={load} handleCancel={handleCancelAdd} open={modalOpen} />
                 </div>
               </div>
               {tokenList.length !== 0 && (
@@ -129,6 +128,7 @@ const ApiToken = () => {
               )}
             </>
           )}
+          <TokenModal refresh={load} handleCancel={handleCancelAdd} open={modalOpen} />
         </SettingCard>
       </Provider>
     </UserSettingLayout>

diff --git a/src/pages/webhook/components/WebHookDrawer/index.tsx b/src/pages/webhook/components/WebHookDrawer/index.tsx
@@ -142,6 +142,9 @@ const WebHookDrawer = (props: IProps) => {
             customclass={styles['title-close']}
             type="close"
             onClick={() => {
+              setValue('url', '');
+              setValue('name', '');
+              setValue('description', '');
               clearErrors();
               onClose();
               init();