WIP

docusaurus/src/components/SourceRequestSchema/SourceConfiguration.module.css

@@ -48,7 +48,8 @@
 /* Dropdown Menu */
 .dropdown {
   position: absolute;
-  background-color: var(--ifm-background-surface-primary) !important;
+  background-color:var(--color-white) !important;
+
   border: 1px solid var(--ifm-color-border);
   border-radius: 4px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
@@ -60,12 +61,7 @@
   margin: 0;
   padding: 0;
   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 */
 .option {

docusaurus/src/components/SourceRequestSchema/SourceConfiguration.tsx

@@ -9,7 +9,6 @@ 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
@@ -88,6 +87,7 @@ export const SourceConfiguration = ({ endpointData }) => {
   const [fieldValues, setFieldValues] = useState({});
 
   // Filter sources based on search query
+  console.log("Source configs data:", endpointData);
   const filteredSources = useMemo(() => {
     if (!searchQuery.trim()) {
       return sourceConfigs;
@@ -108,19 +108,6 @@ export const SourceConfiguration = ({ endpointData }) => {
     <>
       {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
             immediate
@@ -180,27 +167,14 @@ export const SourceConfiguration = ({ endpointData }) => {
           </Combobox>
 
           {/* 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 */}
-            {selectedSource && endpointData.configurationSchema.oneOf && (
-              <ConfigurationFields
-                selectedSourceId={selectedSource.id}
-                configSchema={endpointData.configurationSchema}
-              />
-            )}
-          </div>
+          {/* Display required properties for selected source */}
+          {selectedSource && endpointData.configurationSchema.oneOf && (
+            <ConfigurationFields
+              selectedSourceId={selectedSource.id}
+              configSchema={endpointData.configurationSchema}
+            />
+          )}
         </>
       )}
     </>

docusaurus/src/components/SourceRequestSchema/index.jsx

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