refactoring to common hooks and MDSEnabledComponent

Signed-off-by: Ramakrishna Chilaka <[email protected]>

public/components/MDSEnabledComponent/MDSEnabledComponent.tsx

@@ -0,0 +1,52 @@
+import React, { useContext, useEffect } from "react";
+import { DataSourceMenuContext, DataSourceMenuProperties } from "../../services/DataSourceMenuContext";
+import { useHistory } from "react-router";
+import queryString from "query-string";
+
+export default class MDSEnabledComponent<
+  Props extends DataSourceMenuProperties,
+  State extends DataSourceMenuProperties
+> extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      dataSourceId: props.dataSourceId,
+      dataSourceLabel: props.dataSourceLabel,
+      multiDataSourceEnabled: props.multiDataSourceEnabled,
+    } as State;
+  }
+
+  static getDerivedStateFromProps<Props extends DataSourceMenuProperties, State extends DataSourceMenuProperties>(
+    nextProps: Props,
+    prevState: State
+  ) {
+    // static members cannot reference class type parameters
+    if (
+      nextProps.multiDataSourceEnabled &&
+      (nextProps.dataSourceId != prevState.dataSourceId || nextProps.dataSourceLabel != prevState.dataSourceLabel)
+    ) {
+      return {
+        dataSourceId: nextProps.dataSourceId,
+        dataSourceLabel: nextProps.dataSourceLabel,
+      };
+    }
+    return null;
+  }
+}
+
+export function useUpdateUrlWithDataSourceProperties() {
+  const dataSourceMenuProps = useContext(DataSourceMenuContext);
+  const { dataSourceId, dataSourceLabel, multiDataSourceEnabled } = dataSourceMenuProps;
+  if (multiDataSourceEnabled) {
+    // mds flag can't change while the app is loaded
+    const history = useHistory();
+    useEffect(() => {
+      history.replace({
+        search: queryString.stringify({
+          dataSourceId,
+          dataSourceLabel,
+        }),
+      });
+    }, [dataSourceId, dataSourceLabel]);
+  }
+}

public/components/MDSEnabledComponent/index.ts

@@ -0,0 +1,4 @@
+import MDSEnabledComponent from "./MDSEnabledComponent";
+
+export default MDSEnabledComponent;
+export * from "./MDSEnabledComponent";

public/index_management_app.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { CoreStart, AppMountParameters } from "opensearch-dashboards/public";
+import { AppMountParameters, CoreStart } from "opensearch-dashboards/public";
 import React from "react";
 import ReactDOM from "react-dom";
 import { HashRouter as Router, Route } from "react-router-dom";

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { Component, useContext, useState } from "react";
+import React, { useContext, useState } from "react";
 import _, { isEqual } from "lodash";
 import { RouteComponentProps } from "react-router-dom";
 import queryString from "query-string";
@@ -36,16 +36,14 @@ import IndexControls, { SearchControlsProps } from "../../components/IndexContro
 import CreateAlias from "../CreateAlias";
 import AliasesActions from "../AliasActions";
 import { CoreStart } from "opensearch-dashboards/public";
