fix: get start section cards not aligned (#7624)

* 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

Signed-off-by: Yulong Ruan <[email protected]>

* fix ts type

Signed-off-by: Yulong Ruan <[email protected]>

* tweaks types

Signed-off-by: Yulong Ruan <[email protected]>

* add a todo item

Signed-off-by: Yulong Ruan <[email protected]>

* fix license header

Signed-off-by: Yulong Ruan <[email protected]>

* Changeset file for PR #7624 created/updated

---------

Signed-off-by: Yulong Ruan <[email protected]>
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://github.com/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 =