From f9c39640785e1bc810f4e4604b6a51ff92af0370 Mon Sep 17 00:00:00 2001
From: Galin Iliev <galin.iliev@interop.io>
Date: Thu, 15 Aug 2024 13:39:32 +0300
Subject: [PATCH] G4E-8032 - Issue should be fixed.

---
 index.html    | 15 ++-------------
 js/layouts.js | 25 +++++++++++++++++--------
 js/utils.js   | 52 +++++++++++++++++++++++++++------------------------
 3 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/index.html b/index.html
index fae450f..af68a21 100644
--- a/index.html
+++ b/index.html
@@ -169,12 +169,13 @@ <h5 class="draggable m-0">Load Layouts</h5>
             placeholder="Search Layout..."
           />
         </div>
+        <div class="layout-save-alert-wrapper"></div>
         <ul class="nav nav-tabs flex-column"></ul>
       </div>
 
       <div
         class="toggle-content hide"
-        id="layout-content"
+        id="layout-save"
         menu-id="layout-save"
       >
         <div class="p-2">
@@ -200,18 +201,6 @@ <h5 class="draggable m-0">Save Layouts</h5>
             </div>
           </div>
         </div>
-        <div class="layout-save-alert-wrapper">
-          <div
-            id="layout-save-alert"
-            class="alert alert-dismissible alert-sm"
-            role="alert"
-          >
-            <button type="button" class="close" aria-label="Close">
-              <span aria-hidden="true">×</span>
-            </button>
-            <div class="alert-message"></div>
-          </div>
-        </div>
         <ul id="running-apps" class="nav nav-tabs flex-column"></ul>
       </div>
 
diff --git a/js/layouts.js b/js/layouts.js
index fc2b973..1011e89 100644
--- a/js/layouts.js
+++ b/js/layouts.js
@@ -10,7 +10,11 @@ import {
 } from './connect-related.js';
 import { escapeHtml, renderAlert } from './utils.js';
 import { getSetting } from './settings.js';
-import { addFavoriteLayout, favoriteLayouts, removeFavoriteLayout } from './favorites.js';
+import {
+  addFavoriteLayout,
+  favoriteLayouts,
+  removeFavoriteLayout,
+} from './favorites.js';
 
 const rxjs = window.rxjs;
 let filteredLayouts;
@@ -127,24 +131,27 @@ function handleLayoutSave() {
 }
 
 async function saveCurrentLayout() {
-  const alertElement = document.querySelector('#layout-save-alert');
+  const alertWrapper = document.querySelector('.layout-save-alert-wrapper');
   const loaderElement = document.querySelector('#layout-save-loader');
-  const layoutName = document.querySelector('#layout-save-name').value;
+  const layoutInput = document.querySelector('#layout-save-name');
+  const saveLayoutsMenu = document.querySelector('#layout-save');
+  const loadLayoutsMenu = document.querySelector('#layout-load');
 
-  if (!layoutName || !alertElement) {
+  if (!layoutInput.value || !alertWrapper) {
     return;
   }
 
   loaderElement.classList.add('show');
 
   try {
-    await saveLayout(escapeHtml(layoutName));
+    await saveLayout(escapeHtml(layoutInput.value));
 
     renderAlert(
-      alertElement,
+      alertWrapper,
       'success',
-      `Layout ${layoutName} has been saved successfully`
+      `Layout ${layoutInput.value} has been saved successfully`
     );
+
   } catch (error) {
     const inputString = error.message;
     const stringLimiter = ', type:';
@@ -153,13 +160,15 @@ async function saveCurrentLayout() {
 
     console.error('error:', error);
     renderAlert(
-      alertElement,
+      alertWrapper,
       'warning',
       `Failed to save the layout. ${errorMessage}`
     );
   }
 
   loaderElement.classList.remove('show');
+  saveLayoutsMenu.classList.add('hide');
+  loadLayoutsMenu.classList.remove('hide');
 }
 
 function layoutHTMLTemplate(layout) {
diff --git a/js/utils.js b/js/utils.js
index 4dd3be3..d04d84c 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -230,7 +230,9 @@ function handleTopMenuClicks() {
       let appName = topElement.getAttribute('app-name');
 
       startApp(appName);
-    } else if (e.target.matches('#fav-layouts .nav-item, #fav-layouts .nav-item *')) {
+    } else if (
+      e.target.matches('#fav-layouts .nav-item, #fav-layouts .nav-item *')
+    ) {
       // restore a layout from the favorites list
       let topElement = e
         .composedPath()
@@ -511,34 +513,36 @@ function renderAlert(
     return;
   }
 
-  switch (type) {
-    case 'success':
-      domEl.classList.add('alert-success');
-      break;
-    case 'warning':
-      domEl.classList.add('alert-warning');
-      break;
-    case 'danger':
-      domEl.classList.add('alert-danger');
-      break;
-    default:
-      domEl.classList.add('alert-primary');
-  }
+  const alertElement = document.createElement('div');
 
-  const timeout = setTimeout(() => {
-    domEl.classList.remove('show');
-  }, duration);
+  alertElement.className = `alert alert-${type} alert-dismissible fade show`;
+  alertElement.setAttribute('role', 'alert');
 
-  domEl.querySelector('.alert-message').innerText = message;
+  alertElement.innerHTML = `
+    <button type="button" class="close" aria-label="Close">
+      <span aria-hidden="true">×</span>
+    </button>
+    <div class="alert-message">${message}</div>
+  `;
 
-  domEl.classList.add('show');
+  domEl.appendChild(alertElement);
 
-  domEl.querySelector('.close').addEventListener('click', () => {
-    if (timeout) {
-      clearTimeout(timeout);
-    }
-    domEl.classList.remove('show');
+  const closeButton = alertElement.querySelector('.close');
+
+  closeButton.addEventListener('click', () => {
+    clearTimeout(timeout);
+    alertElement.classList.remove('show');
+    setTimeout(() => {
+      alertElement.remove();
+    }, 250);
   });
+
+  const timeout = setTimeout(() => {
+    alertElement.classList.remove('show');
+    setTimeout(() => {
+      alertElement.remove();
+    }, 250);
+  }, duration);
 }
 
 async function isOutOfMonitor(viewportBounds) {