Merge pull request #13 from CSCfi/CSCFC4EMSCR-244_Create-schema-detail-page

CSCFC4EMSCR-244 Get revisions from API with schema.slice

Author: maariaw

mscr-ui/src/common/components/history-table/index.tsx

@@ -4,16 +4,8 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
 import TableBody from '@mui/material/TableBody';
+import { Revision } from '@app/common/interfaces/schema.interface';
 
-export interface Revision {
-  pid: string;
-  label: {
-    [key: string]: string;
-  };
-  versionLabel: string;
-  state: string;
-  created: string;
-}
 export default function HistoryTable({ headers, revisions, ariaLabel }: { headers: Array<string>; revisions: Revision[]; ariaLabel: string }) {
   return (
     <TableContainer>

mscr-ui/src/common/components/schema/schema.slice.tsx

@@ -7,6 +7,7 @@ import isHydrate from '@app/store/isHydrate';
 import {
   Schema,
   SchemaFormType,
+  SchemaWithVersionInfo
 } from '@app/common/interfaces/schema.interface';
 
 export const schemaApi = createApi({
@@ -35,6 +36,12 @@ export const schemaApi = createApi({
         method: 'GET',
       }),
     }),
+    getSchemaWithRevisions: builder.query<SchemaWithVersionInfo, string>({
+      query: (pid: string) => ({
+        url: `/schema/${pid}?includeVersionInfo=true`,
+        method: 'GET'
+      })
+    }),
     postSchema: builder.mutation<
       string,
       {
@@ -67,6 +74,7 @@ export const schemaApi = createApi({
 export const {
   usePutSchemaMutation,
   useGetSchemaQuery,
+  useGetSchemaWithRevisionsQuery,
   usePostSchemaMutation,
   useDeleteSchemaMutation,
   useGetSchemasQuery,

mscr-ui/src/common/interfaces/schema.interface.ts

@@ -22,6 +22,21 @@ export interface Schema {
   uri?: string;
   versionLabel?: string;
 }
+
+export interface Revision {
+  pid: string;
+  label: {
+    [key: string]: string;
+  };
+  versionLabel: string;
+  state?: string;
+  created?: string;
+}
+
+export interface SchemaWithVersionInfo extends Schema {
+  revisions: Revision[];
+}
+
 export interface Organization {
   id: string;
   parentOrganization?: string;

mscr-ui/src/modules/schema-view/index.tsx

@@ -5,13 +5,13 @@ import { SyntheticEvent, useState } from 'react';
 import MetadataAndFiles from '@app/modules/schema-view/metadata-and-files';
 import VersionHistory from '@app/modules/schema-view/version-history';
 import {useTranslation} from 'next-i18next';
-import {useGetSchemaQuery} from '@app/common/components/schema/schema.slice';
+import { useGetSchemaWithRevisionsQuery } from '@app/common/components/schema/schema.slice';
 
 export default function SchemaView({ schemaId }: { schemaId: string }) {
   const { t } = useTranslation('common');
 
   const { data: schemaDetails, isLoading, isSuccess, isError, error } =
-    useGetSchemaQuery(schemaId);
+    useGetSchemaWithRevisionsQuery(schemaId);
   const [selectedTab, setSelectedTab] = useState(0);
 
 

mscr-ui/src/modules/schema-view/metadata-and-files/index.tsx

@@ -1,22 +1,22 @@
-import {useTranslation} from 'next-i18next';
-import {useMemo} from 'react';
-import {Schema} from '@app/common/interfaces/schema.interface';
+import { useTranslation } from 'next-i18next';
+import { useMemo } from 'react';
+import { Schema } from '@app/common/interfaces/schema.interface';
 import router from 'next/router';
 import {
   DescriptionList,
   DescriptionListTitle
 } from '@app/modules/schema-view/metadata-and-files/metadata-and-files.styles';
-import {Grid} from '@mui/material';
-import {Heading} from 'suomifi-ui-components';
+import { Grid } from '@mui/material';
+import { Heading } from 'suomifi-ui-components';
+import { getLanguageVersion } from '@app/common/utils/get-language-version';
+import getOrganizations from '@app/common/utils/get-organizations';
 
 export default function MetadataAndFiles({ schemaDetails }: { schemaDetails?: Schema }) {
   const { t } = useTranslation('common');
-  const lang = router.locale;
+  const lang = router.locale ?? '';
+
+  // TODO: Editing -> Only edit with permission, we have util has-permission
 
-  // TODO: Only edit with permission, we have util has-permission
-  // TODO: Get organization names neatly
-  // Locale: Object.entries(schemaDetails.label).find((t) => t[0] === lang)?.[1] ?? ''
-  // Organization: see datamodel-ui/src/modules/model/model-info-view.tsx
   interface SchemaDisplay {
     [key:string]: string;
   }
@@ -38,24 +38,21 @@ export default function MetadataAndFiles({ schemaDetails }: { schemaDetails?: Sc
         }
       );
     }
-    function languageFinder(langTaggedData: { [key:string]: string }) {
-      const primaryOption = Object.entries(langTaggedData).find((t) => t[0] === lang)?.[1];
-      const englishOption = Object.entries(langTaggedData).find((t) => t[0] === 'en')?.[1];
-      return primaryOption ?? englishOption;
-    }
+    const organizations = getOrganizations(schemaDetails.organizations, lang)
+      .map((org) => org.label).join(', ');
     return (
       {
         schemaPid: schemaDetails?.pid ?? '',
         schemaLabel: schemaDetails?.label
-          ? languageFinder(schemaDetails.label) ?? ''
+          ? getLanguageVersion({ data: schemaDetails.label, lang, appendLocale: true })
           : '',
         schemaDescription: schemaDetails?.description
-          ? languageFinder(schemaDetails.description) ?? ''
+          ? getLanguageVersion({ data: schemaDetails.description, lang, appendLocale: true  }) ?? ''
           : '',
         schemaCreated: schemaDetails?.created ?? '',
         schemaModified: schemaDetails?.modified ?? '',
         schemaState: schemaDetails?.state ?? '',
-        schemaOrganizations: schemaDetails?.organizations.toString() ?? '',
+        schemaOrganizations: organizations,
         schemaVisibility: schemaDetails?.visibility ?? '',
         schemaFormat: schemaDetails?.format ?? '',
         schemaVersionLabel: schemaDetails?.versionLabel ?? '',

mscr-ui/src/modules/schema-view/metadata-and-files/metadata-and-files.styles.tsx

@@ -1,4 +1,4 @@
-import { styled } from 'styled-components';
+import styled from 'styled-components';
 
 export const DescriptionListTitle = styled.dt`
   font-weight: 400;

mscr-ui/src/modules/schema-view/version-history/index.tsx

@@ -1,8 +1,8 @@
 import {useTranslation} from 'next-i18next';
-import {Schema} from '@app/common/interfaces/schema.interface';
+import { SchemaWithVersionInfo } from '@app/common/interfaces/schema.interface';
 import HistoryTable from '@app/common/components/history-table';
 
-export default function VersionHistory({ schemaDetails }: {schemaDetails: Schema}) {
+export default function VersionHistory({ schemaDetails }: {schemaDetails: SchemaWithVersionInfo}) {
   const { t } = useTranslation('common');
 
 
@@ -13,28 +13,29 @@ export default function VersionHistory({ schemaDetails }: {schemaDetails: Schema
     t('schema.state')
   ];
 
+  const revisions = schemaDetails.revisions;
   // Temporarily mock data, really should be schemaDetails.revisions or something
-  const revisions =
-    [
-      {
-        'pid': 'urn:IAMNOTAPID:9f02b4da-1766-4f3a-aa61-270c0bd3e460',
-        'label': {
-          'en': 'string'
-        },
-        'versionLabel': '1',
-        'created': '2023-11-21',
-        'state': 'PUBLISHED'
-      },
-      {
-        'pid': 'urn:IAMNOTAPID:4faa61a3-1de9-451d-80f2-cce179e82084',
-        'label': {
-          'en': 'string'
-        },
-        'versionLabel': '1.1',
-        'created': '2023-11-21',
-        'state': 'DRAFT'
-      }
-    ];
+  // const revisions =
+  //   [
+  //     {
+  //       'pid': 'urn:IAMNOTAPID:9f02b4da-1766-4f3a-aa61-270c0bd3e460',
+  //       'label': {
+  //         'en': 'string'
+  //       },
+  //       'versionLabel': '1',
+  //       'created': '2023-11-21',
+  //       'state': 'PUBLISHED'
+  //     },
+  //     {
+  //       'pid': 'urn:IAMNOTAPID:4faa61a3-1de9-451d-80f2-cce179e82084',
+  //       'label': {
+  //         'en': 'string'
+  //       },
+  //       'versionLabel': '1.1',
+  //       'created': '2023-11-21',
+  //       'state': 'DRAFT'
+  //     }
+  //   ];
 
   return (
     <HistoryTable headers={headers} revisions={revisions} ariaLabel={t('schema.versions')}/>