-import { DataSourceMenuContext } from "../../../../services/DataSourceMenuContext";
+import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 
-interface AliasesProps extends RouteComponentProps {
+interface AliasesProps extends RouteComponentProps, DataSourceMenuProperties {
   commonService: CommonService;
-  dataSourceId: string;
-  dataSourceLabel: string;
-  multiDataSourceEnabled: boolean;
 }
 
-interface AliasesState {
+interface AliasesState extends DataSourceMenuProperties {
   totalAliases: number;
   from: string;
   size: string;
@@ -59,8 +57,6 @@ interface AliasesState {
   loading: boolean;
   aliasCreateFlyoutVisible: boolean;
   aliasEditFlyoutVisible: boolean;
-  dataSourceId: string;
-  dataSourceLabel: string;
 }
 
 function IndexNameDisplay(props: { indices: string[]; alias: string }) {
@@ -117,9 +113,8 @@ const defaultFilter = {
   status: DEFAULT_QUERY_PARAMS.status,
 };
 
-class Aliases extends Component<AliasesProps, AliasesState> {
+class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
   static contextType = CoreServicesContext;
-
   constructor(props: AliasesProps) {
     super(props);
     const {
@@ -139,6 +134,7 @@ class Aliases extends Component<AliasesProps, AliasesState> {
     };
     this.state = {
       ...defaultFilter,
+      ...this.state,
       totalAliases: 0,
       from,
       size,
@@ -152,8 +148,6 @@ class Aliases extends Component<AliasesProps, AliasesState> {
       aliasCreateFlyoutVisible: false,
       aliasEditFlyoutVisible: false,
       editingItem: null,
-      dataSourceId: this.props.dataSourceId,
-      dataSourceLabel: this.props.dataSourceLabel,
     };
 
     this.getAliases = _.debounce(this.getAliases, 500, { leading: true });
@@ -173,16 +167,6 @@ class Aliases extends Component<AliasesProps, AliasesState> {
     }, {} as AliasesState);
   };
 
-  static getDerivedStateFromProps(nextProps: AliasesProps, prevState: AliasesState) {
-    if (nextProps.dataSourceId != prevState.dataSourceId || nextProps.dataSourceLabel != prevState.dataSourceLabel) {
-      return {
-        dataSourceId: nextProps.dataSourceId,
-        dataSourceLabel: nextProps.dataSourceLabel,
-      };
-    }
-    return null;
-  }
-
   async componentDidUpdate(prevProps: AliasesProps, prevState: AliasesState) {
     const prevQuery = this.getQueryState(prevState);
     const currQuery = this.getQueryState(this.state);

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

@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { Component, useContext } from "react";
-import _, { debounce, isEqual, get } from "lodash";
+import React, { useContext } from "react";
+import { debounce, isEqual, get } from "lodash";
 import { Link, RouteComponentProps } from "react-router-dom";
 import queryString from "query-string";
 import {
@@ -38,15 +38,13 @@ import ComponentTemplateBadge from "../../../../components/ComponentTemplateBadg
 import AssociatedTemplatesModal from "../AssociatedTemplatesModal";
 import { useComponentMapTemplate } from "../../utils/hooks";
 import "./index.scss";
-import { DataSourceMenuContext } from "../../../../services/DataSourceMenuContext";
+import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 
-interface ComposableTemplatesProps extends RouteComponentProps {
+interface ComposableTemplatesProps extends RouteComponentProps, DataSourceMenuProperties {
   commonService: CommonService;
   componentMapTemplate: Record<string, string[]>;
   loading: boolean;
-  dataSourceId: string;
-  dataSourceLabel: string;
-  multiDataSourceEnabled: boolean;
 }
 
 type ComposableTemplatesState = {
@@ -58,15 +56,14 @@ type ComposableTemplatesState = {
   selectedItems: ICatComposableTemplate[];
   composableTemplates: ICatComposableTemplate[];
   loading: boolean;
-  dataSourceId: string;
-  dataSourceLabel: string;
-} & SearchControlsProps["value"];
+} & SearchControlsProps["value"] &
+  DataSourceMenuProperties;
 
 const defaultFilter = {
   search: DEFAULT_QUERY_PARAMS.search,
 };
 
-class ComposableTemplates extends Component<ComposableTemplatesProps, ComposableTemplatesState> {
+class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps, ComposableTemplatesState> {
   static contextType = CoreServicesContext;
   constructor(props: ComposableTemplatesProps) {
     super(props);
@@ -85,6 +82,7 @@ class ComposableTemplates extends Component<ComposableTemplatesProps, Composable
     };
     this.state = {
       ...defaultFilter,
+      ...this.state,
       totalComposableTemplates: 0,
       from,
       size,
@@ -95,25 +93,13 @@ class ComposableTemplates extends Component<ComposableTemplatesProps, Composable
       composableTemplates: [],
       loading: false,
       selectedTypes: [],
-      dataSourceId: props.dataSourceId,
-      dataSourceLabel: props.dataSourceLabel,
     };
 
     this.getComposableTemplates = debounce(this.getComposableTemplatesOriginal, 500, { leading: true });
   }
 
   getComposableTemplates: () => Promise<void> | undefined;
 
-  static getDerivedStateFromProps(nextProps: ComposableTemplatesProps, prevState: ComposableTemplatesState) {
-    if (nextProps.dataSourceId != prevState.dataSourceId || nextProps.dataSourceLabel != prevState.dataSourceLabel) {
-      return {
-        dataSourceId: nextProps.dataSourceId,
-        dataSourceLabel: nextProps.dataSourceLabel,
-      };
-    }
-    return null;
-  }
-
   async componentDidUpdate(prevProps: ComposableTemplatesProps, prevState: ComposableTemplatesState) {
     const prevQuery = this.getQueryState(prevState);
     const currQuery = this.getQueryState(this.state);

public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/CreateComposableTemplate.tsx

@@ -9,14 +9,10 @@ import TemplateDetail from "../TemplateDetail";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { isEqual } from "lodash";
-import queryString from "query-string";
-import { DataSourceMenuContext } from "../../../../services/DataSourceMenuContext";
+import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 
-interface CreateComposableTemplateProps extends RouteComponentProps<{ template?: string; mode?: string }> {
-  dataSourceId: string;
-  dataSourceLabel: string;
-  multiDataSourceEnabled: boolean;
-}
+interface CreateComposableTemplateProps extends RouteComponentProps<{ template?: string; mode?: string }>, DataSourceMenuProperties {}
 
 class CreateComposableTemplate extends Component<CreateComposableTemplateProps> {
   static contextType = CoreServicesContext;
@@ -49,28 +45,14 @@ class CreateComposableTemplate extends Component<CreateComposableTemplateProps>
     this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.COMPOSABLE_TEMPLATES, lastBread]);
   }
 
-  updateDataSourcePropsInUrl() {
-    if (this.props.multiDataSourceEnabled) {
-      this.props.history.replace({
-        ...this.props.location,
-        search: queryString.stringify({
-          dataSourceId: this.props.dataSourceId,
-          dataSourceLabel: this.props.dataSourceLabel,
-        }),
-      });
-    }
-  }
-
   componentDidUpdate(prevProps: Readonly<CreateComposableTemplateProps>): void {
     if (!isEqual(prevProps, this.props)) {
       this.setBreadCrumb();
-      this.updateDataSourcePropsInUrl();
     }
   }
 
   componentDidMount = async (): Promise<void> => {
     this.setBreadCrumb();
-    this.updateDataSourcePropsInUrl();
   };
 
   onCancel = (): void => {
@@ -95,5 +77,6 @@ class CreateComposableTemplate extends Component<CreateComposableTemplateProps>
 
 export default function (props: CreateComposableTemplateProps) {
   const dataSourceMenuProps = useContext(DataSourceMenuContext);
+  useUpdateUrlWithDataSourceProperties();
   return <CreateComposableTemplate {...props} {...dataSourceMenuProps} />;
 }

public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.tsx

@@ -211,6 +211,7 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<IComponentTemplateD
       <DefineTemplate {...subCompontentProps} />
       <EuiSpacer />
       <IndexAlias key={props.dataSourceId} {...subCompontentProps} />
+      {/*{^ Passing dataSourceId as the key to force unmount and remount IndexAlias so as to refresh aliases in case of datasource changes }*/}
       <EuiSpacer />
       <IndexSettings {...subCompontentProps} />
       <EuiSpacer />

public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.tsx

@@ -9,14 +9,10 @@ import DataStreamDetail from "../DataStreamDetail";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { isEqual } from "lodash";
-import queryString from "query-string";
-import { DataSourceMenuContext } from "../../../../services/DataSourceMenuContext";
+import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 
-interface CreateDataStreamProps extends RouteComponentProps<{ dataStream?: string }> {
-  dataSourceId: string;
-  dataSourceLabel: string;
-  multiDataSourceEnabled: boolean;
-}
+interface CreateDataStreamProps extends RouteComponentProps<{ dataStream?: string }>, DataSourceMenuProperties {}
 
 class CreateDataStream extends Component<CreateDataStreamProps> {
   static contextType = CoreServicesContext;
@@ -39,28 +35,14 @@ class CreateDataStream extends Component<CreateDataStreamProps> {
     this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.DATA_STREAMS, lastBread]);
   }
 
-  updateDataSourcePropsInUrl() {
-    if (this.props.multiDataSourceEnabled) {
-      this.props.history.replace({
-        ...this.props.location,
-        search: queryString.stringify({
-          dataSourceId: this.props.dataSourceId,
-          dataSourceLabel: this.props.dataSourceLabel,
-        }),
-      });
-    }
-  }
-
   componentDidUpdate(prevProps: Readonly<CreateDataStreamProps>): void {
     if (!isEqual(prevProps, this.props)) {
       this.setBreadCrumb();
-      this.updateDataSourcePropsInUrl();
     }
   }
 
   componentDidMount = async (): Promise<void> => {
     this.setBreadCrumb();
-    this.updateDataSourcePropsInUrl();
   };
 
   onCancel = (): void => {
@@ -84,5 +66,6 @@ class CreateDataStream extends Component<CreateDataStreamProps> {
 
 export default function (props: CreateDataStreamProps) {
   const dataSourceMenuProps = useContext(DataSourceMenuContext);
+  useUpdateUrlWithDataSourceProperties();
   return <CreateDataStream {...props} {...dataSourceMenuProps} />;
 }

public/pages/CreateIndex/containers/CreateIndex/CreateIndex.tsx

@@ -10,15 +10,12 @@ import IndexForm from "../IndexForm";
 import { BREADCRUMBS, IndicesUpdateMode, ROUTES } from "../../../../utils/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { CommonService } from "../../../../services/index";
-import { DataSourceMenuContext } from "../../../../services/DataSourceMenuContext";
-import queryString from "query-string";
+import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 
-interface CreateIndexProps extends RouteComponentProps<{ index?: string; mode?: IndicesUpdateMode }> {
+interface CreateIndexProps extends RouteComponentProps<{ index?: string; mode?: IndicesUpdateMode }>, DataSourceMenuProperties {
   isEdit?: boolean;
   commonService: CommonService;
-  dataSourceId: string;
-  dataSourceLabel: string;
-  multiDataSourceEnabled: boolean;
 }
 
 export class CreateIndex extends Component<CreateIndexProps> {
@@ -45,19 +42,6 @@ export class CreateIndex extends Component<CreateIndexProps> {
     this.props.history.push(ROUTES.INDICES);
   };
 
-  componentDidUpdate(prevProps: Readonly<CreateIndexProps>) {
-    if (this.props.multiDataSourceEnabled) {
-      if (prevProps.dataSourceId !== this.props.dataSourceId || prevProps.dataSourceLabel !== this.props.dataSourceLabel) {
-        this.props.history.replace({
-          search: queryString.stringify({
-            dataSourceId: this.props.dataSourceId,
-            dataSourceLabel: this.props.dataSourceLabel,
-          }),
-        });
-      }
-    }
-  }
-
   render() {
     const isEdit = this.isEdit;
 
@@ -81,5 +65,6 @@ export class CreateIndex extends Component<CreateIndexProps> {
 
 export default function (props: CreateIndexProps) {
   const dataSourceMenuProperties = useContext(DataSourceMenuContext);
+  useUpdateUrlWithDataSourceProperties();
   return <CreateIndex {...props} {...dataSourceMenuProperties} />;
 }