Change recommendedNextAction in process to update layoutsetname and a…

…dd section to change in panel

frontend/language/src/nb.json

@@ -625,13 +625,13 @@
   "process_editor.configuration_panel_custom_receipt_delete_receipt": "Er du sikker på at du vil slette kvitteringen din?",
   "process_editor.configuration_panel_custom_receipt_heading": "Opprett din egen kvittering",
   "process_editor.configuration_panel_custom_receipt_info": "Hvis du heller vil lage din egen kvittering, kan du opprette den her. Kvitteringen du lager selv vil overstyre standardkvitteringen.",
-  "process_editor.configuration_panel_custom_receipt_layout_set_name": "Navn på sidegruppe: ",
+  "process_editor.configuration_panel_custom_receipt_layout_set_name": "Navn på kvittering: ",
   "process_editor.configuration_panel_custom_receipt_layout_set_name_validation": "Navnet må ha minst 2 tegn",
   "process_editor.configuration_panel_custom_receipt_navigate_to_lage_button": "Gå til Lage",
   "process_editor.configuration_panel_custom_receipt_navigate_to_lage_title": "Gå til Lage for å utforme kvitteringen din",
   "process_editor.configuration_panel_custom_receipt_select_data_model_label": "Datamodellknytning",
   "process_editor.configuration_panel_custom_receipt_spinner_title": "Laster inn kvittering",
-  "process_editor.configuration_panel_custom_receipt_textfield_label": "Navn på sidegruppe",
+  "process_editor.configuration_panel_custom_receipt_textfield_label": "Navn på kvittering",
   "process_editor.configuration_panel_data_model_selection_description": "Velg en datamodell å knytte til prosessteget",
   "process_editor.configuration_panel_data_task": "Oppgave: Utfylling",
   "process_editor.configuration_panel_data_types_to_sign_required": "Du må velge minst en datatype",
@@ -646,6 +646,8 @@
   "process_editor.configuration_panel_header_help_text_signing": "Du bruker oppgaven Signering (signing) når du vil at sluttbrukerne skal bekrefte med signatur.",
   "process_editor.configuration_panel_header_help_text_title": "Informasjon om valgt oppgave",
   "process_editor.configuration_panel_id_label": "ID:",
+  "process_editor.configuration_panel_layout_set_name": "Navn på sidegruppe: ",
+  "process_editor.configuration_panel_layout_set_name_label": "Navn på sidegruppe",
   "process_editor.configuration_panel_layout_set_id_not_unique": "Navnet på sidegruppen må være unikt",
   "process_editor.configuration_panel_missing_task": "Oppgave",
   "process_editor.configuration_panel_name_label": "Navn: ",

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.tsx

@@ -4,16 +4,17 @@ import { useTranslation } from 'react-i18next';
 import { useBpmnContext } from '../../../contexts/BpmnContext';
 import { EditTaskId } from './EditTaskId/EditTaskId';
 import { StudioDisplayTile, useStudioRecommendedNextActionContext } from '@studio/components';
-import { EditDataTypes } from '../EditDataTypes';
+import { EditDataTypes } from './EditDataTypes';
 import { useBpmnApiContext } from '../../../contexts/BpmnApiContext';
 import { Accordion } from '@digdir/designsystemet-react';
 import { EditActions } from './EditActions';
 import { EditPolicy } from './EditPolicy';
-import { EditDataTypesToSign } from '../EditDataTypesToSign';
-import { EditUniqueFromSignaturesInDataTypes } from '../EditUniqueFromSignaturesInDataTypes';
+import { EditDataTypesToSign } from './EditDataTypesToSign';
+import { EditUniqueFromSignaturesInDataTypes } from './EditUniqueFromSignaturesInDataTypes';
 import { StudioModeler } from '../../../utils/bpmnModeler/StudioModeler';
-import { RecommendedActionChangeName } from './EditTaskRecommendedActions/RecommendedActionChangeName';
+import { RecommendedActionChangeName } from './EditLayoutSetNameRecommendedAction/RecommendedActionChangeName';
 import { ConfigContentContainer } from './ConfigContentContainer';
