[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:/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>
+ </>
  );
 };