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`

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>

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) {

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>

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,
     },

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

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 = {

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());