akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: ui for errors in byok

Browse Source
This commit is contained in:
aakashb95
2026-01-19 13:17:28 +05:30
parent 4019ccd678
commit a801eb8c44
6 changed files with 98 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
+54 -39
View File
@@ -1,8 +1,9 @@
<script setup>
import { defineProps, defineEmits } from 'vue';
import { useI18n } from 'vue-i18n';
import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
import { useBranding } from 'shared/composables/useBranding';
import Button from 'dashboard/components-next/button/Button.vue';
import Banner from 'dashboard/components-next/banner/Banner.vue';
const props = defineProps({
integrationId: {
@@ -13,54 +14,68 @@ const props = defineProps({
defineEmits(['add', 'delete']);
const { integration, hasConnectedHooks } = useIntegrationHook(
props.integrationId
);
const { t } = useI18n();
const { integration, hasConnectedHooks, hookNeedsReauthorization } =
useIntegrationHook(props.integrationId);
const { replaceInstallationName } = useBranding();
</script>
<template>
<div
class="outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow flex-grow overflow-auto p-4"
>
<div class="flex items-center justify-center">
<div class="flex h-16 w-16 items-center justify-center">
<img
:src="`/dashboard/images/integrations/${integrationId}.png`"
class="max-w-full rounded-md border border-n-weak shadow-sm block dark:hidden bg-n-alpha-3 dark:bg-n-alpha-2"
/>
<img
:src="`/dashboard/images/integrations/${integrationId}-dark.png`"
class="max-w-full rounded-md border border-n-weak shadow-sm hidden dark:block bg-n-alpha-3 dark:bg-n-alpha-2"
/>
</div>
<div class="flex flex-col justify-center m-0 mx-4 flex-1">
<h3 class="mb-1 text-xl font-medium text-n-slate-12">
{{ integration.name }}
</h3>
<p class="text-n-slate-11 text-sm leading-6">
{{ replaceInstallationName(integration.description) }}
</p>
</div>
<div class="flex justify-center items-center mb-0 w-[15%]">
<div v-if="hasConnectedHooks">
<div @click="$emit('delete', integration.hooks[0])">
<div class="flex flex-col gap-4">
<Banner v-if="hookNeedsReauthorization" color="ruby">
{{ t('INTEGRATION_APPS.REAUTHORIZE.DESCRIPTION') }}
<a
href="https://platform.openai.com/account/api-keys"
target="_blank"
rel="noopener noreferrer"
class="underline font-medium"
>
{{ t('INTEGRATION_APPS.REAUTHORIZE.OPENAI_LINK') }}
</a>
</Banner>
<div
class="outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow flex-grow overflow-auto p-4"
>
<div class="flex items-center justify-center">
<div class="flex h-16 w-16 items-center justify-center">
<img
:src="`/dashboard/images/integrations/${integrationId}.png`"
class="max-w-full rounded-md border border-n-weak shadow-sm block dark:hidden bg-n-alpha-3 dark:bg-n-alpha-2"
/>
<img
:src="`/dashboard/images/integrations/${integrationId}-dark.png`"
class="max-w-full rounded-md border border-n-weak shadow-sm hidden dark:block bg-n-alpha-3 dark:bg-n-alpha-2"
/>
</div>
<div class="flex flex-col justify-center m-0 mx-4 flex-1">
<h3 class="mb-1 text-xl font-medium text-n-slate-12">
{{ integration.name }}
</h3>
<p class="text-n-slate-11 text-sm leading-6">
{{ replaceInstallationName(integration.description) }}
</p>
</div>
<div class="flex justify-center items-center mb-0 w-[15%]">
<div v-if="hasConnectedHooks">
<div @click="$emit('delete', integration.hooks[0])">
<Button
ruby
faded
:label="$t('INTEGRATION_APPS.DISCONNECT.BUTTON_TEXT')"
/>
</div>
</div>
<div v-else>
<Button
ruby
blue
faded
:label="$t('INTEGRATION_APPS.DISCONNECT.BUTTON_TEXT')"
:label="$t('INTEGRATION_APPS.CONNECT.BUTTON_TEXT')"
@click="$emit('add')"
/>
</div>
</div>
<div v-else>
<Button
blue
faded
:label="$t('INTEGRATION_APPS.CONNECT.BUTTON_TEXT')"
@click="$emit('add')"
/>
</div>
</div>
</div>
</div>