[Workspace] update workspace-list-card and home-list-card (#7547)

* update workspace-list-card and home-list-card Signed-off-by: Yang <qianxisy@80a9972c66ff.ant.amazon.com> * new update home_list_card and workspace_list_card,solve some errors Signed-off-by: Qxisylolo <qianxisy@amazon.com> * new update home_list_card and workspace_list_card,solve some errors Signed-off-by: Qxisylolo <qianxisy@amazon.com> * Changeset file for PR #7547 created/updated * new update home_list_card and workspace_list_card,solve some errors Signed-off-by: Qxisylolo <qianxisy@amazon.com> * new update home_list_card and workspace_list_card,solve some errors, and write new testes Signed-off-by: Qxisylolo <qianxisy@amazon.com> * new update home_list_card and workspace_list_card,solve some errors, and write new testes Signed-off-by: Qxisylolo <qianxisy@amazon.com> --------- Signed-off-by: Yang <qianxisy@80a9972c66ff.ant.amazon.com> Signed-off-by: Qxisylolo <qianxisy@amazon.com> Co-authored-by: Yang <qianxisy@80a9972c66ff.ant.amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
opensearch-project · Aug 2, 2024 · 14c71c7 · 14c71c7
1 parent 424e241
commit 14c71c7
Show file tree

Hide file tree

Showing 7 changed files with 366 additions and 244 deletions.
diff --git a/changelogs/fragments/7547.yml b/changelogs/fragments/7547.yml
@@ -0,0 +1,2 @@
+fix:
+- [Workspace] updating workspace-list-card and home-list-card ([#7547](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7547))
diff --git a/src/plugins/home/public/application/components/__snapshots__/home_list_card.test.tsx.snap b/src/plugins/home/public/application/components/__snapshots__/home_list_card.test.tsx.snap
diff --git a/src/plugins/home/public/application/components/home_list_card.test.tsx b/src/plugins/home/public/application/components/home_list_card.test.tsx
@@ -25,3 +25,38 @@ describe('<HomeListCard />', () => {
     expect(baseElement).toMatchSnapshot();
   });
 });
+
+it('should render View All button when allLink is provided', () => {
+  const mockConfig = {
+    title: `What's New`,
+    list: [
+      {
+        label: 'Quickstart guide',
+        href: 'https://opensearch.org/docs/latest/dashboards/quickstart/',
+        target: '_blank',
+        description: 'Get started in minutes with OpenSearch Dashboards',
+      },
+    ],
+    allLink: 'https://opensearch.org/docs/latest/',
+  };
+
+  const { getByText } = render(<HomeListCard config={mockConfig} />);
+  expect(getByText('View all')).toBeInTheDocument();
+});
+
+it('should not show View All button when allLink is not provided', () => {
+  const mockConfig = {
+    title: `What's New`,
+    list: [
+      {
+        label: 'Quickstart guide',
+        href: 'https://opensearch.org/docs/latest/dashboards/quickstart/',
+        target: '_blank',
+        description: 'Get started in minutes with OpenSearch Dashboards',
+      },
+    ],
+  };
+
+  const { queryByText } = render(<HomeListCard config={mockConfig} />);
+  expect(queryByText('View all')).not.toBeInTheDocument();
+});
diff --git a/src/plugins/home/public/application/components/home_list_card.tsx b/src/plugins/home/public/application/components/home_list_card.tsx
@@ -9,10 +9,12 @@ import {
   EuiText,
   EuiLink,
   EuiTitle,
-  EuiPanel,
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
+  EuiPanel,
   EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 
@@ -67,35 +69,49 @@ export const HomeListCard = ({ config }: { config: Config }) => {
   return (
     <>
       <EuiPanel paddingSize="s" hasBorder={false} hasShadow={false}>
-        <EuiTitle>
-          <h4>{config.title}</h4>
-        </EuiTitle>
-        <EuiSpacer />
-        {config.list.length > 0 && (
-          <EuiDescriptionList>
-            {config.list.map((item) => (
-              <>
-                <EuiDescriptionListTitle>
-                  <EuiLink href={item.href} target="_blank">
-                    {item.label}
-                  </EuiLink>
-                </EuiDescriptionListTitle>
-                <EuiDescriptionListDescription>{item.description}</EuiDescriptionListDescription>
-              </>
-            ))}
-          </EuiDescriptionList>
-        )}
-
-        {config.allLink ? (
-          <>
-            <EuiSpacer />
-            <EuiLink href={config.allLink} target="_blank">
-              <EuiText size="s" style={{ display: 'inline' }}>
-                View all
-              </EuiText>
-            </EuiLink>
-          </>
-        ) : null}
+        <EuiFlexGroup
+          direction="column"
+          justifyContent="spaceBetween"
+          style={{ height: '100%' }}
+          gutterSize="none"
+        >
+          <EuiFlexItem grow={false}>
+            <EuiTitle>
+              <h4>{config.title}</h4>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiSpacer />
+          <EuiFlexItem style={{ overflow: 'auto' }} grow={true}>
+            {config.list.length > 0 && (
+              <EuiDescriptionList>
+                {config.list.map((item) => (
+                  <>
+                    <EuiDescriptionListTitle>
+                      <EuiLink href={item.href} target="_blank">
+                        {item.label}
+                      </EuiLink>
+                    </EuiDescriptionListTitle>
+                    <EuiDescriptionListDescription>
+                      {item.description}
+                    </EuiDescriptionListDescription>
+                  </>
+                ))}
+              </EuiDescriptionList>
+            )}
+          </EuiFlexItem>
+          <EuiSpacer />
+          <EuiFlexItem grow={false}>
+            {config.allLink ? (
+              <EuiLink href={config.allLink} target="_blank">
+                <EuiText size="s" className="eui-displayInline">
+                  {i18n.translate('home.list.card.view_all', {
+                    defaultMessage: 'View all',
+                  })}
+                </EuiText>
+              </EuiLink>
+            ) : null}
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiPanel>
     </>
   );