From 9d098a09ecfb42795a775066d9990257abed7b3f Mon Sep 17 00:00:00 2001
From: Felipe Morato <felipe.morato@csc.fi>
Date: Mon, 6 Mar 2023 09:27:35 +0200
Subject: [PATCH 1/5] Replace b-input with c-text-field

---
 CHANGELOG.md                                  |  1 +
 .../src/components/CopyFolderModal.vue        | 22 +++++++-----------
 .../src/components/CreateFolderModal.vue      | 19 ++++++---------
 .../src/components/ObjectTable.vue            | 23 ++++++++++++-------
 .../src/views/Tokens.vue                      | 18 ++++++---------
 5 files changed, 38 insertions(+), 45 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 64f5b0f6d..7c2987c9d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -62,6 +62,7 @@ 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`
 
 ### Fixed
 
diff --git a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue b/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
index 880ead0e2..a502202b1 100644
--- a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
index c3eecd652..26324c92a 100644
--- a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
+++ b/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"
diff --git a/swift_browser_ui_frontend/src/components/ObjectTable.vue b/swift_browser_ui_frontend/src/components/ObjectTable.vue
index 1d5917a61..a73dd0bf5 100644
--- a/swift_browser_ui_frontend/src/components/ObjectTable.vue
+++ b/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;
diff --git a/swift_browser_ui_frontend/src/views/Tokens.vue b/swift_browser_ui_frontend/src/views/Tokens.vue
index baacf61d0..74b8ccea7 100644
--- a/swift_browser_ui_frontend/src/views/Tokens.vue
+++ b/swift_browser_ui_frontend/src/views/Tokens.vue
@@ -12,17 +12,13 @@
           {{ $t('message.tokens.back') }}
         </router-link>
       </section>
-      <b-field grouped>
-        <b-field
-          :label="$t('message.tokens.identLabel')"
-          :message="$t('message.tokens.identMessage')"
-          expanded
-        >
-          <b-input
-            v-model="newIdentifier"
-            name="newIdentifier"
-            expanded
-          />
+      <c-text-field
+        v-csc-model="newIdentifier"
+        name="newIdentifier"
+        :label="$t('message.tokens.identLabel')"
+        :hint="$t('message.tokens.identMessage')"
+        fit
+      />
 
           <p
             id="submitButton"

From c4af26150648b1cc0c4bc9f520bcdb9029730b7f Mon Sep 17 00:00:00 2001
From: Felipe Morato <felipe.morato@csc.fi>
Date: Wed, 8 Mar 2023 11:24:08 +0200
Subject: [PATCH 2/5] Replace b-button with c-button

---
 CHANGELOG.md                                  |  1 +
 .../src/components/UploadModal.vue            |  6 +-
 .../src/pages/SelectPage.vue                  | 22 +++---
 .../src/views/Tokens.vue                      | 68 ++++++++++---------
 4 files changed, 51 insertions(+), 46 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7c2987c9d..c19981224 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -63,6 +63,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (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`
 
 ### Fixed
 
diff --git a/swift_browser_ui_frontend/src/components/UploadModal.vue b/swift_browser_ui_frontend/src/components/UploadModal.vue
index 7f23794ec..b68f8f4fa 100644
--- a/swift_browser_ui_frontend/src/components/UploadModal.vue
+++ b/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
diff --git a/swift_browser_ui_frontend/src/pages/SelectPage.vue b/swift_browser_ui_frontend/src/pages/SelectPage.vue
index e4330ee21..e1779a6da 100644
--- a/swift_browser_ui_frontend/src/pages/SelectPage.vue
+++ b/swift_browser_ui_frontend/src/pages/SelectPage.vue
@@ -9,26 +9,24 @@
         v-for="project in projects.filter(pro => pro.tainted)"
         :key="project.id"
       >
-        <b-button
-          tag="a"
-          expanded
+        <c-button
           :href="'/lock/'.concat(project.id)"
-          size="is-large"
-          type="is-primary is-outlined"
+          size="large"
+          outlined
+          fit
         >
           {{ project.name }}
-        </b-button>
+        </c-button>
       </p>
       <p>
-        <b-button
-          tag="a"
-          expanded
+        <c-button
           href="/lock/none"
