Skip to content

Commit bbb8c2e

Browse files
jjzhang332yingxuan
jjzhang332
and
yingxuan
authored
feat: Added the TransitionRoute component to provide smooth transition animations for all pages. (#638)
Signed-off-by: yingxuan <zhanglujia.zlj@digital-engine.com> Co-authored-by: yingxuan <zhanglujia.zlj@digital-engine.com>
1 parent 64192af commit bbb8c2e

File tree

12 files changed

+484
-148
lines changed

12 files changed

+484
-148
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ describe('Create cluster', () => {
6464
cy.url().should('include', '/clusters/new');
6565

6666
// Add Information.
67-
cy.get('.PrivateSwitchBase-input').click();
67+
cy.get('.PrivateSwitchBase-input').click({force: true});
6868
cy.get('#name').type('cluster-17');
6969
cy.get('#description').type('Add new cluster case');
7070
cy.get('#location').type('China|Hang|Zhou');

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ describe('Update cluster', () => {
140140
// Show cluster name.
141141
cy.get('#name').should('be.visible').and('contain', 'cluster-1');
142142

143-
cy.get('#default').click();
143+
cy.get('#default').click({force: true});
144144

145145
// Update cluster description.
146146
cy.get('#description').clear();

‎cypress/e2e/peers/peers.cy.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,7 @@ describe('Peers', () => {
233233

234234
it('show error message', () => {
235235
// Show error message.
236-
cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Failed to fetch');
236+
cy.get('.MuiAlert-message', { timeout: 5000 }).should('be.visible').and('contain', 'Failed to fetch');
237237

238238
// Close error message.
239239
cy.get('.MuiAlert-action > .MuiButtonBase-root').click();
@@ -245,7 +245,7 @@ describe('Peers', () => {
245245
cy.get('#save').click();
246246

247247
// Show error message.
248-
cy.get('.MuiAlert-message').should('have.text', 'Export failed');
248+
cy.get('.MuiAlert-message', { timeout: 5000 }).should('be.visible').and('contain', 'Failed to fetch');
249249
});
250250
});
251251

@@ -394,7 +394,7 @@ describe('Peers', () => {
394394
cy.wait(2000);
395395

396396
// Show error message.
397-
cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Failed to fetch');
397+
cy.get('.MuiAlert-message', { timeout: 5000 }).should('be.visible').and('contain', 'Failed to fetch');
398398

399399
cy.get('#total').should('have.text', 10);
400400
cy.get('#git-version').should('have.text', 4);

‎cypress/e2e/resource/persistent-cache-task/persistent-cache-task.cy.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ describe('Persistent Cache Tasks', () => {
109109
cy.get('#scheduler-cluster-1').click();
110110

111111
cy.get('#operation-0').click();
112-
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > .information_menu__CXV1V > #view-3810320977').click();
112+
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > .information_menu__CXV1V > #view-3810320977').click({force:true});
113113

114114
// Then I see that the current page is the persistent cache task details!
115115
cy.url().should('include', '/resource/persistent-cache-task/clusters/1/3810320977');
@@ -122,7 +122,7 @@ describe('Persistent Cache Tasks', () => {
122122

123123
cy.get('#operation-3810320977').click();
124124

125-
cy.get(':nth-child(12) > .MuiPaper-root > .MuiList-root > .information_menu__CXV1V > #view-3810320977').click();
125+
cy.get(':nth-child(12) > .MuiPaper-root > .MuiList-root > .information_menu__CXV1V > #view-3810320977').click({force:true});
126126

127127
// Then I see that the current page is the persistent cache task details!
128128
cy.url().should('include', '/resource/persistent-cache-task/clusters/1/3810320977');

‎cypress/e2e/resource/persistent-cache-task/persistent-cache-tasks.cy.ts‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ describe('Persistent Cache Tasks', () => {
4444

4545
cy.get('#cluster-name-1').should('have.text', 'cluster-1');
4646

47-
cy.get('#cluster-name-1').click();
47+
cy.get('#cluster-name-1').click({force:true});
4848
});
4949

5050
it('should show persistent cache tasks', () => {
@@ -62,7 +62,7 @@ describe('Persistent Cache Tasks', () => {
6262
cy.get('#tag-0').should('have.text', 'tag-4');
6363
cy.get('#application-0').should('have.text', 'application-3');
6464

65-
cy.get('#table').click();
65+
cy.get('#table').click({force:true});
6666

6767
cy.get(':nth-child(1) > #id-3810320977').should('have.text', '3810320977');
6868
});
@@ -215,11 +215,10 @@ describe('Persistent Cache Tasks', () => {
215215
});
216216

217217
it('can the delet persistent cache task', () => {
218-
cy.get('#operation-0').click();
218+
cy.get('#operation-0').click({force: true});
219219

220220
cy.get('#delete-task').should('not.exist');
221-
222-
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > .information_menu__CXV1V > #delete-3810320977').click();
221+
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > .information_menu__CXV1V > #delete-3810320977').click({force:true});
223222
cy.get('#delete-task').should('exist');
224223

225224
cy.get('#help-delete-task').should('have.text', 'Persistent cache task will be permanently deleted.');
@@ -271,13 +270,13 @@ describe('Persistent Cache Tasks', () => {
271270
});
272271

273272
it('should handle API error response', () => {
274-
cy.get('#operation-0').click();
273+
cy.get('#operation-0').click({force: true});
275274
cy.get('body').click('topLeft');
276-
cy.get('#operation-0').click();
275+
cy.get('#operation-0').click({force: true});
277276

278277
cy.get('#delete-task').should('not.exist');
279278

280-
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > .information_menu__CXV1V > #delete-3810320977').click();
279+
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > .information_menu__CXV1V > #delete-3810320977').click({force: true});
281280
cy.get('#delete-task').should('exist');
282281

283282
cy.get('#help-delete-task').should('have.text', 'Persistent cache task will be permanently deleted.');
@@ -308,9 +307,9 @@ describe('Persistent Cache Tasks', () => {
308307

309308
cy.url().should('include', '/resource/persistent-cache-task/clusters/1?page=3');
310309

311-
cy.get('#operation-0').click();
310+
cy.get('#operation-0').click({force: true});
312311

313-
cy.get('#delete-2865345332').click();
312+
cy.get('#delete-2865345332').click({force: true});
314313

315314
cy.intercept(
316315
{
@@ -362,9 +361,9 @@ describe('Persistent Cache Tasks', () => {
362361

363362
cy.url().should('include', '/resource/persistent-cache-task/clusters/1?page=2');
364363

365-
cy.get('#operation-8').click();
364+
cy.get('#operation-8').click({force: true});
366365

367-
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > .information_menu__CXV1V > #delete-2865345332').click();
366+
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > .information_menu__CXV1V > #delete-2865345332').click({force: true});
368367

369368
cy.intercept(
370369
{

‎cypress/e2e/schedulers/schedulers.cy.ts‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ describe('Schedulers', () => {
9393
// Click scheduler-18 operation button.
9494
cy.get('#operation-18').click();
9595

96-
cy.get(':nth-child(12) > .MuiPaper-root > .MuiList-root > #view-scheduler-18').click();
96+
cy.get(':nth-child(12) > .MuiPaper-root > .MuiList-root > #view-scheduler-18').click({force: true});
9797

9898
// Then I see that the current page is the scheduler 18.
9999
cy.url().should('include', 'clusters/1/schedulers/18');
@@ -130,7 +130,7 @@ describe('Schedulers', () => {
130130
// It can show that the scheduler card is 10.
131131
cy.get('#scheduler-card').children().should('have.length', 9);
132132
cy.get('#operation-51').click();
133-
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > #view-51').click();
133+
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > #view-51').click({force: true});
134134

135135
// Then I see that the current page is the scheduler 51.
136136
cy.url().should('include', 'clusters/1/schedulers/51');
@@ -604,7 +604,7 @@ describe('Schedulers', () => {
604604
},
605605
);
606606

607-
cy.get(':nth-child(12) > .MuiPaper-root > .MuiList-root > #delete-scheduler-4').click();
607+
cy.get(':nth-child(12) > .MuiPaper-root > .MuiList-root > #delete-scheduler-4').click({force: true});
608608

609609
cy.get('#deleteScheduler').click();
610610

@@ -632,7 +632,7 @@ describe('Schedulers', () => {
632632

633633
cy.get('#operation-10').click();
634634

635-
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > #delete-10').click();
635+
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > #delete-10').click({force: true});
636636

637637
cy.intercept(
638638
{
@@ -670,7 +670,7 @@ describe('Schedulers', () => {
670670
cy.get('#scheduler-card').children().should('have.length', 1);
671671

672672
cy.get('#operation-22').click();
673-
cy.get('#delete-22').click();
673+
cy.get('#delete-22').click({force: true});
674674

675675
cy.intercept(
676676
{
@@ -738,7 +738,7 @@ describe('Schedulers', () => {
738738
cy.get('#card-hostname-scheduler-51').should('be.visible').and('contain', 'scheduler-51');
739739

740740
cy.get('#operation-51').click();
741-
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > #delete-51').click();
741+
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > #delete-51').click({force: true});
742742
cy.get('#deleteScheduler').click();
743743
cy.wait('@delete');
744744

@@ -763,7 +763,7 @@ describe('Schedulers', () => {
763763
cy.get('#hostname-scheduler-51').should('be.visible').and('contain', 'scheduler-51');
764764

765765
cy.get('#operation-51').click();
766-
cy.get(':nth-child(12) > .MuiPaper-root > .MuiList-root > #delete-scheduler-51').click();
766+
cy.get(':nth-child(12) > .MuiPaper-root > .MuiList-root > #delete-scheduler-51').click({force: true});
767767

768768
cy.get('#deleteScheduler').click();
769769

@@ -776,7 +776,7 @@ describe('Schedulers', () => {
776776

777777
cy.get('#operation-51').click();
778778

779-
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > #delete-51').click();
779+
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > #delete-51').click({force: true});
780780

781781
cy.get('#deleteScheduler').click();
782782

@@ -1042,23 +1042,23 @@ describe('Schedulers', () => {
10421042
cy.get('#operation-7').click();
10431043

10441044
// Display the edit features dialog.
1045-
cy.get(':nth-child(12) > .MuiPaper-root > .MuiList-root > #edit-scheduler-7').click();
1045+
cy.get(':nth-child(12) > .MuiPaper-root > .MuiList-root > #edit-scheduler-7').click({force: true});
10461046

10471047
cy.get('#close-delete-icon').click();
10481048
cy.get('#operation-7').click();
10491049

10501050
// Display the edit features dialog.
1051-
cy.get(':nth-child(12) > .MuiPaper-root > .MuiList-root > #edit-scheduler-7').click();
1051+
cy.get(':nth-child(12) > .MuiPaper-root > .MuiList-root > #edit-scheduler-7').click({force: true});
10521052

10531053
// Check that the Schedule checkbox.
10541054
cy.get('#Schedule-Checkbox').should('have.prop', 'checked', true);
10551055

10561056
// Check that the Preheat checkbox.
10571057
cy.get('#Preheat-Checkbox').should('have.prop', 'checked', false);
10581058

1059-
cy.get('#Schedule-Checkbox').click();
1059+
cy.get('#Schedule-Checkbox').click({force: true});
10601060

1061-
cy.get('#Preheat-Checkbox').click();
1061+
cy.get('#Preheat-Checkbox').click({force: true});
10621062

10631063
cy.intercept({ method: 'PATCH', url: '/api/v1/schedulers/7' }, (req) => {
10641064
(req.body = ''),
@@ -1099,17 +1099,17 @@ describe('Schedulers', () => {
10991099
cy.get('#operation-7').click();
11001100

11011101
// Display the edit features dialog.
1102-
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > #edit-7').click();
1102+
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > #edit-7').click({force: true});
11031103

11041104
// Check that the Schedule checkbox.
11051105
cy.get('#Schedule-Checkbox').should('have.prop', 'checked', true);
11061106

11071107
// Check that the Preheat checkbox.
11081108
cy.get('#Preheat-Checkbox').should('have.prop', 'checked', false);
11091109

1110-
cy.get('#Schedule-Checkbox').click();
1110+
cy.get('#Schedule-Checkbox').click({force: true});
11111111

1112-
cy.get('#Preheat-Checkbox').click();
1112+
cy.get('#Preheat-Checkbox').click({force: true});
11131113

11141114
cy.intercept({ method: 'PATCH', url: '/api/v1/schedulers/7' }, (req) => {
11151115
(req.body = ''),
@@ -1152,7 +1152,7 @@ describe('Schedulers', () => {
11521152
cy.get('#operation-7').click();
11531153

11541154
// Display the edit features dialog.
1155-
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > #edit-7').click();
1155+
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > #edit-7').click({force: true});
11561156

11571157
// Check that the Schedule checkbox.
11581158
cy.get('#Schedule-Checkbox').should('have.prop', 'checked', true);
@@ -1161,7 +1161,7 @@ describe('Schedulers', () => {
11611161
cy.get('#Preheat-Checkbox').should('have.prop', 'checked', false);
11621162

11631163
// Check all checkboxes.
1164-
cy.get('[type="checkbox"]').check();
1164+
cy.get('[type="checkbox"]').check({force: true});
11651165
cy.intercept({ method: 'PATCH', url: '/api/v1/schedulers/7' }, (req) => {
11661166
(req.body = ''),
11671167
req.reply({
@@ -1184,7 +1184,7 @@ describe('Schedulers', () => {
11841184
cy.get('#operation-7').click();
11851185

11861186
// Display the edit features dialog.
1187-
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > #edit-7').click();
1187+
cy.get(':nth-child(11) > .MuiPaper-root > .MuiList-root > #edit-7').click({force: true});
11881188

11891189
// Check that the Schedule checkbox.
11901190
cy.get('#Schedule-Checkbox').should('have.prop', 'checked', true);
@@ -1193,7 +1193,7 @@ describe('Schedulers', () => {
11931193
cy.get('#Preheat-Checkbox').should('have.prop', 'checked', false);
11941194

11951195
// Check all checkboxes.
1196-
cy.get('[type="checkbox"]').check();
1196+
cy.get('[type="checkbox"]').check({force: true});
11971197
cy.intercept({ method: 'PATCH', url: '/api/v1/schedulers/7' }, (req) => {
11981198
(req.body = ''),
11991199
req.reply({

‎cypress/e2e/users/users.cy.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -441,6 +441,11 @@ describe('Users', () => {
441441

442442
cy.get('#save').click();
443443

444+
// Change success message.
445+
cy.get('.MuiAlert-message').should('be.visible').and('have.text', 'Submission successful!');
446+
cy.get('.MuiAlert-action > .MuiButtonBase-root').click();
447+
cy.get('.MuiAlert-message').should('not.exist');
448+
444449
cy.intercept(
445450
{
446451
method: 'GET',
@@ -457,11 +462,6 @@ describe('Users', () => {
457462
cy.get('#action-lucy').click();
458463
cy.get('#edit-lucy').click();
459464

460-
// Change success message.
461-
cy.get('.MuiAlert-message').should('be.visible').and('have.text', 'Submission successful!');
462-
cy.get('.MuiAlert-action > .MuiButtonBase-root').click();
463-
cy.get('.MuiAlert-message').should('not.exist');
464-
465465
// Check role.
466466
cy.get('#role-root').should('not.be.checked');
467467
cy.get('#role-guest').should('be.checked').check({ force: true });
@@ -514,6 +514,7 @@ describe('Users', () => {
514514
cy.get('#role-root').click();
515515
cy.get('#save').click();
516516
cy.get('.MuiAlert-message').should('be.visible').and('have.text', 'Submission successful!');
517+
cy.get('.MuiAlert-action > .MuiButtonBase-root').click();
517518

518519
cy.intercept(
519520
{

‎src/components/GlobalAlertPortal.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, { useEffect, useRef } from 'react';
2+
import { createPortal } from 'react-dom';
3+
4+
interface GlobalAlertPortalProps {
5+
children: React.ReactNode;
6+
}
7+
8+
const GlobalAlertPortal: React.FC<GlobalAlertPortalProps> = ({ children }) => {
9+
const portalRef = useRef<HTMLDivElement | null>(null);
10+
11+
useEffect(() => {
12+
let alertContainer = document.getElementById('global-alert-container');
13+
14+
if (!alertContainer) {
15+
alertContainer = document.createElement('div');
16+
alertContainer.id = 'global-alert-container';
17+
alertContainer.style.cssText = `
18+
position: fixed;
19+
top: 0;
20+
left: 0;
21+
width: 100%;
22+
height: 100%;
23+
pointer-events: none;
24+
z-index: 9999;
25+
`;
26+
document.body.appendChild(alertContainer);
27+
}
28+
29+
portalRef.current = alertContainer as HTMLDivElement;
30+
31+
return () => {
32+
};
33+
}, []);
34+
35+
if (typeof window === 'undefined' || !portalRef.current) {
36+
return null;
37+
}
38+
39+
return createPortal(children, portalRef.current);
40+
};
41+
42+
export default GlobalAlertPortal;

0 commit comments

Comments
 (0)