UI improvements to the generate panel

systeminit · Dec 18, 2024 · a41cbb6 · a41cbb6
1 parent 47f07c7
commit a41cbb6
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;