feat(manager-react-components): update generator

ref: MANAGER-14622 Signed-off-by: Alex Boungnaseng <[email protected]>
ovh · Oct 2, 2024 · da81076 · da81076
1 parent 2d285a7
commit da81076
Show file tree

Hide file tree

Showing 28 changed files with 128 additions and 120 deletions.
diff --git a/packages/manager-react-components/.storybook/preview.tsx b/packages/manager-react-components/.storybook/preview.tsx
@@ -8,8 +8,6 @@ import '@ovhcloud/ods-themes/default';
 import i18n from './i18n';
 import './storybook.css';
 
-import '@ovhcloud/ods-theme-blue-jeans';
-
 const mockQueryClient = new QueryClient({
   defaultOptions: {
     queries: {

diff --git a/packages/manager-react-components/package.json b/packages/manager-react-components/package.json
@@ -46,7 +46,6 @@
   "devDependencies": {
     "@babel/core": "7.22.10",
     "@mdx-js/react": "^3.0.1",
-    "@ovh-ux/manager-tailwind-config": "^0.2.0",
     "@ovh-ux/manager-vite-config": "^0.8.0",
     "@storybook/addon-a11y": "8.0.4",
     "@storybook/test": "8.0.4",

diff --git a/packages/manager-react-components/src/components/ManagerButton/ManagerButton.tsx b/packages/manager-react-components/src/components/ManagerButton/ManagerButton.tsx
@@ -35,37 +35,33 @@ export const ManagerButton = ({
   const { t } = useTranslation('iam');
   const { isAuthorized } = useAuthorizationIam(iamActions, urn, isIamTrigger);
 
-  if (!isAuthorized) {
-    if (!displayTooltip) {
-      return (
+  if (isAuthorized) {
+    return (
+      <OdsButton data-testid="manager-button" {...restProps} label={label} />
+    );
+  }
+  return displayTooltip ? (
+    <>
+      <div id={id} className="w-fit">
         <OdsButton
           {...restProps}
-          data-testid="manager-button-without-tooltip"
+          data-testid="manager-button-tooltip"
           isDisabled={true}
-          onClick={null}
           label={label}
+          onClick={null}
         />
-      );
-    }
-    return (
-      <>
-        <div id={id} className="w-fit">
-          <OdsButton
-            {...restProps}
-            data-testid="manager-button-tooltip"
-            isDisabled={true}
-            label={label}
-            content="true"
-            onClick={null}
-          />
-        </div>
-        <OdsTooltip triggerId={id} with-arrow>
-          <div>{t('common_iam_actions_message')}</div>
-        </OdsTooltip>
-      </>
-    );
-  }
-  return (
-    <OdsButton data-testid="manager-button" {...restProps} label={label} />
+      </div>
+      <OdsTooltip triggerId={id} with-arrow>
+        <div>{t('common_iam_actions_message')}</div>
+      </OdsTooltip>
+    </>
+  ) : (
+    <OdsButton
+      {...restProps}
+      data-testid="manager-button-without-tooltip"
+      isDisabled={true}
+      onClick={null}
+      label={label}
+    />
   );
 };
diff --git a/packages/manager-react-components/src/components/action-banner/action-banner.component.tsx b/packages/manager-react-components/src/components/action-banner/action-banner.component.tsx
@@ -31,10 +31,10 @@ export function ActionBanner({
     <OdsMessage
       color={color}
       variant={variant}
-      className={'mt-3 flex-row'}
+      className="mt-3 flex-row"
       data-testid="actionBanner-message_container"
     >
-      <div className={'sm:flex sm:flex-row sm:justify-between sm:items-center'}>
+      <div className="sm:flex sm:flex-row sm:justify-between sm:items-center">
         <OdsText>
           <span
             dangerouslySetInnerHTML={{
@@ -55,9 +55,9 @@ export function ActionBanner({
             data-testid="action-banner-link"
             id="action-banner-link"
             className="sm:mt-0 mt-4 sm:ml-4 ml-0"
-            onClick={() => onClick && onClick()}
+            onClick={onClick}
             href={href}
-            target={'_blank'}
+            target="_blank"
           >
             {cta}
           </OdsLink>

diff --git a/packages/manager-react-components/src/components/container/step/Step.component.tsx b/packages/manager-react-components/src/components/container/step/Step.component.tsx
@@ -47,9 +47,7 @@ export const StepComponent = ({
         {isChecked ? (
           <OdsIcon
             name={ODS_ICON_NAME.check}
-            className={
-              'block p-[12px] text-[20px] text-[--ods-color-primary-500]'
-            }
+            className="block p-[12px] text-[20px] text-[--ods-color-primary-500]"
           />
         ) : (
           <div
@@ -91,7 +89,7 @@ export const StepComponent = ({
                 label={edit.label as string}
                 data-testid="edit-cta"
                 className="float-left md:float-right"
-                {...(edit.isDisabled ? { disabled: true } : {})}
+                isDisabled={edit.isDisabled || undefined}
                 onClick={() => {
                   if (!edit.isDisabled) {
                     edit.action(id);
@@ -125,7 +123,7 @@ export const StepComponent = ({
                     next.action(id);
                   }}
                   className="w-fit"
-                  {...(next.isDisabled ? { disabled: true } : {})}
+                  isDisabled={next.isDisabled || undefined}
                 />
               </div>
             )}

diff --git a/...nager-react-components/src/components/content/dashboard-tile/dashboard-tile.component.tsx b/...nager-react-components/src/components/content/dashboard-tile/dashboard-tile.component.tsx
@@ -17,7 +17,7 @@ export const DashboardTile: React.FC<DashboardTileProps> = ({
   title,
   items,
 }) => (
-  <OdsCard className="w-full h-full flex-col p-[1rem]" color="neutral">
+  <OdsCard className="w-full flex-col p-[1rem]" color="neutral">
     <div className="flex flex-col w-full">
       {title && (
         <>
@@ -28,12 +28,12 @@ export const DashboardTile: React.FC<DashboardTileProps> = ({
         </>
       )}
       {items.map((item, index) => (
-        <>
+        <React.Fragment key={item.id}>
           <TileBlock key={item.id} label={item.label}>
             {item.value}
           </TileBlock>
           {index < items.length - 1 && <OdsDivider spacing="24" />}
-        </>
+        </React.Fragment>
       ))}
     </div>
   </OdsCard>

diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx
@@ -8,7 +8,7 @@ import {
   useReactTable,
   getSortedRowModel,
 } from '@tanstack/react-table';
-import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
+import { ODS_ICON_NAME, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
 import {
   OdsButton,
   OdsIcon,
@@ -270,6 +270,7 @@ export const Datagrid = <T,>({
       {hasNextPage && (
         <div className="grid justify-items-center my-5">
           <OdsButton
+            variant={ODS_BUTTON_VARIANT.outline}
             label={t('common_pagination_load_more')}
             onClick={onFetchNextPage}
           />

diff --git a/packages/manager-react-components/src/components/filters/filters.stories.tsx b/packages/manager-react-components/src/components/filters/filters.stories.tsx
@@ -22,7 +22,6 @@ const FiltersStory = () => {
   return (
     <>
       <div className="flex justify-center">
-        <span></span>
         <OdsInput
           name="ods-input-username"
           className="w-[30%] mr-2"
@@ -54,7 +53,7 @@ const FiltersStory = () => {
           />
         </div>
 
-        <OdsPopover triggerId="popover-trigger" with-arrow="true">
+        <OdsPopover triggerId="popover-trigger" with-arrow>
           <FilterAdd
             columns={[
               {

diff --git a/packages/manager-react-components/src/components/navigation/card/card.component.tsx b/packages/manager-react-components/src/components/navigation/card/card.component.tsx
@@ -47,7 +47,7 @@ export const Card: React.FC<CardProps> = ({
 
   return (
     <a
-      target={'_blank'}
+      target="_blank"
       href={href}
       className="no-underline"
       onClick={onClick}

diff --git a/...ages/manager-react-components/src/components/navigation/menus/action/action.component.tsx b/...ages/manager-react-components/src/components/navigation/menus/action/action.component.tsx
@@ -81,7 +81,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
   items,
   isCompact,
   icon,
-  variant = ODS_BUTTON_VARIANT.stroked,
+  variant = ODS_BUTTON_VARIANT.outline,
   disabled,
 }) => {
   const { t } = useTranslation('buttons');
@@ -93,7 +93,8 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
         <OdsButton
           data-testid="navigation-action-trigger-action"
           slot="menu-title"
-          variant={ODS_BUTTON_VARIANT.outline}
+          variant={variant}
+          isDisabled={disabled}
           size={ODS_BUTTON_SIZE.sm}
           onClick={() => setIsTrigger(true)}
           {...(!isCompact && { label: t('common_actions') })}
@@ -107,7 +108,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
       <OdsPopover
         className="py-[8px] px-0 overflow-hidden"
         triggerId="navigation-action-trigger"
-        with-arrow="true"
+        with-arrow
       >
         {items.map(({ id, ...item }) => {
           return (

diff --git a/packages/manager-react-components/src/components/templates/base/base.component.tsx b/packages/manager-react-components/src/components/templates/base/base.component.tsx
@@ -32,7 +32,11 @@ export const BaseLayout = ({
 }: BaseLayoutProps) => (
   <PageLayout>
     <div>{breadcrumb}</div>
-    {header && <Headers {...header} />}
+    {header && (
+      <div className="mt-[24px]">
+        <Headers {...header} />
+      </div>
+    )}
     {backLinkLabel && (onClickReturn || hrefPrevious) && (
       <div className="mb-[24px]">
         <Links

diff --git a/...manager-react-components/src/components/templates/delete-modal/delete-modal.component.tsx b/...manager-react-components/src/components/templates/delete-modal/delete-modal.component.tsx
@@ -4,7 +4,6 @@ import {
   OdsText,
   OdsInput,
   OdsMessage,
-  OdsSpinner,
   OdsModal,
   OdsButton,
   OdsFormField,
@@ -13,7 +12,6 @@ import {
   OdsInputCustomEvent,
   OdsInputChangeEventDetail,
   ODS_BUTTON_VARIANT,
-  ODS_SPINNER_SIZE,
   ODS_INPUT_TYPE,
   ODS_BUTTON_COLOR,
   ODS_MESSAGE_COLOR,
@@ -93,11 +91,6 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
           }
         />
       </OdsFormField>
-      {isLoading && (
-        <div className="flex justify-center">
-          <OdsSpinner size={ODS_SPINNER_SIZE.md} />
-        </div>
-      )}
       <OdsButton
         isDisabled={isLoading}
         slot="actions"
@@ -110,6 +103,7 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
       <OdsButton
         isDisabled={isDisabled}
         slot="actions"
+        isLoading={isLoading}
         data-testid="manager-delete-modal-confirm"
         {...handleClick(() => {
           setDeleteInput('');

diff --git a/...act-components/src/components/templates/update-name-modal/update-name-modal.component.tsx b/...act-components/src/components/templates/update-name-modal/update-name-modal.component.tsx
@@ -4,14 +4,12 @@ import {
   OdsText,
   OdsInput,
   OdsMessage,
-  OdsSpinner,
   OdsModal,
   OdsButton,
   OdsFormField,
 } from '@ovhcloud/ods-components/react';
 import {
   ODS_BUTTON_VARIANT,
-  ODS_SPINNER_SIZE,
   ODS_INPUT_TYPE,
   ODS_MESSAGE_COLOR,
   OdsInputChangeEventDetail,
@@ -112,11 +110,6 @@ export const UpdateNameModal: React.FC<UpdateNameModalProps> = ({
           </div>
         )}
       </OdsFormField>
-      {isLoading && (
-        <div className="flex justify-center">
-          <OdsSpinner size={ODS_SPINNER_SIZE.md} />
-        </div>
-      )}
       <OdsButton
         isDisabled={isLoading}
         slot="actions"
@@ -125,8 +118,9 @@ export const UpdateNameModal: React.FC<UpdateNameModalProps> = ({
         label={cancelButtonLabel || t('updateModalCancelButton')}
       />
       <OdsButton
-        isDisabled={isLoading || isPatternError}
+        isDisabled={isPatternError}
         slot="actions"
+        isLoading={isLoading}
         {...handleClick(() => updateDisplayName(displayName))}
         label={confirmButtonLabel || t('updateModalConfirmButton')}
       />

diff --git a/packages/manager-react-components/src/components/typography/links/links.component.tsx b/packages/manager-react-components/src/components/typography/links/links.component.tsx
@@ -23,10 +23,11 @@ export const Links: React.FC<LinksProps> = ({
   label,
   onClickReturn,
   type,
+  href,
   ...props
 }: LinksProps) => (
   <OdsLink
-    href="#"
+    href={href}
     onClick={onClickReturn}
     {...props}
     {...(type === LinkType.next && { icon: ODS_ICON_NAME.arrowRight })}

diff --git a/packages/manager-react-components/src/index.ts b/packages/manager-react-components/src/index.ts
@@ -1,4 +1,3 @@
-import './lib.config';
 import './tailwind/theme.css';
 import './enumTypes';
 import './lib.scss';

diff --git a/packages/manager-react-components/src/lib.config.ts b/packages/manager-react-components/src/lib.config.ts
diff --git a/packages/manager-react-components/tailwind.config.js b/packages/manager-react-components/tailwind.config.js
@@ -1,4 +1,14 @@
-import config from '@ovh-ux/manager-tailwind-config';
-
 /** @type {import('tailwindcss').Config} */
-module.exports = config;
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    screens: {
+      xs: '0',
+      sm: '36em',
+      md: '48em',
+      lg: '62em',
+      xl: '75em',
+      xxl: '87.5em',
+    },
+  },
+};
diff --git a/packages/manager/core/generator/app/conditional-templates/dashboard/index.tsx.hbs b/packages/manager/core/generator/app/conditional-templates/dashboard/index.tsx.hbs
@@ -9,9 +9,8 @@ import {
   useResolvedPath,
 } from 'react-router-dom';
 import {
-  OsdsTabs,
-  OsdsTabBar,
-  OsdsTabBarItem,
+  OdsTabs,
+  OdsTab,
 } from '@ovhcloud/ods-components/react';
 
 import { BaseLayout } from '@ovh-ux/manager-react-components';
@@ -68,20 +67,17 @@ export default function DashboardPage() {
       header={header}
       description="Description du {{appName}}"
       tabs={
-        <OsdsTabs panel={panel}>
-          <OsdsTabBar slot="top">
-            {tabsList.map((tab: DashboardTabItemProps) => (
+        <OdsTabs>
+          {tabsList.map((tab: DashboardTabItemProps) => (
+            <OdsTab
+              key={`osds-tab-bar-item-${tab.name}`}
+            >
               <NavLink to={tab.to} className="no-underline">
-                <OsdsTabBarItem
-                  key={`osds-tab-bar-item-${tab.name}`}
-                  panel={tab.name}
-                >
-                  {tab.title}
-                </OsdsTabBarItem>
+                {tab.title}
               </NavLink>
-            ))}
-          </OsdsTabBar>
-        </OsdsTabs>
+            </OdsTab>
+          ))}
+        </OdsTabs>
       }
     >
       <Outlet />