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

@@ -80,3 +80,22 @@
 .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.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>
     );
   };
 
@@ -426,7 +439,7 @@ export class Form extends PureComponent<FormProps> {
               })
             : this.maybeRenderNoSettings(clearQuery)}
         </div>
-        {hasUnsavedChanges && this.renderBottomBar()}
+        {hasUnsavedChanges && this.renderNotificationBar()}
       </Fragment>
     );
   }