From 12dab35d288e0c3362492dcd2d105c688bda9ef4 Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Mon, 11 Dec 2023 17:43:31 +0400 Subject: [PATCH 1/4] feat: add to link api call names in description - generalise --- .../HighlightCode/HighlightCode.module.scss | 29 +++++++++++-------- .../Schema/HighlightCode/index.tsx | 24 ++++++++++++++- 2 files changed, 40 insertions(+), 13 deletions(-) diff --git a/src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss b/src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss index 24b3419b1..c0ec79e54 100644 --- a/src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss +++ b/src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss @@ -1,18 +1,23 @@ @use 'src/styles/utility' as *; .schemaRole { - background-color: rgba(255, 255, 255, 0.16); - border: none; - font-size: rem(1.4); - font-weight: 400; - line-height: rem(2.4); - color: var(--ifm-color-white); - height: fit-content; - padding: rem(0.5) rem(0.5); - margin: 0 rem(0.5); + background-color: rgba(255, 255, 255, 0.16); + border: none; + font-size: rem(1.4); + font-weight: 400; + line-height: rem(2.4); + color: var(--ifm-color-white); + height: fit-content; + padding: rem(0.5) rem(0.5); + margin: 0 rem(0.5); } - + .schemaCode { - color: var(--ifm-color-white); - font-size: rem(1.4); + color: var(--ifm-color-white); + font-size: rem(1.4); +} + +.schemaLink { + cursor: pointer; + text-decoration: underline; } diff --git a/src/features/Apiexplorer/Schema/HighlightCode/index.tsx b/src/features/Apiexplorer/Schema/HighlightCode/index.tsx index 030428f1f..3907da6a1 100644 --- a/src/features/Apiexplorer/Schema/HighlightCode/index.tsx +++ b/src/features/Apiexplorer/Schema/HighlightCode/index.tsx @@ -1,16 +1,38 @@ import React from 'react'; import clsx from 'clsx'; import styles from './HighlightCode.module.scss'; +import { playground_requests } from '@site/src/utils/playground_requests'; import { SchemaDescriptionTypes } from '../RecursiveContent/SchemaDescription'; +import { useHistory, useLocation } from '@docusaurus/router'; export const HighlightCode = ({ description }: SchemaDescriptionTypes) => { + const { pathname } = useLocation(); + const history = useHistory(); + if (!description) return null; const [first, code, ...rest] = description.split('`'); + + const api_call_object = playground_requests.find((el) => el.name === code); + const link_api_call = (obj) => { + window.scrollTo(0, 0); + history.push(`${pathname}#${obj?.name}`); + }; + return ( {first} - {code && {code}} + {code && ( + + {api_call_object ? ( + + ) : ( + code + )} + + )} {rest.length > 0 && } ); From 91563bdab111f14e4c0ecad2c926b95a7a4949b8 Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Tue, 12 Dec 2023 12:11:50 +0400 Subject: [PATCH 2/4] fix: fix scroll to top issue --- .../Apiexplorer/Schema/HighlightCode/index.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/features/Apiexplorer/Schema/HighlightCode/index.tsx b/src/features/Apiexplorer/Schema/HighlightCode/index.tsx index 3907da6a1..a040b2c8c 100644 --- a/src/features/Apiexplorer/Schema/HighlightCode/index.tsx +++ b/src/features/Apiexplorer/Schema/HighlightCode/index.tsx @@ -1,9 +1,9 @@ import React from 'react'; import clsx from 'clsx'; -import styles from './HighlightCode.module.scss'; +import { useHistory, useLocation } from '@docusaurus/router'; import { playground_requests } from '@site/src/utils/playground_requests'; import { SchemaDescriptionTypes } from '../RecursiveContent/SchemaDescription'; -import { useHistory, useLocation } from '@docusaurus/router'; +import styles from './HighlightCode.module.scss'; export const HighlightCode = ({ description }: SchemaDescriptionTypes) => { const { pathname } = useLocation(); @@ -13,10 +13,10 @@ export const HighlightCode = ({ description }: SchemaDescriptionTypes) => { const [first, code, ...rest] = description.split('`'); - const api_call_object = playground_requests.find((el) => el.name === code); - const link_api_call = (obj) => { + const has_api_call = playground_requests.some((el) => el.name === code); + const link_api_call = (api_call_name) => { window.scrollTo(0, 0); - history.push(`${pathname}#${obj?.name}`); + history.push(`${pathname}#${api_call_name}`); }; return ( @@ -24,8 +24,8 @@ export const HighlightCode = ({ description }: SchemaDescriptionTypes) => { {first} {code && ( - {api_call_object ? ( - ) : ( From 6d2ab3dff0037ab94c5aaf26623a632419defb8e Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Tue, 12 Dec 2023 16:37:45 +0400 Subject: [PATCH 3/4] fix: fix broken tests --- .../HighlightCode/__tests__/HighlightCode.test.tsx | 10 ++++++++++ .../__tests__/RecursiveProperties.test.tsx | 10 ++++++++++ .../__tests__/SchemaObjectContent.test.tsx | 10 ++++++++++ .../__tests__/SchemaProperties.test.tsx | 10 ++++++++++ 4 files changed, 40 insertions(+) diff --git a/src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx b/src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx index 0607dac73..ad91874f9 100644 --- a/src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx +++ b/src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx @@ -2,6 +2,16 @@ import React from 'react'; import { HighlightCode } from '..'; import { render, screen } from '@testing-library/react'; +jest.mock('@docusaurus/router', () => ({ + useLocation: () => ({ + pathname: '', + hash: '', + }), + useHistory: () => ({ + push: jest.fn(), + }), +})); + describe('HighlightCode', () => { it('should render HighlightCode properly', async () => { render(); 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 46e37534d..b20302bcb 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/__tests__/RecursiveProperties.test.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/__tests__/RecursiveProperties.test.tsx @@ -19,6 +19,16 @@ const fakeItem = { }, }; +jest.mock('@docusaurus/router', () => ({ + useLocation: () => ({ + pathname: '', + hash: '', + }), + useHistory: () => ({ + push: jest.fn(), + }), +})); + describe('RecursiveProperties', () => { it('should be able to render recursive items', async () => { render( 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 d23730213..8a8e39b1b 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/__tests__/SchemaObjectContent.test.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/__tests__/SchemaObjectContent.test.tsx @@ -3,6 +3,16 @@ import SchemaObjectContent from '..'; import userEvent from '@testing-library/user-event'; import { screen, render } from '@testing-library/react'; +jest.mock('@docusaurus/router', () => ({ + useLocation: () => ({ + pathname: '', + hash: '', + }), + useHistory: () => ({ + push: jest.fn(), + }), +})); + const fake_properties = { test_item: { description: 'test description', diff --git a/src/features/Apiexplorer/Schema/SchemaProperties/__tests__/SchemaProperties.test.tsx b/src/features/Apiexplorer/Schema/SchemaProperties/__tests__/SchemaProperties.test.tsx index 8027b03de..72a449722 100644 --- a/src/features/Apiexplorer/Schema/SchemaProperties/__tests__/SchemaProperties.test.tsx +++ b/src/features/Apiexplorer/Schema/SchemaProperties/__tests__/SchemaProperties.test.tsx @@ -3,6 +3,16 @@ import SchemaProperties from '..'; import userEvent from '@testing-library/user-event'; import { render, screen } from '@testing-library/react'; +jest.mock('@docusaurus/router', () => ({ + useLocation: () => ({ + pathname: '', + hash: '', + }), + useHistory: () => ({ + push: jest.fn(), + }), +})); + describe('SchemaProperties', () => { it('should throw an error when invalid JSON properties are passed', async () => { const consoleOutput = []; From 6490bca36139aa8d01a1a93ae7505625ab1725d3 Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Thu, 14 Dec 2023 13:21:02 +0400 Subject: [PATCH 4/4] fix: change button to href so that link is visible at the bottom --- .../HighlightCode/HighlightCode.module.scss | 5 ++++- .../__tests__/HighlightCode.test.tsx | 20 +++++++++---------- .../Schema/HighlightCode/index.tsx | 16 ++++++--------- .../__tests__/RecursiveProperties.test.tsx | 10 ---------- .../__tests__/SchemaObjectContent.test.tsx | 10 ---------- .../__tests__/SchemaProperties.test.tsx | 10 ---------- 6 files changed, 20 insertions(+), 51 deletions(-) diff --git a/src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss b/src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss index c0ec79e54..f56995b78 100644 --- a/src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss +++ b/src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss @@ -18,6 +18,9 @@ } .schemaLink { - cursor: pointer; text-decoration: underline; + color: var(--ifm-link-white); + &:hover { + color: var(--ifm-link-white); + } } diff --git a/src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx b/src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx index ad91874f9..20e58409b 100644 --- a/src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx +++ b/src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx @@ -1,16 +1,7 @@ import React from 'react'; import { HighlightCode } from '..'; import { render, screen } from '@testing-library/react'; - -jest.mock('@docusaurus/router', () => ({ - useLocation: () => ({ - pathname: '', - hash: '', - }), - useHistory: () => ({ - push: jest.fn(), - }), -})); +import userEvent from '@testing-library/user-event'; describe('HighlightCode', () => { it('should render HighlightCode properly', async () => { @@ -29,4 +20,13 @@ describe('HighlightCode', () => { const empty_highlight = render(); expect(empty_highlight.container.firstChild).toBe(null); }); + + it('should render page of the selected api call name in the description', async () => { + render(); + const api_call_name = screen.getByText(/residence_list/i); + + await userEvent.click(api_call_name); + + expect(api_call_name.closest('a')).toHaveAttribute('href', '#residence_list'); + }); }); diff --git a/src/features/Apiexplorer/Schema/HighlightCode/index.tsx b/src/features/Apiexplorer/Schema/HighlightCode/index.tsx index a040b2c8c..cb93af282 100644 --- a/src/features/Apiexplorer/Schema/HighlightCode/index.tsx +++ b/src/features/Apiexplorer/Schema/HighlightCode/index.tsx @@ -1,23 +1,15 @@ import React from 'react'; import clsx from 'clsx'; -import { useHistory, useLocation } from '@docusaurus/router'; import { playground_requests } from '@site/src/utils/playground_requests'; import { SchemaDescriptionTypes } from '../RecursiveContent/SchemaDescription'; import styles from './HighlightCode.module.scss'; export const HighlightCode = ({ description }: SchemaDescriptionTypes) => { - const { pathname } = useLocation(); - const history = useHistory(); - if (!description) return null; const [first, code, ...rest] = description.split('`'); const has_api_call = playground_requests.some((el) => el.name === code); - const link_api_call = (api_call_name) => { - window.scrollTo(0, 0); - history.push(`${pathname}#${api_call_name}`); - }; return ( @@ -25,9 +17,13 @@ export const HighlightCode = ({ description }: SchemaDescriptionTypes) => { {code && ( {has_api_call ? ( - + ) : ( code )} 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 b20302bcb..46e37534d 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/__tests__/RecursiveProperties.test.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/__tests__/RecursiveProperties.test.tsx @@ -19,16 +19,6 @@ const fakeItem = { }, }; -jest.mock('@docusaurus/router', () => ({ - useLocation: () => ({ - pathname: '', - hash: '', - }), - useHistory: () => ({ - push: jest.fn(), - }), -})); - describe('RecursiveProperties', () => { it('should be able to render recursive items', async () => { render( 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 8a8e39b1b..d23730213 100644 --- a/src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/__tests__/SchemaObjectContent.test.tsx +++ b/src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/__tests__/SchemaObjectContent.test.tsx @@ -3,16 +3,6 @@ import SchemaObjectContent from '..'; import userEvent from '@testing-library/user-event'; import { screen, render } from '@testing-library/react'; -jest.mock('@docusaurus/router', () => ({ - useLocation: () => ({ - pathname: '', - hash: '', - }), - useHistory: () => ({ - push: jest.fn(), - }), -})); - const fake_properties = { test_item: { description: 'test description', diff --git a/src/features/Apiexplorer/Schema/SchemaProperties/__tests__/SchemaProperties.test.tsx b/src/features/Apiexplorer/Schema/SchemaProperties/__tests__/SchemaProperties.test.tsx index 72a449722..8027b03de 100644 --- a/src/features/Apiexplorer/Schema/SchemaProperties/__tests__/SchemaProperties.test.tsx +++ b/src/features/Apiexplorer/Schema/SchemaProperties/__tests__/SchemaProperties.test.tsx @@ -3,16 +3,6 @@ import SchemaProperties from '..'; import userEvent from '@testing-library/user-event'; import { render, screen } from '@testing-library/react'; -jest.mock('@docusaurus/router', () => ({ - useLocation: () => ({ - pathname: '', - hash: '', - }), - useHistory: () => ({ - push: jest.fn(), - }), -})); - describe('SchemaProperties', () => { it('should throw an error when invalid JSON properties are passed', async () => { const consoleOutput = [];