Remove all usage of old table action pattern

dashboard/src/components/ApiTokens.vue

@@ -6,7 +6,7 @@ const t = i18n.t;
 
 import moment from 'moment-timezone';
 import { ref, onMounted, computed, useTemplateRef } from 'vue';
-import { Button, Dialog, InputDialog, FormGroup, Radiobutton, TableView, TextInput } from '@cloudron/pankow';
+import { Button, Menu, Dialog, InputDialog, FormGroup, Radiobutton, TableView, TextInput } from '@cloudron/pankow';
 import { copyToClipboard, prettyLongDate } from '@cloudron/pankow/utils';
 import { TOKEN_TYPES } from '../constants.js';
 import Section from './Section.vue';
@@ -48,6 +48,18 @@ const columns = {
   actions: {}
 };
 
+const actionMenuModel = ref([]);
+const actionMenuElement = useTemplateRef('actionMenuElement');
+function onActionMenu(apiToken, event) {
+  actionMenuModel.value = [{
+    icon: 'fa-solid fa-trash-alt',
+    label: t('main.action.remove'),
+    action: onRevokeToken.bind(null, apiToken),
+  }];
+
+  actionMenuElement.value.open(event, event.currentTarget);
+}
+
 const isValid = computed(() => {
   if (!tokenName.value) return false;
   if (!(tokenScope.value === 'r' || tokenScope.value === 'rw')) return false;
@@ -92,9 +104,9 @@ function onReset() {
   }, 500);
 }
 
-async function onRevokeToken(id, name) {
+async function onRevokeToken(apiToken) {
   const yes = await inputDialog.value.confirm({
-    message: t('profile.removeApiToken.title', { name }),
+    message: t('profile.removeApiToken.title', { name: apiToken.name }),
     confirmStyle: 'danger',
     confirmLabel: t('main.dialog.yes'),
     rejectLabel: t('main.dialog.no')
@@ -102,7 +114,7 @@ async function onRevokeToken(id, name) {
 
   if (!yes) return;
 
-  const [error] = await tokensModel.remove(id);
+  const [error] = await tokensModel.remove(apiToken.id);
   if (error) return console.error(error);
 
   await refreshApiTokens();
@@ -116,6 +128,7 @@ onMounted(async () => {
 
 <template>
   <div>
+    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
 
     <Dialog ref="newDialog"
@@ -182,8 +195,8 @@ onMounted(async () => {
           <span v-else>{{ '*' }}</span>
         </template>
         <template #actions="apiToken">
-          <div class="table-actions">
-            <Button small tool danger @click="onRevokeToken(apiToken.id, apiToken.name)" v-tooltip="$t('profile.apiTokens.revokeTokenTooltip')" icon="far fa-trash-alt" />
+          <div style="text-align: right;">
+            <Button tool plain secondary @click.capture="onActionMenu(apiToken, $event)" icon="fa-solid fa-ellipsis" />
           </div>
         </template>
       </TableView>