Merge pull request #284 from recogito/develop

Develop to main
recogito · Oct 9, 2024 · b73c96e · b73c96e
2 parents 151e5cd + 36387cc
commit b73c96e
Show file tree

Hide file tree

Showing 23 changed files with 1,286 additions and 1,278 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,47 +15,48 @@
   },
   "dependencies": {
     "@allmaps/iiif-parser": "1.0.0-beta.39",
-    "@annotorious/react": "3.0.5",
-    "@astrojs/netlify": "^5.5.1",
-    "@astrojs/node": "^8.3.3",
+    "@annotorious/react": "3.0.11",
+    "@astrojs/netlify": "^5.5.3",
+    "@astrojs/node": "^8.3.4",
     "@astrojs/react": "^3.6.2",
     "@phosphor-icons/react": "^2.1.7",
-    "@radix-ui/react-accordion": "^1.2.0",
-    "@radix-ui/react-alert-dialog": "^1.1.1",
-    "@radix-ui/react-avatar": "^1.1.0",
-    "@radix-ui/react-checkbox": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-progress": "^1.1.0",
-    "@radix-ui/react-radio-group": "^1.2.0",
-    "@radix-ui/react-scroll-area": "^1.1.0",
-    "@radix-ui/react-select": "^2.1.1",
-    "@radix-ui/react-switch": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.2",
-    "@react-spring/web": "^9.7.4",
-    "@recogito/annotorious-supabase": "1.0.0",
-    "@recogito/react-pdf-annotator": "1.0.0-rc.29",
-    "@recogito/react-text-annotator": "3.0.0-rc.45",
+    "@radix-ui/react-tooltip": "^1.1.3",
+    "@react-spring/web": "^9.7.5",
+    "@recogito/annotorious-supabase": "1.0.3",
+    "@recogito/pdf-annotator": "1.0.0-rc.36",
+    "@recogito/react-pdf-annotator": "1.0.0-rc.36",
+    "@recogito/react-text-annotator": "3.0.0-rc.49",
     "@supabase/ssr": "0.5.1",
-    "@supabase/supabase-js": "2.45.3",
+    "@supabase/supabase-js": "2.45.4",
     "@table-library/react-table-library": "^4.1.7",
-    "@uppy/core": "3.11.3",
-    "@uppy/xhr-upload": "3.6.4",
+    "@uppy/core": "4.2.1",
+    "@uppy/xhr-upload": "4.2.0",
     "@usewaypoint/email-builder": "^0.0.8",
     "accept-language-parser": "^1.5.0",
-    "astro": "^4.15.3",
+    "astro": "^4.15.12",
     "classnames": "^2.5.1",
     "confetti-explosion-react": "^0.1.2",
     "crypto-js": "4.2.0",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "formik": "2.4.6",
-    "linkedom": "0.18.4",
+    "linkedom": "0.18.5",
     "moment": "^2.30.1",
     "nodemailer": "^6.9.15",
     "openseadragon": "4.0.0",
@@ -64,7 +65,7 @@
     "react": "^18.3.1",
     "react-contenteditable": "^3.3.7",
     "react-dom": "^18.3.1",
-    "react-dropzone": "14.2.3",
+    "react-dropzone": "14.2.9",
     "react-error-boundary": "^4.0.13",
     "react-textarea-autosize": "8.5.3",
     "react-virtualized-auto-sizer": "1.0.24",
@@ -78,17 +79,17 @@
     "@astrojs/ts-plugin": "^1.10.2",
     "@types/accept-language-parser": "^1.5.6",
     "@types/crypto-js": "4.2.2",
-    "@types/nodemailer": "^6.4.15",
+    "@types/nodemailer": "^6.4.16",
     "@types/openseadragon": "3.0.10",
     "@types/papaparse": "5.3.14",
-    "@types/react": "^18.3.5",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@types/react-window": "1.8.8",
     "@types/uuid": "10.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.2",
-    "typescript": "5.5.4"
+    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@typescript-eslint/parser": "^8.8.1",
+    "eslint": "^9.12.0",
+    "eslint-plugin-react": "^7.37.1",
+    "typescript": "5.6.2"
   }
 }
diff --git a/src/apps/annotation-image/AnnotatedImage/AnnotatedImage.tsx b/src/apps/annotation-image/AnnotatedImage/AnnotatedImage.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type OpenSeadragon from 'openseadragon';
 import { UndoStack } from '@components/AnnotationDesktop';
 import type { PrivacyMode } from '@components/PrivacySelector';
@@ -101,7 +101,7 @@ export const AnnotatedImage = forwardRef<OpenSeadragon.Viewer, AnnotatedImagePro
     preserveImageSizeOnResize: true
   }), [props.imageManifestURL]);
 
