feat: [M3-8703] - Disable Create VPC button with tooltip text on Land…

…ing Page for restricted users (#11063) * feat: [M3-8703] - Disable Create VPC button with tooltip text on Landing Page for restricted users * Added changeset: Disable Create VPC button with tooltip text on Landing Page for restricted users ([#11063](#11063)) * Added changeset: Disable Create Image button with tooltip text on Landing Page for restricted users * refactor: [M3-8703] Making variables more descriptive Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> * refactor: [M3-8703] Making variables more descriptive --------- Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
linode · Oct 14, 2024 · 2ad67fc · 2ad67fc
1 parent 054ea88
commit 2ad67fc
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/packages/manager/.changeset/pr-11063-added-1728386681970.md b/packages/manager/.changeset/pr-11063-added-1728386681970.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Disable Create VPC button with tooltip text on Landing Page for restricted users ([#11063](https://github.com/linode/manager/pull/11063))
diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
@@ -16,8 +16,10 @@ import { TableSortCell } from 'src/components/TableSortCell';
 import { VPC_DOCS_LINK, VPC_LABEL } from 'src/features/VPCs/constants';
 import { useOrder } from 'src/hooks/useOrder';
 import { usePagination } from 'src/hooks/usePagination';
+import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useVPCsQuery } from 'src/queries/vpcs/vpcs';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
+import { getRestrictedResourceText } from 'src/features/Account/utils';
 
 import { VPCDeleteDialog } from './VPCDeleteDialog';
 import { VPCEditDrawer } from './VPCEditDrawer';
@@ -73,6 +75,10 @@ const VPCLanding = () => {
     history.push(VPC_CREATE_ROUTE);
   };
 
+  const isVPCCreationRestricted = useRestrictedGlobalGrantCheck({
+    globalGrantType: 'add_vpcs',
+  });
+
   if (error) {
     return (
       <ErrorState
@@ -98,6 +104,14 @@ const VPCLanding = () => {
         docsLink={VPC_DOCS_LINK}
         onButtonClick={createVPC}
         title={VPC_LABEL}
+        buttonDataAttrs={{
+          tooltipText: getRestrictedResourceText({
+            action: 'create',
+            isSingular: false,
+            resourceType: 'VPCs',
+          }),
+        }}
+        disabledCreateButton={isVPCCreationRestricted}
       />
       <Table>
         <TableHead>