opensearch-project · SuZhou-Joe · Nov 14, 2022 · Nov 12, 2022 · Nov 12, 2022 · Nov 12, 2022
diff --git a/cypress/integration/create_index.js b/cypress/integration/create_index.js
@@ -93,12 +93,7 @@ describe("Create Index", () => {
     });
 
     it("Update alias successfully", () => {
-      cy.get(`[data-test-subj="view-index-detail-button-${SAMPLE_INDEX}"]`)
-        .click()
-        .get("#index-detail-modal-alias")
-        .click()
-        .get('[data-test-subj="detail-modal-edit"]')
-        .click();
+      cy.get(`[data-test-subj="view-index-detail-button-${SAMPLE_INDEX}"]`).click().get("#index-detail-modal-alias").click();
 
       // add a alias and remove the exist alias
       cy.get('[data-test-subj="comboBoxSearchInput"]')
@@ -109,17 +104,10 @@ describe("Create Index", () => {
         .end()
         .get('[data-test-subj="createIndexCreateButton"]')
         .click({ force: true })
-        .end()
-        .get('[data-test-subj="change_diff_confirm-confirm"]')
-        .click();
+        .end();
 
       // check the index
-      cy.get(`[data-test-subj="view-index-detail-button-${SAMPLE_INDEX}"]`)
-        .click()
-        .get("#index-detail-modal-alias")
-        .click()
-        .get('[data-test-subj="detail-modal-edit"]')
-        .click();
+      cy.get(`[data-test-subj="view-index-detail-button-${SAMPLE_INDEX}"]`).click().get("#index-detail-modal-alias").click();
 
       cy.get(`[value="${SAMPLE_INDEX}"]`)
         .should("exist")
@@ -133,12 +121,7 @@ describe("Create Index", () => {
     });
 
     it("Update settings successfully", () => {
-      cy.get(`[data-test-subj="view-index-detail-button-${SAMPLE_INDEX}"]`)
-        .click()
-        .get("#index-detail-modal-settings")
-        .click()
-        .get('[data-test-subj="detail-modal-edit"]')
-        .click();
+      cy.get(`[data-test-subj="view-index-detail-button-${SAMPLE_INDEX}"]`).click().get("#index-detail-modal-settings").click();
 
       cy.get('[aria-controls="accordion_for_create_index_settings"]')
         .click()
@@ -172,23 +155,13 @@ describe("Create Index", () => {
         .get('[data-test-subj="change_diff_confirm-confirm"]')
         .click();
 
-      cy.get(`[data-test-subj="view-index-detail-button-${SAMPLE_INDEX}"]`)
-        .click()
-        .get("#index-detail-modal-settings")
-        .click()
-        .get('[data-test-subj="detail-modal-edit"]')
-        .click();
+      cy.get(`[data-test-subj="view-index-detail-button-${SAMPLE_INDEX}"]`).click().get("#index-detail-modal-settings").click();
 
       cy.get('[placeholder="The number of replica shards each primary shard should have."]').should("have.value", 12);
     });
 
     it("Update mappings successfully", () => {
-      cy.get(`[data-test-subj="view-index-detail-button-${SAMPLE_INDEX}"]`)
-        .click()
-        .get("#index-detail-modal-mappings")
-        .click()
-        .get('[data-test-subj="detail-modal-edit"]')
-        .click();
+      cy.get(`[data-test-subj="view-index-detail-button-${SAMPLE_INDEX}"]`).click().get("#index-detail-modal-mappings").click();
 
       cy.get('[data-test-subj="create index add field button"]')
         .click()
@@ -201,12 +174,7 @@ describe("Create Index", () => {
         .get('[data-test-subj="change_diff_confirm-confirm"]')
         .click();
 
-      cy.get(`[data-test-subj="view-index-detail-button-${SAMPLE_INDEX}"]`)
-        .click()
-        .get("#index-detail-modal-mappings")
-        .click()
-        .get('[data-test-subj="detail-modal-edit"]')
-        .click();
+      cy.get(`[data-test-subj="view-index-detail-button-${SAMPLE_INDEX}"]`).click().get("#index-detail-modal-mappings").click();
 
       cy.get('[data-test-subj="mapping-visual-editor-2-field-type"]').should("have.value", "text").end();
     });

diff --git a/cypress/integration/split_index.js b/cypress/integration/split_index.js
@@ -36,23 +36,14 @@ describe("Split Index", () => {
       // The index should exist
       cy.get(`#_selection_column_${SAMPLE_INDEX}-checkbox`).should("have.exist").end();
 
-      cy.get(`[data-test-subj="view-index-detail-button-${SAMPLE_INDEX}"]`)
-        .click()
-        .end()
-        .get("#index-detail-modal-settings")
-        .click()
-        .end()
-        .get('[data-test-subj="detail-modal-edit"]')
-        .click()
-        .end();
+      cy.get(`[data-test-subj="view-index-detail-button-${SAMPLE_INDEX}"]`).click().end().get("#index-detail-modal-settings").click().end();
 
       cy.get('[placeholder="The number of primary shards in the index. Default is 1."]').then(($shardNumber) => {
         split_number = $shardNumber.val() * 2;
       });
 
       // Update Index status to blocks write otherwise we can't apply split operation on it
-      cy.updateIndexSettings(SAMPLE_INDEX, {"index.blocks.write":"true"})
-        .end()
+      cy.updateIndexSettings(SAMPLE_INDEX, { "index.blocks.write": "true" }).end();
     });
 
     it("Split successfully", () => {
@@ -89,9 +80,6 @@ describe("Split Index", () => {
         .end()
         .get("#index-detail-modal-settings")
         .click()
-        .end()
-        .get('[data-test-subj="detail-modal-edit"]')
-        .click()
         .end();
 
       cy.get('[placeholder="The number of primary shards in the index. Default is 1."]').should("have.value", `${split_number}`).end();
@@ -110,6 +98,6 @@ describe("Split Index", () => {
         .get('[data-test-subj="flyout-footer-action-button"]')
         .click()
         .end();
-    })
+    });
   });
 });
diff --git a/public/components/EuiToolTipWrapper/EuiToolTipWrapper.test.tsx b/public/components/EuiToolTipWrapper/EuiToolTipWrapper.test.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react";
+import { render, waitFor, act } from "@testing-library/react";
+import { fireEvent } from "@testing-library/dom";
+import EuiToolTipWrapper from "./index";
+
+const WrappedInput = EuiToolTipWrapper((props: any) => <input {...props} />);
+
+describe("<FormGenerator /> spec", () => {
+  it("render the component", async () => {
+    render(<WrappedInput />);
+    await waitFor(() => {});
+    expect(document.body.children).toMatchSnapshot();
+  });
+
+  it("render the error", async () => {
+    const { queryByText, container } = render(<WrappedInput disabledReason="test error" disabled data-test-subj="test" />);
+    const anchorDOM = container.querySelector(".euiToolTipAnchor") as Element;
+    await act(async () => {
+      await fireEvent.mouseOver(anchorDOM, {
+        bubbles: true,
+      });
+    });
+    await waitFor(() => {
+      expect(queryByText("test error")).not.toBeNull();
+    });
+  });
+});
diff --git a/public/components/EuiToolTipWrapper/__snapshots__/EuiToolTipWrapper.test.tsx.snap b/public/components/EuiToolTipWrapper/__snapshots__/EuiToolTipWrapper.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FormGenerator /> spec render the component 1`] = `
+HTMLCollection [
+  <div>
+    <span
+      class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
+    >
+      <input />
+    </span>
+  </div>,
+]
+`;
diff --git a/public/components/EuiToolTipWrapper/index.tsx b/public/components/EuiToolTipWrapper/index.tsx
@@ -0,0 +1,79 @@
+import React, { forwardRef } from "react";
+import { EuiToolTip } from "@elastic/eui";
+
+interface IEuiToolTipWrapperOptions {
+  disabledKey?: string;
+}
+
+export interface IEuiToolTipWrapperProps {
+  disabledReason?:
+    | string
+    | {
+        visible: boolean;
+        message: string;
+      }[];
+}
+
+export default function EuiToolTipWrapper<T>(
+  Component: React.ComponentType<T>,
+  options?: IEuiToolTipWrapperOptions
+): React.ComponentType<T & IEuiToolTipWrapperProps> {
+  return forwardRef(({ disabledReason, children, ...others }, ref) => {
+    const finalOptions: Required<IEuiToolTipWrapperOptions> = {
+      ...{
+        disabledKey: "disabled",
+      },
+      ...options,
+    };
+    let formattedReason: IEuiToolTipWrapperProps["disabledReason"];
+    if (typeof disabledReason === "string") {
+      formattedReason = [
+        {
+          visible: true,
+          message: disabledReason,
+        },
+      ];
+    } else {
+      formattedReason = disabledReason;
+    }
+    formattedReason = formattedReason?.filter((item) => item.visible);
+    const propsDisabled = (others as Record<string, any>)[finalOptions.disabledKey];
+    const disabled = propsDisabled === undefined ? !!formattedReason?.length : propsDisabled;
+    const finalProps: IEuiToolTipWrapperProps = {
+      ...others,
+      [finalOptions.disabledKey]: disabled,
+    };
+    return (
+      <EuiToolTip
+        content={
+          disabled && formattedReason?.length ? (
+            <>
+              This field is disabled because:
+              <ol>
+                {formattedReason?.map((item, index) => (
+                  <li style={{ display: "flex" }} key={item.message}>
+                    <span
+                      style={{
+                        width: "1.5em",
+                        textAlign: "right",
+                      }}
+                    >
+                      {index + 1}.
+                    </span>
+                    <span>{item.message}</span>
+                  </li>
+                ))}
+              </ol>
+            </>
+          ) : undefined
+        }
+        display="block"
+        position="right"
+      >
+        <>
+          <Component {...(finalProps as T)} ref={ref} />
+        </>
+      </EuiToolTip>
+    );
+  }) as React.ComponentType<T & IEuiToolTipWrapperProps>;
+}
diff --git a/public/components/FormGenerator/__snapshots__/FormGenerator.test.tsx.snap b/public/components/FormGenerator/__snapshots__/FormGenerator.test.tsx.snap
@@ -25,21 +25,25 @@ HTMLCollection [
         <div
           class="euiFormRow__fieldWrapper"
         >
-          <div
-            class="euiFormControlLayout"
+          <span
+            class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiFormControlLayout__childrenWrapper"
+              class="euiFormControlLayout"
             >
-              <input
-                class="euiFieldText"
-                data-meta="Field"
-                id="test"
-                type="text"
-                value=""
-              />
+              <div
+                class="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  class="euiFieldText"
+                  data-meta="Field"
+                  id="test"
+                  type="text"
+                  value=""
+                />
+              </div>
             </div>
-          </div>
+          </span>
         </div>
       </div>
       <div
@@ -85,21 +89,25 @@ HTMLCollection [
         <div
           class="euiFormRow__fieldWrapper"
         >
-          <div
-            class="euiFormControlLayout"
+          <span
+            class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiFormControlLayout__childrenWrapper"
+              class="euiFormControlLayout"
             >
-              <input
-                class="euiFieldText"
-                data-meta="Field"
-                id="test_component_2"
-                type="text"
-                value=""
-              />
+              <div
+                class="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  class="euiFieldText"
+                  data-meta="Field"
+                  id="test_component_2"
+                  type="text"
+                  value=""
+                />
+              </div>
             </div>
-          </div>
+          </span>
         </div>
       </div>
     </div>

diff --git a/public/components/FormGenerator/built_in_components/index.tsx b/public/components/FormGenerator/built_in_components/index.tsx
@@ -1,20 +1,33 @@
 import React, { forwardRef } from "react";
 import { EuiFieldNumber, EuiFieldText, EuiSwitch } from "@elastic/eui";
+import EuiToolTipWrapper, { IEuiToolTipWrapperProps } from "../../EuiToolTipWrapper";
 
 type ComponentMapEnum = "Input" | "Number" | "Switch";
 
-const componentMap: Record<ComponentMapEnum, React.FC<{ onChange: (val: any) => void; value?: any }>> = {
-  Input: forwardRef(({ onChange, value, ...others }, ref: React.Ref<any>) => (
-    <EuiFieldText inputRef={ref} value={value || ""} onChange={(e) => onChange(e.target.value)} {...others} />
-  )),
-  Number: forwardRef(({ onChange, value, ...others }, ref: React.Ref<any>) => (
-    <EuiFieldNumber inputRef={ref} onChange={(e) => onChange(e.target.value)} value={value || ""} {...others} />
-  )),
-  Switch: forwardRef(({ value, onChange, ...others }, ref: React.Ref<any>) => (
-    <div ref={ref}>
-      <EuiSwitch showLabel={false} label="" checked={value || false} onChange={(e) => onChange(e.target.checked)} {...others} />
-    </div>
-  )),
+export interface IFieldComponentProps extends IEuiToolTipWrapperProps {
+  onChange: (val: IFieldComponentProps["value"]) => void;
+  value?: any;
+  [key: string]: any;
+}
+
+const componentMap: Record<ComponentMapEnum, React.ComponentType<IFieldComponentProps>> = {
+  Input: EuiToolTipWrapper(
+    forwardRef(({ onChange, value, disabledReason, disabled, ...others }, ref: React.Ref<HTMLInputElement>) => (
+      <EuiFieldText inputRef={ref} value={value || ""} onChange={(e) => onChange(e.target.value)} disabled={disabled} {...others} />
+    )) as React.ComponentType<IFieldComponentProps>
+  ),
+  Number: EuiToolTipWrapper(
+    forwardRef(({ onChange, value, ...others }, ref: React.Ref<HTMLInputElement>) => (
+      <EuiFieldNumber inputRef={ref} onChange={(e) => onChange(e.target.value)} value={value || ""} {...others} />
+    )) as React.ComponentType<IFieldComponentProps>
+  ),
+  Switch: EuiToolTipWrapper(
+    forwardRef(({ value, onChange, ...others }, ref: React.Ref<any>) => (
+      <div ref={ref}>
+        <EuiSwitch showLabel={false} label="" checked={value || false} onChange={(e) => onChange(e.target.checked)} {...others} />
+      </div>
+    )) as React.ComponentType<IFieldComponentProps>
+  ),
 };
 
 export default componentMap;
diff --git a/public/containers/IndexDetail/index.tsx b/public/containers/IndexDetail/index.tsx
@@ -36,7 +36,7 @@ export default function IndexDetail(props: IIndexDetailProps) {
       props.onGetIndicesDetail && props.onGetIndicesDetail(finalResponse);
       setLoading(false);
     })();
-  }, [props.indices, setLoading, setItems, coreServices]);
+  }, [props.indices.join(","), setLoading, setItems, coreServices]);
   return (
     <ContentPanel title="Source index details" titleSize="s">
       <EuiBasicTable