Merge pull request #272 from utkarsha-deriv/utkarsha/DERA-450/link-api-names-in-description-to-respective-api-calls

Author: sanjam-deriv

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

@@ -1,18 +1,26 @@
 @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 {
+  text-decoration: underline;
+  color: var(--ifm-link-white);
+  &:hover {
+    color: var(--ifm-link-white);
+  }
 }

src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { HighlightCode } from '..';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 describe('HighlightCode', () => {
   it('should render HighlightCode properly', async () => {
@@ -19,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,16 +1,34 @@
 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 styles from './HighlightCode.module.scss';
 
 export const HighlightCode = ({ description }: SchemaDescriptionTypes) => {
   if (!description) return null;
 
   const [first, code, ...rest] = description.split('`');
+
+  const has_api_call = playground_requests.some((el) => el.name === code);
+
   return (
     <React.Fragment>
       {first}
-      {code && <span className={clsx(styles.schemaRole, styles.schemaCode)}>{code}</span>}
+      {code && (
+        <span className={clsx(styles.schemaRole, styles.schemaCode)}>
+          {has_api_call ? (
+            <a
+              href={`#${code}`}
+              onClick={() => window.scrollTo(0, 0)}
+              className={styles.schemaLink}
+            >
+              {code}
+            </a>
+          ) : (
+            code
+          )}
+        </span>
+      )}
       {rest.length > 0 && <HighlightCode description={rest.join('`')} />}
     </React.Fragment>
   );