Merge pull request binary-com#269 from utkarsha-deriv/utkarsha/DERA-3…

…86/Fix-request-schema-forget-api-call

src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/__tests__/RecursiveProperties.test.tsx

@@ -13,9 +13,35 @@ const fakeItem = {
     },
   },
   properties: {
-    recursive_item: {
+    recursive_item_1: {
       description: 'This is a recursive item',
     },
+    recursive_item_2: {
+      description: 'This is recursive item 2',
+      oneOf: 'This is oneOf key for recursive_item_2',
+    },
+  },
+  definitions: {
+    stream_types: {
+      description: 'This stream_types description',
+      type: 'string',
+      enum: [
+        'balance',
+        'candles',
+        'cashier_payments',
+        'p2p_advert',
+        'p2p_advertiser',
+        'p2p_order',
+        'proposal',
+        'proposal_open_contract',
+        'ticks',
+        'transaction',
+        'trading_platform_asset_listing',
+        'website_status',
+        'p2p_settings',
+        'crypto_estimations',
+      ],
+    },
   },
 };
 
@@ -26,21 +52,43 @@ describe('RecursiveProperties', () => {
         is_open
         properties={fakeItem.properties || fakeItem?.items?.properties}
         value={fakeItem}
+        jsonSchema={fakeItem}
       />,
     );
     const recursion_1_description = await screen.findByText(/nested items/i);
     expect(recursion_1_description).toBeVisible();
 
-    const recursion_2_name = await screen.findByText(/recursive_item/i);
+    const recursion_2_name = await screen.findByText(/recursive_item_1/i);
     expect(recursion_2_name).toBeVisible();
 
     const recursion_2_description = await screen.findByText(/This is a recursive item/i);
     expect(recursion_2_description).toBeVisible();
+
+    const recursion_3_name = await screen.findByText(/recursive_item_2/i);
+    expect(recursion_3_name).toBeVisible();
+
+    const recursion_3_description = await screen.findByText(/This is recursive item 2/i);
+    expect(recursion_3_description).toBeVisible();
   });
 
   it('renders only the description (last item) if there are no nested items anymore', async () => {
-    render(<RecursiveProperties is_open properties={null} value={fakeItem} />);
+    render(
+      <RecursiveProperties is_open properties={null} value={fakeItem} jsonSchema={fakeItem} />,
+    );
     const item = await screen.findByText(/This is the main item description/i);
     expect(item).toBeVisible();
   });
+
+  it('renders StreamTypesObject if value contains oneOf meaning its forgetAll api call', async () => {
+    render(
+      <RecursiveProperties
+        is_open
+        properties={null}
+        value={fakeItem.properties.recursive_item_2}
+        jsonSchema={fakeItem}
+      />,
+    );
+    const streamTypesObject = await screen.getByTestId('dt_stream_types_object');
+    expect(streamTypesObject).toBeVisible();
+  });
 });

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

@@ -1,18 +1,28 @@
 import React from 'react';
 import SchemaDescription from '../SchemaDescription';
 import SchemaObjectContent from '../SchemaObjectContent';
+import StreamTypesObject from '../StreamTypesObject';
 
 type TRecursiveProperties = {
   is_open: boolean;
   properties: any;
   value: any;
+  jsonSchema: any;
 };
 
