From 6c1f409ac08864c45199bc1a85051465cc7cb645 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 9 Nov 2023 13:25:20 -0600
Subject: [PATCH] change `emptyCollection` item state to
 `failed_populated_state`

Instead of creating a new, non-ok visual state for empty collections,
create it for collections that have `populated_state: failed`.
Also, show the `populated_state_message` in the `CollectionPanel`
---
 .../Content/Collection/CollectionDescription.vue      |  2 +-
 client/src/components/History/Content/ContentItem.vue |  7 +++++--
 .../components/History/Content/model/StatesInfo.vue   |  7 ++++++-
 client/src/components/History/Content/model/states.ts | 10 +++++-----
 .../History/CurrentCollection/CollectionPanel.vue     | 11 +++++++++--
 client/src/components/History/HistoryFilters.js       |  2 +-
 .../src/components/History/HistoryPublishedList.vue   |  2 +-
 7 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/client/src/components/History/Content/Collection/CollectionDescription.vue b/client/src/components/History/Content/Collection/CollectionDescription.vue
index 8c27d3e0640a..b8b68d3d68c8 100644
--- a/client/src/components/History/Content/Collection/CollectionDescription.vue
+++ b/client/src/components/History/Content/Collection/CollectionDescription.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <span class="description mt-1 mb-1">
-            a {{ collectionLabel }} with {{ elementCount }}<b>{{ homogeneousDatatype }}</b> {{ pluralizedItem }}
+            a {{ collectionLabel }} with {{ elementCount || 0 }}<b>{{ homogeneousDatatype }}</b> {{ pluralizedItem }}
         </span>
         <CollectionProgress v-if="jobStateSummary.size != 0" :summary="jobStateSummary" />
     </div>
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 149a5332902c..dadf1a0f9659 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -173,8 +173,11 @@ export default {
         state() {
             if (this.isPlaceholder) {
                 return "placeholder";
-            } else if (this.item.element_count !== undefined && this.item.element_count === 0) {
-                return "emptyCollection";
+            } else if (
+                this.item.history_content_type === "dataset_collection" &&
+                this.item.populated_state === "failed"
+            ) {
+                return "failed_populated_state";
             }
             if (this.item.job_state_summary) {
                 for (const state of HIERARCHICAL_COLLECTION_JOB_STATES) {
diff --git a/client/src/components/History/Content/model/StatesInfo.vue b/client/src/components/History/Content/model/StatesInfo.vue
index c2b150f6f25e..f559e4d772c7 100644
--- a/client/src/components/History/Content/model/StatesInfo.vue
+++ b/client/src/components/History/Content/model/StatesInfo.vue
@@ -30,7 +30,12 @@ function onFilter(value: string) {
 <template>
     <div>
         <p>Here are all available item states in Galaxy:</p>
-        <p><i>(Note that the colors for each state correspond to content item state colors in the history)</i></p>
+        <p>
+            <i>
+                (Note that the colors for each state correspond to content item state colors in the history, and if it
+                exists, hovering over the icon on a history item will display the state message.)
+            </i>
+        </p>
         <dl v-for="(state, key, index) in states" :key="index">
             <div :class="['alert', 'content-item', 'alert-' + state.status]" :data-state="key">
                 <dt>
diff --git a/client/src/components/History/Content/model/states.ts b/client/src/components/History/Content/model/states.ts
index 9855de688587..0cb0d5e5baf9 100644
--- a/client/src/components/History/Content/model/states.ts
+++ b/client/src/components/History/Content/model/states.ts
@@ -2,7 +2,7 @@ import type { components } from "@/api/schema";
 
 type DatasetState = components["schemas"]["DatasetState"];
 // The 'failed' state is for the collection job state summary, not a dataset state.
-type State = DatasetState | "failed" | "placeholder" | "emptyCollection";
+type State = DatasetState | "failed" | "placeholder" | "failed_populated_state";
 
 interface StateRepresentation {
     status: "success" | "warning" | "info" | "danger" | "secondary";
@@ -106,10 +106,10 @@ export const STATES: StateMap = {
         spin: true,
         nonDb: true,
     },
-    /** the collection is empty. This state is only visual and transitional, it does not exist in the database. */
-    emptyCollection: {
-        status: "secondary",
-        text: "This is an empty list/collection.",
+    /** the `populated_state: failed`. This state is only visual and transitional, it does not exist in the database. */
+    failed_populated_state: {
+        status: "danger",
+        text: "Failed to populate the list/collection.",
         icon: "exclamation-triangle",
         nonDb: true,
     },
diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index f7502afa0b41..8a7c9ac63a10 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -46,6 +46,9 @@ const dsc = computed(() => {
 const collectionElements = computed(() => collectionElementsStore.getCollectionElements(dsc.value, offset.value));
 const loading = computed(() => collectionElementsStore.isLoadingCollectionElements(dsc.value));
 const jobState = computed(() => ("job_state_summary" in dsc.value ? dsc.value.job_state_summary : undefined));
+const populatedStateMsg = computed(() =>
+    "populated_state_message" in dsc.value ? dsc.value.populated_state_message : undefined
+);
 const rootCollection = computed(() => {
     if (isHDCA(props.selectedCollections[0])) {
         return props.selectedCollections[0];
@@ -115,8 +118,12 @@ watch(
             </section>
             <section class="position-relative flex-grow-1 scroller">
                 <div>
-                    <b-alert v-if="collectionElements.length === 0" class="m-2" variant="info" show>
-                        This is an empty list/collection.
+                    <b-alert
+                        v-if="collectionElements.length === 0"
+                        class="m-2"
+                        :variant="populatedStateMsg ? 'danger' : 'info'"
+                        show>
+                        {{ populatedStateMsg || "This is an empty list/collection." }}
                     </b-alert>
                     <ListingLayout
                         v-else
diff --git a/client/src/components/History/HistoryFilters.js b/client/src/components/History/HistoryFilters.js
index 28cc0ad553b4..f48913603175 100644
--- a/client/src/components/History/HistoryFilters.js
+++ b/client/src/components/History/HistoryFilters.js
@@ -2,7 +2,7 @@ import { STATES } from "components/History/Content/model/states";
 import StatesInfo from "components/History/Content/model/StatesInfo";
 import Filtering, { compare, contains, equals, expandNameTag, toBool, toDate } from "utils/filtering";
 
-const excludeStates = ["empty", "failed", "upload", "placeholder", "emptyCollection"];
+const excludeStates = ["empty", "failed", "upload", "placeholder", "failed_populated_state"];
 const states = Object.keys(STATES).filter((state) => !excludeStates.includes(state));
 
 const validFilters = {
diff --git a/client/src/components/History/HistoryPublishedList.vue b/client/src/components/History/HistoryPublishedList.vue
index 5c819f125849..723cbc4e2e83 100644
--- a/client/src/components/History/HistoryPublishedList.vue
+++ b/client/src/components/History/HistoryPublishedList.vue
@@ -179,7 +179,7 @@ async function load() {
 
 onMounted(async () => {
     if (props.fUsername) {
-        filterText.value = filters.getFilterText({ "user_eq:": props.fUsername });
+        filterText.value = filters.getFilterText({ user_eq: props.fUsername });
     }
     await load();
     useInfiniteScroll(scrollableDiv.value, () => load());