Merge pull request #416 from AVAnnotate/develop

v1.2.2 updates

Author: ajolipa

src/apps/AnnotationImport/AnnotationImport.tsx

@@ -95,16 +95,21 @@ export const AnnotationImportForm: React.FC<Props> = (props) => {
     () =>
       Object.keys(props.project.annotations)
         .filter(
-          (uuid) => props.project.annotations[uuid].event_id === props.eventUuid
+          (uuid) =>
+            props.project.annotations[uuid].event_id === props.eventUuid &&
+            props.project.events[props.project?.annotations[uuid]?.event_id]
+              ?.audiovisual_files[props.project?.annotations[uuid]?.source_id] //filter out annotations from deleted files
         )
-        .map((uuid) => ({
-          label: `${
-            props.project.events[props.project.annotations[uuid].event_id]
-              .audiovisual_files[props.project.annotations[uuid].source_id]
-              .label
-          } - ${props.project.annotations[uuid].set}`,
-          value: uuid,
-        })),
+        .map((uuid) => {
+          return {
+            label: `${
+              props.project.events[props.project.annotations[uuid].event_id]
+                .audiovisual_files[props.project.annotations[uuid].source_id]
+                ?.label
+            } - ${props.project.annotations[uuid].set}`,
+            value: uuid,
+          };
+        }),
     []
   );
 

src/apps/EventDetail/AnnotationSearchBox.tsx

@@ -25,6 +25,7 @@ export const AnnotationSearchBox: React.FC<Props> = (props) => {
           );
         }}
         type='text'
+        aria-label='Search Annotations'
       />
       <MagnifyingGlassIcon />
     </div>

src/apps/EventDetail/AnnotationTable.tsx

@@ -108,6 +108,7 @@ interface AnnotationTableProps {
   hideHeader?: boolean;
   project: ProjectData;
   projectSlug: string;
+  search?: boolean;
   setDeleteAnnoUuid: (uuid: string) => void;
   setEditAnnoUuid: (uuid: string) => void;
   setAnnoPosition: (pos: number) => void;
@@ -145,10 +146,16 @@ const AnnotationTable: React.FC<AnnotationTableProps> = (props) => {
     return () => resizeObserver.disconnect();
   }, []);
 
+  const emptyNoticeText = useMemo(() => {
+    return props.search
+      ? t['No search results found.']
+      : t['No annotations have been added.'];
+  }, [props.search]);
+
   const emptyNotice = useMemo(
     () => (
       <Table.Cell colSpan={4} className='empty-annos-note'>
-        <p>{t['No annotations have been added.']}</p>
+        <p>{emptyNoticeText}</p>
         <div className='empty-annos-buttons'>
           <Button
             className='primary'
@@ -167,7 +174,7 @@ const AnnotationTable: React.FC<AnnotationTableProps> = (props) => {
         </div>
       </Table.Cell>
     ),
-    []
+    [emptyNoticeText]
   );
 
   const containerRef = useRef(null);

src/apps/EventDetail/AvFile.tsx

@@ -20,6 +20,7 @@ import AnnotationTable from './AnnotationTable.tsx';
 import { formatTimestamp } from '@lib/events/index.ts';
 import { SetSelect } from './SetSelect.tsx';
 import SetManagementDropdown from './SetManagementDropdown.tsx';
+import { navigate } from 'astro:transitions/client';
 
 interface Props {
   avFile: AudiovisualFile;
@@ -101,7 +102,7 @@ const onSubmitCreateSet = async (
   });
 
   if (res.ok) {
-    window.location.reload();
+    navigate(window.location.href, { history: 'replace' });
   }
 };
 
