upcoming: [UIE-9813] - Implement routing for Cloud Manager Marketplace

Author: harsh-akamai

packages/manager/src/components/PrimaryNav/PrimaryNav.test.tsx

@@ -590,4 +590,23 @@ describe('PrimaryNav', () => {
 
     expect(databaseNavItem).toBeVisible();
   });
+
+  it('should show Partner Referral menu item if the user has the account capability and the flag is enabled', async () => {
+    const flags: Partial<Flags> = {
+      marketplace: {
+        enabled: true,
+        beta: false,
+        la: false,
+        ga: false,
+      },
+    };
+
+    const { findByTestId } = renderWithTheme(<PrimaryNav {...props} />, {
+      flags,
+    });
+
+    const marketplaceNavItem = await findByTestId('menu-item-Partner Referral');
+
+    expect(marketplaceNavItem).toBeVisible();
+  });
 });

packages/manager/src/components/PrimaryNav/PrimaryNav.tsx

@@ -22,6 +22,7 @@ import { useIsACLPEnabled } from 'src/features/CloudPulse/Utils/utils';
 import { useIsDatabasesEnabled } from 'src/features/Databases/utilities';
 import { useIsACLPLogsEnabled } from 'src/features/Delivery/deliveryUtils';
 import { useIsIAMEnabled } from 'src/features/IAM/hooks/useIsIAMEnabled';
+import { useIsMarketplaceEnabled } from 'src/features/Marketplace/utils';
 import { useIsNetworkLoadBalancerEnabled } from 'src/features/NetworkLoadBalancers/utils';
 import { useIsPlacementGroupsEnabled } from 'src/features/PlacementGroups/utils';
 import { useFlags } from 'src/hooks/useFlags';
@@ -54,13 +55,14 @@ export type NavEntity =
   | 'Longview'
   | 'Maintenance'
   | 'Managed'
-  | 'Marketplace'
   | 'Metrics'
   | 'Monitor'
   | 'Network Load Balancer'
   | 'NodeBalancers'
   | 'Object Storage'
+  | 'Partner Referrals'
   | 'Placement Groups'
+  | 'Quick Deploy Apps'
   | 'Quotas'
   | 'Service Transfers'
   | 'StackScripts'
@@ -121,6 +123,9 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
 
   const { isNetworkLoadBalancerEnabled } = useIsNetworkLoadBalancerEnabled();
 
+  const { isMarketplaceFeatureEnabled, isMarketplaceBetaEnabled } =
+    useIsMarketplaceEnabled();
+
   const {
     data: preferences,
     error: preferencesError,
@@ -176,9 +181,18 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
               },
               {
                 attr: { 'data-qa-one-click-nav-btn': true },
-                display: 'Marketplace',
+                display: !isMarketplaceFeatureEnabled
+                  ? 'Marketplace'
+                  : 'Quick Deploy Apps',
                 to: '/linodes/create/marketplace',
               },
+              {
+                attr: { 'data-qa-one-click-nav-btn': true },
+                display: 'Partner Referrals',
+                hide: !isMarketplaceFeatureEnabled,
+                isBeta: isMarketplaceFeatureEnabled && isMarketplaceBetaEnabled,
+                to: '/cloud-marketplace/catalog',
+              },
             ],
             name: 'Compute',
           },
@@ -352,6 +366,8 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
         isIAMBeta,
         isIAMEnabled,
         iamRbacPrimaryNavChanges,
+        isMarketplaceFeatureEnabled,
+        isMarketplaceBetaEnabled,
         isNetworkLoadBalancerEnabled,
         limitsEvolution,
       ]

packages/manager/src/dev-tools/FeatureFlagTool.tsx

@@ -40,6 +40,7 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'linodeDiskEncryption', label: 'Linode Disk Encryption (LDE)' },
   { flag: 'linodeInterfaces', label: 'Linode Interfaces' },
   { flag: 'lkeEnterprise2', label: 'LKE-Enterprise' },
+  { flag: 'marketplace', label: 'Marketplace' },
   { flag: 'networkLoadBalancer', label: 'Network Load Balancer' },
   { flag: 'nodebalancerIpv6', label: 'NodeBalancer Dual Stack (IPv6)' },
   { flag: 'nodebalancerVpc', label: 'NodeBalancer-VPC Integration' },

packages/manager/src/featureFlags.ts

@@ -177,6 +177,11 @@ interface FirewallRulesetsAndPrefixLists extends BetaFeatureFlag {
   la: boolean;
 }
 
