Skip to content

feat(webapp): add nango clone snippet to template funcitons#5311

Merged
kaposke merged 4 commits intomasterfrom
gui/NAN-4624/feat-template-cloning-snippets
Jan 26, 2026
Merged

feat(webapp): add nango clone snippet to template funcitons#5311
kaposke merged 4 commits intomasterfrom
gui/NAN-4624/feat-template-cloning-snippets

Conversation

@kaposke
Copy link
Contributor

@kaposke kaposke commented Jan 26, 2026

Adds nango clone snippet and link to view code in repo for template functions.

Also, did a few updated in the header as requested by Gabrielle.

Screenshot 2026-01-26 at 15 53 28

It also introduces a reusable LineSnippet component and restructures the function detail card layout with an optional subheader to present guidance content more cleanly.

Key Changes

• Added new LineSnippet component with inline copy support for displaying command snippets
• Exposed INTEGRATION_TEMPLATES_GITHUB_URL in packages/webapp/src/constants.ts for constructing repository links
• Refactored packages/webapp/src/pages/Integrations/providerConfigKey/Functions/One.tsx to render the CLI snippet, external doc links, and adjusted typography/layout for pre-built templates
• Introduced CardSubheader in packages/webapp/src/pages/Integrations/components/CardLayout.tsx to separate supplementary guidance from primary headers
• Simplified packages/webapp/src/pages/Integrations/components/FunctionSwitch.tsx switch markup while preserving existing behavior

Affected Areas

packages/webapp/src/pages/Integrations/providerConfigKey/Functions/One.tsx
packages/webapp/src/pages/Integrations/components/CardLayout.tsx
packages/webapp/src/components-v2/LineSnippet.tsx
packages/webapp/src/pages/Integrations/components/FunctionSwitch.tsx
packages/webapp/src/constants.ts


This summary was automatically generated by @propel-code-bot

@kaposke kaposke requested review from a team and marcindobry January 26, 2026 18:54
@linear
Copy link

linear bot commented Jan 26, 2026

@my-senior-dev-pr-review
Copy link

my-senior-dev-pr-review bot commented Jan 26, 2026

🤖 My Senior Dev — Analysis Complete

👤 For @kaposke

📁 Expert in packages/ (129 edits) • ⚡ 15th PR this month

View your contributor analytics →


📊 5 files reviewed • 1 high risk • 1 need attention

🚨 High Risk:

  • packages/webapp/src/components-v2/LineSnippet.tsx — Critical vulnerabilities related to user input handling without sanitization, leading to potential XSS attacks.

⚠️ Needs Attention:

  • packages/webapp/src/components-v2/LineSnippet.tsx — Ensures clear API design and compatibility with existing components while integrating functionalities.

🚀 Open Interactive Review →

The full interface unlocks features not available in GitHub:

  • 💬 AI Chat — Ask questions on any file, get context-aware answers
  • 🔍 Smart Hovers — See symbol definitions and usage without leaving the diff
  • 📚 Code Archeology — Understand how files evolved over time (/archeology)
  • 🎯 Learning Insights — See how this PR compares to similar changes

💬 Chat here: @my-senior-dev explain this change — or try @chaos-monkey @security-auditor @optimizer @skeptic @junior-dev

📖 View all 12 personas & slash commands

You can interact with me by mentioning @my-senior-dev in any comment:

In PR comments or on any line of code:

  • Ask questions about the code or PR
  • Request explanations of specific changes
  • Get suggestions for improvements

Slash commands:

  • /help — Show all available commands
  • /archeology — See the history and evolution of changed files
  • /profile — Performance analysis and suggestions
  • /expertise — Find who knows this code best
  • /personas — List all available AI personas

AI Personas (mention to get their perspective):

Persona Focus
@chaos-monkey 🐵 Edge cases & failure scenarios
@skeptic 🤨 Challenge assumptions
@optimizer Performance & efficiency
@security-auditor 🔒 Security vulnerabilities
@accessibility-advocate Inclusive design
@junior-dev 🌱 Simple explanations
@tech-debt-collector 💳 Code quality & shortcuts
@ux-champion 🎨 User experience
@devops-engineer 🚀 Deployment & scaling
@documentation-nazi 📚 Documentation gaps
@legacy-whisperer 🏛️ Working with existing code
@test-driven-purist Testing & TDD

For the best experience, view this PR on myseniordev.com — includes AI chat, file annotations, and interactive reviews.

const func = data?.flows.find((flow) => flow.name === functionName);

const gitDir = func ? `${integrationData?.integration.provider}/${func.type === 'action' ? 'actions' : 'syncs'}/${func.name}` : '';
const gitUrl = `https://github.com/NangoHQ/integration-templates/tree/main/integrations/${gitDir}.ts`;
Copy link
Collaborator

@TBonnin TBonnin Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

export const githubIntegrationTemplates = `${githubRepo}/tree/main/integrations`;

}, [data, functionName]);
const func = data?.flows.find((flow) => flow.name === functionName);

const gitDir = func ? `${integrationData?.integration.provider}/${func.type === 'action' ? 'actions' : 'syncs'}/${func.name}` : '';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can func be undefined/empty?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved to after guard clause

<span className="text-text-primary text-body-medium-semi">Customize this template</span>
<Link
to="https://nango.dev/docs/reference/cli"
type="external"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does Link have a type prop?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoops, that's from our StyledLink component, which I've replaced here. So no, should have been target="_blank". Good catch!

@kaposke kaposke enabled auto-merge January 26, 2026 20:38
@kaposke kaposke added this pull request to the merge queue Jan 26, 2026
Merged via the queue into master with commit b5d4892 Jan 26, 2026
23 of 24 checks passed
@kaposke kaposke deleted the gui/NAN-4624/feat-template-cloning-snippets branch January 26, 2026 20:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants