feat: [M3-7490] - Improve NodeBalancer Restricted User Experience

packages/manager/.changeset/pr-10095-tech-stories-1706069306820.md

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

packages/manager/src/components/ActionMenu/ActionMenu.tsx

@@ -1,4 +1,4 @@
-import { IconButton, ListItemText } from '@mui/material';
+import { IconButton, ListItemText, useTheme } from '@mui/material';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import * as React from 'react';
@@ -37,6 +37,7 @@ export interface ActionMenuProps {
  */
 export const ActionMenu = React.memo((props: ActionMenuProps) => {
   const { actionsList, ariaLabel, onOpen } = props;
+  const theme = useTheme();
 
   const menuId = convertToKebabCase(ariaLabel);
   const buttonId = `${convertToKebabCase(ariaLabel)}-button`;
@@ -69,14 +70,15 @@ export const ActionMenu = React.memo((props: ActionMenuProps) => {
   }
 
   const sxTooltipIcon = {
-    '& .MuiSvgIcon-root': {
-      fill: '#fff',
-      height: '20px',
-      width: '20px',
-    },
     '& :hover': {
       color: '#4d99f1',
     },
+    '&& .MuiSvgIcon-root': {
+      fill: theme.color.disabledText,
+      height: '20px',
+      width: '20px',
+    },
+
     color: '#fff',
     padding: '0 0 0 8px',
     pointerEvents: 'all', // Allows the tooltip to be hovered on a disabled MenuItem

packages/manager/src/components/Button/StyledTagButton.stories.tsx

@@ -0,0 +1,37 @@
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+
+import { StyledPlusIcon, StyledTagButton } from './StyledTagButton';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof StyledTagButton> = {
+  args: {
+    children: 'Tag',
+    disabled: false,
+    onClick: () => null,
+  },
+  component: StyledTagButton,
+  title: 'Components/TagButton',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StyledTagButton>;
+
+export const Default: Story = {
+  args: {
+    buttonType: 'outlined',
+    children: 'Tag',
+    disabled: false,
+    onClick: action('onClick'),
+  },
+  render: (args) => (
+    <StyledTagButton
+      {...args}
+      endIcon={<StyledPlusIcon disabled={args.disabled} />}
+    >
+      Add a Tag
+    </StyledTagButton>
+  ),
+};

packages/manager/src/components/Button/StyledTagButton.ts

@@ -0,0 +1,38 @@
+import { styled } from '@mui/material/styles';
+
+import Plus from 'src/assets/icons/plusSign.svg';
+
+import { Button } from './Button';
+
+/**
+ * A button for Tags. Eventually this treatment will go away,
+ * but the sake of the MUI migration we need to keep it around for now, and as a styled component in order to get rid of
+ * spreading excessive styles for everywhere this is used.
+ *
+ */
+export const StyledTagButton = styled(Button, {
+  label: 'StyledTagButton',
+})(({ theme, ...props }) => ({
+  border: 'none',
+  fontSize: '0.875rem',
+  ...(!props.disabled && {
+    '&:hover, &:focus': {
+      backgroundColor: theme.color.tagButton,
+      border: 'none',
+    },
+    backgroundColor: theme.color.tagButton,
+    color: theme.textColors.linkActiveLight,
+  }),
+}));
+
+export const StyledPlusIcon = styled(Plus, {
+  label: 'StyledPlusIcon',
+})(({ theme, ...props }) => ({
+  color: props.disabled
+    ? theme.name === 'dark'
+      ? '#5c6470'
+      : theme.color.disabledText
+    : theme.color.tagIcon,
+  height: '10px',
+  width: '10px',
+}));

packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx

@@ -13,6 +13,7 @@ import { Autocomplete } from '../Autocomplete/Autocomplete';
 import { LinkButton } from '../LinkButton';
 
 interface Props {
+  disabled?: boolean;
   entityType: FirewallDeviceEntityType | undefined;
   handleFirewallChange: (firewallID: number) => void;
   helperText: JSX.Element;
@@ -21,6 +22,7 @@ interface Props {
 
 export const SelectFirewallPanel = (props: Props) => {
   const {
+    disabled,
     entityType,
     handleFirewallChange,
     helperText,
@@ -69,6 +71,7 @@ export const SelectFirewallPanel = (props: Props) => {
           onChange={(_, selection) => {
             handleFirewallChange(selection?.value ?? -1);
           }}
+          disabled={disabled}
           errorText={error?.[0].reason}
           label="Assign Firewall"
           loading={isLoading}
@@ -78,7 +81,7 @@ export const SelectFirewallPanel = (props: Props) => {
           value={selectedFirewall}
         />
         <StyledLinkButtonBox>
-          <LinkButton onClick={handleCreateFirewallClick}>
+          <LinkButton isDisabled={disabled} onClick={handleCreateFirewallClick}>
             Create Firewall
           </LinkButton>
         </StyledLinkButtonBox>

packages/manager/src/components/TagCell/TagCell.tsx

@@ -4,12 +4,12 @@ import { styled } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 import * as React from 'react';
 
-import Plus from 'src/assets/icons/plusSign.svg';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { IconButton } from 'src/components/IconButton';
 import { Tag } from 'src/components/Tag/Tag';
 import { omittedProps } from 'src/utilities/omittedProps';
 
+import { StyledPlusIcon, StyledTagButton } from '../Button/StyledTagButton';
 import { AddTag } from './AddTag';
 
 interface TagCellProps {
@@ -108,13 +108,14 @@ const TagCell = (props: TagCellProps) => {
               <MoreHoriz />
             </StyledIconButton>
           ) : null}
-          <StyledAddTagButton
+          <StyledTagButton
+            buttonType="outlined"
+            endIcon={<StyledPlusIcon />}
             onClick={() => setAddingTag(true)}
             title="Add a tag"
           >
             Add a tag
-            <Plus />
-          </StyledAddTagButton>
+          </StyledTagButton>
         </>
       )}
     </StyledGrid>
@@ -184,25 +185,3 @@ const StyledIconButton = styled(IconButton)(({ theme }) => ({
   },
   width: '40px',
 }));
-
-const StyledAddTagButton = styled('button')(({ theme }) => ({
-  '& svg': {
-    color: theme.color.tagIcon,
-    height: 10,
-    marginLeft: 10,
-    width: 10,
-  },
-  alignItems: 'center',
-  backgroundColor: theme.color.tagButton,
-  border: 'none',
-  borderRadius: 3,
-  color: theme.textColors.linkActiveLight,
-  cursor: 'pointer',
-  display: 'flex',
-  fontFamily: theme.font.bold,
-  fontSize: 14,
-  height: 30,
-  paddingLeft: 10,
-  paddingRight: 10,
-  whiteSpace: 'nowrap',
-}));

packages/manager/src/components/TagsPanel/TagsPanel.styles.ts

@@ -15,26 +15,6 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     justifyContent: 'flex-start',
     width: '100%',
   },
-  addTagButton: {
-    '& svg': {
-      color: theme.color.tagIcon,
-      height: 10,
-      marginLeft: 10,
-      width: 10,
-    },
-    alignItems: 'center',
-    backgroundColor: theme.color.tagButton,
-    border: 'none',
-    borderRadius: 3,
-    color: theme.textColors.linkActiveLight,
-    cursor: 'pointer',
-    display: 'flex',
-    fontFamily: theme.font.bold,
-    fontSize: '0.875rem',
-    justifyContent: 'center',
-    padding: '7px 10px',
-    whiteSpace: 'nowrap',
-  },
   errorNotice: {
     '& .noticeText': {
       fontFamily: '"LatoWeb", sans-serif',

packages/manager/src/components/TagsPanel/TagsPanel.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { useQueryClient } from 'react-query';
 
-import Plus from 'src/assets/icons/plusSign.svg';
+import {
+  StyledPlusIcon,
+  StyledTagButton,
+} from 'src/components/Button/StyledTagButton';
 import { CircleProgress } from 'src/components/CircleProgress';
 import Select from 'src/components/EnhancedSelect/Select';
 import { Tag } from 'src/components/Tag/Tag';
@@ -162,6 +165,7 @@ export const TagsPanel = (props: TagsPanelProps) => {
           className={classes.selectTag}
           creatable
           createOptionPosition="first"
+          disabled={disabled}
           escapeClearsValue
           hideLabel
           isLoading={userTagsLoading}
@@ -178,14 +182,14 @@ export const TagsPanel = (props: TagsPanelProps) => {
             [classes.hasError]: tagError.length > 0,
           })}
         >
-          <button
-            className={classes.addTagButton}
+          <StyledTagButton
+            buttonType="outlined"
+            disabled={disabled}
+            endIcon={<StyledPlusIcon disabled={disabled} />}
             onClick={toggleTagInput}
-            title="Add a tag"
           >
             Add a tag
-            <Plus />
-          </button>
+          </StyledTagButton>
         </div>
       )}
       <div className={classes.tagsPanelItemWrapper}>

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

@@ -1,6 +1,19 @@
 export const BUSINESS_PARTNER = 'business partner';
 export const ADMINISTRATOR = 'administrator';
 
+export const grantTypeMap = {
+  database: 'Databases',
+  domain: 'Domains',
+  firewall: 'Firewalls',
+  image: 'Images',
+  linode: 'Linodes',
+  longview: 'Longview Clients',
+  nodebalancer: 'NodeBalancers',
+  stackscript: 'StackScripts',
+  volume: 'Volumes',
+  vpc: 'VPCs',
+} as const;
+
 export const PARENT_PROXY_USER_CLOSE_ACCOUNT_TOOLTIP_TEXT =
   'Remove indirect customers before closing the account.';
 export const CHILD_USER_CLOSE_ACCOUNT_TOOLTIP_TEXT =

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

@@ -0,0 +1,6 @@
+import { grantTypeMap } from 'src/features/Account/constants';
+
+// A useful type for getting the values of an object
+export type ObjectValues<T> = T[keyof T];
+
+export type GrantTypeMap = ObjectValues<typeof grantTypeMap>;

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

@@ -1,6 +1,38 @@
 import { getStorage, setStorage } from 'src/utilities/storage';
 
-import type { Token } from '@linode/api-v4';
+import type { GlobalGrantTypes, Grants, Profile, Token } from '@linode/api-v4';
+import type { GrantTypeMap } from 'src/features/Account/types';
+
+type ActionType = 'create' | 'delete' | 'edit' | 'view';
+
+interface GetRestrictedResourceText {
+  action?: ActionType;
+  isSingular?: boolean;
+  resourceType: GrantTypeMap;
+}
+export const getRestrictedResourceText = ({
+  action = 'edit',
+  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.`;
+};
+
+export const isRestrictedGlobalGrantType = ({
+  globalGrantType,
+  grants,
+  profile,
+}: {
+  globalGrantType: GlobalGrantTypes;
+  grants: Grants | undefined;
+  profile: Profile | undefined;
+}): boolean => {
+  return Boolean(profile?.restricted) && !grants?.global[globalGrantType];
+};
 
 // TODO: Parent/Child: FOR MSW ONLY, REMOVE WHEN API IS READY
 // ================================================================