+import { EditLayoutSetName } from '@altinn/process-editor/components/ConfigPanel/ConfigContent/EditLayoutSetName';
 
 export const ConfigContent = (): React.ReactElement => {
   const { t } = useTranslation();
@@ -53,11 +54,14 @@ export const ConfigContent = (): React.ReactElement => {
           showPadlock={false}
         />
         {taskHasConnectedLayoutSet && (
-          <EditDataTypes
-            connectedTaskId={layoutSet.tasks[0]}
-            dataModelIds={availableDataModelIds}
-            existingDataTypeForTask={existingDataTypeForTask}
-          />
+          <>
+            <EditLayoutSetName existingLayoutSetName={layoutSet.id} />
+            <EditDataTypes
+              connectedTaskId={layoutSet.tasks[0]}
+              dataModelIds={availableDataModelIds}
+              existingDataTypeForTask={existingDataTypeForTask}
+            />
+          </>
         )}
         {isSigningTask && (
           <>

frontend/packages/process-editor/src/components/ConfigPanel/EditDataTypes/EditDataTypes.test.tsx → frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.test.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import userEvent from '@testing-library/user-event';
-import { type BpmnApiContextProps, BpmnApiContext } from '../../../contexts/BpmnApiContext';
-import { BpmnContext } from '../../../contexts/BpmnContext';
+import { type BpmnApiContextProps, BpmnApiContext } from '../../../../contexts/BpmnApiContext';
+import { BpmnContext } from '../../../../contexts/BpmnContext';
 import { EditDataTypes, type EditDataTypesProps } from './EditDataTypes';
-import { BpmnConfigPanelFormContextProvider } from '../../../contexts/BpmnConfigPanelContext';
+import { BpmnConfigPanelFormContextProvider } from '../../../../contexts/BpmnConfigPanelContext';
 import {
   mockBpmnApiContextValue,
   mockBpmnContextValue,
-} from '../../../../test/mocks/bpmnContextMock';
+} from '../../../../../test/mocks/bpmnContextMock';
 import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse';
 
 const mockTaskId: string = 'testId';

frontend/packages/process-editor/src/components/ConfigPanel/EditDataTypes/EditDataTypes.tsx → frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { LinkIcon } from '@studio/icons';
 import { SelectDataTypes } from './SelectDataTypes';
 import classes from './EditDataTypes.module.css';
-import { useBpmnContext } from '../../../contexts/BpmnContext';
+import { useBpmnContext } from '../../../../contexts/BpmnContext';
 
 export type EditDataTypesProps = {
   dataModelIds: string[];

frontend/packages/process-editor/src/components/ConfigPanel/EditDataTypes/SelectDataTypes/SelectDataTypes.test.tsx → frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.test.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import userEvent from '@testing-library/user-event';
-import type { BpmnApiContextProps } from '../../../../contexts/BpmnApiContext';
-import { BpmnApiContext } from '../../../../contexts/BpmnApiContext';
-import { BpmnContext } from '../../../../contexts/BpmnContext';
+import type { BpmnApiContextProps } from '../../../../../contexts/BpmnApiContext';
+import { BpmnApiContext } from '../../../../../contexts/BpmnApiContext';
+import { BpmnContext } from '../../../../../contexts/BpmnContext';
 import type { SelectDataTypesProps } from './SelectDataTypes';
 import { SelectDataTypes } from './SelectDataTypes';
-import { BpmnConfigPanelFormContextProvider } from '../../../../contexts/BpmnConfigPanelContext';
+import { BpmnConfigPanelFormContextProvider } from '../../../../../contexts/BpmnConfigPanelContext';
 import {
   mockBpmnApiContextValue,
   mockBpmnContextValue,
-} from '../../../../../test/mocks/bpmnContextMock';
+} from '../../../../../../test/mocks/bpmnContextMock';
 
 const connectedTaskId = mockBpmnApiContextValue.layoutSets.sets[0].tasks[0];
 const mockOnClose = jest.fn();

frontend/packages/process-editor/src/components/ConfigPanel/EditDataTypes/SelectDataTypes/SelectDataTypes.tsx → frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Combobox } from '@digdir/designsystemet-react';
 import { StudioButton, StudioDeleteButton } from '@studio/components';
-import { useBpmnApiContext } from '../../../../contexts/BpmnApiContext';
+import { useBpmnApiContext } from '../../../../../contexts/BpmnApiContext';
 import { useTranslation } from 'react-i18next';
 import { XMarkIcon } from '@studio/icons';
 import classes from './SelectDataTypes.module.css';

frontend/packages/process-editor/src/components/ConfigPanel/EditDataTypesToSign/EditDataTypesToSign.test.tsx → frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypesToSign/EditDataTypesToSign.test.tsx

@@ -2,16 +2,19 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import userEvent from '@testing-library/user-event';
-import { type BpmnApiContextProps, BpmnApiContext } from '../../../contexts/BpmnApiContext';
-import type { BpmnContextProps } from '../../../contexts/BpmnContext';
-import { BpmnContext } from '../../../contexts/BpmnContext';
+import { type BpmnApiContextProps, BpmnApiContext } from '../../../../contexts/BpmnApiContext';
+import type { BpmnContextProps } from '../../../../contexts/BpmnContext';
+import { BpmnContext } from '../../../../contexts/BpmnContext';
 import { EditDataTypesToSign } from './EditDataTypesToSign';
-import { BpmnConfigPanelFormContextProvider } from '../../../contexts/BpmnConfigPanelContext';
+import { BpmnConfigPanelFormContextProvider } from '../../../../contexts/BpmnConfigPanelContext';
 import {
   mockBpmnApiContextValue,
   mockBpmnContextValue,
-} from '../../../../test/mocks/bpmnContextMock';
-import { getMockBpmnElementForTask, mockBpmnDetails } from '../../../../test/mocks/bpmnDetailsMock';
+} from '../../../../../test/mocks/bpmnContextMock';
+import {
+  getMockBpmnElementForTask,
+  mockBpmnDetails,
+} from '../../../../../test/mocks/bpmnDetailsMock';
 
 const availableDataTypeIds = ['dataType1', 'dataType2', 'dataType3'];
 const existingDataTypeIds = ['dataType1', 'dataType2'];

frontend/packages/process-editor/src/components/ConfigPanel/EditDataTypesToSign/EditDataTypesToSign.tsx → frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypesToSign/EditDataTypesToSign.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { LinkIcon } from '@studio/icons';
 import { SelectDataTypesToSign } from './SelectDataTypesToSign';
 import classes from './EditDataTypesToSign.module.css';
-import { useGetDataTypesToSign } from '../../../hooks/dataTypesToSign/useGetDataTypesToSign';
+import { useGetDataTypesToSign } from '../../../../hooks/dataTypesToSign/useGetDataTypesToSign';
 
 export const EditDataTypesToSign = () => {
   const { t } = useTranslation();

frontend/packages/process-editor/src/components/ConfigPanel/EditDataTypesToSign/SelectDataTypesToSign/SelectDataTypesToSign.test.tsx → frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypesToSign/SelectDataTypesToSign/SelectDataTypesToSign.test.tsx

@@ -1,24 +1,27 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
-import { textMock } from '../../../../../../../testing/mocks/i18nMock';
+import { textMock } from '../../../../../../../../testing/mocks/i18nMock';
 import userEvent from '@testing-library/user-event';
-import type { BpmnApiContextProps } from '../../../../contexts/BpmnApiContext';
-import { BpmnApiContext } from '../../../../contexts/BpmnApiContext';
-import type { BpmnContextProps } from '../../../../contexts/BpmnContext';
-import { BpmnContext } from '../../../../contexts/BpmnContext';
+import type { BpmnApiContextProps } from '../../../../../contexts/BpmnApiContext';
+import { BpmnApiContext } from '../../../../../contexts/BpmnApiContext';
+import type { BpmnContextProps } from '../../../../../contexts/BpmnContext';
+import { BpmnContext } from '../../../../../contexts/BpmnContext';
 import type { SelectDataTypesToSignProps } from './SelectDataTypesToSign';
 import { SelectDataTypesToSign } from './SelectDataTypesToSign';
-import { BpmnConfigPanelFormContextProvider } from '../../../../contexts/BpmnConfigPanelContext';
+import { BpmnConfigPanelFormContextProvider } from '../../../../../contexts/BpmnConfigPanelContext';
 import {
   mockBpmnApiContextValue,
   mockBpmnContextValue,
-} from '../../../../../test/mocks/bpmnContextMock';
-import { createMock, updateModdlePropertiesMock } from '../../../../../test/mocks/bpmnModelerMock';
+} from '../../../../../../test/mocks/bpmnContextMock';
+import {
+  createMock,
+  updateModdlePropertiesMock,
+} from '../../../../../../test/mocks/bpmnModelerMock';
 import { AUTOSAVE_DEBOUNCE_INTERVAL_MILLISECONDS } from 'app-shared/constants';
 import {
   getMockBpmnElementForTask,
   mockBpmnDetails,
-} from '../../../../../test/mocks/bpmnDetailsMock';
+} from '../../../../../../test/mocks/bpmnDetailsMock';
 
 jest.useFakeTimers({ advanceTimers: true });
 createMock.mockImplementation((_, data) => data.dataType);

