feat(client): fix the position of flash message (#48911)

* feat(client): fix the position of flash message

* WIP: move the alert message to header

* fix: cypress

* remove the spacing effect

* Revert "WIP: move the alert message to header"

This reverts commit f5242d261a.

* feat: new feature!

* Revert "feat: new feature!"

This reverts commit f6c403cc80.

* Revert "fix: cypress"

This reverts commit c24c1d8440.

* feat: add reverted cypress test

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>

* center the close alert button

Co-authored-by: Sanjeev <sanjeevranjan.singh08@gmail.com>

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
Co-authored-by: Sanjeev <sanjeevranjan.singh08@gmail.com>

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 (
-    <>
-      <TransitionGroup>
-        <CSSTransition classNames='flash-message' key={id} timeout={500}>
-          <Alert
-            bsStyle={type}
-            className='flash-message'
-            closeLabel={t('buttons.close')}
-            onDismiss={handleClose}
-          >
-            {t(message, variables)}
-          </Alert>
-        </CSSTransition>
-      </TransitionGroup>
-      {flashMessage && (
-        <div
-          style={{
-            height: `${flashMessageHeight}px`
-          }}
-        />
-      )}
-    </>
+    <TransitionGroup>
+      <CSSTransition classNames='flash-message' key={id} timeout={500}>
+        <Alert
+          bsStyle={type}
+          className='flash-message'
+          closeLabel={t('buttons.close')}
+          onDismiss={handleClose}
+        >
+          {t(message, variables)}
+        </Alert>
+      </CSSTransition>
+    </TransitionGroup>
   );
 }
 

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,

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.');
   });
 });