fix form-input

1 files changed, 16 insertions, 11 deletions

diff --git a/src/views/_sila/ResourceManagement/Power.vue b/src/views/_sila/ResourceManagement/Power.vue
index 43256db2..aaa9929f 100644
--- a/src/views/_sila/ResourceManagement/Power.vue
+++ b/src/views/_sila/ResourceManagement/Power.vue
@@ -38,17 +38,21 @@
           <b-col sm="8" md="6" xl="4">
             <b-form-group
               id="input-group-1"
-              :label="$t('pagePower.powerCapLabel')"
               label-for="input-1"
+              variant="with-label"
             >
-              <b-form-text id="power-help-text">
-                {{
-                  $t('pagePower.powerCapLabelTextInfo', {
-                    min: 500,
-                    max: 3000,
-                  })
-                }}
-              </b-form-text>
+              <template #label>
+                {{ $t('pagePower.powerCapLabel') }}
+
+                <info-tooltip
+                  :title="
+                    $t('pagePower.powerCapLabelTextInfo', {
+                      min: 500,
+                      max: 3000,
+                    })
+                  "
+                />
+              </template>
 
               <b-form-input
                 id="input-1"
@@ -59,7 +63,7 @@
                 "
                 data-test-id="power-input-powerCapValue"
                 type="number"
-                aria-describedby="power-help-text"
+                variant="with-label"
                 :state="getValidationState($v.powerCapValue)"
               ></b-form-input>
 
@@ -93,6 +97,7 @@ import PageTitle from '@/components/_sila/Global/PageTitle';
 import LoadingBarMixin, {
   loading,
 } from '@/components/_sila/Mixins/LoadingBarMixin';
+import InfoTooltip from '@/components/_sila/Global/InfoTooltip';
 import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js';
 import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
 import { requiredIf, between } from 'vuelidate/lib/validators';
@@ -100,7 +105,7 @@ import { mapGetters } from 'vuex';
 
 export default {
   name: 'Power',
-  components: { PageTitle },
+  components: { PageTitle, InfoTooltip },
   mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin],
   beforeRouteLeave(to, from, next) {
     this.hideLoader();