feat: [M3-7685] - Show empty Kubernetes landing page with disabled create button for restricted users

packages/manager/.changeset/pr-10756-added-1723036827057.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Empty Kubernetes landing page with the 'Create Cluster' button disabled for restricted users ([#10756](https://github.com/linode/manager/pull/10756))

packages/manager/src/features/Account/constants.ts

@@ -9,6 +9,7 @@ export const grantTypeMap = {
   firewall: 'Firewalls',
   image: 'Images',
   linode: 'Linodes',
+  lkeCluster: 'LKE Clusters', // Note: Not included in the user's grants returned from the API.
   longview: 'Longview Clients',
   nodebalancer: 'NodeBalancers',
   placementGroups: 'Placement Groups',

packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.test.tsx

@@ -0,0 +1,52 @@
+import { waitForElementToBeRemoved } from '@testing-library/react';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { KubernetesLanding } from './KubernetesLanding';
+
+const queryMocks = vi.hoisted(() => ({
+  useProfile: vi.fn().mockReturnValue({ data: { restricted: true } }),
+}));
+
+vi.mock('src/queries/profile/profile', async () => {
+  const actual = await vi.importActual('src/queries/profile/profile');
+  return {
+    ...actual,
+    useProfile: queryMocks.useProfile,
+  };
+});
+
+describe('Kubernetes Landing', () => {
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+  it('should have the "Create Cluster" button disabled for restricted users', () => {
+    queryMocks.useProfile.mockReturnValue({ data: { restricted: true } });
+
+    const { container } = renderWithTheme(<KubernetesLanding />);
+
+    const createClusterButton = container.querySelector('button');
+
+    expect(createClusterButton).toBeInTheDocument();
+    expect(createClusterButton).toHaveTextContent('Create Cluster');
+    expect(createClusterButton).toBeDisabled();
+  });
+
+  it('should have the "Create Cluster" button enabled for users with full access', async () => {
+    queryMocks.useProfile.mockReturnValue({ data: { restricted: false } });
+
+    const loadingTestId = 'circle-progress';
+
+    const { container, getByTestId } = renderWithTheme(<KubernetesLanding />);
+
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    const createClusterButton = container.querySelector('button');
+
+    expect(createClusterButton).toBeInTheDocument();
+    expect(createClusterButton).toHaveTextContent('Create Cluster');
+    expect(createClusterButton).not.toBeDisabled();
+  });
+});

packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx

@@ -24,6 +24,7 @@ import { Typography } from 'src/components/Typography';
 import { useOrder } from 'src/hooks/useOrder';
 import { usePagination } from 'src/hooks/usePagination';
 import { useKubernetesClustersQuery } from 'src/queries/kubernetes';
+import { useProfile } from 'src/queries/profile/profile';
 import { getErrorStringOrDefault } from 'src/utilities/errorUtils';
 
 import { KubernetesClusterRow } from '../ClusterList/KubernetesClusterRow';
@@ -92,12 +93,17 @@ export const KubernetesLanding = () => {
     ['+order_by']: orderBy,
   };
 
-  const { data, error, isLoading } = useKubernetesClustersQuery(
+  const { data: profile } = useProfile();
+
+  const isRestricted = profile?.restricted ?? false;
+
+  const { data, error, isFetching } = useKubernetesClustersQuery(
     {
       page: pagination.page,
       page_size: pagination.pageSize,
     },
-    filter
+    filter,
+    !isRestricted
   );
 
   const {
@@ -150,12 +156,12 @@ export const KubernetesLanding = () => {
     );
   }
 
-  if (isLoading) {
+  if (isFetching) {
     return <CircleProgress />;
   }
 
-  if (data?.results === 0) {
-    return <KubernetesEmptyState />;
+  if (isRestricted || data?.results === 0) {
+    return <KubernetesEmptyState isRestricted={isRestricted} />;
   }
 
   return (

packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLandingEmptyState.tsx

@@ -3,6 +3,7 @@ import { useHistory } from 'react-router-dom';
 
 import KubernetesSvg from 'src/assets/icons/entityIcons/kubernetes.svg';
 import { ResourcesSection } from 'src/components/EmptyLandingPageResources/ResourcesSection';
+import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { sendEvent } from 'src/utilities/analytics/utils';
 
 import {
@@ -12,14 +13,21 @@ import {
   youtubeLinkData,
 } from './KubernetesLandingEmptyStateData';
 
-export const KubernetesEmptyState = () => {
+interface Props {
+  isRestricted: boolean;
+}
+
+export const KubernetesEmptyState = (props: Props) => {
+  const { isRestricted = false } = props;
+
   const { push } = useHistory();
 
   return (
     <ResourcesSection
       buttonProps={[
         {
           children: 'Create Cluster',
+          disabled: isRestricted,
           onClick: () => {
             sendEvent({
               action: 'Click:button',
@@ -28,6 +36,11 @@ export const KubernetesEmptyState = () => {
             });
             push('/kubernetes/create');
           },
+          tooltipText: getRestrictedResourceText({
+            action: 'create',
+            isSingular: false,
+            resourceType: 'LKE Clusters',
+          }),
         },
       ]}
       gettingStartedGuidesData={gettingStartedGuides}

packages/manager/src/queries/kubernetes.ts

@@ -93,9 +93,14 @@ export const kubernetesQueries = createQueryKeys('kubernetes', {
   },
 });
 
-export const useKubernetesClustersQuery = (params: Params, filter: Filter) => {
+export const useKubernetesClustersQuery = (
+  params: Params,
+  filter: Filter,
+  enabled = true
+) => {
   return useQuery<ResourcePage<KubernetesCluster>, APIError[]>({
     ...kubernetesQueries.lists._ctx.paginated(params, filter),
+    enabled,
     keepPreviousData: true,
   });
 };