feat: refactor LDAP backend code and improve frontend operation (#1640)

* refactor: simplify ldap backend code and improve frontend operation

* chore: add skipCi tag in sync_test.go

* fix: ui

web/src/LdapEditPage.js

@@ -83,7 +83,12 @@ class LdapEditPage extends React.Component {
       <Card size="small" title={
         <div>
           {i18next.t("ldap:Edit LDAP")}&nbsp;&nbsp;&nbsp;&nbsp;
-          <Button type="primary" onClick={() => this.submitLdapEdit()}>{i18next.t("general:Save")}</Button>
+          <Button onClick={() => this.submitLdapEdit()}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitLdapEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          <Button style={{marginLeft: "20px"}}
+            onClick={() => Setting.goToLink(`/ldap/sync/${this.state.organizationName}/${this.state.ldapId}`)}>
+            {i18next.t("ldap:Sync")} LDAP
+          </Button>
         </div>
       } style={{marginLeft: "5px"}} type="inner">
         <Row style={{marginTop: "10px"}}>
@@ -190,14 +195,18 @@ class LdapEditPage extends React.Component {
     );
   }
 
-  submitLdapEdit() {
+  submitLdapEdit(willExist) {
     LddpBackend.updateLdap(this.state.ldap)
       .then((res) => {
         if (res.status === "ok") {
           Setting.showMessage("success", "Update LDAP server success");
-          this.setState((prevState) => {
-            prevState.ldap = res.data2;
+          this.setState({
+            organizationName: this.state.ldap.owner,
           });
+
+          if (willExist) {
+            this.props.history.push(`/organizations/${this.state.organizationName}`);
+          }
         } else {
           Setting.showMessage("error", res.msg);
         }
@@ -210,25 +219,13 @@ class LdapEditPage extends React.Component {
   render() {
     return (
       <div>
-        <Row style={{width: "100%"}}>
-          <Col span={1}>
-          </Col>
-          <Col span={22}>
-            {
-              this.state.ldap !== null ? this.renderLdap() : null
-            }
-          </Col>
-          <Col span={1}>
-          </Col>
-        </Row>
-        <Row style={{margin: 10}}>
-          <Col span={2}>
-          </Col>
-          <Col span={18}>
-            <Button type="primary" size="large"
-              onClick={() => this.submitLdapEdit()}>{i18next.t("general:Save")}</Button>
-          </Col>
-        </Row>
+        {
+          this.state.ldap !== null ? this.renderLdap() : null
+        }
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button size="large" onClick={() => this.submitLdapEdit()}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitLdapEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+        </div>
       </div>
     );
   }

web/src/LdapSyncPage.js

@@ -81,44 +81,28 @@ class LdapSyncPage extends React.Component {
             prevState.ldap = res.data;
             return prevState;
           });
-          this.getLdapUser(res.data);
+          this.getLdapUser();
         } else {
           Setting.showMessage("error", res.msg);
         }
       });
   }
 
-  getLdapUser(ldap) {
-    LdapBackend.getLdapUser(ldap)
+  getLdapUser() {
+    LdapBackend.getLdapUser(this.state.organizationName, this.state.ldapId)
       .then((res) => {
         if (res.status === "ok") {
           this.setState((prevState) => {
             prevState.users = res.data.users;
+            prevState.existUuids = res.data2?.length > 0 ? res.data2 : [];
             return prevState;
           });
-          this.getExistUsers(ldap.owner, res.data.users);
         } else {
           Setting.showMessage("error", res.msg);
         }
       });
   }
 
-  getExistUsers(owner, users) {
-    const uuidArray = [];
-    users.forEach(elem => {
-      uuidArray.push(elem.uuid);
-    });
-    LdapBackend.checkLdapUsersExist(owner, uuidArray)
-      .then((res) => {
-        if (res.status === "ok") {
-          this.setState(prevState => {
-            prevState.existUuids = res.data?.length > 0 ? res.data : [];
-            return prevState;
-          });
-        }
-      });
-  }
-
   buildValArray(data, key) {
     const valTypesArray = [];
 
@@ -220,9 +204,14 @@ class LdapSyncPage extends React.Component {
                 title={"Please confirm to sync selected users"}
                 onConfirm={() => this.syncUsers()}
               >
-                <Button type="primary" size="small"
-                  style={{marginLeft: "10px"}}>{i18next.t("ldap:Sync")}</Button>
+                <Button type="primary" style={{marginLeft: "10px"}}>
+                  {i18next.t("ldap:Sync")}
+                </Button>
               </Popconfirm>
+              <Button style={{marginLeft: "20px"}}
+                onClick={() => Setting.goToLink(`/ldap/${this.state.organizationName}/${this.state.ldapId}`)}>
+                {i18next.t("general:Edit")} LDAP
+              </Button>
             </div>
           )}
           loading={users === null}
@@ -234,17 +223,20 @@ class LdapSyncPage extends React.Component {
   render() {
     return (
       <div>
-        <Row style={{width: "100%"}}>
-          <Col span={1}>
-          </Col>
+        <Row style={{width: "100%", justifyContent: "center"}}>
           <Col span={22}>
             {
               this.renderTable(this.state.users)
             }
           </Col>
-          <Col span={1}>
-          </Col>
         </Row>
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => {
+            this.props.history.push(`/organizations/${this.state.organizationName}`);
+          }}>
+            {i18next.t("general:Save & Exit")}
+          </Button>
+        </div>
       </div>
     );
   }

web/src/LdapTable.js

@@ -58,14 +58,14 @@ class LdapTable extends React.Component {
     LdapBackend.addLdap(newLdap)
       .then((res) => {
         if (res.status === "ok") {
-          Setting.showMessage("success", "Add LDAP server success");
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
           if (table === undefined) {
             table = [];
           }
           table = Setting.addRow(table, res.data2);
           this.updateTable(table);
         } else {
-          Setting.showMessage("error", res.msg);
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
         }
       }
       )
@@ -78,14 +78,13 @@ class LdapTable extends React.Component {
     LdapBackend.deleteLdap(table[i])
       .then((res) => {
         if (res.status === "ok") {
-          Setting.showMessage("success", "Delete LDAP server success");
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
           table = Setting.deleteRow(table, i);
           this.updateTable(table);
         } else {
-          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
         }
-      }
-      )
+      })
       .catch(error => {
         Setting.showMessage("error", `Delete LDAP server failed: ${error}`);
       });
@@ -153,11 +152,14 @@ class LdapTable extends React.Component {
         render: (text, record, index) => {
           return (
             <div>
+              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} type="primary"
+                onClick={() => Setting.goToLink(`/ldap/sync/${record.owner}/${record.id}`)}>
+                {i18next.t("ldap:Sync")}
+              </Button>
               <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}}
-                type="primary"
-                onClick={() => Setting.goToLink(`/ldap/sync/${record.owner}/${record.id}`)}>{i18next.t("ldap:Sync")}</Button>
-              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}}
-                onClick={() => Setting.goToLink(`/ldap/${record.owner}/${record.id}`)}>{i18next.t("general:Edit")}</Button>
+                onClick={() => Setting.goToLink(`/ldap/${record.owner}/${record.id}`)}>
+                {i18next.t("general:Edit")}
+              </Button>
               <PopconfirmModal
                 title={i18next.t("general:Sure to delete") + `: ${record.serverName} ?`}
                 onConfirm={() => this.deleteRow(table, index)}

web/src/backend/LdapBackend.js

@@ -67,11 +67,10 @@ export function updateLdap(body) {
   }).then(res => res.json());
 }
 
-export function getLdapUser(body) {
-  return fetch(`${Setting.ServerUrl}/api/get-ldap-user`, {
-    method: "POST",
+export function getLdapUser(owner, name) {
+  return fetch(`${Setting.ServerUrl}/api/get-ldap-users?id=${owner}/${encodeURIComponent(name)}`, {
+    method: "GET",
     credentials: "include",
-    body: JSON.stringify(body),
     headers: {
       "Accept-Language": Setting.getAcceptLanguage(),
     },
@@ -88,14 +87,3 @@ export function syncUsers(owner, ldapId, body) {
     },
   }).then(res => res.json());
 }
-
-export function checkLdapUsersExist(owner, body) {
-  return fetch(`${Setting.ServerUrl}/api/check-ldap-users-exist?owner=${owner}`, {
-    method: "POST",
-    credentials: "include",
-    body: JSON.stringify(body),
-    headers: {
-      "Accept-Language": Setting.getAcceptLanguage(),
-    },
-  }).then(res => res.json());
-}