[Fix] Replace segmented button with tabs for OpenSearch connections a…

…nd Direct query connections (opensearch-project#8460) * replace segmented button with tabs Signed-off-by: yubonluo <[email protected]> * Changeset file for PR opensearch-project#8460 created/updated --------- Signed-off-by: yubonluo <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
LDrago27 · Oct 7, 2024 · 60df427 · 60df427
1 parent 2f90def
commit 60df427
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 114 deletions.
diff --git a/changelogs/fragments/8460.yml 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))
diff --git a/...blic/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap b/...blic/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap
diff --git a/...ata_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx b/...ata_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>
+    </>
   );
 };