feat: [M3-7687] - Refactor & Improve LinodeActionMenu Restricted Us…

…er Experience (#10199)


Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
Co-authored-by: Hussain Khalil <122488130+hkhalil-akamai@users.noreply.github.com>

packages/manager/.changeset/pr-10199-tech-stories-1708028973425.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Refactor & Improve LinodeActionMenu Restricted User Experience ([#10199](https://github.com/linode/manager/pull/10199))

packages/manager/src/components/EntityHeader/EntityHeader.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Box } from 'src/components/Box';
 import { EntityHeader } from 'src/components/EntityHeader/EntityHeader';
 import { Hidden } from 'src/components/Hidden';
-import { LinodeActionMenu } from 'src/features/Linodes/LinodesLanding/LinodeActionMenu';
+import { LinodeActionMenu } from 'src/features/Linodes/LinodesLanding/LinodeActionMenu/LinodeActionMenu';
 
 import { Button } from '../Button/Button';
 import { Link } from '../Link';

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

@@ -8,10 +8,22 @@ import type {
 } from '@linode/api-v4';
 import type { GrantTypeMap } from 'src/features/Account/types';
 
-type ActionType = 'create' | 'delete' | 'edit' | 'view';
+export type ActionType =
+  | 'clone'
+  | 'create'
+  | 'delete'
+  | 'edit'
+  | 'migrate'
+  | 'modify'
+  | 'reboot'
+  | 'rebuild'
+  | 'rescue'
+  | 'resize'
+  | 'view';
 
 interface GetRestrictedResourceText {
   action?: ActionType;
+  includeContactMessage?: boolean;
   isSingular?: boolean;
   resourceType: GrantTypeMap;
 }
@@ -36,14 +48,22 @@ export type RestrictedGlobalGrantType =
  */
 export const getRestrictedResourceText = ({
   action = 'edit',
+  includeContactMessage = true,
   isSingular = true,
   resourceType,
 }: GetRestrictedResourceText): string => {
   const resource = isSingular
     ? 'this ' + resourceType.replace(/s$/, '')
     : resourceType;
 
-  return `You don't have permissions to ${action} ${resource}. Please contact your account administrator to request the necessary permissions.`;
+  let message = `You don't have permissions to ${action} ${resource}.`;
+
+  if (includeContactMessage) {
+    message +=
+      ' Please contact your account administrator to request the necessary permissions.';
+  }
+
+  return message;
 };
 
 /**

packages/manager/src/features/Linodes/LinodeEntityDetailHeader.tsx

@@ -10,7 +10,7 @@ import { EntityHeader } from 'src/components/EntityHeader/EntityHeader';
 import { Hidden } from 'src/components/Hidden';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { TypographyProps } from 'src/components/Typography';
-import { LinodeActionMenu } from 'src/features/Linodes/LinodesLanding/LinodeActionMenu';
+import { LinodeActionMenu } from 'src/features/Linodes/LinodesLanding/LinodeActionMenu/LinodeActionMenu';
 import { ProgressDisplay } from 'src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow';
 import { lishLaunch } from 'src/features/Lish/lishUtils';
 import { queryKey as linodesQueryKey } from 'src/queries/linodes/linodes';

packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx

@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 import VolumeIcon from 'src/assets/icons/entityIcons/volume.svg';
 import { Paper } from 'src/components/Paper';
 import { Placeholder } from 'src/components/Placeholder/Placeholder';
-import { buildQueryStringForLinodeClone } from 'src/features/Linodes/LinodesLanding/LinodeActionMenu';
+import { buildQueryStringForLinodeClone } from 'src/features/Linodes/LinodesLanding/LinodeActionMenu/LinodeActionMenuUtils';
 import { useFlags } from 'src/hooks/useFlags';
 import { extendType } from 'src/utilities/extendType';
 import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';

packages/manager/src/features/Linodes/LinodesLanding/LinodeActionMenu.test.tsx → packages/manager/src/features/Linodes/LinodesLanding/LinodeActionMenu/LinodeActionMenu.test.tsx

@@ -7,11 +7,8 @@ import { linodeBackupsFactory } from 'src/factories/linodes';
 import { regionFactory } from 'src/factories/regions';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import {
-  LinodeActionMenu,
-  LinodeActionMenuProps,
-  buildQueryStringForLinodeClone,
-} from './LinodeActionMenu';
+import { LinodeActionMenu, LinodeActionMenuProps } from './LinodeActionMenu';
+import { buildQueryStringForLinodeClone } from './LinodeActionMenuUtils';
 
 const props: LinodeActionMenuProps = {
   inListView: true,