chore: Update buttons in integrations page (#11120)

app/javascript/dashboard/components/widgets/BackButton.vue

@@ -32,7 +32,7 @@ const buttonStyleClass = props.compact ? 'text-sm' : 'text-base';
     :class="buttonStyleClass"
     @click.capture="goBack"
   >
-    <fluent-icon icon="chevron-left" class="-ml-1" />
+    <i class="i-lucide-chevron-left -ml-1 text-lg" />
     {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
   </button>
 </template>

app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue

@@ -2,7 +2,7 @@
 import CustomBrandPolicyWrapper from 'dashboard/components/CustomBrandPolicyWrapper.vue';
 import { getHelpUrlForFeature } from '../../../../helper/featureHelper';
 import BackButton from '../../../../components/widgets/BackButton.vue';
-import ButtonV4 from 'dashboard/components-next/button/Button.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
@@ -85,7 +85,7 @@ const openInNewTab = url => {
           :href="helpURL"
           target="_blank"
           rel="noopener noreferrer"
-          class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-brand hover:underline"
+          class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-blue-text hover:underline"
         >
           {{ linkText }}
           <Icon
@@ -100,10 +100,10 @@ const openInNewTab = url => {
     >
       <slot name="actions" />
       <CustomBrandPolicyWrapper :show-on-custom-branded-instance="false">
-        <ButtonV4
+        <Button
           v-if="helpURL && linkText"
+          blue
           link
-          primary
           icon="i-lucide-chevron-right"
           trailing-icon
           :label="linkText"

app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue

@@ -3,7 +3,12 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, url } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     show: {
       type: Boolean,
@@ -145,16 +150,21 @@ export default {
           @blur="v$.app.content.url.$touch"
         />
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-button
+          <NextButton
+            faded
+            slate
+            type="reset"
+            :label="
+              $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.CREATE.FORM_CANCEL')
+            "
+            @click.prevent="closeModal"
+          />
+          <NextButton
+            type="submit"
+            :label="submitButtonLabel"
+            :disabled="v$.$invalid"
             :is-loading="isLoading"
-            :is-disabled="v$.$invalid"
+          />
-            data-testid="label-submit"
-          >
-            {{ submitButtonLabel }}
-          </woot-button>
-          <woot-button class="button clear" @click.prevent="closeModal">
-            {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.CREATE.FORM_CANCEL') }}
-          </woot-button>
         </div>
       </form>
     </div>

app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue

@@ -1,4 +1,6 @@
 <script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
 defineProps({
   app: {
     type: Object,
@@ -24,26 +26,24 @@ defineEmits(['edit', 'delete']);
       {{ app.content[0].url }}
     </td>
     <td class="flex gap-1 py-4 ltr:pr-4 rtl:pl-4 text-sm sm:pr-0 justify-end">
-      <woot-button
+      <Button
         v-tooltip.top="
           $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.EDIT_TOOLTIP')
         "
-        variant="smooth"
+        icon="i-lucide-pen"
-        size="tiny"
+        slate
-        color-scheme="secondary"
+        xs
-        class-names="grey-btn"
+        faded
-        icon="edit"
         @click="$emit('edit', app)"
       />
-      <woot-button
+      <Button
         v-tooltip.top="
           $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.DELETE_TOOLTIP')
         "
-        variant="smooth"
+        icon="i-lucide-trash-2"
-        color-scheme="alert"
+        xs
-        size="tiny"
+        ruby
-        icon="dismiss-circle"
+        faded
-        class-names="grey-btn"
         @click="$emit('delete', app)"
       />
     </td>

app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue

@@ -5,12 +5,14 @@ import DashboardAppModal from './DashboardAppModal.vue';
 import DashboardAppsRow from './DashboardAppsRow.vue';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     BaseSettingsHeader,
     DashboardAppModal,
     DashboardAppsRow,
+    NextButton,
   },
   mixins: [globalConfigMixin],
   data() {
@@ -93,13 +95,11 @@ export default {
       :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
     >
       <template #actions>
-        <woot-button
+        <NextButton
-          class="rounded-md button nice"
+          icon="i-lucide-circle-plus"
-          icon="add-circle"
+          :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.HEADER_BTN_TXT')"
           @click="openCreatePopup"
-        >
+        />
-          {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.HEADER_BTN_TXT') }}
-        </woot-button>
       </template>
     </BaseSettingsHeader>
     <div class="w-full overflow-x-auto text-slate-700 dark:text-slate-200">

app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue

@@ -8,7 +8,7 @@ import { useAlert } from 'dashboard/composables';
 import { useInstallationName } from 'shared/mixins/globalConfigMixin';
 
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   integrationId: {
@@ -101,7 +101,7 @@ const confirmDeletion = () => {
       >
         <div v-if="integrationEnabled">
           <div v-if="integrationAction === 'disconnect'">
-            <NextButton
+            <Button
               :label="
                 actionButtonText ||
                 $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')
@@ -112,18 +112,22 @@ const confirmDeletion = () => {
             />
           </div>
           <div v-else>
-            <NextButton faded blue>
+            <Button
-              {{ t('INTEGRATION_SETTINGS.WEBHOOK.CONFIGURE') }}
+              faded
-            </NextButton>
+              blue
+              :label="t('INTEGRATION_SETTINGS.WEBHOOK.CONFIGURE')"
+            />
           </div>
         </div>
       </router-link>
       <div v-if="!integrationEnabled">
         <slot name="action">
           <a :href="integrationAction">
-            <NextButton faded blue>
+            <Button
-              {{ t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT') }}
+              faded
-            </NextButton>
+              blue
+              :label="t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT')"
+            />
           </a>
         </slot>
       </div>

app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue

@@ -5,6 +5,8 @@ import { useI18n } from 'vue-i18n';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 import { useInstallationName } from 'shared/mixins/globalConfigMixin';
 
+import Button from 'dashboard/components-next/button/Button.vue';
+
 const props = defineProps({
   id: {
     type: [String, Number],
@@ -74,9 +76,7 @@ const actionURL = computed(() =>
       >
         <span class="text-base font-semibold">{{ name }}</span>
         <router-link :to="actionURL">
-          <woot-button class="clear link">
+          <Button :label="$t('INTEGRATION_APPS.CONFIGURE')" link />
-            {{ $t('INTEGRATION_APPS.CONFIGURE') }}
-          </woot-button>
         </router-link>
       </div>
       <p class="text-n-slate-11">

app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue

@@ -2,10 +2,12 @@
 import { mapGetters } from 'vuex';
 import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 import BaseSettingsHeader from 'dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     BaseSettingsHeader,
+    NextButton,
   },
   props: {
     integrationId: {
@@ -67,14 +69,12 @@ export default {
       :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
     >
       <template #actions>
-        <woot-button
+        <NextButton
           v-if="showAddButton"
-          class="rounded-md button nice"
+          icon="i-lucide-circle-plus"
-          icon="add-circle"
+          :label="$t('INTEGRATION_APPS.ADD_BUTTON')"
           @click="$emit('add')"
-        >
+        />
-          {{ $t('INTEGRATION_APPS.ADD_BUTTON') }}
-        </woot-button>
       </template>
     </BaseSettingsHeader>
     <div class="w-full">
@@ -104,13 +104,12 @@ export default {
               {{ inboxName(hook) }}
             </td>
             <td class="flex justify-end gap-1">
-              <woot-button
+              <NextButton
                 v-tooltip.top="$t('INTEGRATION_APPS.LIST.DELETE.BUTTON_TEXT')"
-                variant="smooth"
+                icon="i-lucide-trash-2"
-                color-scheme="alert"
+                xs
-                size="tiny"
+                ruby
-                icon="dismiss-circle"
+                faded
-                class-names="grey-btn"
                 @click="$emit('delete', hook)"
               />
             </td>

app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue

@@ -4,9 +4,13 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 import { FormKit } from '@formkit/vue';
+
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
   components: {
     FormKit,
+    NextButton,
   },
   props: {
     integrationId: {
@@ -139,12 +143,18 @@ export default {
         validation-name="Inbox"
       />
       <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button type="submit" :loading="uiFlags.isCreatingHook">
+        <NextButton
-          {{ $t('INTEGRATION_APPS.ADD.FORM.SUBMIT') }}
+          faded
-        </woot-button>
+          slate
-        <woot-button type="reset" class="button clear" @click.prevent="onClose">
+          type="reset"
-          {{ $t('INTEGRATION_APPS.ADD.FORM.CANCEL') }}
+          :label="$t('INTEGRATION_APPS.ADD.FORM.CANCEL')"
-        </woot-button>
+          @click.prevent="onClose"
+        />
+        <NextButton
+          type="submit"
+          :label="$t('INTEGRATION_APPS.ADD.FORM.SUBMIT')"
+          :is-loading="uiFlags.isCreatingHook"
+        />
       </div>
     </FormKit>
   </div>

app/javascript/dashboard/routes/dashboard/settings/integrations/Shopify.vue

@@ -11,6 +11,7 @@ import integrationAPI from 'dashboard/api/integrations';
 
 import Input from 'dashboard/components-next/input/Input.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
   error: {
@@ -105,12 +106,11 @@ onMounted(() => {
         }"
       >
         <template #action>
-          <button
+          <Button
-            class="rounded button success nice"
+            teal
+            :label="$t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT')"
             @click="openStoreUrlDialog"
-          >
+          />
-            {{ $t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT') }}
-          </button>
         </template>
       </Integration>
       <div

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue

@@ -1,6 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import NewWebhook from './NewWebHook.vue';
 import EditWebhook from './EditWebHook.vue';
 import WebhookRow from './WebhookRow.vue';
@@ -10,6 +11,7 @@ import SettingsLayout from '../../SettingsLayout.vue';
 export default {
   components: {
     SettingsLayout,
+    NextButton,
     BaseSettingsHeader,
     NewWebhook,
     EditWebhook,
@@ -103,13 +105,12 @@ export default {
         :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
       >
         <template #actions>
-          <woot-button
+          <NextButton
-            class="button nice rounded-md"
+            blue
-            icon="add-circle"
+            icon="i-lucide-circle-plus"
+            :label="$t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT')"
             @click="openAddPopup"
-          >
+          />
-            {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
-          </woot-button>
         </template>
       </BaseSettingsHeader>
     </template>

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue

@@ -3,6 +3,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, url, minLength } from '@vuelidate/validators';
 import wootConstants from 'dashboard/constants/globals';
 import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsHelper';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const { EXAMPLE_WEBHOOK_URL } = wootConstants;
 
@@ -18,6 +19,9 @@ const SUPPORTED_WEBHOOK_EVENTS = [
 ];
 
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     value: {
       type: Object,
@@ -123,17 +127,19 @@ export default {
     </div>
 
     <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-      <div class="w-full">
+      <NextButton
-        <woot-button
+        faded
-          :disabled="v$.$invalid || isSubmitting"
+        slate
-          :is-loading="isSubmitting"
+        type="reset"
-        >
+        :label="$t('INTEGRATION_SETTINGS.WEBHOOK.FORM.CANCEL')"
-          {{ submitLabel }}
+        @click.prevent="$emit('cancel')"
-        </woot-button>
+      />
-        <woot-button class="button clear" @click.prevent="$emit('cancel')">
+      <NextButton
-          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.CANCEL') }}
+        type="submit"
-        </woot-button>
+        :disabled="v$.$invalid || isSubmitting"
-      </div>
+        :is-loading="isSubmitting"
+        :label="submitLabel"
+      />
     </div>
   </form>
 </template>

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue

@@ -4,6 +4,8 @@ import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsH
 import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
 import { useI18n } from 'vue-i18n';
 
+import Button from 'dashboard/components-next/button/Button.vue';
+
 const props = defineProps({
   webhook: {
     type: Object,
@@ -47,20 +49,20 @@ const subscribedEvents = computed(() => {
     </td>
     <td class="py-4 min-w-xs">
       <div class="flex justify-end gap-1">
-        <woot-button
+        <Button
           v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')"
-          variant="smooth"
+          icon="i-lucide-pen"
-          size="tiny"
+          slate
-          color-scheme="secondary"
+          xs
-          icon="edit"
+          faded
           @click="emit('edit', webhook)"
         />
-        <woot-button
+        <Button
           v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')"
-          variant="smooth"
+          icon="i-lucide-trash-2"
-          color-scheme="alert"
+          xs
-          size="tiny"
+          ruby
-          icon="dismiss-circle"
+          faded
           @click="emit('delete', webhook, index)"
         />
       </div>