OU-1488: sanitize runbook_url

web/package.json

@@ -115,6 +115,8 @@
     "@openshift-console/dynamic-plugin-sdk-webpack": "4.22.0",
     "@swc/core": "^1.15.3",
     "@swc/helpers": "0.5.23",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.3",
     "@types/ajv": "^0.0.5",
     "@types/classnames": "^2.2.7",
     "@types/jest": "^30.0.0",

web/src/features/metrics/components/QueryKebab.spec.tsx

@@ -1,11 +1,9 @@
 /** @jest-environment jsdom */
 
-import { act } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-import { createRoot } from 'react-dom/client';
 
 import { QueryKebab } from '@/features/metrics/components/QueryKebab';
-import { DataTestIDs } from '@/shared/constants/data-test';
 
 type DropdownProps = PropsWithChildren<{
   isOpen: boolean;
@@ -46,66 +44,41 @@ jest.mock('react-i18next', () => ({
 }));
 
 const renderQueryKebab = (text?: string, onCreateAlert = jest.fn()) => {
-  const container = document.createElement('div');
-  document.body.append(container);
-  const root = createRoot(container);
-
-  act(() => {
-    root.render(
-      <QueryKebab
-        canCreateAlert
-        isDisabledSeriesEmpty
-        isEnabled
-        onCreateAlert={onCreateAlert}
-        onDelete={jest.fn()}
-        onDuplicate={jest.fn()}
-        onToggleAllSeries={jest.fn()}
-        onToggleIsEnabled={jest.fn()}
-        queryTableData={{ columns: [], rows: [] }}
-        text={text}
-      />,
-    );
-  });
+  render(
+    <QueryKebab
+      canCreateAlert
+      isDisabledSeriesEmpty
+      isEnabled
+      onCreateAlert={onCreateAlert}
+      onDelete={jest.fn()}
+      onDuplicate={jest.fn()}
+      onToggleAllSeries={jest.fn()}
+      onToggleIsEnabled={jest.fn()}
+      queryTableData={{ columns: [], rows: [] }}
+      text={text}
+    />,
+  );
 
-  act(() => {
-    container.querySelector<HTMLButtonElement>('[data-test="kebab-dropdown-button"]')?.click();
-  });
+  fireEvent.click(screen.getByRole('button', { name: 'toggle menu' }));
 
-  return {
-    cleanup: () => {
-      act(() => root.unmount());
-      container.remove();
-    },
-    onCreateAlert,
-  };
+  return onCreateAlert;
 };
 
-const getCreateAlertItem = () =>
-  document.querySelector<HTMLButtonElement>(
-    `[data-test="${DataTestIDs.MetricsPageCreateAlertRuleDropdownItem}"]`,
-  );
-
 describe('QueryKebab', () => {
-  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
-
-  afterEach(() => document.body.replaceChildren());
-
   it.each([undefined, '   '])('disables Create alert when the query is empty', (text) => {
-    const { cleanup } = renderQueryKebab(text);
-    const createAlertItem = getCreateAlertItem();
+    renderQueryKebab(text);
+    const createAlertItem = screen.getByRole('button', { name: 'Create alert' });
 
-    expect(createAlertItem?.getAttribute('aria-disabled')).toBe('true');
-    cleanup();
+    expect(createAlertItem.getAttribute('aria-disabled')).toBe('true');
   });
 
   it('enables Create alert and invokes its action when the query has text', () => {
     const onCreateAlert = jest.fn();
-    const { cleanup } = renderQueryKebab('up', onCreateAlert);
-    const createAlertItem = getCreateAlertItem();
+    renderQueryKebab('up', onCreateAlert);
+    const createAlertItem = screen.getByRole('button', { name: 'Create alert' });
 
-    expect(createAlertItem?.getAttribute('aria-disabled')).not.toBe('true');
-    act(() => createAlertItem?.click());
+    expect(createAlertItem.getAttribute('aria-disabled')).not.toBe('true');
+    fireEvent.click(createAlertItem);
     expect(onCreateAlert).toHaveBeenCalledTimes(1);
-    cleanup();
   });
 });

web/src/shared/console/utils/Link.spec.tsx

@@ -0,0 +1,45 @@
+/** @jest-environment jsdom */
+
+import { render, screen } from '@testing-library/react';
+
+import { ExternalLink, LinkifyExternal } from '@/shared/console/utils/Link';
+
+describe('ExternalLink', () => {
+  it.each([
+    'https://runbooks.example.com/alert',
+    'http://runbooks.example.com/alert?severity=high',
+  ])('renders an absolute HTTP(S) URL as a link: %s', (href) => {
+    render(<ExternalLink href={href} text={href} />);
+
+    expect(screen.getByRole('link', { name: href }).getAttribute('href')).toBe(href);
+  });
+
+  it.each([
+    'javascript:alert(1)',
+    'JaVaScRiPt:alert(1)',
+    'data:text/html,<script>alert(1)</script>',
+    'vbscript:msgbox(1)',
+    'mailto:security@example.com',
+    '/runbooks/alert',
+    '//runbooks.example.com/alert',
+    '\tjavascript:alert(1)',
+    'not a URL',
+  ])('renders an unsafe or invalid URL as text: %s', (href) => {
+    const { container } = render(<ExternalLink href={href} text={href} />);
+
+    expect(container.textContent).toBe(href);
+    expect(screen.queryByRole('link')).toBeNull();
+  });
+});
+
+describe('LinkifyExternal', () => {
+  it('turns URLs in its children into protected external links', () => {
+    const href = 'https://runbooks.example.com/alert';
+    render(<LinkifyExternal>{href}</LinkifyExternal>);
+
+    const link = screen.getByRole('link', { name: href });
+    expect(link.getAttribute('href')).toBe(href);
+    expect(link.getAttribute('target')).toBe('_blank');
+    expect(link.getAttribute('rel')).toBe('noopener noreferrer');
+  });
+});