@@ -319,6 +320,7 @@ const AvFile: React.FC<Props> = (props) => {
           setShowAnnoCreateModal={setShowAnnoCreateModal}
           tagPosition={props.fileType === 'Video' ? 'below' : 'column'}
           hideHeader={props.fileType === 'Video'}
+          search={!!search}
         />
       </div>
       {props.fileType === 'Audio' && props.event.citation && (

src/apps/EventDetail/SetManagementDropdown.tsx

@@ -19,6 +19,7 @@ const SetManagementDropdown: React.FC<Props> = (props) => {
         <Button
           className='unstyled meatball-menu-icon annotation-tab-meatball-button'
           type='button'
+          aria-label='Manage Annotation Sets'
         >
           <DotsThree size={16} color='black' />
         </Button>

src/apps/EventDetail/index.tsx

@@ -99,7 +99,11 @@ export const EventDetail: React.FC<EventDetailProps> = (props) => {
             <h1 className='event-title'>{props.event.label}</h1>
             <Dropdown.Root modal={false}>
               <Dropdown.Trigger asChild>
-                <Button className='meatball-menu-button unstyled' type='button'>
+                <Button
+                  className='meatball-menu-button unstyled'
+                  type='button'
+                  aria-label='Event Options'
+                >
                   <DotsThree size={30} color='white' />
                 </Button>
               </Dropdown.Trigger>

src/apps/Project/Project.tsx

@@ -19,6 +19,7 @@ import { Avatar } from '@components/Avatar/Avatar.tsx';
 import { DataManager } from '@components/DataManager/DataManager.tsx';
 import { SiteBuilder } from '@components/SiteBuilder/SiteBuilder.tsx';
 import { BuildStatus } from '@components/BuildStatus/BuildStatus.tsx';
+import { navigate } from 'astro:transitions/client';
 
 interface Props {
   i18n: Translations;
@@ -64,7 +65,9 @@ export const Project: React.FC<Props> = (props) => {
           annotations={props.project.annotations}
           eventUuid={deleteUuid}
           i18n={props.i18n}
-          onAfterSave={() => window.location.reload()}
+          onAfterSave={() =>
+            navigate(window.location.href, { history: 'replace' })
+          }
           onCancel={() => setDeleteUuid(null)}
           projectSlug={props.projectSlug}
         />
@@ -118,7 +121,10 @@ export const Project: React.FC<Props> = (props) => {
             </div>
             <DropdownMenu.Root>
               <DropdownMenu.Trigger asChild>
-                <Button className='settings-button'>
+                <Button
+                  className='settings-button'
+                  aria-label='Project Options'
+                >
                   <ThreeDots />
                 </Button>
               </DropdownMenu.Trigger>

src/apps/Tags/TagGroupCard.tsx

@@ -151,18 +151,28 @@ export const TagGroupCard = (props: TagGroupCardProps) => {
             </h3>
             <MeatballMenu
               row={props}
-              buttons={[
-                {
-                  label: t['Edit'],
-                  icon: Pencil,
-                  onClick: handleUpdateGroup,
-                },
-                {
-                  label: t['Delete'],
-                  icon: Trash,
-                  onClick: handleDeleteGroup,
-                },
-              ]}
+              buttons={
+                group && group === '_uncategorized_'
+                  ? [
+                      {
+                        label: t['Edit'],
+                        icon: Pencil,
+                        onClick: handleUpdateGroup,
+                      },
+                    ]
+                  : [
+                      {
+                        label: t['Edit'],
+                        icon: Pencil,
+                        onClick: handleUpdateGroup,
+                      },
+                      {
+                        label: t['Delete'],
+                        icon: Trash,
+                        onClick: handleDeleteGroup,
+                      },
+                    ]
+              }
             />
           </div>
           {list.slice(0, expanded ? 9999999 : 4).map((t) => (

src/components/DataManager/DataManager.tsx

@@ -4,6 +4,7 @@ import * as Tabs from '@radix-ui/react-tabs';
 import { Tags } from '@apps/Tags/Tags.tsx';
 import { useState } from 'react';
 import { DeleteEventModal } from '@components/DeleteEventModal/DeleteEventModal.tsx';
+import { navigate } from 'astro:transitions/client';
 
 import './DataManager.css';
 
@@ -54,7 +55,9 @@ export const DataManager = (props: DataManagerProps) => {
           annotations={props.project.annotations}
           eventUuid={deleteUuid}
           i18n={props.i18n}
-          onAfterSave={() => window.location.reload()}
+          onAfterSave={() =>
+            navigate(window.location.href, { history: 'replace' })
+          }
           onCancel={() => setDeleteUuid(null)}
           projectSlug={props.projectSlug}
         />

src/components/DragTable/DragTable.tsx

@@ -83,7 +83,11 @@ export const DragTable: React.FC<Props> = (props) => {
             width='100%'
             style={{ gridTemplateColumns: gridSettings }}
           >
-            <GripVertical width={38} />
+            <GripVertical
+              width={38}
+              aria-label='grip button to reorder a v files'
+              tabIndex={0}
+            />
             {row.component}
           </Box>
         );