diff --git a/src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss b/src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss
index 24b3419b..f56995b7 100644
--- a/src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss
+++ b/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);
+ }
}
diff --git a/src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx b/src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx
index 0607dac7..20e58409 100644
--- a/src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx
+++ b/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();
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 030428f1..cb93af28 100644
--- a/src/features/Apiexplorer/Schema/HighlightCode/index.tsx
+++ b/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 (
{first}
- {code && {code}}
+ {code && (
+
+ {has_api_call ? (
+ window.scrollTo(0, 0)}
+ className={styles.schemaLink}
+ >
+ {code}
+
+ ) : (
+ code
+ )}
+
+ )}
{rest.length > 0 && }
);