refactor: add code sample customizations

[mfortman11]

Sets up code samples for customization usage

Summary by CodeRabbit

• Refactor
  • Improved consistency in API code sample generation across curl, JavaScript, and Python.
  • Unified base URL and authentication header construction for generated code examples.
  • Enhanced reliability of API sample headers in code output.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This PR centralizes API sample header and base URL construction logic into a new utility module, then refactors three existing API code generation modules (curl, JavaScript, and Python) to use these utilities instead of duplicating manual header and host extraction logic.

Changes

Cohort / File(s)	Summary
New utility module src/frontend/src/customization/utils/custom-code-samples.ts	Introduces four utility functions: getApiSampleHeaders() (returns formatted headers by language), formatJsHeadersForInline() (returns indented headers for inline embedding), getWidgetAdditionalHeaders() (stub), and getBaseUrl() (derives protocol and host for base URL construction).
API code generation refactoring src/frontend/src/modals/apiModal/utils/get-curl-code.tsx, src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx, src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx	Replaces manual host/protocol extraction with centralized getBaseUrl() function; replaces conditional Bearer token headers with dynamic getApiSampleHeaders() calls per language; applies header injection consistently across webhook, file-upload, and curl/script generation code paths.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30–35 minutes

• Review header injection logic in get-js-api-code.tsx, which modifies multiple inline header blocks across multipart and payload steps
• Verify that getApiSampleHeaders() conditions (especially ENABLE_DATASTAX_LANGFLOW checks) are applied consistently across webhook and execution paths
• Confirm baseURL construction via getBaseUrl() works correctly across different code generation scenarios (file upload, webhook, direct execution)

Suggested labels

javascript, python, size:L, refactor

Suggested reviewers

• ogabrielluiz
• lucaseduoli

Pre-merge checks and finishing touches

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 2 warnings)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	PR introduces new utility functions and modifies three files for API code sample generation without adding corresponding test files.	Add test files: custom-code-samples.test.ts for new functions and update tests for modified get-curl-code, get-js-api-code, and get-python-api-code utilities to verify integration.
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Test Quality And Coverage	⚠️ Warning	New functions from custom-code-samples.ts are used in implementation files but lack dedicated unit tests and integration test coverage.	Create custom-code-samples.test.ts with unit tests for all four functions and update existing test files to mock custom-code-samples functions with integration test cases.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: introducing a new customization utility module and refactoring existing code to use centralized code sample functions.
Test File Naming And Structure	✅ Passed	The PR includes 5 comprehensive test files with proper TypeScript naming conventions, organized in the correct tests directory structure, featuring Jest setup with describe blocks, descriptive it() test names, jest.mock() dependency mocking, and extensive expect() assertions covering both positive and negative scenarios.
Excessive Mock Usage Warning	✅ Passed	Test files use appropriate mocking practices with single external dependency mocks and comprehensive assertions on actual function behavior.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Frontend Unit Test Coverage Report

Coverage Summary

Lines	Statements	Branches	Functions
	15.43% (4246/27504)	8.63% (1814/21017)	9.73% (590/6062)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
1671	0 💤	0 ❌	0 🔥	22.007s ⏱️

[codecov]

Codecov Report

❌ Patch coverage is 76.92308% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 32.54%. Comparing base (21e257a) to head (f7937fb).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
...end/src/customization/utils/custom-code-samples.ts	71.42%	3 Missing and 1 partial ⚠️
...ontend/src/modals/apiModal/utils/get-curl-code.tsx	75.00%	0 Missing and 2 partials ⚠️

