From bbde5634570dac911122b77d3a38311df5a43a65 Mon Sep 17 00:00:00 2001
From: Yu Jin <112784385+yujin-emma@users.noreply.github.com>
Date: Thu, 18 Apr 2024 20:18:55 -0700
Subject: [PATCH] [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>
---
 CHANGELOG.md                                  |   1 +
 .../no_data_source.test.tsx.snap              | 158 ++++++++++--------
 .../no_data_source/no_data_source.tsx         |  56 ++++---
 3 files changed, 116 insertions(+), 99 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 200a8e653248..23578335bbc7 100644
--- 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/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap b/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap
index 28c48cd26ffb..6807943e0897 100644
--- a/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap
@@ -26,51 +26,56 @@ exports[`NoDataSource should render correctly with the provided totalDataSourceC
   ownFocus={true}
   panelPaddingSize="none"
 >
-  <EuiContextMenuPanel
-    hasFocus={true}
-    items={Array []}
+  <DataSourceDropDownHeader
+    totalDataSourceCount={0}
+  />
+  <EuiPanel
+    borderRadius="none"
+    className="dataSourceSelectableOuiPanel"
+    color="transparent"
+    hasBorder={false}
+    paddingSize="none"
   >
     <EuiPanel
-      className="dataSourceSelectableOuiPanel"
-      color="transparent"
-      paddingSize="s"
+      className="dataSourceEmptyStatePanel"
+      data-test-subj="datasourceTableEmptyState"
+      hasBorder={false}
+      hasShadow={false}
     >
-      <DataSourceDropDownHeader
-        totalDataSourceCount={0}
-      />
-      <EuiHorizontalRule
-        margin="none"
-      />
-      <EuiSpacer
+      <EuiText
         size="s"
-      />
-      <EuiPanel
-        className="dataSourceEmptyStatePanel"
-        data-test-subj="datasourceTableEmptyState"
-        hasBorder={false}
-        hasShadow={false}
+        textAlign="center"
       >
-        <EuiText>
-          <FormattedMessage
-            defaultMessage="There is no data sources to display."
-            id="dataSourcesManagement.dataSourceMenu.noData"
-            values={Object {}}
-          />
-        </EuiText>
-        <EuiText>
-          <FormattedMessage
-            defaultMessage="Connect data source to get started"
-            id="dataSourcesManagement.dataSourceMenu.connect"
-            values={Object {}}
-          />
-        </EuiText>
-        <EuiSpacer />
+        <FormattedMessage
+          defaultMessage="There is no data sources to display."
+          id="dataSourcesManagement.dataSourceMenu.noData"
+          values={Object {}}
+        />
+      </EuiText>
+      <EuiText
+        size="s"
+        textAlign="center"
+      >
+        <FormattedMessage
+          defaultMessage="Connect data source to get started"
+          id="dataSourcesManagement.dataSourceMenu.connect"
+          values={Object {}}
+        />
+      </EuiText>
+    </EuiPanel>
+  </EuiPanel>
+  <EuiPopoverFooter>
+    <EuiFlexGroup
+      justifyContent="spaceAround"
+    >
+      <EuiFlexItem>
         <EuiButton
           data-test-subj="dataSourceEmptyStateManageDataSourceButton"
           fill={false}
           iconSide="right"
           iconType="popout"
           onClick={[Function]}
+          size="s"
         >
           <FormattedMessage
             defaultMessage="Manage data sources"
@@ -78,9 +83,9 @@ exports[`NoDataSource should render correctly with the provided totalDataSourceC
             values={Object {}}
           />
         </EuiButton>
-      </EuiPanel>
-    </EuiPanel>
-  </EuiContextMenuPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiPopoverFooter>
 </EuiPopover>
 `;
 
@@ -110,51 +115,56 @@ exports[`NoDataSource should render normally 1`] = `
   ownFocus={true}
   panelPaddingSize="none"
 >
-  <EuiContextMenuPanel
-    hasFocus={true}
-    items={Array []}
+  <DataSourceDropDownHeader
+    totalDataSourceCount={0}
+  />
+  <EuiPanel
+    borderRadius="none"
+    className="dataSourceSelectableOuiPanel"
+    color="transparent"
+    hasBorder={false}
+    paddingSize="none"
   >
     <EuiPanel
-      className="dataSourceSelectableOuiPanel"
-      color="transparent"
-      paddingSize="s"
+      className="dataSourceEmptyStatePanel"
+      data-test-subj="datasourceTableEmptyState"
+      hasBorder={false}
+      hasShadow={false}
     >
-      <DataSourceDropDownHeader
-        totalDataSourceCount={0}
-      />
-      <EuiHorizontalRule
-        margin="none"
-      />
-      <EuiSpacer
+      <EuiText
         size="s"
-      />
-      <EuiPanel
-        className="dataSourceEmptyStatePanel"
-        data-test-subj="datasourceTableEmptyState"
-        hasBorder={false}
-        hasShadow={false}
+        textAlign="center"
       >
-        <EuiText>
-          <FormattedMessage
-            defaultMessage="There is no data sources to display."
-            id="dataSourcesManagement.dataSourceMenu.noData"
-            values={Object {}}
-          />
-        </EuiText>
-        <EuiText>
-          <FormattedMessage
-            defaultMessage="Connect data source to get started"
-            id="dataSourcesManagement.dataSourceMenu.connect"
-            values={Object {}}
-          />
-        </EuiText>
-        <EuiSpacer />
+        <FormattedMessage
+          defaultMessage="There is no data sources to display."
+          id="dataSourcesManagement.dataSourceMenu.noData"
+          values={Object {}}
+        />
+      </EuiText>
+      <EuiText
+        size="s"
+        textAlign="center"
+      >
+        <FormattedMessage
+          defaultMessage="Connect data source to get started"
+          id="dataSourcesManagement.dataSourceMenu.connect"
+          values={Object {}}
+        />
+      </EuiText>
+    </EuiPanel>
+  </EuiPanel>
+  <EuiPopoverFooter>
+    <EuiFlexGroup
+      justifyContent="spaceAround"
+    >
+      <EuiFlexItem>
         <EuiButton
           data-test-subj="dataSourceEmptyStateManageDataSourceButton"
           fill={false}
           iconSide="right"
           iconType="popout"
           onClick={[Function]}
+          size="s"
         >
           <FormattedMessage
             defaultMessage="Manage data sources"
@@ -162,8 +172,8 @@ exports[`NoDataSource should render normally 1`] = `
             values={Object {}}
           />
         </EuiButton>
-      </EuiPanel>
-    </EuiPanel>
-  </EuiContextMenuPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiPopoverFooter>
 </EuiPopover>
 `;
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
index 36d5b5befcab..7d2142a31765 100644
--- 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>
   );
 };