Component wrapper - tab - part 2

client/src/component-library/GAlert.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
+import { computed, useAttrs } from "vue";
+
+const galaxyKwdToBoostrapDict: Record<string, string> = {
+    done: "success",
+    info: "info",
+    warning: "warning",
+    error: "danger",
+};
+
+defineProps({
+    message: {
+        type: String,
+        default: "",
+    },
+});
+
+const attrs = useAttrs();
+
+const galaxyKwdToBootstrap = computed(() => {
+    const variant: string = (attrs.status as string) || (attrs.variant as string);
+
+    if (variant in galaxyKwdToBoostrapDict) {
+        return galaxyKwdToBoostrapDict[variant];
+    } else {
+        return variant;
+    }
+});
+</script>
+
+<template>
+    <BAlert v-bind="$attrs" :variant="galaxyKwdToBootstrap" v-on="$listeners">
+        <slot> {{ message }} </slot>
+    </BAlert>
+</template>

client/src/component-library/GCol.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { BCol } from "bootstrap-vue";
+</script>
+
+<template>
+    <BCol v-bind="$attrs" v-on="$listeners">
+        <slot></slot>
+    </BCol>
+</template>

client/src/component-library/GInput.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import { BFormInput } from "bootstrap-vue";
+</script>
+<template>
+    <BFormInput v-bind="$attrs" v-on="$listeners"> </BFormInput>
+</template>

client/src/component-library/GInputGroup.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { BInputGroup } from "bootstrap-vue";
+</script>
+
+<template>
+    <BInputGroup v-bind="$attrs" v-on="$listeners">
+        <slot></slot>
+    </BInputGroup>
+</template>

client/src/component-library/GInputGroupAppend.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { BInputGroupAppend } from "bootstrap-vue";
+</script>
+
+<template>
+    <BInputGroupAppend v-bind="$attrs" v-on="$listeners">
+        <slot></slot>
+    </BInputGroupAppend>
+</template>

client/src/component-library/GInputGroupPrepend.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { BInputGroupPrepend } from "bootstrap-vue";
+</script>
+
+<template>
+    <BInputGroupPrepend v-bind="$attrs" v-on="$listeners">
+        <slot></slot>
+    </BInputGroupPrepend>
+</template>

client/src/component-library/GInputGroupText.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { BInputGroupText } from "bootstrap-vue";
+</script>
+
+<template>
+    <BInputGroupText v-bind="$attrs" v-on="$listeners">
+        <slot></slot>
+    </BInputGroupText>
+</template>

client/src/component-library/GLink.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { BLink } from "bootstrap-vue";
+</script>
+
+<template>
+    <BLink v-bind="$attrs" v-on="$listeners">
+        <slot></slot>
+    </BLink>
+</template>

client/src/component-library/GRow.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { BRow } from "bootstrap-vue";
+</script>
+
+<template>
+    <BRow v-bind="$attrs" v-on="$listeners">
+        <slot></slot>
+    </BRow>
+</template>

client/src/component-library/GTab.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { BTab } from "bootstrap-vue";
+</script>
+
+<template>
+    <BTab v-bind="$attrs" v-on="$listeners">
+        <slot></slot>
+    </BTab>
+</template>

client/src/component-library/GTabs.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { BTabs } from "bootstrap-vue";
+</script>
+
+<template>
+    <BTabs v-bind="$attrs" v-on="$listeners">
+        <slot></slot>
+    </BTabs>
+</template>

client/src/component-library/readme.md

@@ -0,0 +1,4 @@
+## Galaxy Component Library
+
+These are wrappers for ui components that, at least initially, come mostly from bootstrap-vue.
+This will provide us a layer of abstraction so that we can easily change the underlying ui library.

client/src/components/ActivityBar/ActivitySettings.vue

@@ -8,6 +8,7 @@ import { computed, type ComputedRef, type Ref, ref } from "vue";
 
 import { type Activity, useActivityStore } from "@/stores/activityStore";
 
