From 9e704eb4ab0d34a8fdbb4db63d4ce22012515467 Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Fri, 9 Aug 2024 11:31:50 +0800 Subject: [PATCH] fix: get start section cards not aligned (#7624) (#7658) * fix: get start section cards not aligned The column size was hard coded to 4 previously, not changed so that it can be configured, this addressed the issue when there are more than 4 cards, cards will be displayed in multiple rows * fix ts type * tweaks types * add a todo item * fix license header * Changeset file for PR #7624 created/updated --------- (cherry picked from commit aa807e55f94e44aa87faab28fcf38b227299d46f) Signed-off-by: Yulong Ruan Signed-off-by: github-actions[bot] Co-authored-by: github-actions[bot] Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> --- changelogs/fragments/7624.yml | 2 ++ .../components/card_container/card_container.tsx | 10 ++-------- .../card_container/card_embeddable.tsx | 8 ++++---- .../components/card_container/card_list.tsx | 13 ++++++++----- .../public/components/card_container/types.ts | 16 ++++++++++++++++ .../public/components/section_input.ts | 3 ++- .../public/services/content_management/types.ts | 1 + 7 files changed, 35 insertions(+), 18 deletions(-) create mode 100644 changelogs/fragments/7624.yml create mode 100644 src/plugins/content_management/public/components/card_container/types.ts diff --git a/changelogs/fragments/7624.yml b/changelogs/fragments/7624.yml new file mode 100644 index 000000000000..cc72302bd5ca --- /dev/null +++ b/changelogs/fragments/7624.yml @@ -0,0 +1,2 @@ +fix: +- [contentManagement] display cards by specifying a column size or display all cards in one row ([#7624](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7624)) \ No newline at end of file diff --git a/src/plugins/content_management/public/components/card_container/card_container.tsx b/src/plugins/content_management/public/components/card_container/card_container.tsx index f3784f1f5fc4..34aeb14c9b99 100644 --- a/src/plugins/content_management/public/components/card_container/card_container.tsx +++ b/src/plugins/content_management/public/components/card_container/card_container.tsx @@ -5,18 +5,12 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { Container, ContainerInput, EmbeddableStart } from '../../../../embeddable/public'; +import { Container, EmbeddableStart } from '../../../../embeddable/public'; import { CardList } from './card_list'; +import { CardContainerInput } from './types'; export const CARD_CONTAINER = 'CARD_CONTAINER'; -export type CardContainerInput = ContainerInput<{ - description: string; - onClick?: () => void; - getIcon?: () => React.ReactElement; - getFooter?: () => React.ReactElement; -}>; - export class CardContainer extends Container<{}, CardContainerInput> { public readonly type = CARD_CONTAINER; private node?: HTMLElement; diff --git a/src/plugins/content_management/public/components/card_container/card_embeddable.tsx b/src/plugins/content_management/public/components/card_container/card_embeddable.tsx index 0e7b6b2c82e5..588ce1681957 100644 --- a/src/plugins/content_management/public/components/card_container/card_embeddable.tsx +++ b/src/plugins/content_management/public/components/card_container/card_embeddable.tsx @@ -13,8 +13,8 @@ export const CARD_EMBEDDABLE = 'card_embeddable'; export type CardEmbeddableInput = EmbeddableInput & { description: string; onClick?: () => void; - getIcon: () => React.ReactElement; - getFooter: () => React.ReactElement; + getIcon?: () => React.ReactElement; + getFooter?: () => React.ReactElement; }; export class CardEmbeddable extends Embeddable { @@ -37,8 +37,8 @@ export class CardEmbeddable extends Embeddable { description={this.input.description} display="plain" onClick={this.input.onClick} - icon={this.input?.getIcon()} - footer={this.input?.getFooter()} + icon={this.input?.getIcon?.()} + footer={this.input?.getFooter?.()} />, node ); diff --git a/src/plugins/content_management/public/components/card_container/card_list.tsx b/src/plugins/content_management/public/components/card_container/card_list.tsx index b9619d39e0d1..871c6451a8cb 100644 --- a/src/plugins/content_management/public/components/card_container/card_list.tsx +++ b/src/plugins/content_management/public/components/card_container/card_list.tsx @@ -4,7 +4,7 @@ */ import React from 'react'; -import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { IContainer, @@ -13,10 +13,11 @@ import { ContainerOutput, EmbeddableStart, } from '../../../../embeddable/public'; +import { CardContainerInput } from './types'; interface Props { embeddable: IContainer; - input: ContainerInput; + input: CardContainerInput; embeddableServices: EmbeddableStart; } @@ -29,10 +30,12 @@ const CardListInner = ({ embeddable, input, embeddableServices }: Props) => { ); }); + + // TODO: we should perhaps display the cards in multiple rows when the actual number of cards exceed the column size return ( - - {cards} - + + {input.columns ? cards.slice(0, input.columns) : cards} + ); }; diff --git a/src/plugins/content_management/public/components/card_container/types.ts b/src/plugins/content_management/public/components/card_container/types.ts new file mode 100644 index 000000000000..0358dfecfc11 --- /dev/null +++ b/src/plugins/content_management/public/components/card_container/types.ts @@ -0,0 +1,16 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { ContainerInput } from '../../../../embeddable/public'; + +export interface CardExplicitInput { + title: string; + description: string; + onClick?: () => void; + getIcon?: () => React.ReactElement; + getFooter?: () => React.ReactElement; +} + +export type CardContainerInput = ContainerInput & { columns?: number }; diff --git a/src/plugins/content_management/public/components/section_input.ts b/src/plugins/content_management/public/components/section_input.ts index 00bb5b0683c7..c6a68724716f 100644 --- a/src/plugins/content_management/public/components/section_input.ts +++ b/src/plugins/content_management/public/components/section_input.ts @@ -10,8 +10,8 @@ import { Content, Section } from '../services'; import { ViewMode } from '../../../embeddable/public'; import { DashboardContainerInput, SavedObjectDashboard } from '../../../dashboard/public'; import { CUSTOM_CONTENT_EMBEDDABLE } from './custom_content_embeddable'; -import { CardContainerInput } from './card_container/card_container'; import { CARD_EMBEDDABLE } from './card_container/card_embeddable'; +import { CardContainerInput } from './card_container/types'; const DASHBOARD_GRID_COLUMN_COUNT = 48; @@ -30,6 +30,7 @@ export const createCardInput = ( title: section.title ?? '', hidePanelTitles: true, viewMode: ViewMode.VIEW, + columns: section.columns, panels, }; diff --git a/src/plugins/content_management/public/services/content_management/types.ts b/src/plugins/content_management/public/services/content_management/types.ts index 55da19f26b87..7f49732fc2c5 100644 --- a/src/plugins/content_management/public/services/content_management/types.ts +++ b/src/plugins/content_management/public/services/content_management/types.ts @@ -31,6 +31,7 @@ export type Section = id: string; order: number; title?: string; + columns?: number; }; export type Content =