fix: fixed schema header and body structure for oneOf, patternProperties, button array item types

Author: utkarsha-deriv

src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import SchemaDescription from '../SchemaDescription';
 import SchemaObjectContent from '../SchemaObjectContent';
 import StreamTypesObject from '../StreamTypesObject';
+import SchemaOneOfObjectContent from '../SchemaOneOfObjectContent';
 
 type TRecursiveProperties = {
   is_open: boolean;
@@ -38,14 +39,20 @@ const RecursiveProperties = ({ is_open, properties, value, jsonSchema }: TRecurs
             {index === 0 && value?.items?.description && (
               <SchemaDescription description={value.items.description} />
             )}
-            {key === 'forget_all' && 'oneOf' in value[key] ? (
+            {key === 'forget_all' && 'oneOf' in properties[key] ? (
               <SchemaObjectContent
                 key={key}
                 key_value={key}
                 properties={properties}
                 jsonSchema={jsonSchema}
                 is_stream_types
               />
+            ) : typeof properties[key] === 'object' && 'oneOf' in properties[key] ? (
+              <SchemaOneOfObjectContent
+                property={properties[key]}
+                key_title={key}
+                jsonSchema={jsonSchema}
+              />
             ) : (
               <SchemaObjectContent key={key} key_value={key} properties={properties} />
             )}

src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx

@@ -13,6 +13,7 @@ type TSchemaBodyHeader = {
   examples: string[];
   enum;
   is_stream_types: boolean;
+  items_type: string;
 };
 
 const SchemaBodyHeader = ({
@@ -26,6 +27,7 @@ const SchemaBodyHeader = ({
   is_open_object,
   setIsOpenObject,
   is_stream_types,
+  items_type,
 }: TSchemaBodyHeader) => {
   let typeClassName;
   switch (type) {
@@ -110,7 +112,7 @@ const SchemaBodyHeader = ({
                 <div className={styles.schemaObjectContent}>
                   <div>
                     <button onClick={() => setIsOpenObject(!is_open_object)}>
-                      {title ? key_value : 'object'}
+                      {title ? key_value : items_type ? items_type : 'object'}
                     </button>
                   </div>
                 </div>

src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/index.tsx

@@ -30,6 +30,7 @@ export default function SchemaObjectContent({
     examples,
     enum: _enum,
     title,
+    items,
   } = properties[key_value];
   const value = properties[key_value];
   let data;
@@ -60,6 +61,7 @@ export default function SchemaObjectContent({
           is_open_object={is_open_object}
           setIsOpenObject={setIsOpenObject}
           is_stream_types={is_stream_types}
+          items_type={items?.type}
         />
         {/* Description */}
         <SchemaDescription description={description} />
@@ -74,7 +76,7 @@ export default function SchemaObjectContent({
         {!is_code_open && (
           <RecursiveProperties
             is_open={is_open_object}
-            properties={value.properties || value?.items?.properties}
+            properties={value.properties || value?.items?.properties || value.patternProperties}
             value={value}
             jsonSchema={jsonSchema}
           />

src/features/Apiexplorer/Schema/RecursiveContent/SchemaOneOfBodyHeader/index.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import styles from '../../Schema.module.scss';
+
+type TSchemaOneOfBodyHeader = {
+  key_title: string;
+  oneOf: Record<string, any>[];
+  updateIndexArray;
+};
+
+const SchemaOneOfBodyHeader = ({ key_title, oneOf, updateIndexArray }: TSchemaOneOfBodyHeader) => {
+  let previous_pattern = '';
+  const generateClassName = (type) => {
+    let typeClass;
+    switch (type) {
+      case 'number':
+        typeClass = styles.number;
+        break;
+      case 'array':
+        typeClass = styles.array;
+        break;
+      case 'integer':
+        typeClass = styles.integer;
+        break;
+      case 'null':
+        typeClass = styles.null;
+        break;
+      default:
+        typeClass = styles.string;
+        break;
+    }
+    return typeClass;
+  };
+  return (
+    <div className={styles.schemaBodyHeader}>
+      <div className={styles.schemaBodyType}>
+        <div className={styles.enumFlex}>
+          <p style={{ fontSize: '2.6rem' }}>
+            <strong>{key_title}</strong>
+          </p>
+          <div className={styles.enumContainer}>
+            <span className={styles.enumLabel}>one of</span>
+            {oneOf &&
+              Array.isArray(oneOf) &&
+              oneOf.map((object, index) => {
+                const show_btn = object?.description || object?.properties;
+                const typeClassName = generateClassName(object?.type);
+                if (
+                  index !== 0 &&
+                  (object?.pattern || object?.item?.pattern) !== previous_pattern
+                ) {
+                  previous_pattern = object.pattern;
+                }
+
+                return (
+                  <React.Fragment key={index}>
+                    <div className={styles.schemaObjectContent}>
+                      {show_btn ? (
+                        <button
+                          onClick={() => {
+                            updateIndexArray(index);
+                          }}
+                        >
+                          {object.title ? object.title : object.type}
+                        </button>
+                      ) : (
+                        <span className={`${styles.enumType} ${typeClassName}`}>{object.type}</span>
+                      )}
+                      {'pattern' in object && (
+                        <div className={styles.schemaRegexContainer}>
+                          {previous_pattern !== object.pattern && (
+                            <span className={styles.schemaBodyPattern}>{object.pattern}</span>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </React.Fragment>
+                );
+              })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SchemaOneOfBodyHeader;

src/features/Apiexplorer/Schema/RecursiveContent/SchemaOneOfObjectContent/index.tsx

@@ -0,0 +1,86 @@
+import React, { Suspense, useState } from 'react';
+import RecursiveProperties from '../RecursiveProperties';
+import SchemaDescription from '../SchemaDescription';
+import SourceButton from '../../SourceButton/SourceButton';
+import styles from '../../Schema.module.scss';
+import clsx from 'clsx';
+import SchemaOneOfBodyHeader from '../SchemaOneOfBodyHeader';
+
+const ReactJson = React.lazy(() => import('react-json-view'));
+
+type TSchemaOneOfObjectContent = {
+  property: any;
+  key_title: string;
+  jsonSchema: any;
+};
+
+export default function SchemaOneOfObjectContent({
+  property,
+  key_title,
+  jsonSchema,
+}: TSchemaOneOfObjectContent) {
+  const { description, oneOf } = property;
+  const [is_code_open, setIsCodeOpen] = useState<boolean>(false);
+  const [index_arr, setIndexArr] = useState(Array(property.length).fill(false));
+
+  const schema = property;
+  let data;
+  try {
+    data = JSON.stringify(schema, null, 2);
+  } catch (error) {
+    data = '';
+    console.error('There was an issue stringifying JSON data: ', error);
+  }
+  React.useEffect(() => {
+    setIsCodeOpen(false);
+    setIndexArr([]);
+  }, [property]);
+
+  const updateIndexArray = (index: number) => {
+    setIndexArr((prevArray) => {
+      const newArray = [...prevArray];
+      newArray[index] = !newArray[index];
+      return newArray;
+    });
+  };
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <div className={styles.schemaBodySignature}>
+        <SourceButton is_code_open={is_code_open} setIsCodeOpen={setIsCodeOpen} />
+
+        {/* Header */}
+        <SchemaOneOfBodyHeader
+          key_title={key_title}
+          oneOf={oneOf}
+          updateIndexArray={updateIndexArray}
+        />
+        {/* Description */}
+        <SchemaDescription description={description} />
+
+        {is_code_open && (
+          <div className={styles.reactJsonView}>
+            <ReactJson src={JSON.parse(data)} theme='tube' />
+          </div>
+        )}
+
+        {!is_code_open && (
+          <>
+            {index_arr.map(
+              (val, index) =>
+                val === true && (
+                  <RecursiveProperties
+                    is_open
+                    properties={oneOf[index]['properties']}
+                    value={oneOf[index]}
+                    jsonSchema={jsonSchema}
+                    key={index}
+                  />
+                ),
+            )}
+          </>
+        )}
+      </div>
+    </Suspense>
+  );
+}

src/features/Apiexplorer/Schema/Schema.module.scss

@@ -168,6 +168,7 @@
         width: fit-content;
         display: flex;
         flex-direction: row;
+        align-items: center;
 
         .schemaBodyPattern {
           width: 100%;
@@ -262,6 +263,9 @@
       &.number {
         color: var(--schema-number);
       }
+      &.null {
+        color: var(--schema-null);
+      }
     }
 
     .enumLabel,

src/styles/index.scss

@@ -34,11 +34,12 @@
   --schema-array: #ff8fc8;
   --schema-number: #acb2ff;
   --schema-integer: #f8c272;
+  --schema-null: #ff444f;
   --spinner-height: 100px;
   --spinner-width: 100px;
   --smoke: #414652;
-  --admin-text: #22BD41;
-  --admin-border: #33C9517A;
+  --admin-text: #22bd41;
+  --admin-border: #33c9517a;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -164,7 +165,7 @@ body {
   display: none !important;
 }
 
-.unofficial-host { 
+.unofficial-host {
   .hide-sidebar-item {
     display: none !important;
   }