+import GAlert from "@/component-library/GAlert.vue";
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 
 library.add({
@@ -101,7 +102,7 @@ function onQuery(newQuery: string) {
             </div>
         </div>
         <div v-else class="activity-settings-content">
-            <b-alert v-localize class="py-1 px-2" show> No matching activities found. </b-alert>
+            <GAlert v-localize class="py-1 px-2" show> No matching activities found. </GAlert>
         </div>
     </div>
 </template>

client/src/components/ClickToEdit.vue

@@ -14,7 +14,7 @@
                 :state-validator="stateValidator">
                 <debounced-input v-model="localValue" :delay="debounceDelay">
                     <template v-slot="{ value: debouncedValue, input }">
-                        <b-form-input
+                        <GInput
                             ref="clickToEditInput"
                             :value="debouncedValue"
                             :placeholder="placeholder"
@@ -29,6 +29,8 @@
 </template>
 
 <script>
+import GInput from "component-library/GInput";
+
 import DebouncedInput from "./DebouncedInput";
 
 const defaultStateValidator = (val, origVal) => {
@@ -41,6 +43,7 @@ const defaultStateValidator = (val, origVal) => {
 export default {
     components: {
         DebouncedInput,
+        GInput,
     },
     props: {
         value: { type: String, required: true },

client/src/components/ClientError.vue

@@ -6,15 +6,19 @@
 // (AdminRequired), but could be used for other client errors that need to be
 // presented to the user interrupting the normal flow and context of the app.
 
-import Alert from "@/components/Alert.vue";
+import GAlert from "@/component-library/GAlert.vue";
 
 const props = defineProps<{
     error: Error;
 }>();
 </script>
+
 <template>
-    <div class="container error-container"><Alert :message="props.error.message" variant="error" /></div>
+    <div class="container error-container">
+        <GAlert :message="props.error.message" variant="error" />
+    </div>
 </template>
+
 <style scoped>
 .error-container {
     margin: 4rem auto;

client/src/components/Collections/ListCollectionCreator.vue

@@ -1,28 +1,28 @@
 <template>
     <div class="list-collection-creator">
         <div v-if="state == 'error'">
-            <b-alert show variant="danger">
+            <GAlert show variant="danger">
                 {{ errorText }}
-            </b-alert>
+            </GAlert>
         </div>
         <div v-else>
             <div v-if="noElementsSelected">
-                <b-alert show variant="warning" dismissible>
+                <GAlert show variant="warning" dismissible>
                     {{ noElementsHeader }}
                     {{ allInvalidElementsPartOne }}
                     <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
                         {{ cancelText }}
                     </a>
                     {{ allInvalidElementsPartTwo }}
-                </b-alert>
+                </GAlert>
                 <div class="float-left">
                     <button class="cancel-create btn" tabindex="-1" @click="oncancel">
                         {{ l("Cancel") }}
                     </button>
                 </div>
             </div>
             <div v-else-if="allElementsAreInvalid">
-                <b-alert show variant="warning" dismissible>
+                <GAlert show variant="warning" dismissible>
                     {{ invalidHeader }}
                     <ul>
                         <li v-for="problem in returnInvalidElements" :key="problem">
@@ -34,7 +34,7 @@
                         {{ cancelText }}
                     </a>
                     {{ allInvalidElementsPartTwo }}
-                </b-alert>
+                </GAlert>
                 <div class="float-left">
                     <button class="cancel-create btn" tabindex="-1" @click="oncancel">
                         {{ l("Cancel") }}
@@ -43,23 +43,23 @@
             </div>
             <div v-else>
                 <div v-if="returnInvalidElementsLength">
-                    <b-alert show variant="warning" dismissible>
+                    <GAlert show variant="warning" dismissible>
                         {{ invalidHeader }}
                         <ul>
                             <li v-for="problem in returnInvalidElements" :key="problem">
                                 {{ problem }}
                             </li>
                         </ul>
-                    </b-alert>
+                    </GAlert>
                 </div>
                 <div v-if="showDuplicateError">
-                    <b-alert show variant="danger">
+                    <GAlert show variant="danger">
                         {{ l("Collections cannot have duplicated names. The following list names are duplicated: ") }}
                         <ol>
                             <li v-for="name in duplicateNames" :key="name">{{ name }}</li>
                         </ol>
                         {{ l("Please fix these duplicates and try again.") }}
-                    </b-alert>
+                    </GAlert>
                 </div>
                 <collection-creator
                     :oncancel="oncancel"
@@ -171,13 +171,13 @@
                             @start="drag = true"
                             @end="drag = false">
                             <div v-if="noMoreValidDatasets">
-                                <b-alert show variant="warning" dismissible>
+                                <GAlert show variant="warning" dismissible>
                                     {{ discardedElementsHeader }}
                                     <a class="reset-text" href="javascript:void(0)" role="button" @click="reset">
                                         {{ startOverText }}
                                     </a>
                                     ?
-                                </b-alert>
+                                </GAlert>
                             </div>
                             <dataset-collection-element-view
                                 v-for="element in returnWorkingElements"
@@ -211,11 +211,18 @@ import draggable from "vuedraggable";
 import mixin from "./common/mixin";
 import DatasetCollectionElementView from "./ListDatasetCollectionElementView";
 
+import GAlert from "@/component-library/GAlert.vue";
+
 library.add(faSortAlphaDown, faUndo);
 
 Vue.use(BootstrapVue);
 export default {
-    components: { DatasetCollectionElementView, draggable, FontAwesomeIcon },
+    components: {
+        GAlert,
+        DatasetCollectionElementView,
+        draggable,
+        FontAwesomeIcon,
+    },
     mixins: [mixin],
     data: function () {
         return {