Update new header for datastreams and rollups jobs. (#1115) (#1119)

* Update header for ISM rollup pages * update new header for DataStreams and Rollups * Fix PR test failures --------- (cherry picked from commit a9719df) Signed-off-by: Sandeep Kumawat <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sandeep Kumawat <[email protected]>
opensearch-project · Aug 19, 2024 · ec05690 · ec05690
1 parent f5d19f6
commit ec05690
Show file tree

Hide file tree

Showing 25 changed files with 1,132 additions and 367 deletions.
diff --git a/public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.test.tsx b/public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.test.tsx
@@ -12,6 +12,23 @@ import { ServicesContext } from "../../../../services";
 import { browserServicesMock, coreServicesMock, apiCallerMock } from "../../../../../test/mocks";
 import { ROUTES } from "../../../../utils/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
+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 renderCreateDataStreamWithRouter(initialEntries = [ROUTES.DATA_STREAMS] as string[]) {
   return {

diff --git a/public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.tsx b/public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.tsx
@@ -11,17 +11,31 @@ import { CoreServicesContext } from "../../../../components/core_services";
 import { isEqual } from "lodash";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getUISettings } from "../../../../services/Services";
 
 interface CreateDataStreamProps extends RouteComponentProps<{ dataStream?: string }>, DataSourceMenuProperties {}
 
-class CreateDataStream extends Component<CreateDataStreamProps> {
+type CreateDataStreamState = {
+  useNewUX: boolean;
+};
+
+class CreateDataStream extends Component<CreateDataStreamProps, CreateDataStreamState> {
   static contextType = CoreServicesContext;
 
+  constructor(props: CreateDataStreamProps) {
+    super(props);
+    const uiSettings = getUISettings();
+    const useNewUX = uiSettings.get("home:useNewHomePage");
+    this.state = {
+      useNewUX: useNewUX,
+    };
+  }
+
   get dataStream() {
     return this.props.match.params.dataStream;
   }
 
-  setBreadCrumb() {
+  setBreadCrumb(useNewUX: boolean) {
     const isEdit = this.dataStream;
     let lastBread: typeof BREADCRUMBS.TEMPLATES;
     if (isEdit) {
@@ -32,32 +46,36 @@ class CreateDataStream extends Component<CreateDataStreamProps> {
     } else {
       lastBread = BREADCRUMBS.CREATE_DATA_STREAM;
     }
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.DATA_STREAMS, lastBread]);
+    let breadCrumbs = useNewUX
+      ? [BREADCRUMBS.DATA_STREAMS, lastBread]
+      : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.DATA_STREAMS, lastBread];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
   }
-
   componentDidUpdate(prevProps: Readonly<CreateDataStreamProps>): void {
     if (!isEqual(prevProps, this.props)) {
-      this.setBreadCrumb();
+      this.setBreadCrumb(this.state.useNewUX);
     }
   }
 
   componentDidMount = async (): Promise<void> => {
-    this.setBreadCrumb();
+    this.setBreadCrumb(this.state.useNewUX);
   };
 
   onCancel = (): void => {
     this.props.history.push(ROUTES.DATA_STREAMS);
   };
 
   render() {
+    const padding_style = this.state.useNewUX ? { padding: "0px 0px" } : { padding: "0px 50px" };
     return (
-      <div style={{ padding: "0px 50px" }}>
+      <div style={padding_style}>
         <DataStreamDetail
           history={this.props.history}
           dataStream={this.dataStream}
           onCancel={this.onCancel}
           onSubmitSuccess={() => this.props.history.push(ROUTES.DATA_STREAMS)}
           key={this.props.dataSourceId}
+          useNewUX={this.state.useNewUX}
         />
       </div>
     );

diff --git a/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.test.tsx b/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.test.tsx
@@ -12,6 +12,23 @@ import { CoreServicesContext } from "../../../../components/core_services";
 import { HashRouter, Route } from "react-router-dom";
 import { ROUTES } from "../../../../utils/constants";
 import userEvent from "@testing-library/user-event";
+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 renderCreateDataStream(props: Omit<DataStreamDetailProps, "history">) {
   return {

diff --git a/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx b/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, Ref, useState } from "react";
-import { EuiButton, EuiButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiTitle } from "@elastic/eui";
+import { EuiButton, EuiButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiTitle, EuiText } from "@elastic/eui";
 import { TemplateItemRemote } from "../../../../../models/interfaces";
 import useField, { FieldInstance } from "../../../../lib/field";
 import CustomFormRow from "../../../../components/CustomFormRow";
@@ -25,13 +25,17 @@ import { ContentPanel } from "../../../../components/ContentPanel";
 import { DataStreamInEdit } from "../../interface";
 import BackingIndices from "../BackingIndices";
 import DataStreamsActions from "../../../DataStreams/containers/DataStreamsActions";
+import { ExternalLink } from "../../../utils/display-utils";
+import { getApplication, getNavigationUI } from "../../../../services/Services";
+import { TopNavControlButtonData } from "../../../../../../../src/plugins/navigation/public";
 
 export interface DataStreamDetailProps {
   dataStream?: string;
   onCancel?: () => void;
   onSubmitSuccess?: (templateName: string) => void;
   readonly?: boolean;
   history: RouteComponentProps["history"];
+  useNewUX: boolean;
 }
 
 const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref<FieldInstance>) => {
@@ -107,52 +111,103 @@ const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref<FieldInstance>)
     field,
   };
 
+  const descriptionData = [
+    {
+      renderComponent: (
+        <EuiText size="s" color="subdued">
+          A data stream is composed of multiple backing indexes. Search requests are routed to all the backing indexes, while indexing
+          requests <br></br>
+          are routed to the latest write index.
+          <ExternalLink href={coreServices.docLinks.links.opensearch.dataStreams} />
+        </EuiText>
+      ),
+    },
+  ];
+
+  const controlsData = [
+    {
+      renderComponent: (
+        <DataStreamsActions
+          selectedItems={values ? ([values] as DataStreamInEdit[]) : []}
+          history={props.history}
+          onDelete={() => props.history.replace(ROUTES.DATA_STREAMS)}
+          useNewUX={props.useNewUX}
+        />
+      ),
+    },
+    {
+      id: "viewJson",
+      label: "View JSON",
+      testId: "dataStreamJSONDetailModal",
+      run: () => {
+        Modal.show({
+          "data-test-subj": "dataStreamJSONDetailModal",
+          title: values.name,
+          content: <JSONEditor value={JSON.stringify(values, null, 2)} disabled />,
+        });
+      },
+      controlType: "button",
+      display: "base",
+      fill: true,
+    } as TopNavControlButtonData,
+  ];
+
+  const { HeaderControl } = getNavigationUI();
+  const { setAppRightControls, setAppDescriptionControls } = getApplication();
+
   return (
     <>
-      <EuiFlexGroup alignItems="center">
-        <EuiFlexItem>
-          <EuiTitle size="l">{isEdit ? <h1 title={values.name}>{values.name}</h1> : <h1>Create data stream</h1>}</EuiTitle>
-          {isEdit ? null : (
-            <CustomFormRow
-              fullWidth
-              label=""
-              helpText={
-                <div>
-                  A data stream is composed of multiple backing indexes. Search requests are routed to all the backing indexes, while
-                  indexing requests are routed to the latest write index.{" "}
-                  <EuiLink target="_blank" external href={coreServices.docLinks.links.opensearch.dataStreams}>
-                    Learn more
-                  </EuiLink>
-                </div>
-              }
-            >
-              <></>
-            </CustomFormRow>
-          )}
-        </EuiFlexItem>
-        {isEdit ? (
-          <EuiFlexItem grow={false} style={{ flexDirection: "row" }}>
-            <EuiButton
-              style={{ marginRight: 20 }}
-              onClick={() => {
-                Modal.show({
-                  "data-test-subj": "dataStreamJSONDetailModal",
-                  title: values.name,
-                  content: <JSONEditor value={JSON.stringify(values, null, 2)} disabled />,
-                });
-              }}
-            >
-              View JSON
-            </EuiButton>
-            <DataStreamsActions
-              selectedItems={values ? ([values] as DataStreamInEdit[]) : []}
-              history={props.history}
-              onDelete={() => props.history.replace(ROUTES.DATA_STREAMS)}
-            />
-          </EuiFlexItem>
-        ) : null}
-      </EuiFlexGroup>
-      <EuiSpacer />
+      {!isEdit && props.useNewUX && <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />}
+      {isEdit && props.useNewUX && <HeaderControl setMountPoint={setAppRightControls} controls={controlsData} />}
+      {!props.useNewUX && (
+        <>
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem>
+              <EuiTitle size="l">{isEdit ? <h1 title={values.name}>{values.name}</h1> : <h1>Create data stream</h1>}</EuiTitle>
+              {isEdit ? null : (
+                <CustomFormRow
+                  fullWidth
+                  label=""
+                  helpText={
+                    <div>
+                      A data stream is composed of multiple backing indexes. Search requests are routed to all the backing indexes, while
+                      indexing requests are routed to the latest write index.{" "}
+                      <EuiLink target="_blank" external href={coreServices.docLinks.links.opensearch.dataStreams}>
+                        Learn more
+                      </EuiLink>
+                    </div>
+                  }
+                >
+                  <></>
+                </CustomFormRow>
+              )}
+            </EuiFlexItem>
+
+            {isEdit ? (
+              <EuiFlexItem grow={false} style={{ flexDirection: "row" }}>
+                <EuiButton
+                  style={{ marginRight: 20 }}
+                  onClick={() => {
+                    Modal.show({
+                      "data-test-subj": "dataStreamJSONDetailModal",
+                      title: values.name,
+                      content: <JSONEditor value={JSON.stringify(values, null, 2)} disabled />,
+                    });
+                  }}
+                >
+                  View JSON
+                </EuiButton>
+                <DataStreamsActions
+                  selectedItems={values ? ([values] as DataStreamInEdit[]) : []}
+                  history={props.history}
+                  onDelete={() => props.history.replace(ROUTES.DATA_STREAMS)}
+                />
+              </EuiFlexItem>
+            ) : null}
+          </EuiFlexGroup>
+          <EuiSpacer />
+        </>
+      )}
       {!isLoading && !templates.length && !isEdit ? (
         <>
           <EuiCallOut title="No data stream templates created" color="warning">

diff --git a/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx b/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx
@@ -33,6 +33,7 @@ interface CreateRollupProps extends RouteComponentProps, DataSourceMenuPropertie
   onChangeTargetIndex: (options: EuiComboBoxOptionOption<IndexItem>[]) => void;
   currentStep: number;
   hasAggregation: boolean;
+  useNewUX: boolean;
 }
 
 export default class CreateRollup extends Component<CreateRollupProps> {
@@ -41,17 +42,28 @@ export default class CreateRollup extends Component<CreateRollupProps> {
       return null;
     }
 
+    const getTitle = !this.props.useNewUX
+      ? () => {
+          return (
+            <>
+              <EuiTitle size="l">
+                <h1>Set up indices</h1>
+              </EuiTitle>
+              <EuiSpacer />
+            </>
+          );
+        }
+      : () => {};
+    const padding_style = this.props.useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" };
+
     return (
-      <div style={{ padding: "5px 50px" }}>
+      <div style={padding_style}>
         <EuiFlexGroup>
           <EuiFlexItem style={{ maxWidth: 300 }} grow={false}>
             <CreateRollupSteps step={1} />
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiTitle size="l">
-              <h1>Set up indices</h1>
-            </EuiTitle>
-            <EuiSpacer />
+            {getTitle()}
             <ConfigureRollup isEdit={false} {...this.props} />
             <EuiSpacer />
             <RollupIndices key={this.props.dataSourceId} {...this.props} />

diff --git a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.test.tsx b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.test.tsx
@@ -16,6 +16,23 @@ import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import CreateRollupForm from "./CreateRollupForm";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { DataStream } 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({});
+});
 
 const sampleMapping = {
   index_1: {