jprdonnelly/airbyte
1
0
Fork 0
mirror of synced 2025-12-19 18:14:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
letiescanciano
2025-12-18 15:30:12 +01:00
parent 76bf7ea1a7
commit af27d8ce8a
3 changed files with 27 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docusaurus/src/components/SourceRequestSchema/SourceConfiguration.module.css
View File

@@ -48,7 +48,8 @@
/* Dropdown Menu */ /* Dropdown Menu */
.dropdown { .dropdown {
position: absolute; position: absolute;
background-color: var(--ifm-background-surface-primary) !important; background-color:var(--color-white) !important;
border: 1px solid var(--ifm-color-border); border: 1px solid var(--ifm-color-border);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
@@ -60,12 +61,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 300px; width: 300px;
/* Create a new stacking context and ensure background fills the area */ }
isolation: isolate;
/* Ensure solid background covers content */
backdrop-filter: none;
contain: layout style paint;
}
/* Dropdown Option */ /* Dropdown Option */
.option { .option {

42
docusaurus/src/components/SourceRequestSchema/SourceConfiguration.tsx
View File

@@ -9,7 +9,6 @@ import sourceConfigsData from "@site/src/data/source-configs-dereferenced.json";
import styles from "./SourceConfiguration.module.css"; import styles from "./SourceConfiguration.module.css";
import { useState, useMemo } from "react"; import { useState, useMemo } from "react";
/** /**
* Component to display configuration fields based on selected source type * Component to display configuration fields based on selected source type
* Uses OpenAPI plugin classnames for perfect visual consistency * Uses OpenAPI plugin classnames for perfect visual consistency
@@ -88,6 +87,7 @@ export const SourceConfiguration = ({ endpointData }) => {
const [fieldValues, setFieldValues] = useState({}); const [fieldValues, setFieldValues] = useState({});
// Filter sources based on search query // Filter sources based on search query
console.log("Source configs data:", endpointData);
const filteredSources = useMemo(() => { const filteredSources = useMemo(() => {
if (!searchQuery.trim()) { if (!searchQuery.trim()) {
return sourceConfigs; return sourceConfigs;
@@ -108,19 +108,6 @@ export const SourceConfiguration = ({ endpointData }) => {
<> <>
{endpointData?.configurationSchema && ( {endpointData?.configurationSchema && (
<> <>
{/* Show oneOf badge inline with configuration name */}
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.75rem" }}>
<span className="openapi-schema__property" style={{ fontWeight: 600 }}>
configuration
</span>
<span className="openapi-schema__name">SourceConfiguration</span>
{endpointData.configurationSchema.oneOf && (
<span className="badge badge--info" style={{ marginBottom: 0 }}>
oneOf
</span>
)}
</div>
{/* Combobox for source selection */} {/* Combobox for source selection */}
<Combobox <Combobox
immediate immediate
@@ -180,27 +167,14 @@ export const SourceConfiguration = ({ endpointData }) => {
</Combobox> </Combobox>
{/* Display configuration schema properties for selected source */} {/* Display configuration schema properties for selected source */}
<div style={{ marginTop: "1rem" }}>
{endpointData.configurationSchema.description && (
<p
style={{
fontSize: "0.9rem",
lineHeight: "1.4",
marginBottom: "0.5rem",
}}
>
{endpointData.configurationSchema.description}
</p>
)}
{/* Display required properties for selected source */} {/* Display required properties for selected source */}
{selectedSource && endpointData.configurationSchema.oneOf && ( {selectedSource && endpointData.configurationSchema.oneOf && (
<ConfigurationFields <ConfigurationFields
selectedSourceId={selectedSource.id} selectedSourceId={selectedSource.id}
configSchema={endpointData.configurationSchema} configSchema={endpointData.configurationSchema}
/> />
)} )}
</div>
</> </>
)} )}
</> </>

24
docusaurus/src/components/SourceRequestSchema/index.jsx
View File

@@ -6,7 +6,7 @@ import {
TabPanel, TabPanel,
Disclosure, Disclosure,
DisclosureButton, DisclosureButton,
DisclosurePanel DisclosurePanel,
} from "@headlessui/react"; } from "@headlessui/react";
import styles from "./index.module.css"; import styles from "./index.module.css";
import apiEndpointsData from "@site/src/data/api-endpoints-dereferenced.json"; import apiEndpointsData from "@site/src/data/api-endpoints-dereferenced.json";
@@ -14,9 +14,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronRight } from "@fortawesome/free-solid-svg-icons"; import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
import { SourceConfiguration } from "./SourceConfiguration"; import { SourceConfiguration } from "./SourceConfiguration";
export const SourceRequestSchema = ({ pageId }) => { export const SourceRequestSchema = ({ pageId }) => {
// Get endpoint data from the dereferenced API endpoints // Get endpoint data from the dereferenced API endpoints
const endpointData = pageId ? apiEndpointsData[pageId] : null; const endpointData = pageId ? apiEndpointsData[pageId] : null;
const requestBodyProperties = endpointData?.requestBodyProperties || []; const requestBodyProperties = endpointData?.requestBodyProperties || [];
@@ -37,7 +35,7 @@ export const SourceRequestSchema = ({ pageId }) => {
</TabList> </TabList>
<TabPanels> <TabPanels>
<TabPanel> <TabPanel>
<Disclosure defaultOpen={true} > <Disclosure defaultOpen={true}>
<DisclosureButton className={styles.disclosureButton}> <DisclosureButton className={styles.disclosureButton}>
<FontAwesomeIcon icon={faChevronRight} /> <FontAwesomeIcon icon={faChevronRight} />
<h3 className={styles.summaryHeader}> <h3 className={styles.summaryHeader}>
@@ -45,13 +43,14 @@ export const SourceRequestSchema = ({ pageId }) => {
<strong className={styles.required}>required</strong> <strong className={styles.required}>required</strong>
</h3> </h3>
</DisclosureButton> </DisclosureButton>
<DisclosurePanel className={styles.disclosurePanel }> <DisclosurePanel className={styles.disclosurePanel}>
{/* Body Fields - using ul list structure like OpenAPI */} {/* Body Fields - using ul list structure like OpenAPI */}
<ul style={{ marginLeft: "1rem", listStyle: "none", padding: 0 }}> <ul style={{ marginLeft: "1rem", listStyle: "none", padding: 0 }}>
{/* Dynamic Request Body Fields */} {/* Dynamic Request Body Fields */}
{sortedProperties && {sortedProperties &&
sortedProperties.length > 0 && sortedProperties.length > 0 &&
sortedProperties.map((param) => { sortedProperties.map((param) => {
console.log("Rendering param:", param);
return ( return (
<div <div
key={param.name} key={param.name}
@@ -69,7 +68,15 @@ export const SourceRequestSchema = ({ pageId }) => {
{param.name} {param.name}
</strong> </strong>
<span className="openapi-schema__name"> <span className="openapi-schema__name">
{param.name === "configuration" ? "SourceConfiguration" : param.type} {param.type}
{/* {endpointData.configurationSchema.oneOf && (
<span
className="badge badge--info"
style={{ marginBottom: 0 }}
}>
oneOf
</span>
)} */}
</span> </span>
</span> </span>
{param.required && ( {param.required && (
@@ -90,8 +97,9 @@ export const SourceRequestSchema = ({ pageId }) => {
{param.description} {param.description}
</p> </p>
)} )}
{param.name === "configuration" && <SourceConfiguration endpointData={endpointData} />} {param.name === "configuration" && (
<SourceConfiguration endpointData={endpointData} />
)}
</div> </div>
); );
})} })}