enhancement: Make results tiltle editable and URL persistent

src/__tests__/CompareResults/ResultsTitle.test.tsx

@@ -0,0 +1,84 @@
+import { render, screen } from '@testing-library/react';
+import userEvent, { UserEvent } from '@testing-library/user-event';
+
+import { ResultsTitle } from '../../components/CompareResults/ResultsTitle';
+import useRawSearchParams from '../../hooks/useRawSearchParams';
+
+jest.mock('../../hooks/useRawSearchParams');
+
+let user: UserEvent;
+
+const setupTest = (initialParams = new URLSearchParams()) => {
+  const updateSearchParams = jest.fn();
+  (useRawSearchParams as jest.Mock).mockReturnValue([
+    initialParams,
+    updateSearchParams,
+  ]);
+  return { updateSearchParams };
+};
+
+describe('Results Title', () => {
+  beforeEach(() => {
+    user = userEvent.setup({ delay: null });
+  });
+
+  test.each([
+    ['default title', new URLSearchParams(), 'Results'],
+    ['custom title', new URLSearchParams('title=Custom+Title'), 'Custom Title'],
+  ])('renders spaces correctly', (_, params, expected) => {
+    setupTest(params);
+    render(<ResultsTitle mode={'light'} />);
+    expect(screen.getByText(expected)).toBeInTheDocument();
+  });
+
+  it('enables editing when edit icon is clicked', async () => {
+    setupTest();
+    render(<ResultsTitle mode={'light'} />);
+
+    const editIcon = screen.getByRole('button', { name: 'edit the title' });
+    await user.click(editIcon);
+
+    const inputField = screen.getByRole('textbox');
+    expect(inputField).toBeInTheDocument();
+    expect(inputField).toHaveValue('Results');
+  });
+
+  it('updates title and URL with new value', async () => {
+    const { updateSearchParams } = setupTest();
+    render(<ResultsTitle mode={'light'} />);
+
+    await user.click(screen.getByRole('button', { name: 'edit the title' }));
+    const inputField = screen.getByRole('textbox');
+
+    await user.clear(inputField);
+    await user.type(inputField, 'New Title');
+    await user.keyboard('{Enter}');
+
+    expect(screen.getByTestId('results-title-component')).toHaveTextContent(
+      'NewTitle',
+    );
+
+    const updatedParams = updateSearchParams.mock
+      .calls[0][0] as URLSearchParams;
+
+    expect(updatedParams.get('title')).toBe('NewTitle');
+    expect(updateSearchParams).toHaveBeenCalledWith(
+      expect.any(URLSearchParams),
+      { method: 'push' },
+    );
+  });
+
+  it('reverts to original title on escape', async () => {
+    setupTest(new URLSearchParams('title=Original+Title'));
+    render(<ResultsTitle mode='light' />);
+
+    await user.click(screen.getByRole('button', { name: 'edit the title' }));
+    const inputField = screen.getByRole('textbox');
+
+    await user.clear(inputField);
+    await user.type(inputField, 'New Title');
+    await user.keyboard('{Escape}');
+
+    expect(screen.getByText('Original Title')).toBeInTheDocument();
+  });
+});

src/__tests__/CompareResults/ResultsView.test.tsx

@@ -50,7 +50,7 @@ describe('Results View', () => {
     const user = userEvent.setup({ delay: null });
     renderWithRoute(<ResultsView title={Strings.metaData.pageTitle.results} />);
 
-    const header = await screen.findByText('Results');
+    const header = await screen.findByTestId('results-title-component');
 
     expect(header).toBeInTheDocument();
 

src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap

@@ -690,9 +690,35 @@ exports[`Results Table Should match snapshot 1`] = `
                 class="MuiGrid-root MuiGrid-container fau5w0k css-jryjzr-MuiGrid-root"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-item f1q8wx css-j8gwlw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-item css-j8gwlw-MuiGrid-root"
                 >
-                  Results
+                  <div
+                    data-testid="results-title-component"
+                  >
+                    <div
+                      class="f1v35uxs"
+                    >
+                      <span
+                        class="f1q8wx"
+                      >
+                        Results
+                      </span>
+                      <button
+                        aria-label="edit the title"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1qlpk5e-MuiButtonBase-root-MuiIconButton-root"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <img
+                          alt="edit-icon"
+                          src="pencil.svg"
+                        />
+                        <span
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                        />
+                      </button>
+                    </div>
+                  </div>
                 </div>
                 <div
                   class="MuiGrid-root MuiGrid-item f1it3pp1 css-j8gwlw-MuiGrid-root"

src/components/CompareResults/ResultsMain.tsx

@@ -18,6 +18,7 @@ import { truncateHash } from '../../utils/helpers';
 import type { LoaderReturnValue } from './loader';
 import type { LoaderReturnValue as OverTimeLoaderReturnValue } from './overTimeLoader';
 import ResultsTable from './ResultsTable';
+import { ResultsTitle } from './ResultsTitle';
 
 function getPunctuationMark(index: number, newRevs: string[]) {
   return index != newRevs.length - 1 ? ', ' : '.';
@@ -36,6 +37,7 @@ function ResultsMain() {
   const { view } = useLoaderData() as
     | LoaderReturnValue
     | OverTimeLoaderReturnValue;
+
   const styles = {
     alert: style({
       width: '100%',
@@ -45,12 +47,6 @@ function ResultsMain() {
       margin: '0 auto',
       marginBottom: '80px',
     }),
-    title: style({
-      ...FontsRaw.HeadingXS,
-      fontWeight: 700,
-      letterSpacing: '-0.01em',
-      margin: 0,
-    }),
     subtitle: style({
       ...FontsRaw.BodyDefault,
       fontSize: '15px',
@@ -96,8 +92,8 @@ function ResultsMain() {
     <Container className={styles.container} data-testid='results-main'>
       <header>
         <Grid container className={styles.titleContainer} component='h2'>
-          <Grid item className={styles.title}>
-            Results
+          <Grid item>
+            <ResultsTitle mode={themeMode} />
           </Grid>
           <Grid item className={styles.subtitle}>
             {subtitles[view]}
@@ -121,5 +117,4 @@ function ResultsMain() {
     </Container>
   );
 }
-
 export default ResultsMain;

src/components/CompareResults/ResultsTitle.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { IconButton, Input } from '@mui/material';
+import { style } from 'typestyle';
+
+import useRawSearchParams from '../../hooks/useRawSearchParams';
+import { FontsRaw } from '../../styles';
+import pencilDark from '../../theme/img/pencil-dark.svg';
+import pencil from '../../theme/img/pencil.svg';
+
+interface EditButtonProps {
+  mode: string;
+}
+
+export const ResultsTitle = ({ mode }: EditButtonProps) => {
+  const [searchParams, updateSearchParams] = useRawSearchParams();
+  const [resultsTitle, setResultsTitle] = useState(
+    searchParams.get('title') || 'Results',
+  );
+  const [isEditing, setIsEditing] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const styles = {
+    title: style({
+      ...FontsRaw.HeadingXS,
+      fontWeight: 700,
+      letterSpacing: '-0.01em',
+      margin: 0,
+    }),
+    titleWrapper: style({
+      alignItems: 'center',
+      display: 'flex',
+      gap: '10px',
+    }),
+    screenReaderOnly: style({
+      position: 'absolute',
+      left: '-9999px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+    }),
+  };
+
+  const handleResultsChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newTitle = event.target.value.trim();
+    setResultsTitle(newTitle);
+  };
+
+  const handleEdit = () => setIsEditing(true);
+
+  const handleEditComplete = (
+    event: React.FocusEvent | React.KeyboardEvent,
+  ) => {
+    if ((event as React.KeyboardEvent).key === 'Escape') {
+      const title = searchParams.get('title');
+      setResultsTitle(title || 'Results');
+      setIsEditing(false);
+      return;
+    }
+
+    const isDoneEditing =
+      (event as React.KeyboardEvent).key === 'Enter' || event.type === 'blur';
+
+    if (isDoneEditing) {
+      const safeTitle = resultsTitle || 'Results';
+      setResultsTitle(safeTitle);
+
+      const newSearchParams = new URLSearchParams(searchParams);
+      newSearchParams.set('title', safeTitle);
+      updateSearchParams(newSearchParams, {
+        method: 'push',
+      });
+
+      setIsEditing(false);
+    }
+  };
+
+  const buttonIcon = (
+    <img
+      src={mode === 'light' ? pencil.toString() : pencilDark.toString()}
+      alt='edit-icon'
+    />
+  );
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  return (
+    <div data-testid='results-title-component'>
+      {isEditing ? (
+        <>
+          <label htmlFor='results' className={styles.screenReaderOnly}>
+            Results Title
+          </label>
+          <Input
+            id='results'
+            type='text'
+            inputRef={inputRef}
+            name='results-title'
+            value={resultsTitle}
+            onChange={handleResultsChange}
+            onBlur={handleEditComplete}
+            onKeyDown={handleEditComplete}
+            className={styles.title}
+          />
+        </>
+      ) : (
+        <div className={styles.titleWrapper}>
+          <span className={styles.title}>{resultsTitle}</span>
+          <IconButton onClick={handleEdit} aria-label='edit the title'>
+            {buttonIcon}
+          </IconButton>
+        </div>
+      )}
+    </div>
+  );
+};