Feat/ha/add detials page dataset form

apps/catalog-portal/app/actions/actions.ts

@@ -7,7 +7,7 @@ import {
   getAllServiceCatalogs,
   getAllProcessingActivities,
   getAllServiceMessages,
-  ServiceMessage,
+  Strapi,
 } from '@catalog-frontend/data-access';
 import {
   ConceptCatalog,
@@ -103,7 +103,7 @@ export async function getAllProcessingActivitiesCatalogs(): Promise<RecordOfProc
   return jsonResponse;
 }
 
-export async function getServiceMessages(): Promise<ServiceMessage[]> {
+export async function getServiceMessages(): Promise<Strapi.ServiceMessage[]> {
   const response = await getAllServiceMessages();
   if (response.status !== 200) {
     console.error('getServiceMessages failed with response code ' + response.status);

apps/dataset-catalog/app/catalogs/[catalogId]/datasets/[datasetId]/dataset-details-page-client.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { Dataset, DatasetSeries, ReferenceData } from '@catalog-frontend/types';
+import { DeleteButton, DetailsPageLayout, LinkButton } from '@catalog-frontend/ui';
+import { getTranslateText, localization } from '@catalog-frontend/utils';
+import { useState } from 'react';
+import styles from './dataset-details-page.module.css';
+import { RightColumn } from '../../../../../components/details-page-columns/details-page-right-column';
+import { LeftColumn } from '../../../../../components/details-page-columns/details-page-left-column';
+import { deleteDataset } from '../../../../actions/actions';
+import { Tag } from '@digdir/designsystemet-react';
+
+interface datasetDetailsPageProps {
+  dataset: Dataset;
+  catalogId: string;
+  datasetId: string;
+  hasWritePermission: boolean;
+  searchEnv: string;
+  referenceDataEnv: string;
+  referenceData: ReferenceData;
+  datasetSeries: DatasetSeries[];
+}
+
+const DatasetDetailsPageClient = ({
+  dataset,
+  catalogId,
+  datasetId,
+  hasWritePermission,
+  searchEnv,
+  referenceDataEnv,
+  referenceData,
+  datasetSeries,
+}: datasetDetailsPageProps) => {
+  const [language, setLanguage] = useState('nb');
+
+  const handleLanguageChange = (value: string) => {
+    setLanguage(value);
+  };
+
+  const handleDeleteDataset = async () => {
+    if (dataset) {
+      if (window.confirm(localization.serviceCatalog.form.confirmDelete)) {
+        try {
+          await deleteDataset(catalogId, dataset.id);
+        } catch (error) {
+          window.alert(error);
+        }
+      }
+    }
+  };
+
+  enum StatusColors {
+    DRAFT = 'second',
+    PUBLISH = 'success',
+    APPROVE = 'info',
+  }
+
+  return (
+    <DetailsPageLayout
+      handleLanguageChange={handleLanguageChange}
+      language={language}
+      headingTitle={getTranslateText(dataset?.title ?? '', language)}
+      headingTag={
+        <Tag
+          size='md'
+          color={StatusColors[dataset.registrationStatus]}
+        >
+          {localization.datasetForm.status[dataset.registrationStatus]}
+        </Tag>
+      }
+      loading={false}
+    >
+      <DetailsPageLayout.Left>
+        <LeftColumn
+          dataset={dataset}
+          referenceDataEnv={referenceDataEnv}
+          searchEnv={searchEnv}
+          referenceData={referenceData}
+          datasetSeries={datasetSeries}
+        />
+      </DetailsPageLayout.Left>
+      <DetailsPageLayout.Right>
+        <RightColumn
+          dataset={dataset}
+          hasWritePermission={hasWritePermission}
+        />
+      </DetailsPageLayout.Right>
+      <DetailsPageLayout.Buttons>
+        {hasWritePermission && (
+          <div className={styles.set}>
+            <LinkButton href={`/catalogs/${catalogId}/datasets/${datasetId}/edit`}>
+              {localization.button.edit}
+            </LinkButton>
+
+            <DeleteButton
+              variant='secondary'
+              onClick={() => handleDeleteDataset()}
+            />
+          </div>
+        )}
+      </DetailsPageLayout.Buttons>
+    </DetailsPageLayout>
+  );
+};
+
+export default DatasetDetailsPageClient;

apps/dataset-catalog/app/catalogs/[catalogId]/datasets/[datasetId]/dataset-details-page.module.css

@@ -0,0 +1,5 @@
+.set {
+  display: flex;
+  gap: 0.5rem;
+  padding-bottom: 1rem;
+}

apps/dataset-catalog/app/catalogs/[catalogId]/datasets/[datasetId]/page.tsx

@@ -1,15 +1,39 @@
 import { Breadcrumbs, BreadcrumbType, PageBanner } from '@catalog-frontend/ui';
 import { getDatasetById } from '../../../../actions/actions';
 import { Params } from 'next/dist/shared/lib/router/utils/route-matcher';
-import { getTranslateText, localization } from '@catalog-frontend/utils';
+import {
+  getTranslateText,
+  getValidSession,
+  hasOrganizationWritePermission,
+  localization,
+} from '@catalog-frontend/utils';
 import { Organization } from '@catalog-frontend/types';
-import { getOrganization } from '@catalog-frontend/data-access';
+import {
+  getAllDatasetSeries,
+  getDatasetTypes,
+  getDataThemes,
+  getFrequencies,
+  getLanguages,
+  getLosThemes,
+  getOpenLicenses,
+  getOrganization,
+  getProvenanceStatements,
+} from '@catalog-frontend/data-access';
+import DatasetDetailsPageClient from './dataset-details-page-client';
 
 export default async function EditDatasetPage({ params }: Params) {
   const { catalogId, datasetId } = params;
   const dataset = await getDatasetById(catalogId, datasetId);
   const organization: Organization = await getOrganization(catalogId).then((res) => res.json());
 
+  const searchEnv = process.env.FDK_SEARCH_SERVICE_BASE_URI ?? '';
+  const referenceDataEnv = process.env.FDK_BASE_URI ?? '';
+
+  const session = await getValidSession({
+    callbackUrl: `/catalogs/${catalogId}/services/${datasetId}`,
+  });
+  const hasWritePermission = session && hasOrganizationWritePermission(session?.accessToken, catalogId);
+
   const breadcrumbList = [
     {
       href: `/catalogs/${catalogId}/datasets`,
@@ -21,14 +45,59 @@ export default async function EditDatasetPage({ params }: Params) {
     },
   ] as BreadcrumbType[];
 
+  const [
+    losThemesResponse,
+    dataThemesResponse,
+    datasetTypesResponse,
+    provenanceStatementsResponse,
+    frequenciesResponse,
+    languageResponse,
+    licenceResponse,
+  ] = await Promise.all([
+    getLosThemes().then((res) => res.json()),
+    getDataThemes().then((res) => res.json()),
+    getDatasetTypes().then((res) => res.json()),
+    getProvenanceStatements().then((res) => res.json()),
+    getFrequencies().then((res) => res.json()),
+    getLanguages().then((res) => res.json()),
+    getOpenLicenses().then((res) => res.json()),
+  ]);
+
+  const referenceData = {
+    losThemes: losThemesResponse.losNodes,
+    dataThemes: dataThemesResponse.dataThemes,
+    datasetTypes: datasetTypesResponse.datasetTypes,
+    provenanceStatements: provenanceStatementsResponse.provenanceStatements,
+    frequencies: frequenciesResponse.frequencies,
+    languages: languageResponse.linguisticSystems,
+    openLicenses: licenceResponse.openLicenses,
+  };
+
+  const accessToken = session?.accessToken;
+  const datasetSeries = await getAllDatasetSeries(catalogId, accessToken).then((res) => res.json());
+
   return (
     <>
-      <Breadcrumbs breadcrumbList={breadcrumbList} catalogPortalUrl={`${process.env.CATALOG_PORTAL_BASE_URI}/catalogs`} />
+      <Breadcrumbs
+        breadcrumbList={breadcrumbList}
+        catalogPortalUrl={`${process.env.CATALOG_PORTAL_BASE_URI}/catalogs`}
+      />
       <PageBanner
         title={localization.catalogType.dataset}
         subtitle={getTranslateText(organization.prefLabel).toString()}
       />
-      <div className='container'>Her kommer details-page</div>
+      <div className='container'>
+        <DatasetDetailsPageClient
+          dataset={dataset}
+          catalogId={catalogId}
+          datasetId={datasetId}
+          hasWritePermission={hasWritePermission}
+          searchEnv={searchEnv}
+          referenceDataEnv={referenceDataEnv}
+          referenceData={referenceData}
+          datasetSeries={datasetSeries._embedded.datasets}
+        ></DatasetDetailsPageClient>
+      </div>
     </>
   );
 }

apps/dataset-catalog/components/dataset-form/components/about-section.tsx

@@ -1,13 +1,11 @@
-import { Dataset } from '@catalog-frontend/types';
 import { FormikLanguageFieldset, LabelWithHelpTextAndTag, TextareaWithPrefix } from '@catalog-frontend/ui';
 import { localization } from '@catalog-frontend/utils';
 import { Textfield } from '@digdir/designsystemet-react';
-import { FastField, useFormikContext } from 'formik';
+import { FastField } from 'formik';
 import { FieldsetDivider } from '@catalog-frontend/ui';
 import { AccessRightFields } from './access-rights.tsx/dataset-form-access-rights-section';
 
 export const AboutSection = () => {
-  const errors = useFormikContext<Dataset>()?.errors;
   return (
     <>
       <FormikLanguageFieldset
@@ -54,11 +52,11 @@ export const AboutSection = () => {
         label={
           <LabelWithHelpTextAndTag
             tagTitle={localization.tag.recommended}
-            helpText={localization.datasetForm.helptext.releaseDate}
-            helpAriaLabel={localization.datasetForm.fieldLabel.releaseDate}
+            helpText={localization.datasetForm.helptext.issued}
+            helpAriaLabel={localization.datasetForm.fieldLabel.issued}
             tagColor='info'
           >
-            {localization.datasetForm.fieldLabel.releaseDate}
+            {localization.datasetForm.fieldLabel.issued}
           </LabelWithHelpTextAndTag>
         }
       />

apps/dataset-catalog/components/dataset-form/components/access-rights.tsx/access-rights-uri-table.tsx

@@ -8,7 +8,7 @@ import {
   LabelWithHelpTextAndTag,
 } from '@catalog-frontend/ui';
 import { getTranslateText, localization, trimObjectWhitespace } from '@catalog-frontend/utils';
-import { Button, Label, Modal, Radio, Table, Textfield } from '@digdir/designsystemet-react';
+import { Button, Modal, Radio, Table, Textfield } from '@digdir/designsystemet-react';
 import { FastField, Formik, useFormikContext } from 'formik';
 import styles from '../../dataset-form.module.css';
 import { useRef, useState } from 'react';

apps/dataset-catalog/components/dataset-form/components/details-section/hidden-detail-fields.tsx

@@ -62,7 +62,6 @@ export const HiddenDetailFields = ({ datasetTypes, provenanceStatements, frequen
     [frequencies],
   );
 
-  console.log(_.every(values.conformsTo, _.isUndefined), values.conformsTo);
   return (
     <div>
       <div>

apps/dataset-catalog/components/dataset-form/components/details-section/recommended-detail-fields.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { FieldsetDivider, FormikSearchCombobox, LabelWithHelpTextAndTag, TitleWithTag } from '@catalog-frontend/ui';
+import { FieldsetDivider, FormikSearchCombobox, LabelWithHelpTextAndTag } from '@catalog-frontend/ui';
 import { getTranslateText, localization } from '@catalog-frontend/utils';
 import { Checkbox } from '@digdir/designsystemet-react';
 import { useCallback, useState } from 'react';

apps/dataset-catalog/components/dataset-form/components/details-section/temporal-modal.tsx

@@ -1,4 +1,4 @@
-import { DateRange, UriWithLabel } from '@catalog-frontend/types';
+import { DateRange } from '@catalog-frontend/types';
 import { AddButton, DeleteButton, EditButton } from '@catalog-frontend/ui';
 import { localization, trimObjectWhitespace } from '@catalog-frontend/utils';
 import { Button, Label, Modal, Table, Textfield } from '@digdir/designsystemet-react';

apps/dataset-catalog/components/dataset-form/components/distribution-section/distribution-details.tsx

@@ -44,20 +44,20 @@ export const DistributionDetails = ({ distribution, searchEnv, referenceDataEnv,
 
           {distribution.downloadURL && distribution.downloadURL.length > 0 && (
             <div className={styles.field}>
-              <Label size='sm'>{`${localization.datasetForm.fieldLabel.downloadUrl}:`}</Label>
+              <Label size='sm'>{`${localization.datasetForm.fieldLabel.downloadURL}:`}</Label>
               <Paragraph size='sm'>{distribution?.downloadURL?.[0] ?? ''}</Paragraph>
             </div>
           )}
 
           {distribution.mediaType && distribution.mediaType.length > 0 && (
             <div className={styles.field}>
-              <Label size='sm'>{`${localization.datasetForm.fieldLabel.mediaTypes}:`}</Label>
+              <Label size='sm'>{`${localization.datasetForm.fieldLabel.mediaType}:`}</Label>
               <ul className={styles.list}>
                 {distribution?.mediaType?.map((uri, index) => (
                   <li key={`mediatype-${uri}-${index}`}>
                     <Tag
                       size='sm'
-                      color='third'
+                      color='info'
                     >
                       {(selectedMediaTypes?.find((type) => type.uri === uri) ?? {}).code ?? uri}
                     </Tag>

apps/dataset-catalog/components/dataset-form/components/information-model-section.tsx

@@ -18,7 +18,7 @@ interface Props {
 }
 
 export const InformationModelSection = ({ searchEnv }: Props) => {
-  const { setFieldValue, values, errors } = useFormikContext<Dataset>();
+  const { setFieldValue, values } = useFormikContext<Dataset>();
   const [searchTerm, setSearchTerm] = useState<string>('');
 
   const { data: informationModelSuggestions, isLoading: searching } = useSearchInformationModelsSuggestions(

apps/dataset-catalog/components/dataset-form/components/qualified-attributions-section.tsx

@@ -11,7 +11,7 @@ export const QualifiedAttributionsSection = () => {
   const { setFieldValue, values } = useFormikContext<Dataset>();
 
   const [searchTerm, setSearchTerm] = useState('');
-  const { data: selectedEnheter, isLoading } = useSearchEnheterByOrgNmbs(values.qualifiedAttributions);
+  const { data: selectedEnheter } = useSearchEnheterByOrgNmbs(values.qualifiedAttributions);
   const { data: enheter, isLoading: searching } = useSearchEnheter(searchTerm);
 
   const debouncedSearch = useCallback(