Feature/unittest fix 2.5 (#525)

* Feature/common 2.5 (#506) * feat: split to common change Signed-off-by: suzhou <[email protected]> * feat: update Signed-off-by: suzhou <[email protected]> Signed-off-by: suzhou <[email protected]> * feat: update Signed-off-by: suzhou <[email protected]> * feat: update Signed-off-by: suzhou <[email protected]> * feat: update Signed-off-by: suzhou <[email protected]> * feat: update Signed-off-by: suzhou <[email protected]> Signed-off-by: suzhou <[email protected]>
opensearch-project · Jan 3, 2023 · 14646b7 · 14646b7
1 parent b253ce4
commit 14646b7
Show file tree

Hide file tree

Showing 15 changed files with 97 additions and 29 deletions.
diff --git a/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx b/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx
@@ -60,7 +60,7 @@ const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError }: Defi
     </div>
     <EuiSpacer size="m" />
     <DarkModeConsumer>
-      {isDarkMode => (
+      {(isDarkMode) => (
         <EuiCodeEditor
           mode="json"
           theme={isDarkMode ? "sense-dark" : "github"}

diff --git a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx b/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
@@ -34,6 +34,7 @@ interface CreatePolicyState {
 
 export default class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState> {
   static contextType = CoreServicesContext;
+  _isMount: boolean;
   constructor(props: CreatePolicyProps) {
     super(props);
 
@@ -47,6 +48,8 @@ export default class CreatePolicy extends Component<CreatePolicyProps, CreatePol
       isSubmitting: false,
       hasSubmitted: false,
     };
+
+    this._isMount = true;
   }
 
   componentDidMount = async (): Promise<void> => {
@@ -71,6 +74,10 @@ export default class CreatePolicy extends Component<CreatePolicyProps, CreatePol
     }
   };
 
+  componentWillUnmount() {
+    this._isMount = false;
+  }
+
   getPolicyToEdit = async (policyId: string): Promise<void> => {
     try {
       const { policyService } = this.props;
@@ -169,6 +176,9 @@ export default class CreatePolicy extends Component<CreatePolicyProps, CreatePol
       console.error(err);
     }
 
+    if (!this._isMount) {
+      return;
+    }
     this.setState({ isSubmitting: false });
   };
 

diff --git a/public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx b/public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx
@@ -272,7 +272,7 @@ export default class AdvancedAggregation extends Component<AdvancedAggregationPr
         align: "left",
         render: (aggregationMethod, item) => (
           <EuiForm>
-            <EuiFormRow compressed={true}>
+            <EuiFormRow>
               <EuiSelect
                 compressed={true}
                 value={aggregationMethod}

diff --git a/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx b/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx
@@ -260,8 +260,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         truncateText: true,
         render: (all: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow compressed={true}>
+            <EuiFormRow>
               <EuiCheckbox
+                compressed
                 id={`all-${item.source_field.label}`}
                 checked={all}
                 onChange={(e) => this.setChecked(e, "all", item)}
@@ -277,8 +278,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         align: "center",
         render: (min: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow compressed={true}>
+            <EuiFormRow>
               <EuiCheckbox
+                compressed
                 id={`min-${item.source_field.label}`}
                 checked={min}
                 onChange={(e) => this.setChecked(e, "min", item)}
@@ -294,8 +296,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         align: "center",
         render: (max: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow compressed={true}>
+            <EuiFormRow>
               <EuiCheckbox
+                compressed
                 id={`max-${item.source_field.label}`}
                 checked={max}
                 onChange={(e) => this.setChecked(e, "max", item)}
@@ -311,8 +314,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         align: "center",
         render: (sum: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow compressed={true}>
+            <EuiFormRow>
               <EuiCheckbox
+                compressed
                 id={`sum-${item.source_field.label}`}
                 checked={sum}
                 onChange={(e) => this.setChecked(e, "sum", item)}
@@ -328,8 +332,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         align: "center",
         render: (avg: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow compressed={true}>
+            <EuiFormRow>
               <EuiCheckbox
+                compressed
                 id={`avg-${item.source_field.label}`}
                 checked={avg}
                 onChange={(e) => this.setChecked(e, "avg", item)}
@@ -345,8 +350,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         align: "center",
         render: (value_count: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow compressed={true}>
+            <EuiFormRow>
               <EuiCheckbox
+                compressed
                 id={`value_count-${item.source_field.label}`}
                 checked={value_count}
                 onChange={(e) => this.setChecked(e, "value_count", item)}

diff --git a/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx b/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx
@@ -4,9 +4,10 @@
  */
 
 import React, { Component, Fragment } from "react";
-import { EuiSpacer, EuiFormRow, EuiComboBox, EuiCallOut, EuiText, EuiLink } from "@elastic/eui";
+import { EuiSpacer, EuiFormRow, EuiCallOut, EuiText, EuiLink } from "@elastic/eui";
 import { EuiComboBoxOptionOption } from "@elastic/eui/src/components/combo_box/types";
 import _ from "lodash";
+import EuiComboBox from "../../../../components/BetterComboBox";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { IndexItem } from "../../../../../models/interfaces";
 import IndexService from "../../../../services/IndexService";
@@ -34,6 +35,7 @@ export const ROLLUP_RESULTS_HELP_TEXT_LINK = "https://opensearch.org/docs/latest
 
 export default class RollupIndices extends Component<RollupIndicesProps, RollupIndicesState> {
   static contextType = CoreServicesContext;
+  _isMount: boolean;
   constructor(props: RollupIndicesProps) {
     super(props);
     this.state = {
@@ -42,14 +44,22 @@ export default class RollupIndices extends Component<RollupIndicesProps, RollupI
       targetIndexOptions: [],
     };
 
+    this._isMount = true;
     this.onIndexSearchChange = _.debounce(this.onIndexSearchChange, 500, { leading: true });
   }
 
   async componentDidMount(): Promise<void> {
     await this.onIndexSearchChange("");
   }
 
+  componentWillUnmount(): void {
+    this._isMount = false;
+  }
+
   onIndexSearchChange = async (searchValue: string): Promise<void> => {
+    if (!this._isMount) {
+      return;
+    }
     const { indexService } = this.props;
     this.setState({ isLoading: true, indexOptions: [] });
     try {
@@ -59,7 +69,9 @@ export default class RollupIndices extends Component<RollupIndicesProps, RollupI
         const options = searchValue.trim() ? [{ label: wildcardOption(searchValue) }] : [];
         const dataStreams = dataStreamsAndIndicesNamesResponse.response.dataStreams.map((label) => ({ label }));
         const indices = dataStreamsAndIndicesNamesResponse.response.indices.map((label) => ({ label }));
-        this.setState({ indexOptions: options.concat(dataStreams, indices), targetIndexOptions: indices });
+        if (this._isMount) {
+          this.setState({ indexOptions: options.concat(dataStreams, indices), targetIndexOptions: indices });
+        }
       } else {
         if (dataStreamsAndIndicesNamesResponse.error.startsWith("[index_not_found_exception]")) {
           this.context.notifications.toasts.addDanger("No index available");
@@ -71,7 +83,9 @@ export default class RollupIndices extends Component<RollupIndicesProps, RollupI
       this.context.notifications.toasts.addDanger(err.message);
     }
 
-    this.setState({ isLoading: false });
+    if (this._isMount) {
+      this.setState({ isLoading: false });
+    }
   };
 
   onCreateOption = (searchValue: string, flattenedOptions: { label: string; value?: IndexItem }[]): void => {

diff --git a/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx b/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx
@@ -7,7 +7,6 @@ import React, { ChangeEvent, Component, Fragment } from "react";
 import {
   EuiSpacer,
   EuiFormRow,
-  EuiComboBox,
   EuiSelect,
   EuiFlexGroup,
   EuiFlexItem,
@@ -21,6 +20,7 @@ import {
   EuiText,
 } from "@elastic/eui";
 import moment from "moment-timezone";
+import EuiComboBox from "../../../../components/BetterComboBox";
 import { RollupService } from "../../../../services";
 import { FieldItem } from "../../../../../models/interfaces";
 import { CalendarTimeunitOptions, FixedTimeunitOptions } from "../../../../utils/constants";

diff --git a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
@@ -77,6 +77,7 @@ interface CreateRollupFormState {
 
 export default class CreateRollupForm extends Component<CreateRollupFormProps, CreateRollupFormState> {
   static contextType = CoreServicesContext;
+  _isMount: boolean;
 
   constructor(props: CreateRollupFormProps) {
     super(props);
@@ -131,12 +132,17 @@ export default class CreateRollupForm extends Component<CreateRollupFormProps, C
     };
     this._next = this._next.bind(this);
     this._prev = this._prev.bind(this);
+    this._isMount = true;
   }
 
   componentDidMount = async (): Promise<void> => {
     this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ROLLUPS, BREADCRUMBS.CREATE_ROLLUP]);
   };
 
+  componentWillUnmount() {
+    this._isMount = false;
+  }
+
   getMappings = async (srcIndex: string): Promise<void> => {
     if (!srcIndex.length) return;
     try {
@@ -481,7 +487,9 @@ export default class CreateRollupForm extends Component<CreateRollupFormProps, C
       console.error(err);
     }
 
-    this.setState({ isSubmitting: false });
+    if (this._isMount) {
+      this.setState({ isSubmitting: false });
+    }
   };
 
   onCancel = (): void => {

diff --git a/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx b/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx
@@ -14,21 +14,21 @@ const setOfSteps = (step: number) => {
   return [
     {
       title: "Set up indices",
-      children: null,
+      children: <></>,
     },
     {
       title: "Define transforms",
-      children: null,
+      children: <></>,
       status: step < 2 ? "disabled" : null,
     },
     {
       title: "Specify schedule",
-      children: null,
+      children: <></>,
       status: step < 3 ? "disabled" : null,
     },
     {
       title: "Review and create",
-      children: null,
+      children: <></>,
       status: step < 4 ? "disabled" : null,
     },
   ];

diff --git a/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx b/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx
@@ -7,7 +7,6 @@ import React, { Component, Fragment } from "react";
 import {
   EuiSpacer,
   EuiFormRow,
-  EuiComboBox,
   EuiCallOut,
   EuiPopover,
   EuiFlexGroup,
@@ -20,6 +19,7 @@ import {
   EuiLink,
 } from "@elastic/eui";
 import _ from "lodash";
+import EuiComboBox from "../../../../components/BetterComboBox";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import IndexFilterPopover from "../IndexFilterPopover";
 import { FieldItem, IndexItem } from "../../../../../models/interfaces";
@@ -53,6 +53,7 @@ interface TransformIndicesState {
 
 export default class TransformIndices extends Component<TransformIndicesProps, TransformIndicesState> {
   static contextType = CoreServicesContext;
+  _isMount: boolean;
   constructor(props: TransformIndicesProps) {
     super(props);
     this.state = {
@@ -63,19 +64,30 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
       selectFieldValue: "",
     };
 
+    this._isMount = true;
     this.onIndexSearchChange = _.debounce(this.onIndexSearchChange, 500, { leading: true });
   }
 
   async componentDidMount(): Promise<void> {
     await this.onIndexSearchChange("");
   }
 
+  componentWillUnmount(): void {
+    this._isMount = false;
+  }
+
   // TODO: created shared method with rollup indices to reduce duplicate code.
   onIndexSearchChange = async (searchValue: string): Promise<void> => {
+    if (!this._isMount) {
+      return;
+    }
     const { indexService } = this.props;
     this.setState({ isLoading: true, indexOptions: [] });
     try {
       const dataStreamsAndIndicesNamesResponse = await indexService.getDataStreamsAndIndicesNames(searchValue);
+      if (!this._isMount) {
+        return;
+      }
       if (dataStreamsAndIndicesNamesResponse.ok) {
         // Adding wildcard to search value
         const options = searchValue.trim() ? [{ label: wildcardOption(searchValue) }] : [];

diff --git a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
@@ -80,6 +80,7 @@ interface CreateTransformFormState {
 
 export default class CreateTransformForm extends Component<CreateTransformFormProps, CreateTransformFormState> {
   static contextType = CoreServicesContext;
+  _isMount: boolean;
 
   constructor(props: CreateTransformFormProps) {
     super(props);
@@ -129,12 +130,17 @@ export default class CreateTransformForm extends Component<CreateTransformFormPr
     };
     this._next = this._next.bind(this);
     this._prev = this._prev.bind(this);
+    this._isMount = true;
   }
 
   componentDidMount = async (): Promise<void> => {
     this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TRANSFORMS, BREADCRUMBS.CREATE_TRANSFORM]);
   };
 
+  componentWillUnmount() {
+    this._isMount = false;
+  }
+
   getMappings = async (srcIndex: string): Promise<void> => {
     if (!srcIndex.length) return;
     try {
@@ -485,6 +491,9 @@ export default class CreateTransformForm extends Component<CreateTransformFormPr
       console.error(err);
     }
 
+    if (!this._isMount) {
+      return;
+    }
     this.setState({ isSubmitting: false });
   };
 

diff --git a/public/pages/Rollups/containers/Rollups/Rollups.tsx b/public/pages/Rollups/containers/Rollups/Rollups.tsx
@@ -269,7 +269,7 @@ export default class Rollups extends Component<RollupsProps, RollupsState> {
       pageIndex: page,
       pageSize: size,
       pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS,
-      totalItemCount: totalRollups,
+      totalItemCount: totalRollups || 0,
     };
 
     const sorting: EuiTableSortingType<DocumentRollup> = {

diff --git a/public/pages/VisualCreatePolicy/components/States/State.tsx b/public/pages/VisualCreatePolicy/components/States/State.tsx
@@ -113,8 +113,8 @@ const State = ({ state, isInitialState, idx, onClickEditState, onClickDeleteStat
           <EuiText>No actions. Edit state to add actions.</EuiText>
         ) : (
           <EuiFlexGroup wrap>
-            {state.actions.map((action) => (
-              <EuiFlexItem grow={false} key={makeId()}>
+            {state.actions.map((action, index) => (
+              <EuiFlexItem grow={false} key={`${makeId()}-${index}`}>
                 <EuiPanel>{actionRepoSingleton.getUIActionFromData(action).content()}</EuiPanel>
               </EuiFlexItem>
             ))}
@@ -131,8 +131,8 @@ const State = ({ state, isInitialState, idx, onClickEditState, onClickDeleteStat
           <EuiText>No transitions. Edit state to add transitions.</EuiText>
         ) : (
           <EuiFlexGroup wrap>
-            {state.transitions.map((transition) => (
-              <EuiFlexItem grow={false} key={makeId()}>
+            {state.transitions.map((transition, index) => (
+              <EuiFlexItem grow={false} key={`${makeId()}-${index}`}>
                 <EuiPanel>
                   <TransitionContent transition={transition} />
                 </EuiPanel>

diff --git a/public/pages/VisualCreatePolicy/components/States/States.tsx b/public/pages/VisualCreatePolicy/components/States/States.tsx
@@ -55,7 +55,7 @@ const States = ({ onOpenFlyout, policy, onClickEditState, onClickDeleteState, on
       <div style={{ padding: "0px 10px" }}>
         {!isReadOnly && (
           <>
-            <EuiFormRow compressed style={{ maxWidth: "300px", padding: "15px" }} isInvalid={false} error={null}>
+            <EuiFormRow style={{ maxWidth: "300px", padding: "15px" }} isInvalid={false} error={null}>
               <EuiSelect
                 compressed
                 prepend="Initial state"