From ade327e94346f37f360dc6ddae7f986af2bcb5da Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Tue, 5 Dec 2023 11:42:08 +0400 Subject: [PATCH 1/5] chore: adding stream_types object and tag to forgetAll api --- .../RecursiveProperties/index.tsx | 23 +++++- .../SchemaBodyHeader/index.tsx | 13 ++++ .../SchemaObjectContent/index.tsx | 12 +++- .../StreamTypesObject/StreamTypesBody.tsx | 40 +++++++++++ .../StreamTypesObject/StreamTypesHeader.tsx | 20 ++++++ .../StreamTypesObject/index.tsx | 40 +++++++++++ .../Apiexplorer/Schema/Schema.module.scss | 72 +++++++++++++++++++ .../Schema/SchemaProperties/index.tsx | 1 + 8 files changed, 218 insertions(+), 3 deletions(-) create mode 100644 src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesBody.tsx create mode 100644 src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesHeader.tsx create mode 100644 src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/index.tsx diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/index.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/index.tsx index 1d2e1b7b..ff6cdb17 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/index.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/index.tsx @@ -1,18 +1,26 @@ 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) { + //if object is not open then ret null return null; } + + if ('oneOf' in value) { + return ; + } + // this will be true when we are not inside properties obj? !!!!!! if (!keys) { return ( @@ -28,7 +36,18 @@ const RecursiveProperties = ({ is_open, properties, value }: TRecursivePropertie {index === 0 && value?.items?.description && ( )} - + {/* check if its forgetAll Request not response */} + {key === 'forget_all' && 'oneOf' in value[key] ? ( + + ) : ( + + )} ); })} diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx index b37ae6bf..49fa46fa 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx +++ b/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,17 @@ const SchemaBodyHeader = ({ ) : ( <> )} + + {is_stream_types && ( + +
+ {'one of'} + + {'array'} +
+ + )} + {pattern && (
{pattern}
diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/index.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/index.tsx index 499e9282..24fc8427 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/index.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/index.tsx @@ -10,9 +10,17 @@ 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) { +//json schema also here full obj +export default function SchemaObjectContent({ + key_value, + properties, + jsonSchema, + is_stream_types = false, +}: TSchemaObjectContent) { const [is_open_object, setIsOpenObject] = useState(false); const [is_code_open, setIsCodeOpen] = useState(false); const { @@ -52,6 +60,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 */} @@ -68,6 +77,7 @@ export default function SchemaObjectContent({ key_value, properties }: TSchemaOb is_open={is_open_object} properties={value.properties || value?.items?.properties} value={value} + jsonSchema={jsonSchema} /> )}
diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesBody.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesBody.tsx new file mode 100644 index 00000000..4592a10c --- /dev/null +++ b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesBody.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import styles from '../../Schema.module.scss'; + +type TStreamTypesBody = { + type: string; + _enum: Array< + | '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' + >; +}; + +const StreamTypesBody = ({ type, _enum }: TStreamTypesBody) => { + return ( +
+
+ enum + {type} + {_enum.map((enum_name: string, i: number) => ( +
+ {enum_name} +
+ ))} +
+
+ ); +}; + +export default StreamTypesBody; diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesHeader.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesHeader.tsx new file mode 100644 index 00000000..65560423 --- /dev/null +++ b/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 ( +
+ {'stream_types'} +
+
{description}
+
+
+ ); +}; + +export default StreamTypesHeader; diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/index.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/index.tsx new file mode 100644 index 00000000..1592269b --- /dev/null +++ b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/index.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import StreamTypesHeader from './StreamTypesHeader'; +import StreamTypesBody from './StreamTypesBody'; +import styles from '../../Schema.module.scss'; + +type TStreamTypesObject = { + definitions: { + stream_types: { + description: string; + type: string; + enum: Array< + | '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' + >; + }; + }; +}; + +const StreamTypesObject = ({ definitions }: TStreamTypesObject) => { + return ( +
+ + +
+ ); +}; + +export default StreamTypesObject; diff --git a/src/features/Apiexplorer/Schema/Schema.module.scss b/src/features/Apiexplorer/Schema/Schema.module.scss index 6c1c1f19..4848a8d4 100644 --- a/src/features/Apiexplorer/Schema/Schema.module.scss +++ b/src/features/Apiexplorer/Schema/Schema.module.scss @@ -34,6 +34,7 @@ display: flex; flex-direction: row; position: relative; + gap: rem(0.8); p { color: var(--ifm-color-white); @@ -301,3 +302,74 @@ .reactJsonView { margin-bottom: rem(2.4); } + +.streamTypesContainer { + border-radius: 6px; + margin-top: rem(1); + margin-bottom: rem(2.4); + + .streamTypesBody { + background-color: rgba(219, 219, 219, 0.05); + display: flex; + padding: rem(1); + + .streamTypesObject { + display: flex; + flex-wrap: wrap; + gap: rem(0.8); + align-items: center; + + .enumLabel { + font-size: rem(1.4); + line-height: rem(1.4); + color: var(--ifm-color-emphasis-200); + } + + .enumType { + font-size: rem(1.4); + &.string { + color: var(--schema-string); + } + } + + .enumLabel, + .enumType { + display: flex; + justify-content: center; + align-items: center; + } + + .schemaEnums { + width: fit-content; + height: fit-content; + font-size: rem(1.4); + line-height: rem(1.4); + color: var(--ifm-color-success-light); + border: none; + padding: rem(0.6) rem(0.8); + border-radius: 4px; + background-color: rgba(0, 255, 104, 0.16); + } + } + } + + .streamTypesHeader { + padding: rem(1); + border: none; + background: #151717; + + .streamTypesTitle { + font-size: rem(1.6); + color: var(--ifm-color-white); + font-weight: bold; + } + .streamTypesDescription { + display: flex; + padding: rem(0.5) 0; + gap: rem(2); + justify-content: space-between; + color: var(--ifm-color-white); + font-size: rem(1.4); + } + } +} diff --git a/src/features/Apiexplorer/Schema/SchemaProperties/index.tsx b/src/features/Apiexplorer/Schema/SchemaProperties/index.tsx index 822ca8de..86e09895 100644 --- a/src/features/Apiexplorer/Schema/SchemaProperties/index.tsx +++ b/src/features/Apiexplorer/Schema/SchemaProperties/index.tsx @@ -32,6 +32,7 @@ const SchemaProperties = ({ jsonSchema }: TJsonSchemaType) => { is_open properties={jsonSchema.properties} value={jsonSchema.properties} + jsonSchema={jsonSchema} /> )} From 252d03fdb4665df9474a4a0dde203a4ebb874b22 Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Thu, 7 Dec 2023 14:40:26 +0400 Subject: [PATCH 2/5] test: added testcases for stream_types object --- .../__tests__/RecursiveProperties.test.tsx | 54 ++++++++++++++- .../RecursiveProperties/index.tsx | 15 +++-- .../__tests__/SchemaBodyHeader.test.tsx | 31 +++++++++ .../SchemaBodyHeader/index.tsx | 2 +- .../__tests__/SchemaObjectContent.test.tsx | 51 ++++++++++++++ .../SchemaObjectContent/index.tsx | 1 - .../__tests__/StreamTypesObject.test.tsx | 67 +++++++++++++++++++ .../StreamTypesObject/index.tsx | 46 +++++++------ .../Apiexplorer/Schema/Schema.module.scss | 52 ++++++++------ 9 files changed, 267 insertions(+), 52 deletions(-) create mode 100644 src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/__tests__/StreamTypesObject.test.tsx diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/__tests__/RecursiveProperties.test.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/__tests__/RecursiveProperties.test.tsx index 46e37534..38d5a1bd 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/__tests__/RecursiveProperties.test.tsx +++ b/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(); + render( + , + ); 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( + , + ); + const streamTypesObject = await screen.getByTestId('dt_stream_types_object'); + expect(streamTypesObject).toBeVisible(); + }); }); diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/index.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/index.tsx index ff6cdb17..808b44c6 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/index.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/index.tsx @@ -7,20 +7,22 @@ type TRecursiveProperties = { is_open: boolean; properties: any; value: any; - jsonSchema?: any; + jsonSchema: any; }; const RecursiveProperties = ({ is_open, properties, value, jsonSchema }: TRecursiveProperties) => { const keys = properties && Object.keys(properties); + if (!is_open) { - //if object is not open then ret null return null; } - - if ('oneOf' in value) { - return ; + if (value && 'oneOf' in value) { + return ( + + + + ); } - // this will be true when we are not inside properties obj? !!!!!! if (!keys) { return ( @@ -36,7 +38,6 @@ const RecursiveProperties = ({ is_open, properties, value, jsonSchema }: TRecurs {index === 0 && value?.items?.description && ( )} - {/* check if its forgetAll Request not response */} {key === 'forget_all' && 'oneOf' in value[key] ? ( { 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( + 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(); + }); }); diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx index 49fa46fa..c60e2201 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx @@ -12,7 +12,7 @@ type TSchemaBodyHeader = { setIsOpenObject: (boolean) => void; examples: string[]; enum; - is_stream_types?: boolean; + is_stream_types: boolean; }; const SchemaBodyHeader = ({ diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/__tests__/SchemaObjectContent.test.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/__tests__/SchemaObjectContent.test.tsx index d2373021..f3f38e18 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/__tests__/SchemaObjectContent.test.tsx +++ b/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(); @@ -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( + , + ); + + 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(); + }); }); diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/index.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/index.tsx index 24fc8427..5a3c77dc 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/index.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/index.tsx @@ -14,7 +14,6 @@ type TSchemaObjectContent = { is_stream_types?: boolean; }; -//json schema also here full obj export default function SchemaObjectContent({ key_value, properties, diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/__tests__/StreamTypesObject.test.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/__tests__/StreamTypesObject.test.tsx new file mode 100644 index 00000000..ad1b93b3 --- /dev/null +++ b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/__tests__/StreamTypesObject.test.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import userEvent from '@testing-library/user-event'; +import { screen, render } from '@testing-library/react'; +import StreamTypesObject from '..'; + +describe('StreamTypesObject', () => { + const json_schema = { + 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', + ], + }, + }; + + it('should render button that opens jsonschema', async () => { + render(); + + const schema_button = await screen.findByText('{}'); + + expect(schema_button).toBeVisible(); + + await userEvent.click(schema_button); + + const schema = await screen.findByTitle('JSON'); + expect(schema).toBeVisible(); + }); + + it('should render the header of the object', () => { + render(); + + const header_title = screen.getAllByText(/stream_types/)[0]; + expect(header_title).toBeInTheDocument(); + + const header_description = screen.getByText(/This stream_types description/i); + expect(header_description).toBeInTheDocument(); + }); + + it('should render the body of StreamTypesObject', () => { + render(); + + const type = screen.getByText(/enum/i); + expect(type).toBeInTheDocument(); + + const enum_type = screen.getByText(/string/i); + expect(enum_type).toBeInTheDocument(); + + json_schema.stream_types.enum.map((item) => { + const enum_name = screen.getByText(item); + expect(enum_name).toBeInTheDocument(); + }); + }); +}); diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/index.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/index.tsx index 1592269b..fb455569 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/index.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/index.tsx @@ -1,6 +1,7 @@ -import React from 'react'; +import React, { Suspense } from 'react'; import StreamTypesHeader from './StreamTypesHeader'; import StreamTypesBody from './StreamTypesBody'; +import SourceButton from '../../SourceButton/SourceButton'; import styles from '../../Schema.module.scss'; type TStreamTypesObject = { @@ -8,31 +9,38 @@ type TStreamTypesObject = { stream_types: { description: string; type: string; - enum: Array< - | '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' - >; + enum; }; }; }; +const ReactJson = React.lazy(() => import('react-json-view')); + const StreamTypesObject = ({ definitions }: TStreamTypesObject) => { + const [is_code_open, setIsCodeOpen] = React.useState(false); + let data = ''; + try { + data = JSON.stringify(definitions.stream_types, null, 2); + } catch (error) { + data = ''; + console.error('There was an issue stringifying JSON data: ', error); + } return ( -
+
+ - + {is_code_open ? ( + + Loading...
}> + + + + ) : ( + + )}
); }; diff --git a/src/features/Apiexplorer/Schema/Schema.module.scss b/src/features/Apiexplorer/Schema/Schema.module.scss index 4848a8d4..e84c890f 100644 --- a/src/features/Apiexplorer/Schema/Schema.module.scss +++ b/src/features/Apiexplorer/Schema/Schema.module.scss @@ -304,14 +304,44 @@ } .streamTypesContainer { - border-radius: 6px; margin-top: rem(1); margin-bottom: rem(2.4); + &:hover { + > .sourceButtonMain { + opacity: 1; + margin: 10px; + } + } + + .streamTypesHeader { + padding: rem(1); + border: none; + background: #151717; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + + .streamTypesTitle { + font-size: rem(1.6); + color: var(--ifm-color-white); + font-weight: bold; + } + .streamTypesDescription { + display: flex; + padding: rem(0.5) 0; + gap: rem(2); + justify-content: space-between; + color: var(--ifm-color-white); + font-size: rem(1.4); + } + } + .streamTypesBody { background-color: rgba(219, 219, 219, 0.05); display: flex; padding: rem(1); + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; .streamTypesObject { display: flex; @@ -352,24 +382,4 @@ } } } - - .streamTypesHeader { - padding: rem(1); - border: none; - background: #151717; - - .streamTypesTitle { - font-size: rem(1.6); - color: var(--ifm-color-white); - font-weight: bold; - } - .streamTypesDescription { - display: flex; - padding: rem(0.5) 0; - gap: rem(2); - justify-content: space-between; - color: var(--ifm-color-white); - font-size: rem(1.4); - } - } } From 753b9f133d908f126755908b9338000ff77aa663 Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Fri, 8 Dec 2023 11:45:36 +0400 Subject: [PATCH 3/5] fix: extract types for stream_types enum --- .../SchemaBodyHeader/index.tsx | 12 +++---- .../StreamTypesObject/StreamTypesBody.tsx | 18 ++--------- .../__tests__/StreamTypesObject.test.tsx | 31 +++++++++---------- .../StreamTypesObject/index.tsx | 3 +- src/types/index.ts | 4 ++- 5 files changed, 27 insertions(+), 41 deletions(-) diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx index c60e2201..7a22c053 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx @@ -120,13 +120,11 @@ const SchemaBodyHeader = ({ )} {is_stream_types && ( - -
- {'one of'} - - {'array'} -
- +
+ {'one of'} + + {'array'} +
)} {pattern && ( diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesBody.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesBody.tsx index 4592a10c..32b0c98d 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesBody.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesBody.tsx @@ -1,24 +1,10 @@ import React from 'react'; +import { TEnumStreamType } from '@site/src/types'; import styles from '../../Schema.module.scss'; type TStreamTypesBody = { type: string; - _enum: Array< - | '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' - >; + _enum: TEnumStreamType; }; const StreamTypesBody = ({ type, _enum }: TStreamTypesBody) => { diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/__tests__/StreamTypesObject.test.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/__tests__/StreamTypesObject.test.tsx index ad1b93b3..c9feb182 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/__tests__/StreamTypesObject.test.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/__tests__/StreamTypesObject.test.tsx @@ -1,29 +1,28 @@ import React from 'react'; import userEvent from '@testing-library/user-event'; import { screen, render } from '@testing-library/react'; +import { TEnumStreamType } from '@site/src/types'; import StreamTypesObject from '..'; describe('StreamTypesObject', () => { + const _enum: TEnumStreamType = [ + 'balance', + 'candles', + 'cashier_payments', + 'p2p_advert', + 'p2p_advertiser', + 'p2p_order', + 'proposal', + 'proposal_open_contract', + 'ticks', + 'transaction', + 'website_status', + ]; const json_schema = { 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', - ], + enum: _enum, }, }; diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/index.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/index.tsx index fb455569..f4801b5a 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/index.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/index.tsx @@ -2,6 +2,7 @@ import React, { Suspense } from 'react'; import StreamTypesHeader from './StreamTypesHeader'; import StreamTypesBody from './StreamTypesBody'; import SourceButton from '../../SourceButton/SourceButton'; +import { TEnumStreamType } from '@site/src/types'; import styles from '../../Schema.module.scss'; type TStreamTypesObject = { @@ -9,7 +10,7 @@ type TStreamTypesObject = { stream_types: { description: string; type: string; - enum; + enum: TEnumStreamType; }; }; }; diff --git a/src/types/index.ts b/src/types/index.ts index f2ae5ece..53b5e649 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,4 +1,4 @@ -import { ApiToken } from '@deriv/api-types'; +import { ApiToken, StreamTypes } from '@deriv/api-types'; import { Column } from 'react-table'; export type TTokensArrayType = ApiToken['tokens']; @@ -15,3 +15,5 @@ export type TInfo = { auth_required?: number; auth_scopes?: string[]; }; + +export type TEnumStreamType = Array; From 1c8bf3be68fd6cd42d5fe713ba8f44c4dc1fd612 Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Fri, 8 Dec 2023 14:29:04 +0400 Subject: [PATCH 4/5] fix: resolve comments --- .../Schema/RecursiveContent/RecursiveProperties/index.tsx | 2 +- .../Schema/RecursiveContent/SchemaBodyHeader/index.tsx | 6 +++--- .../StreamTypesObject/StreamTypesHeader.tsx | 2 +- src/features/Apiexplorer/Schema/Schema.module.scss | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/index.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/index.tsx index 808b44c6..306451db 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/index.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/index.tsx @@ -44,7 +44,7 @@ const RecursiveProperties = ({ is_open, properties, value, jsonSchema }: TRecurs key_value={key} properties={properties} jsonSchema={jsonSchema} - is_stream_types={true} + is_stream_types /> ) : ( diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx index 7a22c053..6a21e4af 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx @@ -121,9 +121,9 @@ const SchemaBodyHeader = ({ {is_stream_types && (
- {'one of'} - - {'array'} + one of + + array
)} diff --git a/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesHeader.tsx b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesHeader.tsx index 65560423..003cb1cb 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesHeader.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/StreamTypesObject/StreamTypesHeader.tsx @@ -9,7 +9,7 @@ type TStreamTypesHeader = { const StreamTypesHeader = ({ description }: TStreamTypesHeader) => { return (
- {'stream_types'} + stream_types
{description}
diff --git a/src/features/Apiexplorer/Schema/Schema.module.scss b/src/features/Apiexplorer/Schema/Schema.module.scss index e84c890f..d57c3163 100644 --- a/src/features/Apiexplorer/Schema/Schema.module.scss +++ b/src/features/Apiexplorer/Schema/Schema.module.scss @@ -310,7 +310,7 @@ &:hover { > .sourceButtonMain { opacity: 1; - margin: 10px; + margin: rem(1); } } From 4659ad9eb7345a7113b99f5dba78840ce36a4c4a Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Wed, 13 Dec 2023 12:08:57 +0400 Subject: [PATCH 5/5] fix: fix click issue for src btn --- src/features/Apiexplorer/Schema/Schema.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/features/Apiexplorer/Schema/Schema.module.scss b/src/features/Apiexplorer/Schema/Schema.module.scss index d57c3163..09a27c3b 100644 --- a/src/features/Apiexplorer/Schema/Schema.module.scss +++ b/src/features/Apiexplorer/Schema/Schema.module.scss @@ -92,6 +92,7 @@ cursor: pointer; font-weight: 500; transition: opacity 0.2s ease-in-out; + z-index: 1; } .schemaBody {