refactor changes to use explicit bootstrap components etc

Also, use imported icons instead of string icons for `FontAwesomeIcon`s
ahmedhamidawan · Feb 20, 2024 · 373c189 · 373c189
1 parent 59f43f6
commit 373c189
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 103 deletions.
diff --git a/client/src/components/History/CurrentHistory/HistoryCounter.vue b/client/src/components/History/CurrentHistory/HistoryCounter.vue
@@ -28,12 +28,14 @@ const props = withDefaults(
         lastChecked: Date;
         filterText?: string;
         showControls?: boolean;
+        hideReload?: boolean;
     }>(),
     {
         isWatching: false,
         lastChecked: () => new Date(),
         filterText: "",
         showControls: false,
+        hideReload: false,
     }
 );
 
@@ -191,6 +193,7 @@ onMounted(() => {
                 </BButton>
 
                 <BButton
+                    v-if="!hideReload"
                     v-b-tooltip.hover
                     :title="reloadButtonTitle"
                     :variant="reloadButtonVariant"
@@ -216,3 +219,9 @@ onMounted(() => {
         </BButtonGroup>
     </div>
 </template>
+
+<style lang="scss" scoped>
+.btn {
+    white-space: nowrap;
+}
+</style>
diff --git a/client/src/components/History/CurrentHistory/HistoryDetails.vue b/client/src/components/History/CurrentHistory/HistoryDetails.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { BBadge } from "bootstrap-vue";
+
 import type { HistorySummary } from "@/api";
 import { useHistoryStore } from "@/stores/historyStore";
 
@@ -47,10 +49,10 @@ function onSave(newDetails: HistorySummary) {
                 no-expand />
         </template>
         <template v-if="summarized" v-slot:update-time>
-            <b-badge v-b-tooltip pill>
+            <BBadge v-b-tooltip pill>
                 <span v-localize>last edited </span>
                 <UtcDate v-if="history.update_time" :date="history.update_time" mode="elapsed" />
-            </b-badge>
+            </BBadge>
         </template>
     </DetailsLayout>
 </template>
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { GetComponentPropTypes } from "types/utilityTypes";
-import { computed, onMounted, PropType, ref, set as VueSet, unref, watch } from "vue";
+import { computed, onMounted, ref, set as VueSet, unref, watch } from "vue";
 
 import { copyDataset } from "@/api/datasets";
 import ExpandedItems from "@/components/History/Content/ExpandedItems";
@@ -41,35 +42,23 @@ interface BackendFilterError {
     ValueError?: string;
 }
 
-const props = defineProps({
-    listOffset: {
-        type: Number,
-        default: 0,
-    },
-    history: {
-        type: Object as PropType<Record<string, any> & GetComponentPropTypes<typeof HistoryCounter>["history"]>,
-        required: true,
-    },
-    filter: {
-        type: String,
-        default: "",
-    },
-    canEditHistory: {
-        type: Boolean,
-        default: true,
-    },
-    shouldShowControls: {
-        type: Boolean,
-        default: true,
-    },
-    filterable: {
-        type: Boolean,
-        default: false,
-    },
-    isMultiViewItem: {
-        type: Boolean,
-        default: false,
-    },
+interface Props {
+    listOffset?: number;
+    history: Record<string, any> & GetComponentPropTypes<typeof HistoryCounter>["history"];
+    filter?: string;
+    canEditHistory?: boolean;
+    shouldShowControls?: boolean;
+    filterable?: boolean;
+    isMultiViewItem?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    listOffset: 0,
+    filter: "",
+    canEditHistory: true,
+    shouldShowControls: true,
+    filterable: false,
+    isMultiViewItem: false,
 });
 
 const filterClass = HistoryFilters;
@@ -80,7 +69,7 @@ const offsetQueryParam = ref(0);
 const searchError = ref<BackendFilterError | undefined>(undefined);
 const showAdvanced = ref(false);
 const showDropZone = ref(false);
-const operationRunning = ref(null);
+const operationRunning = ref<string | null>(null);
 const operationError = ref(null);
 const querySelectionBreak = ref(false);
 const dragTarget = ref<EventTarget | null>(null);
@@ -92,7 +81,7 @@ const historyStore = useHistoryStore();
 const historyItemsStore = useHistoryItemsStore();
 
 const historyUpdateTime = computed(() => {
-    return props.history.update_time as Date;
+    return props.history.update_time;
 });
 
 const queryKey = computed(() => {
@@ -412,6 +401,7 @@ onMounted(async () => {
                         :last-checked="lastCheckedTime"
                         :show-controls="shouldShowControls"
                         :filter-text.sync="filterText"
+                        :hide-reload="isMultiViewItem"
                         @reloadContents="reloadContents" />
 
                     <HistoryOperations
@@ -457,25 +447,23 @@ onMounted(async () => {
                     <HistoryDropZone v-if="showDropZone" />
                     <div>
                         <div v-if="isLoading && historyItems && historyItems.length === 0">
-                            <b-alert class="m-2" variant="info" show>
+                            <BAlert class="m-2" variant="info" show>
                                 <LoadingSpan message="Loading History" />
-                            </b-alert>
+                            </BAlert>
                         </div>
-                        <b-alert v-else-if="isProcessing" class="m-2" variant="info" show>
+                        <BAlert v-else-if="isProcessing" class="m-2" variant="info" show>
                             <LoadingSpan message="Processing operation" />
-                        </b-alert>
+                        </BAlert>
                         <div v-else-if="historyItems.length === 0">
                             <HistoryEmpty v-if="queryDefault" :writable="canEditHistory" class="m-2" />
 
-                            <b-alert v-else-if="formattedSearchError" class="m-2" variant="danger" show>
+                            <BAlert v-else-if="formattedSearchError" class="m-2" variant="danger" show>
                                 Error in filter:
                                 <a href="javascript:void(0)" @click="showAdvanced = true">
                                     {{ formattedSearchError.filter }}'{{ formattedSearchError.value }}'
                                 </a>
-                            </b-alert>
-                            <b-alert v-else class="m-2" variant="info" show>
-                                No data found for selected filter.
-                            </b-alert>
+                            </BAlert>
+                            <BAlert v-else class="m-2" variant="info" show> No data found for selected filter. </BAlert>
                         </div>
                         <ListingLayout
                             v-else

diff --git a/client/src/components/History/HistoryScrollList.vue b/client/src/components/History/HistoryScrollList.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faListAlt } from "@fortawesome/free-regular-svg-icons";
-import { faArrowDown, faCheckSquare, faColumns, faSignInAlt, faSquare } from "@fortawesome/free-solid-svg-icons";
+import { faCheckSquare, faListAlt, faSquare } from "@fortawesome/free-regular-svg-icons";
+import { faArrowDown, faColumns, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useInfiniteScroll } from "@vueuse/core";
-import { BBadge, BButton, BButtonGroup, BListGroup, BListGroupItem } from "bootstrap-vue";
+import { BAlert, BBadge, BButton, BButtonGroup, BListGroup, BListGroupItem, BOverlay } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, onMounted, onUnmounted, type PropType, type Ref, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import type { HistoryDetailed, HistorySummary } from "@/api";
@@ -27,14 +27,24 @@ import UtcDate from "@/components/UtcDate.vue";
 type AdditionalOptions = "set-current" | "multi" | "center";
 type PinnedHistory = { id: string };
 
-const props = defineProps({
-    multiple: { type: Boolean, default: false },
-    selectedHistories: { type: Array as PropType<PinnedHistory[]>, default: () => [] },
-    additionalOptions: { type: Array as PropType<AdditionalOptions[]>, default: () => [] },
-    showModal: { type: Boolean, default: false },
-    inModal: { type: Boolean, default: false },
-    filter: { type: String, default: "" },
-    loading: { type: Boolean, default: false },
+interface Props {
+    multiple?: boolean;
+    selectedHistories?: PinnedHistory[];
+    additionalOptions?: AdditionalOptions[];
+    showModal?: boolean;
+    inModal?: boolean;
+    filter: string;
+    loading: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    multiple: false,
+    selectedHistories: () => [],
+    additionalOptions: () => [],
+    showModal: false,
+    inModal: false,
+    filter: "",
+    loading: false,
 });
 
 const emit = defineEmits<{
@@ -48,7 +58,7 @@ library.add(faColumns, faSignInAlt, faListAlt, faArrowDown, faCheckSquare, faSqu
 
 const busy = ref(false);
 const showAdvanced = ref(false);
-const scrollableDiv: Ref<HTMLElement | null> = ref(null);
+const scrollableDiv = ref<HTMLElement | null>(null);
 
 const historyStore = useHistoryStore();
 const { currentHistoryId, histories, totalHistoryCount, pinnedHistories } = storeToRefs(historyStore);
@@ -109,7 +119,7 @@ watch(
 );
 
 /** `historyStore` histories for current user */
-const historiesProxy: Ref<HistorySummary[]> = ref([]);
+const historiesProxy = ref<HistorySummary[]>([]);
 watch(
     () => histories.value as HistoryDetailed[],
     (h: HistoryDetailed[]) => {
@@ -122,7 +132,7 @@ watch(
     }
 );
 
-const filtered: Ref<HistorySummary[]> = computed(() => {
+const filtered = computed<HistorySummary[]>(() => {
     let filteredHistories: HistorySummary[] = [];
     if (!validFilter.value) {
         filteredHistories = historiesProxy.value;
@@ -215,7 +225,7 @@ async function loadMore(noScroll = false) {
             <BBadge v-if="props.filter && !validFilter" class="alert-danger w-100 mb-2">
                 Search string too short!
             </BBadge>
-            <b-alert v-else-if="!busy && hasNoResults" class="mb-2" variant="danger" show>No histories found.</b-alert>
+            <BAlert v-else-if="!busy && hasNoResults" class="mb-2" variant="danger" show>No histories found.</BAlert>
         </div>
 
         <div
@@ -303,7 +313,7 @@ async function loadMore(noScroll = false) {
                                         variant="link"
                                         class="p-0 px-1"
                                         @click.stop="() => setCurrentHistory(history)">
-                                        <FontAwesomeIcon icon="fa-sign-in-alt" />
+                                        <FontAwesomeIcon :icon="faSignInAlt" />
                                     </BButton>
 
                                     <BButton
@@ -313,7 +323,7 @@ async function loadMore(noScroll = false) {
                                         variant="link"
                                         class="p-0 px-1"
                                         @click.stop="() => openInMulti(history)">
-                                        <FontAwesomeIcon icon="fa-columns" />
+                                        <FontAwesomeIcon :icon="faColumns" />
                                     </BButton>
 
                                     <BButton
@@ -323,22 +333,22 @@ async function loadMore(noScroll = false) {
                                         variant="link"
                                         class="p-0 px-1"
                                         @click.stop="() => setCenterPanelHistory(history)">
-                                        <FontAwesomeIcon icon="far fa-list-alt" />
+                                        <FontAwesomeIcon :icon="faListAlt" />
                                     </BButton>
                                 </BButtonGroup>
                             </div>
                         </div>
                         <div v-if="isMultiviewPanel">
-                            <FontAwesomeIcon v-if="isActiveItem(history)" :icon="['far', 'check-square']" size="lg" />
-                            <FontAwesomeIcon v-else :icon="['far', 'square']" size="lg" />
+                            <FontAwesomeIcon v-if="isActiveItem(history)" :icon="faCheckSquare" size="lg" />
+                            <FontAwesomeIcon v-else :icon="faSquare" size="lg" />
                         </div>
                     </BListGroupItem>
                     <div>
                         <div v-if="allLoaded || props.filter !== ''" class="list-end my-2">
                             <span v-if="filtered.length == 1">- {{ filtered.length }} history loaded -</span>
                             <span v-else-if="filtered.length > 1">- All {{ filtered.length }} histories loaded -</span>
                         </div>
-                        <b-overlay :show="busy" opacity="0.5" />
+                        <BOverlay :show="busy" opacity="0.5" />
                     </div>
                 </BListGroup>
             </div>
@@ -359,7 +369,7 @@ async function loadMore(noScroll = false) {
                     :title="localize('Load More')"
                     variant="link"
                     @click="loadMore()">
-                    <FontAwesomeIcon icon="fa-arrow-down" />
+                    <FontAwesomeIcon :icon="faArrowDown" />
                 </BButton>
             </div>
 

diff --git a/client/src/components/History/Layout/DetailsLayout.vue b/client/src/components/History/Layout/DetailsLayout.vue
@@ -186,6 +186,7 @@ function selectText() {
 .summarized-details {
     min-height: 8.5em;
     margin: 1rem 1rem 0 1rem;
+    max-width: 15rem;
 
     .tags {
         min-height: 2rem;

diff --git a/client/src/components/History/Modals/SelectorModal.vue b/client/src/components/History/Modals/SelectorModal.vue
@@ -3,7 +3,7 @@ import { BButton, BFormGroup, BModal } from "bootstrap-vue";
 import { orderBy } from "lodash";
 import isEqual from "lodash.isequal";
 import { storeToRefs } from "pinia";
-import { computed, type PropType, type Ref, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 import type { HistorySummary } from "@/api";
 import { HistoriesFilters } from "@/components/History/HistoriesFilters";
@@ -17,12 +17,20 @@ import HistoryList from "@/components/History/HistoryScrollList.vue";
 type AdditionalOptions = "set-current" | "multi" | "center";
 type PinnedHistory = { id: string };
 
-const props = defineProps({
-    multiple: { type: Boolean, default: false },
-    title: { type: String, default: "Switch to history" },
-    histories: { type: Array as PropType<HistorySummary[]>, default: () => [] },
-    additionalOptions: { type: Array as PropType<AdditionalOptions[]>, default: () => [] },
-    showModal: { type: Boolean, default: false },
+interface Props {
+    multiple?: boolean;
+    title?: string;
+    histories: HistorySummary[];
+    additionalOptions?: AdditionalOptions[];
+    showModal: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    multiple: false,
+    title: "Switch to history",
+    histories: () => [],
+    additionalOptions: () => [],
+    showModal: false,
 });
 
 const emit = defineEmits<{
@@ -40,11 +48,11 @@ const propShowModal = computed({
     },
 });
 
-const selectedHistories: Ref<PinnedHistory[]> = ref([]);
+const selectedHistories = ref<PinnedHistory[]>([]);
 const filter = ref("");
 const busy = ref(false);
 const showAdvanced = ref(false);
-const modal: Ref<BModal | null> = ref(null);
+const modal = ref<BModal | null>(null);
 
 const { pinnedHistories } = storeToRefs(useHistoryStore());