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', () => {
@@ -268,7 +268,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 +384,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/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');

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');
@@ -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');
 

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,18 @@ 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('#mode').click();
+
+    // Dark mode should show a different no-task-image.
+    cy.get('#light').should('not.exist');
+    cy.get('#no-task-image').should('not.exist');
+
+    cy.get('#dark').should('exist');
+    cy.get('#dark-no-task-image').should('exist');
+
     cy.intercept(
       {
         method: 'post',

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();
 

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

@@ -84,13 +84,6 @@ describe('Executions', () => {
 
       cy.get('.MuiList-root > :nth-child(3) > .MuiButtonBase-root').click();
 
-      // Whether the style selected by menu is Task.
-      cy.get(
-        ':nth-child(3) > .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiList-root > .MuiButtonBase-root',
-      ).should('have.class', 'Mui-selected');
-
-      cy.get('.MuiList-root > .Mui-selected').should('be.visible').and('have.text', 'Task');
-
       // The executions status is displayed as PENDING.
       cy.get('#list-11 > .css-1mlhis1').should('exist').find('#PENDING-11').should('exist');
       cy.get('#id-11').should('have.text', 11);
@@ -318,7 +311,7 @@ describe('Executions', () => {
       cy.get('#list-1').should('exist').find('#SUCCESS-1').should('exist');
 
       // Go to show executions page.
-      cy.get('#execution-1 > .MuiBox-root').click();
+      cy.get('#execution-1').click();
 
       // Then I see that the current page is the show update personal-access-tokens.
       cy.url().should('include', '/jobs/task/executions/1');