feat: n8n Integration #578
Conversation
chore: release v0.0.8
chore: release v0.0.9
chore: release v0.0.10
chore: release v0.0.11
chore: release v0.0.12
chore: release v0.0.13
WalkthroughThe changes introduce support for a new integration type, "n8n", into the integration settings modal alongside the existing "googleSheets" and "airtable" options. The Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant IntegrationModal
participant Router
User->>IntegrationModal: Opens integration settings
IntegrationModal->>User: Shows integration type options (Google Sheets, Airtable, n8n)
User->>IntegrationModal: Clicks "n8n" button
IntegrationModal->>IntegrationModal: Sets selectedIntegrationType to "n8n"
IntegrationModal->>Router: Navigates to /robots/{recordingId}/integrate/n8n
Suggested labels
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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: 2
🧹 Nitpick comments (2)
src/components/recorder/SaveRecording.tsx (1)
11-11: Updated import to include redirect from react-router-dom.The import statement now includes the
redirectfunction from 'react-router-dom', alongside the existinguseNavigate. This change is likely related to supporting the new n8n integration navigation paths, althoughredirectisn't currently used in this file.Consider removing the unused
redirectimport if it's not being utilized in this component.src/components/integration/IntegrationSettings.tsx (1)
422-422: n8n icon sizing is inconsistent with other integration icons.The n8n icon is being rendered with explicit height and width attributes (100px), making it appear larger than the other integration icons that use the default size with just margin.
Consider using consistent sizing across all integration icons for better UI alignment:
- <img src="/svg/n8n.svg" alt="n8n" height={100} width={100} style={{ margin: "30px" }} /> + <img src="/svg/n8n.svg" alt="n8n" style={{ margin: "6px" }} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/svg/n8n.svgis excluded by!**/*.svg
📒 Files selected for processing (2)
src/components/integration/IntegrationSettings.tsx(4 hunks)src/components/recorder/SaveRecording.tsx(2 hunks)
🔇 Additional comments (6)
src/components/recorder/SaveRecording.tsx (1)
57-59: Added blank lines after saveRecording() call.Two blank lines were added after the saveRecording() function call, which is a minor formatting change that doesn't affect functionality. This change maintains consistent code style.
src/components/integration/IntegrationSettings.tsx (5)
37-37: Extended the IntegrationSettings interface to support n8n.The
integrationTypefield in theIntegrationSettingsinterface now includes "n8n" as a valid option alongside the existing "googleSheets" and "airtable" types.
87-87: Updated selectedIntegrationType state type to include n8n.The state type for
selectedIntegrationTypenow includes "n8n" as a valid option, aligning with the interface update.
397-397: Corrected image source path for Google Sheets icon.The image source path was updated by removing the
/publicprefix, which is the correct approach since the public directory serves as the root for static assets.
410-410: Corrected image source path for Airtable icon.Similarly, the Airtable icon path was fixed by removing the
/publicprefix from the source path.
1-670:✅ Verification successful
Verify n8n SVG asset exists in the public directory.
The code references a new SVG file for the n8n icon at "/svg/n8n.svg", but it's not clear if this file has been included in the pull request.
🏁 Script executed:
#!/bin/bash # Check if the n8n SVG file exists in the public directory if [ -f "public/svg/n8n.svg" ]; then echo "n8n.svg exists in public/svg directory" else echo "ERROR: n8n.svg does not exist in public/svg directory" # List files in the public/svg directory to see what's available echo "Available files in public/svg:" ls -la public/svg/ fiLength of output: 118
n8n.svg asset verified
Thepublic/svg/n8n.svgfile exists in the repository, so the icon reference is correct.
| <Button | ||
| variant="outlined" | ||
| onClick={() => { | ||
| setSelectedIntegrationType("airtable"); | ||
| setSettings({ ...settings, integrationType: "n8n" }); | ||
| navigate(`/robots/${recordingId}/integrate/n8n`); | ||
| }} | ||
| style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }} | ||
| > | ||
| <img src="/svg/n8n.svg" alt="n8n" height={100} width={100} style={{ margin: "30px" }} /> | ||
| n8n | ||
| </Button> |
There was a problem hiding this comment.
Missing UI implementation for n8n integration settings.
While the n8n integration type has been added to the interface and a button has been added to select it, there's no corresponding UI implementation for n8n integration settings in the modal. The modal only has conditions for handling "googleSheets" and "airtable" types, but nothing for "n8n".
Add a condition for handling the n8n integration type in the modal, similar to how the other integration types are implemented. This can be done by adding a new conditional block in the return statement around line 654:
{settings.integrationType === "n8n" && (
<>
<Typography variant="h6">
{t("integration_settings.n8n.title") || "n8n Integration"}
</Typography>
{/* Add n8n specific UI elements here */}
<p>{t("integration_settings.n8n.descriptions.sync_info") || "Connect your Robot to n8n workflows."}</p>
{/* Additional implementation as needed */}
</>
)}Added n8n integration button but with incorrect integration type.
The button for the n8n integration was added, but there's an inconsistency in the implementation. When the button is clicked, setSelectedIntegrationType("airtable") is called instead of setSelectedIntegrationType("n8n").
Fix the integration type being set when the n8n button is clicked:
- setSelectedIntegrationType("airtable");
+ setSelectedIntegrationType("n8n");📝 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.
| <Button | |
| variant="outlined" | |
| onClick={() => { | |
| setSelectedIntegrationType("airtable"); | |
| setSettings({ ...settings, integrationType: "n8n" }); | |
| navigate(`/robots/${recordingId}/integrate/n8n`); | |
| }} | |
| style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }} | |
| > | |
| <img src="/svg/n8n.svg" alt="n8n" height={100} width={100} style={{ margin: "30px" }} /> | |
| n8n | |
| </Button> | |
| <Button | |
| variant="outlined" | |
| onClick={() => { | |
| - setSelectedIntegrationType("airtable"); | |
| + setSelectedIntegrationType("n8n"); | |
| setSettings({ ...settings, integrationType: "n8n" }); | |
| navigate(`/robots/${recordingId}/integrate/n8n`); | |
| }} | |
| style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }} | |
| > | |
| <img src="/svg/n8n.svg" alt="n8n" height={100} width={100} style={{ margin: "30px" }} /> | |
| n8n | |
| </Button> |
amhsirak
added
Type: Feature
Summary by CodeRabbit
New Features
Style