LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: Update buttons in integrations page (#11120)

Browse Source
This commit is contained in:
Sivin Varghese
2025-03-20 21:15:47 +05:30
committed by GitHub
parent b2debdc912
commit 46289a6491
13 changed files with 125 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/dashboard/components/widgets/BackButton.vue
View File

@@ -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>

8
app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
View File

@@ -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"

28
app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
View File

@@ -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>

24
app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
View File

@@ -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"
size="tiny"
color-scheme="secondary"
class-names="grey-btn"
icon="edit"
icon="i-lucide-pen"
slate
xs
faded
@click="$emit('edit', app)"
/>
<woot-button
<Button
v-tooltip.top="
$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.DELETE_TOOLTIP')
"
variant="smooth"
color-scheme="alert"
size="tiny"
icon="dismiss-circle"
class-names="grey-btn"
icon="i-lucide-trash-2"
xs
ruby
faded
@click="$emit('delete', app)"
/>
</td>

12
app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
View File

@@ -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
class="rounded-md button nice"
icon="add-circle"
<NextButton
icon="i-lucide-circle-plus"
: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">

20
app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
View File

@@ -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>
{{ t('INTEGRATION_SETTINGS.WEBHOOK.CONFIGURE') }}
</NextButton>
<Button
faded
blue
:label="t('INTEGRATION_SETTINGS.WEBHOOK.CONFIGURE')"
/>
</div>
</div>
</router-link>
<div v-if="!integrationEnabled">
<slot name="action">
<a :href="integrationAction">
<NextButton faded blue>
{{ t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT') }}
</NextButton>
<Button
faded
blue
:label="t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT')"
/>
</a>
</slot>
</div>

6
app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
View File

@@ -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">
{{ $t('INTEGRATION_APPS.CONFIGURE') }}
</woot-button>
<Button :label="$t('INTEGRATION_APPS.CONFIGURE')" link />
</router-link>
</div>
<p class="text-n-slate-11">

23
app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
View File

@@ -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="add-circle"
icon="i-lucide-circle-plus"
: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"
color-scheme="alert"
size="tiny"
icon="dismiss-circle"
class-names="grey-btn"
icon="i-lucide-trash-2"
xs
ruby
faded
@click="$emit('delete', hook)"
/>
</td>

22
app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
View File

@@ -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">
{{ $t('INTEGRATION_APPS.ADD.FORM.SUBMIT') }}
</woot-button>
<woot-button type="reset" class="button clear" @click.prevent="onClose">
{{ $t('INTEGRATION_APPS.ADD.FORM.CANCEL') }}
</woot-button>
<NextButton
faded
slate
type="reset"
:label="$t('INTEGRATION_APPS.ADD.FORM.CANCEL')"
@click.prevent="onClose"
/>
<NextButton
type="submit"
:label="$t('INTEGRATION_APPS.ADD.FORM.SUBMIT')"
:is-loading="uiFlags.isCreatingHook"
/>
</div>
</FormKit>
</div>

10
app/javascript/dashboard/routes/dashboard/settings/integrations/Shopify.vue
View File

@@ -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
class="rounded button success nice"
<Button
teal
:label="$t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT')"
@click="openStoreUrlDialog"
>
{{ $t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT') }}
</button>
/>
</template>
</Integration>
<div

13
app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
View File

@@ -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
class="button nice rounded-md"
icon="add-circle"
<NextButton
blue
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>

28
app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
View File

@@ -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">
<woot-button
:disabled="v$.$invalid || isSubmitting"
:is-loading="isSubmitting"
>
{{ submitLabel }}
</woot-button>
<woot-button class="button clear" @click.prevent="$emit('cancel')">
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.CANCEL') }}
</woot-button>
</div>
<NextButton
faded
slate
type="reset"
:label="$t('INTEGRATION_SETTINGS.WEBHOOK.FORM.CANCEL')"
@click.prevent="$emit('cancel')"
/>
<NextButton
type="submit"
:disabled="v$.$invalid || isSubmitting"
:is-loading="isSubmitting"
:label="submitLabel"
/>
</div>
</form>
</template>

22
app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
View File

@@ -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"
size="tiny"
color-scheme="secondary"
icon="edit"
icon="i-lucide-pen"
slate
xs
faded
@click="emit('edit', webhook)"
/>
<woot-button
<Button
v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')"
variant="smooth"
color-scheme="alert"
size="tiny"
icon="dismiss-circle"
icon="i-lucide-trash-2"
xs
ruby
faded
@click="emit('delete', webhook, index)"
/>
</div>