From 0e6ad2f88072e9129f651d62deaad5c6d41b23cf Mon Sep 17 00:00:00 2001
From: yubonluo <yubonluo@amazon.com>
Date: Mon, 26 Aug 2024 16:15:18 +0800
Subject: [PATCH] optimize the code

Signed-off-by: yubonluo <yubonluo@amazon.com>
---
 .../opensearch_connections_table.tsx          | 69 +++++--------------
 .../select_data_source_panel.tsx              | 39 ++++++++++-
 2 files changed, 56 insertions(+), 52 deletions(-)

diff --git a/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx b/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx
index 43a75ee5cc79..8f3fb6e4431a 100644
--- a/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx
@@ -20,35 +20,26 @@ import {
   EuiButtonEmpty,
   EuiPopoverTitle,
   EuiSmallButton,
+  EuiLink,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-import { CoreStart, WorkspaceObject } from '../../../../../core/public';
-import { DataSource, DataSourceConnection, DataSourceConnectionType } from '../../../common/types';
-import { WorkspaceClient } from '../../workspace_client';
-import { convertPermissionSettingsToPermissions, useWorkspaceFormContext } from '../workspace_form';
-import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { DataSourceConnection, DataSourceConnectionType } from '../../../common/types';
 import PrometheusLogo from '../../assets/prometheus_logo.svg';
 import S3Logo from '../../assets/s3_logo.svg';
 
 interface OpenSearchConnectionTableProps {
   isDashboardAdmin: boolean;
-  currentWorkspace: WorkspaceObject;
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
   connectionType: string;
   dataSourceConnections: DataSourceConnection[];
+  handleUnassignDataSources: (dataSources: DataSourceConnection[]) => Promise<void>;
 }
 
 export const OpenSearchConnectionTable = ({
   isDashboardAdmin,
-  currentWorkspace,
-  setIsLoading,
   connectionType,
   dataSourceConnections,
+  handleUnassignDataSources,
 }: OpenSearchConnectionTableProps) => {
-  const {
-    services: { notifications, workspaceClient },
-  } = useOpenSearchDashboards<{ CoreStart: CoreStart; workspaceClient: WorkspaceClient }>();
-  const { formData, setSelectedDataSources } = useWorkspaceFormContext();
   const [selectedItems, setSelectedItems] = useState<DataSourceConnection[]>([]);
   const [modalVisible, setModalVisible] = useState(false);
   const [popoversState, setPopoversState] = useState<Record<string, boolean>>({});
@@ -110,43 +101,6 @@ export const OpenSearchConnectionTable = ({
     ],
   };
 
-  const handleUnassignDataSources = async (dataSources: DataSourceConnection[]) => {
-    try {
-      setIsLoading(true);
-      setModalVisible(false);
-      const { permissionSettings, selectedDataSources, useCase, ...attributes } = formData;
-      const savedDataSources = (selectedDataSources ?? [])?.filter(
-        ({ id }: DataSource) => !dataSources.some((item) => item.id === id)
-      );
-
-      const result = await workspaceClient.update(currentWorkspace.id, attributes, {
-        dataSources: savedDataSources.map(({ id }: DataSource) => id),
-        permissions: convertPermissionSettingsToPermissions(permissionSettings),
-      });
-      if (result?.success) {
-        notifications?.toasts.addSuccess({
-          title: i18n.translate('workspace.detail.dataSources.unassign.success', {
-            defaultMessage: 'Remove associated OpenSearch connections successfully',
-          }),
-        });
-        setSelectedDataSources(savedDataSources);
-      } else {
-        throw new Error(
-          result?.error ? result?.error : 'Remove associated OpenSearch connections failed'
-        );
-      }
-    } catch (error) {
-      notifications?.toasts.addDanger({
-        title: i18n.translate('workspace.detail.dataSources.unassign.failed', {
-          defaultMessage: 'Failed to remove associated OpenSearch connections',
-        }),
-        text: error instanceof Error ? error.message : JSON.stringify(error),
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
   const directQueryConnectionIcon = (connector: string | undefined) => {
     switch (connector) {
       case 'S3GLUE':
@@ -171,6 +125,20 @@ export const OpenSearchConnectionTable = ({
         defaultMessage: 'Title',
       }),
       truncateText: true,
+      render: (name: string, record) => {
+        const origin = window.location.origin;
+        let url: string;
+        if (record.connectionType === DataSourceConnectionType.OpenSearchConnection) {
+          url = `${origin}/app/dataSources_core/${record.id}`;
+        } else {
+          url = `${origin}/app/dataSources_core/manage/${name}?dataSourceMDSId=${record.parentId}`;
+        }
+        return (
+          <EuiLink href={url} className="eui-textTruncate">
+            {name}
+          </EuiLink>
+        );
+      },
     },
     {
       field: 'type',
@@ -298,6 +266,7 @@ export const OpenSearchConnectionTable = ({
             setSelectedItems([]);
           }}
           onConfirm={() => {
+            setModalVisible(false);
             handleUnassignDataSources(selectedItems);
           }}
           cancelButtonText={i18n.translate('workspace.detail.dataSources.modal.cancelButton', {
diff --git a/src/plugins/workspace/public/components/workspace_detail/select_data_source_panel.tsx b/src/plugins/workspace/public/components/workspace_detail/select_data_source_panel.tsx
index 7575e252cacb..ae6741b36668 100644
--- a/src/plugins/workspace/public/components/workspace_detail/select_data_source_panel.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/select_data_source_panel.tsx
@@ -139,6 +139,42 @@ export const SelectDataSourceDetailPanel = ({
     }
   };
 
+  const handleUnassignDataSources = async (dataSources: DataSourceConnection[]) => {
+    try {
+      setIsLoading(true);
+      const { permissionSettings, selectedDataSources, useCase, ...attributes } = formData;
+      const savedDataSources = (selectedDataSources ?? [])?.filter(
+        ({ id }: DataSource) => !dataSources.some((item) => item.id === id)
+      );
+
+      const result = await workspaceClient.update(currentWorkspace.id, attributes, {
+        dataSources: savedDataSources.map(({ id }: DataSource) => id),
+        permissions: convertPermissionSettingsToPermissions(permissionSettings),
+      });
+      if (result?.success) {
+        notifications?.toasts.addSuccess({
+          title: i18n.translate('workspace.detail.dataSources.unassign.success', {
+            defaultMessage: 'Remove associated OpenSearch connections successfully',
+          }),
+        });
+        setSelectedDataSources(savedDataSources);
+      } else {
+        throw new Error(
+          result?.error ? result?.error : 'Remove associated OpenSearch connections failed'
+        );
+      }
+    } catch (error) {
+      notifications?.toasts.addDanger({
+        title: i18n.translate('workspace.detail.dataSources.unassign.failed', {
+          defaultMessage: 'Failed to remove associated OpenSearch connections',
+        }),
+        text: error instanceof Error ? error.message : JSON.stringify(error),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const associationButton = (
     <EuiSmallButton
       onClick={() => setIsVisible(true)}
@@ -209,10 +245,9 @@ export const SelectDataSourceDetailPanel = ({
     return (
       <OpenSearchConnectionTable
         isDashboardAdmin={isDashboardAdmin}
-        currentWorkspace={currentWorkspace}
-        setIsLoading={setIsLoading}
         connectionType={toggleIdSelected}
         dataSourceConnections={dataSourceConnections}
+        handleUnassignDataSources={handleUnassignDataSources}
       />
     );
   };