Skip to content

feat(pnr): update modal beta #16841

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat(pnr): update modal beta #16841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a742114
feat(pnr): update modal beta
aottr Jan 30, 2025
9342a37
fix(i18n): add missing translations [CDS 346]
MaximeBajeux Apr 17, 2025
d844b34
fix(container): concurrency issue on default public cloud project sel…
May 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 85 additions & 0 deletions .../apps/container/src/container/common/pnr-beta-modal/NavReshuffleBetaAccessModalLegacy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import React, { useEffect, useState } from 'react';

import { useTranslation } from 'react-i18next';

import useContainer from '@/core/container';
import style from './style.module.scss';

import backgroundImage from '@/assets/images/pnr/background.png';
import previewImage from '@/assets/images/pnr/preview.png';
import { useShell } from '@/context';


function NavReshuffleBetaAccessModal(): JSX.Element {
const { t } = useTranslation('beta-modal');
const shell = useShell();
const trackingPlugin = shell.getPlugin('tracking');
const { betaAcknowledged, acknowledgeBeta } = useContainer();
const [submitting, setSubmitting] = useState(false);

async function onAccept() {
setSubmitting(true);
trackingPlugin.trackClick({
name: 'switch_versionpopin_V3::product-navigation-reshuffle::go_to_new_version',
type: 'action',
});
return acknowledgeBeta();
}

async function onDecline() {
setSubmitting(false);
trackingPlugin.trackClick({
name: 'switch_versionpopin_V3::product-navigation-reshuffle:::decline_new_version',
type: 'action',
});
}

useEffect(() => {
if (betaAcknowledged) {
trackingPlugin.trackPage('product-navigation-reshuffle::switch_version_V3::go_to_new_version');
}
}, [betaAcknowledged]);

return (
<div className={`${style.backdrop} ${betaAcknowledged ? '' : style.hidden}`}>
<div
className={`${style.modal} ${submitting ? style.hidden : ''}`}
style={{ backgroundImage: `url(${backgroundImage})` }}
role="dialog"
aria-modal="true"
>
<div className={style.leftCol}>
<h1>{t('beta_modal_title')}</h1>
<p>{t('beta_modal_infos')}</p>
<button
type="button"
className="oui-button oui-button_primary mb-2"
onClick={onAccept}
>
{t('beta_modal_accept_old')}
</button>
<button
type="button"
className="oui-button oui-button_link"
onClick={onDecline}
>
<span>{t('beta_modal_decline')}</span>
<span
className="oui-icon oui-icon-arrow-right"
aria-hidden="true"
></span>
</button>
</div>
<div className={style.rightCol}>
<img
src={previewImage}
alt={t('beta_modal_screenshot')}
aria-hidden="true"
/>
</div>
</div>
</div>
);
}

export default NavReshuffleBetaAccessModal;
121 changes: 70 additions & 51 deletions packages/manager/apps/container/src/container/common/pnr-beta-modal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,84 +3,103 @@ import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

import useContainer from '@/core/container';
import style from './style.module.scss';

import backgroundImage from '@/assets/images/pnr/background.png';
import previewImage from '@/assets/images/pnr/preview.png';
import { useShell } from '@/context';
import { OsdsButton, OsdsText } from '@ovhcloud/ods-components/react';
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import {
ODS_BUTTON_SIZE,
ODS_TEXT_LEVEL,
ODS_TEXT_SIZE,
} from '@ovhcloud/ods-components';

