From 46c0ccb51802e7cdc8cd9affebca36b5e7a68ccf Mon Sep 17 00:00:00 2001
From: Victor Bustamante <victor@systeminit.com>
Date: Mon, 6 Jan 2025 18:54:27 -0300
Subject: [PATCH] fix: change text and paths to say API tokens

Signed-off-by: Victor Bustamante <victor@systeminit.com>
---
 .../src/components/WorkspaceLinkWidget.vue    | 15 +++--
 .../src/pages/WorkspaceAuthTokensPage.vue     |  8 +--
 .../src/pages/WorkspaceDetailsPage.vue        | 67 ++++++++++---------
 app/auth-portal/src/router.ts                 |  4 +-
 .../src/design-system/icons/icon_set.ts       |  2 +
 5 files changed, 53 insertions(+), 43 deletions(-)

diff --git a/app/auth-portal/src/components/WorkspaceLinkWidget.vue b/app/auth-portal/src/components/WorkspaceLinkWidget.vue
index ab6e9a4bba..a77b51e7ac 100644
--- a/app/auth-portal/src/components/WorkspaceLinkWidget.vue
+++ b/app/auth-portal/src/components/WorkspaceLinkWidget.vue
@@ -49,10 +49,15 @@
         @click.stop="dropdownMenuRef?.open($event) || _.noop"
       />
       <DropdownMenu ref="dropdownMenuRef" forceAlignRight>
-        <DropdownMenuItem label="Settings" @click.stop="openSettings" />
         <DropdownMenuItem
-          label="Automation Tokens"
-          @click.stop="openAutomationTokens"
+          icon="settings"
+          label="Settings"
+          @click.stop="openSettings"
+        />
+        <DropdownMenuItem
+          icon="key-tilted"
+          label="API Tokens"
+          @click.stop="openApiTokens"
         />
       </DropdownMenu>
     </div>
@@ -172,9 +177,9 @@ const openSettings = async () => {
   });
 };
 
-const openAutomationTokens = async () => {
+const openApiTokens = async () => {
   await router.push({
-    name: "workspace-auth-tokens",
+    name: "workspace-api-tokens",
     params: { workspaceId: props.workspaceId },
   });
 };
diff --git a/app/auth-portal/src/pages/WorkspaceAuthTokensPage.vue b/app/auth-portal/src/pages/WorkspaceAuthTokensPage.vue
index e8f624e557..c46ccf45a0 100644
--- 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} > 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"
+          :title="`${workspace.displayName} > API Tokens`"
+          subtitle="From here you can manage API tokens for your workspace. Enter the name and expiration of the token below and click the Generate API Token button"
         >
           <RouterLink
             :to="{ name: 'workspace-settings', params: { workspaceId } }"
@@ -45,7 +45,7 @@
               variant="solid"
               @click="createAuthToken.execute()"
             >
-              Generate Automation Token
+              Generate API Token
             </VButton>
           </div>
           <ErrorMessage :asyncState="authTokens" />
@@ -143,7 +143,7 @@ import WorkspacePageHeader from "@/components/WorkspacePageHeader.vue";
 import { useAuthTokensApi } from "@/store/authTokens.store";
 import AuthTokenListItem from "@/components/AuthTokenListItem.vue";
 
-useHead({ title: "Automation Tokens" });
+useHead({ title: "API Tokens" });
 
 const workspacesStore = useWorkspacesStore();
 const api = useAuthTokensApi();
diff --git a/app/auth-portal/src/pages/WorkspaceDetailsPage.vue b/app/auth-portal/src/pages/WorkspaceDetailsPage.vue
index b84af9e920..cfd9026ffa 100644
--- a/app/auth-portal/src/pages/WorkspaceDetailsPage.vue
+++ b/app/auth-portal/src/pages/WorkspaceDetailsPage.vue
@@ -2,15 +2,15 @@
   <div class="overflow-hidden">
     <template v-if="loadWorkspacesReqStatus.isSuccess || createMode">
       <WorkspacePageHeader
-        :title="
-          draftWorkspace.displayName ||
-          (createMode ? 'Create New Workspace' : 'Workspace Details')
-        "
         :subtitle="
           createMode
             ? 'Fill out this form to create a new workspace.'
             : 'From here you can manage this workspace and invite users to be part of it.'
         "
+        :title="
+          draftWorkspace.displayName ||
+          (createMode ? 'Create New Workspace' : 'Workspace Details')
+        "
       >
         <template v-if="isDefaultWorkspace">
           <div
@@ -27,32 +27,29 @@
             DEFAULT
           </div>
         </template>
-        <RouterLink
+        <IconButton
           v-if="!createMode && featureFlagsStore.AUTOMATION_API"
-          :to="{ name: 'workspace-auth-tokens', params: { workspaceId } }"
-        >
-          <Icon
-            name="circle-stack"
-            tooltip="API Tokens"
-            tooltipPlacement="top"
-            size="lg"
-            class="flex-none"
-            iconTone="warning"
-            iconIdleTone="shade"
-            iconBgActiveTone="action"
-          />
-        </RouterLink>
+          class="flex-none"
+          icon="key-tilted"
+          iconBgActiveTone="action"
+          iconIdleTone="shade"
+          iconTone="warning"
+          size="lg"
+          tooltip="API Tokens"
+          tooltipPlacement="top"
+          @click="openApiTokens"
+        />
         <IconButton
