From a2d5aa997fc9335ea542f0e7fcdaa257e1ee0e1e Mon Sep 17 00:00:00 2001
From: Layon <144072822+LayonRibeiro@users.noreply.github.com>
Date: Thu, 28 Nov 2024 14:41:31 -0300
Subject: [PATCH] displaying info of the labels from form CreateSSHKeyPair
 (#9970)

---
 ui/src/views/compute/CreateSSHKeyPair.vue | 25 +++++++++--------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/ui/src/views/compute/CreateSSHKeyPair.vue b/ui/src/views/compute/CreateSSHKeyPair.vue
index 0f879cb3846..3b1c5476856 100644
--- a/ui/src/views/compute/CreateSSHKeyPair.vue
+++ b/ui/src/views/compute/CreateSSHKeyPair.vue
@@ -27,11 +27,8 @@
         @finish="handleSubmit"
         layout="vertical">
         <a-form-item name="name" ref="name">
-          <template #label :title="apiParams.name.description">
-            {{ $t('label.name') }}
-            <a-tooltip>
-              <info-circle-outlined style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
+          <template #label>
+            <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
           </template>
           <a-input
             v-model:value="form.name"
@@ -39,22 +36,16 @@
             v-focus="true" />
         </a-form-item>
         <a-form-item name="publickey" ref="publickey">
-          <template #label :title="apiParams.publickey.description">
-            {{ $t('label.publickey') }}
-            <a-tooltip>
-              <info-circle-outlined style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
+          <template #label>
+            <tooltip-label :title="$t('label.publickey')" :tooltip="apiParams.publickey.description"/>
           </template>
           <a-input
             v-model:value="form.publickey"
             :placeholder="apiParams.publickey.description"/>
         </a-form-item>
         <a-form-item name="domainid" ref="domainid" v-if="isAdminOrDomainAdmin()">
-          <template #label :title="apiParams.domainid.description">
-            {{ $t('label.domainid') }}
-            <a-tooltip>
-              <info-circle-outlined style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
+          <template #label>
+            <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
           </template>
           <a-select
             id="domain-selection"
@@ -105,11 +96,15 @@
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import { mixinForm } from '@/utils/mixin'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateSSHKeyPair',
   mixins: [mixinForm],
   props: {},
+  components: {
+    TooltipLabel
+  },
   data () {
     return {
       domains: [],