Merge pull request #5210 from systeminit/victor/eng-2890-make-ui-good…

…-grunt fix: Auth tokens list on dropdown
systeminit · Jan 7, 2025 · f3609ec · f3609ec
2 parents b1f31e6 + 66ae948
commit f3609ec
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 15 deletions.
diff --git a/app/auth-portal/src/components/WorkspaceLinkWidget.vue b/app/auth-portal/src/components/WorkspaceLinkWidget.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="workspace"
+    v-tooltip="{ content: workspace.instanceUrl, placement: 'bottom' }"
     :class="
       clsx(
         'flex flex-col rounded border cursor-pointer',
@@ -21,32 +22,39 @@
         )
       "
     >
-      <Icon name="cloud" class="flex-none" size="sm" />
+      <Icon class="flex-none" name="cloud" size="sm" />
       <TruncateWithTooltip class="text-md flex-grow py-2xs">
         <a :href="`${API_HTTP_URL}/workspaces/${workspace.id}/go`">
           {{ workspace.displayName }}
         </a>
       </TruncateWithTooltip>
       <IconButton
-        :tooltip="workspace.isFavourite ? 'Remove Favourite' : 'Set Favourite'"
-        tooltipPlacement="top"
         :icon="workspace.isFavourite ? 'star' : 'starOutline'"
-        size="sm"
-        class="flex-none"
-        iconTone="warning"
         :iconIdleTone="workspace.isFavourite ? 'warning' : 'shade'"
+        :tooltip="workspace.isFavourite ? 'Remove Favourite' : 'Set Favourite'"
+        class="flex-none"
         iconBgActiveTone="action"
+        iconTone="warning"
+        size="sm"
+        tooltipPlacement="top"
         @click.stop="starWorkspace"
       />
       <IconButton
-        tooltip="Settings"
-        tooltipPlacement="top"
+        class="flex-none"
         icon="settings"
-        size="sm"
         iconIdleTone="shade"
-        class="flex-none"
-        @click.stop="openSettings"
+        size="sm"
+        tooltip="Settings"
+        tooltipPlacement="top"
+        @click.stop="dropdownMenuRef?.open($event) || _.noop"
       />
+      <DropdownMenu ref="dropdownMenuRef" forceAlignRight>
+        <DropdownMenuItem label="Settings" @click.stop="openSettings" />
+        <DropdownMenuItem
+          label="Automation Tokens"
+          @click.stop="openAutomationTokens"
+        />
+      </DropdownMenu>
     </div>
     <div class="flex flex-col p-xs text-xs gap-xs min-h-[80px]">
       <div class="flex flex-col justify-between text-md gap-xs">
@@ -99,16 +107,19 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { computed, PropType } from "vue";
+<script lang="ts" setup>
+import { computed, PropType, ref } from "vue";
 import {
+  DropdownMenu,
+  DropdownMenuItem,
   Icon,
   IconButton,
   themeClasses,
   TruncateWithTooltip,
 } from "@si/vue-lib/design-system";
 import clsx from "clsx";
 import { useRouter } from "vue-router";
+import * as _ from "lodash-es";
 import { useWorkspacesStore, WorkspaceId } from "@/store/workspaces.store";
 
 import { API_HTTP_URL } from "@/store/api";
@@ -152,13 +163,22 @@ const starWorkspace = async () => {
   workspace.value.isFavourite = !workspace.value.isFavourite;
 };
 
+const dropdownMenuRef = ref<InstanceType<typeof DropdownMenu>>();
+
 const openSettings = async () => {
   await router.push({
     name: "workspace-settings",
     params: { workspaceId: props.workspaceId },
   });
 };
 
+const openAutomationTokens = async () => {
+  await router.push({
+    name: "workspace-auth-tokens",
+    params: { workspaceId: props.workspaceId },
+  });
+};
+
 const emit = defineEmits<{
   (e: "edit"): void;
 }>();

diff --git a/app/auth-portal/src/pages/WorkspaceAuthTokensPage.vue b/app/auth-portal/src/pages/WorkspaceAuthTokensPage.vue
@@ -6,8 +6,8 @@
     <template #success>
       <div class="overflow-hidden">
         <WorkspacePageHeader
-          :title="`${workspace.displayName} > API Tokens`"
-          subtitle="From here you can manage API tokens for your workspace. Enter the name and expiration of the API token below and click the Generate API Token button"
+          :title="`${workspace.displayName} > Automation Tokens`"
+          subtitle="From here you can manage automation tokens for your workspace. Enter the name and expiration of the token below and click the Generate Automation Token button"
         >
           <RouterLink
             :to="{ name: 'workspace-settings', params: { workspaceId } }"