final fitnfinsh changes complete

Signed-off-by: Shubh Sahu <shubhvs@amazon.com>
opensearch-project · Sep 2, 2024 · 344c090 · 344c090
1 parent 60a21ab
commit 344c090
Show file tree

Hide file tree

Showing 26 changed files with 878 additions and 567 deletions.
diff --git a/public/components/BottomBar/BottomBar.tsx b/public/components/BottomBar/BottomBar.tsx
@@ -29,5 +29,9 @@ export default function BottomBar(props: CustomFormRowProps) {
     };
   }, []);
 
-  return <EuiBottomBar ref={bottomBarRef}>{props.children}</EuiBottomBar>;
+  return (
+    <EuiBottomBar ref={bottomBarRef} position="sticky">
+      {props.children}
+    </EuiBottomBar>
+  );
 }
diff --git a/public/components/BottomBar/__snapshots__/BottomBar.test.tsx.snap b/public/components/BottomBar/__snapshots__/BottomBar.test.tsx.snap
@@ -2,11 +2,10 @@
 
 exports[`<FormGenerator /> spec render the component 1`] = `
 HTMLCollection [
-  <div />,
   <div>
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium"
+      class="euiBottomBar euiBottomBar--sticky euiBottomBar--paddingMedium"
     >
       <h2
         class="euiScreenReaderOnly"

diff --git a/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.test.tsx b/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.test.tsx
@@ -4,10 +4,25 @@
  */
 
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, cleanup } from "@testing-library/react";
 import UnsavedChangesBottomBar from "./index";
 
 describe("<FormGenerator /> spec", () => {
+  let appWrapper: HTMLDivElement;
+
+  beforeEach(() => {
+    // Create a mock DOM element with the ID 'app-wrapper'
+    appWrapper = document.createElement("div");
+    appWrapper.setAttribute("id", "app-wrapper");
+    document.body.appendChild(appWrapper);
+  });
+
+  afterEach(() => {
+    // Clean up the mock DOM element after each test
+    document.body.removeChild(appWrapper);
+    cleanup();
+  });
+
   it("render the component", () => {
     render(<UnsavedChangesBottomBar unsavedCount={0} onClickCancel={async () => {}} onClickSubmit={async () => {}} />);
     expect(document.body.children).toMatchSnapshot();

diff --git a/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.tsx b/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.tsx
@@ -7,6 +7,7 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSmallButtonEmpty, EuiButtonPro
 import classNames from "classnames";
 import BottomBar from "../BottomBar";
 import "./index.scss";
+import { createPortal } from "react-dom";
 
 export type CustomFormRowProps = {
   unsavedCount: number;
@@ -67,7 +68,7 @@ export default function UnsavedChangesBottomBar(props: CustomFormRowProps) {
           iconType="check"
           color="primary"
           fill
-          size="m"
+          size="s"
           children="Save"
           {...props.confirmButtonProps}
         />
@@ -116,9 +117,9 @@ export default function UnsavedChangesBottomBar(props: CustomFormRowProps) {
       </>
     ));
 
-  return (
+  const bottomBar = (
     <BottomBar>
-      <EuiFlexGroup alignItems="center">
+      <EuiFlexGroup alignItems="center" gutterSize="s" justifyContent="spaceBetween">
         {renderProps({
           renderCancel,
           renderConfirm,
@@ -128,4 +129,6 @@ export default function UnsavedChangesBottomBar(props: CustomFormRowProps) {
       </EuiFlexGroup>
     </BottomBar>
   );
+
+  return createPortal(bottomBar, document.getElementById("app-wrapper")!);
 }
diff --git a/...ic/components/UnsavedChangesBottomBar/__snapshots__/UnsavedChangesBottomBar.test.tsx.snap b/...ic/components/UnsavedChangesBottomBar/__snapshots__/UnsavedChangesBottomBar.test.tsx.snap
@@ -2,19 +2,20 @@
 
 exports[`<FormGenerator /> spec render the component 1`] = `
 HTMLCollection [
-  <div />,
-  <div>
+  <div
+    id="app-wrapper"
+  >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium"
+      class="euiBottomBar euiBottomBar--sticky euiBottomBar--paddingMedium"
     >
       <h2
         class="euiScreenReaderOnly"
       >
         Page level controls
       </h2>
       <div
-        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -39,7 +40,7 @@ HTMLCollection [
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <button
-            class="euiButton euiButton--primary euiButton--fill"
+            class="euiButton euiButton--primary euiButton--small euiButton--fill"
             type="button"
           >
             <span
@@ -63,5 +64,6 @@ HTMLCollection [
       There is a new region landmark with page level controls at the end of the document.
     </p>
   </div>,
+  <div />,
 ]
 `;