Update new header for Alias, Index Templates, Policy Managed Indices, Indexes and Transform Jobs (#1124) (#1137)

* wip: changes for new ui



* New UI changes



* Header Changes



* New UI changes



* UTs handel



* Header UI changes

cr: https://code.amazon.com/reviews/CR-143602949


* Updated Change Policy Page



* Fixed bug in alias for new UI



* Fixing a few bugs and addressing comments



* Fixing a few bugs in old UI



---------

Signed-off-by: Kshitij Tandon <[email protected]>

Author: tandonks

public/components/ContentPanel/ContentPanelActions.tsx

@@ -17,15 +17,16 @@ interface ContentPanelActionsProps {
       onClickModal: (onShow: (component: any, props: object) => void) => () => void;
     };
   }[];
+  size?: "s" | "m";
 }
 
-const ContentPanelActions: React.SFC<ContentPanelActionsProps> = ({ actions }) => (
+const ContentPanelActions: React.SFC<ContentPanelActionsProps> = ({ actions, size }) => (
   <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
     {actions.map(({ text, buttonProps = {}, flexItemProps = {}, modal = null, children }, index) => {
       let button = children ? (
         children
       ) : (
-        <EuiButton {...buttonProps} data-test-subj={`${text}Button`}>
+        <EuiButton {...buttonProps} data-test-subj={`${text}Button`} size={size ? size : "m"}>
           {text}
         </EuiButton>
       );

public/components/FilterGroup/index.tsx

@@ -5,11 +5,11 @@ export interface IFilterGroupProps {
   options: { label: string }[];
   value?: string[];
   filterButtonProps?: EuiFilterButtonProps;
-  useNewUx?: boolean;
+  useNewUX?: boolean;
   onChange?: (val: IFilterGroupProps["value"]) => void;
 }
 
-export default function FilterGroup({ options, value, filterButtonProps, useNewUx, onChange }: IFilterGroupProps) {
+export default function FilterGroup({ options, value, filterButtonProps, onChange, useNewUX }: IFilterGroupProps) {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const onButtonClick = () => {
@@ -31,7 +31,7 @@ export default function FilterGroup({ options, value, filterButtonProps, useNewU
             numFilters={options?.length}
             hasActiveFilters={!!value?.length}
             numActiveFilters={value?.length}
-            size={useNewUx ? "s" : undefined}
+            size={useNewUX ? "s" : undefined}
             {...filterButtonProps}
           />
         }

public/containers/IndexDetail/IndexDetail.test.tsx

@@ -10,6 +10,23 @@ import { browserServicesMock, coreServicesMock } from "../../../test/mocks";
 import { ServicesContext } from "../../services";
 import { CoreServicesContext } from "../../components/core_services";
 import { CatIndex } from "../../../server/models/interfaces";
+import { getApplication, getNavigationUI, getUISettings } from "../../services/Services";
+
+jest.mock("../../services/Services", () => ({
+  ...jest.requireActual("../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 browserServicesMock.commonService.apiCaller = jest.fn(
   async (payload): Promise<any> => {

public/pages/Aliases/components/IndexControls/IndexControls.test.tsx

@@ -9,6 +9,23 @@ import { render, waitFor } from "@testing-library/react";
 // @ts-ignore
 import userEvent from "@testing-library/user-event";
 import IndexControls from "./IndexControls";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 describe("<IndexControls /> spec", () => {
   it("renders the component", async () => {

public/pages/Aliases/components/IndexControls/IndexControls.tsx

@@ -5,14 +5,23 @@
 
 import React, { useEffect, useState } from "react";
 import { EuiComboBox, EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
-import { ALIAS_STATUS_OPTIONS } from "../../../../utils/constants";
+import { ALIAS_STATUS_OPTIONS, IndicesUpdateMode } from "../../../../utils/constants";
+import { getUISettings } from "../../../../services/Services";
+import AliasesActions from "../../containers/AliasActions";
+import { IAlias } from "../../interface";
+import { RouteComponentProps } from "react-router-dom";
+import FilterGroup from "../../../../components/FilterGroup";
 
 export interface SearchControlsProps {
   value: {
     search: string;
     status: string;
+    selectedItems: IAlias[];
   };
   onSearchChange: (args: SearchControlsProps["value"]) => void;
+  onDelete: () => Promise<void>;
+  history: RouteComponentProps["history"];
+  onUpdateAlias: () => void;
 }
 
 export default function SearchControls(props: SearchControlsProps) {
@@ -28,7 +37,42 @@ export default function SearchControls(props: SearchControlsProps) {
   useEffect(() => {
     setState(props.value);
   }, [props.value]);
-  return (
+
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+
+  return useUpdatedUX ? (
+    <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
+      <EuiFlexItem>
+        <EuiFieldSearch
+          compressed
+          fullWidth
+          placeholder="Search"
+          value={state.search}
+          onChange={(e) => onChange("search", e.target.value)}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem style={{ flexBasis: "100px" }} grow={false}>
+        <FilterGroup
+          filterButtonProps={{
+            children: "Status",
+          }}
+          onChange={(val) => onChange("status", (val || []).map((item) => item).join(","))}
+          value={state.status ? state.status.split(",").map((label) => label) : []}
+          options={ALIAS_STATUS_OPTIONS}
+          useNewUX={useUpdatedUX}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <AliasesActions
+          onUpdateAlias={props.onUpdateAlias}
+          selectedItems={props.value.selectedItems}
+          onDelete={props.onDelete}
+          history={props.history}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  ) : (
     <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
       <EuiFlexItem>
         <EuiFieldSearch fullWidth placeholder="Search..." value={state.search} onChange={(e) => onChange("search", e.target.value)} />

public/pages/Aliases/containers/AliasActions/AliasActions.test.tsx

@@ -14,6 +14,23 @@ import { ServicesContext } from "../../../../services";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { buildMockApiCallerForFlush, selectedAliases } from "../../../../containers/FlushIndexModal/FlushIndexModalTestHelper";
 import { IAlias } from "../../interface";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderWithRouter(props: Omit<AliasesActionsProps, "history">) {
   return {

public/pages/Aliases/containers/AliasActions/index.tsx

@@ -12,6 +12,7 @@ import FlushIndexModal from "../../../../containers/FlushIndexModal";
 import RefreshActionModal from "../../../../containers/RefreshAction";
 import { IAlias } from "../../interface";
 import { ROUTES, INDEX_OP_TARGET_TYPE } from "../../../../utils/constants";
+import { getUISettings } from "../../../../services/Services";
 
 export interface AliasesActionsProps {
   selectedItems: IAlias[];
@@ -44,14 +45,18 @@ export default function AliasesActions(props: AliasesActionsProps) {
   };
 
   const renderKey = useMemo(() => Date.now(), [selectedItems]);
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+
+  const size = useUpdatedUX ? "s" : undefined;
 
   return (
     <>
       <SimplePopover
         data-test-subj="moreAction"
         panelPaddingSize="none"
         button={
-          <EuiButton iconType="arrowDown" iconSide="right">
+          <EuiButton iconType="arrowDown" iconSide="right" size={size}>
             Actions
           </EuiButton>
         }

public/pages/Aliases/containers/Aliases/Aliases.test.tsx

@@ -15,6 +15,23 @@ import { ROUTES } from "../../../../utils/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
 import userEvent from "@testing-library/user-event";
 import { IAlias } from "../../interface";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderWithRouter() {
   return {