-          size="is-large"
-          type="is-primary is-outlined"
+          size="large"
+          outlined
+          fit
         >
           {{ $t("message.select.unrestricted" ) }}
-        </b-button>
+        </c-button>
       </p>
       <p>
         <b-field class="locale-changed block center">
diff --git a/swift_browser_ui_frontend/src/views/Tokens.vue b/swift_browser_ui_frontend/src/views/Tokens.vue
index 74b8ccea7..b36bf4d85 100644
--- a/swift_browser_ui_frontend/src/views/Tokens.vue
+++ b/swift_browser_ui_frontend/src/views/Tokens.vue
@@ -20,27 +20,20 @@
         fit
       />
 
-          <p
-            id="submitButton"
-            class="control"
-          >
-            <button
-              v-if="tokenExists(newIdentifier)"
-              class="button is-primary"
-              disabled
-            >
-              {{ $t('message.tokens.createToken') }}
-            </button>
-            <button
-              v-else
-              class="button is-primary"
-              @click="addToken(newIdentifier)"
-            >
-              {{ $t('message.tokens.createToken') }}
-            </button>
-          </p>
-        </b-field>
-      </b-field>
+      <c-row gap="8">
+        <c-button
+          v-if="tokenExists(newIdentifier)"
+          disabled
+        >
+          {{ $t('message.tokens.createToken') }}
+        </c-button>
+        <c-button
+          v-else
+          @click="addToken(newIdentifier)"
+        >
+          {{ $t('message.tokens.createToken') }}
+        </c-button>
+      </c-row>
     </div>
     <div
       v-if="latest"
@@ -50,14 +43,17 @@
         <span>
           <b>{{ $t('message.tokens.latestToken') }}</b>&nbsp;{{ latest }}&nbsp;
         </span>
-        <b-button
+        <c-button
           class="copyButton"
           outlined
-          icon-left="content-copy"
           @click="copyTokenHex()"
         >
+          <i
+            slot="icon"
+            class="mdi mdi-content-copy"
+          />
           {{ $t('message.copy') }}
-        </b-button>
+        </c-button>
       </div>
     </div>
     <b-table
@@ -83,27 +79,35 @@
         <template #default="props">
           <div class="field has-addons">
             <p class="control">
-              <b-button
+              <!-- How can i apply 'type="is-danger"'? -->
+              <!-- Also, what's the difference between the buttons? -->
+              <c-button
                 v-if="selected==props.row"
                 type="is-danger"
-                icon-left="delete"
                 outlined
-                size="is-small"
+                size="small"
                 inverted
                 @click="removeToken(props.row)"
               >
+                <i
+                  slot="icon"
+                  class="mdi mdi-delete"
+                />
                 {{ $t('message.tokens.revoke') }}
-              </b-button>
-              <b-button
+              </c-button>
+              <c-button
                 v-else
                 type="is-danger"
-                icon-left="delete"
                 outlined
-                size="is-small"
+                size="small"
                 @click="removeToken(props.row)"
               >
+                <i
+                  slot="icon"
+                  class="mdi mdi-delete"
+                />
                 {{ $t('message.tokens.revoke') }}
-              </b-button>
+              </c-button>
             </p>
           </div>
         </template>

From 4dd0a2d513548f28b6344de2e316c686f6f1b693 Mon Sep 17 00:00:00 2001
From: Felipe Morato <felipe.morato@csc.fi>
Date: Mon, 6 Mar 2023 10:10:22 +0200
Subject: [PATCH 3/5] Replace b-select with c-select

