From a41cbb68659f983e0acd3a7dae478a68ba95e1e2 Mon Sep 17 00:00:00 2001
From: wendybujalski <wendydbujalski@gmail.com>
Date: Wed, 18 Dec 2024 14:47:17 -0500
Subject: [PATCH] UI improvements to the generate panel

---
 .../src/components/Ai/GenerateAwsFunctionPanel.vue   | 10 +++++++---
 app/web/src/components/AssetCard.vue                 |  2 +-
 app/web/src/components/AssetEditorHeader.vue         |  4 +++-
 app/web/src/components/EditingPill.vue               |  2 +-
 app/web/src/store/func/funcs.store.ts                | 12 ++++++------
 5 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/web/src/components/Ai/GenerateAwsFunctionPanel.vue b/app/web/src/components/Ai/GenerateAwsFunctionPanel.vue
index 80691015ec..a250ffa62a 100644
--- a/app/web/src/components/Ai/GenerateAwsFunctionPanel.vue
+++ b/app/web/src/components/Ai/GenerateAwsFunctionPanel.vue
@@ -2,6 +2,7 @@
   <div class="flex flex-row gap-xs items-end p-xs justify-end w-full">
     <VormInput
       v-model="aws"
+      v-tooltip="'This feature currently only supports AWS.'"
       label="CLI"
       type="text"
       disabled
@@ -10,14 +11,18 @@
     />
     <VormInput
       v-model="awsCommand.command"
-      label="Command"
+      label="Service"
+      :placeholder="`AWS service (e.g. &quot;${kind?.exampleCommand.service}&quot;)`"
+      class="flex-grow"
       type="text"
       :disabled="!!isLocked || generateRequestStatus.isPending"
       @enterPressed="generateAwsFunction"
     />
     <VormInput
       v-model="awsCommand.subcommand"
-      label="Subcommand"
+      label="Command"
+      :placeholder="`AWS command (e.g. &quot;${kind?.exampleCommand.command}&quot;)`"
+      class="flex-grow"
       type="text"
       :disabled="!!isLocked || generateRequestStatus.isPending"
       @enterPressed="generateAwsFunction"
@@ -73,7 +78,6 @@ const awsCommand = reactive({ command: "", subcommand: "" });
 function setCommand(command?: Readonly<AwsCliCommand>) {
   if (command) Object.assign(awsCommand, command);
 }
-watch(() => props.kind?.exampleCommand, setCommand, { immediate: true });
 watch(() => funcStore.generatingFuncCode[props.funcId], setCommand, {
   immediate: true,
 });
diff --git a/app/web/src/components/AssetCard.vue b/app/web/src/components/AssetCard.vue
index 0c38ce51cb..8a36eaeab4 100644
--- a/app/web/src/components/AssetCard.vue
+++ b/app/web/src/components/AssetCard.vue
@@ -28,7 +28,7 @@
         </Stack>
 
         <!-- ICONS AFTER THIS POINT ARE RIGHT ALIGNED DUE TO THE ml-auto STYLE ON THIS DIV -->
-        <div class="ml-auto flex flex-none gap-xs">
+        <div class="ml-auto flex flex-row items-center flex-none gap-xs">
           <EditingPill v-if="!asset.isLocked" :color="asset.color" />
           <IconButton
             v-if="canContribute"
diff --git a/app/web/src/components/AssetEditorHeader.vue b/app/web/src/components/AssetEditorHeader.vue
index e15b4c8522..da52465e75 100644
--- a/app/web/src/components/AssetEditorHeader.vue
+++ b/app/web/src/components/AssetEditorHeader.vue
@@ -57,7 +57,9 @@
         v-if="generateAwsFunction.available"
         icon="sparkles"
         size="lg"
-        :tooltip="`Generate ${generateAwsFunction.kind?.description}`"
+        :tooltip="`${generateAwsFunction.visible ? 'Close ' : ''}Generate ${
+          generateAwsFunction.kind?.description
+        }`"
         :selected="generateAwsFunction.visible"
         @click="generateAwsFunction.toggle()"
       />
diff --git a/app/web/src/components/EditingPill.vue b/app/web/src/components/EditingPill.vue
index e026c2a7ef..224da167f3 100644
--- a/app/web/src/components/EditingPill.vue
+++ b/app/web/src/components/EditingPill.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="p-2xs m-0 rounded text-xs font-bold"
+    class="p-2xs m-0 rounded text-xs font-bold max-h-fit"
     :style="{
       backgroundColor: $props.color,
       color: `#${text.toHex()}`,
diff --git a/app/web/src/store/func/funcs.store.ts b/app/web/src/store/func/funcs.store.ts
index 3c39809317..a64f944720 100644
--- a/app/web/src/store/func/funcs.store.ts
+++ b/app/web/src/store/func/funcs.store.ts
@@ -955,22 +955,22 @@ export const GenerateAwsFunctionKinds = {
   AssetSchema: {
     description: "AWS Asset Schema",
     exampleCommand: {
-      command: "sqs",
-      subcommand: "create-queue",
+      service: "sqs",
+      command: "create-queue",
     },
   },
   Action: {
     description: "AWS Action Function",
     exampleCommand: {
-      command: "sqs",
-      subcommand: "describe-queue",
+      service: "sqs",
+      command: "describe-queue",
     },
   },
   Management: {
     description: "AWS Import Function",
     exampleCommand: {
-      command: "sqs",
-      subcommand: "describe-queue",
+      service: "sqs",
+      command: "describe-queue",
     },
   },
 } as const;