Improve Integration Cards #643
Conversation
- Introduced new action components for Email, Slack, Discord, Webhook, and Google Sheets integrations, enhancing the user interface for managing these integrations. - Updated the `integrations.json` files to include `actions_file_name` for each integration, linking them to their respective action components. - Improved the `GoogleSheetsIntegrationActions.vue` component by replacing direct provider information display with a badge for better UI consistency. These changes aim to streamline integration management and improve the overall user experience.
WalkthroughThe changes in this pull request introduce new properties to various notification integrations within the Changes
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (10)
client/components/open/integrations/components/IntegrationCard.vue (3)
Line range hint
192-199: Add error handling for component resolutionThe current implementation might throw runtime errors if the component specified in
actions_file_namedoesn't exist. Consider adding error handling.const actionsComponent = computed(() => { if(integrationTypeInfo.value?.actions_file_name || false) { - return resolveComponent(integrationTypeInfo.value.actions_file_name) + try { + return resolveComponent(integrationTypeInfo.value.actions_file_name) + } catch (error) { + console.error(`Failed to load action component: ${integrationTypeInfo.value.actions_file_name}`, error) + return null + } } return null })
Line range hint
201-223: Improve error handling and URL constructionSeveral improvements can be made to enhance robustness:
- Use URL construction utilities instead of string replacement
- Reset loading state in catch block
- Add type checking for error object
const deleteFormIntegration = (integrationid) => { alert.confirm("Do you really want to delete this form integration?", () => { + loadingDelete.value = true + const url = new URL(`/open/forms/${props.form.id}/integration/${integrationid}`, window.location.origin) opnFetch( - "/open/forms/{formid}/integration/{integrationid}" - .replace("{formid}", props.form.id) - .replace("{integrationid}", integrationid), + url.toString(), { method: "DELETE" }, ) .then((data) => { + loadingDelete.value = false if (data.type === "success") { alert.success(data.message) formIntegrationsStore.remove(integrationid) } else { alert.error("Something went wrong!") } }) .catch((error) => { + loadingDelete.value = false - alert.error(error.data.message) + const errorMessage = error?.data?.message || 'Failed to delete integration' + alert.error(errorMessage) }) }) }
Line range hint
1-223: Architecture feedback on integration managementThe component effectively serves as a central hub for managing different types of integrations, aligning well with the PR's objective of improving integration management. The dynamic loading of action components provides good extensibility for adding new integration types.
Consider documenting the expected interface for action components to help maintain consistency as new integrations are added.
client/components/open/integrations/components/WebhookIntegrationActions.vue (1)
18-29: Add type validation for integration data structureThe component assumes a specific structure for
integration.databut doesn't validate it.Consider adding runtime prop validation:
const props = defineProps({ integration: { type: Object, required: true, + validator(value) { + return value.data && typeof value.data === 'object' + } }, form: { type: Object, required: true, + validator(value) { + return value.id && typeof value.id === 'string' + } } })client/components/open/integrations/components/SlackIntegrationActions.vue (1)
1-46: Extract common integration functionality into a base componentThis component shares significant code with WebhookIntegrationActions and DiscordIntegrationActions. Consider creating a base component to reduce duplication.
Create a new base component
BaseIntegrationActions.vue:<!-- BaseIntegrationActions.vue --> <template> <div class="flex flex-1 items-center"> <div v-if="integration" class="hidden md:block space-y-1" > <slot :integration="integration" /> </div> </div> </template> <script setup> const props = defineProps({ integration: { type: Object, required: true, }, form: { type: Object, required: true, } }) // ... polling logic ... </script>Then simplify this component to:
<template> <BaseIntegrationActions :integration="integration" :form="form" > <template #default="{ integration }"> <UBadge :label="mentionAsText(integration.data.message)" color="gray" size="xs" class="max-w-[300px] truncate" /> </template> </BaseIntegrationActions> </template> <script setup> import { mentionAsText } from '~/lib/utils.js' import BaseIntegrationActions from './BaseIntegrationActions.vue' defineProps({ integration: { type: Object, required: true, }, form: { type: Object, required: true, } }) </script>client/components/open/integrations/components/DiscordIntegrationActions.vue (2)
8-8: Add Discord message format validationThe component should validate Discord-specific message format before displaying.
-:label="mentionAsText(integration.data.message)" +:label="isValidDiscordMessage(integration.data.message) ? mentionAsText(integration.data.message) : 'Invalid message format'"Add this validation helper:
const isValidDiscordMessage = (message) => { // Discord messages are limited to 2000 characters if (!message || typeof message !== 'string' || message.length > 2000) { return false } return true }
1-46: Consider implementing integration-specific error handlingAll three integration components (Webhook, Slack, Discord) would benefit from a shared error handling strategy while maintaining integration-specific error messages.
Consider creating an error handling utility:
// integrationErrors.js export const ERROR_TYPES = { INVALID_FORMAT: 'invalid_format', NETWORK_ERROR: 'network_error', TIMEOUT: 'timeout' } export const getErrorMessage = (type, integration) => { const messages = { discord: { [ERROR_TYPES.INVALID_FORMAT]: 'Invalid Discord message format', [ERROR_TYPES.NETWORK_ERROR]: 'Failed to connect to Discord', [ERROR_TYPES.TIMEOUT]: 'Discord connection timed out' }, slack: { // Slack-specific messages }, webhook: { // Webhook-specific messages } } return messages[integration]?.[type] || 'An unknown error occurred' }This would provide consistent error handling across all integration components while maintaining platform-specific error messages.
client/components/open/integrations/components/EmailIntegrationActions.vue (3)
1-29: Consider accessibility and mobile experience improvementsThe current implementation has some UX concerns:
- Badges lack accessibility attributes for screen readers
- Content is completely hidden on mobile without an alternative view
- Truncated content has no way to view the full text
Consider these improvements:
<div class="flex flex-1 items-center"> <div v-if="integration" - class="hidden md:block space-y-1" + class="space-y-1 w-full" > <UBadge :label="mentionAsText(integration.data.subject)" + :title="mentionAsText(integration.data.subject)" color="gray" size="xs" + aria-label="Email subject" class="max-w-[300px] truncate" />
34-43: Add type validation for integration.data structureThe props definition could benefit from more specific validation of the integration.data structure to ensure required fields are present.
Consider adding validator functions:
const props = defineProps({ integration: { type: Object, required: true, + validator(value) { + return value.data && + typeof value.data.subject === 'string' && + typeof value.data.send_to === 'string' + } }, form: { type: Object, required: true, } })
61-69: Enhance email processing robustnessThe email processing functions could benefit from additional validation and error handling.
Consider these improvements:
const firstEmail = (sendTo) => { + if (!sendTo) return '' const emails = mentionAsText(sendTo).split('\n').filter(Boolean) + const validEmails = emails.filter(email => email.includes('@')) - return emails[0] || '' + return validEmails[0] || '' } const additionalEmailsCount = (sendTo) => { + if (!sendTo) return 0 const emails = mentionAsText(sendTo).split('\n').filter(Boolean) + const validEmails = emails.filter(email => email.includes('@')) - return Math.max(0, emails.length - 1) + return Math.max(0, validEmails.length - 1) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
api/resources/data/forms/integrations.json(2 hunks)client/components/open/integrations/components/DiscordIntegrationActions.vue(1 hunks)client/components/open/integrations/components/EmailIntegrationActions.vue(1 hunks)client/components/open/integrations/components/GoogleSheetsIntegrationActions.vue(2 hunks)client/components/open/integrations/components/IntegrationCard.vue(1 hunks)client/components/open/integrations/components/SlackIntegrationActions.vue(1 hunks)client/components/open/integrations/components/WebhookIntegrationActions.vue(1 hunks)client/data/forms/integrations.json(2 hunks)client/lib/utils.js(1 hunks)
🔇 Additional comments (6)
client/components/open/integrations/components/IntegrationCard.vue (1)
6-7: LGTM: Responsive layout improvements
The width classes and conditional flex-grow provide a good responsive design pattern, ensuring proper layout on both mobile and desktop screens.
client/components/open/integrations/components/GoogleSheetsIntegrationActions.vue (2)
7-12: LGTM! Clean implementation of the provider badge.
The UBadge implementation provides a cleaner and more consistent UI for displaying provider information. Good use of truncation and sizing properties.
40-41: Verify the mentionAsText utility implementation.
The utility import looks correct, but let's verify its implementation and test coverage.
client/data/forms/integrations.json (1)
7-7: Verify the existence of all referenced action components.
The new actions_file_name properties have been added consistently. Let's verify that all referenced action components exist in the codebase.
Also applies to: 16-16, 24-24, 32-32
✅ Verification successful
All referenced action components exist in the codebase
All action components referenced in integrations.json are present in the expected location under client/components/open/integrations/components/:
- EmailIntegrationActions.vue
- SlackIntegrationActions.vue
- DiscordIntegrationActions.vue
- WebhookIntegrationActions.vue
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify existence of all action components
# Check for all referenced action components
echo "Checking for EmailIntegrationActions..."
fd -e vue "EmailIntegrationActions.vue" client/components
echo "Checking for SlackIntegrationActions..."
fd -e vue "SlackIntegrationActions.vue" client/components
echo "Checking for DiscordIntegrationActions..."
fd -e vue "DiscordIntegrationActions.vue" client/components
echo "Checking for WebhookIntegrationActions..."
fd -e vue "WebhookIntegrationActions.vue" client/components
Length of output: 903
api/resources/data/forms/integrations.json (1)
7-7: LGTM! Configurations are properly synchronized.
The API-side configuration perfectly mirrors the client-side changes, maintaining consistency across the application.
Also applies to: 16-16, 24-24, 32-32
✅ Verification successful
Let me try a different approach to verify the configurations.
Configurations are perfectly synchronized between client and API
After comparing both configuration files, they are identical in structure and content, including:
- All integration entries (email, slack, discord, webhook, zapier, google_sheets)
- All properties for each integration (name, icon, section_name, file_name, actions_file_name, etc.)
- Matching values for all fields, including PRO status indicators and help page slugs
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify configuration consistency between client and API
# Compare the two configuration files
echo "Comparing client and API configurations..."
diff client/data/forms/integrations.json api/resources/data/forms/integrations.json
Length of output: 180
Script:
#!/bin/bash
# First, let's check if both files exist and show their contents
echo "=== API Configuration ==="
cat api/resources/data/forms/integrations.json || echo "File not found"
echo -e "\n=== Client Configuration ==="
cat client/data/forms/integrations.json || echo "File not found"
Length of output: 3506
client/lib/utils.js (1)
113-123:
Consider using DOM parser instead of regex for HTML processing
While regex can work for simple cases, it's generally not recommended for HTML parsing due to potential edge cases and security concerns.
Consider using DOMParser for more robust HTML handling:
export const mentionAsText = (content) => {
if (!content) return ''
- // Parse the content and style mentions
- return content.replace(
- /<span\s+mention-field-id="([^"]+)"\s+mention-field-name="([^"]+)"[^>]*>([^<]+)<\/span>/g,
- (match, fieldId, fieldName, text) => {
- return `${text}`
- }
- )
+ const parser = new DOMParser()
+ const doc = parser.parseFromString(`<div>${content}</div>`, 'text/html')
+ const mentions = doc.querySelectorAll('span[mention-field-id][mention-field-name]')
+
+ if (mentions.length === 0) return content
+
+ let processedContent = content
+ mentions.forEach(mention => {
+ const text = mention.textContent
+ processedContent = processedContent.replace(mention.outerHTML, text)
+ })
+
+ return processedContent
}Let's verify the current usage of mentionAsText:
| <UBadge | ||
| :label="integration.data.webhook_url" | ||
| color="gray" | ||
| size="xs" | ||
| class="max-w-[300px] truncate" | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add URL validation and error handling for webhook URL display
The webhook URL is displayed without validation. Consider adding URL validation and error handling to prevent displaying invalid URLs.
<UBadge
- :label="integration.data.webhook_url"
+ :label="isValidUrl(integration.data.webhook_url) ? integration.data.webhook_url : 'Invalid URL'"
color="gray"
size="xs"
class="max-w-[300px] truncate"
/>Add this helper function to the script section:
const isValidUrl = (string) => {
try {
new URL(string);
return true;
} catch (_) {
return false;
}
}| onMounted(() => { | ||
| if (!props.integration.data || props.integration.data.length === 0) { | ||
| interval = setInterval(() => formIntegrationsStore.fetchFormIntegrations(props.form.id), 3000) | ||
| setTimeout(() => { clearInterval(interval) }, 30000) | ||
| } | ||
| }) | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve polling mechanism robustness
The current polling implementation has several potential issues:
- No maximum retry count
- No exponential backoff
- No error handling for failed requests
- Hardcoded timeout values
Consider implementing a more robust polling mechanism:
-let interval = null
+const MAX_RETRIES = 10
+const INITIAL_INTERVAL = 3000
+const MAX_TIMEOUT = 30000
+let retryCount = 0
+let pollingInterval = null
onMounted(() => {
if (!props.integration.data || props.integration.data.length === 0) {
- interval = setInterval(() => formIntegrationsStore.fetchFormIntegrations(props.form.id), 3000)
- setTimeout(() => { clearInterval(interval) }, 30000)
+ const startPolling = async () => {
+ try {
+ await formIntegrationsStore.fetchFormIntegrations(props.form.id)
+ if (formIntegrationsStore.hasData) {
+ clearInterval(pollingInterval)
+ return
+ }
+ retryCount++
+ if (retryCount >= MAX_RETRIES) {
+ clearInterval(pollingInterval)
+ }
+ } catch (error) {
+ console.error('Failed to fetch integrations:', error)
+ clearInterval(pollingInterval)
+ }
+ }
+ pollingInterval = setInterval(startPolling, INITIAL_INTERVAL)
+ setTimeout(() => clearInterval(pollingInterval), MAX_TIMEOUT)
}
})📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onMounted(() => { | |
| if (!props.integration.data || props.integration.data.length === 0) { | |
| interval = setInterval(() => formIntegrationsStore.fetchFormIntegrations(props.form.id), 3000) | |
| setTimeout(() => { clearInterval(interval) }, 30000) | |
| } | |
| }) | |
| const MAX_RETRIES = 10 | |
| const INITIAL_INTERVAL = 3000 | |
| const MAX_TIMEOUT = 30000 | |
| let retryCount = 0 | |
| let pollingInterval = null | |
| onMounted(() => { | |
| if (!props.integration.data || props.integration.data.length === 0) { | |
| const startPolling = async () => { | |
| try { | |
| await formIntegrationsStore.fetchFormIntegrations(props.form.id) | |
| if (formIntegrationsStore.hasData) { | |
| clearInterval(pollingInterval) | |
| return | |
| } | |
| retryCount++ | |
| if (retryCount >= MAX_RETRIES) { | |
| clearInterval(pollingInterval) | |
| } | |
| } catch (error) { | |
| console.error('Failed to fetch integrations:', error) | |
| clearInterval(pollingInterval) | |
| } | |
| } | |
| pollingInterval = setInterval(startPolling, INITIAL_INTERVAL) | |
| setTimeout(() => clearInterval(pollingInterval), MAX_TIMEOUT) | |
| } | |
| }) |
| const formIntegrationsStore = useFormIntegrationsStore() | ||
| let interval = null | ||
|
|
||
| onMounted(() => { | ||
| if (!props.integration.data || props.integration.data.length === 0) { | ||
| interval = setInterval(() => formIntegrationsStore.fetchFormIntegrations(props.form.id), 3000) | ||
| setTimeout(() => { clearInterval(interval) }, 30000) | ||
| } | ||
| }) | ||
|
|
||
| onBeforeUnmount(() => { | ||
| if (interval) { | ||
| clearInterval(interval) | ||
| } | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve polling mechanism robustness
The current polling implementation has several potential issues:
- No error handling for failed requests
- Hard-coded timing values
- No loading state indication to users
Consider these improvements:
+const POLL_INTERVAL = 3000
+const POLL_TIMEOUT = 30000
+const loading = ref(false)
+
const formIntegrationsStore = useFormIntegrationsStore()
let interval = null
onMounted(() => {
if (!props.integration.data || props.integration.data.length === 0) {
- interval = setInterval(() => formIntegrationsStore.fetchFormIntegrations(props.form.id), 3000)
- setTimeout(() => { clearInterval(interval) }, 30000)
+ loading.value = true
+ interval = setInterval(async () => {
+ try {
+ await formIntegrationsStore.fetchFormIntegrations(props.form.id)
+ } catch (error) {
+ console.error('Failed to fetch integrations:', error)
+ clearInterval(interval)
+ loading.value = false
+ }
+ }, POLL_INTERVAL)
+ setTimeout(() => {
+ clearInterval(interval)
+ loading.value = false
+ }, POLL_TIMEOUT)
}
})📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const formIntegrationsStore = useFormIntegrationsStore() | |
| let interval = null | |
| onMounted(() => { | |
| if (!props.integration.data || props.integration.data.length === 0) { | |
| interval = setInterval(() => formIntegrationsStore.fetchFormIntegrations(props.form.id), 3000) | |
| setTimeout(() => { clearInterval(interval) }, 30000) | |
| } | |
| }) | |
| onBeforeUnmount(() => { | |
| if (interval) { | |
| clearInterval(interval) | |
| } | |
| }) | |
| const POLL_INTERVAL = 3000 | |
| const POLL_TIMEOUT = 30000 | |
| const loading = ref(false) | |
| const formIntegrationsStore = useFormIntegrationsStore() | |
| let interval = null | |
| onMounted(() => { | |
| if (!props.integration.data || props.integration.data.length === 0) { | |
| loading.value = true | |
| interval = setInterval(async () => { | |
| try { | |
| await formIntegrationsStore.fetchFormIntegrations(props.form.id) | |
| } catch (error) { | |
| console.error('Failed to fetch integrations:', error) | |
| clearInterval(interval) | |
| loading.value = false | |
| } | |
| }, POLL_INTERVAL) | |
| setTimeout(() => { | |
| clearInterval(interval) | |
| loading.value = false | |
| }, POLL_TIMEOUT) | |
| } | |
| }) | |
| onBeforeUnmount(() => { | |
| if (interval) { | |
| clearInterval(interval) | |
| } | |
| }) |
There was a problem hiding this comment.
Great - please apply tiny UI changes from https://github.com/JhumanJ/notionforms/pull/494/commits/3f36d91418e57c9ad72ec475cbeb645770f817ed
Done |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
client/components/open/integrations/components/SlackIntegrationActions.vue (1)
1-15: Consider improving mobile responsiveness and content display.The current implementation has several potential issues:
- Content is hidden on mobile screens without an alternative view.
- Fixed max-width might not be optimal for all screen sizes.
- Truncated content might hide important information.
Consider these improvements:
<template> <div class="flex flex-1 items-center"> <div v-if="integration" - class="hidden md:block space-y-1" + class="w-full space-y-1" > <UBadge :label="mentionAsText(integration.data.message)" color="gray" size="xs" - class="max-w-[300px] block truncate" + class="max-w-full md:max-w-[300px] block truncate" + :title="mentionAsText(integration.data.message)" /> + <!-- Mobile view --> + <div class="md:hidden mt-2 text-sm text-gray-600"> + {{ mentionAsText(integration.data.message) }} + </div> </div> </div> </template>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
client/components/open/integrations/components/EmailIntegrationActions.vue(1 hunks)client/components/open/integrations/components/IntegrationCard.vue(1 hunks)client/components/open/integrations/components/SlackIntegrationActions.vue(1 hunks)client/components/open/integrations/components/WebhookIntegrationActions.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- client/components/open/integrations/components/IntegrationCard.vue
- client/components/open/integrations/components/WebhookIntegrationActions.vue
- client/components/open/integrations/components/EmailIntegrationActions.vue
🔇 Additional comments (1)
client/components/open/integrations/components/SlackIntegrationActions.vue (1)
17-19: Verify the mentionAsText utility function implementation.
Let's ensure the imported utility function exists and is properly exported.
✅ Verification successful
The mentionAsText utility function is properly implemented and exported
The function exists in client/lib/utils.js and is correctly exported. It's a utility that strips HTML mention tags from content while preserving the mentioned text, which aligns with its expected usage in the component.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify mentionAsText utility function implementation
# Expected: Find the implementation and export of mentionAsText function
# Search for mentionAsText implementation
ast-grep --pattern 'export function mentionAsText($_) {
$$$
}'
# Search for mentionAsText export
rg -A 2 'export.*mentionAsText'
Length of output: 233
Script:
#!/bin/bash
# Let's verify the complete implementation of mentionAsText function
rg -A 10 'export const mentionAsText' client/lib/utils.js
Length of output: 373
| const props = defineProps({ | ||
| integration: { | ||
| type: Object, | ||
| required: true, | ||
| }, | ||
| form: { | ||
| type: Object, | ||
| required: true, | ||
| } | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance prop definitions with validation and documentation.
The current prop definitions lack detailed type validation and documentation about the expected data structure.
Consider enhancing the props:
const props = defineProps({
integration: {
type: Object,
required: true,
+ validator(value) {
+ return value && typeof value.data === 'object'
+ },
+ default: () => ({}),
},
form: {
type: Object,
required: true,
+ validator(value) {
+ return value && typeof value.id === 'string'
+ },
+ default: () => ({}),
}
})Also, consider adding JSDoc comments to document the expected prop structure:
/**
* @typedef {Object} Integration
* @property {Object} data - Integration data containing message
* @property {string} data.message - The message to display
*/
/**
* @typedef {Object} Form
* @property {string} id - The form identifier
*/| const formIntegrationsStore = useFormIntegrationsStore() | ||
| let interval = null | ||
|
|
||
| onMounted(() => { | ||
| if (!props.integration.data || props.integration.data.length === 0) { | ||
| interval = setInterval(() => formIntegrationsStore.fetchFormIntegrations(props.form.id), 3000) | ||
| setTimeout(() => { clearInterval(interval) }, 30000) | ||
| } | ||
| }) | ||
|
|
||
| onBeforeUnmount(() => { | ||
| if (interval) { | ||
| clearInterval(interval) | ||
| } | ||
| }) |
There was a problem hiding this comment.
Improve polling mechanism and error handling.
The current implementation has several potential issues:
- 3-second polling interval might be too aggressive and could cause unnecessary server load.
- No error handling for failed API calls.
- No loading state management.
- Potential race conditions with the interval.
Consider these improvements:
const formIntegrationsStore = useFormIntegrationsStore()
let interval = null
+const POLL_INTERVAL = 10000 // 10 seconds
+const MAX_RETRIES = 6 // 1 minute total
+let retryCount = 0
+const isLoading = ref(false)
onMounted(() => {
if (!props.integration.data || props.integration.data.length === 0) {
- interval = setInterval(() => formIntegrationsStore.fetchFormIntegrations(props.form.id), 3000)
- setTimeout(() => { clearInterval(interval) }, 30000)
+ interval = setInterval(async () => {
+ try {
+ isLoading.value = true
+ await formIntegrationsStore.fetchFormIntegrations(props.form.id)
+ retryCount++
+ if (retryCount >= MAX_RETRIES) {
+ clearInterval(interval)
+ interval = null
+ }
+ } catch (error) {
+ console.error('Failed to fetch integrations:', error)
+ clearInterval(interval)
+ interval = null
+ } finally {
+ isLoading.value = false
+ }
+ }, POLL_INTERVAL)
}
})Also add a loading indicator to the template:
<UBadge
:label="mentionAsText(integration.data.message)"
color="gray"
size="xs"
class="max-w-[300px] block truncate"
+ :loading="isLoading"
/>Committable suggestion skipped: line range outside the PR's diff.
integrations.jsonfiles to includeactions_file_namefor each integration, linking them to their respective action components.GoogleSheetsIntegrationActions.vuecomponent by replacing direct provider information display with a badge for better UI consistency.These changes aim to streamline integration management and improve the overall user experience.
Summary by CodeRabbit
New Features
EmailIntegrationActions,SlackIntegrationActions,DiscordIntegrationActions, andWebhookIntegrationActions.Bug Fixes
IntegrationCardcomponent.Documentation