❌ Your project status has failed because the head coverage (40.02%) is below the target coverage (60.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #10884   +/-   ##
=======================================
  Coverage   32.54%   32.54%           
=======================================
  Files        1370     1371    +1     
  Lines       63543    63507   -36     
  Branches     9394     9391    -3     
=======================================
- Hits        20680    20670   -10     
+ Misses      41824    41797   -27     
- Partials     1039     1040    +1     

Flag	Coverage Δ
frontend	14.30% <76.92%> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...tend/src/modals/apiModal/utils/get-js-api-code.tsx	89.28% <100.00%> (-0.19%)	⬇️
.../src/modals/apiModal/utils/get-python-api-code.tsx	91.48% <100.00%> (-0.18%)	⬇️
...ontend/src/modals/apiModal/utils/get-curl-code.tsx	91.30% <75.00%> (-0.28%)	⬇️
...end/src/customization/utils/custom-code-samples.ts	71.42% <71.42%> (ø)

... and 9 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

Actionable comments posted: 6

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx (1)

53-58: Missing Content-Type header when API key is not displayed.

When shouldDisplayApiKey is true, the headers include 'Content-Type': 'application/json' (line 55). However, when false, getApiSampleHeaders("javascript") returns an empty string, resulting in no headers at all—including no Content-Type. This may cause the POST request to fail or behave unexpectedly.

Consider ensuring Content-Type is always included:

     const headersSection = shouldDisplayApiKey
       ? `    headers: {
         'Content-Type': 'application/json',
         "x-api-key": apiKey
     },`
-      : getApiSampleHeaders("javascript");
+      : getApiSampleHeaders("javascript") || `    headers: {
+        'Content-Type': 'application/json'
+    },`;

src/frontend/src/modals/apiModal/utils/get-curl-code.tsx (1)

96-121: Inconsistent header injection between PowerShell and Unix paths.

Line 96 injects getApiSampleHeaders("curl") for PowerShell, but the Unix path (lines 116-121) has no equivalent injection. This creates inconsistent behavior where custom sample headers would only appear in PowerShell-generated commands.

Consider adding equivalent header injection to the Unix path for consistency:

       return `curl --request POST \\
      --url '${apiUrl}?stream=false' \\
+${getApiSampleHeaders("curl")}
      --header 'Content-Type: application/json' \\${
        authHeader ? "\n" + authHeader : ""
      }
      --data '${unixFormattedPayload}'`;

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 21e257a and f8e654e.

📒 Files selected for processing (4)

• src/frontend/src/customization/utils/custom-code-samples.ts (1 hunks)
• src/frontend/src/modals/apiModal/utils/get-curl-code.tsx (7 hunks)
• src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx (6 hunks)
• src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx (4 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

src/frontend/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)

src/frontend/src/**/*.{ts,tsx}: Use React 18 with TypeScript for frontend development
Use Zustand for state management

Files:

• src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx
• src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx
• src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
• src/frontend/src/customization/utils/custom-code-samples.ts

src/frontend/src/**/*.{tsx,jsx,css,scss}

📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)

Use Tailwind CSS for styling

Files:

• src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx
• src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx
• src/frontend/src/modals/apiModal/utils/get-curl-code.tsx

src/frontend/src/**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)

src/frontend/src/**/*.{tsx,jsx}: Implement dark mode support using the useDarkMode hook and dark store
Use Lucide React for icon components in the application

Files:

• src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx
• src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx
• src/frontend/src/modals/apiModal/utils/get-curl-code.tsx

🧠 Learnings (1)

📚 Learning: 2025-07-11T21:32:57.160Z

