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 aa807e5)

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>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

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:/opensearch-project/OpenSearch-Dashboards/pull/7624))

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;

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<CardEmbeddableInput> {
@@ -37,8 +37,8 @@ export class CardEmbeddable extends Embeddable<CardEmbeddableInput> {
  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
  );

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) => {
  </EuiFlexItem>
  );
  });
+
+ // TODO: we should perhaps display the cards in multiple rows when the actual number of cards exceed the column size
  return (
- <EuiFlexGrid gutterSize="s" columns={4}>
- {cards}
- </EuiFlexGrid>
+ <EuiFlexGroup gutterSize="s">
+ {input.columns ? cards.slice(0, input.columns) : cards}
+ </EuiFlexGroup>
  );
 };
 

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<CardExplicitInput> & { columns?: number };

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,
  };
 

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 =