frontend/packages/process-editor/src/components/ConfigPanel/EditDataTypesToSign/SelectDataTypesToSign/SelectDataTypesToSign.tsx → frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypesToSign/SelectDataTypesToSign/SelectDataTypesToSign.tsx

@@ -4,10 +4,10 @@ import { StudioButton } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { XMarkIcon } from '@studio/icons';
 import classes from './SelectDataTypesToSign.module.css';
-import { useBpmnApiContext } from '../../../../contexts/BpmnApiContext';
-import { StudioModeler } from '../../../../utils/bpmnModeler/StudioModeler';
-import { useGetDataTypesToSign } from '../../../../hooks/dataTypesToSign/useGetDataTypesToSign';
-import { useUpdateDataTypesToSign } from '../../../../hooks/dataTypesToSign/useUpdateDataTypesToSign';
+import { useBpmnApiContext } from '../../../../../contexts/BpmnApiContext';
+import { StudioModeler } from '../../../../../utils/bpmnModeler/StudioModeler';
+import { useGetDataTypesToSign } from '../../../../../hooks/dataTypesToSign/useGetDataTypesToSign';
+import { useUpdateDataTypesToSign } from '../../../../../hooks/dataTypesToSign/useUpdateDataTypesToSign';
 
 export interface SelectDataTypesToSignProps {
   onClose: () => void;

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditLayoutSetName/EditLayoutSetName.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { StudioToggleableTextfield } from '@studio/components';
+import { KeyVerticalIcon } from '@studio/icons';
+import { useBpmnContext } from '../../../../contexts/BpmnContext';
+import { useBpmnApiContext } from '@altinn/process-editor/contexts/BpmnApiContext';
+import { getLayoutSetIdValidationErrorKey } from 'app-shared/utils/layoutSetsUtils';
+import { Paragraph } from '@digdir/designsystemet-react';
+
+interface EditLayoutSetNameProps {
+  existingLayoutSetName: string;
+}
+export const EditLayoutSetName = ({
+  existingLayoutSetName,
+}: EditLayoutSetNameProps): React.ReactElement => {
+  const { t } = useTranslation();
+  const { layoutSets, mutateLayoutSetId } = useBpmnApiContext();
+  const { bpmnDetails } = useBpmnContext();
+
+  const handleOnLayoutSetNameBlur = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    const newName = event.target.value;
+    if (newName === existingLayoutSetName) return;
+    mutateLayoutSetId({ layoutSetIdToUpdate: existingLayoutSetName, newLayoutSetId: newName });
+  };
+
+  const handleValidation = (newLayoutSetId: string): string => {
+    const validationResult = getLayoutSetIdValidationErrorKey(
+      layoutSets,
+      bpmnDetails.element.id,
+      newLayoutSetId,
+    );
+    return validationResult ? t(validationResult) : undefined;
+  };
+
+  return (
+    <StudioToggleableTextfield
+      customValidation={handleValidation}
+      inputProps={{
+        icon: <KeyVerticalIcon />,
+        label: t('process_editor.configuration_panel_layout_set_name_label'),
+        value: existingLayoutSetName,
+        onBlur: (event) => handleOnLayoutSetNameBlur(event),
+        size: 'small',
+      }}
+      viewProps={{
+        children: (
+          <Paragraph size='small'>
+            <strong>{t('process_editor.configuration_panel_layout_set_name')}</strong>
+            {existingLayoutSetName}
+          </Paragraph>
+        ),
+        variant: 'tertiary',
+        'aria-label': t('process_editor.configuration_panel_layout_set_name_label'),
+      }}
+    />
+  );
+};

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditLayoutSetName/index.ts

