Add GContainer wrapper for BContainer

client/src/component-library/GContainer.vue

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

client/src/components/IconCard.vue

@@ -1,25 +1,27 @@
 <template>
     <GCard :title="title" class="mx-4 icon-card">
-        <b-container class="p-0">
+        <GContainer class="p-0">
             <GRow>
                 <GCol>{{ description }}</GCol>
                 <GCol cols="auto"><i :class="icon"></i></GCol>
             </GRow>
-        </b-container>
+        </GContainer>
         <b-button variant="primary" @click="onButtonClick">{{ buttonText }}</b-button>
     </GCard>
 </template>
 
 <script>
 import GCard from "@/component-library/GCard.vue";
 import GCol from "@/component-library/GCol.vue";
+import GContainer from "@/component-library/GContainer.vue";
 import GRow from "@/component-library/GRow.vue";
 
 /** A generic Card, used as a template, that displays an action button,
  * an icon (font-awesome), along with a title and description.
  * Clicking the button emits an "onButtonClick" event. */
 export default {
     components: {
+        GContainer,
         GCard,
         GRow,
         GCol,

client/src/components/Libraries/LibrariesList.vue

@@ -145,7 +145,7 @@
             </template>
         </b-table>
 
-        <b-container>
+        <GContainer>
             <GRow class="justify-content-md-center">
                 <GCol md="auto">
                     <GPagination
@@ -175,7 +175,7 @@
                     </table>
                 </GCol>
             </GRow>
-        </b-container>
+        </GContainer>
     </div>
 </template>
 
@@ -201,6 +201,7 @@ import { fields } from "./table-fields";
 import GCard from "@/component-library/GCard.vue";
 import GCol from "@/component-library/GCol.vue";
 import GCollapse from "@/component-library/GCollapse.vue";
+import GContainer from "@/component-library/GContainer.vue";
 import GInputGroup from "@/component-library/GInputGroup.vue";
 import GLink from "@/component-library/GLink.vue";
 import GPagination from "@/component-library/GPagination.vue";
@@ -212,6 +213,7 @@ Vue.use(BootstrapVue);
 
 export default {
     components: {
+        GContainer,
         GPagination,
         GCollapse,
         GCard,

client/src/components/Libraries/LibraryFolder/LibraryFolder.vue

@@ -219,7 +219,7 @@
             </template>
         </b-table>
         <!-- hide pagination if the table is loading-->
-        <b-container>
+        <GContainer>
             <GRow align-v="center" class="justify-content-md-center">
                 <GCol md="auto">
                     <div v-if="isBusy">
@@ -254,7 +254,7 @@
                     </table>
                 </GCol>
             </GRow>
-        </b-container>
+        </GContainer>
     </div>
 </template>
 
@@ -280,6 +280,7 @@ import { fields } from "./table-fields";
 import FolderTopBar from "./TopToolbar/FolderTopBar";
 
 import GCol from "@/component-library/GCol.vue";
+import GContainer from "@/component-library/GContainer.vue";
 import GLink from "@/component-library/GLink.vue";
 import GPagination from "@/component-library/GPagination.vue";
 import GRow from "@/component-library/GRow.vue";
@@ -300,6 +301,7 @@ function initialFolderState() {
 }
 export default {
     components: {
+        GContainer,
         GPagination,
         GRow,
         GCol,

client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryFolderDatasetPermissions.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-container fluid>
+        <GContainer fluid>
             <div v-if="dataset">
                 <LibraryBreadcrumb :current-id="dataset_id" :full_path="dataset.full_path" />
                 <b-button
@@ -69,7 +69,7 @@
                 <font-awesome-icon :icon="['far', 'save']" />
                 &nbsp;Save
             </b-button>
-        </b-container>
+        </GContainer>
     </div>
 </template>
 
@@ -90,12 +90,15 @@ import { getAppRoot } from "onload/loadConfig";
 import Vue from "vue";
 import VueObserveVisibility from "vue-observe-visibility";
 
+import GContainer from "@/component-library/GContainer.vue";
+
 Vue.use(VueObserveVisibility);
 Vue.use(BootstrapVue);
 initPermissionsIcons();
 
 export default {
     components: {
+        GContainer,
         PermissionsInputField,
         FontAwesomeIcon,
         LibraryBreadcrumb,

client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryFolderPermissions.vue

@@ -2,7 +2,7 @@
     <div>
         <b-button variant="link" @click="onGoBack">Go back</b-button>
         <PermissionsHeader v-if="folder" :name="folder.name" />
-        <b-container fluid>
+        <GContainer fluid>
             <div class="dataset_table">
                 <h2 class="text-center">Folder permissions</h2>
                 <PermissionsInputField
@@ -35,7 +35,7 @@
                     &nbsp;Save
                 </button>
             </div>
-        </b-container>
+        </GContainer>
     </div>
 </template>
 
@@ -51,11 +51,14 @@ import { Toast } from "composables/toast";
 import { getAppRoot } from "onload/loadConfig";
 import Vue from "vue";
 
+import GContainer from "@/component-library/GContainer.vue";
+
 Vue.use(BootstrapVue);
 initPermissionsIcons();
 
 export default {
     components: {
+        GContainer,
         PermissionsInputField,
         PermissionsHeader,
         FontAwesomeIcon,

client/src/components/User/CustomBuilds.vue

@@ -1,5 +1,5 @@
 <template>
-    <b-container>
+    <GContainer>
         <GRow>
             <GCol>
                 <h1 class="h-sm">Current Custom Builds</h1>
@@ -143,7 +143,7 @@ chr5    152537259</pre
                 </GCard>
             </GCol>
         </GRow>
-    </b-container>
+    </GContainer>
 </template>
 
 <script>
@@ -159,12 +159,14 @@ import Multiselect from "vue-multiselect";
 import GAlert from "@/component-library/GAlert.vue";
 import GCard from "@/component-library/GCard.vue";
 import GCol from "@/component-library/GCol.vue";
+import GContainer from "@/component-library/GContainer.vue";
 import GRow from "@/component-library/GRow.vue";
 
 Vue.use(BootstrapVue);
 
 export default {
     components: {
+        GContainer,
         GCard,
         GRow,
         GCol,

client/src/components/User/DiskUsage/DiskUsageSummary.vue

@@ -5,15 +5,15 @@
                 <h2 class="alert-heading h-sm">{{ errorMessageTitle }}</h2>
                 {{ errorMessage }}
             </GAlert>
-            <b-container v-if="currentUser">
+            <GContainer v-if="currentUser">
                 <GRow v-if="config.enable_quotas" class="justify-content-md-center">
                     <QuotaUsageSummary v-if="quotaUsages" :quota-usages="quotaUsages" />
                 </GRow>
                 <h2 v-else id="basic-disk-usage-summary" class="text-center my-3">
                     You're using <b>{{ getTotalDiskUsage(currentUser) }}</b> of disk space.
                 </h2>
-            </b-container>
-            <b-container class="text-center mb-5 w-75">
+            </GContainer>
+            <GContainer class="text-center mb-5 w-75">
                 <button
                     title="Recalculate disk usage"
                     :disabled="isRecalculating"
@@ -34,7 +34,7 @@
                     @dismiss-count-down="countDownChanged">
                     Recalculating disk usage... this may take some time, please check back later.
                 </GAlert>
-            </b-container>
+            </GContainer>
         </div>
     </ConfigProvider>
 </template>
@@ -54,10 +54,12 @@ import { useUserStore } from "@/stores/userStore";
 import { QuotaUsage } from "./Quota/model";
 
 import GAlert from "@/component-library/GAlert.vue";
+import GContainer from "@/component-library/GContainer.vue";
 import GRow from "@/component-library/GRow.vue";
 
 export default {
     components: {
+        GContainer,
         GRow,
         GAlert,
         ConfigProvider,

client/src/components/User/DiskUsage/Management/StorageManager.vue

@@ -13,6 +13,7 @@ import CleanupResultDialog from "./Cleanup/CleanupResultDialog.vue";
 import ReviewCleanupDialog from "./Cleanup/ReviewCleanupDialog.vue";
 import GAlert from "@/component-library/GAlert.vue";
 import GCardGroup from "@/component-library/GCardGroup.vue";
+import GContainer from "@/component-library/GContainer.vue";
 import GLink from "@/component-library/GLink.vue";
 import GRow from "@/component-library/GRow.vue";
 
@@ -54,7 +55,7 @@ async function onConfirmCleanupSelected(selectedItems: CleanableItem[]) {
 </script>
 
 <template>
-    <b-container fluid>
+    <GContainer fluid>
         <GLink to="StorageDashboard">{{ localize("Back to Dashboard") }}</GLink>
         <h2 class="text-center my-3">
             <b>{{ localize("Manage your account storage") }}</b> <sup class="text-beta">(Beta)</sup>
@@ -74,7 +75,7 @@ async function onConfirmCleanupSelected(selectedItems: CleanableItem[]) {
         </GRow>
 
         <div id="categories-panel">
-            <b-container v-for="category in cleanupCategories" :key="category.id">
+            <GContainer v-for="category in cleanupCategories" :key="category.id">
                 <GRow class="justify-content-md-center mb-2">
                     <h3>
                         <b>{{ category.name }}</b>
@@ -90,7 +91,7 @@ async function onConfirmCleanupSelected(selectedItems: CleanableItem[]) {
                             @onReviewItems="onReviewItems" />
                     </GCardGroup>
                 </GRow>
-            </b-container>
+            </GContainer>
         </div>
 
         <ReviewCleanupDialog
@@ -100,7 +101,7 @@ async function onConfirmCleanupSelected(selectedItems: CleanableItem[]) {
             @onConfirmCleanupSelectedItems="onConfirmCleanupSelected" />
 
         <CleanupResultDialog ref="resultModal" :result="cleanupResult" />
-    </b-container>
+    </GContainer>
 </template>
 
 <style lang="css" scoped>

client/src/components/User/UserPreferences.vue

@@ -1,5 +1,5 @@
 <template>
-    <b-container fluid class="p-0">
+    <GContainer fluid class="p-0">
         <h1 v-localize class="h-lg">User preferences</h1>
         <GAlert :variant="messageVariant" :show="!!message">
             {{ message }}
@@ -117,7 +117,7 @@
             title="Sign Out"
             description="Click here to sign out of all sessions."
             @click="signOut" />
-    </b-container>
+    </GContainer>
 </template>
 
 <script>
@@ -144,11 +144,13 @@ import UserPreferredObjectStore from "./UserPreferredObjectStore";
 import ThemeSelector from "./ThemeSelector.vue";
 import GAlert from "@/component-library/GAlert.vue";
 import GCollapse from "@/component-library/GCollapse.vue";
+import GContainer from "@/component-library/GContainer.vue";
 
 Vue.use(BootstrapVue);
 
 export default {
     components: {
+        GContainer,
         GCollapse,
         GAlert,
         ConfigProvider,

client/src/components/admin/DataManager/DataManager.vue

@@ -10,7 +10,7 @@
             </GAlert>
         </div>
         <div v-else-if="dataManagers && dataTables">
-            <b-container fluid>
+            <GContainer fluid>
                 <GRow>
                     <GCol md="6">
                         <b-form-group description="Search for strings or regular expressions">
@@ -23,7 +23,7 @@
                         </b-form-group>
                     </GCol>
                 </GRow>
-            </b-container>
+            </GContainer>
             <GCardGroup columns>
                 <GCard id="data-managers-card" no-body header="Installed Data Managers">
                     <b-list-group flush>
@@ -81,12 +81,14 @@ import GAlert from "@/component-library/GAlert.vue";
 import GCard from "@/component-library/GCard.vue";
 import GCardGroup from "@/component-library/GCardGroup.vue";
 import GCol from "@/component-library/GCol.vue";
+import GContainer from "@/component-library/GContainer.vue";
 import GInputGroup from "@/component-library/GInputGroup.vue";
 import GInputGroupAppend from "@/component-library/GInputGroupAppend.vue";
 import GRow from "@/component-library/GRow.vue";
 
 export default {
     components: {
+        GContainer,
         GCard,
         GCardGroup,
         GRow,