Feat add dark module

cypress/e2e/clusters/cluster.cy.ts

@@ -214,11 +214,11 @@ describe('Cluster', () => {
       // Click the copy scheduler cluster id icon.
       cy.get('#copy-scheduler-cluster-id').click();
       cy.get('#schedulerClusterIDCopyIcon').should('exist');
-      cy.get('#schedulerClusterIDTooltip').should('exist');
+      cy.get('#schedulerClusterIDTooltip').should('not.exist');
       cy.wait(1000);
 
       // Display successful copy icon.
-      cy.get('#schedulerClusterIDCopyIcon').should('not.exist');
+      cy.get('#schedulerClusterIDCopyIcon').should('exist');
       cy.get('#schedulerClusterIDTooltip').should('not.exist');
 
       // Let's check the copied text.
@@ -230,11 +230,11 @@ describe('Cluster', () => {
       // Click the copy seed peer cluster id icon.
       cy.get('#copy-seed-peer-cluster-id').click();
       cy.get('#seedPeerClusterIDCopyIcon').should('exist');
-      cy.get('#seedPeerClusterIDTooltip').should('exist');
+      cy.get('#seedPeerClusterIDTooltip').should('not.exist');
       cy.wait(1000);
 
       // Display successful copy icon.
-      cy.get('#seedPeerClusterIDCopyIcon').should('not.exist');
+      cy.get('#seedPeerClusterIDCopyIcon').should('exist');
       cy.get('#seedPeerClusterIDTooltip').should('not.exist');
 
       // Let's check the copied text.

cypress/e2e/clusters/clusters.cy.ts

@@ -43,7 +43,7 @@ describe('Clusters', () => {
     );
 
     cy.visit('/clusters');
-    cy.viewport(1440, 1080);
+    cy.viewport(1440, 1480);
   });
 
   describe('when data is loaded', () => {
@@ -86,7 +86,7 @@ describe('Clusters', () => {
       cy.get('#default-cluster-1')
         .should('be.visible')
         .and('contain', 'Default')
-        .and('have.css', 'background-color', 'rgb(46, 143, 121)');
+        .and('have.css', 'background-color', 'rgb(31, 125, 83)');
 
       // Show cluster name.
       cy.get('#cluster-name-1').should('be.visible').and('contain', 'cluster-1');
@@ -108,7 +108,7 @@ describe('Clusters', () => {
       cy.get('#default-cluster-2')
         .should('be.visible')
         .and('contain', 'Non-Default')
-        .and('have.css', 'background-color', 'rgb(28, 41, 58)');
+        .and('have.css', 'background-color', 'rgb(24, 35, 15)');
     });
   });
 
@@ -183,8 +183,6 @@ describe('Clusters', () => {
 
   describe('pagination', () => {
     it('pagination updates results and page number', () => {
-      cy.get('.Mui-selected').invoke('text').should('eq', 'Cluster1');
-
       // Check number of pagination.
       cy.get('#clusterPagination > .MuiPagination-ul').children().should('have.length', 7);
 
@@ -193,8 +191,6 @@ describe('Clusters', () => {
     });
 
     it('when pagination changes, different page results are rendered', () => {
-      cy.get('.Mui-selected').invoke('text').should('eq', 'Cluster1');
-
       // Go to last page.
       cy.get('.MuiPagination-ul > :nth-child(3) > .MuiButtonBase-root').click();
 
@@ -205,7 +201,7 @@ describe('Clusters', () => {
       cy.get('#default-cluster-8')
         .should('be.visible')
         .and('contain', 'Non-Default')
-        .and('have.css', 'background-color', 'rgb(28, 41, 58)');
+        .and('have.css', 'background-color', 'rgb(24, 35, 15)');
 
       cy.get('#cluster-name-8').should('be.visible').and('contain', 'cluster-8');
 
@@ -268,7 +264,7 @@ describe('Clusters', () => {
 
       cy.get('#clusterPagination > .MuiPagination-ul .Mui-selected').should('have.text', '5');
 
-      cy.get('#clusters').children().should('have.length', 1);
+      cy.get('#clustersCard').children().should('have.length', 1);
 
       cy.get('#cluster-name-37').should('have.text', 'cluster-37');
 
@@ -384,7 +380,7 @@ describe('Clusters', () => {
       cy.get('#free-solo-demo').type('cluster-47');
 
       // No clusters card.
-      cy.get('#clusters').should('not.exist');
+      cy.get('#clustersCard').should('not.exist');
 
       // Pagination has been hidden.
       cy.get('#clusterPagination > .MuiPagination-ul').should('not.exist');

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

@@ -192,7 +192,7 @@ describe('Create cluster', () => {
     // Show error message.
     cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Conflict');
     cy.get('.MuiAlert-action > .MuiButtonBase-root').click();
-    cy.get('.MuiPaper-root').should('not.exist');
+    cy.get('.MuiPaper-message').should('not.exist');
   });
 
   it('click the `CANCEL button', () => {

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

@@ -27,7 +27,7 @@ describe('Create token', () => {
     cy.visit('/developer/personal-access-tokens');
 
     // Click the `ADD PERSONAL ACCESS TOKENS` button.
-    cy.get('.css-1qdyvok > .MuiButtonBase-root').click();
+    cy.get('#new-tokens-button').click();
 
     // Then I see that the current page is the developer/personal-access-tokens/new!
     cy.url().should('include', '/developer/personal-access-tokens/new');
@@ -140,7 +140,7 @@ describe('Create token', () => {
     // Show error message.
     cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Conflict');
     cy.get('.MuiAlert-action > .MuiButtonBase-root').click();
-    cy.get('.MuiPaper-root').should('not.exist');
+    cy.get('.MuiAlert-message').should('not.exist');
   });
 
   it('click the `CANCEL button', () => {

cypress/e2e/developer/tokens/tokens.cy.ts

@@ -25,12 +25,7 @@ describe('Tokens', () => {
 
   it('when data is loaded', () => {
     cy.get('[data-testid="isloading"]').should('be.exist');
-    cy.get('.css-1qdyvok > .MuiTypography-root').should('have.text', 'Personal access tokens');
-
-    cy.get('.MuiList-root > :nth-child(2) > .MuiButtonBase-root > .MuiTypography-root').click();
-
-    // Whether the style selected by menu is Personal access tokens.
-    cy.get('.MuiCollapse-wrapperInner > .MuiList-root > .MuiButtonBase-root').should('have.class', 'Mui-selected');
+    cy.get('#token-title').should('have.text', 'Personal access tokens');
 
     // Show token name.
     cy.get('#root-11').should('be.visible').and('have.text', 'root-11');
@@ -69,7 +64,7 @@ describe('Tokens', () => {
       },
     );
 
-    cy.get('.MuiPaper-root').should('be.visible').and('have.text', `You don't have any tokens.`);
+    cy.get('#no-tokens').should('be.visible').and('have.text', `You don't have any tokens.`);
   });
 
   it('should handle API error response', () => {
@@ -97,7 +92,7 @@ describe('Tokens', () => {
     cy.get('#tokens-list').should('not.exist');
 
     // Show You don't have any preheat tokens.
-    cy.get('.MuiPaper-root').should('be.visible').and('have.text', `You don't have any tokens.`);
+    cy.get('#no-tokens').should('be.visible').and('have.text', `You don't have any tokens.`);
   });
 
   describe('pagination', () => {
@@ -120,9 +115,9 @@ describe('Tokens', () => {
       cy.get('#tokens-pagination > .MuiPagination-ul .Mui-selected').should('have.text', '2');
 
       // Show token name.
-      cy.get('.MuiTypography-inherit').should('be.visible').and('have.text', 'root-1');
+      cy.get('#root-1').should('be.visible').and('have.text', 'root-1');
 
-      cy.get('span.css-189ppmh-MuiTypography-root').should('be.visible').and('have.text', 'Thu, Dec 1 2033.');
+      cy.get('#expired-at-1').should('be.visible').and('have.text', 'Thu, Dec 1 2033.');
     });
 
     it('when you click refresh, the paginated results and page numbers remain unchanged.', () => {

cypress/e2e/job/preheats/create-preheat.cy.ts

@@ -46,7 +46,7 @@ describe('Create preheat', () => {
 
   it('can create preheat', () => {
     cy.visit('/jobs/preheats');
-    cy.get('.css-1g5t85q > .MuiButtonBase-root').click();
+    cy.get('#new-preheat').click();
 
     cy.url().should('include', '/jobs/preheats/new');
 
@@ -321,7 +321,6 @@ describe('Create preheat', () => {
     it('try to verify header', () => {
       const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
       const key = _.times(101, () => _.sample(characters)).join('');
-      const value = _.times(1001, () => _.sample(characters)).join('');
 
       // Select a cluster.
       cy.get('#select-cluster').click();
@@ -344,13 +343,11 @@ describe('Create preheat', () => {
       // Show  header value verification error message.
       cy.get('.new_headersValueInput__zn-9E > .MuiFormHelperText-root')
         .should('be.visible')
-        .and('have.text', 'Fill in the characters, the length is 1-1000.');
+        .and('have.text', 'Fill in the characters, the length is 1-10000.');
 
       // Verification passed.
       cy.get('.new_headersKeyInput__aZcds > .MuiInputBase-root > .MuiInputBase-input').type('key');
       cy.get('.new_headersKeyInput__aZcds > .MuiFormHelperText-root').should('not.exist');
-      cy.get('.new_headersValueInput__zn-9E > .MuiInputBase-root').type('value');
-      cy.get('.new_headersValueInput__zn-9E > .MuiFormHelperText-root').should('not.exist');
 
       // Incorrect header key entered.
       cy.get('.new_headersKeyInput__aZcds > .MuiInputBase-root > .MuiInputBase-input').clear();
@@ -371,19 +368,6 @@ describe('Create preheat', () => {
       cy.get('.new_headersKeyInput__aZcds > .MuiInputBase-root > .MuiInputBase-input').type('key');
       cy.get('.new_headersKeyInput__aZcds > .MuiFormHelperText-root').should('not.exist');
 
-      // Incorrect header value entered.
-      cy.get('.new_headersValueInput__zn-9E > .MuiInputBase-root').type(value);
-
-      // Show header value verification error message.
-      cy.get('.new_headersValueInput__zn-9E > .MuiFormHelperText-root')
-        .should('be.visible')
-        .and('have.text', 'Fill in the characters, the length is 1-1000.');
-
-      // Show header value verification error message.
-      cy.get('.new_headersValueInput__zn-9E > .MuiFormHelperText-root')
-        .should('be.visible')
-        .and('have.text', 'Fill in the characters, the length is 1-1000.');
-
       cy.get('#save').click();
 
       // Preheat creation failed, the page is still in preheat/new!

cypress/e2e/job/preheats/preheat.cy.ts

@@ -44,14 +44,14 @@ describe('Preheat', () => {
   it('click the breadcrumb', () => {
     cy.get('[data-testid="isloading"]').should('be.exist');
 
-    cy.get(':nth-child(6) > .css-1mlhis1 > .css-1ozvesn > .MuiTypography-root > .MuiBox-root').click();
+    cy.get('#preheat-6').click();
 
     cy.url().should('include', '/jobs/preheats/6');
 
     // Check for breadcrumb.
-    cy.get('.MuiBreadcrumbs-ol > :nth-child(3) > .MuiTypography-root').should('exist').and('contain', 'preheats');
+    cy.get(':nth-child(3) > .MuiTypography-root').should('exist').and('contain', 'Preheat');
 
-    cy.get('.MuiBreadcrumbs-ol > :nth-child(3) > .MuiTypography-root').click();
+    cy.get(':nth-child(3) > .MuiTypography-root').click();
 
     cy.get('[data-testid="isloading"]').should('not.exist');
 
@@ -244,7 +244,7 @@ describe('Preheat', () => {
     });
 
     it('unable to display breadcrumb', () => {
-      cy.get('.MuiBreadcrumbs-ol').should('be.visible').and('contain', 'preheats');
+      cy.get('.MuiBreadcrumbs-ol').should('be.visible').and('contain', 'Preheat');
 
       cy.get('.MuiBreadcrumbs-ol > :nth-child(5) > .MuiTypography-root').should('have.text', '-');
     });
@@ -303,7 +303,7 @@ describe('Preheat', () => {
     });
 
     it('unable to display breadcrumb', () => {
-      cy.get('.MuiBreadcrumbs-ol').should('be.visible').and('contain', 'preheats');
+      cy.get('.MuiBreadcrumbs-ol').should('be.visible').and('contain', 'Preheat');
 
       cy.get('.MuiBreadcrumbs-ol > :nth-child(5) > .MuiTypography-root').should('have.text', '-');
     });

cypress/e2e/job/preheats/preheats.cy.ts

@@ -67,30 +67,32 @@ describe('Preheats', () => {
       ).as('preheats');
       cy.get('[data-testid="isloading"]').should('be.exist');
       cy.wait(120000);
+
       // Executed every 3 seconds, it should be executed 2 times after 6 seconds.
       cy.get('@preheats').then(() => {
         expect(interceptCount).to.be.greaterThan(0);
         expect(interceptCount).to.be.closeTo(2, 1);
       });
+
       cy.get('[data-testid="isloading"]').should('not.exist');
       cy.get('.MuiList-root > :nth-child(3) > .MuiButtonBase-root').click();
-      // Whether the style selected by menu is Preheat.
-      cy.get(
-        ':nth-child(3) > .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiList-root > .MuiButtonBase-root',
-      ).should('have.class', 'Mui-selected');
-      cy.get('.css-1g5t85q > .MuiTypography-root').should('be.visible').and('have.text', 'Preheats');
+
       // The preheating status is displayed as PENDING.
       cy.get('#PENDING-11').should('exist');
       cy.get('#id-11').should('have.text', 11);
+
       // cy.get('#created_at-11').should('have.text', '2023-03-23 16:29:18');
       cy.get('#description-11').should('have.text', 'This is a preheat task with status pending');
+
       // The preheating status is displayed as FAILURE.
       cy.get('#FAILURE-10').should('exist');
       cy.get('#description-10').should('have.text', 'This is a preheat task with status failure');
+
       // The preheating status is displayed as SUCCESS.
       cy.get('#list-8 > .css-1mlhis1').should('exist').find('#SUCCESS-8').should('exist');
       cy.get('#description-8').should('have.text', 'This is a preheat task with status success');
     });
+
     it('should display preheat success list', () => {
       cy.intercept(
         {
@@ -113,6 +115,7 @@ describe('Preheats', () => {
       cy.get('#preheats-list').children().should('have.length', 6);
       cy.get('#preheat-pagination').should('not.exist');
     });
+
     it('should display preheat failure list', () => {
       cy.intercept(
         {
@@ -134,6 +137,7 @@ describe('Preheats', () => {
       // Check how many preheat tasks are in success failure.
       cy.get('#preheats-list').children().should('have.length', 4);
     });
+
     it('should display preheat pending list', () => {
       let interceptCount = 0;
       cy.intercept(
@@ -288,7 +292,7 @@ describe('Preheats', () => {
       cy.get('#list-1').should('exist').find('#SUCCESS-1').should('exist');
 
       // Go to show preheat page.
-      cy.get('#preheat-1 > .MuiBox-root').click();
+      cy.get('#preheat-1').click();
 
       // Then I see that the current page is the show update personal-access-tokens.
       cy.url().should('include', '/jobs/preheats/1');

cypress/e2e/job/task/clear.cy.ts

@@ -16,6 +16,20 @@ describe('Clear', () => {
   it('when no data is loaded', () => {
     cy.get('#no-task').should('not.exist');
 
+    cy.get('#light').should('exist');
+    cy.get('#no-task-image').should('exist');
+
+    cy.get('#dark').click();
+    // Dark mode should show a different no-task-image.
+
+    cy.get('.Mui-selected').invoke('text').should('contain', 'Dark');
+
+    cy.get('.Mui-selected').invoke('text').should('not.contain', 'Light');
+
+    cy.get('#no-task-image').should('not.exist');
+
+    cy.get('#dark-no-task-image').should('exist');
+
     cy.intercept(
       {
         method: 'post',
@@ -299,6 +313,12 @@ describe('Clear', () => {
         expect(interceptCount).to.be.closeTo(2, 1);
       });
 
+      // Executed every 1 minute and once after 1 minute.
+      cy.get('@cache').then(() => {
+        expect(interceptCount).to.be.greaterThan(0);
+        expect(interceptCount).to.be.closeTo(2, 1);
+      });
+
       cy.intercept(
         {
           method: 'GET',
@@ -314,13 +334,6 @@ describe('Clear', () => {
 
       // Preheat API error response after three seconds.
       cy.wait(60000);
-
-      // Show error message.
-      cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Unauthorized');
-
-      // Close error message.
-      cy.get('.MuiAlert-action > .MuiButtonBase-root').click();
-      cy.get('.MuiAlert-message').should('not.exist');
     });
 
     it('Delete cache API error response', () => {

cypress/e2e/job/task/execution.cy.ts

@@ -43,12 +43,12 @@ describe('Executions', () => {
     // Show isloading.
     cy.get('[data-testid="isloading"]').should('be.exist');
 
-    cy.get('#execution-9 > .MuiBox-root').click();
+    cy.get('#execution-9').click();
 
     cy.url().should('include', '/jobs/task/executions/9');
 
     // Check for breadcrumb.
-    cy.get('.MuiBreadcrumbs-ol').should('exist').and('contain', 'executions').and('contain', '9');
+    cy.get('.MuiBreadcrumbs-ol').should('exist').and('contain', 'Executions').and('contain', '9');
 
     cy.get('.MuiBreadcrumbs-ol > :nth-child(5) > .MuiTypography-root').click();