fix: [M3-7197] - "Support Ticket" button in network tab not working properly

packages/manager/.changeset/pr-11074-fixed-1728476792585.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+"Support Ticket" button in network tab not working properly ([#11074](https://github.com/linode/manager/pull/11074))

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

@@ -19,10 +19,12 @@ import {
 } from 'src/queries/linodes/networking';
 import { useCreateIPv6RangeMutation } from 'src/queries/networking/networking';
 
+import { ExplainerCopy } from './ExplainerCopy';
+
 import type { IPv6Prefix } from '@linode/api-v4/lib/networking';
 import type { Item } from 'src/components/EnhancedSelect/Select';
 
-type IPType = 'v4Private' | 'v4Public';
+export type IPType = 'v4Private' | 'v4Public';
 
 const ipOptions: Item<IPType>[] = [
   { label: 'Public', value: 'v4Public' },
@@ -34,27 +36,6 @@ const prefixOptions = [
   { label: '/56', value: '56' },
 ];
 
-// @todo: Pre-fill support tickets.
-const explainerCopy: Record<IPType, JSX.Element> = {
-  v4Private: (
-    <>
-      Add a private IP address to your Linode. Data sent explicitly to and from
-      private IP addresses in the same data center does not incur transfer quota
-      usage. To ensure that the private IP is properly configured once added,
-      it&rsquo;s best to reboot your Linode.
-    </>
-  ),
-  v4Public: (
-    <>
-      Public IP addresses, over and above the one included with each Linode,
-      incur an additional monthly charge. If you need an additional Public IP
-      Address you must request one. Please open a{' '}
-      <Link to="support/tickets">Support Ticket</Link> if you have not done so
-      already.
-    </>
-  ),
-};
-
 const IPv6ExplanatoryCopy = {
   56: (
     <>
@@ -70,7 +51,7 @@ const IPv6ExplanatoryCopy = {
   ),
 };
 
-const tooltipCopy: Record<IPType, string | null> = {
+const tooltipCopy: Record<IPType, null | string> = {
   v4Private: 'This Linode already has a private IP address.',
   v4Public: null,
 };
@@ -197,19 +178,23 @@ export const AddIPDrawer = (props: Props) => {
           <Box>
             {ipOptions.map((option, idx) => (
               <FormControlLabel
-                control={<Radio />}
-                data-qa-radio={option.label}
                 disabled={
                   option.value === 'v4Private' && linodeIsInDistributedRegion
                 }
+                control={<Radio />}
+                data-qa-radio={option.label}
                 key={idx}
                 label={option.label}
                 value={option.value}
               />
             ))}
           </Box>
         </StyledRadioGroup>
-        {selectedIPv4 && <Typography>{explainerCopy[selectedIPv4]}</Typography>}
+        {selectedIPv4 && (
+          <Typography>
+            <ExplainerCopy ipType={selectedIPv4} linodeId={linodeId} />
+          </Typography>
+        )}
 
         {_tooltipCopy ? (
           <Tooltip placement="bottom-end" title={_tooltipCopy}>

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

@@ -0,0 +1,60 @@
+import { screen } from '@testing-library/react';
+import * as React from 'react';
+import { vi } from 'vitest';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { ExplainerCopy } from './ExplainerCopy';
+
+const queryMocks = vi.hoisted(() => ({
+  useLinodeQuery: vi.fn().mockReturnValue({ data: undefined }),
+}));
+
+vi.mock('src/queries/linodes/linodes', async () => {
+  const actual = await vi.importActual('src/queries/linodes/linodes');
+  return {
+    ...actual,
+    useLinodeQuery: queryMocks.useLinodeQuery,
+  };
+});
+
+describe('ExplainerCopy Component', () => {
+  const linodeId = 1234;
+
+  beforeEach(() => {
+    queryMocks.useLinodeQuery.mockReturnValue({
+      data: { label: 'Test Linode' },
+    });
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('renders the correct content for v4Private IPType', () => {
+    renderWithTheme(<ExplainerCopy ipType="v4Private" linodeId={linodeId} />);
+
+    expect(
+      screen.getByText(/Add a private IP address to your Linode/i)
+    ).toBeVisible();
+    expect(
+      screen.getByText(/Data sent explicitly to and from private IP addresses/i)
+    ).toBeVisible();
+  });
+
+  it('renders the correct content for v4Public IPType with SupportLink', () => {
+    renderWithTheme(<ExplainerCopy ipType="v4Public" linodeId={linodeId} />);
+
+    expect(
+      screen.getByText(/Public IP addresses, over and above the one included/i)
+    ).toBeVisible();
+    expect(screen.getByRole('link', { name: 'Support Ticket' })).toBeVisible();
+  });
+
+  it('displays no content when an unknown IPType is provided', () => {
+    renderWithTheme(<ExplainerCopy ipType={null as any} linodeId={linodeId} />);
+
+    expect(screen.queryByText(/Add a private IP address/i)).toBeNull();
+    expect(screen.queryByText(/Support Ticket/)).toBeNull();
+  });
+});

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+import { SupportLink } from 'src/components/SupportLink';
+import { useLinodeQuery } from 'src/queries/linodes/linodes';
+
+import type { IPType } from './AddIPDrawer';
+
+interface ExplainerCopyProps {
+  ipType: IPType;
+  linodeId: number;
+}
+
+export const ExplainerCopy = ({ ipType, linodeId }: ExplainerCopyProps) => {
+  const { data: linode } = useLinodeQuery(linodeId);
+
+  switch (ipType) {
+    case 'v4Private':
+      return (
+        <>
+          Add a private IP address to your Linode. Data sent explicitly to and
+          from private IP addresses in the same data center does not incur
+          transfer quota usage. To ensure that the private IP is properly
+          configured once added, it&rsquo;s best to reboot your Linode.
+        </>
+      );
+    case 'v4Public':
+      return (
+        <>
+          Public IP addresses, over and above the one included with each Linode,
+          incur an additional monthly charge. If you need an additional Public
+          IP Address you must request one. Please open a{' '}
+          <SupportLink
+            entity={{ id: linodeId, type: 'linode_id' }}
+            text="Support Ticket"
+            title={`Additional Public IP Address on ${linode?.label}`}
+          />{' '}
+          if you have not done so already.
+        </>
+      );
+    default:
+      return null;
+  }
+};