refactor(concept:changeRequest): move header and breadcrumbs

Informasjonsforvaltning · Oct 19, 2023 · 1722b23 · 1722b23
1 parent 9b99728
commit 1722b23
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 59 deletions.
diff --git a/...cept-catalog/pages/[catalogId]/change-requests/[changeRequestId]/_change-request-form.tsx b/...cept-catalog/pages/[catalogId]/change-requests/[changeRequestId]/_change-request-form.tsx
@@ -1,6 +1,5 @@
 import { Checkbox, Heading, Textfield } from '@digdir/design-system-react';
-import { BreadcrumbType, Breadcrumbs, Button, PageBanner } from '@catalog-frontend/ui';
-import { useCatalogDesign } from '../../../../context/catalog-design';
+import { Button } from '@catalog-frontend/ui';
 import { localization as loc } from '@catalog-frontend/utils';
 import styles from './change-request-page.module.css';
 import { useState } from 'react';
@@ -19,17 +18,12 @@ const languageOptions = [
 ];
 
 export const ChangeRequestForm = ({
-  FDK_REGISTRATION_BASE_URI,
-  organization,
   changeRequest,
   changeRequestAsConcept,
   originalConcept,
   showOriginal = false,
   submitHandler,
 }) => {
-  const changeRequestId = changeRequest.id;
-  const catalogId = organization?.organizationId;
-  const pageSubtitle = organization?.name ?? organization.id;
   const [changeRequestTitle, setChangeRequestTitle] = useState<string>(changeRequest.title ?? '');
 
   const [selectedLanguages, setSelectedLanguages] = useState<ISOLanguage[]>(['nb', 'nn', 'en']);
@@ -49,39 +43,8 @@ export const ChangeRequestForm = ({
     setSelectedLanguages(newSelectedLangs as ISOLanguage[]);
   };
 
-  const breadcrumbList = changeRequestId
-    ? ([
-        {
-          href: `/${catalogId}`,
-          text: loc.concept.concept,
-        },
-        {
-          href: `/${catalogId}/change-requests`,
-          text: loc.changeRequest.changeRequest,
-        },
-        {
-          href: `/${catalogId}/change-requests/${changeRequestId}`,
-          text: changeRequestTitle,
-        },
-      ] as BreadcrumbType[])
-    : [];
-
-  const design = useCatalogDesign();
-
   return (
     <>
-      <Breadcrumbs
-        baseURI={FDK_REGISTRATION_BASE_URI}
-        breadcrumbList={breadcrumbList}
-      />
-      <PageBanner
-        title={loc.catalogType.concept}
-        subtitle={pageSubtitle}
-        fontColor={design?.fontColor}
-        backgroundColor={design?.backgroundColor}
-        logo={design?.hasLogo && `/api/catalog-admin/${catalogId}/design/logo`}
-        logoDescription={design?.logoDescription}
-      />
       <div className='container'>
         <div className={styles.pageContainer}>
           <div className={styles.languages}>

diff --git a/apps/concept-catalog/pages/[catalogId]/change-requests/[changeRequestId]/edit.tsx b/apps/concept-catalog/pages/[catalogId]/change-requests/[changeRequestId]/edit.tsx
@@ -14,6 +14,10 @@ import jsonpatch from 'fast-json-patch';
 import { useUpdateChangeRequest } from '../../../../hooks/change-requests';
 import { useRouter } from 'next/router';
 
+import { localization as loc } from '@catalog-frontend/utils';
+import { BreadcrumbType, Breadcrumbs, PageBanner } from '@catalog-frontend/ui';
+import { useCatalogDesign } from '../../../../context/catalog-design';
+
 const ChangeRequestEditPage = ({
   FDK_REGISTRATION_BASE_URI,
   organization,
@@ -23,11 +27,13 @@ const ChangeRequestEditPage = ({
   showOriginal,
 }) => {
   const router = useRouter();
+  const catalogId = organization.organizationId;
+  const pageSubtitle = organization?.name ?? organization.id;
+
   const changeRequestMutateHook = useUpdateChangeRequest({
     catalogId: organization.organizationId,
     changeRequestId: changeRequest.id,
   });
-
   const submitHandler = (values: Concept, title: string) => {
     const changeRequestFromConcept: ChangeRequestUpdateBody = {
       conceptId: changeRequest.conceptId,
@@ -39,21 +45,54 @@ const ChangeRequestEditPage = ({
       .then(() => {
         router.reload();
       })
-      .catch((error) => {
+      .catch(() => {
         alert('Failed to submit change request.');
       });
   };
 
+  const breadcrumbList = [
+    {
+      href: `/${catalogId}`,
+      text: loc.concept.concept,
+    },
+    {
+      href: `/${catalogId}/change-requests`,
+      text: loc.changeRequest.changeRequest,
+    },
+    {
+      href: `/${catalogId}/change-requests/${changeRequest.id}`,
+      text: changeRequest.title,
+    },
+    {
+      href: `/${catalogId}/change-requests/${changeRequest.id}/edit`,
+      text: loc.changeRequest.edit,
+    },
+  ] as BreadcrumbType[];
+
+  const design = useCatalogDesign();
+
   return (
-    <ChangeRequestForm
-      FDK_REGISTRATION_BASE_URI={FDK_REGISTRATION_BASE_URI}
-      organization={organization}
-      changeRequest={changeRequest}
-      changeRequestAsConcept={changeRequestAsConcept}
-      originalConcept={originalConcept}
-      showOriginal={showOriginal}
-      submitHandler={submitHandler}
-    />
+    <>
+      <Breadcrumbs
+        baseURI={FDK_REGISTRATION_BASE_URI}
+        breadcrumbList={breadcrumbList}
+      />
+      <PageBanner
+        title={loc.catalogType.concept}
+        subtitle={pageSubtitle}
+        fontColor={design?.fontColor}
+        backgroundColor={design?.backgroundColor}
+        logo={design?.hasLogo && `/api/catalog-admin/${catalogId}/design/logo`}
+        logoDescription={design?.logoDescription}
+      />
+      <ChangeRequestForm
+        changeRequest={changeRequest}
+        changeRequestAsConcept={changeRequestAsConcept}
+        originalConcept={originalConcept}
+        showOriginal={showOriginal}
+        submitHandler={submitHandler}
+      />
+    </>
   );
 };
 

diff --git a/apps/concept-catalog/pages/[catalogId]/change-requests/new.tsx b/apps/concept-catalog/pages/[catalogId]/change-requests/new.tsx
@@ -6,6 +6,9 @@ import { Session, getServerSession } from 'next-auth';
 import { ChangeRequestForm } from './[changeRequestId]/_change-request-form';
 import jsonpatch from 'fast-json-patch';
 import { useCreateChangeRequest } from '../../../hooks/change-requests';
+import { localization as loc } from '@catalog-frontend/utils';
+import { BreadcrumbType, Breadcrumbs, PageBanner } from '@catalog-frontend/ui';
+import { useCatalogDesign } from '../../../context/catalog-design';
 
 const NewConceptSuggestion = ({
   FDK_REGISTRATION_BASE_URI,
@@ -15,8 +18,10 @@ const NewConceptSuggestion = ({
   originalConcept,
   showOriginal,
 }) => {
-  const changeRequestMutateHook = useCreateChangeRequest({ catalogId: organization.organizationId });
+  const catalogId = organization.organizationId;
+  const pageSubtitle = organization?.name ?? organization.id;
 
+  const changeRequestMutateHook = useCreateChangeRequest({ catalogId: catalogId });
   const submitHandler = (values: Concept, title: string) => {
     const changeRequestFromConcept: ChangeRequestUpdateBody = {
       conceptId: changeRequest.conceptId,
@@ -28,16 +33,45 @@ const NewConceptSuggestion = ({
     });
   };
 
+  const breadcrumbList = [
+    {
+      href: `/${catalogId}`,
+      text: loc.concept.concept,
+    },
+    {
+      href: `/${catalogId}/change-requests`,
+      text: loc.changeRequest.changeRequest,
+    },
+    {
+      href: `/${catalogId}/change-requests/new`,
+      text: loc.suggestionForNewConcept,
+    },
+  ] as BreadcrumbType[];
+
+  const design = useCatalogDesign();
+
   return (
-    <ChangeRequestForm
-      FDK_REGISTRATION_BASE_URI={FDK_REGISTRATION_BASE_URI}
-      organization={organization}
-      changeRequest={changeRequest}
-      changeRequestAsConcept={changeRequestAsConcept}
-      originalConcept={originalConcept}
-      showOriginal={showOriginal}
-      submitHandler={submitHandler}
-    />
+    <>
+      <Breadcrumbs
+        baseURI={FDK_REGISTRATION_BASE_URI}
+        breadcrumbList={breadcrumbList}
+      />
+      <PageBanner
+        title={loc.catalogType.concept}
+        subtitle={pageSubtitle}
+        fontColor={design?.fontColor}
+        backgroundColor={design?.backgroundColor}
+        logo={design?.hasLogo && `/api/catalog-admin/${catalogId}/design/logo`}
+        logoDescription={design?.logoDescription}
+      />
+      <ChangeRequestForm
+        changeRequest={changeRequest}
+        changeRequestAsConcept={changeRequestAsConcept}
+        originalConcept={originalConcept}
+        showOriginal={showOriginal}
+        submitHandler={submitHandler}
+      />
+    </>
   );
 };
 

diff --git a/libs/utils/src/lib/language/nb.ts b/libs/utils/src/lib/language/nb.ts
@@ -257,6 +257,7 @@ export const nb = {
     existingValue: 'Eksisterende {fieldType} på {lang}',
     proposedChange: 'Forslag til ny {fieldType} på {lang}',
     noValue: 'Ingen verdi',
+    edit: 'Rediger',
   },
 
   comment: {