Skip to content

Commit

Permalink
parse Markdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshlarsen
joshlarsen committed Jun 19, 2020
1 parent e2fa7ce commit fec761c
Show file tree
Hide file tree
Showing 5 changed files with 306 additions and 36 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"json2csv": "^4.5.4",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-markdown": "^4.3.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0"
},
Expand Down
3 changes: 1 addition & 2 deletions src/components/Finding.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,7 @@ class Finding extends React.Component {
return (
<tr
onClick={open}
className={status === 'failed' ? 'finding finding-fail' : 'finding'}
>
className={status === 'failed' ? 'finding finding-fail' : 'finding'}>
<td className='px-6 py-4 whitespace-no-wrap border-b border-gray-200'>
<div className='flex items-center'>
<div className='flex-shrink-0 h-10 w-10'>
Expand Down
43 changes: 16 additions & 27 deletions src/components/Modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react'
import Resources from './Resources'
import Icon from './Icon'
import Badge from './Badge'
const ReactMarkdown = require('react-markdown')

class Modal extends React.Component {
handleEscapeKey = event => {
Expand Down Expand Up @@ -55,12 +56,10 @@ class Modal extends React.Component {
return (
<div
className='fixed bottom-0 inset-x-0 px-4 pb-6 sm:inset-0 sm:p-0 sm:flex sm:items-center sm:justify-center'
style={{ display: 'flex' }}
>
style={{ display: 'flex' }}>
<div
className='fixed inset-0 transition-opacity'
onClick={this.props.handleClose}
>
onClick={this.props.handleClose}>
<div className='absolute inset-0 bg-gray-500 opacity-75'></div>
</div>

Expand All @@ -84,15 +83,13 @@ class Modal extends React.Component {
<div className='ml-auto modal-close-button'>
<div
onClick={this.props.handleClose}
className='flex justify-end text-gray-500'
>
className='flex justify-end text-gray-500'>
<svg
viewBox='0 0 24 24'
stroke='currentColor'
width='24'
height='24'
className='modal-close'
>
className='modal-close'>
<path
strokeLinecap='round'
strokeLinejoin='round'
Expand All @@ -112,7 +109,7 @@ class Modal extends React.Component {
Description
</dt>
<dd className='mt-1 text-sm leading-5 text-gray-600 sm:mt-0 sm:col-span-3'>
{finding.description}
<ReactMarkdown source={finding.description} />
</dd>
</div>
<div className='mt-8 sm:mt-0 sm:grid sm:grid-cols-4 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5'>
Expand All @@ -128,15 +125,15 @@ class Modal extends React.Component {
Remediation
</dt>
<dd className='mt-1 text-sm leading-5 text-gray-600 sm:mt-0 sm:col-span-3'>
{finding.remediation}
<ReactMarkdown source={finding.remediation} />
</dd>
</div>
<div className='mt-8 sm:mt-0 sm:grid sm:grid-cols-4 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5'>
<dt className='text-sm leading-5 font-medium text-gray-700'>
Validation
</dt>
<dd className='mt-1 text-sm leading-5 text-gray-600 sm:mt-0 sm:col-span-3'>
{finding.validation}
<ReactMarkdown source={finding.validation} />
</dd>
</div>
<div className='mt-8 sm:mt-0 sm:grid sm:grid-cols-4 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5'>
Expand All @@ -151,15 +148,13 @@ class Modal extends React.Component {
key={idx}
className={`${
idx > 0 ? 'border-t border-gray-200' : ''
} pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5`}
>
} pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5`}>
<div className='w-0 flex-1 flex items-center'>
<svg
className='flex-shrink-0 h-5 w-5 text-indigo-500 hover:text-indigo-600'
fill='none'
viewBox='0 0 24 24'
stroke='currentColor'
>
stroke='currentColor'>
<path
strokeLinecap='round'
strokeLinejoin='round'
Expand All @@ -171,8 +166,7 @@ class Modal extends React.Component {
<a
href={reference.url}
target='_blank'
rel='noopener noreferrer'
>
rel='noopener noreferrer'>
{reference.ref}
</a>
</span>
Expand All @@ -194,12 +188,10 @@ class Modal extends React.Component {
return (
<div
className='fixed bottom-0 inset-x-0 px-4 pb-6 sm:inset-0 sm:p-0 sm:flex sm:items-center sm:justify-center'
style={{ display: 'flex' }}
>
style={{ display: 'flex' }}>
<div
className='fixed inset-0 transition-opacity'
onClick={this.props.handleClose}
>
onClick={this.props.handleClose}>
<div className='absolute inset-0 bg-gray-500 opacity-75'></div>
</div>

Expand All @@ -212,8 +204,7 @@ class Modal extends React.Component {
className='h-6 w-6 text-white'
fill='none'
viewBox='0 0 24 24'
stroke='currentColor'
>
stroke='currentColor'>
<path
strokeLinecap='round'
strokeLinejoin='round'
Expand All @@ -235,15 +226,13 @@ class Modal extends React.Component {
<div className='ml-auto modal-close-button'>
<div
onClick={this.props.handleClose}
className='flex justify-end text-gray-500'
>
className='flex justify-end text-gray-500'>
<svg
viewBox='0 0 24 24'
stroke='currentColor'
width='24'
height='24'
className='modal-close'
>
className='modal-close'>
<path
strokeLinecap='round'
strokeLinejoin='round'
Expand Down
5 changes: 5 additions & 0 deletions src/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ tr.finding:hover svg {
overflow-y: auto;
}

.modal-body code {
font-size: 0.75rem;
color: #2c7be5;
}

/* Octo Corner - https://github.com/tholman/github-corners */
.github-corner svg {
position: absolute;
Expand Down
Loading

0 comments on commit fec761c

Please sign in to comment.