Skip to content

Commit

Permalink
tweaks the new homepage styles (#7875) (#7883)
Browse files Browse the repository at this point in the history
* tweaks homepage styles



* Add key to React.Fragment



---------


(cherry picked from commit 5e0ce2b)

Signed-off-by: Yulong Ruan <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
1 parent 5b809af commit 8c779c1
Show file tree
Hide file tree
Showing 10 changed files with 44 additions and 38 deletions.
33 changes: 16 additions & 17 deletions src/plugins/content_management/public/components/page_render.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ test('it should create card section input', () => {
id: 'section1',
title: '',
hidePanelTitles: true,
hidePanelActions: true,
viewMode: 'view',
panels: {
content1: {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -189,6 +191,7 @@ test('it should create dashboard input', async () => {
content3: {
explicitInput: {
disabledActions: ['togglePanel'],
hidePanelActions: true,
id: 'content3',
render: renderFn,
},
Expand Down Expand Up @@ -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,
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down Expand Up @@ -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>
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/home/public/application/home_render.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
EuiPanel,
EuiFlexGrid,
EuiFlexGroup,
EuiTitle,
EuiFilterGroup,
EuiFilterButton,
EuiComboBox,
Expand All @@ -21,6 +20,7 @@ import {
EuiToolTip,
EuiSpacer,
EuiText,
EuiTitle,
} from '@elastic/eui';
import { i18n } from '@osd/i18n';
import {
Expand Down Expand Up @@ -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}>
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand Down

0 comments on commit 8c779c1

Please sign in to comment.