From 57ecdb789d277b826a1ad866dbc09088582dbf73 Mon Sep 17 00:00:00 2001 From: Yann Lojewski Date: Thu, 28 Nov 2024 17:51:18 +0100 Subject: [PATCH] fix(pci.instances): use shell to navigate to public-ip (#13948) ref: TAPC-876 Signed-off-by: Yann Lojewski --- .../input/RegionInput.component.tsx | 4 +- .../src/pages/order/Order.page.tsx | 18 +++++- .../src/pages/order/hooks/useParams.ts | 56 +++++++++++++++++++ .../project/instances/instances.routing.js | 11 ++-- 4 files changed, 81 insertions(+), 8 deletions(-) create mode 100644 packages/manager/apps/pci-public-ip/src/pages/order/hooks/useParams.ts diff --git a/packages/manager/apps/pci-public-ip/src/components/input/RegionInput.component.tsx b/packages/manager/apps/pci-public-ip/src/components/input/RegionInput.component.tsx index ef7ca326eb34..34262b4b7a71 100644 --- a/packages/manager/apps/pci-public-ip/src/components/input/RegionInput.component.tsx +++ b/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(null); + const [selectedMacroName, setSelectedMacroName] = useState( + value?.macroName || null, + ); const isDesktop: boolean = useMedia(`(min-width: 760px)`); const isMacroRegionStandalone = useCallback( diff --git a/packages/manager/apps/pci-public-ip/src/pages/order/Order.page.tsx b/packages/manager/apps/pci-public-ip/src/pages/order/Order.page.tsx index c887a74901aa..13f5968462ae 100644 --- a/packages/manager/apps/pci-public-ip/src/pages/order/Order.page.tsx +++ b/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 ( <> diff --git a/packages/manager/apps/pci-public-ip/src/pages/order/hooks/useParams.ts b/packages/manager/apps/pci-public-ip/src/pages/order/hooks/useParams.ts new file mode 100644 index 000000000000..22f354d02cd7 --- /dev/null +++ b/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]); +}; diff --git a/packages/manager/modules/pci/src/projects/project/instances/instances.routing.js b/packages/manager/modules/pci/src/projects/project/instances/instances.routing.js index 140ee2da61f0..efd02ffc43ce 100644 --- a/packages/manager/modules/pci/src/projects/project/instances/instances.routing.js +++ b/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®ion=${instance.region}&instance=${instance.id}`, + ) : null; }, );