feat(*): vrack-service ga (#11920)

Addition of new components on manager-components
Vrack-services GA scope features
Vrack-services refactoring to match defined folder structure
ref: MANAGER-13968

Signed-off-by: Quentin Pavy <[email protected]>
Co-authored-by: Nicolas Pierre-charles <[email protected]>
Co-authored-by: David Arsène <[email protected]>
Co-authored-by: CDS Translator Agent <[email protected]>

Author: 4 people

packages/manager-components/jest.setup.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TextEncoder, TextDecoder } from 'util';
 import { Blob, File } from 'buffer';
+
 import 'element-internals-polyfill';
 
 Object.assign(global, {

packages/manager-components/src/components/content/dashboard-tile/dashboard-tile.component.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import {
+  OsdsDivider,
+  OsdsText,
+  OsdsTile,
+} from '@ovhcloud/ods-components/react';
+import { TileBlock } from './tile-block.component';
+
+export type DashboardTileBlockItem = {
+  id: string;
+  label: string;
+  value: React.ReactNode;
+};
+
+export type DashboardTileProps = {
+  title?: string;
+  items: DashboardTileBlockItem[];
+};
+
+export const DashboardTile: React.FC<DashboardTileProps> = ({
+  title,
+  items,
+}) => (
+  <OsdsTile className="w-full h-full flex-col" inline rounded>
+    <div className="flex flex-col w-full">
+      {title && (
+        <>
+          <OsdsText
+            size={ODS_TEXT_SIZE._400}
+            level={ODS_TEXT_LEVEL.heading}
+            color={ODS_THEME_COLOR_INTENT.text}
+          >
+            {title}
+          </OsdsText>
+          <OsdsDivider separator />
+        </>
+      )}
+      {items.map(({ id, label, value }) => (
+        <TileBlock key={id} label={label}>
+          {value}
+        </TileBlock>
+      ))}
+    </div>
+  </OsdsTile>
+);

packages/manager-components/src/components/content/dashboard-tile/dashboard-tile.spec.tsx

@@ -0,0 +1,38 @@
+import { waitFor, screen } from '@testing-library/react';
+import { render } from '../../../utils/test.provider';
+import { DashboardTile } from './dashboard-tile.component';
+import '@testing-library/jest-dom';
+
+const testItem = {
+  id: 'id',
+  label: 'label',
+  value: 'value',
+};
+
+describe('Dashboard Tile component', () => {
+  it('renders correctly', async () => {
+    render(<DashboardTile title="Title" items={[testItem]} />);
+    await waitFor(() => {
+      expect(screen.getByText('Title')).toBeInTheDocument();
+      expect(screen.getByText(testItem.value)).toBeInTheDocument();
+      expect(screen.getByText(testItem.label)).toBeInTheDocument();
+      expect(screen.queryByText(testItem.id)).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders correctly without items', async () => {
+    render(<DashboardTile title="Title" items={[]} />);
+    await waitFor(() => {
+      expect(screen.getByText('Title')).toBeInTheDocument();
+    });
+  });
+
+  it('renders correctly without title', async () => {
+    render(<DashboardTile items={[testItem]} />);
+    await waitFor(() => {
+      expect(screen.getByText(testItem.value)).toBeInTheDocument();
+      expect(screen.getByText(testItem.label)).toBeInTheDocument();
+      expect(screen.queryByText(testItem.id)).not.toBeInTheDocument();
+    });
+  });
+});

packages/manager-components/src/components/content/dashboard-tile/dashboard-tile.stories.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { OsdsSkeleton } from '@ovhcloud/ods-components/react';
+import {
+  DashboardTile,
+  DashboardTileBlockItem,
+} from './dashboard-tile.component';
+import ActionMenu from '../../navigation/menus/action/action.component';
+
+const actionItems = [
+  {
+    id: 1,
+    href: 'https://ovhcloud.com',
+    label: 'Action 1',
+  },
+  {
+    id: 2,
+    onClick: () => window.open('https://ovhcloud.com', '_blank', 'noopener'),
+    label: 'Action 2',
+  },
+];
+
+const items: DashboardTileBlockItem[] = [
+  {
+    id: 'component-example',
+    label: 'Component Example',
+    value: <span>Test</span>,
+  },
+  {
+    id: 'loading-component-example',
+    label: 'Loading',
+    value: <OsdsSkeleton />,
+  },
+  {
+    id: 'text-directly',
+    label: 'Text Directly',
+    value: 'Text example',
+  },
+  {
+    id: 'menu-example',
+    label: 'Menu Example',
+    value: (
+      <div className="flex">
+        <div className="mr-auto">Test value</div>
+        <ActionMenu isCompact items={actionItems} />
+      </div>
+    ),
+  },
+];
+
+export const WithTitle = () => <DashboardTile title="Title" items={items} />;
+
+export const NoTitle = () => <DashboardTile items={items} />;
+
+const meta: Meta = {
+  title: 'Content/Dashboard Tile',
+  component: DashboardTile,
+  argTypes: {},
+  args: {
+    title: 'Titre',
+    items,
+  },
+};
+
+export default meta;

…ck-services/src/components/TileBlock.tsx …/dashboard-tile/tile-block.component.tsxpackages/manager/apps/vrack-services/src/components/TileBlock.tsx renamed to packages/manager-components/src/components/content/dashboard-tile/tile-block.component.tsx packages/manager/apps/vrack-services/src/components/TileBlock.tsx renamed to packages/manager-components/src/components/content/dashboard-tile/tile-block.component.tsx

@@ -1,2 +1,4 @@
 export * from './headers/headers.component';
 export * from './price/price.component';
+export * from './dashboard-tile/dashboard-tile.component';
+export * from './dashboard-tile/tile-block.component';

packages/manager-components/src/components/content/index.ts

@@ -77,6 +77,8 @@ export interface DatagridProps<T> {
   manualPagination?: boolean;
   /** If provided, this function will be called with an updaterFn when state.sorting changes. */
   /** setSorting?: OnChangeFn<SortingState>; */
+  /** label displayed if there is no item in the datagrid */
+  noResultLabel?: string;
 }
 
 export const Datagrid = <T,>({
@@ -93,6 +95,7 @@ export const Datagrid = <T,>({
   onFetchNextPage,
   manualSorting = true,
   manualPagination = true,
+  noResultLabel,
 }: DatagridProps<T>) => {
   const { t } = useTranslation('datagrid');
   const pageCount = pagination
@@ -233,7 +236,7 @@ export const Datagrid = <T,>({
                 >
                   <td className="text-center" colSpan={columns.length}>
                     <DataGridTextCell>
-                      {t('common_pagination_no_results')}
+                      {noResultLabel ?? t('common_pagination_no_results')}
                     </DataGridTextCell>
                   </td>
                 </tr>

packages/manager-components/src/components/datagrid/datagrid.component.tsx

@@ -6,6 +6,7 @@ import {
   DatagridColumn,
   PaginationState,
 } from './datagrid.component';
+import DataGridTextCell from './text-cell.component';
 
 jest.mock('react-i18next', () => ({
   useTranslation: () => {
@@ -26,18 +27,25 @@ const sampleColumns = [
     },
     label: 'Name',
   },
+  {
+    id: 'another-column',
+    label: 'test',
+    cell: () => <DataGridTextCell />,
+  },
 ];
 
 const DatagridTest = ({
   columns,
   items,
   pageIndex,
   className,
+  noResultLabel,
 }: {
   columns: DatagridColumn<string>[];
   items: string[];
   pageIndex: number;
   className?: string;
+  noResultLabel?: string;
 }) => {
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex,
@@ -55,6 +63,7 @@ const DatagridTest = ({
       onPaginationChange={setPagination}
       onSortChange={() => {}}
       className={className || ''}
+      noResultLabel={noResultLabel}
     />
   );
 };
@@ -171,6 +180,18 @@ describe('Paginated datagrid component', () => {
     expect(container.querySelectorAll('thead tr').length).toBe(1);
     expect(container.querySelectorAll('tbody tr').length).toBe(1);
   });
+
+  it('should display a custom message if there are no items and we pass a custom message', async () => {
+    render(
+      <DatagridTest
+        columns={sampleColumns}
+        items={[]}
+        pageIndex={0}
+        noResultLabel="Test no result"
+      />,
+    );
+    expect(screen.queryByText('Test no result')).not.toBeNull();
+  });
 });
 
 it('should disable overflow of table', async () => {

packages/manager-components/src/components/datagrid/datagrid.spec.tsx

@@ -1,20 +1,28 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { OsdsText } from '@ovhcloud/ods-components/react';
 import {
   ODS_THEME_COLOR_INTENT,
   ODS_THEME_TYPOGRAPHY_LEVEL,
   ODS_THEME_TYPOGRAPHY_SIZE,
 } from '@ovhcloud/ods-common-theming';
+import { useTranslation } from 'react-i18next';
 
 /** Simple datagrid cell text formatter applying ODS style */
-export function DataGridTextCell({ children }: { children: ReactNode }) {
+export function DataGridTextCell({
+  children,
+}: React.PropsWithChildren<unknown>) {
+  const { t } = useTranslation('datagrid');
   return (
     <OsdsText
       level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-      size={ODS_THEME_TYPOGRAPHY_SIZE._400}
+      size={
+        children
+          ? ODS_THEME_TYPOGRAPHY_SIZE._600
+          : ODS_THEME_TYPOGRAPHY_SIZE._300
+      }
       color={ODS_THEME_COLOR_INTENT.text}
     >
-      {children}
+      {children ?? t('common_empty_text_cell')}
     </OsdsText>
   );
 }

packages/manager-components/src/components/datagrid/text-cell.component.tsx

@@ -4,5 +4,6 @@
   "common_pagination_no_results": "Keine Ergebnisse",
   "common_clipboard_success_label": "Kopiert!",
   "common_clipboard_error_label": "Fehler beim Kopieren.",
-  "common_pagination_load_more": "Mehr laden"
+  "common_pagination_load_more": "Mehr laden",
+  "common_empty_text_cell": "Keine"
 }