Merge pull request #17621 from ahmedhamidawan/increase_content_item_c…

…lickable_area

[24.0] Increase ContentItem clickable area

client/src/components/History/Content/ContentItem.vue

@@ -72,7 +72,6 @@ const emit = defineEmits<{
     (e: "tag-change", item: any, newTags: Array<string>): void;
     (e: "tag-click", tag: string): void;
     (e: "toggleHighlights", item: any): void;
-    (e: "update:item-focused"): void;
 }>();
 
 const entryPointStore = useEntryPointStore();
@@ -185,6 +184,7 @@ function onKeyDown(event: KeyboardEvent) {
     }
 
     if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
         onClick(event);
     } else if ((event.key === "ArrowUp" || event.key === "ArrowDown") && event.shiftKey) {
         event.preventDefault();
@@ -207,7 +207,8 @@ function onKeyDown(event: KeyboardEvent) {
     }
 }
 
-function onClick(event: KeyboardEvent) {
+function onClick(e: Event) {
+    const event = e as KeyboardEvent;
     if (event && event.shiftKey && isSelectKey(event)) {
         emit("selected-to", false);
     } else if (event && isSelectKey(event)) {
@@ -286,6 +287,12 @@ function onTagClick(tag: string) {
 function toggleHighlights() {
     emit("toggleHighlights", props.item);
 }
+
+function unexpandedClick(event: Event) {
+    if (!props.expandDataset) {
+        onClick(event);
+    }
+}
 </script>
 
 <template>
@@ -296,8 +303,7 @@ function toggleHighlights() {
         :data-state="dataState"
         tabindex="0"
         role="button"
-        @keydown="onKeyDown"
-        @focus="emit('update:item-focused')">
+        @keydown="onKeyDown">
         <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
         <div class="p-1 cursor-pointer" draggable @dragstart="onDragStart" @dragend="onDragEnd" @click.stop="onClick">
             <div class="d-flex justify-content-between">
@@ -366,22 +372,26 @@ function toggleHighlights() {
                     @unhide="emit('unhide')" />
             </div>
         </div>
-        <CollectionDescription
-            v-if="!isDataset"
-            class="px-2 pb-2"
-            :job-state-summary="jobState"
-            :collection-type="item.collection_type"
-            :element-count="item.element_count"
-            :elements-datatypes="item.elements_datatypes" />
-        <StatelessTags
-            v-if="!tagsDisabled || hasTags"
-            class="px-2 pb-2"
-            :value="tags"
-            :disabled="tagsDisabled"
-            :clickable="filterable"
-            :use-toggle-link="false"
-            @input="onTags"
-            @tag-click="onTagClick" />
+        <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+        <span @click.stop="unexpandedClick">
+            <CollectionDescription
+                v-if="!isDataset"
+                class="px-2 pb-2 cursor-pointer"
+                :job-state-summary="jobState"
+                :collection-type="item.collection_type"
+                :element-count="item.element_count"
+                :elements-datatypes="item.elements_datatypes" />
+            <StatelessTags
+                v-if="!tagsDisabled || hasTags"
+                class="px-2 pb-2"
+                :class="{ 'cursor-pointer': !expandDataset }"
+                :value="tags"
+                :disabled="tagsDisabled"
+                :clickable="filterable"
+                :use-toggle-link="false"
+                @input="onTags"
+                @tag-click="onTagClick" />
+        </span>
         <!-- collections are not expandable, so we only need the DatasetDetails component here -->
         <BCollapse :visible="expandDataset" class="px-2 pb-2">
             <DatasetDetails

client/src/components/History/CurrentHistory/HistoryPanel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, onMounted, ref, set as VueSet, unref, watch } from "vue";
+import { computed, onMounted, type Ref, ref, set as VueSet, unref, watch } from "vue";
 
 import type { HistorySummary } from "@/api";
 import { copyDataset } from "@/api/datasets";
@@ -10,6 +10,7 @@ import SelectedItems from "@/components/History/Content/SelectedItems";
 import { HistoryFilters } from "@/components/History/HistoryFilters";
 import { deleteContent, updateContentFields } from "@/components/History/model/queries";
 import { Toast } from "@/composables/toast";
+import { useActiveElement } from "@/composables/useActiveElement";
 import { startWatchingHistory } from "@/store/historyStore/model/watchHistory";
 import { useEventStore } from "@/stores/eventStore";
 import { type HistoryItem, useHistoryItemsStore } from "@/stores/historyItemsStore";
@@ -54,6 +55,8 @@ interface Props {
     isMultiViewItem?: boolean;
 }
 
+type ContentItemRef = Record<string, Ref<InstanceType<typeof ContentItem> | null>>;
+
 const props = withDefaults(defineProps<Props>(), {
     listOffset: 0,
     filter: "",
@@ -76,14 +79,13 @@ const operationError = ref(null);
 const querySelectionBreak = ref(false);
 const dragTarget = ref<EventTarget | null>(null);
 const contentItemRefs = computed(() => {
-    return historyItems.value.reduce((acc: any, item) => {
-        // TODO: type `any` properly
-        acc[`item-${item.hid}`] = ref(null);
+    return historyItems.value.reduce((acc: ContentItemRef, item) => {
+        acc[`item-${item.id}`] = ref(null);
         return acc;
     }, {});
 });
-const currItemFocused = ref<HistoryItem | null>(null);
-const lastItemFocused = ref<HistoryItem | null>(null);
+const currItemFocused = useActiveElement();
+const lastItemId = ref<string | null>(null);
 
 const { currentFilterText, currentHistoryId } = storeToRefs(useHistoryStore());
 const { lastCheckedTime, totalMatchesCount, isWatching } = storeToRefs(useHistoryItemsStore());
@@ -143,6 +145,10 @@ const storeFilterText = computed(() => {
     return currentFilterText.value || "";
 });
 
+const lastItemFocused = computed(() => {
+    return lastItemId.value ? historyItems.value.find((item) => lastItemId.value === `dataset-${item.id}`) : null;
+});
+
 watch(offsetQueryParam, () => loadHistoryItems());
 
 watch(
@@ -151,8 +157,7 @@ watch(
         invisibleHistoryItems.value = {};
         offsetQueryParam.value = 0;
         loadHistoryItems();
-        currItemFocused.value = null;
-        lastItemFocused.value = null;
+        lastItemId.value = null;
     }
 );
 
@@ -180,8 +185,7 @@ watch(
     (newValue, currentValue) => {
         if (newValue !== currentValue) {
             operationRunning.value = null;
-            currItemFocused.value = null;
-            lastItemFocused.value = null;
+            lastItemId.value = null;
         }
     }
 );
@@ -202,8 +206,10 @@ watch(historyItems, (newHistoryItems) => {
 watch(
     () => currItemFocused.value,
     (newItem, oldItem) => {
-        if (newItem) {
-            lastItemFocused.value = oldItem;
+        // if user clicked elsewhere, set lastItemId to the last focused item
+        // (if it was indeed a history .content-item)
+        if (newItem && oldItem?.classList?.contains("content-item") && oldItem?.getAttribute("data-hid")) {
+            lastItemId.value = oldItem?.id || null;
         }
     }
 );
@@ -405,6 +411,12 @@ onMounted(async () => {
         filterText.value = storeFilterText.value;
     }
     await loadHistoryItems();
+    // if there is a listOffset, we are coming from a collection view, so focus on item at that offset
+    if (props.listOffset) {
+        const itemId = historyItems.value[props.listOffset]?.id;
+        const itemElement = contentItemRefs.value[`item-${itemId}`]?.value?.$el as HTMLElement;
+        itemElement?.focus();
+    }
 });
 
 function arrowNavigate(item: HistoryItem, eventKey: string) {
@@ -415,7 +427,8 @@ function arrowNavigate(item: HistoryItem, eventKey: string) {
         nextItem = historyItems.value[historyItems.value.indexOf(item) - 1];
     }
     if (nextItem) {
-        contentItemRefs.value[`item-${nextItem.hid}`].value.$el.focus();
+        const itemElement = contentItemRefs.value[`item-${nextItem.id}`]?.value?.$el as HTMLElement;
+        itemElement?.focus();
     }
     return nextItem;
 }
@@ -573,7 +586,7 @@ function setItemDragstart(
                             <template v-slot:item="{ item, currentOffset }">
                                 <ContentItem
                                     :id="item.hid"
-                                    :ref="contentItemRefs[`item-${item.hid}`]"
+                                    :ref="contentItemRefs[`item-${item.id}`]"
                                     is-history-item
                                     :item="item"
                                     :name="item.name"
@@ -605,7 +618,6 @@ function setItemDragstart(
                                     @tag-change="onTagChange"
                                     @toggleHighlights="updateFilterValue('related', item.hid)"
                                     @update:expand-dataset="setExpanded(item, $event)"
-                                    @update:item-focused="currItemFocused = item"
                                     @update:selected="setSelected(item, $event)"
                                     @view-collection="$emit('view-collection', item, currentOffset)"
                                     @delete="onDelete"