Add history items display state for empty collections/lists

ahmedhamidawan · Nov 8, 2023 · 05ceeba · 05ceeba
1 parent 7404ed0
commit 05ceeba
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = {