Bug fix/11366 replace altinn menu with dropdown menu at lage page

frontend/language/src/nb.json

@@ -1513,10 +1513,7 @@
   "ux_editor.no_components_selected": "Velg en side for å se forhåndsvisningen",
   "ux_editor.no_text": "Ingen tekst",
   "ux_editor.page": "Side",
-  "ux_editor.page_delete_confirm": "Ja, slett skjemasiden",
-  "ux_editor.page_delete_information": "Alt innholdet på siden vil bli fjernet.",
-  "ux_editor.page_delete_text": "Er du sikker på at du vil slette denne siden?",
-  "ux_editor.page_menu_delete": "Slett",
+  "ux_editor.page_delete_text": "Er du sikker på at du vil slette denne siden?\nAlt innholdet på siden vil bli fjernet.",
   "ux_editor.page_menu_down": "Flytt ned",
   "ux_editor.page_menu_edit": "Gi nytt navn",
   "ux_editor.page_menu_up": "Flytt opp",

frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/InputPopover/InputPopover.test.tsx

@@ -17,20 +17,56 @@ const mockSaveNewName = jest.fn();
 const mockOnClose = jest.fn();
 
 const defaultProps: InputPopoverProps = {
+  disabled: false,
   oldName: mockOldName,
   layoutOrder: mockLayoutOrder,
   saveNewName: mockSaveNewName,
   onClose: mockOnClose,
-  open: true,
-  trigger: <button>My trigger</button>,
 };
 
 describe('InputPopover', () => {
-  const user = userEvent.setup();
   afterEach(jest.clearAllMocks);
 
+  it('does hides dropdown menu item by default when not open', () => {
+    render(<InputPopover {...defaultProps} />);
+
+    const input = screen.queryByLabelText(textMock('ux_editor.input_popover_label'));
+    expect(input).not.toBeInTheDocument();
+  });
+
+  it('opens the popover when the dropdown menu item is clicked', async () => {
+    render(<InputPopover {...defaultProps} />);
+
+    const input = screen.queryByLabelText(textMock('ux_editor.input_popover_label'));
+    expect(input).not.toBeInTheDocument();
+
+    await openDropdownMenuItem();
+
+    const inputAfter = screen.getByLabelText(textMock('ux_editor.input_popover_label'));
+    expect(inputAfter).toBeInTheDocument();
+  });
+
+  it('saves the new name on Enter key press', async () => {
+    const user = userEvent.setup();
+    render(<InputPopover {...defaultProps} />);
+
+    await openDropdownMenuItem();
+
+    const input = screen.getByLabelText(textMock('ux_editor.input_popover_label'));
+    expect(input).toHaveValue(mockOldName);
+
+    await act(() => user.type(input, mockNewValue));
+    await act(() => user.keyboard('{Enter}'));
+
+    expect(mockSaveNewName).toHaveBeenCalledTimes(1);
+    expect(mockSaveNewName).toHaveBeenCalledWith(mockNewName);
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+  });
+
   it('calls the "saveNewName" function when the confirm button is clicked', async () => {
+    const user = userEvent.setup();
     render(<InputPopover {...defaultProps} />);
+    await openDropdownMenuItem();
 
     const input = screen.getByLabelText(textMock('ux_editor.input_popover_label'));
     expect(input).toHaveValue(mockOldName);
@@ -50,7 +86,9 @@ describe('InputPopover', () => {
   });
 
   it('does not call "saveNewName" when input is same as old value', async () => {
+    const user = userEvent.setup();
     render(<InputPopover {...defaultProps} />);
+    await openDropdownMenuItem();
 
     const input = screen.getByLabelText(textMock('ux_editor.input_popover_label'));
     expect(input).toHaveValue(mockOldName);
@@ -59,22 +97,10 @@ describe('InputPopover', () => {
     expect(mockSaveNewName).toHaveBeenCalledTimes(0);
   });
 
-  it('saves the new name on Enter key press', async () => {
-    render(<InputPopover {...defaultProps} />);
-
-    const input = screen.getByLabelText(textMock('ux_editor.input_popover_label'));
-    expect(input).toHaveValue(mockOldName);
-
-    await act(() => user.type(input, mockNewValue));
-    await act(() => user.keyboard('{Enter}'));
-
-    expect(mockSaveNewName).toHaveBeenCalledTimes(1);
-    expect(mockSaveNewName).toHaveBeenCalledWith(mockNewName);
-    expect(mockOnClose).toHaveBeenCalledTimes(1);
-  });
-
   it('cancels the new name on Escape key press', async () => {
+    const user = userEvent.setup();
     render(<InputPopover {...defaultProps} />);
+    await openDropdownMenuItem();
 
     const input = screen.getByLabelText(textMock('ux_editor.input_popover_label'));
     expect(input).toHaveValue(mockOldName);
@@ -87,7 +113,9 @@ describe('InputPopover', () => {
   });
 
   it('displays error message if new name is not unique', async () => {
+    const user = userEvent.setup();
     render(<InputPopover {...defaultProps} />);
+    await openDropdownMenuItem();
 
     const input = screen.getByLabelText(textMock('ux_editor.input_popover_label'));
     expect(input).toHaveValue(mockOldName);
@@ -102,7 +130,9 @@ describe('InputPopover', () => {
   });
 
   it('displays error message if new name is empty', async () => {
+    const user = userEvent.setup();
     render(<InputPopover {...defaultProps} />);
+    await openDropdownMenuItem();
 
     const input = screen.getByLabelText(textMock('ux_editor.input_popover_label'));
     expect(input).toHaveValue(mockOldName);
@@ -117,7 +147,9 @@ describe('InputPopover', () => {
   });
 
   it('displays error message if new name is too long', async () => {
+    const user = userEvent.setup();
     render(<InputPopover {...defaultProps} />);
+    await openDropdownMenuItem();
 
     const input = screen.getByLabelText(textMock('ux_editor.input_popover_label'));
     expect(input).toHaveValue(mockOldName);
@@ -133,7 +165,9 @@ describe('InputPopover', () => {
   });
 
   it('displays error message if new name has illegal format', async () => {
+    const user = userEvent.setup();
     render(<InputPopover {...defaultProps} />);
+    await openDropdownMenuItem();
 
     const input = screen.getByLabelText(textMock('ux_editor.input_popover_label'));
     expect(input).toHaveValue(mockOldName);
@@ -149,11 +183,21 @@ describe('InputPopover', () => {
   });
 
   it('closes the popover when cancel button is clicked', async () => {
+    const user = userEvent.setup();
     render(<InputPopover {...defaultProps} />);
+    await openDropdownMenuItem();
 
     const button = screen.getByRole('button', { name: textMock('general.cancel') });
     await act(() => user.click(button));
 
     expect(mockOnClose).toHaveBeenCalledTimes(1);
   });
 });
+
+const openDropdownMenuItem = async () => {
+  const user = userEvent.setup();
+  const dropdownMenuItem = screen.getByRole('menuitem', {
+    name: textMock('ux_editor.page_menu_edit'),
+  });
+  await act(() => user.click(dropdownMenuItem));
+};

frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/InputPopover/InputPopover.tsx

@@ -1,83 +1,52 @@
-import React, { ReactNode, useRef, useEffect, ChangeEvent, useState } from 'react';
+import React, { ReactNode, ChangeEvent, useState, useRef, KeyboardEvent } from 'react';
 import classes from './InputPopover.module.css';
-import { Button, ErrorMessage, LegacyPopover, Textfield } from '@digdir/design-system-react';
+import {
+  Button,
+  DropdownMenu,
+  ErrorMessage,
+  Popover,
+  Textfield,
+} from '@digdir/design-system-react';
 import { useTranslation } from 'react-i18next';
 import { getPageNameErrorKey } from '../../../../../utils/designViewUtils';
+import { PencilIcon } from '@studio/icons';
 
 export type InputPopoverProps = {
-  /**
-   * The old name of the page
-   */
+  disabled: boolean;
   oldName: string;
-  /**
-   * The list containing all page names
-   */
   layoutOrder: string[];
-  /**
-   * Saves the new name of the page
-   * @param newName the new name to save
-   * @returns void
-   */
   saveNewName: (newName: string) => void;
-  /**
-   * Function to be executed when closing the popover
-   * @param event optional mouse event
-   * @returns void
-   */
-  onClose: (event?: React.MouseEvent<HTMLButtonElement> | MouseEvent) => void;
-  /**
-   * If the popover is open or not
-   */
-  open: boolean;
-  /**
-   * The component that triggers the opening of the popover
-   */
-  trigger: ReactNode;
+  onClose: () => void;
 };
 
 /**
  * @component
- *    Displays a popover where the user can edit the name of the page
+ *    Displays a dropdown menu item with a popover where the user can edit the name of the page
  *
+ * @property {boolean}[disabled] - If the dropdown item is disabled
  * @property {string}[oldName] - The old name of the page
  * @property {string[]}[layoutOrder] - The list containing all page names
  * @property {function}[saveNewName] - Saves the new name of the page
- * @property {function}[onClose] - Function to be executed when closing the popover
- * @property {boolean}[open] - If the popover is open or not
- * @property {ReactNode}[trigger] - The component that triggers the opening of the popover
+ * @property {function}[onClose] - Function to be executed on close
  *
  * @returns {ReactNode} - The rendered component
  */
 export const InputPopover = ({
+  disabled,
   oldName,
   layoutOrder,
   saveNewName,
   onClose,
-  open = false,
-  trigger,
 }: InputPopoverProps): ReactNode => {
   const { t } = useTranslation();
 
-  const ref = useRef(null);
+  const newNameRef = useRef(null);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState<boolean>(false);
 
   const [errorMessage, setErrorMessage] = useState<string>(null);
   const [newName, setNewName] = useState<string>(oldName);
   const shouldSavingBeEnabled = errorMessage === null && newName !== oldName;
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        onClose(event);
-      }
-    };
-    if (open) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [onClose, open]);
-
   /**
    * Handles the change of the new page name. If the name exists, is empty, is too
    * long, or has a wrong format, an error is set, otherwise the value displayed is changed.
@@ -89,58 +58,67 @@ export const InputPopover = ({
     setNewName(newNameCandidate);
   };
 
-  /**
-   * If there is no error and the name is changed, and enter is clicked, the new name is saved.
-   * When Escape is clicked, the popover closes.
-   */
-  const handleKeyPress = (event) => {
+  const handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !errorMessage && oldName !== newName) {
       saveNewName(newName);
-      onClose();
-    } else if (event.key === 'Escape') {
-      onClose();
-      setNewName(oldName);
-      setErrorMessage(null);
+      handleClose();
     }
   };
 
+  const handleClose = () => {
+    onClose();
+    setIsEditDialogOpen(false);
+  };
+
   return (
-    <div ref={ref}>
-      <LegacyPopover className={classes.popover} trigger={trigger} open={open}>
-        <Textfield
-          label={t('ux_editor.input_popover_label')}
-          size='small'
-          onKeyDown={handleKeyPress}
-          onChange={handleOnChange}
-          value={newName}
-          error={errorMessage !== null}
-        />
-        <ErrorMessage className={classes.errorMessage} size='small'>
-          {errorMessage}
-        </ErrorMessage>
-        <div className={classes.buttonContainer}>
-          <Button
-            color='first'
-            variant='primary'
-            onClick={() => saveNewName(newName)}
-            disabled={!shouldSavingBeEnabled}
-            size='small'
-          >
-            {t('ux_editor.input_popover_save_button')}
-          </Button>
-          <Button
-            color='second'
-            variant='tertiary'
-            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-              event.stopPropagation();
-              onClose(event);
-            }}
+    <>
+      <DropdownMenu.Item
+        onClick={() => setIsEditDialogOpen(true)}
+        id='edit-page-button'
+        disabled={disabled}
+        ref={newNameRef}
+        aria-expanded={isEditDialogOpen}
+      >
+        <PencilIcon />
+        {t('ux_editor.page_menu_edit')}
+      </DropdownMenu.Item>
+      <Popover anchorEl={newNameRef.current} open={isEditDialogOpen} onClose={handleClose}>
+        <Popover.Content>
+          <Textfield
+            label={t('ux_editor.input_popover_label')}
             size='small'
-          >
-            {t('general.cancel')}
-          </Button>
-        </div>
-      </LegacyPopover>
-    </div>
+            onChange={handleOnChange}
+            onKeyDown={handleKeyPress}
+            value={newName}
+            error={errorMessage !== null}
+          />
+          <ErrorMessage className={classes.errorMessage} size='small'>
+            {errorMessage}
+          </ErrorMessage>
+          <div className={classes.buttonContainer}>
+            <Button
+              color='first'
+              variant='primary'
+              onClick={() => saveNewName(newName)}
+              disabled={!shouldSavingBeEnabled}
+              size='small'
+            >
+              {t('ux_editor.input_popover_save_button')}
+            </Button>
+            <Button
+              color='second'
+              variant='tertiary'
+              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+                event.stopPropagation();
+                handleClose();
+              }}
+              size='small'
+            >
+              {t('general.cancel')}
+            </Button>
+          </div>
+        </Popover.Content>
+      </Popover>
+    </>
   );
 };