fix: edit cluster page problem (#360)

* fix: edit cluster page problem

Signed-off-by: zhaoxinxin <1186037180@qq.com>

* fix: edit cluster page problem

Signed-off-by: zhaoxinxin <1186037180@qq.com>

---------

Signed-off-by: zhaoxinxin <1186037180@qq.com>

config-overrides.js

@@ -5,6 +5,7 @@ module.exports = function override(config) {
     crypto: require.resolve('crypto-browserify'),
     stream: require.resolve('stream-browserify'),
     querystring: require.resolve('query-string'),
+    vm: false,
   });
   config.resolve.fallback = fallback;
   config.plugins = (config.plugins || []).concat([

cypress/e2e/clusters/update-cluster.cy.ts

@@ -82,35 +82,69 @@ describe('Update cluster', () => {
     cy.intercept(
       {
         method: 'GET',
-        url: '/api/v1/clusters/1',
+        url: '/api/v1/clusters/2',
       },
       (req) => {
         req.reply({
-          statusCode: 401,
+          statusCode: 200,
-          body: { message: 'Not Found' },
+          body: {
+            "id": 0,
+            "name": "",
+            "bio": "",
+            "scopes": {
+              "idc": "",
+              "location": "",
+              "cidrs": null,
+              "hostnames": null
+            },
+            "scheduler_cluster_id": 1,
+            "seed_peer_cluster_id": 1,
+            "scheduler_cluster_config": {
+              "candidate_parent_limit": 0,
+              "filter_parent_limit": 0
+            },
+            "seed_peer_cluster_config": {
+              "load_limit": 0
+            },
+            "peer_cluster_config": {
+              "load_limit": 0
+            },
+            "created_at": "2023-03-08T02:39:03Z",
+            "updated_at": "2023-03-08T02:39:03Z",
+            "is_default": true
+          },
         });
       },
     );
+
+    cy.visit('/clusters/2/edit');
+
     // Show cluster information.
 
-    cy.get('.MuiPaper-outlined > .css-0 > :nth-child(1)').should('not.contain', '1');
+    cy.get('.MuiPaper-outlined > .css-0 > :nth-child(1)').should('contain', '0');
 
-    cy.get('.MuiPaper-root > .css-0 > :nth-child(2)').should('not.contain', 'cluster-1');
+    cy.get('.MuiPaper-root > .css-0 > :nth-child(2)').should('contain', '');
 
     cy.get('.PrivateSwitchBase-input').should('not.be.checked').check({ force: false });
 
-    // Show scopes.
+    // When location is empty.
     cy.get('#location').should('have.value', '');
 
+    // When idc is empty.
     cy.get(':nth-child(2) > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root').should(
       'have.value',
       '',
     );
-
+    // When CIDRs is empty.
     cy.get(':nth-child(3) > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root').should(
       'have.value',
       '',
     );
+    // When Hostname is empty.
+    cy.get(':nth-child(4) > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root').should(
+      'have.value',
+      '',
+    );
 
     // Show config.
     cy.get('#seedPeerLoadLimit').should('have.value', 0);

cypress/e2e/developer/tokens/update-token.cy.ts

@@ -70,8 +70,8 @@ describe('Update token', () => {
       },
       (req) => {
         req.reply({
-          statusCode: 401,
+          statusCode: 200,
-          body: { message: 'Not Found' },
+          body: {},
         });
       },
     );

src/components/clusters/edit.tsx

@@ -290,7 +290,7 @@ export default function EditCluster() {
       label: 'Hostnames',
       enterMultiple: true,
       scopesFormProps: {
-        value: hostnames,
+        value: hostnames || [],
         options: [],
 
         onChange: (_e: any, newValue: any) => {

src/components/clusters/show.tsx

@@ -178,7 +178,7 @@ export default function ShowCluster() {
   }, [params.id, schedulerCurrentPage, seedPeerCurrentPage]);
 
   useEffect(() => {
-    if (scheduler.length > 0) {
+    if (Array.isArray(scheduler) && scheduler.length >= 1) {
       scheduler.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
       scheduler.sort((a, b) => {
         if (a.state < b.state) {
@@ -198,11 +198,14 @@ export default function ShowCluster() {
 
       setSchedulerTotalPages(totalPage);
       setAllSchedlers(currentPageData);
+    } else {
+      setSchedulerTotalPages(1);
+      setAllSchedlers([]);
     }
   }, [scheduler, schedulerPage]);
 
   useEffect(() => {
-    if (seedPeer.length > 0) {
+    if (Array.isArray(seedPeer) && seedPeer.length >= 1) {
       seedPeer.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
       seedPeer.sort((a, b) => {
         if (a.state < b.state) {
@@ -222,6 +225,9 @@ export default function ShowCluster() {
 
       setSeedPeerTotalPages(totalPage);
       setAllSeedPeers(currentPageData);
+    } else {
+      setSeedPeerTotalPages(1);
+      setAllSeedPeers([]);
     }
   }, [seedPeer, seedPeerPage]);
 
@@ -890,8 +896,7 @@ export default function ShowCluster() {
             onChange={(_event: any, newPage: number) => {
               setSchedulerPage(newPage);
               navigate(
-                `/clusters/${params.id}${newPage > 1 ? `?schedulerPage=${newPage}` : ''}${
+                `/clusters/${params.id}${newPage > 1 ? `?schedulerPage=${newPage}` : ''}${seedPeerPage > 1 ? `${newPage > 1 ? '&' : '?'}seedPeerPage=${seedPeerPage}` : ''
-                  seedPeerPage > 1 ? `${newPage > 1 ? '&' : '?'}seedPeerPage=${seedPeerPage}` : ''
                 }`,
               );
             }}
@@ -1177,8 +1182,7 @@ export default function ShowCluster() {
             onChange={(_event: any, newPage: number) => {
               setSeedPeerPage(newPage);
               navigate(
-                `/clusters/${params.id}${schedulerPage > 1 ? `?schedulerPage=${schedulerPage}` : ''}${
+                `/clusters/${params.id}${schedulerPage > 1 ? `?schedulerPage=${schedulerPage}` : ''}${newPage > 1 ? `${schedulerPage > 1 ? '&' : '?'}seedPeerPage=${newPage}` : ''
-                  newPage > 1 ? `${schedulerPage > 1 ? '&' : '?'}seedPeerPage=${newPage}` : ''
                 }`,
               );
             }}

src/components/developer/tokens/index.tsx

@@ -87,7 +87,7 @@ export default function PersonalAccessTokens() {
   }, [page]);
 
   useEffect(() => {
-    if (token.length > 1) {
+    if (Array.isArray(token) && token.length >= 1) {
       token.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
 
       const totalPage = Math.ceil(token.length / DEFAULT_PAGE_SIZE);
@@ -99,9 +99,14 @@ export default function PersonalAccessTokens() {
 
       setTokensTotalPages(totalPage || 1);
       setAllTokens(currentPageData);
+    } else {
+      setTokensTotalPages(1);
+      setAllTokens([]);
     }
   }, [token, tokensPage]);
 
+  console.log(token, allTokens);
+
   const handleDeleteClose = async (row: any) => {
     setOpenDeletToken(true);
     setTokenSelectedID(row.id);