refactor(api): Resolve breaking changes in DM API 0.7

This is missing updates to dataset schema editing

Author: OliverDudgeon

.env

@@ -9,7 +9,7 @@ NEXT_PUBLIC_AUTH0_LOGIN=$BASE_PATH/api/auth/login
 # or the other being used. Not combined.
 AUTH0_BASE_URL=$BASE_URL$VERCEL_URL$BASE_PATH
 
-AUTH0_ISSUER_BASE_URL=$KEYCLOAK_URL/realms/squonk
+AUTH0_ISSUER_BASE_URL=$KEYCLOAK_URL
 AUTH0_ENABLE_TELEMETRY=False
 
 # MB

.env.local.example

@@ -25,7 +25,8 @@ ACCOUNT_SERVER_API_SERVER='https://squonk.informaticsmatters.org/account-server-
 # For multiple NextJS apps on the same domain, the secret must be the same on each!
 AUTH0_SECRET='LONG_RANDOM_VALUE'
 # Auth Issuer Location
-KEYCLOAK_URL='https://squonk.informaticsmatters.org/auth'
+KEYCLOAK_URL='https://squonk.informaticsmatters.org/auth/realms/squonk'
+KEYCLOAK_REALM=squonk
 # Client ID and Secret of confidential Keycloak client
 AUTH0_CLIENT_ID='data-manager-ui-staging'
 AUTH0_CLIENT_SECRET='e32...daaa2d'

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env.local
+.env.squonk.local
 .env.development.local
 .env.test.local
 .env.production.local

components/DatasetsTable/DatasetDetails/DatasetDetails.tsx

@@ -4,9 +4,11 @@ import { useState } from 'react';
 
 import type { DatasetSummary, DatasetVersionSummary } from '@squonk/data-manager-client';
 
-import { Container, Link, List } from '@material-ui/core';
+import { Container, Link, List, Typography } from '@material-ui/core';
 
 import { useKeycloakUser } from '../../../hooks/useKeycloakUser';
+import { Labels } from '../../labels/Labels';
+import { NewLabelButton } from '../../labels/NewLabelButton';
 import { ModalWrapper } from '../../modals/ModalWrapper';
 import { PageSection } from '../../PageSection';
 import { VersionInfoSection } from './VersionInfoSection/VersionInfoSection';
