[Backport 2.x] Making fit and finish changes for ISM policy & Composable template pages

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>
+  );
 }

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"

public/components/CreatePolicyModal/CreatePolicyModal.tsx

@@ -35,14 +35,20 @@ const CreatePolicyModal: React.SFC<CreatePolicyModalProps> = ({ isEdit = false,
       // @ts-ignore */}
       <EuiModal onCancel={onClose} onClose={onClose} maxWidth={600}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>Configuration method</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>
+            <EuiText size="s">
+              <h2>Configuration method</h2>
+            </EuiText>
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
           <EuiFlexGroup gutterSize="m" direction="column" style={{ margin: "-4px" }}>
             <EuiFlexItem grow={false}>
               <EuiText size="s" style={{ marginTop: 0 }}>
-                Choose how you would like to {isEdit ? "modify" : "define"} your policy, either using a visual editor or writing JSON.
+                <p>
+                  Choose how you would like to {isEdit ? "modify" : "define"} your policy, either using a visual editor or writing JSON.
+                </p>
               </EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>

public/components/CreatePolicyModal/__snapshots__/CreatePolicyModal.test.tsx.snap

@@ -35,7 +35,13 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
           <div
             class="euiModalHeader__title"
           >
-            Configuration method
+            <div
+              class="euiText euiText--small"
+            >
+              <h2>
+                Configuration method
+              </h2>
+            </div>
           </div>
         </div>
         <div
@@ -55,9 +61,11 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
                   class="euiText euiText--small"
                   style="margin-top: 0px;"
                 >
-                  Choose how you would like to 
-                  define
-                   your policy, either using a visual editor or writing JSON.
+                  <p>
+                    Choose how you would like to 
+                    define
+                     your policy, either using a visual editor or writing JSON.
+                  </p>
                 </div>
               </div>
               <div
@@ -254,7 +262,13 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
           <div
             class="euiModalHeader__title"
           >
-            Configuration method
+            <div
+              class="euiText euiText--small"
+            >
+              <h2>
+                Configuration method
+              </h2>
+            </div>
           </div>
         </div>
         <div
@@ -274,9 +288,11 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
                   class="euiText euiText--small"
                   style="margin-top: 0px;"
                 >
-                  Choose how you would like to 
-                  modify
-                   your policy, either using a visual editor or writing JSON.
+                  <p>
+                    Choose how you would like to 
+                    modify
+                     your policy, either using a visual editor or writing JSON.
+                  </p>
                 </div>
               </div>
               <div

public/components/IndexMapping/IndexMapping.tsx

@@ -31,7 +31,7 @@ export * from "./helper";
 export * from "./interfaces";
 
 const IndexMapping = (
-  { value: propsValue, onChange: propsOnChange, isEdit, oldValue, readonly, docVersion, useNewUx }: IndexMappingProps,
+  { value: propsValue, onChange: propsOnChange, isEdit, oldValue, readonly, docVersion }: IndexMappingProps,
   ref: Ref<IIndexMappingsRef>
 ) => {
   const value = propsValue?.properties || [];

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();

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")!);
 }

public/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 />,
 ]
 `;

public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx

@@ -14,6 +14,7 @@ export interface SearchControlsProps {
     selectedTypes: string[];
   };
   onSearchChange: (args: SearchControlsProps["value"]) => void;
+  useNewUx?: boolean;
 }
 
 export default function SearchControls(props: SearchControlsProps) {
@@ -29,10 +30,12 @@ export default function SearchControls(props: SearchControlsProps) {
   useEffect(() => {
     setState(props.value);
   }, [props.value]);
+  const paddingStyle = props.useNewUx ? { padding: "0px 0px" } : { padding: "0px 5px" };
   return (
-    <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
+    <EuiFlexGroup gutterSize="s" alignItems="center" style={paddingStyle}>
       <EuiFlexItem>
         <EuiCompressedFieldSearch
+          autoFocus
           fullWidth
           placeholder="Search..."
           value={state.search}

public/pages/ComposableTemplates/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<IndexControls /> spec renders the component 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
   style="padding: 0px 5px;"
 >
   <div

public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.tsx

@@ -24,6 +24,8 @@ import {
   EuiSmallButtonIcon,
   EuiToolTip,
   EuiBasicTableColumn,
+  EuiSpacer,
+  EuiPanel,
 } from "@elastic/eui";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
 import { DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_QUERY_PARAMS } from "../../utils/constants";
@@ -42,7 +44,12 @@ import "./index.scss";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
-import { TopNavControlButtonData, TopNavControlTextData } from "src/plugins/navigation/public";
+import {
+  TopNavControlButtonData,
+  TopNavControlDescriptionData,
+  TopNavControlLinkData,
+  TopNavControlTextData,
+} from "src/plugins/navigation/public";
 
 interface ComposableTemplatesProps extends RouteComponentProps, DataSourceMenuProperties {
   commonService: CommonService;
@@ -401,16 +408,18 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
 
     const descriptionData = [
       {
-        renderComponent: (
-          <EuiText size="s" color="subdued">
-            Component templates are reusable building blocks for composing index or data stream templates.
-            <br /> You can define component templates with common index configurations and associate them to an index template.{" "}
-            <EuiLink external target="_blank" href={(this.context as CoreStart).docLinks.links.opensearch.indexTemplates.composable}>
-              Learn more
-            </EuiLink>
-          </EuiText>
-        ),
-      },
+        description:
+          "Component templates are reusable building blocks for composing index or data stream templates. You can define component templates with common index configurations and associate them to an index template.",
+        links: {
+          label: "Learn more",
+          href: (this.context as CoreStart).docLinks.links.opensearch.indexTemplates.composable,
+          iconType: "popout",
+          iconSide: "right",
+          controlType: "link",
+          target: "_blank",
+          flush: "both",
+        } as TopNavControlLinkData,
+      } as TopNavControlDescriptionData,
     ];
 
     return useNewUX ? (
@@ -430,16 +439,16 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
           ]}
         />
         <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />
-        <ContentPanel>
+        <EuiPanel>
           <IndexControls
             value={{
               search: this.state.search,
               selectedTypes: this.state.selectedTypes,
             }}
             onSearchChange={this.onSearchChange}
+            useNewUx={useNewUX}
           />
-          <EuiHorizontalRule margin="xs" />
-
+          <EuiSpacer size="m" />
           <EuiBasicTable
             className="ISM-component-templates-table"
             data-test-subj="templatesTable"
@@ -472,6 +481,7 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
                         this.props.history.push(ROUTES.CREATE_COMPOSABLE_TEMPLATE);
                       }}
                       data-test-subj="CreateComponentTemplateWhenNoTemplateFound"
+                      iconType="plus"
                     >
                       Create component template
                     </EuiSmallButton>,
@@ -500,7 +510,7 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
               )
             }
           />
-        </ContentPanel>
+        </EuiPanel>
       </>
     ) : (
       <>
@@ -515,9 +525,10 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
               selectedTypes: this.state.selectedTypes,
             }}
             onSearchChange={this.onSearchChange}
+            useNewUx={useNewUX}
           />
           <EuiHorizontalRule margin="xs" />
-
+          <EuiSpacer size="s" />
           <EuiBasicTable
             className="ISM-component-templates-table"
             data-test-subj="templatesTable"

public/pages/ComposableTemplates/containers/ComposableTemplates/__snapshots__/ComposableTemplates.test.tsx.snap

@@ -105,7 +105,7 @@ exports[`<ComposableTemplates /> spec renders the component 1`] = `
     style="padding: initial;"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
       style="padding: 0px 5px;"
     >
       <div
@@ -183,6 +183,9 @@ exports[`<ComposableTemplates /> spec renders the component 1`] = `
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
+    <div
+      class="euiSpacer euiSpacer--s"
+    />
     <div
       class="euiBasicTable euiBasicTable-loading ISM-component-templates-table"
       data-test-subj="templatesTable"