fix(pci.instances): use shell to navigate to public-ip (#13948)

ref: TAPC-876

Signed-off-by: Yann Lojewski <[email protected]>

packages/manager/apps/pci-public-ip/src/components/input/RegionInput.component.tsx

@@ -36,7 +36,9 @@ export const RegionInputComponent = ({
   onInput,
 }: TProps): JSX.Element => {
   const { me } = useMe();
-  const [selectedMacroName, setSelectedMacroName] = useState<string>(null);
+  const [selectedMacroName, setSelectedMacroName] = useState<string | null>(
+    value?.macroName || null,
+  );
   const isDesktop: boolean = useMedia(`(min-width: 760px)`);
 
   const isMacroRegionStandalone = useCallback(

packages/manager/apps/pci-public-ip/src/pages/order/Order.page.tsx

@@ -21,7 +21,9 @@ import { FailoverSteps } from '@/pages/order/steps/FailoverSteps';
 import { FloatingSteps } from '@/pages/order/steps/FloatingSteps';
 import { IPTypeEnum } from '@/api/types';
 import { useOrderStore } from '@/pages/order/hooks/useStore';
+import { useOrderParams } from '@/pages/order/hooks/useParams';
 import { initStartupSteps } from '@/pages/order/utils/startupSteps';
+import { useData } from '@/api/hooks/useData';
 
 export default function OrderPage(): JSX.Element {
   const { projectId } = useParams();
@@ -33,9 +35,12 @@ export default function OrderPage(): JSX.Element {
   const { t: tOrder } = useTranslation('order');
   const { t: tStepper } = useTranslation('stepper');
 
-  const { form, setSteps } = useOrderStore();
+  const { form, setSteps, setForm } = useOrderStore();
   const { data: project } = useProject();
 
+  const { state } = useData(projectId, context.environment.getRegion());
+  const orderParams = useOrderParams(state);
+
   const [projectUrl, setProjectUrl] = useState('');
   const backLink = useHref('..');
 
@@ -51,6 +56,17 @@ export default function OrderPage(): JSX.Element {
     setSteps(initStartupSteps());
   }, []);
 
+  useEffect(() => {
+    const { ipType, failoverCountry, floatingRegion, instance } = orderParams;
+    setForm({
+      ...form,
+      ...(ipType && { ipType }),
+      ...(failoverCountry && { failoverCountry }),
+      ...(floatingRegion && { floatingRegion }),
+      ...(instance && { instance }),
+    });
+  }, [orderParams]);
+
   return (
     <>
       <HidePreloader />

packages/manager/apps/pci-public-ip/src/pages/order/hooks/useParams.ts

@@ -0,0 +1,56 @@
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { TInstance } from '@ovh-ux/manager-pci-common';
+import { TDataState } from '@/api/hooks/useData';
+import { IPTypeEnum, TCountry, TRegion } from '@/api/types';
+
+export type OrderParams = {
+  ipType: IPTypeEnum | null;
+  failoverCountry: TCountry | null;
+  floatingRegion: TRegion | null;
+  instance: TInstance | null;
+};
+
+export const useOrderParams = (state: TDataState) => {
+  const [searchParams] = useSearchParams();
+
+  return useMemo((): OrderParams => {
+    const searchParamsIpType = searchParams.get('ipType') as IPTypeEnum;
+    const searchParamsRegion = searchParams.get('region');
+    const searchParamsInstance = searchParams.get('instance');
+
+    let ipType: IPTypeEnum | null = null;
+    let failoverCountry: TCountry | null = null;
+    let floatingRegion: TRegion | null = null;
+    let instance: TInstance | null = null;
+
+    if (Object.values(IPTypeEnum).includes(searchParamsIpType)) {
+      ipType = searchParamsIpType;
+    }
+
+    if (ipType === IPTypeEnum.FAILOVER && searchParamsRegion) {
+      failoverCountry = state.countries.find(
+        ({ name }) => name === searchParamsRegion,
+      );
+    }
+
+    if (ipType === IPTypeEnum.FLOATING && searchParamsRegion) {
+      floatingRegion = state.regions.find(
+        ({ name }) => name === searchParamsRegion,
+      );
+    }
+
+    if (searchParamsInstance) {
+      instance = state.instances.all.find(
+        ({ id }) => id === searchParamsInstance,
+      );
+    }
+
+    return {
+      ipType,
+      failoverCountry,
+      floatingRegion,
+      instance,
+    };
+  }, [searchParams, state.countries, state.instances.all, state.regions]);
+};

packages/manager/modules/pci/src/projects/project/instances/instances.routing.js

@@ -159,6 +159,7 @@ export default /* @ngInject */ ($stateProvider) => {
         projectId,
         trackGridAction,
         checkFloatingIpAvailability,
+        ovhShell,
       ) => (instance) => {
         trackGridAction('assign-floating-ip');
         if (instance.privateIpV4.length === 0) {
@@ -173,12 +174,10 @@ export default /* @ngInject */ ($stateProvider) => {
         return checkFloatingIpAvailability(instance.region).then(
           (isFloatingIpAvailableInInstanceRegion) => {
             return isFloatingIpAvailableInInstanceRegion
-              ? $state.go('pci.projects.project.additional-ips.order', {
-                  projectId,
-                  ipType: 'floating_ip',
-                  region: instance.region,
-                  instance: instance.id,
-                })
+              ? ovhShell.navigation.navigateTo(
+                  'public-cloud',
+                  `/pci/projects/${projectId}/public-ips/order?ipType=floating_ip&region=${instance.region}&instance=${instance.id}`,
+                )
               : null;
           },
         );