Merge pull request #20603 from ovh/feat/DCE-34

feat(web-domains): init order webhosting from module federation

Author: SBrendan

packages/manager/apps/web-domains/package.json

@@ -21,6 +21,7 @@
     "test": "manager-test run"
   },
   "dependencies": {
+    "@module-federation/runtime": "^0.21.2",
     "@ovh-ux/manager-common-translations": "^0.23.1",
     "@ovh-ux/manager-config": "^8.7.1",
     "@ovh-ux/manager-core-api": "^0.16.0",

packages/manager/apps/web-domains/src/domain/components/AssociatedServicesCards/Hosting.tsx

@@ -17,6 +17,9 @@ import {
 
 import FreeHostingDrawer from './FreeHostingDrawer';
 import { FREE_HOSTING_PLAN_CODE } from '@/domain/constants/order';
+import { useNavigate } from 'react-router-dom';
+import { useGenerateUrl } from '@/common/hooks/generateUrl/useGenerateUrl';
+import { urls } from '@/domain/routes/routes.constant';
 
 interface HostingProps {
   readonly serviceName: string;
@@ -50,6 +53,7 @@ export default function Hosting({ serviceName }: HostingProps) {
     dnsMx: false,
     consent: false,
   });
+  const navigate = useNavigate();
 
   const { data: associatedHosting } = useGetAssociatedHosting(serviceName);
   const {
@@ -103,6 +107,14 @@ export default function Hosting({ serviceName }: HostingProps) {
       label: t(
         'domain_tab_general_information_associated_services_hosting_action_order',
       ),
+      onClick: () => {
+        navigate(
+          useGenerateUrl(urls.domainTabWebHostingOrder, 'path', {
+            serviceName,
+          }),
+          { replace: true },
+        );
+      },
     },
   ];
 

packages/manager/apps/web-domains/src/domain/components/WebHostingOrder/webHostingOrderComponent.tsx

@@ -0,0 +1,26 @@
+import { Suspense, useContext } from 'react';
+import { WebHostingComponent } from './webHostingOrderModule';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { getLanguageKey } from '@/domain/utils/utils';
+import { useTranslation } from 'react-i18next';
+import Loading from '../Loading/Loading';
+
+export default function WebHostingOrderComponent() {
+  const { i18n } = useTranslation();
+  const {
+    environment: { user },
+  } = useContext(ShellContext);
+  const langCode = getLanguageKey(i18n.language);
+
+  return (
+    <div className="suspend-module">
+      <Suspense fallback={<Loading />}>
+        <WebHostingComponent
+          subsidiary={user.ovhSubsidiary}
+          language={langCode}
+          hostAppName="manager"
+        />
+      </Suspense>
+    </div>
+  );
+}

packages/manager/apps/web-domains/src/domain/components/WebHostingOrder/webHostingOrderModule.tsx

@@ -0,0 +1,68 @@
+import React, { lazy, useEffect, useRef } from 'react';
+import { loadRemote } from '@module-federation/runtime';
+import { Subsidiary } from '@ovh-ux/manager-config';
+import { LangCode } from '@/domain/constants/guideLinks';
+export interface WebHostingOptions {
+  subsidiary: Subsidiary;
+  language?: LangCode;
+  hostAppName?: string;
+}
+
+export interface ConfigoModuleFederationConfiguration {
+  options: WebHostingOptions;
+}
+
+type WebHostingModuleFederationFactory = (
+  slot: HTMLElement,
+  moduleConfiguration: ConfigoModuleFederationConfiguration,
+) => () => void;
+
+export const WebHostingComponent = lazy(() =>
+  loadRemote<{ default: WebHostingModuleFederationFactory }>(
+    'react-order/webhosting',
+  ).then((module) => {
+    if (!module) {
+      throw new Error('Failed to load WebHosting module from react-order');
+    }
+    let factoryFunction = module.default || module;
+    if (typeof factoryFunction === 'object' && factoryFunction.default) {
+      factoryFunction = factoryFunction.default;
+    }
+
+    return {
+      default: ({ subsidiary, language, hostAppName }: WebHostingOptions) => {
+        const containerRef = useRef<HTMLDivElement>(null);
+        useEffect(() => {
+          const container = containerRef.current;
+          if (!container || !subsidiary) {
+            return undefined;
+          }
+
+          const configuration: ConfigoModuleFederationConfiguration = {
+            options: {
+              subsidiary,
+              language,
+              hostAppName,
+            },
+          };
+
+          const cleanup = (factoryFunction as WebHostingModuleFederationFactory)(
+            container,
+            configuration,
+          );
+
+          return () => {
+            if (cleanup && typeof cleanup === 'function') {
+              cleanup();
+            }
+            if (container) {
+              container.innerHTML = '';
+            }
+          };
+        }, [subsidiary, language]);
+
+        return <div ref={containerRef} className="max-w-7xl" />;
+      },
+    };
+  }),
+);

packages/manager/apps/web-domains/src/domain/pages/domainTabs/generalInformations/breadcrumb.tsx

@@ -0,0 +1,49 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+} from '@ovhcloud/ods-react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import config from '@/web-domains.config';
+import { urls } from '@/domain/routes/routes.constant';
+import { useNavigationGetUrl } from '@ovh-ux/manager-react-shell-client';
+
+interface BreadcrumbAnyCastProps {
+  readonly serviceName: string;
+}
+
+export const BreadcrumbWebHostingOrder: React.FC<BreadcrumbAnyCastProps> = ({
+  serviceName,
+}: BreadcrumbAnyCastProps) => {
+  const { t } = useTranslation(['domain']);
+  const detailsUrl = `${urls.domainDetail.replace(
+    ':serviceName',
+    serviceName,
+  )}/information`;
+  const { data: url } = useNavigationGetUrl([config.rootLabel, detailsUrl, {}]);
+  const { data: parentUrl } = useNavigationGetUrl([
+    config.rootLabel,
+    urls.domainRoot,
+    {},
+  ]);
+  return (
+    <Breadcrumb>
+      <BreadcrumbItem>
+        <BreadcrumbLink href={parentUrl}>Domain</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbItem>
+        <BreadcrumbLink href={url}>{serviceName}</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbItem>
+        <BreadcrumbLink>
+          {t(
+            'domain_tab_general_information_associated_services_hosting_action_order',
+          )}
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+    </Breadcrumb>
+  );
+};
+
+export default BreadcrumbWebHostingOrder;

packages/manager/apps/web-domains/src/domain/pages/domainTabs/generalInformations/generalInformations.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { useParams } from 'react-router-dom';
 import { ManagerTile } from '@ovh-ux/manager-react-components';
 import BannerStatus from '@/domain/components/BannerStatus/BannerStatus';
 import GeneralInformationsCards from '@/domain/components/InformationsCards/GeneralInformations';
 import SubscriptionCards from '@/domain/components/SubscriptionCards/SubscriptionCards';
 import AssociatedServicesCards from '@/domain/components/AssociatedServicesCards/AssociatedServicesCards';
+import WebHostingOrderComponent from '@/domain/components/WebHostingOrder/webHostingOrderComponent';
 
 export default function GeneralInformations() {
   const { serviceName } = useParams<{ serviceName: string }>();

packages/manager/apps/web-domains/src/domain/pages/domainTabs/generalInformations/webhostingOrder.tsx

@@ -0,0 +1,57 @@
+import { GUIDES_LIST } from '@/domain/constants/guideLinks';
+import { changelogLinks } from '@/domain/constants/serviceDetail';
+import { getLanguageKey } from '@/domain/utils/utils';
+import {
+  BaseLayout,
+  ChangelogButton,
+  GuideButton,
+  GuideItem,
+  HeadersProps,
+} from '@ovh-ux/manager-react-components';
+import { useTranslation } from 'react-i18next';
+import { Outlet, useHref, useParams } from 'react-router-dom';
+import config from '@/web-domains.config';
+import { urls } from '@/domain/routes/routes.constant';
+import WebHostingOrderComponent from '@/domain/components/WebHostingOrder/webHostingOrderComponent';
+import BreadcrumbWebHostingOrder from './breadcrumb';
+
+export default function WebHostingOrderPage() {
+  const { t, i18n } = useTranslation(['domain', 'web-domains/error']);
+
+  const { serviceName } = useParams<{ serviceName: string }>();
+  const langCode = getLanguageKey(i18n.language);
+
+  const guideItems: GuideItem[] = [
+    {
+      id: 1,
+      href: GUIDES_LIST.domains.url[langCode],
+      target: '_blank',
+      label: t('domain_guide_button_label'),
+    },
+  ];
+  const hrefPrevious = useHref(
+    `/${config.rootLabel}${urls.domainDetail.replace(
+      ':serviceName',
+      serviceName,
+    )}`,
+  );
+
+  const header: HeadersProps = {
+    title: serviceName,
+    changelogButton: <ChangelogButton links={changelogLinks} />,
+    headerButton: <GuideButton items={guideItems} />,
+  };
+  return (
+    <BaseLayout
+      breadcrumb={<BreadcrumbWebHostingOrder serviceName={serviceName} />}
+      header={header}
+      hrefPrevious={`/${hrefPrevious}`}
+      backLinkLabel={t('domain_back_to_service_details')}
+    >
+      <section data-testid="order-component">
+        <WebHostingOrderComponent />
+      </section>
+      <Outlet />
+    </BaseLayout>
+  );
+}

packages/manager/apps/web-domains/src/domain/routes/routes.constant.ts

@@ -6,6 +6,7 @@ export const urls = {
   domainTabZone: '/domain/:serviceName/zone',
   domainTabDns: '/domain/:serviceName/dns',
   domainTabOrderAnycast: '/domain/:serviceName/anycast/order',
+  domainTabWebHostingOrder: '/domain/:serviceName/webhosting/order',
   domainTabDnsModify: '/domain/:serviceName/dns-modify',
   domainTabRedirection: '/domain/:serviceName/redirection',
   domainTabDynHost: '/domain/:serviceName/dynhost',

packages/manager/apps/web-domains/src/domain/routes/routes.tsx

@@ -3,6 +3,7 @@ import { Navigate, Outlet, Route, useParams } from 'react-router-dom';
 import { PageType } from '@ovh-ux/manager-react-shell-client';
 import { ErrorBoundary } from '@ovh-ux/manager-react-components';
 import { urls } from '@/domain/routes/routes.constant';
+import WebHostingOrderPage from '../pages/domainTabs/generalInformations/webhostingOrder';
 
 const LayoutPage = React.lazy(() => import('@/domain/pages/layout'));
 const DomainListingPage = React.lazy(() =>
@@ -102,6 +103,10 @@ export default (
         />
       </Route>
       <Route path={urls.domainTabOrderAnycast} Component={AnycastOrderPage} />
+      <Route
+        path={urls.domainTabWebHostingOrder}
+        Component={WebHostingOrderPage}
+      />
       <Route path={urls.domainTabDnsModify} Component={DnsModifyPage} />
       <Route
         path={urls.domainOnboarding}

packages/manager/apps/web-domains/src/domain/utils/module-federation-runtime.ts

@@ -0,0 +1,32 @@
+import { init } from '@module-federation/runtime';
+
+const isStagingEnvironment = /\.dtci\./.test(window.location.hostname);
+const isLocal = /localhost|127\.0\.0\.1/.test(window.location.hostname);
+
+const getWillOrderUrl = () => {
+  if (isStagingEnvironment) {
+    return 'https://ovhcloudcomdev.static.ovh.net/order/builder/assets/remoteEntry.js';
+  }
+  // Run module federation in local mode `yarn dev:mf`
+  if (isLocal) {
+    return 'http://localhost:5001/assets/remoteEntry.js';
+  }
+  return '/order/builder/assets/remoteEntry.js';
+};
+
+/**
+ * Initialize Module Federation runtime
+ * Called once at application startup (see index.tsx)
+ */
+export const initModuleFederation = (): void => {
+  init({
+    name: 'webhosting',
+    remotes: [
+      {
+        name: 'react-order',
+        entry: getWillOrderUrl(),
+        type: 'module',
+      },
+    ],
+  });
+};