fix (catalog-admin): banner title and breadcrumb

Informasjonsforvaltning · Dec 5, 2023 · a3c5525 · a3c5525
1 parent b4caa51
commit a3c5525
Show file tree

Hide file tree

Showing 13 changed files with 143 additions and 63 deletions.
diff --git a/apps/catalog-admin/app/catalogs/[catalogId]/admin-page-client.tsx b/apps/catalog-admin/app/catalogs/[catalogId]/admin-page-client.tsx
@@ -6,13 +6,19 @@ import { getTranslateText, localization } from '@catalog-frontend/utils';
 import { Banner } from '../../../components/banner';
 import { InformationSquareIcon, TableIcon } from '@navikt/aksel-icons';
 import styles from './admin-page.module.css';
+import { Organization } from '@catalog-frontend/types';
 
-export const AdminPageClient = ({ organization, catalogId }) => {
+export interface AdminPageClientProps {
+  organization: Organization;
+  catalogId: string;
+}
+
+export const AdminPageClient = ({ organization, catalogId }: AdminPageClientProps) => {
   const breadcrumbList = catalogId
     ? ([
         {
           href: `/catalogs/${catalogId}`,
-          text: getTranslateText(localization.manageCatalog),
+          text: localization.manageCatalog,
         },
       ] as BreadcrumbType[])
     : [];
@@ -21,7 +27,11 @@ export const AdminPageClient = ({ organization, catalogId }) => {
     <>
       <Breadcrumbs breadcrumbList={breadcrumbList} />
       <div>
-        <Banner orgName={organization?.prefLabel} />
+        <Banner
+          title={localization.manageCatalog}
+          orgName={`${getTranslateText(organization?.prefLabel)}`}
+          catalogId={catalogId}
+        />
         <div className={styles.cardsContainer}>
           <Card
             icon={<InformationSquareIcon fontSize='3rem' />}

diff --git a/apps/catalog-admin/app/catalogs/[catalogId]/concepts/code-lists/code-list-page-client.tsx b/apps/catalog-admin/app/catalogs/[catalogId]/concepts/code-lists/code-list-page-client.tsx
@@ -6,21 +6,27 @@ import { Accordion, Heading } from '@digdir/design-system-react';
 import { BreadcrumbType, Breadcrumbs, Button, SearchField, useWarnIfUnsavedChanges } from '@catalog-frontend/ui';
 import { PlusCircleIcon } from '@navikt/aksel-icons';
 import { useGetAllCodeLists } from '../../../../../hooks/code-lists';
-import { CodeList } from '@catalog-frontend/types';
+import { CodeList, Organization } from '@catalog-frontend/types';
 import { getTranslateText, localization } from '@catalog-frontend/utils';
 import { useAdminDispatch, useAdminState } from '../../../../../context/admin';
 import { Banner } from '../../../../../components/banner';
 import CodeListEditor from '../../../../../components/code-list-editor';
 import { PageLayout } from '../../../../../components/page-layout';
 import { compare } from 'fast-json-patch';
 
-const CodeListsPageClient = ({ catalogId, organization, codeListsInUse }) => {
+export interface CodeListsPageClientProps {
+  catalogId: string;
+  organization: Organization;
+  codeListsInUse: string[];
+}
+
+const CodeListsPageClient = ({ catalogId, organization, codeListsInUse }: CodeListsPageClientProps) => {
   const adminDispatch = useAdminDispatch();
   const adminContext = useAdminState();
   const { showCodeListEditor, updatedCodeLists, updatedCodes } = adminContext;
 
   const [search, setSearch] = useState('');
-  const [dirtyCodeLists, setDirtyCodeLists] = useState([]);
+  const [dirtyCodeLists, setDirtyCodeLists] = useState<string[]>([]);
 
   const { data: getAllCodeLists } = useGetAllCodeLists({
     catalogId: catalogId,
@@ -45,7 +51,9 @@ const CodeListsPageClient = ({ catalogId, organization, codeListsInUse }) => {
     const updatedCodesAccumulator = { ...updatedCodes };
 
     dbCodeLists.forEach((codeList: CodeList) => {
-      updatedCodesAccumulator[codeList.id] = codeList?.codes;
+      if (codeList) {
+        updatedCodesAccumulator[codeList.id ?? ''] = codeList?.codes ?? [];
+      }
     });
 
     adminDispatch({
@@ -58,7 +66,7 @@ const CodeListsPageClient = ({ catalogId, organization, codeListsInUse }) => {
     ? ([
         {
           href: `/catalogs/${catalogId}`,
-          text: localization.catalogAdmin.manage.catalogAdmin,
+          text: localization.manageCatalog,
         },
         {
           href: `/catalogs/${catalogId}/concepts`,
@@ -82,7 +90,11 @@ const CodeListsPageClient = ({ catalogId, organization, codeListsInUse }) => {
   return (
     <>
       <Breadcrumbs breadcrumbList={breadcrumbList} />
-      <Banner orgName={organization?.prefLabel} />
+      <Banner
+        title={localization.catalogAdmin.manage.conceptCatalog}
+        orgName={`${getTranslateText(organization?.prefLabel)}`}
+        catalogId={catalogId}
+      />
       <PageLayout>
         <div className={styles.row}>
           <SearchField
@@ -149,8 +161,8 @@ const CodeListsPageClient = ({ catalogId, organization, codeListsInUse }) => {
                       catalogId={catalogId}
                       dirty={(dirty) =>
                         setDirtyCodeLists((prev) => {
-                          if (dirty && !prev.includes(codeList.id)) {
-                            return [...prev, codeList.id];
+                          if (dirty && !prev.includes(codeList.id ?? '')) {
+                            return [...prev, codeList.id ?? ''];
                           }
                           if (!dirty) {
                             return prev.filter((id) => id !== codeList.id);

diff --git a/apps/catalog-admin/app/catalogs/[catalogId]/concepts/concepts-page-client.tsx b/apps/catalog-admin/app/catalogs/[catalogId]/concepts/concepts-page-client.tsx
@@ -2,17 +2,23 @@
 
 import { BreadcrumbType, Breadcrumbs, Card } from '@catalog-frontend/ui';
 import React from 'react';
-import { localization } from '@catalog-frontend/utils';
+import { getTranslateText, localization } from '@catalog-frontend/utils';
 import { Banner } from '../../../../components/banner';
 import { DatabaseIcon, PencilWritingIcon, RectangleSectionsIcon } from '@navikt/aksel-icons';
 import styles from './concepts-page.module.css';
+import { Organization } from '@catalog-frontend/types';
 
-export const ConceptsPageClient = ({ catalogId, organization }) => {
+export interface ConceptsPageClientProps {
+  organization: Organization;
+  catalogId: string;
+}
+
+export const ConceptsPageClient = ({ catalogId, organization }: ConceptsPageClientProps) => {
   const breadcrumbList = catalogId
     ? ([
         {
           href: `/catalogs/${catalogId}`,
-          text: localization.catalogAdmin.manage.catalogAdmin,
+          text: localization.manageCatalog,
         },
         {
           href: `/catalogs/${catalogId}/concepts`,
@@ -24,7 +30,11 @@ export const ConceptsPageClient = ({ catalogId, organization }) => {
   return (
     <>
       <Breadcrumbs breadcrumbList={breadcrumbList} />
-      <Banner orgName={organization?.prefLabel} />
+      <Banner
+        title={localization.catalogAdmin.manage.conceptCatalog}
+        orgName={`${getTranslateText(organization?.prefLabel)}`}
+        catalogId={catalogId}
+      />
       <div className={styles.cardsContainer}>
         <div className={styles.cardsGrid}>
           <Card

diff --git a/...atalog-admin/app/catalogs/[catalogId]/concepts/editable-fields/editable-fields-client.tsx b/...atalog-admin/app/catalogs/[catalogId]/concepts/editable-fields/editable-fields-client.tsx
@@ -4,7 +4,7 @@ import styles from './editable-fields.module.css';
 import { Heading } from '@digdir/design-system-react';
 import { BreadcrumbType, Breadcrumbs, Button, Select } from '@catalog-frontend/ui';
 import { getTranslateText, localization } from '@catalog-frontend/utils';
-import { CodeList } from '@catalog-frontend/types';
+import { CodeList, Organization } from '@catalog-frontend/types';
 
 import { useGetAllCodeLists } from '../../../../../hooks/code-lists';
 import { useGetInternalFields, useUpdateEditableFields } from '../../../../../hooks/internal-fields';
@@ -13,16 +13,21 @@ import { compare } from 'fast-json-patch';
 import { Banner } from '../../../../../components/banner';
 import { PageLayout } from '../../../../../components/page-layout';
 
-export function EditableFieldsClient({ catalogId, organization }) {
+export interface EditableFieldsClientProps {
+  catalogId: string;
+  organization: Organization;
+}
+
+export function EditableFieldsClient({ catalogId, organization }: EditableFieldsClientProps) {
   const { data: getAllCodeLists } = useGetAllCodeLists({ catalogId });
   const dbCodeLists: CodeList[] = getAllCodeLists?.codeLists;
   const { data: getInternalFields } = useGetInternalFields(catalogId);
   const dbEditableFields = getInternalFields?.editable;
-  const [updatedCodeListId, setUpdatedCodeListId] = useState<string>(null);
+  const [updatedCodeListId, setUpdatedCodeListId] = useState<string>();
   const updateCodeListId = useUpdateEditableFields(catalogId);
 
   const handleUpdateDbCodeListId = () => {
-    const newField = { catalogId: catalogId, domainCodeListId: updatedCodeListId };
+    const newField = { catalogId: catalogId, domainCodeListId: updatedCodeListId ?? '' };
     const diff = compare(dbEditableFields, newField);
 
     if (diff) {
@@ -47,7 +52,7 @@ export function EditableFieldsClient({ catalogId, organization }) {
   const codeListsOptions = () => {
     return (
       dbCodeLists?.map((codeList: CodeList) => ({
-        value: codeList.id,
+        value: codeList.id ?? '',
         label: codeList.name,
       })) || []
     );
@@ -57,7 +62,7 @@ export function EditableFieldsClient({ catalogId, organization }) {
     ? ([
         {
           href: `/catalogs/${catalogId}`,
-          text: localization.catalogAdmin.manage.catalogAdmin,
+          text: localization.manageCatalog,
         },
         {
           href: `/catalogs/${catalogId}/concepts`,
@@ -73,7 +78,11 @@ export function EditableFieldsClient({ catalogId, organization }) {
   return (
     <>
       <Breadcrumbs breadcrumbList={breadcrumbList} />
-      <Banner orgName={organization?.prefLabel} />
+      <Banner
+        title={localization.catalogAdmin.manage.conceptCatalog}
+        orgName={`${getTranslateText(organization?.prefLabel)}`}
+        catalogId={catalogId}
+      />
       <PageLayout>
         <div className={styles.heading}>
           <Heading

diff --git a/.../catalog-admin/app/catalogs/[catalogId]/concepts/internal-fields/internal-page-client.tsx b/.../catalog-admin/app/catalogs/[catalogId]/concepts/internal-fields/internal-page-client.tsx
@@ -6,14 +6,19 @@ import { Accordion, Heading } from '@digdir/design-system-react';
 import { PlusCircleIcon } from '@navikt/aksel-icons';
 import { BreadcrumbType, Breadcrumbs, Button } from '@catalog-frontend/ui';
 import { getTranslateText, localization } from '@catalog-frontend/utils';
-import { InternalField } from '@catalog-frontend/types';
+import { InternalField, Organization } from '@catalog-frontend/types';
 import { Banner } from '../../../../../components/banner';
 import { useGetInternalFields } from '../../../../../hooks/internal-fields';
 import { InternalFieldEditor } from '../../../../../components/internal-field-editor';
 import { useAdminDispatch, useAdminState } from '../../../../../context/admin';
 import { PageLayout } from '../../../../../components/page-layout';
 
-export const InternalFieldsPageClient = ({ catalogId, organization }) => {
+export interface InternalFieldsPageClientProps {
+  catalogId: string;
+  organization: Organization;
+}
+
+export const InternalFieldsPageClient = ({ catalogId, organization }: InternalFieldsPageClientProps) => {
   const { data: getInternalFields } = useGetInternalFields(catalogId);
   const dbFields = getInternalFields?.internal;
 
@@ -29,7 +34,7 @@ export const InternalFieldsPageClient = ({ catalogId, organization }) => {
     ? ([
         {
           href: `/catalogs/${catalogId}`,
-          text: localization.catalogAdmin.manage.catalogAdmin,
+          text: localization.manageCatalog,
         },
         {
           href: `/catalogs/${catalogId}/concepts`,
@@ -45,7 +50,11 @@ export const InternalFieldsPageClient = ({ catalogId, organization }) => {
   return (
     <>
       <Breadcrumbs breadcrumbList={breadcrumbList} />
-      <Banner orgName={organization?.prefLabel} />
+      <Banner
+        title={localization.catalogAdmin.manage.conceptCatalog}
+        orgName={`${getTranslateText(organization?.prefLabel)}`}
+        catalogId={catalogId}
+      />
 
       <PageLayout>
         <div className={styles.topButtonRow}>

diff --git a/apps/catalog-admin/app/catalogs/[catalogId]/general/design/design-page-client.tsx b/apps/catalog-admin/app/catalogs/[catalogId]/general/design/design-page-client.tsx
@@ -12,19 +12,22 @@ import { getTranslateText, localization, textRegexWithNumbers } from '@catalog-f
 import { useGetDesign, useGetLogo, useUpdateDesign } from '../../../../../hooks/design';
 import { compare } from 'fast-json-patch';
 import { PageLayout } from '../../../../../components/page-layout';
+import { Organization } from '@catalog-frontend/types';
 
-const DesignPageClient = ({ catalogId, organization }) => {
+export interface DesignPageClientProps {
+  catalogId: string;
+  organization: Organization;
+}
+
+const DesignPageClient = ({ catalogId, organization }: DesignPageClientProps) => {
   const adminContext = useAdminState();
 
   const { backgroundColor, fontColor, logo } = adminContext;
   const [isTextInputValid, setIsTextInputValid] = useState(true);
   const [disableTextField, setDisableTextField] = useState(true);
 
-  const { data: getDesign } = useGetDesign(catalogId);
-  const dbDesign = getDesign;
-
-  const { data: getLogo } = useGetLogo(catalogId);
-  const dbLogo = getLogo;
+  const { data: dbDesign } = useGetDesign(catalogId);
+  const { data: dbLogo } = useGetLogo(catalogId);
 
   const [imageLabel, setImageLabel] = useState('');
   const updateDesign = useUpdateDesign(catalogId);
@@ -92,8 +95,8 @@ const DesignPageClient = ({ catalogId, organization }) => {
           <Heading size='small'>{localization.catalogAdmin.preview}</Heading>
         </div>
         <PageBanner
-          title={'Administrere Begrepskatalog'}
-          subtitle={String(getTranslateText(organization?.prefLabel))}
+          title={localization.manageCatalog}
+          subtitle={`${getTranslateText(organization?.prefLabel)}`}
           logoDescription={(dbDesign?.hasLogo && dbDesign?.logoDescription) || ''}
           backgroundColor={(backgroundColor ?? dbDesign?.backgroundColor) || '#FFFFFF'}
           fontColor={fontColor ?? dbDesign?.fontColor ?? '#2D3741'}

diff --git a/apps/catalog-admin/app/catalogs/[catalogId]/general/general-page-client.tsx b/apps/catalog-admin/app/catalogs/[catalogId]/general/general-page-client.tsx
@@ -6,8 +6,14 @@ import { getTranslateText, localization } from '@catalog-frontend/utils';
 import { Banner } from '../../../../components/banner';
 import { PaletteIcon, PersonIcon } from '@navikt/aksel-icons';
 import styles from './general-page.module.css';
+import { Organization } from '@catalog-frontend/types';
 
-export const GeneralPageClient = ({ catalogId, organization }) => {
+export interface GeneralPageClientProps {
+  organization: Organization;
+  catalogId: string;
+}
+
+export const GeneralPageClient = ({ catalogId, organization }: GeneralPageClientProps) => {
   const breadcrumbList = catalogId
     ? ([
         {
@@ -24,7 +30,11 @@ export const GeneralPageClient = ({ catalogId, organization }) => {
   return (
     <>
       <Breadcrumbs breadcrumbList={breadcrumbList} />
-      <Banner orgName={organization?.prefLabel} />
+      <Banner
+        title={localization.manageCatalog}
+        orgName={`${getTranslateText(organization?.prefLabel)}`}
+        catalogId={catalogId}
+      />
       <div className={styles.cardsContainer}>
         <Card
           icon={<PaletteIcon fontSize='3rem' />}
@@ -34,8 +44,8 @@ export const GeneralPageClient = ({ catalogId, organization }) => {
         />
         <Card
           icon={<PersonIcon fontSize='3rem' />}
-          title={localization.catalogAdmin.usernameList}
-          body={localization.catalogAdmin.manage.usernameList}
+          title={localization.catalogAdmin.username}
+          body={localization.catalogAdmin.manage.username}
           href={`/catalogs/${catalogId}/general/users`}
         />
       </div>