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

Co-authored-by: Andrey Myssak <[email protected]> Signed-off-by: Sergey Myssak <[email protected]>
SergeyMyssak · Apr 26, 2023 · a8b03cc · a8b03cc
1 parent 755f16b
commit a8b03cc
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 65 deletions.
diff --git a/src/core/public/rendering/_base.scss b/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;

diff --git a/src/plugins/advanced_settings/public/management_app/_advanced_settings.scss b/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;
+ }
 }
diff --git a/src/plugins/advanced_settings/public/management_app/components/form/form.test.tsx b/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,

diff --git a/src/plugins/advanced_settings/public/management_app/components/form/form.tsx b/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>
  );
  }