Attach notification bar to top (opensearch-project#3336)

Co-authored-by: Andrey Myssak <andreymyssak@gmail.com>
Signed-off-by: Sergey Myssak <sergey.myssak@gmail.com>

Author: SergeyMyssak

src/core/public/rendering/_base.scss

@@ -5,7 +5,6 @@
  */
 // SASSTODO: Naming here is too embedded and high up that changing them could cause major breaks
 #opensearch-dashboards-body {
-  overflow-x: hidden;
   min-height: 100%;
 }
 
@@ -25,6 +24,7 @@
 }
 
 .app-wrapper-panel {
+  position: relative;
   display: flex;
   flex: 1 0 auto;
   flex-direction: column;

src/plugins/advanced_settings/public/management_app/_advanced_settings.scss

@@ -77,6 +77,21 @@
   width: 100%;
 }
 
-.osdBody--mgtAdvancedSettingsHasBottomBar .mgtPage__body {
-  padding-bottom: $euiSizeXL * 2;
+.mgtAdvancedSettingsForm {
+  &__notificationBarMask {
+    height: 64px;
+    width: 100%;
+  }
+
+  &__notificationBarArea {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+  }
+
+  &__notificationBar {
+    top: 99px !important;
+  }
 }

src/plugins/advanced_settings/public/management_app/components/form/form.test.tsx

@@ -30,7 +30,7 @@
 
 import React from 'react';
 import { shallowWithI18nProvider, mountWithI18nProvider } from 'test_utils/enzyme_helpers';
-import { UiSettingsType } from '../../../../../../core/public';
+import { UiSettingsType } from '../../../../../../core/types';
 
 import { findTestSubject } from '@elastic/eui/lib/test';
 
@@ -44,6 +44,15 @@ jest.mock('../field', () => ({
   },
 }));
 
