WIP
This commit is contained in:
letiescanciano
@@ -0,0 +1,195 @@
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxButton,
|
||||
ComboboxInput,
|
||||
ComboboxOption,
|
||||
ComboboxOptions,
|
||||
} from "@headlessui/react";
|
||||
import sourceConfigsData from "@site/src/data/source-configs-dereferenced.json";
|
||||
import styles from "./SourceConfiguration.module.css";
|
||||
import { useState, useMemo } from "react";
|
||||
|
||||
|
||||
/**
|
||||
* Component to display configuration fields based on selected source type
|
||||
* Uses OpenAPI plugin classnames for perfect visual consistency
|
||||
*/
|
||||
const ConfigurationFields = ({
|
||||
selectedSourceId,
|
||||
configSchema,
|
||||
}: {
|
||||
selectedSourceId: string;
|
||||
configSchema: any;
|
||||
}) => {
|
||||
const selectedConfig = configSchema.oneOf?.find(
|
||||
(config) => config.title === selectedSourceId,
|
||||
);
|
||||
|
||||
if (!selectedConfig) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const requiredFields = selectedConfig.required || [];
|
||||
const properties = selectedConfig.properties || {};
|
||||
|
||||
return (
|
||||
<ul style={{ marginLeft: "1rem", listStyle: "none", padding: 0 }}>
|
||||
<div className="openapi-schema__list-item">
|
||||
<div>
|
||||
<span className="openapi-schema__container">
|
||||
<strong className="openapi-schema__property">properties</strong>
|
||||
<span className="openapi-schema__name">object</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{Object.entries(properties).map(([fieldName, fieldSchema]) => (
|
||||
<div key={fieldName} className="openapi-schema__list-item">
|
||||
<div>
|
||||
<span className="openapi-schema__container">
|
||||
<strong className="openapi-schema__property">{fieldName}</strong>
|
||||
<span className="openapi-schema__name">
|
||||
{fieldSchema.title || fieldSchema.type}
|
||||
</span>
|
||||
{requiredFields.includes(fieldName) && (
|
||||
<span className="openapi-schema__required">required</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
{fieldSchema.description && <p>{fieldSchema.description}</p>}
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export const SourceConfiguration = ({ endpointData }) => {
|
||||
const [sourceConfigs] = useState(sourceConfigsData);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [selectedSource, setSelectedSource] = useState(
|
||||
sourceConfigsData.length > 0 ? sourceConfigsData[0] : null,
|
||||
);
|
||||
const [bodyExpanded, setBodyExpanded] = useState(true);
|
||||
const [configExpanded, setConfigExpanded] = useState(true);
|
||||
const [fieldValues, setFieldValues] = useState({});
|
||||
|
||||
// Filter sources based on search query
|
||||
const filteredSources = useMemo(() => {
|
||||
if (!searchQuery.trim()) {
|
||||
return sourceConfigs;
|
||||
}
|
||||
const query = searchQuery.toLowerCase();
|
||||
return sourceConfigs.filter(
|
||||
(source) =>
|
||||
source.displayName.toLowerCase().includes(query) ||
|
||||
source.id.toLowerCase().includes(query),
|
||||
);
|
||||
}, [searchQuery, sourceConfigs]);
|
||||
|
||||
const handleSourceSelect = (source) => {
|
||||
console.log("Selected source:", source);
|
||||
setSelectedSource(source);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Combobox
|
||||
immediate
|
||||
value={selectedSource}
|
||||
onChange={handleSourceSelect}
|
||||
onClose={() => setSearchQuery("")}
|
||||
>
|
||||
<div className={styles.comboboxWrapper}>
|
||||
<ComboboxInput
|
||||
id="source-combobox"
|
||||
className={styles.input}
|
||||
placeholder="Search sources..."
|
||||
displayValue={(source) => source?.id ?? ""}
|
||||
onChange={(event) => setSearchQuery(event.target.value)}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<ComboboxButton className={styles.dropdownButton}>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
className="ugz uig"
|
||||
>
|
||||
<path
|
||||
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
|
||||
clipRule="evenodd"
|
||||
fillRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</ComboboxButton>
|
||||
</div>
|
||||
|
||||
<ComboboxOptions className={styles.dropdown} anchor="bottom">
|
||||
{filteredSources.length === 0 ? (
|
||||
<div className={styles.noResults}>
|
||||
{searchQuery
|
||||
? `No sources found for "${searchQuery}"`
|
||||
: "No sources available"}
|
||||
</div>
|
||||
) : (
|
||||
filteredSources.map((source) => (
|
||||
<ComboboxOption
|
||||
key={source.id}
|
||||
value={source}
|
||||
className={({ active, selected }) =>
|
||||
`${styles.option} ${active ? styles.active : ""} ${
|
||||
selected ? styles.selected : ""
|
||||
}`
|
||||
}
|
||||
>
|
||||
<span className={styles.optionId}>{source.id}</span>
|
||||
</ComboboxOption>
|
||||
))
|
||||
)}
|
||||
</ComboboxOptions>
|
||||
</Combobox>
|
||||
{endpointData?.configurationSchema && (
|
||||
<div style={{ marginTop: "1rem" }}>
|
||||
{endpointData.configurationSchema.description && (
|
||||
<p
|
||||
style={{
|
||||
fontSize: "0.9rem",
|
||||
lineHeight: "1.4",
|
||||
marginBottom: "0.5rem",
|
||||
margin: "0 0 0.5rem 0",
|
||||
}}
|
||||
>
|
||||
{endpointData.configurationSchema.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Show oneOf badge if configuration has multiple options */}
|
||||
{endpointData.configurationSchema.oneOf && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.75rem",
|
||||
marginBottom: "0.75rem",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<span className="badge badge--info" style={{ marginBottom: 0 }}>
|
||||
oneOf
|
||||
</span>
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Display required properties for selected source */}
|
||||
{selectedSource && endpointData.configurationSchema.oneOf && (
|
||||
<ConfigurationFields
|
||||
selectedSourceId={selectedSource.id}
|
||||
configSchema={endpointData.configurationSchema}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user