tweaks the new homepage styles (opensearch-project#7875)

* tweaks homepage styles Signed-off-by: Yulong Ruan <ruanyl@amazon.com> * Add key to React.Fragment Signed-off-by: Yulong Ruan <ruanyl@amazon.com> --------- Signed-off-by: Yulong Ruan <ruanyl@amazon.com>
danieldong51 · Aug 28, 2024 · 5e0ce2b · 5e0ce2b
1 parent 930e244
commit 5e0ce2b
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 38 deletions.
diff --git a/src/plugins/content_management/public/components/page_render.tsx b/src/plugins/content_management/public/components/page_render.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import { useObservable } from 'react-use';
 import { SavedObjectsClientContract } from 'opensearch-dashboards/public';
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexItem, EuiPage, EuiSpacer } from '@elastic/eui';
 import { Page } from '../services';
 import { SectionRender } from './section_render';
 import { EmbeddableStart } from '../../../embeddable/public';
@@ -22,22 +22,21 @@ export const PageRender = ({ page, embeddable, savedObjectsClient }: Props) => {
   const sections = useObservable(page.getSections$()) || [];
 
   return (
-    <EuiFlexGroup
-      direction="column"
-      className="contentManagement-page"
-      style={{ margin: '10px 20px' }}
-    >
-      {sections.map((section) => (
-        <EuiFlexItem key={section.id}>
-          <SectionRender
-            key={section.id}
-            embeddable={embeddable}
-            section={section}
-            savedObjectsClient={savedObjectsClient}
-            contents$={page.getContents$(section.id)}
-          />
-        </EuiFlexItem>
+    <EuiPage direction="column" className="contentManagement-page">
+      {sections.map((section, i) => (
+        <React.Fragment key={section.id}>
+          <EuiFlexItem>
+            <SectionRender
+              key={section.id}
+              embeddable={embeddable}
+              section={section}
+              savedObjectsClient={savedObjectsClient}
+              contents$={page.getContents$(section.id)}
+            />
+          </EuiFlexItem>
+          {i < sections.length - 1 && <EuiSpacer size="m" />}
+        </React.Fragment>
       ))}
-    </EuiFlexGroup>
+    </EuiPage>
   );
 };
diff --git a/src/plugins/content_management/public/components/section_input.test.ts b/src/plugins/content_management/public/components/section_input.test.ts
@@ -21,6 +21,7 @@ test('it should create card section input', () => {
     id: 'section1',
     title: '',
     hidePanelTitles: true,
+    hidePanelActions: true,
     viewMode: 'view',
     panels: {
       content1: {
@@ -55,6 +56,7 @@ test('it should create card section input with explicit input specified', () =>
     id: 'section1',
     title: 'new title',
     hidePanelTitles: true,
+    hidePanelActions: true,
     viewMode: 'view',
     columns: 4,
     panels: {
@@ -189,6 +191,7 @@ test('it should create dashboard input', async () => {
     content3: {
       explicitInput: {
         disabledActions: ['togglePanel'],
+        hidePanelActions: true,
         id: 'content3',
         render: renderFn,
       },
@@ -257,6 +260,7 @@ test('it should create dashboard input without the content which throws error',
     content3: {
       explicitInput: {
         disabledActions: ['togglePanel'],
+        hidePanelActions: true,
         id: 'content3',
         render: renderFn,
       },

diff --git a/src/plugins/content_management/public/components/section_input.ts b/src/plugins/content_management/public/components/section_input.ts
@@ -31,6 +31,7 @@ export const createCardInput = (
     id: section.id,
     title: section.title ?? '',
     hidePanelTitles: true,
+    hidePanelActions: true,
     viewMode: ViewMode.VIEW,
     columns: section.columns,
     wrap: section.wrap,
@@ -175,6 +176,8 @@ export const createDashboardInput = async (
       if (content.kind === 'custom') {
         panelConfig.type = CUSTOM_CONTENT_EMBEDDABLE;
         panelConfig.explicitInput.render = content.render;
+        // Currently, for custom content, there is no case that requires panel actions, so hide it
+        panelConfig.explicitInput.hidePanelActions = true;
       }
 
       panels[content.id] = panelConfig;

diff --git a/src/plugins/content_management/public/components/section_render.tsx b/src/plugins/content_management/public/components/section_render.tsx
@@ -43,7 +43,7 @@ const DashboardSection = ({ section, embeddable, contents$, savedObjectsClient }
     // const input = createDashboardSection(section, contents ?? []);
     return (
       // to make dashboard section align with others add margin left and right -8px
-      <div style={{ margin: '0 -8px' }}>
+      <div style={{ margin: '-8px -8px 0 -8px' }}>
         <EmbeddableRenderer factory={factory} input={input} />
       </div>
     );
@@ -82,7 +82,7 @@ const CardSection = ({ section, embeddable, contents$ }: Props) => {
         ) : null}
         {isCardVisible && (
           <>
-            <EuiSpacer size="m" /> <EmbeddableRenderer factory={factory} input={input} />
+            <EuiSpacer size="s" /> <EmbeddableRenderer factory={factory} input={input} />
           </>
         )}
       </EuiPanel>

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.tsx b/src/plugins/home/public/application/components/home_list_card.tsx
@@ -73,16 +73,16 @@ interface Config {
 export const HomeListCard = ({ config }: { config: Config }) => {
   return (
     <>
-      <EuiPanel paddingSize="s" hasBorder={false} hasShadow={false}>
+      <EuiPanel hasBorder={false} hasShadow={false}>
         <EuiFlexGroup
           direction="column"
           justifyContent="spaceBetween"
           style={{ height: '100%' }}
           gutterSize="none"
         >
           <EuiFlexItem grow={false}>
-            <EuiTitle>
-              <h4>{config.title}</h4>
+            <EuiTitle size="s">
+              <h2>{config.title}</h2>
             </EuiTitle>
           </EuiFlexItem>
           <EuiSpacer />

diff --git a/src/plugins/home/public/application/home_render.tsx b/src/plugins/home/public/application/home_render.tsx
@@ -50,7 +50,7 @@ export const setupHome = (contentManagement: ContentManagementPluginSetup) => {
       {
         id: SECTIONS.GET_STARTED,
         order: 1000,
-        title: 'Define your path forward with OpenSearch',
+        title: 'Get started with OpenSearch’s powerful features',
         kind: 'card',
       },
     ],

diff --git a/src/plugins/saved_objects_management/public/management_section/recent_work.tsx b/src/plugins/saved_objects_management/public/management_section/recent_work.tsx
@@ -11,7 +11,6 @@ import {
   EuiPanel,
   EuiFlexGrid,
   EuiFlexGroup,
-  EuiTitle,
   EuiFilterGroup,
   EuiFilterButton,
   EuiComboBox,
@@ -21,6 +20,7 @@ import {
   EuiToolTip,
   EuiSpacer,
   EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import {
@@ -167,12 +167,12 @@ export const RecentWork = (props: { core: CoreStart; workspaceEnabled?: boolean
         <EuiFlexItem>
           <EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="xs">
             <EuiFlexItem grow={false}>
-              <EuiTitle>
-                <h3>
+              <EuiTitle size="s">
+                <h2>
                   {i18n.translate('savedObjectsManagement.recentWorkSection.title', {
                     defaultMessage: 'Assets',
                   })}
-                </h3>
+                </h2>
               </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>

diff --git a/.../workspace/public/components/service_card/__snapshots__/workspace_list_card.test.tsx.snap b/.../workspace/public/components/service_card/__snapshots__/workspace_list_card.test.tsx.snap
diff --git a/src/plugins/workspace/public/components/service_card/workspace_list_card.tsx b/src/plugins/workspace/public/components/service_card/workspace_list_card.tsx
@@ -152,7 +152,7 @@ export const WorkspaceListCard = (props: WorkspaceListCardProps) => {
   }
 
   return (
-    <EuiPanel paddingSize="s" hasBorder={false} hasShadow={false}>
+    <EuiPanel hasBorder={false} hasShadow={false}>
       <EuiFlexGroup
         direction="column"
         justifyContent="spaceBetween"
@@ -164,8 +164,8 @@ export const WorkspaceListCard = (props: WorkspaceListCardProps) => {
             <EuiFlexItem grow={4}>
               <EuiFlexGroup gutterSize="xs" alignItems="center">
                 <EuiFlexItem>
-                  <EuiTitle>
-                    <h4>Workspaces</h4>
+                  <EuiTitle size="s">
+                    <h2>Workspaces</h2>
                   </EuiTitle>
                 </EuiFlexItem>
                 <EuiFlexItem>