Bugfix/cm 1959 integration loading #2767
Conversation
Signed-off-by: Efren Lim <[email protected]>
Signed-off-by: Efren Lim <[email protected]>
…DotDev/crowd.dev into bugfix/CM-1959-integration-loading
Signed-off-by: Efren Lim <[email protected]>
WalkthroughThe pull request introduces enhancements to the frontend integration components, specifically in the Changes
Sequence DiagramsequenceDiagram
participant Component as Integration Component
participant Store as Vuex Store
participant LoadingIndicator as Loading Indicator
Store-->>Component: Fetch integration data
Component->>LoadingIndicator: Activate loading state
Store-->>Component: Data loaded
Component->>LoadingIndicator: Deactivate loading state
Component->>Component: Render appropriate component based on integration state
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🪧 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: 0
🧹 Nitpick comments (1)
frontend/src/modules/admin/modules/integration/components/integration-list-item.vue (1)
Line range hint
59-66: Consider adding a fallback message when neither component renders.The status component implementation looks good, but there might be cases where neither
connectedParamsComponentnorstatusComponentrenders. Consider adding a fallback message for better user experience.<component :is="props.config.statusComponent" v-else-if="!isComplete && props.config.statusComponent" :integration="integration" :segment-id="route.params.id" :grandparent-id="route.params.grandparentId" /> + <p v-else-if="!isComplete" class="text-small text-gray-500"> + Integration status unavailable + </p>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
frontend/src/modules/admin/modules/integration/components/integration-list-item.vue(1 hunks)frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue(2 hunks)
🔇 Additional comments (2)
frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue (1)
60-61: LGTM! Loading state implementation looks good.The loading state implementation effectively prevents the display of outdated integration data by:
- Using
v-loadingto show loading indicator- Conditionally rendering content only after data is loaded
- Properly managing loading state through Vuex
Also applies to: 103-103
frontend/src/modules/admin/modules/integration/components/integration-list-item.vue (1)
50-58: LGTM! Connected parameters component implementation is well-structured.The conditional rendering logic ensures that connection parameters are only displayed when:
- The integration is complete
- The component is available
- All necessary props are passed correctly
Changes proposed ✍️
What
Added loading state to the integrations list component to prevent it from rendering until all the integrations data are loaded.
Why
This is causing a bug on the integrations list page that displays previous integration list instead of the current segment being viewed.
Ticket
https://linear.app/lfx/issue/CM-1959/issue-with-integrations-loading-status
Checklist ✅
Feature,Improvement, orBug.Summary by CodeRabbit
New Features
Improvements