@@ -0,0 +1 @@
+export { EditLayoutSetName } from './EditLayoutSetName';

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditTaskRecommendedActions/RecommendedActionChangeName.tsx → frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditLayoutSetNameRecommendedAction/RecommendedActionChangeName.tsx

@@ -1,4 +1,3 @@
-import { useValidateBpmnTaskId } from '../../../../hooks/useValidateBpmnId';
 import { useBpmnContext } from '../../../../contexts/BpmnContext';
 import {
   StudioIconTextfield,
@@ -8,29 +7,34 @@ import {
 import { KeyVerticalIcon } from '@studio/icons';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { StudioModeler } from '../../../../utils/bpmnModeler/StudioModeler';
+import { getLayoutSetIdValidationErrorKey } from 'app-shared/utils/layoutSetsUtils';
+import { useBpmnApiContext } from '@altinn/process-editor/contexts/BpmnApiContext';
 
 export const RecommendedActionChangeName = (): React.ReactElement => {
-  const { bpmnDetails, setBpmnDetails } = useBpmnContext();
-  const studioModeler = new StudioModeler(bpmnDetails.element);
+  const { bpmnDetails } = useBpmnContext();
+  const { layoutSets, mutateLayoutSetId } = useBpmnApiContext();
   const { t } = useTranslation();
-  const { validateBpmnTaskId } = useValidateBpmnTaskId();
   const { removeAction } = useStudioRecommendedNextActionContext();
 
   const [newName, setNewName] = useState('');
   const [newNameError, setNewNameError] = useState('');
 
+  const handleValidation = (newLayoutSetId: string): string => {
+    const validationResult = getLayoutSetIdValidationErrorKey(
+      layoutSets,
+      bpmnDetails.element.id,
+      newLayoutSetId,
+    );
+    return validationResult ? t(validationResult) : undefined;
+  };
+
   const saveNewName = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (newNameError || newName === '') {
       return false;
     }
+    mutateLayoutSetId({ layoutSetIdToUpdate: bpmnDetails.element.id, newLayoutSetId: newName });
     removeAction(bpmnDetails.element.id);
-    studioModeler.updateElementProperties({ id: newName });
-    setBpmnDetails({
-      ...bpmnDetails,
-      id: newName,
-    });
   };
 
   const cancelAction = () => {
@@ -54,7 +58,7 @@ export const RecommendedActionChangeName = (): React.ReactElement => {
         label={t('process_editor.recommended_action.new_name_label')}
         onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
           setNewName(event.target.value);
-          setNewNameError(validateBpmnTaskId(event.target.value));
+          setNewNameError(handleValidation(event.target.value));
         }}
         value={newName}
       />

frontend/packages/process-editor/src/components/ConfigPanel/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.test.tsx → frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.test.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import userEvent from '@testing-library/user-event';
-import { type BpmnApiContextProps, BpmnApiContext } from '../../../contexts/BpmnApiContext';
-import type { BpmnContextProps } from '../../../contexts/BpmnContext';
-import { BpmnContext } from '../../../contexts/BpmnContext';
+import { type BpmnApiContextProps, BpmnApiContext } from '../../../../contexts/BpmnApiContext';
+import type { BpmnContextProps } from '../../../../contexts/BpmnContext';
+import { BpmnContext } from '../../../../contexts/BpmnContext';
 import { EditUniqueFromSignaturesInDataTypes } from './EditUniqueFromSignaturesInDataTypes';
-import { BpmnConfigPanelFormContextProvider } from '../../../contexts/BpmnConfigPanelContext';
+import { BpmnConfigPanelFormContextProvider } from '../../../../contexts/BpmnConfigPanelContext';
 import {
   mockBpmnApiContextValue,
   mockBpmnContextValue,
-} from '../../../../test/mocks/bpmnContextMock';
-import { getMockBpmnElementForTask, mockBpmnDetails } from '../../../../test/mocks/bpmnDetailsMock';
+} from '../../../../../test/mocks/bpmnContextMock';
+import { getMockBpmnElementForTask, mockBpmnDetails } from '../../../../../test/mocks/bpmnDetailsMock';
 
 const existingDataTypes = [
   { id: 'dataType1', name: 'Name 1' },

frontend/packages/process-editor/src/components/ConfigPanel/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.tsx → frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { useBpmnContext } from '../../../contexts/BpmnContext';
+import { useBpmnContext } from '../../../../contexts/BpmnContext';
 import { StudioProperty } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { PersonPencilIcon } from '@studio/icons';
 import { SelectUniqueFromSignaturesInDataTypes } from './SelectUniqueFromSignaturesInDataTypes';
 import classes from './EditUniqueFromSignaturesInDataTypes.module.css';
 import { getSelectedDataTypes } from './UniqueFromSignaturesInDataTypesUtils';
-import { StudioModeler } from '../../../utils/bpmnModeler/StudioModeler';
+import { StudioModeler } from '../../../../utils/bpmnModeler/StudioModeler';
 
 export const EditUniqueFromSignaturesInDataTypes = () => {
   const { t } = useTranslation();