feat(generator): add bootstrap 5 in generator

ref: MANAGER-11537 Signed-off-by: Alex Boungnaseng <[email protected]>
ovh · Jul 17, 2023 · ca71983 · ca71983
1 parent fc77ec6
commit ca71983
Show file tree

Hide file tree

Showing 14 changed files with 96 additions and 99 deletions.
diff --git a/packages/manager/core/generator/app/conditional-templates/api/services-template.ts.hbs b/packages/manager/core/generator/app/conditional-templates/api/services-template.ts.hbs
@@ -33,7 +33,7 @@ export const {{this.functionName}} = async ({{#if this.params}}params: {{pascalC
       console.error('Error with request', errorResponse);
       return errorResponse;
     }
-    return response.data;
+    return { ...response.data, status: response?.status };
   };
 
   return queryClient.fetchQuery({{this.functionName}}QueryKey{{#if this.urlParams}}(params){{/if}}, fetchData);

diff --git a/packages/manager/core/generator/app/conditional-templates/dashboard/[serviceName]/Tabs1.tsx b/packages/manager/core/generator/app/conditional-templates/dashboard/[serviceName]/Tabs1.tsx
@@ -1,26 +1,26 @@
 import React, { lazy } from 'react';
 import TileCustom from '@/components/layout-helpers/Dashboard/TileCustom';
 
-const TiileExemple = lazy(() => import('./Tabs1/TileExemple'));
+const TileExemple = lazy(() => import('./Tabs1/TileExemple'));
 
 function Tabs1() {
   return (
-    <div className="dashboard-section">
+    <div className="dashboard-section pt-4">
       <div>
         <TileCustom title="tile-exemple">
-          <TiileExemple />
+          <TileExemple />
         </TileCustom>
       </div>
       <div>
         <TileCustom title="tile-exemple-2">
           <div>
-            <TiileExemple />
+            <TileExemple />
           </div>
         </TileCustom>
       </div>
       <div>
         <TileCustom title="tile-exemple-3">
-          <TiileExemple />
+          <TileExemple />
         </TileCustom>
       </div>
     </div>

diff --git a/packages/manager/core/generator/app/templates/package.json.hbs b/packages/manager/core/generator/app/templates/package.json.hbs
@@ -29,6 +29,7 @@
     "@ovhcloud/ods-theming": "^14.0.1",
     "@tanstack/react-query": "^4.29.3",
     "@tanstack/react-query-devtools": "^4.9.0",
+    "bootstrap": "^5.3.0",
     "clsx": "^1.2.1",
     "react": "^18.2.0",
     "react-i18next": "^11.18.1",

diff --git a/packages/manager/core/generator/app/templates/src/components/Error/error.scss b/packages/manager/core/generator/app/templates/src/components/Error/error.scss
@@ -1,16 +1,20 @@
 .manager-error-page {
   margin-left: auto;
   margin-right: auto;
-  width: 600px;
+  width: 100%;
+  max-width: 600px;
   display: grid;
   height: 100%;
-  overflow: auto;
+  overflow: hidden;
 
-  div {
-    padding: 15px;
+  .manager-error-page-image {
+    img {
+      width: 100%;
+    }
   }
 
-  .buttons {
+  .manager-error-page-footer {
     text-align: right;
+    overflow: hidden;
   }
 }
diff --git a/packages/manager/core/generator/app/templates/src/components/Error/error.tsx b/packages/manager/core/generator/app/templates/src/components/Error/error.tsx
@@ -43,31 +43,36 @@ const ErrorBanner: React.FC<ErrorObject> = ({ error }) => {
   const navigate = useNavigate();
   const location = useLocation();
   return (
-    <div className="manager-error-page">
-      <div>
+    <div className="manager-error-page p-5">
+      <div className="manager-error-page-image">
         <img src={OOPS} alt="OOPS" />
       </div>
 
-      <OsdsText size={OdsTextSize._600} level={OdsTextLevel.heading}>
-        {t('manager_error_page_title')}
-      </OsdsText>
+      <div className="py-2">
+        <OsdsText size={OdsTextSize._600} level={OdsTextLevel.heading}>
+          {t('manager_error_page_title')}
+        </OsdsText>
+      </div>
+
+      <div>
+        <OsdsMessage
+          color={OdsThemeColorIntent.error}
+          type={OdsMessageType.error}
+        >
+          <div>
+            {t('manager_error_page_default')} <br />
+            {error?.data?.message && <strong>{error.data.message}</strong>}
+            {error?.headers['x-ovh-queryid'] && (
+              <p>
+                {t('manager_error_page_detail_code')}
+                {error.headers['x-ovh-queryid']}
+              </p>
+            )}
+          </div>
+        </OsdsMessage>
+      </div>
 
-      <OsdsMessage
-        color={OdsThemeColorIntent.error}
-        type={OdsMessageType.error}
-      >
-        <div>
-          {t('manager_error_page_default')} <br />
-          {error?.data?.message && <strong>{error.data.message}</strong>}
-          {error?.headers['x-ovh-queryid'] && (
-            <p>
-              {t('manager_error_page_detail_code')}
-              {error.headers['x-ovh-queryid']}
-            </p>
-          )}
-        </div>
-      </OsdsMessage>
-      <div className="buttons">
+      <div className="manager-error-page-footer py-2">
         <OsdsButton
           color={OdsThemeColorIntent.primary}
           variant={OdsButtonVariant.ghost}

diff --git a/...nager/core/generator/app/templates/src/components/layout-helpers/Dashboard/Dashboard.scss b/...nager/core/generator/app/templates/src/components/layout-helpers/Dashboard/Dashboard.scss
@@ -6,7 +6,6 @@
   }
   @media (min-width: 768px) {
     .dashboard-section {
-      padding-top: 1rem;
       display: grid;
       gap: 30px;
       grid-template-columns: repeat(3, 1fr);
@@ -18,7 +17,6 @@
   }
   @media (max-width: 767px) {
     .dashboard-section {
-      padding-top: 1rem;
       display: block !important;
       .tile-content {
         display: block;
@@ -37,9 +35,4 @@
   .element-tile-right {
     align-items: flex-end;
   }
-
-  .dashboard-layout-subtitle {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
 }
diff --git a/...anager/core/generator/app/templates/src/components/layout-helpers/Dashboard/Dashboard.tsx b/...anager/core/generator/app/templates/src/components/layout-helpers/Dashboard/Dashboard.tsx
@@ -41,7 +41,7 @@ const Dashboard: React.FC<DashboardLayoutProps> = ({ tabs }) => {
 
   return (
     <div className="dashboard-layout-helpers">
-      <div className="dashboard-layout-subtitle">
+      <div className="dashboard-layout-subtitle py-4">
         <OsdsText
           level={OdsThemeTypographyLevel.heading}
           color={OdsThemeColorIntent.text}

diff --git a/.../manager/core/generator/app/templates/src/components/layout-helpers/Listing/dataGrid.scss b/.../manager/core/generator/app/templates/src/components/layout-helpers/Listing/dataGrid.scss
@@ -12,8 +12,4 @@
     border: 1px solid #bef1ff;
     border-collapse: collapse;
   }
-
-  td {
-    padding: 15px;
-  }
 }
diff --git a/...s/manager/core/generator/app/templates/src/components/layout-helpers/Listing/dataGrid.tsx b/...s/manager/core/generator/app/templates/src/components/layout-helpers/Listing/dataGrid.tsx
@@ -57,7 +57,7 @@ const Datagrid = <T,>(props: { data: DataItem<T>[] }) => {
         {data.map((service: any, index: number) => (
           <tr key={index}>
             {tableHeaders.map((header, indexTd) => (
-              <td key={`datagrid-td-${header}-${indexTd}`}>
+              <td className="p-3" key={`datagrid-td-${header}-${indexTd}`}>
                 {matchServiceLink(header) > -1 ? (
                   <OsdsLink
                     color={OdsThemeColorIntent.primary}

diff --git a/...re/generator/app/templates/src/components/layout-helpers/Onboarding/OnboardingLayout.scss b/...re/generator/app/templates/src/components/layout-helpers/Onboarding/OnboardingLayout.scss
@@ -3,13 +3,6 @@
   flex-direction: column;
   margin-right: auto;
   margin-left: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
-
-  @media (min-width: 768px) {
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
 
   .on-boarding-illustration-section {
     display: flex;
@@ -19,8 +12,6 @@
     .on-boarding-illustration-container {
       display: flex;
       justify-content: center;
-      padding: 3rem 0;
-
       img {
         max-height: 150px;
       }
@@ -29,17 +20,11 @@
     .on-boarding-title {
       display: block;
       text-align: center;
-      margin-bottom: 28px;
-    }
-
-    .more-info-button {
-      margin-left: 1rem;
     }
 
     .on-boarding-description {
       display: block;
       text-align: center;
-      margin-bottom: 12px;
     }
   }
 }
diff --git a/...ore/generator/app/templates/src/components/layout-helpers/Onboarding/OnboardingLayout.tsx b/...ore/generator/app/templates/src/components/layout-helpers/Onboarding/OnboardingLayout.tsx
@@ -33,44 +33,48 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
   children,
 }) => {
   return (
-    <div className="manager-on-boarding-layout">
+    <div className="manager-on-boarding-layout px-3">
       {!hideHeadingSection && (
         <section className="on-boarding-illustration-section">
-          <div className="on-boarding-illustration-container">
+          <div className="on-boarding-illustration-container py-3">
             <img src={imageSrc || placeholderSrc} alt="" />
           </div>
           <OsdsText
-            className="on-boarding-title"
+            className="on-boarding-title mb-3"
             color={OdsThemeColorIntent.primary}
             level={OdsThemeTypographyLevel.heading}
             size={OdsThemeTypographySize._700}
           >
             {title}
           </OsdsText>
           <OsdsText
-            className="on-boarding-description"
+            className="on-boarding-description mb-2"
             level={OdsThemeTypographyLevel.body}
           >
             {description}
           </OsdsText>
           <div>
-            <OsdsButton
-              color={OdsThemeColorIntent.primary}
-              size={OdsButtonSize.md}
-              href={orderHref}
-            >
-              {orderButtonLabel}
-            </OsdsButton>
-            {moreInfoButtonLabel && moreInfoHref && (
+            <span>
               <OsdsButton
-                className="more-info-button"
                 color={OdsThemeColorIntent.primary}
-                variant={OdsButtonVariant.stroked}
                 size={OdsButtonSize.md}
-                href={moreInfoHref}
+                href={orderHref}
               >
-                {moreInfoButtonLabel}
+                {orderButtonLabel}
               </OsdsButton>
+            </span>
+            {moreInfoButtonLabel && moreInfoHref && (
+              <span className="m-2">
+                <OsdsButton
+                  className="more-info-button ml-1"
+                  color={OdsThemeColorIntent.primary}
+                  variant={OdsButtonVariant.stroked}
+                  size={OdsButtonSize.md}
+                  href={moreInfoHref}
+                >
+                  {moreInfoButtonLabel}
+                </OsdsButton>
+              </span>
             )}
           </div>
         </section>

diff --git a/packages/manager/core/generator/app/templates/src/index.tsx.hbs b/packages/manager/core/generator/app/templates/src/index.tsx.hbs
@@ -1,4 +1,5 @@
 import { startApplication } from '@ovh-ux/manager-react-core-application';
+import 'bootstrap/scss/bootstrap-utilities.scss';
 import '@ovhcloud/ods-theme-blue-jeans/index.css';
 
 startApplication('{{ appName }}');
diff --git a/packages/manager/core/generator/utils/string-helpers.js b/packages/manager/core/generator/utils/string-helpers.js
@@ -55,11 +55,7 @@ export const isUnknownTypescriptType = (typeStr) =>
     (type) => !typeStr.includes(type),
   );
 
-
 /**
  * @returns a valid string clean
  */
-export const cleanTypeSyntax = (typeStr) => {
-  const str = typeStr.replaceAll('>', '');
-  return str;
-}
+export const cleanTypeSyntax = (typeStr) => (typeStr.replaceAll('>', ''));
diff --git a/yarn.lock b/yarn.lock
@@ -6488,30 +6488,37 @@
   resolved "https://registry.yarnpkg.com/@ovh-ux/ui-kit/-/ui-kit-6.3.0.tgz#d88ec8e58022de2a9269a364b0c946f9c8a8252d"
   integrity sha512-Vy74YQYFdT+d5O7FPETDZ5Yp5dmk+ifZbhlEToaCg1lflBOhnzqT3+cQf1BkbYDt4+X6M4jc4qKYit79tHC7FA==
 
-"@ovhcloud/ods-core@^13.0.1":
-  version "13.0.1"
-  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-core/-/ods-core-13.0.1.tgz#0433b0e868e45ada0f8748274beb0e91a824e27c"
-  integrity sha512-L4x3JG7mEepjaaGy0KgGUirBQ09nexrYZWZocUQSb0T0lNomw3vV7FLD4GV7mhSjSE7WRo2yi84g0RGqxujdcQ==
+"@ovhcloud/ods-cdk@^14.0.1":
+  version "14.0.1"
+  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-cdk/-/ods-cdk-14.0.1.tgz#7180905c369752104669a133d178a64b4623d4d1"
+  integrity sha512-919EK9tIoXfzfTBjXEmjLIJtmBrnUB0AQqRz2bGDgMGq5HN0vAIiSA7P35w0IPEYzCgRRW0BcZTlYGGVY93bjA==
 
-"@ovhcloud/ods-stencil@^13.0.1":
-  version "13.0.1"
-  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-stencil/-/ods-stencil-13.0.1.tgz#d479bd7be3f631afa3e2e884a42d0cd01702d587"
-  integrity sha512-f6PVZ1YsUbwnr8fUnF0AG20YcC5Ks8y1HDB1pNPxrHY7D2HKjK+x6YtuJeXrQQNbg85qVfvfYzch8xUuVYA+MA==
+"@ovhcloud/ods-core@^14.0.1":
+  version "14.0.1"
+  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-core/-/ods-core-14.0.1.tgz#ad95491d30eba6d6eb638d36bee54685620a70dd"
+  integrity sha512-lxnpqhjDSXXX6V5bGSvq0fU6DRLxGbHCDpP/HBbT2MxdX0TAcjRIY5ht7KYnia4hJpBJ7Qz4gNJhtozipdC4xQ==
   dependencies:
-    "@ovhcloud/ods-theme-blue-jeans" "^13.0.1"
+    "@ovhcloud/ods-cdk" "^14.0.1"
+
+"@ovhcloud/ods-stencil@^14.0.1":
+  version "14.0.1"
+  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-stencil/-/ods-stencil-14.0.1.tgz#45d1010835ca5b5440c5d9c320ac7b98dae83c9a"
+  integrity sha512-3C1YqXXXDjBrtKytvVbK8NcqPtPzYF4QgknJHB90vY2rl1s7THW6rwTIPmv34SsKiNuSSP3//TbZuk66V3e60g==
+  dependencies:
+    "@ovhcloud/ods-theme-blue-jeans" "^14.0.1"
     "@stencil/core" "~2.18.1"
 
-"@ovhcloud/ods-theme-blue-jeans@^13.0.1":
-  version "13.0.1"
-  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-theme-blue-jeans/-/ods-theme-blue-jeans-13.0.1.tgz#23357ea935e3a99710796e1a299288f81eb596b1"
-  integrity sha512-/gdVLl9XUxSDdRqF6AfvdieqeEnNwzNIDGLRYRP3+rQ9Xbs/cuARulzqVP2SoGWzFyoLcGQ1atQZCdujgMdpVw==
+"@ovhcloud/ods-theme-blue-jeans@^14.0.1":
+  version "14.0.1"
+  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-theme-blue-jeans/-/ods-theme-blue-jeans-14.0.1.tgz#68fe4fe572b43e42db2a14111dc559e91c166ad4"
+  integrity sha512-HoBIoiZOfXU6AZmXjlKkSqctSm7iIUeXmCy+InWUYfVMs/v/By0qEQhxZRDnKMf25CIXDa4hButX0avqdy2J1g==
   dependencies:
-    "@ovhcloud/ods-theming" "^13.0.1"
+    "@ovhcloud/ods-theming" "^14.0.1"
 
-"@ovhcloud/ods-theming@^13.0.1":
-  version "13.0.1"
-  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-theming/-/ods-theming-13.0.1.tgz#3bb70a69ef8cd0305a9601db30cc9dc5b1f6da5c"
-  integrity sha512-8PCAmiQDJnTOuKTXSRdqQJpnEPhLWqNLYnEj4qa0IsLs/g9HE8C9Fvt2PzhpgOBvsktfMg/qYvvbqLIkNaZv9A==
+"@ovhcloud/ods-theming@^14.0.1":
+  version "14.0.1"
+  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-theming/-/ods-theming-14.0.1.tgz#62bdd688bb20f6fb72a7ceae757ce62ef8c1c849"
+  integrity sha512-nP+tjQtTf1v1qda7sxBb6nesy8JyOylPuweX3Lk0oq+f42km1kmaLoTT3qZtndlDaUuFZxG+JqgR7pBe28YvYA==
 
 "@ovhcloud/reket-axios-client@^0.2.1":
   version "0.2.1"
@@ -9569,6 +9576,11 @@ bootstrap@^4.4.1:
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.4.1.tgz#8582960eea0c5cd2bede84d8b0baf3789c3e8b01"
   integrity sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA==
 
+bootstrap@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.0.tgz#0718a7cc29040ee8dbf1bd652b896f3436a87c29"
+  integrity sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==
+
 bootstrap@~3.3.0, bootstrap@~3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"