From 60df427862c4f99b51a03ea444ba3d9095f7bf32 Mon Sep 17 00:00:00 2001
From: yuboluo <yubonluo@amazon.com>
Date: Mon, 7 Oct 2024 18:10:45 +0800
Subject: [PATCH] [Fix] Replace segmented button with tabs for OpenSearch
 connections and Direct query connections (#8460)

* replace segmented button with tabs

Signed-off-by: yubonluo <yubonluo@amazon.com>

* Changeset file for PR #8460 created/updated

---------

Signed-off-by: yubonluo <yubonluo@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
---
 changelogs/fragments/8460.yml                 |   2 +
 .../data_source_home_panel.test.tsx.snap      | 140 +++++++++---------
 .../data_source_home_panel.tsx                |  88 ++++++-----
 3 files changed, 116 insertions(+), 114 deletions(-)
 create mode 100644 changelogs/fragments/8460.yml

diff --git a/changelogs/fragments/8460.yml b/changelogs/fragments/8460.yml
new file mode 100644
index 000000000000..6aee531d9ad2
--- /dev/null
+++ b/changelogs/fragments/8460.yml
@@ -0,0 +1,2 @@
+fix:
+- Replace segmented button with tabs for OpenSearch connections and Direct query connections ([#8460](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8460))
\ No newline at end of file
diff --git a/src/plugins/data_source_management/public/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap
index d517ae9bc78b..31c76b3ec5eb 100644
--- a/src/plugins/data_source_management/public/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap
@@ -1,78 +1,80 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataSourceHomePanel renders correctly 1`] = `
-<EuiPanel>
-  <EuiFlexGroup
-    direction="column"
-  >
-    <EuiFlexItem>
-      <EuiPageHeader>
-        <EuiFlexGroup
-          alignItems="center"
-          justifyContent="spaceBetween"
-        >
-          <EuiFlexItem
-            grow={false}
+<Fragment>
+  <EuiPanel>
+    <EuiFlexGroup
+      direction="column"
+    >
+      <EuiFlexItem>
+        <EuiPageHeader>
+          <EuiFlexGroup
+            alignItems="center"
+            justifyContent="spaceBetween"
           >
-            <DataSourceHeader
-              featureFlagStatus={true}
-              history={
-                Object {
-                  "push": [MockFunction],
+            <EuiFlexItem
+              grow={false}
+            >
+              <DataSourceHeader
+                featureFlagStatus={true}
+                history={
+                  Object {
+                    "push": [MockFunction],
+                  }
                 }
-              }
-            />
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-          >
-            <CreateButton
-              dataTestSubj="createDataSourceButton"
-              featureFlagStatus={true}
-              history={
-                Object {
-                  "push": [MockFunction],
+              />
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <CreateButton
+                dataTestSubj="createDataSourceButton"
+                featureFlagStatus={true}
+                history={
+                  Object {
+                    "push": [MockFunction],
+                  }
                 }
-              }
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPageHeader>
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiSpacer
-        size="s"
-      />
-      <EuiTabs
-        size="s"
-      >
-        <EuiTab
-          isSelected={true}
-          key="manageOpensearchDataSources"
-          onClick={[Function]}
-        >
-          OpenSearch connections
-        </EuiTab>
-        <EuiTab
-          isSelected={false}
-          key="manageDirectQueryDataSources"
-          onClick={[Function]}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPageHeader>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiTabs
+          size="s"
         >
-          Direct query connections
-        </EuiTab>
-      </EuiTabs>
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <DataSourceTableWithRouter
-        history={
-          Object {
-            "push": [MockFunction],
+          <EuiTab
+            isSelected={true}
+            key="manageOpensearchDataSources"
+            onClick={[Function]}
+          >
+            OpenSearch connections
+          </EuiTab>
+          <EuiTab
+            isSelected={false}
+            key="manageDirectQueryDataSources"
+            onClick={[Function]}
+          >
+            Direct query connections
+          </EuiTab>
+        </EuiTabs>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <DataSourceTableWithRouter
+          history={
+            Object {
+              "push": [MockFunction],
+            }
           }
-        }
-        location={Object {}}
-        match={Object {}}
-      />
-    </EuiFlexItem>
-  </EuiFlexGroup>
-</EuiPanel>
+          location={Object {}}
+          match={Object {}}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiPanel>
+</Fragment>
 `;
diff --git a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx
index f77cd05056a1..a13616d91525 100644
--- a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx
@@ -136,15 +136,9 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
   };
 
   return (
-    <EuiPanel>
+    <>
       {useNewUX && (
         <>
-          {featureFlagStatus && (
-            <HeaderControl
-              setMountPoint={application.setAppCenterControls}
-              controls={connectionTypeButton}
-            />
-          )}
           {canManageDataSource && (
             <HeaderControl
               setMountPoint={application.setAppRightControls}
@@ -169,52 +163,56 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
                 : description,
             ]}
           />
+          <EuiTabs size="s">{renderTabs()}</EuiTabs>
+          <EuiSpacer size="m" />
         </>
       )}
-      <EuiFlexGroup direction="column">
-        {!useNewUX && (
-          <>
-            <EuiFlexItem>
-              <EuiPageHeader>
-                <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-                  <EuiFlexItem grow={false}>
-                    <DataSourceHeader
-                      history={props.history}
-                      featureFlagStatus={featureFlagStatus}
-                    />
-                  </EuiFlexItem>
-                  {canManageDataSource ? (
+      <EuiPanel>
+        <EuiFlexGroup direction="column">
+          {!useNewUX && (
+            <>
+              <EuiFlexItem>
+                <EuiPageHeader>
+                  <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
                     <EuiFlexItem grow={false}>
-                      <CreateButton
+                      <DataSourceHeader
                         history={props.history}
                         featureFlagStatus={featureFlagStatus}
-                        dataTestSubj="createDataSourceButton"
                       />
                     </EuiFlexItem>
-                  ) : null}
-                </EuiFlexGroup>
-              </EuiPageHeader>
-            </EuiFlexItem>
-            {featureFlagStatus && (
-              <EuiFlexItem>
-                <EuiSpacer size="s" />
-                <EuiTabs size="s">{renderTabs()}</EuiTabs>
+                    {canManageDataSource ? (
+                      <EuiFlexItem grow={false}>
+                        <CreateButton
+                          history={props.history}
+                          featureFlagStatus={featureFlagStatus}
+                          dataTestSubj="createDataSourceButton"
+                        />
+                      </EuiFlexItem>
+                    ) : null}
+                  </EuiFlexGroup>
+                </EuiPageHeader>
               </EuiFlexItem>
-            )}
-          </>
-        )}
-        <EuiFlexItem>
-          {selectedTabId === 'manageOpensearchDataSources' && featureFlagStatus && (
-            <DataSourceTableWithRouter {...props} />
-          )}
-          {(!featureFlagStatus || selectedTabId === 'manageDirectQueryDataSources') && (
-            <ManageDirectQueryDataConnectionsTableWithRouter
-              featureFlagStatus={featureFlagStatus}
-              {...props}
-            />
+              {featureFlagStatus && (
+                <EuiFlexItem>
+                  <EuiSpacer size="s" />
+                  <EuiTabs size="s">{renderTabs()}</EuiTabs>
+                </EuiFlexItem>
+              )}
+            </>
           )}
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiPanel>
+          <EuiFlexItem>
+            {selectedTabId === 'manageOpensearchDataSources' && featureFlagStatus && (
+              <DataSourceTableWithRouter {...props} />
+            )}
+            {(!featureFlagStatus || selectedTabId === 'manageDirectQueryDataSources') && (
+              <ManageDirectQueryDataConnectionsTableWithRouter
+                featureFlagStatus={featureFlagStatus}
+                {...props}
+              />
+            )}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+    </>
   );
 };