feat: [M3-7272] - Disable Public IP Address for VPC only Linode

packages/manager/.changeset/pr-9899-upcoming-features-1699911388781.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Disable Public IP Address for VPC only Linode ([#9899](https://github.com/linode/manager/pull/9899))

packages/manager/src/components/CopyTooltip/CopyTooltip.tsx

@@ -16,6 +16,11 @@ export interface CopyTooltipProps {
    * @default false
    */
   copyableText?: boolean;
+  /**
+   * If true, the copy button will be disabled and there will be no tooltip.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * Callback to be executed when the icon is clicked.
    */
@@ -38,7 +43,14 @@ export interface CopyTooltipProps {
 
 export const CopyTooltip = (props: CopyTooltipProps) => {
   const [copied, setCopied] = React.useState<boolean>(false);
-  const { className, copyableText, onClickCallback, placement, text } = props;
+  const {
+    className,
+    copyableText,
+    disabled,
+    onClickCallback,
+    placement,
+    text,
+  } = props;
 
   const handleIconClick = () => {
     setCopied(true);
@@ -49,30 +61,38 @@ export const CopyTooltip = (props: CopyTooltipProps) => {
     }
   };
 
+  const CopyButton = (
+    <StyledCopyButton
+      aria-label={`Copy ${text} to clipboard`}
+      className={className}
+      data-qa-copy-btn
+      name={text}
+      onClick={handleIconClick}
+      type="button"
+      {...props}
+    >
+      {copyableText ? text : <FileCopy />}
+    </StyledCopyButton>
+  );
+
+  if (disabled) {
+    return CopyButton;
+  }
+
   return (
     <Tooltip
       className="copy-tooltip"
       data-qa-copied
       placement={placement ?? 'top'}
       title={copied ? 'Copied!' : 'Copy'}
     >
-      <StyledCopyTooltipButton
-        aria-label={`Copy ${text} to clipboard`}
-        className={className}
-        data-qa-copy-btn
-        name={text}
-        onClick={handleIconClick}
-        type="button"
-        {...props}
-      >
-        {copyableText ? text : <FileCopy />}
-      </StyledCopyTooltipButton>
+      {CopyButton}
     </Tooltip>
   );
 };
 
-const StyledCopyTooltipButton = styled('button', {
-  label: 'StyledCopyTooltipButton',
+const StyledCopyButton = styled('button', {
+  label: 'StyledCopyButton',
   shouldForwardProp: omittedProps(['copyableText', 'text']),
 })<Omit<CopyTooltipProps, 'text'>>(({ theme, ...props }) => ({
   '& svg': {
@@ -102,4 +122,8 @@ const StyledCopyTooltipButton = styled('button', {
     font: 'inherit',
     padding: 0,
   }),
+  ...(props.disabled && {
+    color: theme.color.disabledText,
+    cursor: 'default',
+  }),
 }));

packages/manager/src/features/Linodes/AccessTable.test.tsx

@@ -0,0 +1,53 @@
+import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+
+import { linodeFactory } from 'src/factories';
+import { PUBLIC_IPS_UNASSIGNED_TOOLTIP_TEXT } from 'src/features/Linodes/PublicIpsUnassignedTooltip';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { AccessTable } from './AccessTable';
+
+const linode = linodeFactory.build();
+
+describe('AccessTable', () => {
+  it('should disable copy button and display help icon tooltip if isVPCOnlyLinode is true', async () => {
+    const { findByRole, getAllByRole } = renderWithTheme(
+      <AccessTable
+        isVPCOnlyLinode={true}
+        rows={[{ text: linode.ipv4[0] }, { text: linode.ipv4[1] }]}
+        title={'Public IP Addresses'}
+      />
+    );
+
+    const buttons = getAllByRole('button');
+    const helpIconButton = buttons[0];
+    const copyButtons = buttons.slice(1);
+
+    fireEvent.mouseEnter(helpIconButton);
+
+    const publicIpsUnassignedTooltip = await findByRole(/tooltip/);
+    expect(publicIpsUnassignedTooltip).toContainHTML(
+      PUBLIC_IPS_UNASSIGNED_TOOLTIP_TEXT
+    );
+
+    copyButtons.forEach((copyButton) => {
+      expect(copyButton).toBeDisabled();
+    });
+  });
+
+  it('should not disable copy button if isVPCOnlyLinode is false', () => {
+    const { getAllByRole } = renderWithTheme(
+      <AccessTable
+        isVPCOnlyLinode={false}
+        rows={[{ text: linode.ipv4[0] }, { text: linode.ipv4[1] }]}
+        title={'Public IP Addresses'}
+      />
+    );
+
+    const copyButtons = getAllByRole('button');
+
+    copyButtons.forEach((copyButton) => {
+      expect(copyButton).not.toBeDisabled();
+    });
+  });
+});

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

@@ -0,0 +1,86 @@
+import Grid, { Grid2Props } from '@mui/material/Unstable_Grid2';
+import { SxProps } from '@mui/system';
+import * as React from 'react';
+
+import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
+import { TableBody } from 'src/components/TableBody';
+import { TableCell } from 'src/components/TableCell';
+import { PublicIpsUnassignedTooltip } from 'src/features/Linodes/PublicIpsUnassignedTooltip';
+
+import {
+  StyledColumnLabelGrid,
+  StyledCopyTooltip,
+  StyledGradientDiv,
+  StyledTable,
+  StyledTableCell,
+  StyledTableGrid,
+  StyledTableRow,
+} from './LinodeEntityDetail.styles';
+
+interface AccessTableRow {
+  heading?: string;
+  text: null | string;
+}
+
+interface AccessTableProps {
+  footer?: JSX.Element;
+  gridProps?: Grid2Props;
+  isVPCOnlyLinode: boolean;
+  rows: AccessTableRow[];
+  sx?: SxProps;
+  title: string;
+}
+
+export const AccessTable = React.memo((props: AccessTableProps) => {
+  return (
+    <Grid
+      container
+      direction="column"
+      md={6}
+      spacing={1}
+      sx={props.sx}
+      {...props.gridProps}
+    >
+      <StyledColumnLabelGrid>
+        {props.title}{' '}
+        {props.isVPCOnlyLinode && props.title.includes('Public IP Address') && (
+          <PublicIpsUnassignedTooltip />
+        )}
+      </StyledColumnLabelGrid>
+      <StyledTableGrid>
+        <StyledTable>
+          <TableBody>
+            {props.rows.map((thisRow) => {
+              return thisRow.text ? (
+                <StyledTableRow
+                  disabled={props.isVPCOnlyLinode}
+                  key={thisRow.text}
+                >
+                  {thisRow.heading ? (
+                    <TableCell component="th" scope="row">
+                      {thisRow.heading}
+                    </TableCell>
+                  ) : null}
+                  <StyledTableCell>
+                    <StyledGradientDiv>
+                      <CopyTooltip
+                        copyableText
+                        disabled={props.isVPCOnlyLinode}
+                        text={thisRow.text}
+                      />
+                    </StyledGradientDiv>
+                    <StyledCopyTooltip
+                      disabled={props.isVPCOnlyLinode}
+                      text={thisRow.text}
+                    />
+                  </StyledTableCell>
+                </StyledTableRow>
+              ) : null;
+            })}
+          </TableBody>
+        </StyledTable>
+        {props.footer ? <Grid sx={{ padding: 0 }}>{props.footer}</Grid> : null}
+      </StyledTableGrid>
+    </Grid>
+  );
+});