Fix bottom bar visibility using create portal (opensearch-project#3336)

Co-authored-by: Andrey Myssak <[email protected]> Signed-off-by: Sergey Myssak <[email protected]>
SergeyMyssak · May 3, 2023 · 7db78cf · 7db78cf
1 parent ca0bb8f
commit 7db78cf
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 10 deletions.
diff --git a/src/core/public/rendering/rendering_service.tsx b/src/core/public/rendering/rendering_service.tsx
@@ -64,7 +64,7 @@ export class RenderingService {
           {chromeUi}
 
           <AppWrapper chromeVisible$={chrome.getIsVisible$()}>
-            <div className="app-wrapper-panel">
+            <div id="app-wrapper-panel" className="app-wrapper-panel">
               <div id="globalBannerList">{bannerUi}</div>
               <AppContainer classes$={chrome.getApplicationClasses$()}>{appUi}</AppContainer>
             </div>

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
@@ -47,8 +47,9 @@ import {
 import { FormattedMessage } from '@osd/i18n/react';
 import { isEmpty } from 'lodash';
 import { i18n } from '@osd/i18n';
+import { DocLinksStart, ToastsStart } from 'opensearch-dashboards/public';
+import { createPortal } from 'react-dom';
 import { toMountPoint } from '../../../../../opensearch_dashboards_react/public';
-import { DocLinksStart, ToastsStart } from '../../../../../../core/public';
 
 import { getCategoryName } from '../../lib';
 import { Field, getEditableValue } from '../field';
@@ -338,7 +339,7 @@ export class Form extends PureComponent<FormProps> {
   renderBottomBar = () => {
     const areChangesInvalid = this.areChangesInvalid();
     return (
-      <EuiBottomBar data-test-subj="advancedSetting-bottomBar">
+      <EuiBottomBar data-test-subj="advancedSetting-bottomBar" position="sticky">
         <EuiFlexGroup
           justifyContent="spaceBetween"
           alignItems="center"
@@ -400,12 +401,7 @@ export class Form extends PureComponent<FormProps> {
     const { visibleSettings, categories, categoryCounts, clearQuery } = this.props;
     const currentCategories: Category[] = [];
     const hasUnsavedChanges = !isEmpty(unsavedChanges);
-
-    if (hasUnsavedChanges) {
-      document.body.classList.add('osdBody--mgtAdvancedSettingsHasBottomBar');
-    } else {
-      document.body.classList.remove('osdBody--mgtAdvancedSettingsHasBottomBar');
-    }
+    const container = document.getElementById('app-wrapper-panel')!;
 
     categories.forEach((category) => {
       if (visibleSettings[category] && visibleSettings[category].length) {
@@ -426,7 +422,7 @@ export class Form extends PureComponent<FormProps> {
               })
             : this.maybeRenderNoSettings(clearQuery)}
         </div>
-        {hasUnsavedChanges && this.renderBottomBar()}
+        {hasUnsavedChanges && createPortal(this.renderBottomBar(), container)}
       </Fragment>
     );
   }