sync: master to develop

ovh · Oct 21, 2024 · 63b5471 · 63b5471
2 parents 1c357b7 + 2343d35
commit 63b5471
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 42 deletions.
diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/onboarding/introduction.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/onboarding/introduction.tsx
@@ -102,7 +102,7 @@ export const OnboardingIntroduction = () => {
             className={`${style.welcomePopover} ${popoverStyle.popover} oui-popover`}
             ref={ref}
           >
-            <div className="oui-popover__content">
+            <div className={style.welcomePopoverBody}>
               <h2 className={popoverStyle['popover-header']}>
                 {t('onboarding_introduction_popover_title', {
                   userName: user.firstname,
@@ -111,23 +111,22 @@ export const OnboardingIntroduction = () => {
               <div className={popoverStyle['popover-body']}>
                 <p>{t('onboarding_introduction_popover_content')}</p>
               </div>
-              <div className="d-flex flex-row-reverse justify-content-between">
-                <button
-                  className="oui-button oui-button_primary"
-                  onClick={() => startOnboarding()}
-                  ref={refConfirm}
-                >
-                  {t('onboarding_popover_follow_guide_button')}
-                </button>
-                <button
-                  className="oui-button oui-button_ghost"
-                  onClick={() => closeOnboarding()}
-                >
-                  {onboarding.shouldShowOnboardingNextTime ? t('onboarding_popover_later_hide_button') : t('onboarding_popover_do_not_show_again_button')}
-                </button>
-              </div>
             </div>
-            <div className="oui-popover__arrow" aria-hidden="true"></div>
+            <div className={style.welcomePopoverFooter}>
+              <button
+                className="oui-button oui-button_ghost"
+                onClick={() => closeOnboarding()}
+              >
+                {onboarding.shouldShowOnboardingNextTime ? t('onboarding_popover_later_hide_button') : t('onboarding_popover_do_not_show_again_button')}
+              </button>
+              <button
+                className="oui-button oui-button_primary"
+                onClick={() => startOnboarding()}
+                ref={refConfirm}
+              >
+                {t('onboarding_popover_follow_guide_button')}
+              </button>
+            </div>
           </div>
         </>
       )}

diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/onboarding/style.module.scss b/packages/manager/apps/container/src/container/nav-reshuffle/onboarding/style.module.scss
@@ -17,7 +17,40 @@
 }
 
 .welcomePopover {
-  max-width: 22.5rem !important;
+  width: 22.5rem !important;
+
+  min-width: unset !important;
+  max-width: unset !important;
+
   top: 3rem !important;
   right: 1.875rem !important;
+
+  .welcomePopoverBody {
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  .welcomePopoverFooter {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 0.5rem;
+    min-width: 100%;
+  }
 }
+
+@media (max-width: $device-breakpoint-tablet-max-width) {
+  .welcomePopover {
+    right: 0 !important;
+
+    .welcomePopoverFooter {
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
+    button {
+      width: 100%;
+    }
+  }
+}
diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/onboarding/walkMe/index.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/onboarding/walkMe/index.tsx
@@ -57,7 +57,7 @@ export const OnboardingWalkMe = () => {
   const steps = [
     {
       selector: '#header-user-menu-button',
-      placement: 'bottom-start',
+      placement: 'bottom-end',
       title: t('onboarding_walkme_popover_step1_title'),
       content: t('onboarding_walkme_popover_step1_content'),
       trackingVariant: 'my_account',
@@ -85,16 +85,16 @@ export const OnboardingWalkMe = () => {
     {
       selector: 'services',
       placement: 'left-start',
-      mobilePlacement: 'bottom-start',
+      mobilePlacement: 'right-start',
       title: t('onboarding_walkme_popover_step3_title'),
       content: t('onboarding_walkme_popover_step3_content'),
       trackingVariant: 'my_services',
       trackingLabel: 'see_products',
     },
     {
       selector: '#useful-links',
-      placement: 'top-start',
-      mobilePlacement: 'top-start',
+      placement: 'right-end',
+      mobilePlacement: 'right-end',
       title: t('onboarding_walkme_popover_step4_title'),
       content: t('onboarding_walkme_popover_step4_content'),
       trackingVariant: '',
@@ -112,19 +112,19 @@ export const OnboardingWalkMe = () => {
     },
   ];
 
-  const currentStepRank = useMemo(() => currentStepIndex + 1,[currentStepIndex]);
-  const isLastStep = useMemo(() => currentStepIndex === (steps.length - 1),[currentStepIndex]);
-  
+  const currentStepRank = useMemo(() => currentStepIndex + 1, [currentStepIndex]);
+  const isLastStep = useMemo(() => currentStepIndex === (steps.length - 1), [currentStepIndex]);
+
   useEffect(() => {
     const currentStep = steps[currentStepIndex]
-    if(currentStep){
+    if (currentStep) {
       trackingPlugin.trackPage(`product-navigation-reshuffle::version_V3::modal_guided_tour::step-${currentStepRank}::${currentStep.trackingLabel}`);
     }
   }, [currentStepIndex]);
 
   const onHideBtnClick = (isDone?: boolean) => {
     const currentStep = steps[currentStepIndex];
-    if(!isLastStep){
+    if (!isLastStep) {
       trackingPlugin.trackClick({
         name: `modal_guided_tour_version_V3::product-navigation-reshuffle::step-${currentStepRank}::${currentStep.trackingLabel}::decline_modal_guided_tour`,
         type: 'action',
@@ -157,7 +157,7 @@ export const OnboardingWalkMe = () => {
 
   const onNextBtnClick = () => {
     const currentStep = steps[currentStepIndex];
-    if(!isLastStep){
+    if (!isLastStep) {
       trackingPlugin.trackClick({
         name: `modal_guided_tour_version_V3::product-navigation-reshuffle::step-${currentStepRank}::${currentStep.trackingLabel}::go_to_next_step`,
         type: 'action',
@@ -305,9 +305,16 @@ export const OnboardingWalkMe = () => {
           <div className={`${popoverStyle['popover-body']} mb-3`}>
             {steps[currentStepIndex].content}
           </div>
-          <div className="d-flex flex-row-reverse justify-content-between">
+
+          <div className={style['onboarding-walkme_popover_footer']}>
             {currentStepIndex + 1 < steps.length ?
               <>
+                <button
+                  className="oui-button oui-button_ghost"
+                  onClick={() => onHideBtnClick()}
+                >
+                  {t('onboarding_popover_hide_button')}
+                </button>
                 <button
                   className="oui-button oui-button_primary"
                   onClick={onNextBtnClick}
@@ -317,12 +324,6 @@ export const OnboardingWalkMe = () => {
                     total: steps.length,
                   })}
                 </button>
-                <button
-                  className="oui-button oui-button_ghost"
-                  onClick={() => onHideBtnClick()}
-                >
-                  {t('onboarding_popover_hide_button')}
-                </button>
               </> :
               <button
                 className="oui-button oui-button_primary"

diff --git a/...es/manager/apps/container/src/container/nav-reshuffle/onboarding/walkMe/style.module.scss b/...es/manager/apps/container/src/container/nav-reshuffle/onboarding/walkMe/style.module.scss
@@ -24,6 +24,14 @@ $walk-me-z-index: $base-z-index-popover + 100;
   &_popover {
     z-index: $walk-me-z-index + 1 !important;
 
+    &_footer {
+      display: flex;
+      justify-content: space-between;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+      min-width: 100%;
+    }
+
     &[x-placement=''],
     &[x-placement^='bottom'] {
       margin-top: 0.75rem !important;
@@ -58,3 +66,18 @@ $walk-me-z-index: $base-z-index-popover + 100;
     }
   }
 }
+
+@media (max-width: $device-breakpoint-tablet-max-width) {
+  .onboarding-walkme {
+    &_popover {
+      &_footer {
+        flex-direction: column;
+        gap: 0.5rem;
+
+        button {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx
@@ -68,6 +68,7 @@ const Sidebar = (): JSX.Element => {
   const [savedNodeID, setSavedNodeID] = useState<string>(
     window.localStorage.getItem(savedLocationKey),
   );
+  const [isManuallyClosed, setIsManuallyClosed] = useState<boolean>(false);
 
   // Memoized calls
 
@@ -236,11 +237,13 @@ const Sidebar = (): JSX.Element => {
 
   const closeSubMenu = () => {
     setShowSubTree(false);
+    setIsManuallyClosed(true);
   };
 
   const menuClickHandler = (node: Node) => {
     setSelectedSubMenu(null);
     selectLvl1Node(node)
+    setIsManuallyClosed(false);
 
     let trackingIdComplement = 'navbar_v3_entry_home::';
     const history = findPathToNode(
@@ -381,7 +384,7 @@ const Sidebar = (): JSX.Element => {
         </button>
         </div>
       </div>
-      {showSubTree && (
+      {showSubTree && !isManuallyClosed && (
         <SubTree
           handleBackNavigation={() => {
             if (isMobile) setSelectedNode(null);

diff --git a/packages/manager/apps/container/src/core/routing/iframe-app-router.tsx b/packages/manager/apps/container/src/core/routing/iframe-app-router.tsx
@@ -41,10 +41,10 @@ function makeRoute({
 function makeDefaultRoute({
   configuration,
 }: {
-  configuration: Record<string, Application>;
+  configuration: [string, Application][];
 }) {
   const [, defaultApp] =
-    Object.entries(configuration).find(
+    configuration.find(
       ([, appConfig]) => appConfig.container.isDefault,
     ) || [];
   if (!defaultApp) {
@@ -67,15 +67,21 @@ export function IFrameAppRouter({
   configuration,
   iframeRef,
 }: IFrameAppRouterProps): JSX.Element {
-  const defaultRoute = useMemo(() => makeDefaultRoute({ configuration }), [
-    configuration,
+  // We order applications configurations by hash size, as a configuration with a hash means we want a route to be
+  // redirected to this application. As a result we need to have them first, so they take priority over routes from
+  // which we want to be redirected
+  const sortedConfiguration = useMemo(() => Object.entries(configuration).sort(([, appAConfig], [, appBConfig]) =>
+    (appBConfig.container.hash || "").length - (appAConfig.container.hash || "").length
+  ), [configuration])
+  const defaultRoute = useMemo(() => makeDefaultRoute({ configuration: sortedConfiguration }), [
+    sortedConfiguration,
   ]);
   const routes = useMemo(
     () =>
-      Object.entries(configuration).map(([id, appConfig]) =>
+      sortedConfiguration.map(([id, appConfig]) =>
         makeRoute({ appConfig, iframeRef, id }),
       ),
-    [configuration],
+    [sortedConfiguration],
   );
   const redirections = useMemo(() => Redirections(), []);
   return (

diff --git a/packages/manager/apps/container/src/index.tsx b/packages/manager/apps/container/src/index.tsx
@@ -62,6 +62,7 @@ initShell().then((shell) => {
           lng: locale,
           fallbackLng: 'fr_FR',
           ns: [], // namespaces to load by default
+          load: 'currentOnly',
           backend: {
             // path construction for async load, ns: namespace, lng: locale
             loadPath: (lngs: string[], namespaces: string[]) => {