add flash messages

ManageIQ · Nov 6, 2024 · 88e4d68 · 88e4d68
1 parent 81df64b
commit 88e4d68
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 0 deletions.
diff --git a/app/javascript/components/automate-simulation-form/index.jsx b/app/javascript/components/automate-simulation-form/index.jsx
@@ -3,6 +3,7 @@ import MiqFormRenderer, { useFormApi } from '@@ddf';
 import { FormSpy } from '@data-driven-forms/react-form-renderer';
 import PropTypes from 'prop-types';
 import { Loading, Button } from 'carbon-components-react';
+import { CheckmarkFilled, Close } from '@carbon/icons-react';
 import createSchema from './automate-simulation-form.schema';
 import AutomationSimulation from '../AutomationSimulation';
 
@@ -19,6 +20,8 @@ const AutomateSimulationForm = ({
     tempData: undefined,
     targetClass: '-1',
     simulationTree: { notice: 'Enter Automation Simulation options on the left and press Submit' },
+    flashMessage: '',
+    isReset: false,
   });
 
   useEffect(() => {
@@ -33,6 +36,8 @@ const AutomateSimulationForm = ({
             ...formData,
             isLoading: false,
             simulationTree: result,
+            flashMessage: 'Automation simulation has been run',
+            isReset: false,
           });
         })
         .catch((error) => console.log('error: ', error));
@@ -71,11 +76,26 @@ const AutomateSimulationForm = ({
     const buttons = document.querySelectorAll('.bx--list-box__selection');
     buttons.forEach((button) => button.click());
     document.getElementById('object_request').value = '';
+    setFormData({ ...formData, flashMessage: 'All changes have been reset', isReset: true });
   };
 
+  const onCloseFlashMessage = () => setFormData({ ...formData, flashMessage: '' });
+
   return (
     <div className="automate-simulation-page">
       <div className="automate-simulation-form-wrapper">
+        {formData.flashMessage && (
+          <div
+            className={`flash-message ${formData.isReset ? 'flash-reset' : 'flash-submission'}`}
+            style={{ backgroundColor: formData.isReset ? '#FFDBBB' : '#90EE90' }}
+          >
+            <span className="flash-icon" style={{ border: formData.isReset ? '#FFDBBB' : '' }}>
+              {formData.isReset ? '⚠️' : '✔'}
+            </span>
+            {formData.flashMessage}
+            <button className="flash-close" onClick={onCloseFlashMessage}>×</button>
+          </div>
+        )}
         <MiqFormRenderer
           className="automate-simulation-form"
           schema={createSchema(

diff --git a/app/stylesheet/automate-simulation.scss b/app/stylesheet/automate-simulation.scss
@@ -64,4 +64,39 @@
         justify-content: center;
         align-items: center;
     }
+
+    .flash-message {
+        display: flex;
+        align-items: center;
+        padding: 10px;
+        margin-bottom: 15px;
+        background-color: #dff0d8;
+        opacity: 0.7;
+        color: black;
+        border: 1px solid black;
+        position: relative;
+        font-weight: bold;
+      }
+
+      .flash-icon {
+        font-size: 16px;
+        font-weight: bold;
+        color: green;
+        width: 24px;
+        height: 24px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 2px solid green; 
+        border-radius: 50%;
+        margin-right: 2%;
+      }
+
+      .flash-close {
+        margin-left: auto;
+        background: none;
+        border: none;
+        font-size: 24px;
+        cursor: pointer;
+      }
 }