patch: Added arrow to digest dropdown
Updated md parser config Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
This commit is contained in:
parent
0b71b86db5
commit
95495ccc23
src
@ -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');
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user