[Multiple Datasource]update no data source text font and button size (#…

…6549) * update no data source text font and button size Signed-off-by: yujin-emma <[email protected]> * update change log and snapshot Signed-off-by: yujin-emma <[email protected]> --------- Signed-off-by: yujin-emma <[email protected]>
opensearch-project · Apr 19, 2024 · bbde563 · bbde563
1 parent fb76ee9
commit bbde563
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 99 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -88,6 +88,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Add default icon in multi-selectable picker ([#6357](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6357))
 - [Multiple Datasource] Add empty state component for no connected data source ([#6499](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6499))
 - [Multiple Datasource] Add popover for empty state and redirect to data source management page([#6514](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6514))
+- [Multiple Datasource] Update empty state font size and footer button size to small ([6549](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6549))
 - [Workspace] Add APIs to support plugin state in request ([#6303](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6303))
 - [Workspace] Filter left nav menu items according to the current workspace ([#6234](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6234))
 - [Multiple Datasource] Add multi data source support to Timeline ([#6385](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6385))

diff --git a/...ce_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap b/...ce_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap
diff --git a/src/plugins/data_source_management/public/components/no_data_source/no_data_source.tsx b/src/plugins/data_source_management/public/components/no_data_source/no_data_source.tsx
@@ -8,12 +8,12 @@ import React, { useState } from 'react';
 import {
   EuiButton,
   EuiButtonEmpty,
-  EuiContextMenuPanel,
-  EuiHorizontalRule,
   EuiPanel,
   EuiPopover,
-  EuiSpacer,
   EuiText,
+  EuiPopoverFooter,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
 import { ApplicationStart } from 'opensearch-dashboards/public';
 import { FormattedMessage } from 'react-intl';
@@ -55,6 +55,7 @@ export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({
       iconSide="right"
       data-test-subj="dataSourceEmptyStateManageDataSourceButton"
       fill={false}
+      size="s"
       onClick={() =>
         application?.navigateToApp('management', {
           path: `opensearch-dashboards/${DSM_APP_ID}`,
@@ -69,7 +70,7 @@ export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({
   );
   const text = (
     <>
-      <EuiText>
+      <EuiText size="s" textAlign="center">
         {
           <FormattedMessage
             id="dataSourcesManagement.dataSourceMenu.noData"
@@ -78,7 +79,7 @@ export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({
         }
       </EuiText>
 
-      <EuiText>
+      <EuiText size="s" textAlign="center">
         {
           <FormattedMessage
             id="dataSourcesManagement.dataSourceMenu.connect"
@@ -100,27 +101,32 @@ export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({
       anchorPosition="downLeft"
       data-test-subj={'dataSourceEmptyStatePopover'}
     >
-      <EuiContextMenuPanel>
-        <EuiPanel className={'dataSourceSelectableOuiPanel'} color="transparent" paddingSize="s">
-          <DataSourceDropDownHeader
-            activeDataSourceCount={activeDataSourceCount}
-            totalDataSourceCount={totalDataSourceCount}
-            application={application}
-          />
-          <EuiHorizontalRule margin="none" />
-          <EuiSpacer size="s" />
-          <EuiPanel
-            hasBorder={false}
-            hasShadow={false}
-            className="dataSourceEmptyStatePanel"
-            data-test-subj="datasourceTableEmptyState"
-          >
-            {text}
-            <EuiSpacer />
-            {redirectButton}
-          </EuiPanel>
+      <DataSourceDropDownHeader
+        activeDataSourceCount={activeDataSourceCount}
+        totalDataSourceCount={totalDataSourceCount}
+        application={application}
+      />
+      <EuiPanel
+        className={'dataSourceSelectableOuiPanel'}
+        hasBorder={false}
+        color="transparent"
+        paddingSize="none"
+        borderRadius="none"
+      >
+        <EuiPanel
+          hasBorder={false}
+          hasShadow={false}
+          className="dataSourceEmptyStatePanel"
+          data-test-subj="datasourceTableEmptyState"
+        >
+          {text}
         </EuiPanel>
-      </EuiContextMenuPanel>
+      </EuiPanel>
+      <EuiPopoverFooter>
+        <EuiFlexGroup justifyContent="spaceAround">
+          <EuiFlexItem>{redirectButton}</EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPopoverFooter>
     </EuiPopover>
   );
 };