Integrate latest DatasourceMenu props into index-management MDS support

opensearch_dashboards.json

@@ -3,8 +3,8 @@
   "version": "3.0.0.0",
   "opensearchDashboardsVersion": "3.0.0",
   "configPath": ["opensearch_index_management"],
-  "requiredPlugins": ["navigation", "opensearchDashboardsReact"],
-  "optionalPlugins": ["managementOverview", "dataSource", "dataSourceManagement"],
+  "requiredPlugins": ["navigation", "opensearchDashboardsReact", "managementOverview"],
+  "optionalPlugins": ["dataSource", "dataSourceManagement"],
   "server": true,
   "ui": true
 }

public/components/MDSEnabledComponent/MDSEnabledComponent.tsx

@@ -1,42 +1,38 @@
 import React, { useContext, useEffect } from "react";
-import { DataSourceMenuContext, DataSourceMenuProperties } from "../../services/DataSourceMenuContext";
+import { DataSourceMenuContext, DataSourceMenuProperties, DataSourceProperties } from "../../services/DataSourceMenuContext";
 import { useHistory } from "react-router";
 import queryString from "query-string";
+import { getDataSource } from "src/plugins/data_source/server/client/configure_client_utils";
 
-export default class MDSEnabledComponent<
-  Props extends DataSourceMenuProperties,
-  State extends DataSourceMenuProperties
-> extends React.Component<Props, State> {
+export default class MDSEnabledComponent<Props extends DataSourceProperties, State extends DataSourceProperties> 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>(
+  static getDerivedStateFromProps<Props extends DataSourceProperties, State extends DataSourceProperties>(
     nextProps: Props,
     prevState: State
   ) {
     // static members cannot reference class type parameters
-    if (
-      nextProps.multiDataSourceEnabled &&
-      (nextProps.dataSourceId !== prevState.dataSourceId || nextProps.dataSourceLabel !== prevState.dataSourceLabel)
-    ) {
+    if (nextProps.multiDataSourceEnabled && nextProps.dataSourceId !== prevState.dataSourceId) {
       return {
         dataSourceId: nextProps.dataSourceId,
-        dataSourceLabel: nextProps.dataSourceLabel,
       };
     }
     return null;
   }
 }
 
 export function useUpdateUrlWithDataSourceProperties() {
-  const dataSourceMenuProps = useContext(DataSourceMenuContext);
-  const { dataSourceId, dataSourceLabel, multiDataSourceEnabled } = dataSourceMenuProps;
+  const dataSourceProps = getDataSourcePropsFromContext(useContext(DataSourceMenuContext));
+  const { dataSourceId, multiDataSourceEnabled } = dataSourceProps;
   const history = useHistory();
   const currentSearch = history.location.search;
   const currentQuery = queryString.parse(currentSearch);
@@ -46,9 +42,15 @@ export function useUpdateUrlWithDataSourceProperties() {
         search: queryString.stringify({
           ...currentQuery,
           dataSourceId,
-          dataSourceLabel,
         }),
       });
     }
-  }, [dataSourceId, dataSourceLabel, multiDataSourceEnabled]);
+  }, [dataSourceId, multiDataSourceEnabled]);
+}
+
+export function getDataSourcePropsFromContext<Props extends DataSourceProperties>(context: DataSourceMenuProperties): Props {
+  return {
+    dataSourceId: context.dataSource[0].id,
+    multiDataSourceEnabled: context.multiDataSourceEnabled,
+  } as Props;
 }

public/index_management_app.tsx

@@ -11,14 +11,14 @@ import { DarkModeContext } from "./components/DarkMode";
 import Main from "./pages/Main";
 import { CoreServicesContext } from "./components/core_services";
 import "./app.scss";
-import { AppPluginStartDependencies } from "./types";
 import { DataSourceManagementPluginSetup } from "../../../src/plugins/data_source_management/public";