-const RecursiveProperties = ({ is_open, properties, value }: TRecursiveProperties) => {
+const RecursiveProperties = ({ is_open, properties, value, jsonSchema }: TRecursiveProperties) => {
   const keys = properties && Object.keys(properties);
+
   if (!is_open) {
     return null;
   }
+  if (value && 'oneOf' in value) {
+    return (
+      <React.Fragment>
+        <StreamTypesObject definitions={jsonSchema.definitions} />
+      </React.Fragment>
+    );
+  }
   if (!keys) {
     return (
       <React.Fragment>
@@ -28,7 +38,17 @@ const RecursiveProperties = ({ is_open, properties, value }: TRecursivePropertie
             {index === 0 && value?.items?.description && (
               <SchemaDescription description={value.items.description} />
             )}
-            <SchemaObjectContent key={key} key_value={key} properties={properties} />
+            {key === 'forget_all' && 'oneOf' in value[key] ? (
+              <SchemaObjectContent
+                key={key}
+                key_value={key}
+                properties={properties}
+                jsonSchema={jsonSchema}
+                is_stream_types
+              />
+            ) : (
+              <SchemaObjectContent key={key} key_value={key} properties={properties} />
+            )}
           </React.Fragment>
         );
       })}

src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/__tests__/SchemaBodyHeader.test.tsx

@@ -16,6 +16,7 @@ describe('SchemaBodyHeader', () => {
         title='test title'
         is_open_object
         setIsOpenObject={() => jest.fn()}
+        is_stream_types={false}
       />,
     );
     const type = await screen.findByText('number');
@@ -34,6 +35,7 @@ describe('SchemaBodyHeader', () => {
         title='test title'
         is_open_object
         setIsOpenObject={() => jest.fn()}
+        is_stream_types={false}
       />,
     );
     const type = await screen.findByText('array');
@@ -52,6 +54,7 @@ describe('SchemaBodyHeader', () => {
         title='test title'
         is_open_object
         setIsOpenObject={() => jest.fn()}
+        is_stream_types={false}
       />,
     );
     const type = await screen.findByText('integer');
@@ -70,6 +73,7 @@ describe('SchemaBodyHeader', () => {
         title='test title'
         is_open_object
         setIsOpenObject={() => jest.fn()}
+        is_stream_types={false}
       />,
     );
     const type = await screen.findByText('string');
@@ -88,6 +92,7 @@ describe('SchemaBodyHeader', () => {
         title='test title'
         is_open_object
         setIsOpenObject={() => jest.fn()}
+        is_stream_types={false}
       />,
     );
     const type = await screen.findByText(/number/i);
@@ -106,6 +111,7 @@ describe('SchemaBodyHeader', () => {
         title='test title'
         is_open_object
         setIsOpenObject={() => jest.fn()}
+        is_stream_types={false}
       />,
     );
     const type = await screen.findByText(/string/i);
@@ -124,6 +130,7 @@ describe('SchemaBodyHeader', () => {
         title='test title'
         is_open_object
         setIsOpenObject={() => jest.fn()}
+        is_stream_types={false}
       />,
     );
     const type = await screen.findByText(/array/i);
@@ -142,9 +149,33 @@ describe('SchemaBodyHeader', () => {
         title='test title'
         is_open_object
         setIsOpenObject={() => jest.fn()}
+        is_stream_types={false}
       />,
     );
     const type = await screen.findByText(/integer/i);
     expect(type).toBeVisible();
   });
+
+  it('should render the SchemaBodyHeader with oneOf stream_types array if is_stream_types is true', async () => {
+    render(
+      <SchemaBodyHeader
+        key_value={null}
+        type={null}
+        defaultValue='default_test'
+        pattern=''
+        examples={null}
+        enum={null}
+        title=''
+        is_open_object
+        setIsOpenObject={() => jest.fn()}
+        is_stream_types={true}
+      />,
+    );
+    const oneOfType = await screen.findByText(/one of/i);
+    const stream_types = await screen.findByText(/stream_types/i);
+    const array_type = await screen.findByText(/array/i);
+    expect(oneOfType).toBeVisible();
+    expect(stream_types).toBeVisible();
+    expect(array_type).toBeVisible();
+  });
 });

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

@@ -12,6 +12,7 @@ type TSchemaBodyHeader = {
   setIsOpenObject: (boolean) => void;
   examples: string[];
   enum;
+  is_stream_types: boolean;
 };
 
 const SchemaBodyHeader = ({
@@ -24,6 +25,7 @@ const SchemaBodyHeader = ({
   title,
   is_open_object,
   setIsOpenObject,
+  is_stream_types,
 }: TSchemaBodyHeader) => {
   let typeClassName;
   switch (type) {
@@ -116,6 +118,15 @@ const SchemaBodyHeader = ({
             ) : (
               <></>
             )}
+
+            {is_stream_types && (
+              <div className={styles.schemaObjectContent}>
+                <span className={styles.enumLabel}>one of</span>
+                <button onClick={() => setIsOpenObject(!is_open_object)}>stream_types</button>
+                <span className={`${styles.enumType} ${styles.array}`}>array</span>
+              </div>
+            )}
+
             {pattern && (
               <div className={styles.schemaRegexContainer}>
                 <div className={styles.schemaBodyPattern}>{pattern}</div>

src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/__tests__/SchemaObjectContent.test.tsx

@@ -21,6 +21,37 @@ const fake_properties = {
   },
 };
 
+const stream_types_schema = {
+  properties: {
+    test_property: {
+      description: 'property description',
+      oneOf: 'this is oneOf key',
+    },
+  },
+  definitions: {
+    stream_types: {
+      description: 'This stream_types description',
+      type: 'string',
+      enum: [
+        'balance',
+        'candles',
+        'cashier_payments',
+        'p2p_advert',
+        'p2p_advertiser',
+        'p2p_order',
+        'proposal',
+        'proposal_open_contract',
+        'ticks',
+        'transaction',
+        'trading_platform_asset_listing',
+        'website_status',
+        'p2p_settings',
+        'crypto_estimations',
+      ],
+    },
+  },
+};
+
 describe('SchemaObjectContent', () => {
   it('should be able to open a nested object item', async () => {
     render(<SchemaObjectContent key_value='test_item' properties={fake_properties} />);
@@ -96,4 +127,24 @@ describe('SchemaObjectContent', () => {
     const schema = await screen.findByTitle('JSON');
     expect(schema).toBeVisible();
   });
+
+  it('should open StreamTypesObject upon clicking stream_types button', async () => {
+    render(
+      <SchemaObjectContent
+        key='test_property'
+        key_value='test_property'
+        properties={stream_types_schema.properties}
+        jsonSchema={stream_types_schema}
+        is_stream_types={true}
+      />,
+    );
+
+    const button = await screen.findByRole('button', { name: /stream_types/i });
+    expect(button).toBeVisible();
+
+    await userEvent.click(button);
+
+    const streamTypesObject = await screen.getByTestId('dt_stream_types_object');
+    expect(streamTypesObject).toBeVisible();
+  });
 });

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

@@ -10,9 +10,16 @@ const ReactJson = React.lazy(() => import('react-json-view'));
 type TSchemaObjectContent = {
   key_value: string;
   properties: any;
+  jsonSchema?: any;
+  is_stream_types?: boolean;
 };
 
-export default function SchemaObjectContent({ key_value, properties }: TSchemaObjectContent) {
+export default function SchemaObjectContent({
+  key_value,
+  properties,
+  jsonSchema,
+  is_stream_types = false,
+}: TSchemaObjectContent) {
   const [is_open_object, setIsOpenObject] = useState<boolean>(false);
   const [is_code_open, setIsCodeOpen] = useState<boolean>(false);
   const {
@@ -52,6 +59,7 @@ export default function SchemaObjectContent({ key_value, properties }: TSchemaOb
           title={title}
           is_open_object={is_open_object}
           setIsOpenObject={setIsOpenObject}
+          is_stream_types={is_stream_types}
         />
         {/* Description */}
         <SchemaDescription description={description} />
@@ -68,6 +76,7 @@ export default function SchemaObjectContent({ key_value, properties }: TSchemaOb
             is_open={is_open_object}
             properties={value.properties || value?.items?.properties}
             value={value}
+            jsonSchema={jsonSchema}
           />
         )}
       </div>

src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesBody.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TEnumStreamType } from '@site/src/types';
+import styles from '../../Schema.module.scss';
+
+type TStreamTypesBody = {
+  type: string;
+  _enum: TEnumStreamType;
+};
+
+const StreamTypesBody = ({ type, _enum }: TStreamTypesBody) => {
+  return (
+    <div className={styles.streamTypesBody}>
+      <div className={styles.streamTypesObject}>
+        <span className={styles.enumLabel}>enum</span>
+        <span className={`${styles.enumType} ${styles.string}`}>{type}</span>
+        {_enum.map((enum_name: string, i: number) => (
+          <div className={`${styles.schemaCode} ${styles.schemaEnums}`} key={i}>
+            {enum_name}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default StreamTypesBody;

src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesHeader.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import SchemaTitle from '../../SchemaTitle';
+import styles from '../../Schema.module.scss';
+
+type TStreamTypesHeader = {
+  description: string;
+};
+
+const StreamTypesHeader = ({ description }: TStreamTypesHeader) => {
+  return (
+    <div className={styles.streamTypesHeader}>
+      <SchemaTitle className={styles.streamTypesTitle}>stream_types</SchemaTitle>
+      <div className={styles.streamTypesDescription}>
+        <div>{description}</div>
+      </div>
+    </div>
+  );
+};
+
+export default StreamTypesHeader;