patch: Added arrow to digest dropdown

Updated md parser config

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
This commit is contained in:
Raul Kele 2022-10-18 12:52:30 +03:00
parent 0b71b86db5
commit 95495ccc23
3 changed files with 42 additions and 19 deletions
src
__tests__/RepoPage
components
utilities

View File

@ -24,13 +24,15 @@ const mockedTagsData = [
];
describe('Tags component', () => {
it('should open and close details dropdown for tags', () => {
it('should open and close details dropdown for tags', async () => {
render(<Tags tags={mockedTagsData} />);
const openBtn = screen.getByText(/see digest/i);
const openBtn = screen.getByText(/digest/i);
fireEvent.click(openBtn);
expect(screen.queryByText(/see digest/i)).not.toBeInTheDocument();
expect(screen.getByText(/hide digest/i)).toBeInTheDocument();
expect(screen.getByText(/OS\/ARCH/i)).toBeInTheDocument();
fireEvent.click(openBtn);
await waitFor(() => expect(screen.queryByText(/OS\/ARCH/i)).not.toBeInTheDocument());
});
it('should navigate to tag page details when tag is clicked', async () => {
render(<Tags tags={mockedTagsData} />);
const tagLink = await screen.findByText('latest');

View File

@ -19,6 +19,7 @@ import {
import { Markdown } from 'utilities/MarkdowntojsxWrapper';
import transform from 'utilities/transform';
import { DateTime } from 'luxon';
import { KeyboardArrowDown, KeyboardArrowRight } from '@mui/icons-material';
const useStyles = makeStyles(() => ({
tagCard: {
@ -57,6 +58,18 @@ const useStyles = makeStyles(() => ({
},
clickCursor: {
cursor: 'pointer'
},
dropdown: {
flexDirection: 'row',
alignItems: 'center'
},
dropdownText: {
color: '#1479FF',
paddingTop: '1rem',
fontSize: '1rem',
fontWeight: '600',
cursor: 'pointer',
textAlign: 'center'
}
}));
@ -107,19 +120,24 @@ export default function TagCard(props) {
</Typography>
</Tooltip>
</Stack>
<Typography
sx={{
color: '#1479FF',
paddingTop: '1rem',
fontSize: '0.8125rem',
fontWeight: '600',
cursor: 'pointer'
}}
onClick={() => setOpen(!open)}
>
{!open ? 'See digest' : 'Hide digest'}
</Typography>
<Stack direction="row" onClick={() => setOpen(!open)}>
{!open ? (
<KeyboardArrowRight className={classes.dropdownText} />
) : (
<KeyboardArrowDown className={classes.dropdownText} />
)}
<Typography
sx={{
color: '#1479FF',
paddingTop: '1rem',
fontSize: '0.8125rem',
fontWeight: '600',
cursor: 'pointer'
}}
>
DIGEST
</Typography>
</Stack>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box>
<Table size="small" padding="none" sx={{ [`& .${tableCellClasses.root}`]: { borderBottom: 'none' } }}>
@ -145,7 +163,7 @@ export default function TagCard(props) {
className={classes.clickCursor}
>
<TableCell style={{ color: '#696969' }}>
<Tooltip title={digest || ''} placement="right">
<Tooltip title={digest || ''} placement="top">
<Typography variant="body1">{digest?.substr(0, 12)}</Typography>
</Tooltip>
</TableCell>

View File

@ -4,7 +4,10 @@ import Markdown from 'markdown-to-jsx';
const MarkdownWrapper = (props) => {
const { children, options } = props;
return (
<Markdown {...props} options={{ ...options, overrides: { a: { props: { target: '_blank' } } } }}>
<Markdown
{...props}
options={{ ...options, disableParsingRawHTML: true, overrides: { a: { props: { target: '_blank' } } } }}
>
{children}
</Markdown>
);