Learnt from: namastex888
Repo: langflow-ai/langflow PR: 9018
File: src/frontend/src/modals/apiModal/utils/get-curl-code.tsx:139-184
Timestamp: 2025-07-11T21:32:57.160Z
Learning: In TypeScript/JavaScript cURL code generation for Langflow, PowerShell commands must use backticks (`) for line continuation and follow the pattern: `curl --request POST \` followed by `--url`, `--header` flags on separate lines. Unix commands use backslashes (\) for line continuation. File upload commands should maintain platform-specific formatting just like other cURL commands in the codebase.

Applied to files:

• src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx
• src/frontend/src/modals/apiModal/utils/get-curl-code.tsx

🧬 Code graph analysis (4)

src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx (1)

src/frontend/src/customization/utils/custom-code-samples.ts (2)

• getBaseUrl (28-32)
• getApiSampleHeaders (3-8)

src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx (1)

src/frontend/src/customization/utils/custom-code-samples.ts (3)

• getBaseUrl (28-32)
• getApiSampleHeaders (3-8)
• formatJsHeadersForInline (10-22)

src/frontend/src/modals/apiModal/utils/get-curl-code.tsx (2)

src/frontend/src/customization/utils/custom-code-samples.ts (2)

• getBaseUrl (28-32)
• getApiSampleHeaders (3-8)

src/frontend/src/customization/feature-flags.ts (1)

• ENABLE_DATASTAX_LANGFLOW (10-10)

src/frontend/src/customization/utils/custom-code-samples.ts (1)

src/frontend/src/customization/utils/custom-get-host-protocol.ts (1)

• customGetHostProtocol (1-6)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Run Frontend Unit Tests / Frontend Jest Unit Tests
• GitHub Check: Test Starter Templates

🔇 Additional comments (4)

src/frontend/src/customization/utils/custom-code-samples.ts (1)

1-32: LGTM! Clean customization extension points.

The utility module correctly establishes extension points for code sample customization. The stub functions returning empty strings provide a clean baseline that can be overridden for customization purposes.

src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx (2)

117-124: Verify generated code syntax when custom headers are empty.

When formatJsHeadersForInline() returns an empty string (current default), line 120 produces ,${formatJsHeadersForInline()} which results in just a comma before 'Content-Length'. The generated code should remain syntactically valid, but consider verifying the output format.

---

29-39: LGTM! Base URL and file detection logic is correctly refactored.

The refactoring to use getBaseUrl() and the URL parsing for hostname/port extraction is clean and well-structured.

src/frontend/src/modals/apiModal/utils/get-curl-code.tsx (1)

33-47: LGTM! Webhook code generation correctly uses centralized utilities.

The refactoring to use getBaseUrl() and conditional getApiSampleHeaders("curl") based on ENABLE_DATASTAX_LANGFLOW is clean.

[coderabbitai]

🛠️ Refactor suggestion | 🟠 Major

Remove unused import.

customGetHostProtocol is no longer used directly in this file since getBaseUrl() now encapsulates this logic internally.

-import { customGetHostProtocol } from "@/customization/utils/custom-get-host-protocol";

📝 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.

Suggested change

import { customGetHostProtocol } from "@/customization/utils/custom-get-host-protocol";

🤖 Prompt for AI Agents

In src/frontend/src/modals/apiModal/utils/get-curl-code.tsx around line 6,
remove the unused import "customGetHostProtocol" since getBaseUrl() now handles
that logic; delete the import line and ensure no other references to
customGetHostProtocol remain in the file, then run a quick build/lint to confirm
the unused-import error is resolved.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Curl command may break when API key is not displayed and sample headers are empty.

When shouldDisplayApiKey is false, getApiSampleHeaders("curl") currently returns an empty string. This results in a line with no content between --url and --form, which breaks the multi-line curl command syntax (missing line continuation).

The same issue affects lines 148, 174, and 181. Consider falling back to an empty line with proper continuation:

-     ${shouldDisplayApiKey ? '--header "x-api-key: YOUR_API_KEY_HERE" \\' : getApiSampleHeaders("curl")}
+     ${shouldDisplayApiKey ? '--header "x-api-key: YOUR_API_KEY_HERE" \\' : (getApiSampleHeaders("curl") || '\\')}

Or restructure to only include the header line when there's content.

📝 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.

Suggested change

	${shouldDisplayApiKey ? '--header "x-api-key: YOUR_API_KEY_HERE" \\' : getApiSampleHeaders("curl")}
	--form "file=@your_image_${uploadCounter}.jpg"`,
	);
	} else {
	uploadCommands.push(
	`curl --request POST \\
	--url "${baseUrl}/api/v1/files/upload/${flowId}" \\
	${shouldDisplayApiKey ? '--header "x-api-key: YOUR_API_KEY_HERE" \\' : ""}
	${shouldDisplayApiKey ? '--header "x-api-key: YOUR_API_KEY_HERE" \\' : getApiSampleHeaders("curl")}
	--form "file=@your_image_${uploadCounter}.jpg"`,
	);
	}
	${shouldDisplayApiKey ? '--header "x-api-key: YOUR_API_KEY_HERE" \\' : (getApiSampleHeaders("curl") || '\\')}
	--form "file=@your_image_${uploadCounter}.jpg"`,
	);
	} else {
	uploadCommands.push(
	`curl --request POST \\
	--url "${baseUrl}/api/v1/files/upload/${flowId}" \\
	${shouldDisplayApiKey ? '--header "x-api-key: YOUR_API_KEY_HERE" \\' : (getApiSampleHeaders("curl") || '\\')}
	--form "file=@your_image_${uploadCounter}.jpg"`,
	);
	}

🤖 Prompt for AI Agents

In src/frontend/src/modals/apiModal/utils/get-curl-code.tsx around lines 141-151
(also affecting lines ~148, 174, 181), the multi-line curl string breaks when
getApiSampleHeaders("curl") returns an empty string because the line
continuation is missing; update the string assembly so that if headers are empty
you either emit a dedicated empty continuation line (a line containing only the
backslash continuation) or conditionally include the entire header line and
ensure the preceding line retains the trailing backslash, so the curl command
remains valid in both cases.

[coderabbitai]

🛠️ Refactor suggestion | 🟠 Major

Remove unused import.

customGetHostProtocol is no longer used directly in this file since getBaseUrl() now encapsulates this logic internally.

-import { customGetHostProtocol } from "@/customization/utils/custom-get-host-protocol";

📝 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.

Suggested change

	import { customGetHostProtocol } from "@/customization/utils/custom-get-host-protocol";
	// Import line removed - this import is no longer needed

🤖 Prompt for AI Agents

In src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx around line 6, the
file contains an unused import of customGetHostProtocol; remove the import
statement for customGetHostProtocol from the top of the file (and run the
linter/TypeScript build to ensure no other references remain), leaving any
required imports intact.

[coderabbitai]

🛠️ Refactor suggestion | 🟠 Major

Remove unused import.

customGetHostProtocol is no longer used directly in this file since getBaseUrl() now encapsulates this logic internally.

-import { customGetHostProtocol } from "@/customization/utils/custom-get-host-protocol";

📝 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.

Suggested change

import { customGetHostProtocol } from "@/customization/utils/custom-get-host-protocol";

🤖 Prompt for AI Agents

src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx around lines 5 to
5, the file imports customGetHostProtocol but it is unused because getBaseUrl()
now handles that logic; remove the unused import line "import {
customGetHostProtocol } from '@/customization/utils/custom-get-host-protocol';"
and run a quick lint/check to ensure no other references remain.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Generated Python code will fail with NameError when API key is not displayed.

When shouldDisplayApiKey is false, getApiSampleHeaders("python") currently returns an empty string. This results in headersSection being empty, but line 65 still references headers variable which is never defined, causing a NameError at runtime.

Consider defining a default empty headers dict when no API key or sample headers are present:

     const headersSection = shouldDisplayApiKey
       ? `headers = {"x-api-key": api_key}`
-      : getApiSampleHeaders("python");
+      : getApiSampleHeaders("python") || `headers = {}`;

Alternatively, ensure getApiSampleHeaders("python") always returns a valid Python headers assignment like headers = {}.

📝 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.

Suggested change

	const headersSection = shouldDisplayApiKey
	? `headers = {"x-api-key": api_key}`
	: "";
	: getApiSampleHeaders("python");
	const headersSection = shouldDisplayApiKey
	? `headers = {"x-api-key": api_key}`
	: getApiSampleHeaders("python") || `headers = {}`;

🤖 Prompt for AI Agents

In src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx around lines
46-48, the branch where shouldDisplayApiKey is false leaves headersSection empty
which later causes a NameError because code still references headers; change the
logic so headersSection always defines headers: either return a default Python
assignment like `headers = {}` from getApiSampleHeaders("python") or update this
ternary to use a fallback `headers = {}` when neither an API key nor sample
headers are available, ensuring the generated code always declares the headers
variable.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Same NameError issue applies to the file upload path.

The file upload code path has the same issue where headers may be undefined when shouldDisplayApiKey is false and getApiSampleHeaders returns empty string (lines 170, 187 reference headers).