feat(vrack-services): redirect to hub if app is feature-flipped

ref: MANAGER-14601

Signed-off-by: Nicolas Pierre-charles <nicolas.pierre-charles.ext@corp.ovh.com>

packages/manager/apps/vrack-services/e2e/features/availability.feature

@@ -0,0 +1,13 @@
+Feature: vRack Services feature availability
+
+  Scenario Outline: User gets redirected if vRack Services feature is not available
+    Given Feature availability service is <apiOk>
+    Given vRack Services feature is <availability>
+    When User navigates to vRack Services Listing page
+    Then User "<isRedirected>" redirected to HUB
+
+    Examples:
+      | apiOk | availability | isRedirected |
+      | ok    | available    | is not       |
+      | ko    | available    | is           |
+      | ok    | unavailable  | is           |

packages/manager/apps/vrack-services/e2e/step-definitions/api.step.ts

@@ -91,3 +91,18 @@ Given('The service to {word} a {word} is {word}', function(
     this.testContext.message = successMessageByAction[action];
   }
 });
+
+Given('Feature availability service is {word}', function(
+  this: ICustomWorld<ConfigParams>,
+  okOrKo: 'ok' | 'ko',
+) {
+  this.handlersConfig.isAvailabilityServiceKo = okOrKo === 'ko';
+});
+
+Given('vRack Services feature is {word}', function(
+  this: ICustomWorld<ConfigParams>,
+  availability: 'available' | 'unavailable',
+) {
+  this.handlersConfig.isVrackServicesUnavailable =
+    availability === 'unavailable';
+});

packages/manager/apps/vrack-services/e2e/step-definitions/then.step.ts

@@ -454,3 +454,15 @@ Then('User sees the create a {word} button {word}', async function(
     await expect(button).toHaveAttribute('disabled');
   }
 });
+
+Then('User {string} redirected to HUB', async function(
+  this: ICustomWorld<ConfigParams>,
+  isRedirected: 'is' | 'is not',
+) {
+  if (isRedirected === 'is') {
+    await expect(this.page).toHaveURL(/.*\/#\/hub/);
+  } else {
+    const description = await this.page.getByText(labels.listingDescription);
+    await expect(description).toBeVisible();
+  }
+});

packages/manager/apps/vrack-services/mocks/availability/index.ts

@@ -0,0 +1,22 @@
+import { Handler } from '@playwright-helpers';
+
+export type GetAvailabilityMocksParams = {
+  isVrackServicesUnavailable?: boolean;
+  isAvailabilityServiceKo?: boolean;
+};
+
+export const getAvailabilityMocks = ({
+  isVrackServicesUnavailable = false,
+  isAvailabilityServiceKo = false,
+}: GetAvailabilityMocksParams): Handler[] => [
+  {
+    url: '/feature/vrack-services/availability',
+    response: isAvailabilityServiceKo
+      ? { message: 'availability service error' }
+      : {
+          'vrack-services': !isVrackServicesUnavailable,
+        },
+    status: isAvailabilityServiceKo ? 500 : 200,
+    api: 'aapi',
+  },
+];

packages/manager/apps/vrack-services/mocks/handlers.ts

@@ -18,14 +18,19 @@ import {
   GetAuthenticationMocks,
   getAuthenticationMocks,
 } from '../../../../../playwright-helpers/mocks/auth';
+import {
+  getAvailabilityMocks,
+  GetAvailabilityMocksParams,
+} from './availability';
 
 export type ConfigParams = GetVrackServicesMocksParams &
   GetAuthenticationMocks &
   GetOrderDetailsMocksParams &
   GetRegionMocksParams &
   GetVrackMocksParams &
   GetServicesMocksParams &
-  GetIamMocksParams;
+  GetIamMocksParams &
+  GetAvailabilityMocksParams;
 
 export const getConfig = (params: ConfigParams): Handler[] =>
   [
@@ -36,4 +41,5 @@ export const getConfig = (params: ConfigParams): Handler[] =>
     getOrderDetailsMocks,
     getServicesMocks,
     getIamMocks,
+    getAvailabilityMocks,
   ].flatMap((getMocks) => getMocks(params));

packages/manager/apps/vrack-services/mocks/setup.ts

@@ -12,6 +12,7 @@ export const setupMocks = async () =>
         deliveringVrackOrders: false,
         isAuthMocked: true,
         updateServicesKo: true,
+        isAvailabilityServiceKo: true,
       }),
     ),
   ).start({

packages/manager/apps/vrack-services/package.json

@@ -25,6 +25,7 @@
     "@ovh-ux/manager-config": "^7.3.2",
     "@ovh-ux/manager-core-api": "*",
     "@ovh-ux/manager-module-order": "^0.3.1",
+    "@ovh-ux/manager-react-core-application": "*",
     "@ovh-ux/manager-react-shell-client": "^0.6.1",
     "@ovh-ux/manager-tailwind-config": "*",
     "@ovh-ux/request-tagger": "*",

packages/manager/apps/vrack-services/src/App.tsx

@@ -3,10 +3,11 @@ import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { odsSetup } from '@ovhcloud/ods-common-core';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
-import '@ovhcloud/ods-theme-blue-jeans';
+import { useFeatureAvailability } from '@ovh-ux/manager-react-core-application';
 import { RouterProvider, createHashRouter } from 'react-router-dom';
 import { getRoutes } from '@/routes/routes';
 import { MessagesContext } from '@/components/feedback-messages/Messages.context';
+import '@ovhcloud/ods-theme-blue-jeans';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -18,16 +19,35 @@ const queryClient = new QueryClient({
 
 odsSetup();
 
-export const App: React.FC = () => {
-  const [successMessages, setSuccessMessages] = React.useState([]);
-  const [hiddenMessages, setHiddenMessages] = React.useState([]);
+const Routes: React.FC = () => {
+  const { data, isLoading, isError } = useFeatureAvailability([
+    'vrack-services',
+  ]);
   const { shell } = React.useContext(ShellContext);
   const routes = getRoutes();
   const router = createHashRouter(routes);
+  const isAppAvailable = !!data?.['vrack-services'];
 
   React.useEffect(() => {
-    shell.ux.hidePreloader();
-  }, []);
+    if (isAppAvailable) {
+      shell.ux.hidePreloader();
+    } else if ((!isLoading || isError) && !isAppAvailable) {
+      shell.navigation
+        .getURL('hub', '/', {})
+        .then((url: string) => window.location.replace(url));
+    }
+  }, [isLoading, isError, isAppAvailable]);
+
+  if (isLoading || !isAppAvailable) {
+    return <></>;
+  }
+
+  return <RouterProvider router={router} />;
+};
+
+export const App: React.FC = () => {
+  const [successMessages, setSuccessMessages] = React.useState([]);
+  const [hiddenMessages, setHiddenMessages] = React.useState([]);
 
   return (
     <QueryClientProvider client={queryClient}>
@@ -47,7 +67,7 @@ export const App: React.FC = () => {
           },
         }}
       >
-        <RouterProvider router={router} />
+        <Routes />
       </MessagesContext.Provider>
       <ReactQueryDevtools />
     </QueryClientProvider>

packages/manager/core/application/src/hooks/useFeatureAvailability.ts

@@ -29,5 +29,6 @@ export const useFeatureAvailability = (
   return useQuery<Record<string, boolean>>({
     queryKey: [featureList.join('-')],
     queryFn: fetchFeatureAvailabilityData,
+    retry: false,
   });
 };