fix: change button to href so that link is visible at the bottom

Author: utkarsha-deriv

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);
+  }
 }

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(<HighlightCode description={null} />);
     expect(empty_highlight.container.firstChild).toBe(null);
   });
+
+  it('should render page of the selected api call name in the description', async () => {
+    render(<HighlightCode description={'This is a `residence_list` test'} />);
+    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');
+  });
 });

src/features/Apiexplorer/Schema/HighlightCode/index.tsx

@@ -1,33 +1,29 @@
 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 (
     <React.Fragment>
       {first}
       {code && (
         <span className={clsx(styles.schemaRole, styles.schemaCode)}>
           {has_api_call ? (
-            <button onClick={() => link_api_call(code)} className={styles.schemaLink}>
+            <a
+              href={`#${code}`}
+              onClick={() => window.scrollTo(0, 0)}
+              className={styles.schemaLink}
+            >
               {code}
-            </button>
+            </a>
           ) : (
             code
           )}

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(

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',

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 = [];