Add mds support for Integration flyout only for creation

Signed-off-by: Ryan Liang <[email protected]>

src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx

@@ -19,7 +19,12 @@ import {
   EuiCard,
   EuiAccordion,
 } from '@elastic/eui';
-import { ApplicationStart, HttpStart, NotificationsStart } from 'opensearch-dashboards/public';
+import {
+  ApplicationStart,
+  HttpStart,
+  NotificationsStart,
+  SavedObjectsStart,
+} from 'opensearch-dashboards/public';
 import { useLocation, useParams } from 'react-router-dom';
 import { escapeRegExp } from 'lodash';
 import { DATACONNECTIONS_BASE } from '../../../constants';
@@ -46,7 +51,7 @@ import {
   IntegrationInstancesSearchResult,
 } from '../../../../framework/types';
 import { INTEGRATIONS_BASE } from '../../../../framework/utils/shared';
-import { isPluginInstalled } from '../../utils';
+import { isPluginInstalled, getDataSourcesWithFields } from '../../utils';
 
 interface DirectQueryDataConnectionDetailProps {
   featureFlagStatus: boolean;
@@ -55,6 +60,7 @@ interface DirectQueryDataConnectionDetailProps {
   application: ApplicationStart;
   setBreadcrumbs: (breadcrumbs: any) => void;
   useNewUX: boolean;
+  savedObjects: SavedObjectsStart;
 }
 
 export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnectionDetailProps> = ({
@@ -64,6 +70,7 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
   application,
   setBreadcrumbs,
   useNewUX,
+  savedObjects,
 }) => {
   const [observabilityDashboardsExists, setObservabilityDashboardsExists] = useState(false);
   const { dataSourceName } = useParams<{ dataSourceName: string }>();
@@ -117,6 +124,31 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
   const [refreshIntegrationsFlag, setRefreshIntegrationsFlag] = useState(false);
   const refreshInstances = () => setRefreshIntegrationsFlag((prev) => !prev);
 
+  const [clusterTitle, setDataSourceTitle] = useState<string | undefined>();
+  const fetchDataSources = async () => {
+    try {
+      const dataSources = await getDataSourcesWithFields(savedObjects.client, ['id', 'title']);
+
+      // Find the data source title based on the dataSourceMDSId
+      const foundDataSource = dataSources.find((ds: any) => ds.id === dataSourceMDSId);
+      if (foundDataSource) {
+        setDataSourceTitle(foundDataSource.attributes.title);
+      }
+    } catch (error) {
+      notifications.toasts.addDanger({
+        title: 'Failed to fetch data sources',
+        text: error.message,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (featureFlagStatus) {
+      fetchDataSources();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [featureFlagStatus, savedObjects, notifications, dataSourceMDSId]);
+
   useEffect(() => {
     const searchDataSourcePattern = new RegExp(
       `flint_${escapeRegExp(datasourceDetails.name)}_default_.*`
@@ -147,6 +179,7 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
       datasourceName={datasourceDetails.name}
       http={http}
       selectedDataSourceId={dataSourceMDSId || ''}
+      selectedClusterName={clusterTitle}
     />
   ) : null;
 
@@ -403,21 +436,21 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
               />
             ),
           },
-          !featureFlagStatus &&
-            observabilityDashboardsExists && {
-              id: 'installed_integrations',
-              name: 'Installed Integrations',
-              disabled: false,
-              content: (
-                <InstalledIntegrationsTable
-                  integrations={dataSourceIntegrations}
-                  datasourceType={datasourceDetails.connector}
-                  datasourceName={datasourceDetails.name}
-                  refreshInstances={refreshInstances}
-                  http={http}
-                />
-              ),
-            },
+          observabilityDashboardsExists && {
+            id: 'installed_integrations',
+            name: 'Installed Integrations',
+            disabled: false,
+            content: (
+              <InstalledIntegrationsTable
+                integrations={dataSourceIntegrations}
+                datasourceType={datasourceDetails.connector}
+                datasourceName={datasourceDetails.name}
+                refreshInstances={refreshInstances}
+                http={http}
+                selectedDataSourceId={featureFlagStatus ? dataSourceMDSId ?? undefined : undefined}
+              />
+            ),
+          },
         ].filter(Boolean)
       : [];
 

src/plugins/data_source_management/public/components/direct_query_data_sources_components/integrations/installed_integrations_table.tsx

@@ -108,6 +108,7 @@ export const InstallIntegrationFlyout = ({
   datasourceName,
   refreshInstances,
   selectedDataSourceId,
+  selectedClusterName,
   http,
 }: {
   closeFlyout: () => void;
@@ -116,6 +117,7 @@ export const InstallIntegrationFlyout = ({
   refreshInstances: () => void;
   http: HttpStart;
   selectedDataSourceId?: string;
+  selectedClusterName?: string;
 }) => {
   const [availableIntegrations, setAvailableIntegrations] = useState({
     hits: [],
@@ -157,6 +159,7 @@ export const InstallIntegrationFlyout = ({
         />
       ) : (
         <SetupIntegrationForm
+          selectedClusterName={selectedClusterName}
           selectedDataSourceId={selectedDataSourceId}
           integration={installingIntegration}
           unsetIntegration={() => setInstallingIntegration(null)}
@@ -189,12 +192,14 @@ export const InstalledIntegrationsTable = ({
   datasourceName,
   refreshInstances,
   http,
+  selectedDataSourceId,
 }: {
   integrations: IntegrationInstanceResult[];
   datasourceType: DatasourceType;
   datasourceName: string;
   refreshInstances: () => void;
   http: HttpStart;
+  selectedDataSourceId?: string;
 }) => {
   const basePathLink = (link: string): string => {
     if (http.basePath) {

src/plugins/data_source_management/public/components/direct_query_data_sources_components/integrations/setup_integration.tsx

@@ -357,6 +357,7 @@ export function SetupIntegrationForm({
   setIsInstalling,
   http,
   selectedDataSourceId,
+  selectedClusterName,
 }: {
   integration: string;
   renderType: 'page' | 'flyout';
@@ -368,6 +369,7 @@ export function SetupIntegrationForm({
   setIsInstalling?: (isInstalling: boolean, success?: boolean) => void;
   http: HttpStart;
   selectedDataSourceId?: string | undefined;
+  selectedClusterName?: string | undefined;
 }) {
   const [integConfig, setConfig] = useState({
     displayName: `${integration} Integration`,
@@ -432,6 +434,7 @@ export function SetupIntegrationForm({
             unsetIntegration={unsetIntegration}
             setIsInstalling={setIsInstalling}
             dataSourceMDSId={selectedDataSourceId}
+            dataSourceMDSLabel={selectedClusterName}
             http={http}
           />
         </EuiBottomBar>
@@ -464,6 +467,7 @@ export function SetupIntegrationForm({
             unsetIntegration={unsetIntegration}
             setIsInstalling={setIsInstalling}
             dataSourceMDSId={selectedDataSourceId}
+            dataSourceMDSLabel={selectedClusterName}
             http={http}
           />
         </EuiFlyoutFooter>

src/plugins/data_source_management/public/management_app/mount_management_section.tsx

@@ -79,6 +79,7 @@ export async function mountManagementSection(
             setBreadcrumbs={params.setBreadcrumbs}
             application={application}
             useNewUX={useNewUX}
+            savedObjects={savedObjects}
           />
         </Route>
         {canManageDataSource && (