+import { DataSourcePluginSetup } from "../../../src/plugins/data_source/public";
 
 export function renderApp(
   coreStart: CoreStart,
-  pluginStartDependencies: AppPluginStartDependencies,
   params: AppMountParameters,
   landingPage: string,
+  dataSource: DataSourcePluginSetup,
   dataSourceManagement: DataSourceManagementPluginSetup
 ) {
   const isDarkMode = coreStart.uiSettings.get("theme:darkMode") || false;
@@ -33,7 +33,7 @@ export function renderApp(
                 {...props}
                 landingPage={landingPage}
                 setActionMenu={params.setHeaderActionMenu}
-                multiDataSourceEnabled={!!pluginStartDependencies.dataSource}
+                multiDataSourceEnabled={dataSource.dataSourceEnabled}
                 dataSourceManagement={dataSourceManagement}
               />
             </CoreServicesContext.Provider>

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

@@ -36,14 +36,14 @@ import IndexControls, { SearchControlsProps } from "../../components/IndexContro
 import CreateAlias from "../CreateAlias";
 import AliasesActions from "../AliasActions";
 import { CoreStart } from "opensearch-dashboards/public";
-import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
-import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
+import { DataSourceMenuContext, DataSourceProperties } from "../../../../services/DataSourceMenuContext";
+import MDSEnabledComponent, { getDataSourcePropsFromContext } from "../../../../components/MDSEnabledComponent";
 
-interface AliasesProps extends RouteComponentProps, DataSourceMenuProperties {
+interface AliasesProps extends RouteComponentProps, DataSourceProperties {
   commonService: CommonService;
 }
 
-interface AliasesState extends DataSourceMenuProperties {
+interface AliasesState extends DataSourceProperties {
   totalAliases: number;
   from: string;
   size: string;
@@ -483,8 +483,8 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
   }
 }
 
-export default function AliasContainer(props: Omit<AliasesProps, "commonService" | keyof DataSourceMenuProperties>) {
+export default function AliasContainer(props: Omit<AliasesProps, "commonService" | keyof DataSourceProperties>) {
   const context = useContext(ServicesContext);
-  const dataSourceMenuProps = useContext(DataSourceMenuContext);
-  return <Aliases {...props} commonService={context?.commonService as CommonService} {...dataSourceMenuProps} />;
+  const dataSourceProps = getDataSourcePropsFromContext(useContext(DataSourceMenuContext));
+  return <Aliases {...props} commonService={context?.commonService as CommonService} {...dataSourceProps} />;
 }

public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx

@@ -14,10 +14,10 @@ import { ManagedIndexItem } from "../../../../../models/interfaces";
 import { getErrorMessage } from "../../../../utils/helpers";
 import { PolicyOption } from "../../models/interfaces";
 import { CoreServicesContext } from "../../../../components/core_services";
-import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
-import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { DataSourceMenuContext, DataSourceProperties } from "../../../../services/DataSourceMenuContext";
+import { getDataSourcePropsFromContext, useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 
-interface ChangePolicyProps extends RouteComponentProps, DataSourceMenuProperties {
+interface ChangePolicyProps extends RouteComponentProps, DataSourceProperties {
   managedIndexService: ManagedIndexService;
   indexService: IndexService;
 }
@@ -207,8 +207,8 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
   }
 }
 
-export default function (props: Omit<ChangePolicyProps, keyof DataSourceMenuProperties>) {
-  const dataSourceMenuProperties = useContext(DataSourceMenuContext);
+export default function (props: Omit<ChangePolicyProps, keyof DataSourceProperties>) {
+  const dataSourceProperties = getDataSourcePropsFromContext(useContext(DataSourceMenuContext));
   useUpdateUrlWithDataSourceProperties();
-  return <ChangePolicy {...props} {...dataSourceMenuProperties} />;
+  return <ChangePolicy {...props} {...dataSourceProperties} />;
 }

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

@@ -9,14 +9,14 @@ import { RouteComponentProps } from "react-router-dom";
 import IndexForm from "../IndexForm";
 import { BREADCRUMBS, IndicesUpdateMode, ROUTES } from "../../../../utils/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
-import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
-import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { DataSourceMenuContext, DataSourceProperties } from "../../../../services/DataSourceMenuContext";
+import { getDataSourcePropsFromContext, useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 
 interface CreateIndexPropsBase extends RouteComponentProps<{ index?: string; mode?: IndicesUpdateMode }> {
   isEdit?: boolean;
 }
 
-interface CreateIndexProps extends CreateIndexPropsBase, DataSourceMenuProperties {}
+interface CreateIndexProps extends CreateIndexPropsBase, DataSourceProperties {}
 
 export class CreateIndex extends Component<CreateIndexProps> {
   static contextType = CoreServicesContext;
@@ -64,7 +64,7 @@ export class CreateIndex extends Component<CreateIndexProps> {
 }
 
 export default function (props: CreateIndexPropsBase) {
-  const dataSourceMenuProperties = useContext(DataSourceMenuContext);
+  const dataSourceProperties = getDataSourcePropsFromContext(useContext(DataSourceMenuContext));
   useUpdateUrlWithDataSourceProperties();
-  return <CreateIndex {...props} {...dataSourceMenuProperties} />;
+  return <CreateIndex {...props} {...dataSourceProperties} />;
 }

public/pages/CreateIndex/containers/IndexForm/index.tsx

@@ -17,7 +17,7 @@ import { transformArrayToObject, transformObjectToArray } from "../../../../comp
 import { ServerResponse } from "../../../../../server/models/types";
 import { BrowserServices } from "../../../../models/interfaces";
 import { ServicesContext } from "../../../../services";
-import { DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import { DataSourceProperties } from "../../../../services/DataSourceMenuContext";
 
 export const getAliasActionsByDiffArray = (
   oldAliases: string[],
@@ -46,9 +46,7 @@ export const getAliasActionsByDiffArray = (
   }, [] as IAliasAction[]);
 };
 
-export interface IndexFormProps
-  extends Pick<IndexDetailProps, "readonly" | "sourceIndices">,
-    Pick<DataSourceMenuProperties, "dataSourceId"> {
+export interface IndexFormProps extends Pick<IndexDetailProps, "readonly" | "sourceIndices">, Pick<DataSourceProperties, "dataSourceId"> {
   index?: string;
   value?: Partial<IndexItemRemote>;
   mode?: IndicesUpdateMode;

public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx

@@ -15,10 +15,10 @@ import { PolicyService } from "../../../../services";
 import { BREADCRUMBS, DOCUMENTATION_URL, ROUTES } from "../../../../utils/constants";
 import { getErrorMessage } from "../../../../utils/helpers";
 import { CoreServicesContext } from "../../../../components/core_services";
-import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
-import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { DataSourceMenuContext, DataSourceProperties } from "../../../../services/DataSourceMenuContext";
+import { getDataSourcePropsFromContext, useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 
-interface CreatePolicyProps extends RouteComponentProps, DataSourceMenuProperties {
+interface CreatePolicyProps extends RouteComponentProps, DataSourceProperties {
   isEdit: boolean;
   policyService: PolicyService;
 }
@@ -267,8 +267,8 @@ export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState
   }
 }
 
-export default function (props: Omit<CreatePolicyProps, keyof DataSourceMenuProperties>) {
-  const dataSourceMenuProperties = useContext(DataSourceMenuContext);
+export default function (props: Omit<CreatePolicyProps, keyof DataSourceProperties>) {
+  const dataSourceProperties = getDataSourcePropsFromContext(useContext(DataSourceMenuContext));
   useUpdateUrlWithDataSourceProperties();
-  return <CreatePolicy {...props} {...dataSourceMenuProperties} />;
+  return <CreatePolicy {...props} {...dataSourceProperties} />;
 }

public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx

@@ -12,10 +12,9 @@ import RollupIndices from "../../components/RollupIndices";
 import CreateRollupSteps from "../../components/CreateRollupSteps";
 import IndexService from "../../../../services/IndexService";
 import { IndexItem } from "../../../../../models/interfaces";
-import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
-import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { DataSourceProperties } from "../../../../services/DataSourceMenuContext";
 
-interface CreateRollupProps extends RouteComponentProps, DataSourceMenuProperties {
+interface CreateRollupProps extends RouteComponentProps, DataSourceProperties {
   rollupService: RollupService;
   indexService: IndexService;
   rollupId: string;

public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx

@@ -21,15 +21,10 @@ import CreateRollupStep3 from "../CreateRollupStep3";
 import CreateRollupStep4 from "../CreateRollupStep4";
 import { compareFieldItem, parseFieldOptions } from "../../utils/helpers";
 import { CoreServicesContext } from "../../../../components/core_services";
-import {
-  DataSourceMenuContext,
-  DataSourceMenuProperties,
-  DataSourceMenuReadOnlyContext,
-  DataSourceMenuReadOnlyProperties,
-} from "../../../../services/DataSourceMenuContext";
-import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
-
-interface CreateRollupFormProps extends RouteComponentProps, DataSourceMenuProperties, DataSourceMenuReadOnlyProperties {
+import { DataSourceMenuContext, DataSourceMenuReadOnlyProperties, DataSourceProperties } from "../../../../services/DataSourceMenuContext";
+import { getDataSourcePropsFromContext, useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+
+interface CreateRollupFormProps extends RouteComponentProps, DataSourceProperties, DataSourceMenuReadOnlyProperties {
   rollupService: RollupService;
   indexService: IndexService;
 }
@@ -717,8 +712,8 @@ export class CreateRollupForm extends Component<CreateRollupFormProps, CreateRol
   }
 }
 
-export default function (props: Omit<CreateRollupFormProps, keyof DataSourceMenuProperties>) {
-  const dataSourceMenuProperties = useContext(DataSourceMenuContext);
+export default function (props: Omit<CreateRollupFormProps, keyof DataSourceProperties>) {
+  const dataSourceProperties = getDataSourcePropsFromContext(useContext(DataSourceMenuContext));
   useUpdateUrlWithDataSourceProperties();
-  return <CreateRollupForm {...props} {...dataSourceMenuProperties} />;
+  return <CreateRollupForm {...props} {...dataSourceProperties} />;
 }

public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx

@@ -27,15 +27,10 @@ import SpecifyScheduleStep from "../SpecifyScheduleStep";
 import ReviewAndCreateStep from "../ReviewAndCreateStep";
 import { compareFieldItem, createdTransformToastMessage, isGroupBy, parseFieldOptions } from "../../utils/helpers";
 import { CoreServicesContext } from "../../../../components/core_services";
-import {
-  DataSourceMenuContext,
-  DataSourceMenuProperties,
-  DataSourceMenuReadOnlyContext,
-  DataSourceMenuReadOnlyProperties,
-} from "../../../../services/DataSourceMenuContext";
-import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
-
-interface CreateTransformFormProps extends RouteComponentProps, DataSourceMenuProperties, DataSourceMenuReadOnlyProperties {
+import { DataSourceMenuContext, DataSourceMenuReadOnlyProperties, DataSourceProperties } from "../../../../services/DataSourceMenuContext";
+import { getDataSourcePropsFromContext, useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+
+interface CreateTransformFormProps extends RouteComponentProps, DataSourceProperties, DataSourceMenuReadOnlyProperties {
   rollupService: RollupService;
   transformService: TransformService;
   indexService: IndexService;
@@ -686,8 +681,8 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
   }
 }
 
-export default function (props: Omit<CreateTransformFormProps, keyof DataSourceMenuProperties>) {
-  const dataSourceMenuProperties = useContext(DataSourceMenuContext);
+export default function (props: Omit<CreateTransformFormProps, keyof DataSourceProperties>) {
+  const dataSourceProperties = getDataSourcePropsFromContext(useContext(DataSourceMenuContext));
   useUpdateUrlWithDataSourceProperties();
-  return <CreateTransformForm {...props} {...dataSourceMenuProperties} />;
+  return <CreateTransformForm {...props} {...dataSourceProperties} />;
 }

public/pages/Indices/containers/Indices/Indices.tsx

@@ -37,15 +37,15 @@ import { SECURITY_EXCEPTION_PREFIX } from "../../../../../server/utils/constants
 import IndicesActions from "../IndicesActions";
 import { destroyListener, EVENT_MAP, listenEvent } from "../../../../JobHandler";
 import "./index.scss";
-import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
-import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
+import { DataSourceMenuContext, DataSourceProperties } from "../../../../services/DataSourceMenuContext";
+import MDSEnabledComponent, { getDataSourcePropsFromContext } from "../../../../components/MDSEnabledComponent";
 
-interface IndicesProps extends RouteComponentProps, DataSourceMenuProperties {
+interface IndicesProps extends RouteComponentProps, DataSourceProperties {
   indexService: IndexService;
   commonService: CommonService;
 }
 
-interface IndicesState extends DataSourceMenuProperties {
+interface IndicesState extends DataSourceProperties {
   totalIndices: number;
   from: number;
   size: number;
@@ -131,10 +131,7 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
     try {
       const { indexService, history } = this.props;
       const queryObject = this.getQueryObjectFromState(this.state);
-      const queryParamsString = queryString.stringify({
-        ...queryObject,
-        ...(this.state.multiDataSourceEnabled ? { dataSourceLabel: this.state.dataSourceLabel } : {}),
-      });
+      const queryParamsString = queryString.stringify(queryObject);
       history.replace({ ...this.props.location, search: queryParamsString });
 
       const getIndicesResponse = await indexService.getIndices({
@@ -322,7 +319,7 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
   }
 }
 
-export default function (props: Omit<IndicesProps, keyof DataSourceMenuProperties>) {
-  const dataSourceMenuProps = useContext(DataSourceMenuContext);
-  return <Indices {...props} {...dataSourceMenuProps} />;
+export default function (props: Omit<IndicesProps, keyof DataSourceProperties>) {
+  const dataSourceProps = getDataSourcePropsFromContext(useContext(DataSourceMenuContext));
+  return <Indices {...props} {...dataSourceProps} />;
 }