Add Generic HTTP integration documentation with interactive builder

[matarpeles]

• Created new Generic HTTP integration docs section (position 1 in custom integrations)
• Added Overview page explaining when to use, how it works, and advanced configurations
• Built interactive 'Build Your Integration' guide with 3 steps:
  • Step 1: Configure API (base URL, auth, pagination, advanced settings)
  • Step 2: Choose data to sync (endpoint, response, field mapping, blueprint config)
  • Step 3: Install and create in Port (dynamic Helm/Docker commands, blueprint JSON, mapping YAML)
• Implemented React components with shared context for seamless state management
• Labeled as 'Generic HTTP (New ⭐)' in sidebar to highlight new feature
• Updated API integration position to 2

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context.

Added docs pages

Please also include the path for the added docs

• Quickstart (/)
• Blueprint (/platform-overview/port-components/blueprint)
• ...

Updated docs pages

Please also include the path for the updated docs

• Quickstart (/)
• Blueprint (/platform-overview/port-components/blueprint)
• ...

[aws-amplify-eu-west-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-2950.d2ngvl90zqbob8.amplifyapp.com

[qodo-merge-pro]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	URL data exposure Description: The "Create in Port" anchor builds a URL query parameter directly from generated JSON without explicit encoding of potentially large or sensitive content, which could leak data through browser history and logs; ensure only non-sensitive data is included and that size limits are respected. IntegrationBuilder.jsx [560-606] Referred Code <h3>Install the Integration</h3> <Tabs groupId="deploy" queryString="deploy"> <TabItem value="docker" label="Docker" default> <div className={styles.codeWrapper}> <button onClick={() => copyToClipboard(generateDockerCommand())} className={styles.copyBtn}> Copy to clipboard </button> <CodeBlock language="bash" showLineNumbers> {generateDockerCommand()} </CodeBlock> </div> </TabItem> <TabItem value="helm" label="Helm"> <p>Create a <code>values.yaml</code> file:</p> <div className={styles.codeWrapper}> <button onClick={() => copyToClipboard(generateHelmValues())} className={styles.copyBtn}> Copy to clipboard </button> <CodeBlock language="yaml" showLineNumbers title="values.yaml"> {generateHelmValues()} ... (clipped 26 lines)
	Misconfiguration risk Description: Generated mapping includes blueprint as a quoted string within extra quotes ('""') which may cause users to deploy misconfigured mappings; while not a security bug, malformed configs could inadvertently expose or fail to validate data paths—review quoting to prevent improper behavior. Step3Installation.jsx [284-295] Referred Code <h3 style={{ marginTop: '2rem' }}>Blueprint JSON</h3> <p style={{ color: 'var(--ifm-color-emphasis-700)', marginBottom: '1rem' }}> Copy this blueprint JSON and create it in <a href="https://app.getport.io/settings/data-model" target="_blank" rel="noopener noreferrer">Port's Data Model</a>: </p> <CodeBlock language="json" showLineNumbers> {generateBlueprint()} </CodeBlock> <h3 style={{ marginTop: '2rem' }}>Add the Mapping</h3> <CodeBlock language="yaml" showLineNumbers> {generateMapping()} </CodeBlock>
	Sensitive information exposure Description: The UI encourages pasting real API responses into the browser which may contain sensitive data; add clear warnings and consider client-side redaction or sample templates to avoid exposing secrets in the page, clipboard, or support screenshots. * (multiple files) [1-99999] Referred Code ... (clipped 99978 lines) </details></details></td></tr> <tr><td colspan='2'><strong>Ticket Compliance</strong></td></tr> <tr><td>⚪</td><td><details><summary>🎫 <strong>No ticket provided </summary></strong> - [ ] Create ticket/issue <!-- /create_ticket --create_ticket=true --> </details></td></tr> <tr><td colspan='2'><strong>Codebase Duplication Compliance</strong></td></tr> <tr><td>⚪</td><td><details><summary><strong>Codebase context is not defined </strong></summary> Follow the <a href='https://qodo-merge-docs.qodo.ai/core-abilities/rag_context_enrichment/'>guide</a> to enable codebase context checks. </details></td></tr> <tr><td colspan='2'><strong>Custom Compliance</strong></td></tr> <tr><td rowspan=2>🟢</td><td> <details><summary><strong>Generic: Meaningful Naming and Self-Documenting Code</strong></summary><br> **Objective:** Ensure all identifiers clearly express their purpose and intent, making code <br>self-documenting<br> **Status:** Passed<br> </details></td></tr> <tr><td> <details><summary><strong>Generic: Secure Error Handling</strong></summary><br> **Objective:** To prevent the leakage of sensitive system information through error messages while <br>providing sufficient detail for internal debugging.<br> **Status:** Passed<br> </details></td></tr> <tr><td rowspan=4>⚪</td> <td><details> <summary><strong>Generic: Comprehensive Audit Trails</strong></summary><br> **Objective:** To create a detailed and reliable record of critical system actions for security analysis <br>and compliance.<br> **Status:** <br><a href='https://github.com/port-labs/port-docs/pull/2950/files#diff-6045331ddaccb7575390c13b04eb1112a17bc17abe77288c766668cce4b4e325R560-R621'><strong>No auditing</strong></a>: The newly added interactive components perform various configuration-generating actions <br>but do not emit any audit logs for critical user actions (e.g., saving endpoints or <br>generating/installing configs), which may be acceptable for docs UI but cannot be <br>confirmed from the diff.<br> <details open><summary>Referred Code</summary> ```jsx <h3>Install the Integration</h3> <Tabs groupId="deploy" queryString="deploy"> <TabItem value="docker" label="Docker" default> <div className={styles.codeWrapper}> <button onClick={() => copyToClipboard(generateDockerCommand())} className={styles.copyBtn}> Copy to clipboard </button> <CodeBlock language="bash" showLineNumbers> {generateDockerCommand()} </CodeBlock> </div> </TabItem> <TabItem value="helm" label="Helm"> <p>Create a <code>values.yaml</code> file:</p> <div className={styles.codeWrapper}> <button onClick={() => copyToClipboard(generateHelmValues())} className={styles.copyBtn}> Copy to clipboard </button> <CodeBlock language="yaml" showLineNumbers title="values.yaml"> {generateHelmValues()} ... (clipped 41 lines)
Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Silent JSON parse: Multiple JSON.parse operations are wrapped in bare try/catch that swallow errors and return fallback UI without logging or surfacing actionable context, which may be acceptable for a docs UI but reduces debuggability. Referred Code <p className={styles.hint}> <strong>Select the array</strong> that contains the items you want to sync to Port: </p> <div className={styles.jsonTreeContainer}> {(() => { try { const json = JSON.parse(responseJson); if (Array.isArray(json)) { return ( <label className={styles.radioLabel} style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', padding: '0.5rem 0' }}> <input type="radio" name="dataPath" checked={dataPath === ''} onChange={() => setDataPath('')} style={{ marginRight: '0.5rem' }} /> <span className={styles.jsonKey}>(root array)</span> <span className={styles.arrayBadge}>{json.length} items</span> </label> ); ... (clipped 18 lines)
Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Secrets in output: The UI generates commands including placeholders and potentially user-supplied tokens/keys (e.g., apiToken, apiKey) that can be copied to clipboard or displayed; while placeholders are used by default, if real values are entered they may be exposed in page output, necessitating review of UX/security requirements. Referred Code const envVars = [ ` -e OCEAN__PORT__CLIENT_ID="<PORT_CLIENT_ID>"`, ` -e OCEAN__PORT__CLIENT_SECRET="<PORT_CLIENT_SECRET>"`, ` -e OCEAN__PORT__BASE_URL="https://api.getport.io"`, ` -e OCEAN__EVENT_LISTENER__TYPE="POLLING"`, ` -e OCEAN__INTEGRATION__IDENTIFIER="generic-http"`, ` -e OCEAN__INTEGRATION__TYPE="generic-http"`, ` -e OCEAN__INTEGRATION__CONFIG__BASE_URL="${baseUrl || 'https://api.example.com'}"`, ]; if (authType === 'bearer_token') { envVars.push(` -e OCEAN__INTEGRATION__CONFIG__AUTH_TYPE="bearer_token"`); envVars.push(` -e OCEAN__INTEGRATION__CONFIG__AUTH_VALUE="${apiToken || '<YOUR_API_TOKEN>'}"`); } else if (authType === 'api_key') { envVars.push(` -e OCEAN__INTEGRATION__CONFIG__AUTH_TYPE="api_key"`); envVars.push(` -e OCEAN__INTEGRATION__CONFIG__AUTH_VALUE="${apiKey || '<YOUR_API_KEY>'}"`); if (apiKeyHeader !== 'X-API-Key') { envVars.push(` -e OCEAN__INTEGRATION__CONFIG__API_KEY_HEADER="${apiKeyHeader}"`); } } else if (authType === 'basic') { envVars.push(` -e OCEAN__INTEGRATION__CONFIG__AUTH_TYPE="basic"`); ... (clipped 51 lines)
Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Unvalidated input: Free-form inputs (URLs, headers, JSON, identifiers) are accepted and processed (e.g., JSON.parse, string interpolation into commands/YAML) without explicit validation or sanitization visible in the diff, which could allow malformed configurations though risk may be limited in a docs site context. Referred Code <label className={styles.label}> <strong>Base URL</strong> <input type="text" placeholder="https://api.example.com" value={baseUrl} onChange={(e) => setBaseUrl(e.target.value)} className={styles.input} /> </label> <label className={styles.label}> <strong>Authentication</strong> <div className={styles.radioGroup}> <label className={styles.radioLabel}> <input type="radio" value="bearer_token" checked={authType === 'bearer_token'} onChange={(e) => setAuthType(e.target.value)} /> Bearer Token </label> <label className={styles.radioLabel}> <input type="radio" value="api_key" checked={authType === 'api_key'} onChange={(e) => setAuthType(e.target.value)} /> API Key ... (clipped 276 lines)

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label