+          :icon="draftWorkspace.isFavourite ? 'star' : 'starOutline'"
+          :iconIdleTone="draftWorkspace.isFavourite ? 'warning' : 'shade'"
           :tooltip="
             draftWorkspace.isFavourite ? 'Remove Favourite' : 'Add Favourite'
           "
-          tooltipPlacement="top"
-          :icon="draftWorkspace.isFavourite ? 'star' : 'starOutline'"
-          size="lg"
           class="flex-none"
-          iconTone="warning"
-          :iconIdleTone="draftWorkspace.isFavourite ? 'warning' : 'shade'"
           iconBgActiveTone="action"
+          iconTone="warning"
+          size="lg"
+          tooltipPlacement="top"
           @click="favouriteWorkspace(!draftWorkspace.isFavourite)"
         />
       </WorkspacePageHeader>
@@ -103,6 +100,12 @@
         <div class="flex flex-row flex-wrap items-center w-full gap-xs">
           <VButton
             v-if="!createMode || createWorkspaceType"
+            :class="
+              clsx(
+                'basis-[calc(75%-0.5rem)]',
+                createMode ? 'flex-grow' : 'flex-grow-0',
+              )
+            "
             :disabled="
               validationState.isError || (!isWorkspaceOwner && !createMode)
             "
@@ -110,12 +113,6 @@
             :requestStatus="
               createMode ? createWorkspaceReqStatus : editWorkspaceReqStatus
             "
-            :class="
-              clsx(
-                'basis-[calc(75%-0.5rem)]',
-                createMode ? 'flex-grow' : 'flex-grow-0',
-              )
-            "
             iconRight="chevron--right"
             tone="action"
             variant="solid"
@@ -127,8 +124,8 @@
             v-if="!createMode"
             :disabled="isDefaultWorkspace"
             class="basis-[calc(25%-0.5rem)] flex-grow-0"
-            loadingText="Setting as default..."
             iconRight="chevron--right"
+            loadingText="Setting as default..."
             tone="action"
             variant="solid"
             @click="setDefaultWorkspace()"
@@ -166,8 +163,8 @@
                   <MemberListItem
                     v-for="memUser in members"
                     :key="memUser.userId"
-                    :memUser="memUser"
                     :draftWorkspace="draftWorkspace"
+                    :memUser="memUser"
                     :workspaceId="workspaceId"
                   />
                 </tbody>
@@ -188,9 +185,9 @@
             @enterPressed="inviteButtonHandler"
           />
           <VButton
+            :disabled="!isWorkspaceOwner"
             :requestStatus="inviteUserReqStatus"
             class="flex-none"
-            :disabled="!isWorkspaceOwner"
             tone="action"
             variant="solid"
             @click="inviteButtonHandler"
@@ -412,6 +409,12 @@ const editWorkspace = async () => {
   }
 };
 
+const openApiTokens = async () => {
+  await router.push({
+    name: "workspace-api-tokens",
+    params: { workspaceId: props.workspaceId },
+  });
+};
 const favouriteWorkspace = async (isFavourite: boolean) => {
   if (!props.workspaceId) return;
 
diff --git a/app/auth-portal/src/router.ts b/app/auth-portal/src/router.ts
index 0508439072..0a4fc6954c 100644
--- a/app/auth-portal/src/router.ts
+++ b/app/auth-portal/src/router.ts
@@ -78,8 +78,8 @@ export const routerOptions: RouterOptions = {
       props: true,
     },
     {
-      path: "/workspace/:workspaceId/authTokens",
-      name: "workspace-auth-tokens",
+      path: "/workspace/:workspaceId/tokens",
+      name: "workspace-api-tokens",
       component: WorkspaceAuthTokensPage,
       props: true,
     },
diff --git a/lib/vue-lib/src/design-system/icons/icon_set.ts b/lib/vue-lib/src/design-system/icons/icon_set.ts
index f6cb477531..7af71f3e80 100644
--- a/lib/vue-lib/src/design-system/icons/icon_set.ts
+++ b/lib/vue-lib/src/design-system/icons/icon_set.ts
@@ -99,6 +99,7 @@ import TreeParents from "~icons/fluent-mdl2/breadcrumb";
 import Docs from "~icons/fluent/book-question-mark-20-filled";
 import Password from "~icons/material-symbols-light/password";
 import Key from "~icons/material-symbols/key";
+import TiltedKey from "~icons/heroicons/key";
 import Scissors from "~icons/clarity/scissors-solid";
 import Frame from "~icons/iconamoon/frame-light";
 import MaterialSymbolsKeyboardDoubleArrowLeftRounded from "~icons/material-symbols/keyboard-double-arrow-left-rounded";
@@ -280,6 +281,7 @@ export const ICONS = Object.freeze({
   "input-type-string": InputTypeString,
   "input-type-text": InputTypeText,
   key: Key,
+  "key-tilted": TiltedKey,
   laptop: Laptop,
   link: Link,
   loader: Loader,