chore: Update buttons in agents page (#11129)

app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 import { useVuelidate } from '@vuelidate/core';
 import { required, email } from '@vuelidate/validators';
-import WootSubmitButton from 'dashboard/components/buttons/FormSubmitButton.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const emit = defineEmits(['close']);
 
@@ -148,16 +148,19 @@ const addAgent = async () => {
       </div>
 
       <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <div class="w-full">
-          <WootSubmitButton
-            :disabled="v$.$invalid || uiFlags.isCreating"
-            :button-text="$t('AGENT_MGMT.ADD.FORM.SUBMIT')"
-            :loading="uiFlags.isCreating"
-          />
-          <button class="button clear" @click.prevent="emit('close')">
-            {{ $t('AGENT_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-          </button>
-        </div>
+        <Button
+          faded
+          slate
+          type="reset"
+          :label="$t('AGENT_MGMT.ADD.CANCEL_BUTTON_TEXT')"
+          @click.prevent="emit('close')"
+        />
+        <Button
+          type="submit"
+          :label="$t('AGENT_MGMT.ADD.FORM.SUBMIT')"
+          :disabled="v$.$invalid || uiFlags.isCreating"
+          :is-loading="uiFlags.isCreating"
+        />
       </div>
     </form>
   </div>

app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue

@@ -5,7 +5,7 @@ import { required, minLength } from '@vuelidate/validators';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
-import WootSubmitButton from 'dashboard/components/buttons/FormSubmitButton.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 import Auth from '../../../../api/auth';
 import wootConstants from 'dashboard/constants/globals';
 
@@ -200,25 +200,31 @@ const resetPassword = async () => {
         </label>
       </div>
 
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <div class="w-[50%]">
-          <WootSubmitButton
-            :disabled="v$.$invalid || uiFlags.isUpdating"
-            :button-text="$t('AGENT_MGMT.EDIT.FORM.SUBMIT')"
-            :loading="uiFlags.isUpdating"
-          />
-          <button class="button clear" @click.prevent="emit('close')">
-            {{ $t('AGENT_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
-          </button>
-        </div>
-        <div class="w-[50%] text-right">
-          <woot-button
-            icon="lock-closed"
-            variant="clear"
+      <div class="flex flex-row justify-start w-full gap-2 px-0 py-2">
+        <div class="w-[50%] ltr:text-left rtl:text-right">
+          <Button
+            ghost
+            type="button"
+            icon="i-lucide-lock-keyhole"
+            class="!px-2"
+            :label="$t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_RESET_BUTTON')"
             @click.prevent="resetPassword"
-          >
-            {{ $t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_RESET_BUTTON') }}
-          </woot-button>
+          />
+        </div>
+        <div class="w-[50%] flex justify-end items-center gap-2">
+          <Button
+            faded
+            slate
+            type="reset"
+            :label="$t('AGENT_MGMT.EDIT.CANCEL_BUTTON_TEXT')"
+            @click.prevent="emit('close')"
+          />
+          <Button
+            type="submit"
+            :label="$t('AGENT_MGMT.EDIT.FORM.SUBMIT')"
+            :disabled="v$.$invalid || uiFlags.isUpdating"
+            :is-loading="uiFlags.isUpdating"
+          />
         </div>
       </div>
     </form>

app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue

@@ -13,6 +13,7 @@ import AddAgent from './AddAgent.vue';
 import EditAgent from './EditAgent.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import SettingsLayout from '../SettingsLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const getters = useStoreGetters();
 const store = useStore();
@@ -149,13 +150,11 @@ const confirmDeletion = () => {
         feature-name="agents"
       >
         <template #actions>
-          <woot-button
-            class="rounded-md button nice"
-            icon="add-circle"
+          <Button
+            icon="i-lucide-circle-plus"
+            :label="$t('AGENT_MGMT.HEADER_BTN_TXT')"
             @click="openAddPopup"
-          >
-            {{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
-          </woot-button>
+          />
         </template>
       </BaseSettingsHeader>
     </template>
@@ -225,24 +224,22 @@ const confirmDeletion = () => {
             </td>
             <td class="py-4">
               <div class="flex justify-end gap-1">
-                <woot-button
+                <Button
                   v-if="showEditAction(agent)"
                   v-tooltip.top="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
-                  variant="smooth"
-                  size="tiny"
-                  color-scheme="secondary"
-                  icon="edit"
-                  class-names="grey-btn"
+                  icon="i-lucide-pen"
+                  slate
+                  xs
+                  faded
                   @click="openEditPopup(agent)"
                 />
-                <woot-button
+                <Button
                   v-if="showDeleteAction(agent)"
                   v-tooltip.top="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
-                  variant="smooth"
-                  color-scheme="alert"
-                  size="tiny"
-                  icon="dismiss-circle"
-                  class-names="grey-btn"
+                  icon="i-lucide-trash-2"
+                  xs
+                  ruby
+                  faded
                   :is-loading="loading[agent.id]"
                   @click="openDeletePopup(agent, index)"
                 />