diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/_reset.scss | 48 | ||||
| -rw-r--r-- | src/components/App/App.module.scss | 56 | ||||
| -rw-r--r-- | src/components/App/App.tsx | 118 | ||||
| -rw-r--r-- | src/components/Content/Content.tsx | 74 | ||||
| -rw-r--r-- | src/components/Details/Details.tsx | 254 | ||||
| -rw-r--r-- | src/components/RequestSummary/RequestSummary.tsx | 49 | ||||
| -rw-r--r-- | src/index.scss | 12 | ||||
| -rw-r--r-- | src/index.tsx | 2 | ||||
| -rw-r--r-- | yarn.lock | 163 |
10 files changed, 531 insertions, 247 deletions
diff --git a/package.json b/package.json index f49df56..24040cc 100644 --- a/package.json +++ b/package.json | |||
| @@ -10,8 +10,10 @@ | |||
| 10 | }, | 10 | }, |
| 11 | "license": "MIT", | 11 | "license": "MIT", |
| 12 | "dependencies": { | 12 | "dependencies": { |
| 13 | "bootstrap": "^5.1.3", | ||
| 13 | "classnames": "^2.3.1", | 14 | "classnames": "^2.3.1", |
| 14 | "react": "^17.0.2", | 15 | "react": "^17.0.2", |
| 16 | "react-bootstrap": "^2.1.1", | ||
| 15 | "react-dom": "^17.0.2", | 17 | "react-dom": "^17.0.2", |
| 16 | "react-json-view": "^1.21.3" | 18 | "react-json-view": "^1.21.3" |
| 17 | }, | 19 | }, |
diff --git a/src/_reset.scss b/src/_reset.scss deleted file mode 100644 index ed11813..0000000 --- a/src/_reset.scss +++ /dev/null | |||
| @@ -1,48 +0,0 @@ | |||
| 1 | /* http://meyerweb.com/eric/tools/css/reset/ | ||
| 2 | v2.0 | 20110126 | ||
| 3 | License: none (public domain) | ||
| 4 | */ | ||
| 5 | |||
| 6 | html, body, div, span, applet, object, iframe, | ||
| 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
| 8 | a, abbr, acronym, address, big, cite, code, | ||
| 9 | del, dfn, em, img, ins, kbd, q, s, samp, | ||
| 10 | small, strike, strong, sub, sup, tt, var, | ||
| 11 | b, u, i, center, | ||
| 12 | dl, dt, dd, ol, ul, li, | ||
| 13 | fieldset, form, label, legend, | ||
| 14 | table, caption, tbody, tfoot, thead, tr, th, td, | ||
| 15 | article, aside, canvas, details, embed, | ||
| 16 | figure, figcaption, footer, header, hgroup, | ||
| 17 | menu, nav, output, ruby, section, summary, | ||
| 18 | time, mark, audio, video { | ||
| 19 | margin: 0; | ||
| 20 | padding: 0; | ||
| 21 | border: 0; | ||
| 22 | font-size: 100%; | ||
| 23 | font: inherit; | ||
| 24 | vertical-align: baseline; | ||
| 25 | } | ||
| 26 | /* HTML5 display-role reset for older browsers */ | ||
| 27 | article, aside, details, figcaption, figure, | ||
| 28 | footer, header, hgroup, menu, nav, section { | ||
| 29 | display: block; | ||
| 30 | } | ||
| 31 | body { | ||
| 32 | line-height: 1; | ||
| 33 | } | ||
| 34 | ol, ul { | ||
| 35 | list-style: none; | ||
| 36 | } | ||
| 37 | blockquote, q { | ||
| 38 | quotes: none; | ||
| 39 | } | ||
| 40 | blockquote:before, blockquote:after, | ||
| 41 | q:before, q:after { | ||
| 42 | content: ''; | ||
| 43 | content: none; | ||
| 44 | } | ||
| 45 | table { | ||
| 46 | border-collapse: collapse; | ||
| 47 | border-spacing: 0; | ||
| 48 | } | ||
diff --git a/src/components/App/App.module.scss b/src/components/App/App.module.scss index 2036eb9..9837cdf 100644 --- a/src/components/App/App.module.scss +++ b/src/components/App/App.module.scss | |||
| @@ -1,55 +1,3 @@ | |||
| 1 | .app { | 1 | .content { |
| 2 | display: flex; | 2 | flex: 1 0 auto; |
| 3 | flex-flow: column nowrap; | ||
| 4 | grid-template-rows: auto 1fr; | ||
| 5 | height: 100vh; | ||
| 6 | overflow: hidden; | ||
| 7 | } | ||
| 8 | |||
| 9 | .main { | ||
| 10 | display: flex; | ||
| 11 | flex-flow: row nowrap; | ||
| 12 | flex-grow: 1; | ||
| 13 | overflow: hidden; | ||
| 14 | } | ||
| 15 | |||
| 16 | .header { | ||
| 17 | font-size: 1.2em; | ||
| 18 | display: flex; | ||
| 19 | flex-flow: row nowrap; | ||
| 20 | align-items: center; | ||
| 21 | justify-content: space-between; | ||
| 22 | background: black; | ||
| 23 | color: white; | ||
| 24 | padding: 1em; | ||
| 25 | |||
| 26 | a { | ||
| 27 | color: white; | ||
| 28 | } | ||
| 29 | } | ||
| 30 | |||
| 31 | .sidebar { | ||
| 32 | width: calc((6 / 16) * 100%); | ||
| 33 | height: 100%; | ||
| 34 | grid-area: sidebar; | ||
| 35 | border-right: 1px solid black; | ||
| 36 | overflow-y: auto; | ||
| 37 | |||
| 38 | li { | ||
| 39 | border-bottom: 1px solid gray; | ||
| 40 | } | ||
| 41 | } | ||
| 42 | |||
| 43 | .details { | ||
| 44 | width: calc((10 / 16) * 100%); | ||
| 45 | overflow: hidden; | ||
| 46 | height: 100%; | ||
| 47 | } | ||
| 48 | |||
| 49 | .noRequest, .noRequestSelected { | ||
| 50 | width: 100%; | ||
| 51 | height: 100%; | ||
| 52 | display: flex; | ||
| 53 | justify-content: center; | ||
| 54 | align-items: center; | ||
| 55 | } | 3 | } |
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index e361aa5..61f88f6 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx | |||
| @@ -6,6 +6,8 @@ import styles from './App.module.scss'; | |||
| 6 | import Details from "../Details/Details"; | 6 | import Details from "../Details/Details"; |
| 7 | import RequestSummary from "../RequestSummary/RequestSummary"; | 7 | import RequestSummary from "../RequestSummary/RequestSummary"; |
| 8 | import {getHost} from "../../utils"; | 8 | import {getHost} from "../../utils"; |
| 9 | import {Container, Navbar, Col, Row, Nav, ListGroup} from "react-bootstrap"; | ||
| 10 | import classNames from "classnames"; | ||
| 9 | 11 | ||
| 10 | interface Config { | 12 | interface Config { |
| 11 | url: string | 13 | url: string |
| @@ -50,29 +52,59 @@ export default function App() { | |||
| 50 | ), [selectedRequestIndex, calls]); | 52 | ), [selectedRequestIndex, calls]); |
| 51 | 53 | ||
| 52 | return config && ( | 54 | return config && ( |
| 53 | <div className={styles.app}> | 55 | <> |
| 54 | <header className={styles.header}> | 56 | <Navbar |
| 55 | {statusMap[readyState]} TTUN | 57 | bg="dark" |
| 56 | <a href={config.url} target="_blank">{config.url}</a> | 58 | variant="dark" |
| 57 | </header> | 59 | expand |
| 58 | <main className={styles.main}> | 60 | > |
| 59 | <ul className={styles.sidebar}> | 61 | <Container fluid> |
| 60 | { | 62 | <Navbar.Brand> |
| 61 | calls.length > 0 | 63 | {statusMap[readyState]} TTUN |
| 62 | ? calls.slice(0).reverse().map((requestResponse, index) => ( | 64 | </Navbar.Brand> |
| 63 | <li onClick={() => setSelectedRequestIndex(calls.length - index - 1)} key={`request-${index}`}> | 65 | <Navbar.Text> |
| 64 | <RequestSummary requestResponse={requestResponse} /> | 66 | <a href={config.url} target="_blank">{config.url}</a> |
| 65 | </li> | 67 | </Navbar.Text> |
| 66 | )) | 68 | </Container> |
| 67 | : ( | 69 | </Navbar> |
| 68 | <div className={styles.noRequest}> | 70 | <Container> |
| 69 | <p>No requests</p> | ||
| 70 | </div> | ||
| 71 | ) | ||
| 72 | } | ||
| 73 | </ul> | ||
| 74 | 71 | ||
| 75 | <div className={styles.details}> | 72 | </Container> |
| 73 | <Row className={classNames(styles.content, 'gx-0', 'overflow-hidden')}> | ||
| 74 | <Col className='border-end overflow-auto' xs={4}> | ||
| 75 | <ListGroup variant='flush'> | ||
| 76 | { | ||
| 77 | calls.length > 0 | ||
| 78 | ? ( | ||
| 79 | calls.slice(0).reverse().map((requestResponse, index) => { | ||
| 80 | const selected = selectedRequestIndex === calls.length - index - 1; | ||
| 81 | return ( | ||
| 82 | <ListGroup.Item | ||
| 83 | onClick={() => setSelectedRequestIndex(calls.length - index - 1)} | ||
| 84 | key={`request-${index}`} | ||
| 85 | className={classNames({ | ||
| 86 | 'bg-primary': selected, | ||
| 87 | 'text-light': selected, | ||
| 88 | 'border-bottom': true | ||
| 89 | })} | ||
| 90 | > | ||
| 91 | <RequestSummary | ||
| 92 | requestResponse={requestResponse} | ||
| 93 | selected={selected} | ||
| 94 | /> | ||
| 95 | </ListGroup.Item> | ||
| 96 | ) | ||
| 97 | }) | ||
| 98 | ) | ||
| 99 | : ( | ||
| 100 | <div className={styles.noRequest}> | ||
| 101 | <p>No requests</p> | ||
| 102 | </div> | ||
| 103 | ) | ||
| 104 | } | ||
| 105 | </ListGroup> | ||
| 106 | </Col> | ||
| 107 | <Col xs={8} className=''> | ||
| 76 | { | 108 | { |
| 77 | selectedRequest !== null | 109 | selectedRequest !== null |
| 78 | ? ( | 110 | ? ( |
| @@ -83,8 +115,44 @@ export default function App() { | |||
| 83 | </div> | 115 | </div> |
| 84 | ) | 116 | ) |
| 85 | } | 117 | } |
| 86 | </div> | 118 | </Col> |
| 87 | </main> | 119 | </Row> |
| 88 | </div> | 120 | </> |
| 121 | // <div className={styles.app}> | ||
| 122 | // <header className={styles.header}> | ||
| 123 | // {statusMap[readyState]} TTUN | ||
| 124 | // <a href={config.url} target="_blank">{config.url}</a> | ||
| 125 | // </header> | ||
| 126 | // <main className={styles.main}> | ||
| 127 | // <ul className={styles.sidebar}> | ||
| 128 | // { | ||
| 129 | // calls.length > 0 | ||
| 130 | // ? calls.slice(0).reverse().map((requestResponse, index) => ( | ||
| 131 | // <li onClick={() => setSelectedRequestIndex(calls.length - index - 1)} key={`request-${index}`}> | ||
| 132 | // <RequestSummary requestResponse={requestResponse} /> | ||
| 133 | // </li> | ||
| 134 | // )) | ||
| 135 | // : ( | ||
| 136 | // <div className={styles.noRequest}> | ||
| 137 | // <p>No requests</p> | ||
| 138 | // </div> | ||
| 139 | // ) | ||
| 140 | // } | ||
| 141 | // </ul> | ||
| 142 | // | ||
| 143 | // <div className={styles.details}> | ||
| 144 | // { | ||
| 145 | // selectedRequest !== null | ||
| 146 | // ? ( | ||
| 147 | // <Details requestResponse={selectedRequest} /> | ||
| 148 | // ) : ( | ||
| 149 | // <div className={styles.noRequestSelected}> | ||
| 150 | // <p>Select a request to inspect it</p> | ||
| 151 | // </div> | ||
| 152 | // ) | ||
| 153 | // } | ||
| 154 | // </div> | ||
| 155 | // </main> | ||
| 156 | // </div> | ||
| 89 | ); | 157 | ); |
| 90 | } | 158 | } |
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index a7b5949..cb5e6bc 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx | |||
| @@ -13,6 +13,21 @@ import { | |||
| 13 | } from "react"; | 13 | } from "react"; |
| 14 | import ReactJson from 'react-json-view'; | 14 | import ReactJson from 'react-json-view'; |
| 15 | import styles from './Content.module.scss'; | 15 | import styles from './Content.module.scss'; |
| 16 | import {Col, Container, Row} from "react-bootstrap"; | ||
| 17 | |||
| 18 | function getHeader(headers: { [key: string]: string }, key: string, unit?: string): string | null { | ||
| 19 | console.log(headers, key) | ||
| 20 | try { | ||
| 21 | const [_, value] = Object | ||
| 22 | .entries(headers) | ||
| 23 | .find(([headerKey]) => headerKey.toLowerCase() === key.toLowerCase()) | ||
| 24 | return unit !== undefined | ||
| 25 | ? `${value}${unit}` | ||
| 26 | : value | ||
| 27 | } catch { | ||
| 28 | return null; | ||
| 29 | } | ||
| 30 | } | ||
| 16 | 31 | ||
| 17 | interface ContentProps { | 32 | interface ContentProps { |
| 18 | data: RequestPayload | ResponsePayload | 33 | data: RequestPayload | ResponsePayload |
| @@ -20,17 +35,29 @@ interface ContentProps { | |||
| 20 | raw?: boolean | 35 | raw?: boolean |
| 21 | } | 36 | } |
| 22 | 37 | ||
| 23 | export default function Content({ raw, setRaw, ...props }: ContentProps): JSX.Element { | 38 | export default function Content({ raw, setRaw, data }: ContentProps): JSX.Element { |
| 24 | return ( | 39 | return ( |
| 25 | <div className={styles.content}> | 40 | <> |
| 26 | <div className={styles.header}> | 41 | <Container fluid className="border-bottom"> |
| 27 | <input id='raw' type='checkbox' checked={raw} onChange={() => setRaw(!raw)}/> | 42 | <Row className="py-3"> |
| 28 | <label htmlFor='raw'>Raw</label> | 43 | <Col> |
| 29 | </div> | 44 | <input id='raw' type='checkbox' checked={raw} onChange={() => setRaw(!raw)}/> |
| 30 | <div className={styles.body}> | 45 | <label htmlFor='raw' className="ps-1">Raw</label> |
| 46 | </Col> | ||
| 47 | <Col xs="auto"> | ||
| 48 | { | ||
| 49 | [ | ||
| 50 | getHeader(data.headers, 'content-length', 'bytes'), | ||
| 51 | getHeader(data.headers, 'content-type'), | ||
| 52 | ].filter(x => x !== null).join('; ') | ||
| 53 | } | ||
| 54 | </Col> | ||
| 55 | </Row> | ||
| 56 | </Container> | ||
| 57 | <Row> | ||
| 31 | {(() => { | 58 | {(() => { |
| 32 | try { | 59 | try { |
| 33 | return ContentBody({ ...props, raw }) | 60 | return ContentBody({ data, raw }) |
| 34 | } catch { | 61 | } catch { |
| 35 | return ( | 62 | return ( |
| 36 | <div className={styles.renderError}> | 63 | <div className={styles.renderError}> |
| @@ -40,8 +67,28 @@ export default function Content({ raw, setRaw, ...props }: ContentProps): JSX.El | |||
| 40 | ) | 67 | ) |
| 41 | } | 68 | } |
| 42 | })()} | 69 | })()} |
| 43 | </div> | 70 | </Row> |
| 44 | </div> | 71 | </> |
| 72 | // <div className={styles.content}> | ||
| 73 | // <div className={styles.header}> | ||
| 74 | // <input id='raw' type='checkbox' checked={raw} onChange={() => setRaw(!raw)}/> | ||
| 75 | // <label htmlFor='raw'>Raw</label> | ||
| 76 | // </div> | ||
| 77 | // <div className={styles.body}> | ||
| 78 | // {(() => { | ||
| 79 | // try { | ||
| 80 | // return ContentBody({ ...props, raw }) | ||
| 81 | // } catch { | ||
| 82 | // return ( | ||
| 83 | // <div className={styles.renderError}> | ||
| 84 | // <p>Body could not be rendered</p> | ||
| 85 | // <a onClick={() => setRaw(true)}>View raw</a> | ||
| 86 | // </div> | ||
| 87 | // ) | ||
| 88 | // } | ||
| 89 | // })()} | ||
| 90 | // </div> | ||
| 91 | // </div> | ||
| 45 | ) | 92 | ) |
| 46 | }; | 93 | }; |
| 47 | 94 | ||
| @@ -51,12 +98,7 @@ function ContentBody({ data, raw = false }: Omit<ContentProps, 'setRaw'>) { | |||
| 51 | return ''; | 98 | return ''; |
| 52 | } | 99 | } |
| 53 | 100 | ||
| 54 | const [_, type] = ( | 101 | const type = getHeader(data.headers, 'content-type'); |
| 55 | Object | ||
| 56 | .entries(data.headers) | ||
| 57 | .find(([key]) => key.toLowerCase() === 'content-type') | ||
| 58 | ); | ||
| 59 | |||
| 60 | return type.toLowerCase().split(';')[0]; | 102 | return type.toLowerCase().split(';')[0]; |
| 61 | }, [data, raw]); | 103 | }, [data, raw]); |
| 62 | 104 | ||
diff --git a/src/components/Details/Details.tsx b/src/components/Details/Details.tsx index e91c98c..c96aa7b 100644 --- a/src/components/Details/Details.tsx +++ b/src/components/Details/Details.tsx | |||
| @@ -10,6 +10,16 @@ import RequestSummary from "../RequestSummary/RequestSummary"; | |||
| 10 | import classNames from 'classnames'; | 10 | import classNames from 'classnames'; |
| 11 | import Content from "../Content/Content"; | 11 | import Content from "../Content/Content"; |
| 12 | import {getHost} from "../../utils"; | 12 | import {getHost} from "../../utils"; |
| 13 | import { | ||
| 14 | Button, | ||
| 15 | Card, | ||
| 16 | Col, | ||
| 17 | Container, | ||
| 18 | Nav, | ||
| 19 | NavItem, | ||
| 20 | Row, | ||
| 21 | Table | ||
| 22 | } from "react-bootstrap"; | ||
| 13 | 23 | ||
| 14 | 24 | ||
| 15 | interface TimingProps { | 25 | interface TimingProps { |
| @@ -39,17 +49,31 @@ interface HeadersProps { | |||
| 39 | 49 | ||
| 40 | function Headers({ title, headers }: HeadersProps) { | 50 | function Headers({ title, headers }: HeadersProps) { |
| 41 | return ( | 51 | return ( |
| 42 | <div className={styles.headers}> | 52 | <Card className="m-3"> |
| 43 | <h2>{ title }</h2> | 53 | <Table |
| 44 | { | 54 | striped |
| 45 | Object.entries(headers).map(([key, value]) => ( | 55 | responsive |
| 46 | <> | 56 | borderless |
| 47 | <div>{key}</div> | 57 | hover |
| 48 | <div>{value}</div> | 58 | className='mb-0' |
| 49 | </> | 59 | > |
| 50 | )) | 60 | <thead> |
| 51 | } | 61 | <tr> |
| 52 | </div> | 62 | <th colSpan={2} className="bg-dark text-white rounded-top">{ title }</th> |
| 63 | </tr> | ||
| 64 | </thead> | ||
| 65 | <tbody> | ||
| 66 | { | ||
| 67 | Object.entries(headers).map(([key, value]) => ( | ||
| 68 | <tr> | ||
| 69 | <td>{key}</td> | ||
| 70 | <td>{value}</td> | ||
| 71 | </tr> | ||
| 72 | )) | ||
| 73 | } | ||
| 74 | </tbody> | ||
| 75 | </Table> | ||
| 76 | </Card> | ||
| 53 | ) | 77 | ) |
| 54 | } | 78 | } |
| 55 | 79 | ||
| @@ -75,73 +99,147 @@ export default function Details({ requestResponse }: DetailsProps) { | |||
| 75 | ), [requestResponse]); | 99 | ), [requestResponse]); |
| 76 | 100 | ||
| 77 | return ( | 101 | return ( |
| 78 | <div className={styles.details}> | 102 | <> |
| 79 | <div className={styles.header}> | 103 | <Row> |
| 80 | <RequestSummary requestResponse={requestResponse} className={styles.summary}/> | 104 | <Col> |
| 81 | 105 | <Container fluid style={{ fontSize: '1.5em' }} className="py-3"> | |
| 82 | <div className={styles.tabs}> | 106 | <RequestSummary requestResponse={requestResponse} className={styles.summary}/> |
| 83 | <button | 107 | </Container> |
| 84 | onClick={() => selectTab('headers')} | 108 | </Col> |
| 85 | className={classNames(styles.tab, { | 109 | </Row> |
| 86 | [styles.selected]: tab === 'headers' | 110 | <Row className="gx-0 d-flex"> |
| 87 | })} | 111 | <Col> |
| 88 | > | 112 | <Nav |
| 89 | Headers | 113 | variant="tabs" |
| 90 | </button> | 114 | activeKey={tab} |
| 91 | <button | 115 | onSelect={(tab) => selectTab(tab as Tab)} |
| 92 | onClick={() => selectTab('request')} | ||
| 93 | className={classNames(styles.tab, { | ||
| 94 | [styles.selected]: tab === 'request' | ||
| 95 | })} | ||
| 96 | > | 116 | > |
| 97 | Request | 117 | <Nav.Item> |
| 98 | </button> | 118 | <Nav.Link eventKey="headers"> |
| 99 | <button | 119 | Headers |
| 100 | onClick={() => selectTab('response')} | 120 | </Nav.Link > |
| 101 | className={classNames(styles.tab, { | 121 | </Nav.Item> |
| 102 | [styles.selected]: tab === 'response' | 122 | <Nav.Item> |
| 103 | })} | 123 | <Nav.Link eventKey="request"> |
| 104 | disabled={requestResponse.response === undefined} | 124 | Request |
| 105 | > | 125 | </Nav.Link> |
| 106 | Response | 126 | </Nav.Item> |
| 107 | </button> | 127 | <Nav.Item> |
| 108 | 128 | <Nav.Link | |
| 109 | <div className={styles.emptySpace}> | 129 | eventKey="response" |
| 110 | <Timing timing={requestResponse.response?.timing ?? NaN} /> | 130 | disabled={requestResponse.response === undefined} |
| 111 | <button className={styles.resend} onClick={() => resend()}>Resend</button> | 131 | > |
| 112 | </div> | 132 | Response |
| 113 | </div> | 133 | </Nav.Link> |
| 114 | </div> | 134 | </Nav.Item> |
| 115 | <div className={styles.content}> | 135 | </Nav> |
| 116 | { | 136 | </Col> |
| 117 | tab === 'headers' && ( | 137 | <Col className="border-bottom px-3 " xs="auto"> |
| 118 | <> | 138 | <Timing timing={requestResponse.response?.timing ?? NaN} /> |
| 119 | <Headers | 139 | <Button variant="outline-primary" onClick={() => resend()} className="ms-3"> |
| 120 | title="Request Headers" | 140 | Resend |
| 121 | headers={requestResponse.request.headers} | 141 | </Button> |
| 122 | /> | 142 | </Col> |
| 123 | { | 143 | </Row> |
| 124 | requestResponse.response && ( | 144 | <Row> |
| 125 | <Headers | 145 | <Col> |
| 126 | title="Response Headers" | 146 | { |
| 127 | headers={requestResponse.response.headers} | 147 | tab === 'headers' && ( |
| 128 | /> | 148 | <> |
| 129 | ) | 149 | <Headers |
| 130 | } | 150 | title="Request Headers" |
| 131 | </> | 151 | headers={requestResponse.request.headers} |
| 132 | ) | 152 | /> |
| 133 | } | 153 | { |
| 134 | { | 154 | requestResponse.response && ( |
| 135 | tab === 'request' && ( | 155 | <Headers |
| 136 | <Content data={requestResponse.request} raw={raw} setRaw={setRaw}/> | 156 | title="Response Headers" |
| 137 | ) | 157 | headers={requestResponse.response.headers} |
| 138 | } | 158 | /> |
| 139 | { | 159 | ) |
| 140 | tab === 'response' && requestResponse.response !== undefined && ( | 160 | } |
| 141 | <Content data={requestResponse.response} raw={raw} setRaw={setRaw}/> | 161 | </> |
| 142 | ) | 162 | ) |
| 143 | } | 163 | } |
| 144 | </div> | 164 | { |
| 145 | </div> | 165 | tab === 'request' && ( |
| 166 | <Content data={requestResponse.request} raw={raw} setRaw={setRaw}/> | ||
| 167 | ) | ||
| 168 | } | ||
| 169 | { | ||
| 170 | tab === 'response' && requestResponse.response !== undefined && ( | ||
| 171 | <Content data={requestResponse.response} raw={raw} setRaw={setRaw}/> | ||
| 172 | ) | ||
| 173 | } | ||
| 174 | </Col> | ||
| 175 | </Row> | ||
| 176 | </> | ||
| 177 | // <div className={styles.details}> | ||
| 178 | // <div className={styles.header}> | ||
| 179 | // | ||
| 180 | // <div className={styles.tabs}> | ||
| 181 | // <button | ||
| 182 | // onClick={() => selectTab('headers')} | ||
| 183 | // className={classNames(styles.tab, { | ||
| 184 | // [styles.selected]: tab === 'headers' | ||
| 185 | // })} | ||
| 186 | // > | ||
| 187 | // Headers | ||
| 188 | // </button> | ||
| 189 | // <button | ||
| 190 | // onClick={() => selectTab('request')} | ||
| 191 | // className={classNames(styles.tab, { | ||
| 192 | // [styles.selected]: tab === 'request' | ||
| 193 | // })} | ||
| 194 | // > | ||
| 195 | // Request | ||
| 196 | // </button> | ||
| 197 | // <button | ||
| 198 | // onClick={() => selectTab('response')} | ||
| 199 | // className={classNames(styles.tab, { | ||
| 200 | // [styles.selected]: tab === 'response' | ||
| 201 | // })} | ||
| 202 | // disabled={requestResponse.response === undefined} | ||
| 203 | // > | ||
| 204 | // Response | ||
| 205 | // </button> | ||
| 206 | // | ||
| 207 | // <div className={styles.emptySpace}> | ||
| 208 | // <Timing timing={requestResponse.response?.timing ?? NaN} /> | ||
| 209 | // <button className={styles.resend} onClick={() => resend()}>Resend</button> | ||
| 210 | // </div> | ||
| 211 | // </div> | ||
| 212 | // </div> | ||
| 213 | // <div className={styles.content}> | ||
| 214 | // { | ||
| 215 | // tab === 'headers' && ( | ||
| 216 | // <> | ||
| 217 | // <Headers | ||
| 218 | // title="Request Headers" | ||
| 219 | // headers={requestResponse.request.headers} | ||
| 220 | // /> | ||
| 221 | // { | ||
| 222 | // requestResponse.response && ( | ||
| 223 | // <Headers | ||
| 224 | // title="Response Headers" | ||
| 225 | // headers={requestResponse.response.headers} | ||
| 226 | // /> | ||
| 227 | // ) | ||
| 228 | // } | ||
| 229 | // </> | ||
| 230 | // ) | ||
| 231 | // } | ||
| 232 | // { | ||
| 233 | // tab === 'request' && ( | ||
| 234 | // <Content data={requestResponse.request} raw={raw} setRaw={setRaw}/> | ||
| 235 | // ) | ||
| 236 | // } | ||
| 237 | // { | ||
| 238 | // tab === 'response' && requestResponse.response !== undefined && ( | ||
| 239 | // <Content data={requestResponse.response} raw={raw} setRaw={setRaw}/> | ||
| 240 | // ) | ||
| 241 | // } | ||
| 242 | // </div> | ||
| 243 | // </div> | ||
| 146 | ) | 244 | ) |
| 147 | } | 245 | } |
diff --git a/src/components/RequestSummary/RequestSummary.tsx b/src/components/RequestSummary/RequestSummary.tsx index af928c0..ea28f3e 100644 --- a/src/components/RequestSummary/RequestSummary.tsx +++ b/src/components/RequestSummary/RequestSummary.tsx | |||
| @@ -3,31 +3,48 @@ import * as React from "react"; | |||
| 3 | import classNames from "classnames"; | 3 | import classNames from "classnames"; |
| 4 | 4 | ||
| 5 | import styles from './RequestSummary.module.scss'; | 5 | import styles from './RequestSummary.module.scss'; |
| 6 | import {Badge, Card, Col, Row} from "react-bootstrap"; | ||
| 6 | 7 | ||
| 7 | interface RequestSummaryProps { | 8 | interface RequestSummaryProps { |
| 9 | selected?: boolean | ||
| 8 | requestResponse: RequestResponse | 10 | requestResponse: RequestResponse |
| 9 | className?: string | ||
| 10 | } | 11 | } |
| 11 | 12 | ||
| 12 | function isBetween(value: number, min: number, max: number) { | 13 | function isBetween(value: number, min: number, max: number) { |
| 13 | return value >= min && value <= max | 14 | return value >= min && value <= max |
| 14 | } | 15 | } |
| 15 | 16 | ||
| 16 | export default function RequestSummary({ requestResponse: { request, response }, className = ''}: RequestSummaryProps) { | 17 | function calcBadgeVariant(statusCode: number | undefined): string { |
| 17 | const statusCode = response?.status ?? 0 | 18 | if (statusCode === undefined) { |
| 19 | return 'secondary'; | ||
| 20 | } else if (isBetween(statusCode, 100, 199)) { | ||
| 21 | return 'info'; | ||
| 22 | } else if (isBetween(statusCode, 200, 299)) { | ||
| 23 | return 'success'; | ||
| 24 | } else if (isBetween(statusCode, 300, 399)) { | ||
| 25 | return 'primary'; | ||
| 26 | } else if (isBetween(statusCode, 400, 499)) { | ||
| 27 | return 'danger'; | ||
| 28 | } else if (isBetween(statusCode, 500, 599)) { | ||
| 29 | return 'warning'; | ||
| 30 | } | ||
| 31 | } | ||
| 32 | |||
| 33 | export default function RequestSummary({ requestResponse: { request, response }, selected = false }: RequestSummaryProps) { | ||
| 18 | return ( | 34 | return ( |
| 19 | <div className={classNames(styles.requestSummary, className)}> | 35 | <Row> |
| 20 | <span className={styles.method}>{ request.method }</span> | 36 | <Col className='flex-grow-0 d-flex align-items-center'>{request.method}</Col> |
| 21 | <p>{ request.path }</p> | 37 | <Col className='flex-grow-1'>{ request.path }</Col> |
| 22 | <span className={classNames(styles.statusCode, { | 38 | <Col className='flex-grow-0 d-flex align-items-center'> |
| 23 | [styles.info]: isBetween(statusCode, 100, 199), | 39 | <Badge |
| 24 | [styles.success]: isBetween(statusCode, 200, 299), | 40 | className={classNames({ |
| 25 | [styles.redirect]: isBetween(statusCode, 300, 399), | 41 | 'border': selected, |
| 26 | [styles.clientError]: isBetween(statusCode, 400, 499), | 42 | })} |
| 27 | [styles.serverError]: isBetween(statusCode, 500, 599) | 43 | bg={calcBadgeVariant(response?.status)} |
| 28 | })}> | 44 | > |
| 29 | { response?.status ?? 'Loading...'} | 45 | { response?.status ?? 'Loading...'} |
| 30 | </span> | 46 | </Badge> |
| 31 | </div> | 47 | </Col> |
| 48 | </Row> | ||
| 32 | ) | 49 | ) |
| 33 | } | 50 | } |
diff --git a/src/index.scss b/src/index.scss index ef8fd7f..3d8dd7a 100644 --- a/src/index.scss +++ b/src/index.scss | |||
| @@ -1,16 +1,14 @@ | |||
| 1 | @import "reset"; | ||
| 2 | |||
| 3 | * { | 1 | * { |
| 4 | box-sizing: border-box; | 2 | box-sizing: border-box; |
| 5 | } | 3 | } |
| 6 | 4 | ||
| 7 | html, body, #root { | 5 | html, body, #root { |
| 8 | margin: 0; | ||
| 9 | padding: 0; | ||
| 10 | |||
| 11 | height: 100vh; | 6 | height: 100vh; |
| 12 | width: 100vw; | 7 | width: 100vw; |
| 13 | 8 | ||
| 14 | font-family: sans-serif; | 9 | } |
| 15 | overflow: hidden; | 10 | |
| 11 | #root { | ||
| 12 | display: flex; | ||
| 13 | flex-flow: column nowrap; | ||
| 16 | } | 14 | } |
diff --git a/src/index.tsx b/src/index.tsx index a6c4952..c381d4a 100644 --- a/src/index.tsx +++ b/src/index.tsx | |||
| @@ -2,6 +2,8 @@ import * as React from "react"; | |||
| 2 | import * as ReactDOM from "react-dom"; | 2 | import * as ReactDOM from "react-dom"; |
| 3 | import App from "./components/App/App"; | 3 | import App from "./components/App/App"; |
| 4 | 4 | ||
| 5 | import 'bootstrap/dist/css/bootstrap.min.css'; | ||
| 6 | |||
| 5 | import './index.scss'; | 7 | import './index.scss'; |
| 6 | 8 | ||
| 7 | ReactDOM.render(<App />, document.getElementById("root")); | 9 | ReactDOM.render(<App />, document.getElementById("root")); |
| @@ -236,7 +236,7 @@ | |||
| 236 | babel-plugin-polyfill-regenerator "^0.3.0" | 236 | babel-plugin-polyfill-regenerator "^0.3.0" |
| 237 | semver "^6.3.0" | 237 | semver "^6.3.0" |
| 238 | 238 | ||
| 239 | "@babel/runtime@^7.10.2": | 239 | "@babel/runtime@^7.10.2", "@babel/runtime@^7.13.16", "@babel/runtime@^7.14.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7": |
| 240 | version "7.16.7" | 240 | version "7.16.7" |
| 241 | resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa" | 241 | resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa" |
| 242 | integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ== | 242 | integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ== |
| @@ -276,7 +276,47 @@ | |||
| 276 | "@babel/helper-validator-identifier" "^7.16.7" | 276 | "@babel/helper-validator-identifier" "^7.16.7" |
| 277 | to-fast-properties "^2.0.0" | 277 | to-fast-properties "^2.0.0" |
| 278 | 278 | ||
| 279 | "@types/prop-types@*": | 279 | "@popperjs/core@^2.10.1": |
| 280 | version "2.11.2" | ||
| 281 | resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9" | ||
| 282 | integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA== | ||
| 283 | |||
| 284 | "@react-aria/ssr@^3.0.1": | ||
| 285 | version "3.1.0" | ||
| 286 | resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.1.0.tgz#b7163e6224725c30121932a8d1422ef91d1fab22" | ||
| 287 | integrity sha512-RxqQKmE8sO7TGdrcSlHTcVzMP450hqowtBSd2bBS9oPlcokVkaGq28c3Rwa8ty5ctw4EBCjXqjP7xdcKMGDzug== | ||
| 288 | dependencies: | ||
| 289 | "@babel/runtime" "^7.6.2" | ||
| 290 | |||
| 291 | "@restart/hooks@^0.4.0", "@restart/hooks@^0.4.5": | ||
| 292 | version "0.4.5" | ||
| 293 | resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.5.tgz#e7acbea237bfc9e479970500cf87538b41a1ed02" | ||
| 294 | integrity sha512-tLGtY0aHeIfT7aPwUkvQuhIy3+q3w4iqmUzFLPlOAf/vNUacLaBt1j/S//jv/dQhenRh8jvswyMojCwmLvJw8A== | ||
| 295 | dependencies: | ||
| 296 | dequal "^2.0.2" | ||
| 297 | |||
| 298 | "@restart/ui@^0.2.5": | ||
| 299 | version "0.2.6" | ||
| 300 | resolved "https://registry.yarnpkg.com/@restart/ui/-/ui-0.2.6.tgz#43ecf7160c90d723310388aa9820e88b4ec1f2d1" | ||
| 301 | integrity sha512-lcutEWPvsxz0uEyRxuysCbHBfXDFnMKNMNTsnuPmLFjZXgW9fVmhksS6rpFklXHMwxOM9g6hRTBq0gS3QRKgzQ== | ||
| 302 | dependencies: | ||
| 303 | "@babel/runtime" "^7.13.16" | ||
| 304 | "@popperjs/core" "^2.10.1" | ||
| 305 | "@react-aria/ssr" "^3.0.1" | ||
| 306 | "@restart/hooks" "^0.4.0" | ||
| 307 | "@types/warning" "^3.0.0" | ||
| 308 | dequal "^2.0.2" | ||
| 309 | dom-helpers "^5.2.0" | ||
| 310 | prop-types "^15.7.2" | ||
| 311 | uncontrollable "^7.2.1" | ||
| 312 | warning "^4.0.3" | ||
| 313 | |||
| 314 | "@types/invariant@^2.2.33": | ||
| 315 | version "2.2.35" | ||
| 316 | resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be" | ||
| 317 | integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg== | ||
| 318 | |||
| 319 | "@types/prop-types@*", "@types/prop-types@^15.7.3": | ||
| 280 | version "15.7.4" | 320 | version "15.7.4" |
| 281 | resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" | 321 | resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" |
| 282 | integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== | 322 | integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== |
| @@ -288,6 +328,22 @@ | |||
| 288 | dependencies: | 328 | dependencies: |
| 289 | "@types/react" "^16" | 329 | "@types/react" "^16" |
| 290 | 330 | ||
| 331 | "@types/react-transition-group@^4.4.1": | ||
| 332 | version "4.4.4" | ||
| 333 | resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e" | ||
| 334 | integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug== | ||
| 335 | dependencies: | ||
| 336 | "@types/react" "*" | ||
| 337 | |||
| 338 | "@types/react@*", "@types/react@>=16.14.8", "@types/react@>=16.9.11": | ||
| 339 | version "17.0.38" | ||
| 340 | resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd" | ||
| 341 | integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ== | ||
| 342 | dependencies: | ||
| 343 | "@types/prop-types" "*" | ||
| 344 | "@types/scheduler" "*" | ||
| 345 | csstype "^3.0.2" | ||
| 346 | |||
| 291 | "@types/react@^16", "@types/react@^16.9.34": | 347 | "@types/react@^16", "@types/react@^16.9.34": |
| 292 | version "16.14.21" | 348 | version "16.14.21" |
| 293 | resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.21.tgz#35199b21a278355ec7a3c40003bd6a334bd4ae4a" | 349 | resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.21.tgz#35199b21a278355ec7a3c40003bd6a334bd4ae4a" |
| @@ -302,6 +358,11 @@ | |||
| 302 | resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" | 358 | resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" |
| 303 | integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== | 359 | integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== |
| 304 | 360 | ||
| 361 | "@types/warning@^3.0.0": | ||
| 362 | version "3.0.0" | ||
| 363 | resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52" | ||
| 364 | integrity sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI= | ||
| 365 | |||
| 305 | ansi-styles@^3.2.1: | 366 | ansi-styles@^3.2.1: |
| 306 | version "3.2.1" | 367 | version "3.2.1" |
| 307 | resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" | 368 | resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" |
| @@ -365,6 +426,11 @@ binary-extensions@^2.0.0: | |||
| 365 | resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" | 426 | resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" |
| 366 | integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== | 427 | integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== |
| 367 | 428 | ||
| 429 | bootstrap@^5.1.3: | ||
| 430 | version "5.1.3" | ||
| 431 | resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34" | ||
| 432 | integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q== | ||
| 433 | |||
| 368 | braces@~3.0.2: | 434 | braces@~3.0.2: |
| 369 | version "3.0.2" | 435 | version "3.0.2" |
| 370 | resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" | 436 | resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" |
| @@ -463,6 +529,19 @@ debug@^4.1.0, debug@^4.1.1: | |||
| 463 | dependencies: | 529 | dependencies: |
| 464 | ms "2.1.2" | 530 | ms "2.1.2" |
| 465 | 531 | ||
| 532 | dequal@^2.0.2: | ||
| 533 | version "2.0.2" | ||
| 534 | resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d" | ||
| 535 | integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug== | ||
| 536 | |||
| 537 | dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1: | ||
| 538 | version "5.2.1" | ||
| 539 | resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" | ||
| 540 | integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== | ||
| 541 | dependencies: | ||
| 542 | "@babel/runtime" "^7.8.7" | ||
| 543 | csstype "^3.0.2" | ||
| 544 | |||
| 466 | electron-to-chromium@^1.4.17: | 545 | electron-to-chromium@^1.4.17: |
| 467 | version "1.4.31" | 546 | version "1.4.31" |
| 468 | resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.31.tgz#8d5ccc3f8253cd142b07afaa84f200fd33a7f2a6" | 547 | resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.31.tgz#8d5ccc3f8253cd142b07afaa84f200fd33a7f2a6" |
| @@ -670,6 +749,13 @@ immutable@^4.0.0: | |||
| 670 | resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23" | 749 | resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23" |
| 671 | integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw== | 750 | integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw== |
| 672 | 751 | ||
| 752 | invariant@^2.2.4: | ||
| 753 | version "2.2.4" | ||
| 754 | resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" | ||
| 755 | integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== | ||
| 756 | dependencies: | ||
| 757 | loose-envify "^1.0.0" | ||
| 758 | |||
| 673 | is-binary-path@~2.1.0: | 759 | is-binary-path@~2.1.0: |
| 674 | version "2.1.0" | 760 | version "2.1.0" |
| 675 | resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" | 761 | resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" |
| @@ -733,7 +819,7 @@ lodash.flow@^3.3.0: | |||
| 733 | resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a" | 819 | resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a" |
| 734 | integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o= | 820 | integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o= |
| 735 | 821 | ||
| 736 | loose-envify@^1.0.0, loose-envify@^1.1.0: | 822 | loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: |
| 737 | version "1.4.0" | 823 | version "1.4.0" |
| 738 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" | 824 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" |
| 739 | integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== | 825 | integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== |
| @@ -806,6 +892,23 @@ promise@^7.1.1: | |||
| 806 | dependencies: | 892 | dependencies: |
| 807 | asap "~2.0.3" | 893 | asap "~2.0.3" |
| 808 | 894 | ||
| 895 | prop-types-extra@^1.1.0: | ||
| 896 | version "1.1.1" | ||
| 897 | resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.1.tgz#58c3b74cbfbb95d304625975aa2f0848329a010b" | ||
| 898 | integrity sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew== | ||
| 899 | dependencies: | ||
| 900 | react-is "^16.3.2" | ||
| 901 | warning "^4.0.0" | ||
| 902 | |||
| 903 | prop-types@^15.6.2, prop-types@^15.7.2: | ||
| 904 | version "15.8.1" | ||
| 905 | resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" | ||
| 906 | integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== | ||
| 907 | dependencies: | ||
| 908 | loose-envify "^1.4.0" | ||
| 909 | object-assign "^4.1.1" | ||
| 910 | react-is "^16.13.1" | ||
| 911 | |||
| 809 | pure-color@^1.2.0: | 912 | pure-color@^1.2.0: |
| 810 | version "1.3.0" | 913 | version "1.3.0" |
| 811 | resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e" | 914 | resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e" |
| @@ -821,6 +924,28 @@ react-base16-styling@^0.6.0: | |||
| 821 | lodash.flow "^3.3.0" | 924 | lodash.flow "^3.3.0" |
| 822 | pure-color "^1.2.0" | 925 | pure-color "^1.2.0" |
| 823 | 926 | ||
| 927 | react-bootstrap@^2.1.1: | ||
| 928 | version "2.1.1" | ||
| 929 | resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.1.1.tgz#a2f162fdda5275e89712ce4ca525ace661a48131" | ||
| 930 | integrity sha512-Igagk6LziNW/HgBlMVx+QiwPVt/oqrZ7tiBKgv31VYc/56kJEU0Y+BCJS6hrQP6QmmIpdVtX8TRaanv9xsmW5A== | ||
| 931 | dependencies: | ||
| 932 | "@babel/runtime" "^7.14.0" | ||
| 933 | "@restart/hooks" "^0.4.5" | ||
| 934 | "@restart/ui" "^0.2.5" | ||
| 935 | "@types/invariant" "^2.2.33" | ||
| 936 | "@types/prop-types" "^15.7.3" | ||
| 937 | "@types/react" ">=16.14.8" | ||
| 938 | "@types/react-transition-group" "^4.4.1" | ||
| 939 | "@types/warning" "^3.0.0" | ||
| 940 | classnames "^2.3.1" | ||
| 941 | dom-helpers "^5.2.1" | ||
| 942 | invariant "^2.2.4" | ||
| 943 | prop-types "^15.7.2" | ||
| 944 | prop-types-extra "^1.1.0" | ||
| 945 | react-transition-group "^4.4.1" | ||
| 946 | uncontrollable "^7.2.1" | ||
| 947 | warning "^4.0.3" | ||
| 948 | |||
| 824 | react-dom@^17.0.2: | 949 | react-dom@^17.0.2: |
| 825 | version "17.0.2" | 950 | version "17.0.2" |
| 826 | resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" | 951 | resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" |
| @@ -830,6 +955,11 @@ react-dom@^17.0.2: | |||
| 830 | object-assign "^4.1.1" | 955 | object-assign "^4.1.1" |
| 831 | scheduler "^0.20.2" | 956 | scheduler "^0.20.2" |
| 832 | 957 | ||
| 958 | react-is@^16.13.1, react-is@^16.3.2: | ||
| 959 | version "16.13.1" | ||
| 960 | resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" | ||
| 961 | integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== | ||
| 962 | |||
| 833 | react-json-view@^1.21.3: | 963 | react-json-view@^1.21.3: |
| 834 | version "1.21.3" | 964 | version "1.21.3" |
| 835 | resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.21.3.tgz#f184209ee8f1bf374fb0c41b0813cff54549c475" | 965 | resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.21.3.tgz#f184209ee8f1bf374fb0c41b0813cff54549c475" |
| @@ -854,6 +984,16 @@ react-textarea-autosize@^8.3.2: | |||
| 854 | use-composed-ref "^1.0.0" | 984 | use-composed-ref "^1.0.0" |
| 855 | use-latest "^1.0.0" | 985 | use-latest "^1.0.0" |
| 856 | 986 | ||
| 987 | react-transition-group@^4.4.1: | ||
| 988 | version "4.4.2" | ||
| 989 | resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" | ||
| 990 | integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg== | ||
| 991 | dependencies: | ||
| 992 | "@babel/runtime" "^7.5.5" | ||
| 993 | dom-helpers "^5.0.1" | ||
| 994 | loose-envify "^1.4.0" | ||
| 995 | prop-types "^15.6.2" | ||
| 996 | |||
| 857 | react@^17.0.2: | 997 | react@^17.0.2: |
| 858 | version "17.0.2" | 998 | version "17.0.2" |
| 859 | resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" | 999 | resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" |
| @@ -965,6 +1105,16 @@ ua-parser-js@^0.7.30: | |||
| 965 | resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6" | 1105 | resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6" |
| 966 | integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ== | 1106 | integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ== |
| 967 | 1107 | ||
| 1108 | uncontrollable@^7.2.1: | ||
| 1109 | version "7.2.1" | ||
| 1110 | resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-7.2.1.tgz#1fa70ba0c57a14d5f78905d533cf63916dc75738" | ||
| 1111 | integrity sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ== | ||
| 1112 | dependencies: | ||
| 1113 | "@babel/runtime" "^7.6.3" | ||
| 1114 | "@types/react" ">=16.9.11" | ||
| 1115 | invariant "^2.2.4" | ||
| 1116 | react-lifecycles-compat "^3.0.4" | ||
| 1117 | |||
| 968 | use-composed-ref@^1.0.0: | 1118 | use-composed-ref@^1.0.0: |
| 969 | version "1.2.1" | 1119 | version "1.2.1" |
| 970 | resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.2.1.tgz#9bdcb5ccd894289105da2325e1210079f56bf849" | 1120 | resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.2.1.tgz#9bdcb5ccd894289105da2325e1210079f56bf849" |
| @@ -993,3 +1143,10 @@ vite@^2.6.7: | |||
| 993 | rollup "^2.59.0" | 1143 | rollup "^2.59.0" |
| 994 | optionalDependencies: | 1144 | optionalDependencies: |
| 995 | fsevents "~2.3.2" | 1145 | fsevents "~2.3.2" |
| 1146 | |||
| 1147 | warning@^4.0.0, warning@^4.0.3: | ||
| 1148 | version "4.0.3" | ||
| 1149 | resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" | ||
| 1150 | integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== | ||
| 1151 | dependencies: | ||
| 1152 | loose-envify "^1.0.0" | ||
