From 05ceebac32df7edba5722f953daf6ca60dc19b43 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 8 Nov 2023 14:40:18 -0600
Subject: [PATCH] Add history items display state for empty collections/lists

---
 client/src/components/History/Content/ContentItem.vue |  8 +++++++-
 .../components/History/Content/model/StatesInfo.vue   |  5 ++++-
 .../components/History/Content/model/stateTypes.d.ts  |  1 +
 client/src/components/History/Content/model/states.ts | 11 ++++++++++-
 .../History/CurrentCollection/CollectionPanel.vue     |  4 ++++
 client/src/components/History/HistoryFilters.js       |  2 +-
 6 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 7edbed222fc2..149a5332902c 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -43,7 +43,11 @@
                         <FontAwesomeIcon class="text-info" icon="arrow-circle-down" />
                     </b-button>
                     <span v-if="hasStateIcon" class="state-icon">
-                        <icon fixed-width :icon="contentState.icon" :spin="contentState.spin" />
+                        <icon
+                            fixed-width
+                            :icon="contentState.icon"
+                            :spin="contentState.spin"
+                            :title="contentState.text" />
                     </span>
                     <span class="id hid">{{ id }}:</span>
                     <span class="content-title name font-weight-bold">{{ name }}</span>
@@ -169,6 +173,8 @@ export default {
         state() {
             if (this.isPlaceholder) {
                 return "placeholder";
+            } else if (this.item.element_count !== undefined && this.item.element_count === 0) {
+                return "emptyCollection";
             }
             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 43d3a718af35..c2b150f6f25e 100644
--- a/client/src/components/History/Content/model/StatesInfo.vue
+++ b/client/src/components/History/Content/model/StatesInfo.vue
@@ -34,9 +34,12 @@ function onFilter(value: string) {
         <dl v-for="(state, key, index) in states" :key="index">
             <div :class="['alert', 'content-item', 'alert-' + state.status]" :data-state="key">
                 <dt>
-                    <a class="text-decoration-none" href="javascript:void(0)" @click="onFilter(key)"
+                    <a v-if="!state.nonDb" class="text-decoration-none" href="javascript:void(0)" @click="onFilter(key)"
                         ><code>{{ key }}</code></a
                     >
+                    <span v-else
+                        ><code>{{ key }}</code></span
+                    >
                     <icon v-if="state.icon" :icon="state.icon" />
                 </dt>
                 <dd>{{ helpText[key] || state.text }}</dd>
diff --git a/client/src/components/History/Content/model/stateTypes.d.ts b/client/src/components/History/Content/model/stateTypes.d.ts
index 3ef3a45c4456..368690474bd9 100644
--- a/client/src/components/History/Content/model/stateTypes.d.ts
+++ b/client/src/components/History/Content/model/stateTypes.d.ts
@@ -5,6 +5,7 @@ export type State = {
     text?: string;
     icon?: string;
     spin?: boolean;
+    nonDb?: boolean;
 };
 
 export type States = {
diff --git a/client/src/components/History/Content/model/states.ts b/client/src/components/History/Content/model/states.ts
index 2994100c6c0b..9855de688587 100644
--- a/client/src/components/History/Content/model/states.ts
+++ b/client/src/components/History/Content/model/states.ts
@@ -2,13 +2,14 @@ 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";
+type State = DatasetState | "failed" | "placeholder" | "emptyCollection";
 
 interface StateRepresentation {
     status: "success" | "warning" | "info" | "danger" | "secondary";
     text?: string;
     icon?: string;
     spin?: boolean;
+    nonDb?: boolean;
 }
 
 type StateMap = {
@@ -103,6 +104,14 @@ export const STATES: StateMap = {
         text: "This dataset is being fetched.",
         icon: "spinner",
         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.",
+        icon: "exclamation-triangle",
+        nonDb: true,
     },
 } as const satisfies StateMap;
 
diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index 7269918545a7..f7502afa0b41 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -115,7 +115,11 @@ 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>
                     <ListingLayout
+                        v-else
                         data-key="element_index"
                         :items="collectionElements"
                         :loading="loading"
diff --git a/client/src/components/History/HistoryFilters.js b/client/src/components/History/HistoryFilters.js
index 2cca93b7337d..28cc0ad553b4 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"];
+const excludeStates = ["empty", "failed", "upload", "placeholder", "emptyCollection"];
 const states = Object.keys(STATES).filter((state) => !excludeStates.includes(state));
 
 const validFilters = {