diff --git a/client/src/components/Flash/index.tsx b/client/src/components/Flash/index.tsx
index 6accd829365..e753212cf45 100644
--- a/client/src/components/Flash/index.tsx
+++ b/client/src/components/Flash/index.tsx
@@ -1,5 +1,5 @@
import { Alert } from '@freecodecamp/react-bootstrap';
-import React, { useState, useEffect } from 'react';
+import React from 'react';
import { useTranslation } from 'react-i18next';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { FlashState } from '../../redux/types';
@@ -15,45 +15,24 @@ type FlashProps = {
function Flash({ flashMessage, removeFlashMessage }: FlashProps): JSX.Element {
const { type, message, id, variables } = flashMessage;
const { t } = useTranslation();
- const [flashMessageHeight, setFlashMessageHeight] = useState(0);
-
- useEffect(() => {
- const flashMessageElem: HTMLElement | null =
- document.querySelector('.flash-message');
- setFlashMessageHeight(flashMessageElem?.offsetHeight || 0);
- document.documentElement.style.setProperty(
- '--flash-message-height',
- `${flashMessageHeight}px`
- );
- }, [flashMessageHeight]);
function handleClose() {
- document.documentElement.style.setProperty('--flash-message-height', '0px');
removeFlashMessage();
}
return (
- <>
-
-
-
- {t(message, variables)}
-
-
-
- {flashMessage && (
-
- )}
- >
+
+
+
+ {t(message, variables)}
+
+
+
);
}
diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index 4029c81b4bf..aa638bfb0b1 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -644,6 +644,10 @@ blockquote .small {
border-color: #31708f;
}
+.alert-dismissable .close {
+ top: 0;
+}
+
.annual-donation-alert {
background: linear-gradient(
-10deg,
diff --git a/cypress/e2e/default/learn/challenges/multifile-cert-project.ts b/cypress/e2e/default/learn/challenges/multifile-cert-project.ts
index 02103ba9f0d..9b402a6af38 100644
--- a/cypress/e2e/default/learn/challenges/multifile-cert-project.ts
+++ b/cypress/e2e/default/learn/challenges/multifile-cert-project.ts
@@ -1,9 +1,10 @@
const save1text = 'save 1';
const save2text = 'save 2';
-const selectors = {
+const editorElements = {
editor: '.react-monaco-editor-container',
- saveCodeBtn: '[data-cy="save-code-to-database-btn"]'
+ saveCodeBtn: '[data-cy="save-code-to-database-btn"]',
+ closeFlash: '.close'
};
describe('multifileCertProjects', function () {
@@ -21,33 +22,41 @@ describe('multifileCertProjects', function () {
it('should save and reload user code', function () {
// save to database (savedChallenges) when clicking save code button
- cy.get(selectors.editor).click().focused().clear().type(save1text);
- cy.get(selectors.saveCodeBtn).click();
+ cy.get(editorElements.editor).click().focused().clear().type(save1text);
+ cy.get(editorElements.saveCodeBtn).click();
cy.contains('Your code was saved to the database.');
// load saved code on a hard refresh
cy.reload();
cy.contains(save1text);
});
- it('should save to using ctrl+s hotkey and persist through navigation', function () {
+ it('should save using ctrl+s hotkey and persist through navigation', function () {
// since rapid clicks will cause the save requests to be ignored, we have to
// purge the db:
cy.exec('npm run seed');
// and the redux store:
cy.reload();
- cy.get(selectors.editor)
+ cy.get(editorElements.editor)
.click()
.focused()
.clear()
.type(`${save2text}{ctrl+s}`);
cy.contains('Your code was saved to the database.');
+ cy.get(editorElements.closeFlash).click();
// load saved code when navigating site (no hard refresh)'
cy.contains('Responsive Web Design Projects').click();
cy.contains('In this Responsive Web Design Certification');
cy.contains('Build a Tribute Page').click();
cy.contains(save2text);
// trigger the warning about saving too quickly
- cy.get(selectors.saveCodeBtn).click().click();
+ cy.reload();
+ cy.get(editorElements.editor)
+ .click()
+ .focused()
+ .type(`{ctrl+s}`)
+ // wait a few ms or it's too fast
+ .wait(500)
+ .type(`{ctrl+s}`);
cy.contains('Your code was not saved.');
});
});