---
 CHANGELOG.md                                  |  1 +
 .../src/entries/select.js                     |  2 +-
 .../src/pages/SelectPage.vue                  | 25 ++++++-------------
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c19981224..bc85c6258 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -64,6 +64,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (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`
 
 ### Fixed
 
diff --git a/swift_browser_ui_frontend/src/entries/select.js b/swift_browser_ui_frontend/src/entries/select.js
index 4c1d7e6cf..0e49f9c66 100644
--- a/swift_browser_ui_frontend/src/entries/select.js
+++ b/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");
diff --git a/swift_browser_ui_frontend/src/pages/SelectPage.vue b/swift_browser_ui_frontend/src/pages/SelectPage.vue
index e1779a6da..d095d9513 100644
--- a/swift_browser_ui_frontend/src/pages/SelectPage.vue
+++ b/swift_browser_ui_frontend/src/pages/SelectPage.vue
@@ -29,23 +29,14 @@
         </c-button>
       </p>
       <p>
-        <b-field class="locale-changed block center">
-          <b-select
-            v-model="$i18n.locale"
-            placeholder="Language"
-            icon="earth"
-            expanded
-            @input="setCookieLang ()"
-          >
-            <option
-              v-for="lang in langs"
-              :key="lang.value"
-              :value="lang.value"
-            >
-              {{ lang.ph }}
-            </option>
-          </b-select>
-        </b-field>
+        <c-select
+          v-csc-model="$i18n.locale"
+          class="locale-changed block center"
+          placeholder="Language"
+          :items="langs"
+          fit
+          @input="setCookieLang ()"
+        />
       </p>
     </div>
   </div>

From 8015621a221b94e91e7ffebbe77875648a3aed90 Mon Sep 17 00:00:00 2001
From: Felipe Morato <felipe.morato@csc.fi>
Date: Mon, 6 Mar 2023 10:21:20 +0200
Subject: [PATCH 4/5] Replace b-loading with c-loader and remove unused
 b-loading

---
 CHANGELOG.md                                  |  1 +
 swift_browser_ui_frontend/src/common/store.js | 21 ++-----------------
 .../src/components/SearchBox.vue              |  5 ++---
 swift_browser_ui_frontend/src/entries/main.js |  6 ------
 .../src/pages/BrowserPage.vue                 |  5 -----
 5 files changed, 5 insertions(+), 33 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bc85c6258..6a230d8fd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -65,6 +65,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (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
 
 ### Fixed
 
diff --git a/swift_browser_ui_frontend/src/common/store.js b/swift_browser_ui_frontend/src/common/store.js
index 8f62eda2a..c04a68570 100644
--- a/swift_browser_ui_frontend/src/common/store.js
+++ b/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,
diff --git a/swift_browser_ui_frontend/src/components/SearchBox.vue b/swift_browser_ui_frontend/src/components/SearchBox.vue
index 336abcb8d..b7a194ad2 100644
--- a/swift_browser_ui_frontend/src/components/SearchBox.vue
+++ b/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"
diff --git a/swift_browser_ui_frontend/src/entries/main.js b/swift_browser_ui_frontend/src/entries/main.js
index fc5032d6f..a7444a097 100644
--- a/swift_browser_ui_frontend/src/entries/main.js
+++ b/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;
     },
diff --git a/swift_browser_ui_frontend/src/pages/BrowserPage.vue b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
index 4f27f9458..f87c9ef46 100644
--- a/swift_browser_ui_frontend/src/pages/BrowserPage.vue
+++ b/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

From 7d7f1e422072d978f26c906c3f19fabdc66fc3dd Mon Sep 17 00:00:00 2001
From: Felipe Morato <felipe.morato@csc.fi>
Date: Tue, 7 Mar 2023 14:13:09 +0200
Subject: [PATCH 5/5] Replace b-table with c-data-table

---
 CHANGELOG.md                                  |   1 +
 .../src/views/Tokens.vue                      | 138 ++++++++----------
 2 files changed, 61 insertions(+), 78 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6a230d8fd..a1b0af463 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -66,6 +66,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (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
 
diff --git a/swift_browser_ui_frontend/src/views/Tokens.vue b/swift_browser_ui_frontend/src/views/Tokens.vue
index b36bf4d85..55e299023 100644
--- a/swift_browser_ui_frontend/src/views/Tokens.vue
+++ b/swift_browser_ui_frontend/src/views/Tokens.vue
@@ -12,23 +12,16 @@
           {{ $t('message.tokens.back') }}
         </router-link>
       </section>
-      <c-text-field
-        v-csc-model="newIdentifier"
-        name="newIdentifier"
-        :label="$t('message.tokens.identLabel')"
-        :hint="$t('message.tokens.identMessage')"
-        fit
-      />
-
       <c-row gap="8">
+        <c-text-field
+          v-csc-model="newIdentifier"
+          name="newIdentifier"
+          :label="$t('message.tokens.identLabel')"
+          :hint="$t('message.tokens.identMessage')"
+          fit
+        />
         <c-button
-          v-if="tokenExists(newIdentifier)"
-          disabled
-        >
-          {{ $t('message.tokens.createToken') }}
-        </c-button>
-        <c-button
-          v-else
+          :disabled="tokenExists(newIdentifier)"
           @click="addToken(newIdentifier)"
         >
           {{ $t('message.tokens.createToken') }}
@@ -56,68 +49,15 @@
         </c-button>
       </div>
     </div>
-    <b-table
+    <c-data-table
       class="tokenContents"
-      narrowed
-      default-sort="identifier"
-      :data="tokens"
-      :selected.sync="selected"
-      :default-sort-direction="defaultSortDirection"
-    >
-      <b-table-column
-        field="identifier"
-        :label="$t('message.tokens.identifier')"
-        sortable
-      >
-        <template #default="props">
-          {{ props.row }}
-        </template>
-      </b-table-column>
-      <b-table-column
-        field="controls"
-      >
-        <template #default="props">
-          <div class="field has-addons">
-            <p class="control">
-              <!-- How can i apply 'type="is-danger"'? -->
-              <!-- Also, what's the difference between the buttons? -->
-              <c-button
-                v-if="selected==props.row"
-                type="is-danger"
-                outlined
-                size="small"
-                inverted
-                @click="removeToken(props.row)"
-              >
-                <i
-                  slot="icon"
-                  class="mdi mdi-delete"
-                />
-                {{ $t('message.tokens.revoke') }}
-              </c-button>
-              <c-button
-                v-else
-                type="is-danger"
-                outlined
-                size="small"
-                @click="removeToken(props.row)"
-              >
-                <i
-                  slot="icon"
-                  class="mdi mdi-delete"
-                />
-                {{ $t('message.tokens.revoke') }}
-              </c-button>
-            </p>
-          </div>
-        </template>
-      </b-table-column>
-      <template #empty>
-        <span class="emptyContents">
-          {{ $t('message.tokens.empty') }}
-        </span>
-      </template>
-    </b-table>
+      sort-by="identifier"
+      sort-direction="asc"
+      :data.prop="tableTokens"
+      :headers.prop="headers"
+      :no-data-text="$t('message.tokens.empty')"
+      hide-footer
+    />
     <c-toasts
       id="token-toasts"
       data-testid="token-toasts"
@@ -131,6 +71,9 @@ import {
   listTokens,
   removeToken,
 } from "@/common/api";
+import {
+  mdiDelete,
+} from "@mdi/js";
 
 export default {
   name: "TokensView",
@@ -138,7 +81,6 @@ export default {
     return {
       tokens: [],
       selected: undefined,
-      defaultSortDirection: "asc",
       newIdentifier: "",
       latest: undefined,
       copied: false,
@@ -148,6 +90,46 @@ export default {
     active () {
       return this.$route.params.project;
     },
+    headers () {
+      return [
+        {
+          key: "identifier",
+          value: this.$t("message.tokens.identifier"),
+          sortable: true,
+        },
+        {
+          key: "controls",
+          value: null,
+          sortable: false,
+          children: [
+            {
+              value: this.$t("message.tokens.revoke"),
+              component: {
+                tag: "c-button",
+                params: {
+                  text: true,
+                  size: "small",
+                  title: this.$t("message.tokens.revoke"),
+                  type: "error",
+                  path: mdiDelete,
+                  onClick: ({ data: { identifier } }) =>
+                    this.deleteToken(identifier.value),
+                },
+              },
+            },
+          ],
+        },
+      ];
+    },
+    tableTokens () {
+      return this.tokens.map(token => {
+        return {
+          identifier: {
+            value: token,
+          },
+        };
+      });
+    },
   },
   beforeMount () {
     this.getTokens();
@@ -156,7 +138,7 @@ export default {
     getTokens: function () {
       listTokens(this.active).then((ret) => {this.tokens = ret;});
     },
-    removeToken: function (identifier) {
+    deleteToken: function (identifier) {
       removeToken(
         this.active,
         identifier,