Skip to content
This repository has been archived by the owner on May 13, 2024. It is now read-only.

[API] add link to api call names in description #272

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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);
}
}
Original file line number Diff line number Diff line change
@@ -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 () => {
Expand All @@ -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');
});
});
22 changes: 20 additions & 2 deletions src/features/Apiexplorer/Schema/HighlightCode/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down