fix: case error page id

frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/EditPageId.tsx

@@ -6,7 +6,7 @@ import { StudioToggleableTextfield } from '@studio/components';
 import { useTextIdMutation } from 'app-development/hooks/mutations';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { useAppContext, useText } from '../../../hooks';
-import { useFormLayoutSettingsQuery } from '../../../hooks/queries/useFormLayoutSettingsQuery';
+import { useFormLayoutsQuery } from '@altinn/ux-editor/hooks/queries/useFormLayoutsQuery';
 
 export interface EditPageIdProps {
   layoutName: string;
@@ -20,15 +20,9 @@ export const EditPageId = ({ layoutName }: EditPageIdProps) => {
     app,
     selectedFormLayoutSetName,
   );
-  const { data: formLayoutSettings } = useFormLayoutSettingsQuery(
-    org,
-    app,
-    selectedFormLayoutSetName,
-  );
+  const { data: formLayouts } = useFormLayoutsQuery(org, app, selectedFormLayoutSetName);
   const t = useText();
 
-  const layoutOrder = formLayoutSettings?.pages?.order;
-
   const handleSaveNewName = (newName: string) => {
     if (newName === layoutName) return;
     updateLayoutName(
@@ -46,8 +40,8 @@ export const EditPageId = ({ layoutName }: EditPageIdProps) => {
     <div className={classes.changePageId}>
       <StudioToggleableTextfield
         customValidation={(value: string) => {
-          const validationResult = getPageNameErrorKey(value, layoutName, layoutOrder);
-          return validationResult ? t(validationResult) : undefined;
+          const validationResult = getPageNameErrorKey(value, layoutName, Object.keys(formLayouts));
+          return validationResult && t(validationResult);
         }}
         label={t('ux_editor.modal_properties_textResourceBindings_page_id')}
         onBlur={(event) => handleSaveNewName(event.target.value)}

frontend/packages/ux-editor/src/utils/designViewUtils/designViewUtils.test.ts

@@ -8,17 +8,43 @@ const mockNewNameCandidateInvalid: string = 'Page????';
 const mockNewNameCandidateWithPeriod: string = 'Page.2';
 
 const mockOldName: string = 'oldName';
-const mockLayoutOrder: string[] = [mockOldName, mockNewNameCandidateExists, 'page3'];
+const mockLayoutNames: string[] = [mockOldName, mockNewNameCandidateExists, 'page3'];
 
 describe('designViewUtils', () => {
   describe('pageNameExists', () => {
     it('returns true if the page name exists', () => {
-      const exists = pageNameExists(mockOldName, mockLayoutOrder);
+      const exists = pageNameExists({
+        candidateName: mockNewNameCandidateExists,
+        oldName: mockOldName,
+        layoutNames: mockLayoutNames,
+      });
       expect(exists).toBeTruthy();
     });
 
     it('returns false if the page name does not exists', () => {
-      const exists = pageNameExists(mockNewNameCandidateCorrect, mockLayoutOrder);
+      const exists = pageNameExists({
+        candidateName: mockNewNameCandidateCorrect,
+        oldName: mockOldName,
+        layoutNames: mockLayoutNames,
+      });
+      expect(exists).toBeFalsy();
+    });
+
+    it('returns false if the page name is the same as the old name', () => {
+      const exists = pageNameExists({
+        candidateName: mockOldName,
+        oldName: mockOldName,
+        layoutNames: mockLayoutNames,
+      });
+      expect(exists).toBeFalsy();
+    });
+
+    it('returns false if the page name is the same as the old name but in different case', () => {
+      const exists = pageNameExists({
+        candidateName: mockOldName.toUpperCase(),
+        oldName: mockOldName,
+        layoutNames: mockLayoutNames,
+      });
       expect(exists).toBeFalsy();
     });
   });
@@ -28,7 +54,7 @@ describe('designViewUtils', () => {
       const nameErrorkey = getPageNameErrorKey(
         mockNewNameCandidateExists,
         mockOldName,
-        mockLayoutOrder,
+        mockLayoutNames,
       );
       expect(nameErrorkey).toEqual('ux_editor.pages_error_unique');
     });
@@ -37,7 +63,7 @@ describe('designViewUtils', () => {
       const nameErrorkey = getPageNameErrorKey(
         mockNewNameCandidateEmpty,
         mockOldName,
-        mockLayoutOrder,
+        mockLayoutNames,
       );
       expect(nameErrorkey).toEqual('ux_editor.pages_error_empty');
     });
@@ -46,7 +72,7 @@ describe('designViewUtils', () => {
       const nameErrorkey = getPageNameErrorKey(
         mockNewNameCandidateTooLong,
         mockOldName,
-        mockLayoutOrder,
+        mockLayoutNames,
       );
       expect(nameErrorkey).toEqual('validation_errors.name_invalid');
     });
@@ -55,7 +81,7 @@ describe('designViewUtils', () => {
       const nameErrorkey = getPageNameErrorKey(
         mockNewNameCandidateWithPeriod,
         mockOldName,
-        mockLayoutOrder,
+        mockLayoutNames,
       );
       expect(nameErrorkey).toEqual('validation_errors.name_invalid');
     });
@@ -64,21 +90,16 @@ describe('designViewUtils', () => {
       const nameErrorkey = getPageNameErrorKey(
         mockNewNameCandidateInvalid,
         mockOldName,
-        mockLayoutOrder,
+        mockLayoutNames,
       );
       expect(nameErrorkey).toEqual('validation_errors.name_invalid');
     });
 
-    it('returns null when oldname and new name is the same', () => {
-      const nameError = getPageNameErrorKey(mockOldName, mockOldName, mockLayoutOrder);
-      expect(nameError).toEqual(null);
-    });
-
     it('returns null when there are no errors', () => {
       const nameError = getPageNameErrorKey(
         mockNewNameCandidateCorrect,
         mockOldName,
-        mockLayoutOrder,
+        mockLayoutNames,
       );
       expect(nameError).toEqual(null);
     });

frontend/packages/ux-editor/src/utils/designViewUtils/designViewUtils.ts

@@ -4,30 +4,35 @@ import { validateLayoutNameAndLayoutSetName } from 'app-shared/utils/LayoutAndLa
 /**
  * Checks if the new written page name already exists
  */
-export const pageNameExists = (candidateName: string, layoutOrder: string[]): boolean =>
-  layoutOrder.some((p: string) => p.toLowerCase() === candidateName.toLowerCase());
+
+type PageNameExists = {
+  candidateName: string;
+  oldName: string;
+  layoutNames: string[];
+};
+
+export const pageNameExists = ({ candidateName, oldName, layoutNames }: PageNameExists): boolean =>
+  layoutNames
+    .filter((layout: string) => layout.toLowerCase() !== oldName.toLowerCase())
+    .some((layout: string) => layout.toLowerCase() === candidateName.toLowerCase());
 
 /**
  * Gets the page name error key if there is an error in a new suggested page name
  *
- * @param newNameCandidate the new suggested name
+ * @param candidateName the new suggested name
  * @param oldName the old name
- * @param layoutOrder the layout order
+ * @param layoutNames the layout names currently used in the selected layout set
  *
  * @returns the key
  */
 export const getPageNameErrorKey = (
-  newNameCandidate: string,
+  candidateName: string,
   oldName: string,
-  layoutOrder: string[],
-): TranslationKey => {
-  if (pageNameExists(newNameCandidate, layoutOrder) && oldName !== newNameCandidate) {
+  layoutNames: string[],
+): TranslationKey | null => {
+  if (!candidateName) return 'ux_editor.pages_error_empty';
+  if (pageNameExists({ candidateName, oldName, layoutNames }))
     return 'ux_editor.pages_error_unique';
-  } else if (!newNameCandidate) {
-    return 'ux_editor.pages_error_empty';
-  } else if (!validateLayoutNameAndLayoutSetName(newNameCandidate)) {
-    return 'validation_errors.name_invalid';
-  } else {
-    return null;
-  }
+  if (!validateLayoutNameAndLayoutSetName(candidateName)) return 'validation_errors.name_invalid';
+  return null;
 };