-  const selectAction = (annotation: SupabaseAnnotation) => {
+  const selectAction = useCallback((annotation: SupabaseAnnotation) => {
     // Directly after creation, annotations have no
     // layer_id (because it gets added later through 
     // the storage plugin).
@@ -116,7 +116,7 @@ export const AnnotatedImage = forwardRef<OpenSeadragon.Viewer, AnnotatedImagePro
       annotation.target.creator?.id === me?.id || policies.get('layers').has('INSERT'));
 
     return canEdit ? UserSelectAction.EDIT : UserSelectAction.SELECT;
-  }
+  }, [annoRef, props.activeLayer, policies]);
 
   useEffect(() => {
     if (props.tool) {

diff --git a/src/apps/annotation-image/LeftDrawer/LeftDrawer.css b/src/apps/annotation-image/LeftDrawer/LeftDrawer.css
@@ -16,4 +16,5 @@
 
 .anno-drawer.ia-left-drawer aside .tabcontent {
   flex: 1;
+  overflow-x: hidden;
 }
diff --git a/src/apps/auth-login/Login.tsx b/src/apps/auth-login/Login.tsx
@@ -2,7 +2,7 @@ import { LoginAccordion } from '@apps/auth-login/LoginAccordion';
 import { LoginMethods } from '@apps/auth-login/methods.ts';
 import { Button } from '@components/Button';
 import classNames from 'classnames';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import type { Session } from '@supabase/supabase-js';
 import { supabase } from '@backend/supabaseBrowserClient';
 import { isLoggedIn } from '@backend/auth';
@@ -54,8 +54,8 @@ export const Login = (props: {
       } else if (event === 'SIGNED_IN' || event === 'TOKEN_REFRESHED') {
         setCookies(session);
         if (redirectUrl) {
+          localStorage.removeItem('redirect-to');
           window.location.href = redirectUrl;
-          localStorage.setItem('redirect-to', '');
         } else {
           window.location.href = `/${props.i18n.lang}/projects`;
         }
@@ -67,8 +67,8 @@ export const Login = (props: {
         supabase.auth.getSession().then(({ data: { session } }) => {
           setCookies(session);
           if (redirectUrl) {
+            localStorage.removeItem('redirect-to');
             window.location.href = redirectUrl;
-            localStorage.setItem('redirect-to', '');
           } else {
             window.location.href = `/${props.i18n.lang}/projects`;
           }
@@ -91,6 +91,7 @@ export const Login = (props: {
       })
       .then(({ data, error }) => {
         if (data?.url) {
+          localStorage.removeItem('redirect-to');
           window.location.href = data.url;
         } else {
           console.error(error);
@@ -111,6 +112,7 @@ export const Login = (props: {
       })
       .then(({ data, error }) => {
         if (data?.url) {
+          localStorage.removeItem('redirect-to');
           window.location.href = data.url;
         } else {
           console.error(error);

diff --git a/src/apps/auth-logout/Logout.tsx b/src/apps/auth-logout/Logout.tsx
@@ -11,31 +11,19 @@ const clearCookies = () => {
   document.cookie = `sb-auth-token=; path=/; expires=${expires}; SameSite=Lax; secure`;
   document.cookie = `sb-access-token=; path=/; expires=${expires}; SameSite=Lax; secure`;
   document.cookie = `sb-refresh-token=; path=/; expires=${expires}; SameSite=Lax; secure`;
-}
+};
 
 export const Logout = (props: { i18n: Translations }) => {
-
-  const [error, setError] = useState(false);
-
   useEffect(() => {
-    supabase.auth.signOut().then(({ error }) => {
-      if (error) {
-        setError(true);
-      } else {
-        clearCookies();
-        window.location.href = `/${props.i18n.lang}/sign-in`;
-      }
+    supabase.auth.signOut().then(() => {
+      clearCookies();
+      window.location.href = `/${props.i18n.lang}/sign-in`;
     });
   }, []);
 
-  return error ? (
-    <div className="logout logout-error">
-      <SmileySad className="text-bottom" size={24} /> {props.i18n.t['Something went wrong.']}
-    </div>
-  ) : (
-    <div className="logout logout-processing">
+  return (
+    <div className='logout logout-processing'>
       <Spinner size={24} />
     </div>
-  )
-
-}
+  );
+};
diff --git a/src/apps/project-home/AssignmentsView/AssignmentDetail/AssignmentDetail.css b/src/apps/project-home/AssignmentsView/AssignmentDetail/AssignmentDetail.css
@@ -42,6 +42,7 @@
   font-size: 14px;
   font-weight: 600;
   margin-left: 10px;
+  width: 200px;
 }
 
 .assignment-detail-team-list {
@@ -55,9 +56,9 @@
 }
 
 .assignment-detail-team-avatar .avatar {
- border: 2px solid var(--gray-50);
- height: 34px;
- width: 34px;
+  border: 2px solid var(--gray-50);
+  height: 34px;
+  width: 34px;
 }
 
 .assignment-detail-buttons {

diff --git a/src/apps/project-home/AssignmentsView/AssignmentDetail/AssignmentDetail.tsx b/src/apps/project-home/AssignmentsView/AssignmentDetail/AssignmentDetail.tsx
@@ -1,5 +1,11 @@
 import { useState } from 'react';
-import type { Context, Translations, UserProfile, Document } from 'src/Types';
+import type {
+  Context,
+  Translations,
+  UserProfile,
+  Document,
+  Group,
+} from 'src/Types';
 import { DownloadSimple, Pencil, Trash } from '@phosphor-icons/react';
 import { Avatar } from '@components/Avatar';
 import { DocumentCard } from '@components/DocumentCard';
@@ -14,6 +20,8 @@ interface AssignmentDetailProps {
 
   i18n: Translations;
 
+  groups: Group[];
+
   onEditAssignment(assignment: Context): void;
 
   onDeleteAssignment(assignment: Context): void;
@@ -33,6 +41,13 @@ export const AssignmentDetail = (props: AssignmentDetailProps) => {
     setConfirmOpen(true);
   };
 
+  const admins = props.groups
+    .filter((g) => g.is_admin)
+    .reduce(
+      (admins, group) => [...admins, ...group.members.map((m) => m.user)],
+      [] as UserProfile[]
+    );
+
   return (
     <div className='assignment-detail-container'>
       <div className='assignment-detail-pane'>
@@ -43,30 +58,36 @@ export const AssignmentDetail = (props: AssignmentDetailProps) => {
               : props.assignment.name}
           </div>
 
-
-            <div className='assignment-detail-buttons'>
-              <a
-                href={`/${lang}/projects/${props.assignment.project_id}/export/csv?context=${props.assignment.id}`}
-                className='button flat'>
-                <DownloadSimple size={20} />
-                <span>{t['Export annotations as CSV']}</span>
-              </a>
-
-              {props.isAdmin && !props.assignment.is_project_default && (
-                <>
-                  <button
-                    className='project-header-button'
-                    onClick={() => props.onEditAssignment(props.assignment)}>
-                    <Pencil color='black' size={20} />
-                    <div className='project-header-button-text'>{t['Edit']}</div>
-                  </button>
-                  <button className='project-header-button' onClick={handleDelete}>
-                    <Trash color='black' size={20} />
-                    <div className='project-header-button-text'>{t['Delete']}</div>
-                  </button>
-                </>
-              )}
-            </div>
+          <div className='assignment-detail-buttons'>
+            <a
+              href={`/${lang}/projects/${props.assignment.project_id}/export/csv?context=${props.assignment.id}`}
+              className='button flat'
+            >
+              <DownloadSimple size={20} />
+              <span>{t['Export annotations as CSV']}</span>
+            </a>
+
+            {props.isAdmin && !props.assignment.is_project_default && (
+              <>
+                <button
+                  className='project-header-button'
+                  onClick={() => props.onEditAssignment(props.assignment)}
+                >
+                  <Pencil color='black' size={20} />
+                  <div className='project-header-button-text'>{t['Edit']}</div>
+                </button>
+                <button
+                  className='project-header-button'
+                  onClick={handleDelete}
+                >
+                  <Trash color='black' size={20} />
+                  <div className='project-header-button-text'>
+                    {t['Delete']}
+                  </div>
+                </button>
+              </>
+            )}
+          </div>
         </div>
 
         <div className='assignment-detail-description-row'>
@@ -77,30 +98,27 @@ export const AssignmentDetail = (props: AssignmentDetailProps) => {
               ? t['base_assignment_description']
               : props.assignment.description}
           </div>
-
-          {members.length > 0 && (
-            <div className='assignment-detail-team'>
-              {t['Team']}
-              <div className='assignment-detail-team-list'>
-                {members.map((user: UserProfile) => (
-                  <div className='assignment-detail-team-avatar' key={user.id}>
-                    <Avatar
-                      id={user.id}
-                      name={
-                        user.nickname
-                          ? user.nickname
-                          : [user.first_name, user.last_name]
-                              .filter((str) => str)
-                              .join(' ')
-                              .trim()
-                      }
-                      avatar={user.avatar_url}
-                    />
-                  </div>
-                ))}
-              </div>
+          <div className='assignment-detail-team'>
+            {t['Team']}
+            <div className='assignment-detail-team-list'>
+              {[...admins, ...members].map((user: UserProfile) => (
+                <div className='assignment-detail-team-avatar' key={user.id}>
+                  <Avatar
+                    id={user.id}
+                    name={
+                      user.nickname
+                        ? user.nickname
+                        : [user.first_name, user.last_name]
+                            .filter((str) => str)
+                            .join(' ')
+                            .trim()
+                    }
+                    avatar={user.avatar_url}
+                  />
+                </div>
+              ))}
             </div>
-          )}
+          </div>
         </div>
 
         <div className='assignment-detail-document-grid'>