Merge remote-tracking branch 'origin/main' into CamideK55-patch-6

# Conflicts: # apps/researcher/src/messages/en/messages.json
colonial-heritage · Jun 28, 2024 · 46f55be · 46f55be
2 parents 52f54b8 + 1482c15
commit 46f55be
Show file tree

Hide file tree

Showing 32 changed files with 376 additions and 231 deletions.
diff --git a/apps/dataset-browser/src/app/[locale]/dataset-card.tsx b/apps/dataset-browser/src/app/[locale]/dataset-card.tsx
@@ -1,7 +1,7 @@
 import {Link} from '@/navigation';
 import {useTranslations} from 'next-intl';
 import {Dataset} from '@colonial-collections/api';
-import {Badge} from '@colonial-collections/ui';
+import {Badge, BadgeIcon} from '@colonial-collections/ui';
 import {BuildingLibraryIcon} from '@heroicons/react/24/solid';
 import {DocumentCheckIcon} from '@heroicons/react/24/outline';
 import BooleanMeasurement from '@/components/boolean-measurement';
@@ -59,11 +59,11 @@ export default function DatasetCard({dataset}: {dataset: Dataset}) {
         </div>
         <div className="mt-2 flex flex-wrap gap-3">
           <Badge variant="gray">
-            <Badge.Icon Icon={BuildingLibraryIcon} variant="solid" />
+            <BadgeIcon Icon={BuildingLibraryIcon} variant="solid" />
             {dataset.publisher?.name}
           </Badge>
           <Badge variant="gray">
-            <Badge.Icon Icon={DocumentCheckIcon} />
+            <BadgeIcon Icon={DocumentCheckIcon} />
             {dataset.license?.name}
           </Badge>
         </div>

diff --git a/apps/researcher/e2e/object-list.test.ts b/apps/researcher/e2e/object-list.test.ts
@@ -126,7 +126,7 @@ test.describe('Object list page logged in', () => {
     await gotoSignedIn(objectUrl);
     await page.getByTestId('popover-menu-button').hover();
     await page.getByTestId(`object-list-${listId}`).click();
-    await expect(page.getByTestId('notification')).toHaveCount(3);
+    await expect(page.getByTestId('notification')).toHaveCount(1);
     await page.goto(`/en/communities/${community.slug}/${listId}`);
     await expect(page.getByTestId('object-card')).toHaveCount(1);
   });

diff --git a/apps/researcher/e2e/object.test.ts b/apps/researcher/e2e/object.test.ts
@@ -94,7 +94,7 @@ test.describe('Object details page logged in', () => {
       .getByTestId('enrichment-form')
       .locator('button[type="submit"]')
       .click();
-    await expect(page.getByTestId('notification')).toHaveCount(3, {
+    await expect(page.getByTestId('notification')).toHaveCount(1, {
       timeout: 30000,
     });
 

diff --git a/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/add-form.tsx b/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/add-form.tsx
@@ -212,7 +212,7 @@ export default function AddProvenanceForm({
       });
 
       addNotification({
-        id: 'add-user-enrichment-success',
+        id: 'provenance.added.success',
         message: t('successfullyAdded'),
         type: 'success',
       });
@@ -411,7 +411,6 @@ export default function AddProvenanceForm({
                     <InputLabel
                       title={t('qualifier')}
                       description={t('qualifierDescription')}
-                      required
                     />
                     <QualifierSelector name="qualifier" />
                   </Field>

diff --git a/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/data-table.tsx b/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/data-table.tsx
@@ -80,10 +80,10 @@ function ProvenanceEventRow({
 
   return (
     <div className="flex flex-col md:flex-row gap-4 border-t">
-      <div className="w-1/3 lg:w-1/4 py-2">
+      <div className="w-full md:w-1/3 lg:w-1/4 py-2">
         <div className="sticky top-8">{dateRange}</div>
       </div>
-      <div className="flex flex-col gap-4 w-2/3 lg:w-3/4 ">
+      <div className="flex flex-col gap-4 w-full md:w-2/3 lg:w-3/4 ">
         {provenanceEvents.map(event => (
           <div
             key={event.id}
@@ -94,7 +94,7 @@ function ProvenanceEventRow({
                 {event.label}
               </SelectEventsButton>
             </div>
-            <div className="w-2/3">
+            <div className="w-full md:w-2/3">
               {metadata.map(
                 ({prop, translationKey}) =>
                   event[prop] && (
@@ -147,7 +147,7 @@ function ProvenanceEventRow({
                 </>
               )}
             </div>
-            <div className="w-1/3 text-xs">
+            <div className="w-full md:w-1/3 text-xs">
               <ProvidedBy
                 dateCreated={event.dateCreated}
                 citation={event.citation}

diff --git a/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/overview.tsx b/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/overview.tsx
@@ -64,7 +64,11 @@ export default async function Provenance({objectId}: {objectId: string}) {
     <ProvenanceProvider events={userEvents}>
       <div className="w-full">
         <div className="mx-auto px-4 sm:px-10 max-w-[1800px]">
-          <h2 id="provenance" className="text-2xl mb-2 mt-20" tabIndex={0}>
+          <h2
+            id="provenance"
+            className="text-2xl mb-2 mt-20 scroll-mt-20"
+            tabIndex={0}
+          >
             {t('title')}
           </h2>
           <p className="text-neutral-600 text-sm max-w-2xl mb-6">
@@ -107,7 +111,7 @@ async function AddProvenanceSlideOut({objectId}: {objectId: string}) {
 
   return (
     <>
-      <Notifications />
+      <Notifications prefixFilters={['provenance.']} />
       <SignedInWithCommunitySideOut
         slideOutId={slideOutId}
         needAccountTitle={t('needAccountToAddProvenanceTitle')}

diff --git a/apps/researcher/src/app/[locale]/objects/[id]/gallery.tsx b/apps/researcher/src/app/[locale]/objects/[id]/gallery.tsx
@@ -84,7 +84,7 @@ export default function Gallery({images, organizationName}: Props) {
       </Tab.Panels>
 
       {images.length > 1 && (
-        <Tab.List className="w-1/2 md:w-full grid grid-cols-2 md:flex md:flex-row md:flex-wrap md:items-end gap-2 md:py-2 md:border-y-4 border-white">
+        <Tab.List className="w-1/2 md:w-full grid grid-cols-2 md:flex md:flex-row md:flex-wrap md:items-end gap-2 md:py-2">
           {images.map(image => (
             <Tab
               as="div"

diff --git a/apps/researcher/src/app/[locale]/objects/[id]/local-contexts-notices/form.tsx b/apps/researcher/src/app/[locale]/objects/[id]/local-contexts-notices/form.tsx
@@ -29,6 +29,7 @@ import {
 } from './mapping';
 import {LocalContextsNoticeSelector} from '@/components/form/local-contexts-notice-selector';
 import {Field} from '@headlessui/react';
+import Image from 'next/image';
 
 interface FormValues {
   type: LocalContextsNoticeEnrichmentType | null;
@@ -105,7 +106,7 @@ export function LocalContextsNoticeForm({
       });
 
       addNotification({
-        id: 'add-user-notice-success',
+        id: 'notice.added.success',
         message: t('successfullyAdded'),
         type: 'success',
       });
@@ -145,25 +146,46 @@ export function LocalContextsNoticeForm({
             </div>
           </div>
         )}
-        <div>
+        <div tabIndex={0}>
           {t('type')}
           <LocalContextsNoticeSelector name="type" />
         </div>
 
         {watch('type') && (
           <div className="w-full max-w-4xl pb-4">
-            <strong className="flex items-center gap-1">
-              <InformationCircleIcon className="w-4 h-4 stroke-neutral-900" />
-              {t('noticeInformationTitle')}
-            </strong>
-            <em>{t('noticeInformationSubTitle')}</em>
+            <h3>
+              <strong className="flex items-center gap-1 font-semibold">
+                <InformationCircleIcon className="w-4 h-4 stroke-neutral-900" />
+                {t('noticeInformationTitle')}
+              </strong>
+            </h3>
+
             <p>
               {tNotices(
                 localContextsNoticeEnrichmentTypeMapping[
                   watch('type')! as LocalContextsNoticeEnrichmentType
-                ].labelTranslationKey
+                ].informationTranslationKey
               )}
             </p>
+            <h3 className="flex items-center gap-1 mt-4 mb-2">
+              {t('noticeTextTitle')}
+            </h3>
+
+            <div className="bg-neutral-50 p-4 rounded-sm italic text-neutral-600 text-sm border border-neutral-200 max-w-2xl">
+              {tNotices(
+                localContextsNoticeEnrichmentTypeMapping[
+                  watch('type')! as LocalContextsNoticeEnrichmentType
+                ].labelTranslationKey
+              )}
+              <div className="w-full flex justify-end pt-1">
+                <Image
+                  height={26}
+                  width={80}
+                  src="/images/local-contexts-notices/logo-local-contexts.png"
+                  alt="Logo local context"
+                />
+              </div>
+            </div>
           </div>
         )}
 

diff --git a/apps/researcher/src/app/[locale]/objects/[id]/local-contexts-notices/mapping.ts b/apps/researcher/src/app/[locale]/objects/[id]/local-contexts-notices/mapping.ts
@@ -10,41 +10,49 @@ export const localContextsNoticeEnrichmentTypeMapping = {
   [LocalContextsNoticeEnrichmentType.Authorization]: {
     titleTranslationKey: 'authorization',
     labelTranslationKey: 'authorizationLabel',
+    informationTranslationKey: 'authorizationInformation',
     imageSrc: '/images/local-contexts-notices/authorization.png',
   },
   [LocalContextsNoticeEnrichmentType.Belonging]: {
     titleTranslationKey: 'belonging',
     labelTranslationKey: 'belongingLabel',
+    informationTranslationKey: 'belongingInformation',
     imageSrc: '/images/local-contexts-notices/belonging.png',
   },
   [LocalContextsNoticeEnrichmentType.Caring]: {
     titleTranslationKey: 'caring',
     labelTranslationKey: 'caringLabel',
+    informationTranslationKey: 'caringInformation',
     imageSrc: '/images/local-contexts-notices/caring.png',
   },
   [LocalContextsNoticeEnrichmentType.Gender_Aware]: {
     titleTranslationKey: 'genderAware',
     labelTranslationKey: 'genderAwareLabel',
+    informationTranslationKey: 'genderAwareInformation',
     imageSrc: '/images/local-contexts-notices/gender-aware.png',
   },
   [LocalContextsNoticeEnrichmentType.Leave_Undisturbed]: {
     titleTranslationKey: 'leaveUndisturbed',
     labelTranslationKey: 'leaveUndisturbedLabel',
+    informationTranslationKey: 'leaveUndisturbedInformation',
     imageSrc: '/images/local-contexts-notices/leave-undisturbed.png',
   },
   [LocalContextsNoticeEnrichmentType.Safety]: {
     titleTranslationKey: 'safety',
     labelTranslationKey: 'safetyLabel',
+    informationTranslationKey: 'safetyInformation',
     imageSrc: '/images/local-contexts-notices/safety.png',
   },
   [LocalContextsNoticeEnrichmentType.Viewing]: {
     titleTranslationKey: 'viewing',
     labelTranslationKey: 'viewingLabel',
+    informationTranslationKey: 'viewingInformation',
     imageSrc: '/images/local-contexts-notices/viewing.png',
   },
   [LocalContextsNoticeEnrichmentType.Withholding]: {
     titleTranslationKey: 'withholding',
     labelTranslationKey: 'withholdingLabel',
+    informationTranslationKey: 'withholdingInformation',
     imageSrc: '/images/local-contexts-notices/withholding.png',
   },
 } as const;
diff --git a/apps/researcher/src/app/[locale]/objects/[id]/local-contexts-notices/overview.tsx b/apps/researcher/src/app/[locale]/objects/[id]/local-contexts-notices/overview.tsx
@@ -47,7 +47,6 @@ export default async function LocalContextsNotices() {
     };
   }
 
-  // Default notice when there are no localContextsNotices
   const defaultNotice = {
     id: 'attributionIncomplete',
     title: tNotices('attributionIncomplete'),
@@ -61,21 +60,25 @@ export default async function LocalContextsNotices() {
     label: tNotices('attributionIncompleteLabel'),
   };
 
-  // Determine notices to display
-  const noticesToDisplay = localContextsNotices?.length
-    ? localContextsNotices.map(mapNoticeToDisplay)
-    : [defaultNotice];
+  const noticesToDisplay = [
+    ...(localContextsNotices?.map(mapNoticeToDisplay) || []),
+    defaultNotice,
+  ];
 
   return (
     <div className="my-16" id="localContextNotices">
-      <h2 className="text-2xl mb-4 scroll-mt-20" tabIndex={0}>
+      <h2
+        className="text-2xl mb-4 scroll-mt-20"
+        tabIndex={0}
+        id="localcontextnotices"
+      >
         {t('title')}
       </h2>
       <p className="text-neutral-600 text-sm max-w-xl mb-6">
         {t.rich('description', {
           link: text => (
             <a
-              href="https://localcontexts.org/notices/local-contexts-notices/"
+              href="https://localcontexts.org/notices/cc-notices/"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -85,7 +88,7 @@ export default async function LocalContextsNotices() {
         })}
       </p>
       <AddLocalContextsNotice />
-      <Notifications />
+      <Notifications prefixFilters={['notice.']} />
       <div className="w-full mt-4">
         {noticesToDisplay.map(notice => (
           <div