ovh · github-actions · Feb 16, 2026
@@ -3,24 +3,24 @@
 
 export default eslintSharedConfig;
 */
-
 // Progressive adoption
-// import { a11yEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/a11y';
-// import {
-//   complexityJsxTsxConfig,
-//   complexityTsJsConfig,
-// } from '@ovh-ux/manager-static-analysis-kit/eslint/complexity';
-// import { cssEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/css';
+import { a11yEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/a11y';
+import {
+  complexityJsxTsxConfig,
+  complexityTsJsConfig,
+} from '@ovh-ux/manager-static-analysis-kit/eslint/complexity';
+import { cssEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/css';
 import { htmlEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/html';
 // import { importEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/imports';
 import { javascriptEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/javascript';
 // import { checkFileEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/naming-conventions';
 import { prettierEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/prettier';
 // import { reactEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/react';
 import { tailwindJsxConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/tailwind-jsx';
-// import { tanStackQueryEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/tanstack';
-// import { vitestEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/tests';
+import { tanStackQueryEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/tanstack';
+import { vitestEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/tests';
 import { typescriptEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/typescript';
+
 // import { storybookEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/storybook';
 
 // Progressive and disable full rules
@@ -35,4 +35,16 @@ export default [
   htmlEslintConfig,
   tailwindJsxConfig,
   prettierEslintConfig,
+  complexityJsxTsxConfig,
+  complexityTsJsConfig,
+  a11yEslintConfig,
+  cssEslintConfig,
+  tanStackQueryEslintConfig,
+  vitestEslintConfig,
+  {
+    files: ['src/index.scss'],
+    rules: {
+      'css/no-invalid-at-rules': 'off',
+    },
+  },
 ];
@@ -1,10 +1,9 @@
-.roadmap-changelog-datagrid {
-  td {
-    vertical-align: top !important;
-  }
+.roadmap-changelog-datagrid td {
+  /* eslint-disable-next-line css/no-important */
+  vertical-align: top !important;
+}
 
-  &-cell {
-    max-width: 24rem;
-    word-wrap: break-word;
-  }
+.roadmap-changelog-datagrid-cell {
+  max-width: 24rem;
+  word-wrap: break-word;
 }
@@ -6,7 +6,7 @@ import { Banner } from '@/types/banner.type';
 
 export const useFetchHubBanner = (locale: string) =>
   useQuery<Banner, AxiosError>({
-    queryKey: ['getHubBanner'],
+    queryKey: ['getHubBanner', locale],
     queryFn: () => getBanner(locale),
     retry: 0,
   });
@@ -6,97 +6,68 @@ h2 {
   margin-top: 1rem;
 }
 
-$ovh-sidebar-width: 18.75rem;
-$device-breakpoint-medium-max-width: 1279px;
-
-$hub-brand-color: #001191;
-
-$hub-subtitle-color: #001758;
-
-$hub-text-color: #4d5592;
-$hub-text-weight: 400;
-
-$hub-button-bg-color: #3046d1;
-$hub-button-fg-color: white;
-
-$hub-tile-border-radius: 0.5rem;
-$hub-tile-padding: 1rem 0 1rem 0;
-
-$hub-border-radius-default: 6pt;
-
-@mixin hub-pill {
-  background-color: #bef1ff;
-  border-radius: 1rem;
-  font-size: 0.9rem;
-  color: #0050d7;
-  margin-left: 0.5rem;
-  padding: 0.3rem 0.5rem;
-}
-
-ovh-manager-banner-text .notification-banner {
-  padding-right: $ovh-sidebar-width !important;
+#root ovh-manager-banner-text .notification-banner {
+  padding-right: 18.75rem;
 }
 
-@media screen and (min-width: $device-breakpoint-medium-max-width) {
+@media screen and (min-width: 1279px) {
   .hub-main-view_sidebar_expanded {
-    margin-right: $ovh-sidebar-width;
-    max-width: calc(100% - $ovh-sidebar-width);
+    margin-right: 18.75rem;
+    max-width: calc(100% - 18.75rem);
   }
 }
 
-@media screen and (max-width: $device-breakpoint-medium-max-width) {
+@media screen and (max-width: 1279px) {
   .hub-main-view {
     margin-right: 0;
   }
-  ovh-manager-banner-text .notification-banner {
-    padding-right: 0 !important;
+  #root ovh-manager-banner-text .notification-banner {
+    padding-right: 0;
   }
 }
 
 #root {
   height: inherit;
+}
 
-  .hub-main-view {
-    .minw-0 {
-      min-width: 0;
-    }
+#root .hub-main-view_container {
+  max-width: 80rem; /* 1280px with 16px font size */
+  margin: auto;
+}
 
-    &_container {
-      max-width: 80rem; // 1280px with 16px font size
-      margin: auto;
-    }
-  }
+#root .hub-main-view .minw-0 {
+  min-width: 0;
+}
 
-  .skipnav osds-button {
-    width: 1px;
-    height: 1px;
-    position: fixed;
-    left: -100%;
-    top: auto;
-    overflow: hidden;
-    z-index: -1;
+#root .skipnav osds-button {
+  width: 1px;
+  height: 1px;
+  position: fixed;
+  left: -100%;
+  top: auto;
+  overflow: hidden;
+  z-index: -1;
+}
 
-    &:focus,
-    &:active {
-      width: auto;
-      height: auto;
-      left: 0.625rem;
-      top: 0.625rem;
-      overflow: auto;
-      outline-width: 1px !important;
-      outline-style: dotted !important;
-      outline-color: initial !important;
-      outline-offset: -2px !important;
-      background-color: #fff;
-      z-index: 1100;
-    }
-  }
+#root .skipnav osds-button:focus,
+#root .skipnav osds-button:active {
+  width: auto;
+  height: auto;
+  left: 0.625rem;
+  top: 0.625rem;
+  overflow: auto;
+  outline-width: 1px;
+  outline-style: dotted;
+  outline-color: initial;
+  outline-offset: -2px;
+  background-color: #fff;
+  z-index: 1100;
+}
 
-  .skiptarget {
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    float: right;
-    position: absolute;
-  }
+#root .skiptarget {
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  float: right;
+  position: absolute;
 }
@@ -1,46 +1,35 @@
-@import '@/index.scss';
-
-@mixin manager-hub-billing-summary {
-  $bg-color: #4bb2f6;
-  $bg-image: url('./assets/billing-background.svg');
-
-  background-color: $bg-color;
-  background-image: $bg-image;
+.manager-hub-billing-summary {
+  background-color: #4bb2f6;
+  background-image: url("./assets/billing-background.svg");
   background-repeat: no-repeat;
   background-size: cover;
   color: #fff;
   font-family: 'Source Sans Pro', sans-serif;
   font-weight: 600;
   text-align: center;
-  border-radius: $hub-tile-border-radius;
-  padding: $hub-tile-padding;
+  border-radius: 0.5rem;
+  padding: 1rem 0 1rem 0;
   width: 100%;
+}
 
-  > osds-text,
-  > div > osds-text {
-    color: #fff;
-  }
-
-  p,
-  span {
-    > a {
-      margin-bottom: -1.5rem;
-    }
-  }
+.manager-hub-billing-summary > osds-text,
+.manager-hub-billing-summary > div > osds-text {
+  color: #fff;
+}
 
-  :host(osds-select).select-trigger {
-    background-color: transparent;
-    color: #fff;
-    border-color: #fff;
-    border-width: 2px;
-  }
+.manager-hub-billing-summary p > a,
+.manager-hub-billing-summary span > a {
+  margin-bottom: -1.5rem;
+}
 
-  &__bill-total {
-    font-weight: 600;
-    font-size: calc(2rem + 1vw);
-  }
+.manager-hub-billing-summary :host(osds-select).select-trigger {
+  background-color: transparent;
+  color: #fff;
+  border-color: #fff;
+  border-width: 2px;
 }
 
-.manager-hub-billing-summary {
-  @include manager-hub-billing-summary;
+.manager-hub-billing-summary__bill-total {
+  font-weight: 600;
+  font-size: calc(2rem + 1vw);
 }
@@ -164,7 +164,7 @@ export default function PaymentStatus() {
                     key={`billing_service_skeleton_${line}`}
                     data-testid="payment_status_skeleton_table_row"
                   >
-                    <td scope="row" className="!p-5">
+                    <td className="!p-5">
                       <OsdsSkeleton
                         className="mb-3 block"
                         data-testid="service_name_skeleton"
@@ -178,7 +178,7 @@ export default function PaymentStatus() {
                         size={ODS_SKELETON_SIZE.xs}
                       />
                     </td>
-                    <td scope="row" className="!p-5">
+                    <td className="!p-5">
                       <div className="mb-1 lg:inline">
                         <OsdsSkeleton
                           className="mb-5 block"
@@ -238,7 +238,7 @@ export default function PaymentStatus() {
                       <tbody>
                         {services.map((service: BillingService) => (
                           <tr key={`billing_service_${service.id}`} data-testid="billing_service">
-                            <td scope="row" className="!p-4">
+                            <td className="!p-4">
                               {service.url ? (
                                 <OsdsLink
                                   className="mb-3 block break-all"
@@ -268,7 +268,7 @@ export default function PaymentStatus() {
                                 {tProducts(`manager_hub_products_${service.serviceType}`)}
                               </OsdsText>
                             </td>
-                            <td scope="row" className="!min-w-min !p-4">
+                            <td className="!min-w-min !p-4">
                               <div className="mb-1 lg:inline">
                                 <Suspense
                                   fallback={

@@ -932,15 +932,6 @@ describe('Layout.page', () => {
       expect(tileGridContentSkeleton).not.toBeNull();
     });
 
-    it('should display skeletons', async () => {
-      const { findByTestId } = renderComponent(<Catalog />);
-
-      const tileGridTitleSkeleton = await findByTestId('tile_grid_title_skeleton');
-      const tileGridContentSkeleton = await findByTestId('tile_grid_content_skeletons');
-      expect(tileGridTitleSkeleton).not.toBeNull();
-      expect(tileGridContentSkeleton).not.toBeNull();
-    });
-
     it('should display correct amount of elements', () => {
       mocks.catalog.isLoading = false;
       const { getAllByTestId } = renderComponent(<Catalog />);

@@ -88,9 +88,9 @@ export default function Dashboard() {
           <div className="mb-12">
             {/* Skip content target */}
             <div className="skiptarget">
-              <a id="maincontent" data-testid="main_content">
+              <span id="maincontent" tabIndex={-1} data-testid="main_content">
                 -
-              </a>
+              </span>
             </div>
             {/* /Skip content target */}
             <div className="pt-8">