+interface Marketplace extends BetaFeatureFlag {
+  ga: boolean;
+  la: boolean;
+}
+
 export interface Flags {
   acceleratedPlans: AcceleratedPlansFlag;
   aclp: AclpFlag;
@@ -223,6 +228,7 @@ export interface Flags {
   linodeInterfaces: LinodeInterfacesFlag;
   lkeEnterprise2: LkeEnterpriseFlag;
   mainContentBanner: MainContentBanner;
+  marketplace: Marketplace;
   marketplaceAppOverrides: MarketplaceAppOverride[];
   metadata: boolean;
   mtc: MTC;
@@ -344,12 +350,12 @@ export type ProductInformationBannerLocation =
   | 'Identity and Access'
   | 'Images'
   | 'Kubernetes'
-  | 'LinodeCreate' // Use for Marketplace banners
   | 'Linodes'
   | 'LoadBalancers'
   | 'Logs'
   | 'Longview'
   | 'Managed'
+  | 'Marketplace'
   | 'Network LoadBalancers'
   | 'NodeBalancers'
   | 'Object Storage'

packages/manager/src/features/Marketplace/MarketplaceLanding.tsx

@@ -0,0 +1,8 @@
+import { Notice } from '@linode/ui';
+import * as React from 'react';
+
+export const MarketplaceLanding = () => {
+  return (
+    <Notice variant="info">Partner Referral Catalog is coming soon...</Notice>
+  );
+};

packages/manager/src/features/Marketplace/marketplaceLazyRoute.tsx

@@ -0,0 +1,9 @@
+import { createLazyRoute } from '@tanstack/react-router';
+
+import { MarketplaceLanding } from './MarketplaceLanding';
+
+export const marketplaceLazyRoute = createLazyRoute(
+  '/cloud-marketplace/catalog'
+)({
+  component: MarketplaceLanding,
+});

packages/manager/src/features/Marketplace/utils.ts

@@ -0,0 +1,29 @@
+import { useFlags } from 'src/hooks/useFlags';
+
+/**
+ * Returns whether or not features related to the Marketplace project
+ * should be enabled, and whether they are in beta, LA, or GA.
+ *
+ * Note: Currently, this just uses the `Marketplace` feature flag as a source of truth,
+ * but will eventually also look at account capabilities if available.
+ */
+export const useIsMarketplaceEnabled = () => {
+  const flags = useFlags();
+
+  if (!flags) {
+    return {
+      isMarketplaceFeatureEnabled: false,
+      isMarketplaceBetaEnabled: false,
+      isMarketplaceLAEnabled: false,
+      isMarketplaceGAEnabled: false,
+    };
+  }
+
+  // @TODO: Cloud Manager Marketplace - check for customer tag/account capability when it exists
+  return {
+    isMarketplaceFeatureEnabled: flags.marketplace?.enabled,
+    isMarketplaceBetaEnabled: flags.marketplace?.beta,
+    isMarketplaceLAEnabled: flags.marketplace?.la,
+    isMarketplaceGAEnabled: flags.marketplace?.ga,
+  };
+};

packages/manager/src/routes/index.tsx

@@ -29,6 +29,7 @@ import { loginHistoryRouteTree } from './loginHistory/';
 import { longviewRouteTree } from './longview';
 import { maintenanceRouteTree } from './maintenance';
 import { managedRouteTree } from './managed';
+import { marketplaceRouteTree } from './marketplace';
 import { cloudPulseMetricsRouteTree } from './metrics';
 import { networkLoadBalancersRouteTree } from './networkLoadBalancer';
 import { nodeBalancersRouteTree } from './nodeBalancers';
@@ -80,6 +81,7 @@ export const routeTree = rootRoute.addChildren([
   longviewRouteTree,
   maintenanceRouteTree,
   managedRouteTree,
+  marketplaceRouteTree,
   networkLoadBalancersRouteTree,
   nodeBalancersRouteTree,
   objectStorageRouteTree,

packages/manager/src/routes/marketplace/MarketplaceRoute.tsx

@@ -0,0 +1,23 @@
+import { NotFound } from '@linode/ui';
+import { Outlet } from '@tanstack/react-router';
+import React from 'react';
+
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import { useIsMarketplaceEnabled } from 'src/features/Marketplace/utils';
+
+export const MarketplaceRoute = () => {
+  const { isMarketplaceFeatureEnabled } = useIsMarketplaceEnabled();
+
+  if (!isMarketplaceFeatureEnabled) {
+    return <NotFound />;
+  }
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <DocumentTitleSegment segment="Marketplace" />
+      <ProductInformationBanner bannerLocation="Marketplace" />
+      <Outlet />
+    </React.Suspense>
+  );
+};

packages/manager/src/routes/marketplace/index.ts

@@ -0,0 +1,32 @@
+import { createRoute, redirect } from '@tanstack/react-router';
+
+import { rootRoute } from '../root';
+import { MarketplaceRoute } from './MarketplaceRoute';
+
+export const marketplaceRoute = createRoute({
+  component: MarketplaceRoute,
+  getParentRoute: () => rootRoute,
+  path: 'cloud-marketplace',
+});
+
+export const marketplaceLandingRoute = createRoute({
+  beforeLoad: async () => {
+    throw redirect({ to: '/cloud-marketplace/catalog' });
+  },
+  getParentRoute: () => marketplaceRoute,
+  path: '/',
+});
+
+export const marketplaceCatlogRoute = createRoute({
+  getParentRoute: () => marketplaceRoute,
+  path: '/catalog',
+}).lazy(() =>
+  import('src/features/Marketplace/marketplaceLazyRoute').then(
+    (m) => m.marketplaceLazyRoute
+  )
+);
+
+export const marketplaceRouteTree = marketplaceRoute.addChildren([
+  marketplaceLandingRoute,
+  marketplaceCatlogRoute,
+]);