fix: [M3-5577] - Disable delete button for public IP addresses

packages/manager/.changeset/pr-9332-fixed-1687902148264.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Disable delete button for public IP addresses if it's the only IP address ([#9332](https://github.com/linode/manager/pull/9332))

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx

@@ -1,45 +1,46 @@
 import { LinodeIPsResponse } from '@linode/api-v4/lib/linodes';
 import { IPAddress, IPRange } from '@linode/api-v4/lib/networking';
+import Grid from '@mui/material/Unstable_Grid2';
+import { Theme, useTheme } from '@mui/material/styles';
 import { IPv6, parse as parseIP } from 'ipaddr.js';
 import * as React from 'react';
+import { useParams } from 'react-router-dom';
 import AddNewLink from 'src/components/AddNewLink';
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
-import { Hidden } from 'src/components/Hidden';
-import Paper from 'src/components/core/Paper';
-import { makeStyles } from 'tss-react/mui';
-import { Theme, useTheme } from '@mui/material/styles';
-import { TableBody } from 'src/components/TableBody';
-import { TableHead } from 'src/components/TableHead';
-import { Typography } from 'src/components/Typography';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
+import { Hidden } from 'src/components/Hidden';
 import OrderBy from 'src/components/OrderBy';
 import { Table } from 'src/components/Table';
+import { TableBody } from 'src/components/TableBody';
 import { TableCell } from 'src/components/TableCell';
+import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableSortCell } from 'src/components/TableSortCell';
+import { Typography } from 'src/components/Typography';
+import Paper from 'src/components/core/Paper';
+import { useLinodeQuery } from 'src/queries/linodes/linodes';
+import {
+  useAllIPsQuery,
+  useLinodeIPsQuery,
+} from 'src/queries/linodes/networking';
+import { useGrants } from 'src/queries/profile';
+import { makeStyles } from 'tss-react/mui';
 import { LinodePermissionsError } from '../LinodePermissionsError';
 import AddIPDrawer from './AddIPDrawer';
+import { DeleteIPDialog } from './DeleteIPDialog';
+import { DeleteRangeDialog } from './DeleteRangeDialog';
 import { EditIPRDNSDrawer } from './EditIPRDNSDrawer';
+import { EditRangeRDNSDrawer } from './EditRangeRDNSDrawer';
 import IPSharing from './IPSharing';
 import IPTransfer from './IPTransfer';
 import LinodeNetworkingActionMenu from './LinodeNetworkingActionMenu';
 import LinodeNetworkingSummaryPanel from './NetworkingSummaryPanel';
-import { IPTypes } from './types';
 import { ViewIPDrawer } from './ViewIPDrawer';
-import { ViewRangeDrawer } from './ViewRangeDrawer';
 import ViewRDNSDrawer from './ViewRDNSDrawer';
