Feat/key management service (#11443)

ref: MANAGER-13791 Signed-off-by: Vincent BONMARCHAND <vincent.bonmarchand.ext@corp.ovh.com> Co-authored-by: Alex Boungnaseng <alex.boungnaseng.ext@corp.ovh.com> Co-authored-by: David Arsène <david.arsene.ext@ovhcloud.com> Co-authored-by: Romain Jamet <romain.jamet.ext@corp.ovh.com> Co-authored-by: Lionel Bueno <lionel.bueno.ext@ovhcloud.com> Co-authored-by: Romain Jamet <romain.jamet.ext@corp.ovh.com> Co-authored-by: CDS Translator Agent <opensource@ovh.net>
ovh · Jun 21, 2024 · f3a8243 · f3a8243
1 parent c38a63a
commit f3a8243
Show file tree

Hide file tree

Showing 199 changed files with 3,609 additions and 479 deletions.
diff --git a/packages/manager-components/src/components/datagrid/clipboard-cell.component.tsx b/packages/manager-components/src/components/datagrid/clipboard-cell.component.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { OsdsClipboard, OsdsText } from '@ovhcloud/ods-components/react';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { useTranslation } from 'react-i18next';
+
+type DataGridClipboardCellProps = {
+  text: string;
+};
+
+/** Simple datagrid cell clipboard text formatter applying ODS style */
+export function DataGridClipboardCell({
+  text,
+}: Readonly<DataGridClipboardCellProps>) {
+  const { t } = useTranslation('datagrid');
+  return (
+    <OsdsClipboard value={text}>
+      <span slot="success-message">
+        <OsdsText color={ODS_THEME_COLOR_INTENT.success}>
+          {t('common_clipboard_success_label')}
+        </OsdsText>
+      </span>
+      <span slot="error-message">
+        <OsdsText color={ODS_THEME_COLOR_INTENT.error}>
+          {t('common_clipboard_error_label')}
+        </OsdsText>
+      </span>
+    </OsdsClipboard>
+  );
+}
+
+export default DataGridClipboardCell;
diff --git a/packages/manager-components/src/components/datagrid/datagrid.component.tsx b/packages/manager-components/src/components/datagrid/datagrid.component.tsx
@@ -61,9 +61,11 @@ export interface DatagridProps<T> {
   onSortChange?: (sorting: ColumnSort) => void;
   /** option to add custom CSS class */
   className?: string;
+  /** option to adjust content on the left */
+  contentAlignLeft?: boolean;
 }
 
-export const Datagrid = <T extends unknown>({
+export const Datagrid = <T,>({
   columns,
   items,
   totalItems,
@@ -72,6 +74,7 @@ export const Datagrid = <T extends unknown>({
   className,
   onPaginationChange,
   onSortChange,
+  contentAlignLeft,
 }: DatagridProps<T>) => {
   const { t } = useTranslation('datagrid');
   const pageCount = pagination
@@ -120,7 +123,9 @@ export const Datagrid = <T extends unknown>({
                 {headerGroup.headers.map((header) => (
                   <th
                     key={header.id}
-                    className="text-center h-11 whitespace-nowrap"
+                    className={`${
+                      contentAlignLeft ? 'text-left pl-4' : 'text-center'
+                    } h-11 whitespace-nowrap `}
                   >
                     {header.isPlaceholder ? null : (
                       <div
@@ -179,16 +184,14 @@ export const Datagrid = <T extends unknown>({
             {table.getRowModel().rows.map((row) => (
               <tr
                 key={row.id}
-                className="text-center border-solid border-[1px] h-[3.25rem] border-[var(--ods-color-blue-200)]"
+                className={`border-solid border-[1px] h-[3.25rem] border-[var(--ods-color-blue-200)]`}
               >
                 {row.getVisibleCells().map((cell) => (
-                  <td key={cell.id}>
-                    <>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext(),
-                      )}
-                    </>
+                  <td
+                    key={cell.id}
+                    className={`${contentAlignLeft ? 'pl-4' : 'text-center'}`}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </td>
                 ))}
               </tr>

diff --git a/packages/manager-components/src/components/datagrid/translations/Messages_de_DE.json b/packages/manager-components/src/components/datagrid/translations/Messages_de_DE.json
@@ -1,5 +1,7 @@
 {
   "common_pagination_of": "von",
   "common_pagination_results": "Ergebnissen",
-  "common_pagination_no_results": "Keine Ergebnisse"
+  "common_pagination_no_results": "Keine Ergebnisse",
+  "common_clipboard_success_label": "Kopiert!",
+  "common_clipboard_error_label": "Fehler beim Kopieren."
 }
diff --git a/packages/manager-components/src/components/datagrid/translations/Messages_en_GB.json b/packages/manager-components/src/components/datagrid/translations/Messages_en_GB.json
@@ -1,5 +1,7 @@
 {
   "common_pagination_of": "of",
   "common_pagination_results": "results",
-  "common_pagination_no_results": "No result"
+  "common_pagination_no_results": "No result",
+  "common_clipboard_success_label": "Copied!",
+  "common_clipboard_error_label": "Copy error."
 }
diff --git a/packages/manager-components/src/components/datagrid/translations/Messages_es_ES.json b/packages/manager-components/src/components/datagrid/translations/Messages_es_ES.json
@@ -1,5 +1,7 @@
 {
   "common_pagination_of": "de",
   "common_pagination_results": "resultados",
-  "common_pagination_no_results": "No hay resultados"
+  "common_pagination_no_results": "No hay resultados.",
+  "common_clipboard_success_label": "¡Copiado!",
+  "common_clipboard_error_label": "Error de copia."
 }
diff --git a/packages/manager-components/src/components/datagrid/translations/Messages_fr_CA.json b/packages/manager-components/src/components/datagrid/translations/Messages_fr_CA.json
@@ -1,5 +1,7 @@
 {
   "common_pagination_of": "sur",
   "common_pagination_results": "résultats",
-  "common_pagination_no_results": "Aucun résultat"
+  "common_pagination_no_results": "Aucun résultat",
+  "common_clipboard_success_label": "Copié !",
+  "common_clipboard_error_label": "Erreur de copie."
 }
diff --git a/packages/manager-components/src/components/datagrid/translations/Messages_fr_FR.json b/packages/manager-components/src/components/datagrid/translations/Messages_fr_FR.json
@@ -1,5 +1,7 @@
 {
   "common_pagination_of": "sur",
   "common_pagination_results": "résultats",
-  "common_pagination_no_results": "Aucun résultat"
+  "common_pagination_no_results": "Aucun résultat",
+  "common_clipboard_success_label": "Copié !",
+  "common_clipboard_error_label": "Erreur de copie."
 }
diff --git a/packages/manager-components/src/components/datagrid/translations/Messages_it_IT.json b/packages/manager-components/src/components/datagrid/translations/Messages_it_IT.json
@@ -1,5 +1,7 @@
 {
   "common_pagination_of": "su",
   "common_pagination_results": "risultati",
-  "common_pagination_no_results": "Nessun risultato"
+  "common_pagination_no_results": "Nessun risultato",
+  "common_clipboard_success_label": "Copiato!",
+  "common_clipboard_error_label": "Errore di copia."
 }
diff --git a/packages/manager-components/src/components/datagrid/translations/Messages_pl_PL.json b/packages/manager-components/src/components/datagrid/translations/Messages_pl_PL.json
@@ -1,5 +1,7 @@
 {
   "common_pagination_of": "z",
   "common_pagination_results": "wyniki",
-  "common_pagination_no_results": "Brak wyników"
+  "common_pagination_no_results": "Brak wyników wyszukiwania",
+  "common_clipboard_success_label": "Skopiowano!",
+  "common_clipboard_error_label": "Błąd kopiowania."
 }
diff --git a/packages/manager-components/src/components/datagrid/translations/Messages_pt_PT.json b/packages/manager-components/src/components/datagrid/translations/Messages_pt_PT.json
@@ -1,5 +1,7 @@
 {
   "common_pagination_of": "em",
   "common_pagination_results": "resultados",
-  "common_pagination_no_results": "Nenhum resultado encontrado"
+  "common_pagination_no_results": "Nenhum resultado",
+  "common_clipboard_success_label": "Copiado!",
+  "common_clipboard_error_label": "Erro de cópia."
 }
diff --git a/packages/manager-components/src/components/index.ts b/packages/manager-components/src/components/index.ts
@@ -13,6 +13,7 @@ export * from './datagrid/datagrid.component';
 export * from './datagrid/text-cell.component';
 export * from './datagrid/useDatagrid';
 export * from './datagrid/useDatagridSearchParams';
+export * from './datagrid/clipboard-cell.component';
 
 export * from './guides-header';
 

diff --git a/packages/manager-components/src/components/templates/onboarding/onboarding.component.tsx b/packages/manager-components/src/components/templates/onboarding/onboarding.component.tsx
@@ -1,12 +1,16 @@
 import React, { PropsWithChildren } from 'react';
 import {
   OsdsButton,
-  OsdsDivider,
+  OsdsIcon,
   OsdsText,
+  OsdsDivider,
 } from '@ovhcloud/ods-components/react';
+import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 import {
   ODS_BUTTON_SIZE,
   ODS_BUTTON_VARIANT,
+  ODS_ICON_NAME,
+  ODS_ICON_SIZE,
   ODS_DIVIDER_SIZE,
   ODS_TEXT_COLOR_INTENT,
   ODS_TEXT_LEVEL,
@@ -25,9 +29,11 @@ export type OnboardingLayoutProps = PropsWithChildren<{
   orderButtonLabel: string;
   orderHref?: string;
   description?: React.ReactNode;
+  additionalDescriptions?: string[];
   moreInfoHref?: string;
   moreInfoButtonLabel?: string;
   onOrderButtonClick?: () => void;
+  onmoreInfoButtonClick?: () => void;
   img?: {
     src: string;
     width?: number;
@@ -40,12 +46,14 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
   hideHeadingSection,
   title,
   description,
+  additionalDescriptions,
   orderHref,
   orderButtonLabel,
   moreInfoHref,
   moreInfoButtonLabel,
   children,
   onOrderButtonClick,
+  onmoreInfoButtonClick,
   img,
   isActionDisabled,
 }) => {
@@ -72,37 +80,60 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
             {title}
           </OsdsText>
           <OsdsDivider size={ODS_DIVIDER_SIZE.seven} />
-          <OsdsText
-            level={ODS_TEXT_LEVEL.body}
-            size={ODS_TEXT_SIZE._400}
-            color={ODS_TEXT_COLOR_INTENT.text}
-            className="block text-center max-w-4xl"
-          >
-            {description}
-          </OsdsText>
-          <div className="flex sm:py-6 xs:w-full xs:flex-col sm:items-center sm:w-fit sm:flex-row">
-            <div className="w-full xs:py-3 mt-2">
+          {description && (
+            <OsdsText
+              level={ODS_TEXT_LEVEL.body}
+              size={ODS_TEXT_SIZE._800}
+              color={ODS_TEXT_COLOR_INTENT.text}
+              className="block text-center mb-4"
+            >
+              {description}
+            </OsdsText>
+          )}{' '}
+          {additionalDescriptions?.map((desc) => (
+            <OsdsText
+              level={ODS_TEXT_LEVEL.body}
+              size={ODS_TEXT_SIZE._800}
+              color={ODS_TEXT_COLOR_INTENT.text}
+              className="block text-center mb-4"
+              key={desc}
+            >
+              {desc}
+            </OsdsText>
+          ))}
+          <div className="flex  sm:py-8 xs:w-full xs:flex-col sm:items-center sm:flex-row w-full justify-center">
+            <OsdsButton
+              inline
+              color={ODS_THEME_COLOR_INTENT.primary}
+              size={ODS_BUTTON_SIZE.md}
+              href={orderHref}
+              onClick={onOrderButtonClick}
+            >
+              {orderButtonLabel}
+            </OsdsButton>
+
+            {moreInfoButtonLabel && moreInfoHref && (
               <OsdsButton
+                inline
+                className="sm:ml-1"
                 color={ODS_THEME_COLOR_INTENT.primary}
+                variant={ODS_BUTTON_VARIANT.stroked}
                 size={ODS_BUTTON_SIZE.md}
-                href={orderHref}
-                onClick={onOrderButtonClick}
+                onClick={onmoreInfoButtonClick}
                 {...(isActionDisabled && { disabled: true })}
+                href={moreInfoHref}
+                target={OdsHTMLAnchorElementTarget._blank}
               >
-                {orderButtonLabel}
+                {moreInfoButtonLabel}
+                <span slot="end">
+                  <OsdsIcon
+                    className="ml-4 cursor-pointer"
+                    name={ODS_ICON_NAME.EXTERNAL_LINK}
+                    size={ODS_ICON_SIZE.xs}
+                    hoverable
+                  ></OsdsIcon>
+                </span>
               </OsdsButton>
-            </div>
-            {moreInfoButtonLabel && moreInfoHref && (
-              <div className="w-full sm:m-2 xs:py-3 xs:mb-6">
-                <OsdsButton
-                  className="sm:ml-1"
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                  variant={ODS_BUTTON_VARIANT.stroked}
-                  size={ODS_BUTTON_SIZE.md}
-                >
-                  {moreInfoButtonLabel}
-                </OsdsButton>
-              </div>
             )}
           </div>
         </section>

diff --git a/packages/manager/apps/container/src/container/legacy/server-sidebar/SidebarItemRenderer.tsx b/packages/manager/apps/container/src/container/legacy/server-sidebar/SidebarItemRenderer.tsx
@@ -116,13 +116,22 @@ export default function ServerSidebarItemRenderer({
           <span className="pl-2 align-middle" aria-hidden="true">
             {item.icon}
             <span className="pl-2">{item.depth === 0 ? (
+              <>
               <OsdsText
                 level={ODS_TEXT_LEVEL.heading}
                 color={ODS_THEME_COLOR_INTENT.text}
                 size={ODS_TEXT_SIZE._200}
               >
                 {item.label}
               </OsdsText>
+              {item?.badge && (
+                <span
+               className={`oui-badge oui-badge_s oui-badge_${item.badge} ${style.menuBadge}`}
+              >
+               {item.badge}
+                 </span>
+               )}
+             </>
             ) : (
               <>
                 <OsdsText

diff --git a/...es/manager/apps/container/src/container/legacy/server-sidebar/universe/AccountSidebar.tsx b/...es/manager/apps/container/src/container/legacy/server-sidebar/universe/AccountSidebar.tsx
@@ -29,12 +29,12 @@ export default function AccountSidebar() {
   const isEnterprise = environment.getUser()?.enterprise;
 
   const getAccountSidebar = async (availability: Record<string, string> | null) => {
+    const menu: SidebarMenuItem[] = [];
+
     if (!availability) {
-      return [];
+      return menu;
     }
 
-    const menu = [];
-
     menu.push({
       id: 'back-to-home',
       label: t('sidebar_back_home'),
@@ -147,7 +147,6 @@ export default function AccountSidebar() {
         pathMatcher: new RegExp('^/iam'),
       });
     }
-
     return menu;
   };
 

diff --git a/.../manager/apps/container/src/container/legacy/server-sidebar/universe/DedicatedSidebar.tsx b/.../manager/apps/container/src/container/legacy/server-sidebar/universe/DedicatedSidebar.tsx
@@ -10,6 +10,9 @@ import dedicatedShopConfig from '../order/shop-config/dedicated';
 import OrderTrigger from '../order/OrderTrigger';
 import { ShopItem } from '../order/OrderPopupContent';
 import  getIcon  from './GetIcon';
+import { OsdsIcon } from '@ovhcloud/ods-components/react';
+import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 
 export const features = [
   'dedicated-server',
@@ -46,6 +49,7 @@ export const features = [
   'dedicated-server:nutanixOrder',
   'carbon-calculator',
   'network-security',
+  'key-management-service'
 ];
 
 export default function DedicatedSidebar() {
@@ -397,6 +401,26 @@ export default function DedicatedSidebar() {
       });
     }
 
+    if (feature['key-management-service']) {
+      menu.push({
+        id: 'identity-security-operations',
+        label: t('sidebar_identity_security_operations'),
+        icon: <OsdsIcon name={ODS_ICON_NAME.CLOUD_EYE_CONCEPT} size={ODS_ICON_SIZE.xxs} color={ODS_THEME_COLOR_INTENT.text}/>,
+        badge: 'new',
+        pathMatcher: new RegExp('^/key-management-service'),
+        subItems: [
+          {
+            id: 'key-management-service',
+            label: t('sidebar_key-management-service'),
+            href: navigation.getURL('key-management-service', '/'),
+            badge: 'beta',
+            pathMatcher: new RegExp('^/key-management-service'),
+            icon: <OsdsIcon name={ODS_ICON_NAME.KEY_CONCEPT} size={ODS_ICON_SIZE.xxs} color={ODS_THEME_COLOR_INTENT.text}/>
+          },
+        ],
+      });
+    }
+
     return menu;
   };