[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 <yujin.emma.work@gmail.com> * update change log and snapshot Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> --------- Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> (cherry picked from commit bbde563) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md
opensearch-project · Apr 19, 2024 · 84a95d7 · 84a95d7
1 parent 536d48a
commit 84a95d7
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 99 deletions.
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>
   );
 };