+jest.mock('@elastic/eui', () => {
+  const lib = jest.requireActual('@elastic/eui');
+
+  return {
+    ...lib,
+    EuiPortal: ({ children }: any) => <>{children}</>,
+  };
+});
+
 beforeAll(() => {
   const localStorage: Record<string, any> = {
     'core.chrome.isLocked': true,

src/plugins/advanced_settings/public/management_app/components/form/form.tsx

@@ -43,12 +43,13 @@ import {
   EuiButton,
   EuiToolTip,
   EuiButtonEmpty,
+  EuiPortal,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import { isEmpty } from 'lodash';
 import { i18n } from '@osd/i18n';
+import { DocLinksStart, ToastsStart } from 'opensearch-dashboards/public';
 import { toMountPoint } from '../../../../../opensearch_dashboards_react/public';
-import { DocLinksStart, ToastsStart } from '../../../../../../core/public';
 
 import { getCategoryName } from '../../lib';
 import { Field, getEditableValue } from '../field';
@@ -335,63 +336,75 @@ export class Form extends PureComponent<FormProps> {
     );
   };
 
-  renderBottomBar = () => {
+  renderNotificationBar = () => {
+    const sibling = document.getElementById('globalBannerList')!;
     const areChangesInvalid = this.areChangesInvalid();
+
     return (
-      <EuiBottomBar data-test-subj="advancedSetting-bottomBar">
-        <EuiFlexGroup
-          justifyContent="spaceBetween"
-          alignItems="center"
-          responsive={false}
-          gutterSize="s"
-        >
-          <EuiFlexItem grow={false} className="mgtAdvancedSettingsForm__unsavedCount">
-            <p id="aria-describedby.countOfUnsavedSettings">{this.renderCountOfUnsaved()}</p>
-          </EuiFlexItem>
-          <EuiFlexItem />
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              color="ghost"
-              size="s"
-              iconType="cross"
-              onClick={this.clearAllUnsaved}
-              aria-describedby="aria-describedby.countOfUnsavedSettings"
-              data-test-subj="advancedSetting-cancelButton"
-            >
-              {i18n.translate('advancedSettings.form.cancelButtonLabel', {
-                defaultMessage: 'Cancel changes',
-              })}
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiToolTip
-              content={
-                areChangesInvalid &&
-                i18n.translate('advancedSettings.form.saveButtonTooltipWithInvalidChanges', {
-                  defaultMessage: 'Fix invalid settings before saving.',
-                })
-              }
+      <EuiPortal insert={{ sibling, position: 'after' }}>
+        <div className="mgtAdvancedSettingsForm__notificationBarMask">
+          <div className="mgtAdvancedSettingsForm__notificationBarArea">
+            <EuiBottomBar
+              data-test-subj="advancedSetting-bottomBar"
+              position="sticky"
+              className="mgtAdvancedSettingsForm__notificationBar"
             >
-              <EuiButton
-                className="mgtAdvancedSettingsForm__button"
-                disabled={areChangesInvalid}
-                color="secondary"
-                fill
-                size="s"
-                iconType="check"
-                onClick={this.saveAll}
-                aria-describedby="aria-describedby.countOfUnsavedSettings"
-                isLoading={this.state.loading}
-                data-test-subj="advancedSetting-saveButton"
+              <EuiFlexGroup
+                justifyContent="spaceBetween"
+                alignItems="center"
+                responsive={false}
+                gutterSize="s"
               >
-                {i18n.translate('advancedSettings.form.saveButtonLabel', {
-                  defaultMessage: 'Save changes',
-                })}
-              </EuiButton>
-            </EuiToolTip>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiBottomBar>
+                <EuiFlexItem grow={false} className="mgtAdvancedSettingsForm__unsavedCount">
+                  <p id="aria-describedby.countOfUnsavedSettings">{this.renderCountOfUnsaved()}</p>
+                </EuiFlexItem>
+                <EuiFlexItem />
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    color="ghost"
+                    size="s"
+                    iconType="cross"
+                    onClick={this.clearAllUnsaved}
+                    aria-describedby="aria-describedby.countOfUnsavedSettings"
+                    data-test-subj="advancedSetting-cancelButton"
+                  >
+                    {i18n.translate('advancedSettings.form.cancelButtonLabel', {
+                      defaultMessage: 'Cancel changes',
+                    })}
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiToolTip
+                    content={
+                      areChangesInvalid &&
+                      i18n.translate('advancedSettings.form.saveButtonTooltipWithInvalidChanges', {
+                        defaultMessage: 'Fix invalid settings before saving.',
+                      })
+                    }
+                  >
+                    <EuiButton
+                      className="mgtAdvancedSettingsForm__button"
+                      disabled={areChangesInvalid}
+                      color="secondary"
+                      fill
+                      size="s"
+                      iconType="check"
+                      onClick={this.saveAll}
+                      aria-describedby="aria-describedby.countOfUnsavedSettings"
+                      isLoading={this.state.loading}
+                      data-test-subj="advancedSetting-saveButton"
+                    >
+                      {i18n.translate('advancedSettings.form.saveButtonLabel', {
+                        defaultMessage: 'Save changes',
+                      })}
+                    </EuiButton>
+                  </EuiToolTip>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiBottomBar>
+          </div>
+        </div>
+      </EuiPortal>
     );
   };
 
@@ -401,12 +414,6 @@ export class Form extends PureComponent<FormProps> {
     const currentCategories: Category[] = [];
     const hasUnsavedChanges = !isEmpty(unsavedChanges);
 
-    if (hasUnsavedChanges) {
-      document.body.classList.add('osdBody--mgtAdvancedSettingsHasBottomBar');
-    } else {
-      document.body.classList.remove('osdBody--mgtAdvancedSettingsHasBottomBar');
-    }
-
     categories.forEach((category) => {
       if (visibleSettings[category] && visibleSettings[category].length) {
         currentCategories.push(category);
@@ -426,7 +433,7 @@ export class Form extends PureComponent<FormProps> {
               })
             : this.maybeRenderNoSettings(clearQuery)}
         </div>
-        {hasUnsavedChanges && this.renderBottomBar()}
+        {hasUnsavedChanges && this.renderNotificationBar()}
       </Fragment>
     );
   }