function NavReshuffleBetaAccessModal(): JSX.Element {
const { t } = useTranslation('beta-modal');
const shell = useShell();
const trackingPlugin = shell.getPlugin('tracking');
const { askBeta, createBetaChoice } = useContainer();
const [submitting, setSubmitting] = useState(false);
const user = shell
.getPlugin('environment')
.getEnvironment()
.getUser();
const { betaAcknowledged, acknowledgeBeta } = useContainer();

async function onAccept() {
setSubmitting(true);
trackingPlugin.trackClick({
name:
'switch_versionpopin_V3::product-navigation-reshuffle::go_to_new_version',
type: 'action',
});
return createBetaChoice(true).then(() => window.location.reload());
}

async function onDecline() {
setSubmitting(true);
trackingPlugin.trackClick({
name:
'switch_versionpopin_V3::product-navigation-reshuffle:::decline_new_version',
type: 'action',
});
return createBetaChoice(false).then(() => window.location.reload());
acknowledgeBeta();
}

useEffect(() => {
if (askBeta) {
trackingPlugin.trackPage(
'product-navigation-reshuffle::switch_version_V3::go_to_new_version',
);
}
}, [askBeta]);
if (betaAcknowledged) return null;

return (
<div className={`${style.backdrop} ${askBeta ? '' : style.hidden}`}>
<div
className="absolute top-0 left-0 right-0 bottom-0 z-[2000] flex items-center justify-center"
style={{
backgroundColor: 'rgba(0, 80, 215, 0.75)',
}}
>
<div
className={`${style.modal} ${submitting ? style.hidden : ''}`}
style={{ backgroundImage: `url(${backgroundImage})` }}
className="min-w-[30rem] max-w-[40rem] rounded-lg bg-white shadow-xl p-8"
style={{
backgroundImage: `url(${backgroundImage})`,
backgroundSize: 'cover',
}}
role="dialog"
aria-modal="true"
>
<div className={style.leftCol}>
<h1>{t('beta_modal_title')}</h1>
<p>{t('beta_modal_infos')}</p>
<button
type="button"
className="oui-button oui-button_primary mb-2"
onClick={onAccept}
<OsdsText
color={ODS_THEME_COLOR_INTENT.primary}
level={ODS_TEXT_LEVEL.heading}
size={ODS_TEXT_SIZE._300}
>
{t('beta_modal_title')}
</OsdsText>
<div className="flex flex-col gap-1 mt-2 mb-4">
<OsdsText
color={ODS_THEME_COLOR_INTENT.text}
size={ODS_TEXT_SIZE._400}
level={ODS_TEXT_LEVEL.body}
className="mb-0"
>
{t('beta_modal_accept')}
</button>
<button
type="button"
className="oui-button oui-button_link"
onClick={onDecline}
{t('beta_modal_greeting', { user: user.firstname })}
</OsdsText>
<OsdsText
color={ODS_THEME_COLOR_INTENT.text}
size={ODS_TEXT_SIZE._400}
level={ODS_TEXT_LEVEL.body}
className="mb-2"
>
<span>{t('beta_modal_decline')}</span>
<span
className="oui-icon oui-icon-arrow-right"
aria-hidden="true"
></span>
</button>
</div>
<div className={style.rightCol}>
<img
src={previewImage}
alt={t('beta_modal_screenshot')}
aria-hidden="true"
/>
{t('beta_modal_welcome')}
</OsdsText>
<OsdsText
color={ODS_THEME_COLOR_INTENT.text}
size={ODS_TEXT_SIZE._400}
level={ODS_TEXT_LEVEL.body}
className="mb-2"
>
{t('beta_modal_info')}
</OsdsText>
<OsdsText
color={ODS_THEME_COLOR_INTENT.text}
size={ODS_TEXT_SIZE._400}
level={ODS_TEXT_LEVEL.body}
>
{t('beta_modal_explore')}
</OsdsText>
</div>
<OsdsButton
color={ODS_THEME_COLOR_INTENT.primary}
size={ODS_BUTTON_SIZE.sm}
onClick={onAccept}
inline
>
{t('beta_modal_accept')}
</OsdsButton>
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/apps/container/src/container/common/pnr-beta-modal/style.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,4 +53,4 @@ $z-index-backdrop: 2000;

.hidden {
display: none;
}
}
1 change: 0 additions & 1 deletion packages/manager/apps/container/src/container/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@ export default function Container(): JSX.Element {
style={{ position: 'absolute' }}
></LiveChat>
</ProgressProvider>

<Suspense fallback="">
<SSOAuthModal />
</Suspense>
Expand Down
11 changes: 8 additions & 3 deletions packages/manager/apps/container/src/container/legacy/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import usePreloader from '../common/Preloader/usePreloader';
import useContainer from '@/core/container';
import useMfaEnrollment from '@/container/mfa-enrollment';
import MfaEnrollment from '@/container/mfa-enrollment/MfaEnrollment';
import NavReshuffleBetaAccessModalLegacy from '../common/pnr-beta-modal/NavReshuffleBetaAccessModalLegacy';

function LegacyContainer(): JSX.Element {
const iframeRef = useRef(null);
Expand All @@ -37,6 +38,8 @@ function LegacyContainer(): JSX.Element {
hideMfaEnrollment,
} = useMfaEnrollment();

const isUS = shell?.getPlugin('environment')?.getEnvironment()?.getRegion() === 'US';

useEffect(() => {
setIframe(iframeRef.current);
shell.setMessageBus(new IFrameMessageBus(iframeRef.current));
Expand All @@ -61,9 +64,11 @@ function LegacyContainer(): JSX.Element {
<Progress isAnimating={isProgressAnimating}></Progress>

<div className={style.managerShell}>
<Suspense fallback="">
<NavReshuffleBetaAccessModal />
</Suspense>
{isUS && (
<Suspense fallback="">
<NavReshuffleBetaAccessModalLegacy />
</Suspense>
)}
<div>
<LegacyHeader />
</div>
Expand Down
12 changes: 10 additions & 2 deletions packages/manager/apps/container/src/container/nav-reshuffle/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Suspense, useEffect, useRef, useState } from 'react';

import { lazy, Suspense, useEffect, useRef, useState } from 'react';
import { IFrameMessageBus } from '@ovh-ux/shell';
import { IFrameAppRouter } from '@/core/routing';
import { useShell } from '@/context';
Expand All @@ -16,6 +15,8 @@ import usePreloader from '../common/Preloader/usePreloader';
import useMfaEnrollment from '@/container/mfa-enrollment';
import MfaEnrollment from '@/container/mfa-enrollment/MfaEnrollment';

const BetaAccessModal = lazy(() => import('@/container/common/pnr-beta-modal'));

function NavReshuffleContainer(): JSX.Element {
const iframeRef = useRef(null);
const [iframe, setIframe] = useState(null);
Expand Down Expand Up @@ -49,13 +50,20 @@ function NavReshuffleContainer(): JSX.Element {
}
};

const isUS = shell?.getPlugin('environment')?.getEnvironment()?.getRegion() === 'US';

useEffect(() => {
setIframe(iframeRef.current);
shell.setMessageBus(new IFrameMessageBus(iframeRef.current));
}, [iframeRef]);

return (
<div className={style.navReshuffle}>
{!isUS && (
<Suspense fallback={<></>}>
<BetaAccessModal />
</Suspense>
)}
<div
className={`${style.sidebar} ${
isNavigationSidebarOpened ? '' : style.hidden
Expand Down
9 changes: 5 additions & 4 deletions ...s/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/PublicCloudPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export const PublicCloudPanel: React.FC<ComponentProps<
},
});

const { data: defaultPciProject } = useDefaultPublicCloudProject({
const { data: defaultPciProject, isFetched: isDefaultProjectFetched } = useDefaultPublicCloudProject({
select: (defaultProjectId: string | null): PciProject | null => {
return defaultProjectId !== null
? pciProjects?.find(
Expand Down Expand Up @@ -111,13 +111,14 @@ export const PublicCloudPanel: React.FC<ComponentProps<
}
if (project) {
setSelectedPciProject(project);
} else if (defaultPciProject !== null) {
} else if (defaultPciProject) {
setSelectedPciProject(defaultPciProject);
} else {
} else if (isDefaultProjectFetched) {
// In order to avoid loading the first project before loading the default project, we'll wait till the default project has been loaded
setSelectedPciProject(pciProjects[0]);
}
}
}, [rootNode, containerURL, pciProjects]);
}, [rootNode, containerURL, pciProjects, defaultPciProject]);

useEffect(() => {
if (
Expand Down
Loading
Loading