@@ -41,9 +43,7 @@ export const DatasetDetails: FC<DatasetDetailsProps> = ({ dataset, version, data
 
   const { user } = useKeycloakUser();
 
-  const isEditor = !!user.username && dataset.editors.includes(user.username);
-  const isOwner = dataset.owner === user.username;
-  const editable = isEditor || isOwner;
+  const editable = !!user.username && dataset.editors.includes(user.username);
 
   useLayoutEffect(() => {
     setSelectedVersion(version);
@@ -73,13 +73,17 @@ export const DatasetDetails: FC<DatasetDetailsProps> = ({ dataset, version, data
                 <PageSection title="Editors">
                   <ManageDatasetEditorsSection dataset={dataset} />
                 </PageSection>
+
+                <Typography gutterBottom component="h4" variant="h5">
+                  Labels <NewLabelButton datasetId={dataset.dataset_id} />
+                </Typography>
+                <Labels datasetId={dataset.dataset_id} datasetVersion={version} />
               </>
             )}
 
             <PageSection title="Working Version">
               <WorkingVersionSection
                 dataset={dataset}
-                editable={editable}
                 setVersion={setSelectedVersion}
                 version={selectedVersion}
               />

components/DatasetsTable/DatasetDetails/NewVersionListItem.tsx

@@ -10,7 +10,7 @@ import { ListItem, ListItemSecondaryAction, ListItemText } from '@material-ui/co
 import { Typography } from '@material-ui/core';
 import BackupRoundedIcon from '@material-ui/icons/BackupRounded';
 
-import { ORG_ID, UNIT_ID } from '../../../utils/ASIdentities';
+import { useCurrentOrg, useCurrentUnit } from '../../../context/organisationUnitContext';
 import { ModalWrapper } from '../../modals/ModalWrapper';
 import { Dropzone } from '../../uploads/Dropzone';
 import { FileTypeOptions } from '../../uploads/FileTypeOptions';
@@ -40,6 +40,9 @@ export const NewVersionListItem = ({ dataset, datasetName }: NewVersionListItemP
   // State to track per-file-type options for the new dataset version
   const [optionsFormData, setOptionsFormData] = useState<FileTypeOptionsState>({});
 
+  const unit = useCurrentUnit();
+  const org = useCurrentOrg();
+
   return (
     <>
       <ListItem button onClick={() => setOpen(true)}>
@@ -62,21 +65,20 @@ export const NewVersionListItem = ({ dataset, datasetName }: NewVersionListItemP
         onSubmit={async () => {
           const parentVersion = Math.max(...dataset.versions.map((v) => v.version));
           const parent = dataset.versions.find((version) => version.version === parentVersion);
-          if (file && parent) {
+          if (file && parent && org && unit) {
             // For consistency with the main file upload, I don't use the mutation hook here. This
             // allows reliable upload progress tracking.
             const response = await uploadDataset(
               {
                 dataset_file: file.file,
                 dataset_type: parent.type,
                 as_filename: parent.file_name,
-                parent_id: dataset.dataset_id,
-                parent_version: parentVersion,
+                dataset_id: dataset.dataset_id,
                 format_extra_variables: optionsFormData[parent.type]
                   ? JSON.stringify(optionsFormData[parent.type])
                   : undefined,
-                organisation_id: ORG_ID,
-                unit_id: UNIT_ID,
+                organisation_id: org.id,
+                unit_id: unit.id,
               },
               {
                 onUploadProgress: (progressEvent: ProgressEvent) => {

components/DatasetsTable/DatasetDetails/VersionActionsSection/DatasetSchemaListItem/DatasetSchemaViewModal/useDatasetSchema.ts

@@ -1,12 +1,8 @@
 import { useState } from 'react';
 import { useQueryClient } from 'react-query';
 
-import {
-  getGetSchemaQueryKey,
-  useAddAnnotations,
-  useGetSchema,
-  useUpdateMetadata,
-} from '@squonk/data-manager-client/dataset';
+import { getGetSchemaQueryKey, useGetSchema } from '@squonk/data-manager-client/dataset';
+import { useAddMetadata, useAddMetadataVersion } from '@squonk/data-manager-client/metadata';
 
 import type { TypedSchema } from './types';
 import { useEditableSchemaView } from './useEditableSchema';
@@ -27,15 +23,15 @@ export const useDatasetSchema = (datasetId: string, version: number) => {
     isError: isUpdateMetadataError,
     error: updateMetadataError,
     reset: resetUpdateMetadata,
-    mutateAsync: mutateUpdateMetadata,
-  } = useUpdateMetadata();
+    // mutateAsync: updateMetadata,
+  } = useAddMetadata();
 
   const {
     isError: isAddAnnotationsError,
     error: addAnnotationsError,
     reset: resetAddAnnotations,
-    mutateAsync: mutateAddAnnotations,
-  } = useAddAnnotations();
+    mutateAsync: addAnnotations,
+  } = useAddMetadataVersion();
 
   const [isSaving, setIsSaving] = useState(false);
 
@@ -62,21 +58,21 @@ export const useDatasetSchema = (datasetId: string, version: number) => {
 
     // Only update description if it was changed.
     if (description !== undefined) {
-      const data = { description };
-      promises.push(
-        mutateUpdateMetadata({
-          datasetid: datasetId,
-          datasetversion: version,
-          metaparameters: JSON.stringify(data),
-        }),
-      );
+      // const data = { description };
+      // promises.push(
+      //   updateMetadata({
+      //     datasetid: datasetId,
+      //     datasetversion: version,
+      //     metaparameters: JSON.stringify(data),
+      //   }),
+      // );
     }
 
     // Only update field definitions if they were changed.
     if (fields) {
       const data = { type: 'FieldsDescriptorAnnotation', origin: 'data-manager-api', fields };
       promises.push(
-        mutateAddAnnotations({
+        addAnnotations({
           datasetid: datasetId,
           datasetversion: version,
           data: { annotations: JSON.stringify(data) },

components/DatasetsTable/DatasetDetails/WorkingVersionSection.tsx

@@ -4,8 +4,6 @@ import { css } from '@emotion/react';
 import { Box, MenuItem, TextField, Typography, useTheme } from '@material-ui/core';
 
 import { DownloadButton } from '../../DownloadButton';
-import { Labels } from '../../labels/Labels';
-import { NewLabelButton } from '../../labels/NewLabelButton';
 
 export interface WorkingVersionSectionProps {
   /**
@@ -20,10 +18,6 @@ export interface WorkingVersionSectionProps {
    * Setter to set the selected version.
    */
   setVersion: (version: DatasetVersionSummary) => void;
-  /**
-   * Whether the dataset version is editable.
-   */
-  editable: boolean;
 }
 
 /**
@@ -33,7 +27,6 @@ export const WorkingVersionSection = ({
   dataset,
   version,
   setVersion,
-  editable,
 }: WorkingVersionSectionProps) => {
   const theme = useTheme();
 
@@ -79,16 +72,6 @@ export const WorkingVersionSection = ({
           />
         </div>
       </Box>
-      {/* Top level editing - operations that don't have a "submit" */}
-      {editable && (
-        <>
-          <Typography gutterBottom component="h4" variant="h5">
-            Labels{' '}
-            <NewLabelButton datasetId={dataset.dataset_id} datasetVersion={version.version} />
-          </Typography>
-          <Labels datasetId={dataset.dataset_id} datasetVersion={version} />
-        </>
-      )}
     </>
   );
 };

components/DatasetsTable/DatasetsTable.tsx

@@ -78,14 +78,8 @@ export const DatasetsTable = () => {
         accessor: 'editors',
         Header: 'Editors',
         sortType: editorsSorter,
-        Cell: ({ value: editors, row }) => {
-          return (
-            <>
-              <i>{row.original.owner}</i>
-              {editors.length > 1 && ', '}
-              {editors.filter((editor) => editor !== row.original.owner).join(', ')}
-            </>
-          );
+        Cell: ({ value: editors }) => {
+          return editors.join(', ');
         },
       },
       {
@@ -131,6 +125,7 @@ export const DatasetsTable = () => {
             datasetSummary: dataset,
             datasetVersion: version,
             subRows: [],
+            owner: version.owner,
           })),
         };
       }) || [],

components/DatasetsTable/types.ts

@@ -7,7 +7,6 @@ type TableDatasetBase = {
   labels: Record<string, string | string[]>;
   dataset_id: string;
   editors: string[];
-  owner: string;
   version?: number;
   subRows: TableDataset[];
   // Pointers
@@ -22,6 +21,7 @@ export type TableDatasetRow = TableDatasetBase & {
 export type TableDatasetSubRow = TableDatasetBase & {
   type: 'subRow';
   version: number;
+  owner?: string;
 };
 
 /**