-import Grid from '@mui/material/Unstable_Grid2';
-import {
-  useAllIPsQuery,
-  useLinodeIPsQuery,
-} from 'src/queries/linodes/networking';
-import { useParams } from 'react-router-dom';
-import { EditRangeRDNSDrawer } from './EditRangeRDNSDrawer';
-import { DeleteIPDialog } from './DeleteIPDialog';
-import { DeleteRangeDialog } from './DeleteRangeDialog';
-import { useLinodeQuery } from 'src/queries/linodes/linodes';
+import { ViewRangeDrawer } from './ViewRangeDrawer';
+import { IPTypes } from './types';
 
 const useStyles = makeStyles<void, 'copy'>()(
   (theme: Theme, _params, classes) => ({
@@ -100,12 +101,16 @@ const useStyles = makeStyles<void, 'copy'>()(
 export const ipv4TableID = 'ips';
 
 const LinodeNetworking = () => {
-  const readOnly = false;
+  const { data: grants } = useGrants();
   const { classes } = useStyles();
   const { linodeId } = useParams<{ linodeId: string }>();
   const id = Number(linodeId);
   const { data: ips, isLoading, error } = useLinodeIPsQuery(id);
 
+  const readOnly =
+    grants !== undefined &&
+    grants.linode.some((g) => g.id === id && g.permissions === 'read_only');
+
   const [selectedIP, setSelectedIP] = React.useState<IPAddress>();
   const [selectedRange, setSelectedRange] = React.useState<IPRange>();
 
@@ -152,6 +157,8 @@ const LinodeNetworking = () => {
 
   const renderIPRow = (ipDisplay: IPDisplay) => {
     const { address, type, gateway, subnetMask, rdns, _ip, _range } = ipDisplay;
+    const isOnlyPublicIP =
+      ips?.ipv4.public.length === 1 && type === 'IPv4 – Public';
 
     return (
       <TableRow
@@ -192,6 +199,7 @@ const LinodeNetworking = () => {
               ipAddress={_ip}
               onRemove={openRemoveIPDialog}
               readOnly={readOnly}
+              isOnlyPublicIP={isOnlyPublicIP}
             />
           ) : _range ? (
             <LinodeNetworkingActionMenu
@@ -200,6 +208,7 @@ const LinodeNetworking = () => {
               onEdit={() => handleOpenEditRDNSForRange(_range)}
               onRemove={openRemoveIPRangeDialog}
               readOnly={readOnly}
+              isOnlyPublicIP={isOnlyPublicIP}
             />
           ) : null}
         </TableCell>

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.tsx

@@ -1,38 +1,38 @@
 import { IPAddress, IPRange } from '@linode/api-v4/lib/networking';
+import { Theme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/styles';
 import { isEmpty } from 'ramda';
 import * as React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import ActionMenu, { Action } from 'src/components/ActionMenu';
-import { makeStyles } from 'tss-react/mui';
-import { useTheme } from '@mui/styles';
-import { Theme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import { Box } from 'src/components/Box';
 import InlineMenuAction from 'src/components/InlineMenuAction';
 import { IPTypes } from './types';
 
-const useStyles = makeStyles()(() => ({
-  emptyCell: {
-    height: 40,
-  },
-}));
-
 interface Props {
   onEdit?: (ip: IPAddress | IPRange) => void;
   onRemove?: (ip: IPAddress | IPRange) => void;
   ipType: IPTypes;
   ipAddress?: IPAddress | IPRange;
   readOnly: boolean;
+  isOnlyPublicIP: boolean;
 }
 
 type CombinedProps = Props & RouteComponentProps<{}>;
 
-export const LinodeNetworkingActionMenu: React.FC<CombinedProps> = (props) => {
-  const { classes } = useStyles();
-
+export const LinodeNetworkingActionMenu = (props: CombinedProps) => {
   const theme = useTheme<Theme>();
   const matchesMdDown = useMediaQuery(theme.breakpoints.down('lg'));
 
-  const { onEdit, onRemove, ipType, ipAddress, readOnly } = props;
+  const {
+    onEdit,
+    onRemove,
+    ipType,
+    ipAddress,
+    readOnly,
+    isOnlyPublicIP,
+  } = props;
 
   const showEdit =
     ipType !== 'IPv4 – Private' &&
@@ -45,23 +45,37 @@ export const LinodeNetworkingActionMenu: React.FC<CombinedProps> = (props) => {
   // if we have a 116 we don't want to give the option to remove it
   const is116Range = ipAddress?.prefix === 116;
 
+  const readOnlyTooltip = readOnly
+    ? "You don't have permissions to perform this action"
+    : undefined;
+
+  const isOnlyPublicIPTooltip = isOnlyPublicIP
+    ? 'Linodes must have at least one public IP'
+    : undefined;
+
   const actions = [
     onRemove && ipAddress && !is116Range && deletableIPTypes.includes(ipType)
       ? {
           title: 'Delete',
-          disabled: readOnly,
           onClick: () => {
             onRemove(ipAddress);
           },
+          disabled: readOnly || isOnlyPublicIP,
+          tooltip: readOnly
+            ? readOnlyTooltip
+            : isOnlyPublicIP
+            ? isOnlyPublicIPTooltip
+            : undefined,
         }
       : null,
     onEdit && ipAddress && showEdit
       ? {
           title: 'Edit RDNS',
-          disabled: readOnly,
           onClick: () => {
             onEdit(ipAddress);
           },
+          disabled: readOnly,
+          tooltip: readOnly ? readOnlyTooltip : undefined,
         }
       : null,
   ].filter(Boolean) as Action[];
@@ -74,8 +88,9 @@ export const LinodeNetworkingActionMenu: React.FC<CombinedProps> = (props) => {
             <InlineMenuAction
               key={action.title}
               actionText={action.title}
-              disabled={readOnly}
+              disabled={action.disabled}
               onClick={action.onClick}
+              tooltip={action.tooltip}
             />
           );
         })}
@@ -87,7 +102,7 @@ export const LinodeNetworkingActionMenu: React.FC<CombinedProps> = (props) => {
       )}
     </>
   ) : (
-    <span className={classes.emptyCell}></span>
+    <Box sx={{ height: 40 }}></Box>
   );
 };