Merge pull request #1016 from CSCfi/feature/replace-buefy-components

Replace buefy components with csc-ui components

Author: csc-felipe

CHANGELOG.md

@@ -62,6 +62,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (GH #1007) Create new Taginput component to replace Buefy's taginput component
 - (GH #1009) Replace buefy toasts with c-toasts from `csc-ui`
 - (GH #1014) Replace buefy snackbars with custom c-toasts from `csc-ui`
+- (GL #944) Replace buefy b-input with c-text-field from `csc-ui`
+- (GL #944) Replace buefy b-button with c-button from `csc-ui`
+- (GL #944) Replace buefy b-select with c-select from `csc-ui`
+- (GL #944) Replace buefy b-loading with c-loader from `csc-ui` and remove unused b-loading
+- (GL #944) Replace buefy b-table with c-data-table from `csc-ui`
 
 ### Fixed
 

swift_browser_ui_frontend/src/common/store.js

@@ -23,8 +23,6 @@ const store = new Vuex.Store({
     active: {},
     uname: "",
     multipleProjects: false,
-    isLoading: false,
-    isFullPage: true,
     objectCache: [], // Only for shared objects
     langs: [
       { ph: "In English", value: "en" },
@@ -59,9 +57,6 @@ const store = new Vuex.Store({
     uploadAbort: undefined,
   },
   mutations: {
-    loading(state, payload) {
-      state.isLoading = payload;
-    },
     updateObjects(state, objects) {
       // Update object cache with the new object listing.
       state.objectCache = [...objects];
@@ -86,9 +81,6 @@ const store = new Vuex.Store({
       // Update the username in store
       state.uname = newUname;
     },
-    setLoading(state, newValue) {
-      state.isLoading = newValue;
-    },
     setSharingClient(state, newClient) {
       state.client = newClient;
     },
@@ -248,24 +240,18 @@ const store = new Vuex.Store({
   },
   actions: {
     updateContainers: async function (
-      { state, commit, dispatch },
+      { state, dispatch },
       { projectID, signal },
     ) {
       const existingContainers = await state.db.containers
         .where({ projectID })
         .toArray();
-      if (existingContainers.length === 0) {
-        commit("loading", true);
-      }
       let containers;
       let marker = "";
       let newContainers = [];
       do {
         containers = [];
-        containers = await getContainers(projectID, marker).catch(() => {
-          commit("loading", false);
-        });
-        commit("loading", false);
+        containers = await getContainers(projectID, marker).catch(() => {});
         if (containers.length > 0) {
           containers.forEach(cont => {
             cont.tokens = tokenize(cont.name);
@@ -494,7 +480,6 @@ const store = new Vuex.Store({
       { commit, dispatch },
       { project, owner, container, signal },
     ) {
-      commit("loading", true);
       let sharedObjects = [];
       let marker = "";
       let objects = [];
@@ -507,7 +492,6 @@ const store = new Vuex.Store({
           true,
           owner,
         ).catch(() => {
-          commit("loading", false);
           commit("updateObjects", []);
         });
 
@@ -516,7 +500,6 @@ const store = new Vuex.Store({
           marker = objects[objects.length - 1].name;
         }
       } while (objects.length > 0);
-      commit("loading", false);
       commit("updateObjects", sharedObjects);
       dispatch("updateObjectTags", {
         projectID: project,

swift_browser_ui_frontend/src/components/CopyFolderModal.vue

@@ -15,23 +15,17 @@
             {{ $t("message.replicate.destinationExists") }}
           </p>
         </c-alert>
-        <b-field
-          custom-class="has-text-dark"
+        <c-text-field
+          id="new-copy-folderName"
+          v-csc-model="folderName"
           :label="$t('message.replicate.name_newFolder')"
-          label-for="new-copy-folderName"
-        >
-          <b-input
-            id="new-copy-folderName"
-            v-model="folderName"
-            name="foldername"
-            custom-class="has-text-dark"
-            :loading="loadingFoldername"
-          />
-        </b-field>
+          name="foldername"
+          :loading="loadingFoldername"
+        />
         <label
           class="taginput-label"
           label-for="copy-folder-taginput"
-        >
+        >  
           {{ $t('message.tagName') }}
         </label>
         <TagInput
@@ -307,4 +301,4 @@ c-card-actions {
 c-card-actions > c-button {
   margin: 0;
 }
-</style>
+</style>

swift_browser_ui_frontend/src/components/CreateFolderModal.vue

@@ -17,19 +17,14 @@
         <p class="info-text is-size-6">
           {{ $t("message.container_ops.norename") }}
         </p>
-        <b-field
-          custom-class="has-text-dark"
+        <c-text-field
+          id="folderName"
+          v-csc-model="folderName"
           :label="$t('message.container_ops.folderName')"
-          label-for="folderName"
-        >
-          <b-input
-            id="folderName"
-            v-model="folderName"
-            name="foldername"
-            aria-required="true"
-            data-testid="folder-name"
-          />
-        </b-field>
+          name="foldername"
+          aria-required="true"
+          data-testid="folder-name"
+        />
         <label
           class="taginput-label"
           label-for="create-folder-taginput"

swift_browser_ui_frontend/src/components/ObjectTable.vue

@@ -79,15 +79,18 @@
       id="optionsbar"
       justify="space-between"
     >
-      <div class="search">
-        <b-input
-          v-model="searchQuery"
-          :placeholder="$t('message.objects.filterBy')"
-          type="search"
-          icon="filter-variant"
+      <c-text-field
+        id="search"
+        v-csc-model="searchQuery"
+        name="search"
+        :placeholder="$t('message.objects.filterBy')"
+        type="search"
+      >
+        <i 
+          slot="pre" 
+          class="mdi mdi-filter-variant mdi-24px"
         />
-      </div>
-
+      </c-text-field>
       <c-menu
         :key="optionsKey"
         :items.prop="tableOptions"
@@ -764,6 +767,10 @@ export default {
 <style scoped lang="scss">
 @import "@/css/prod.scss";
 
+#search {
+  flex: 0.4;
+}
+
 .back-link {
   display: flex;
   padding-bottom: .5rem;

swift_browser_ui_frontend/src/components/SearchBox.vue

@@ -31,9 +31,8 @@
           v-if="searchArray.length > 0 && searchArray[0].length > 1"
           class="media empty-search"
         >
-          <b-loading
-            v-model="isSearching"
-            :is-full-page="false"
+          <c-loader
+            v-show="isSearching"
           />
           <div
             v-show="!isSearching"

swift_browser_ui_frontend/src/components/UploadModal.vue

@@ -115,11 +115,13 @@
                   rows="3"
                 />
                 <c-button
-                  type="is-success"
-                  icon-left="lock-plus"
                   @click="appendPublicKey"
                   @keyup.enter="appendPublicKey"
                 >
+                  <i
+                    slot="icon"
+                    class="mdi mdi-lock-plus"
+                  />
                   {{ $t("message.encrypt.addkey") }}
                 </c-button>
                 <c-data-table

swift_browser_ui_frontend/src/entries/main.js

@@ -160,12 +160,6 @@ new Vue({
     user() {
       return this.$store.state.uname;
     },
-    isFullPage() {
-      return this.$store.state.isFullPage;
-    },
-    isLoading() {
-      return this.$store.state.isLoading;
-    },
     isChunking() {
       return this.$store.state.isChunking;
     },

swift_browser_ui_frontend/src/entries/select.js

@@ -28,7 +28,7 @@ new Vue ({
     loginformname: "Openstack account:",
     idb: true,
     projects: [],
-    langs: [{ph: "In English", value: "en"}, {ph: "Suomeksi", value: "fi"}],
+    langs: [{name: "In English", value: "en"}, {name: "Suomeksi", value: "fi"}],
   },
   created() {
     document.title = this.$t("message.program_name");

swift_browser_ui_frontend/src/pages/BrowserPage.vue

@@ -46,11 +46,6 @@
         <CopyFolderModal />
       </c-modal>
       <router-view class="content-wrapper" />
-      <b-loading
-        :is-full-page="isFullPage"
-        :active.sync="isLoading"
-        :can-cancel="false"
-      />
       <c-toasts id="toasts" />
       <!-- TODO: Move folder toast to programmatical modal -->
       <c-toasts