diff --git a/src/App.tsx b/src/App.tsx index 60b8439..f9dd96d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,18 @@ import { useEffect, useState } from 'react'; -import { Link, Stack } from '@fluentui/react'; +import { Link } from '@fluentui/react'; import { TraceInspector } from './components/TraceInspector/TraceInspector'; import { HarFile } from './sanitizer/models/harFile'; import { Sanitizer } from './components/Sanitizer/Sanitizer'; const title = 'HAR file sanitizer (preview)'; -const logIssueLinkeStyle: React.CSSProperties = { - margin: '30px' +const topCornerStyle = (): React.CSSProperties => { + return { + position: 'absolute', + right: '30px', + top: '12px', + zIndex: 100 + } } function App() { @@ -18,14 +23,21 @@ function App() { document.title = title; }, []) + const getLogIssuesLink = () => { + return
+ Log issues +
+ } + return ( inspectFile ? ( - + <> + {getLogIssuesLink()} + + ) : (
- - Log issues - + {getLogIssuesLink()}
) ); diff --git a/src/components/Sanitizer/Sanitizer.styles.ts b/src/components/Sanitizer/Sanitizer.styles.ts index 5bd02db..5092e95 100644 --- a/src/components/Sanitizer/Sanitizer.styles.ts +++ b/src/components/Sanitizer/Sanitizer.styles.ts @@ -9,13 +9,13 @@ export const checkboxStyle: ICheckboxStyles = { } export const layoutStackStyle: React.CSSProperties = { - marginTop: '300px' + marginTop: '150px' } export const containerStyle: React.CSSProperties = { border: '1px solid lightgray', - padding: '50px 130px', + padding: '50px 130px 25px 130px', borderRadius: '10px' } diff --git a/src/components/Sanitizer/Sanitizer.tsx b/src/components/Sanitizer/Sanitizer.tsx index 74e9a35..e255f33 100644 --- a/src/components/Sanitizer/Sanitizer.tsx +++ b/src/components/Sanitizer/Sanitizer.tsx @@ -1,52 +1,73 @@ -import { Checkbox, Link, Stack, Text } from "@fluentui/react" +import { Checkbox, DefaultButton, Link, PrimaryButton, Stack, Text } from "@fluentui/react" import { checkboxStyle, containerStyle, layoutStackStyle, radioButtonStackStyle } from "./Sanitizer.styles" import { FormEvent, useState } from "react"; import { HarFile } from "../../sanitizer/models/harFile"; import { SanitizationCategories } from "../../sanitizer/sanitizer"; import { onFileUpload } from "../../common/fileUpload"; -export interface SanitizerProps{ - setInspectFile: React.Dispatch>; - setSanitizedFileJson: React.Dispatch>; +export interface SanitizerProps { + setInspectFile: React.Dispatch>; + setSanitizedFileJson: React.Dispatch>; } const stackTokens = { - childrenGap: 10 - }; + childrenGap: 10 +}; -export const Sanitizer = (props: SanitizerProps) =>{ - const [downloadUrl, setDownloadUrl] = useState(''); - const [fileName, setFileName] = useState(''); - const [sanitizationCategories, setSanitizationCategories] = useState({ - cookiesAndHeaders: true, - authorizationTokens: true, - armPostResponses: true, - generalJsonResponses: true, - generalJsonPutPostRequests: true - }); +export const Sanitizer = (props: SanitizerProps) => { + const [downloadUrl, setDownloadUrl] = useState(''); + const [fileName, setFileName] = useState(''); + const [sanitizationCategories, setSanitizationCategories] = useState({ + cookiesAndHeaders: true, + authorizationTokens: true, + armPostResponses: true, + generalJsonResponses: true, + generalJsonPutPostRequests: true + }); - const {setInspectFile, setSanitizedFileJson } = props; + const { setInspectFile, setSanitizedFileJson } = props; - const onChecked = (event: FormEvent | undefined, checked?: boolean | undefined) => { - if (event) { - const newRulesToRun = { ...sanitizationCategories }; - if (newRulesToRun[event.currentTarget.id] === undefined) { - throw Error(`Could not find property: "${event.currentTarget.id}"`); - } - - newRulesToRun[event.currentTarget.id] = (event.currentTarget as any).checked; - setSanitizationCategories(newRulesToRun); - } - } - - let downloadButton = <>; - if (downloadUrl) { - downloadButton =
- Download {fileName} or { setInspectFile(true) }}>Inspect -
; + const onChecked = (event: FormEvent | undefined, checked?: boolean | undefined) => { + if (event) { + const newRulesToRun = { ...sanitizationCategories }; + if (newRulesToRun[event.currentTarget.id] === undefined) { + throw Error(`Could not find property: "${event.currentTarget.id}"`); } - return + newRulesToRun[event.currentTarget.id] = (event.currentTarget as any).checked; + setSanitizationCategories(newRulesToRun); + } + } + + const restart =() =>{ + setDownloadUrl(''); + setFileName(''); + } + + const getButtons = () => { + if (!downloadUrl) { + return { + onFileUpload(event, + sanitizationCategories, + setFileName, + setDownloadUrl, + setSanitizedFileJson) + }} /> + } else { + return + Successfully sanitized and stored in '{fileName}' (Restart) +
+ Download + { setInspectFile(true)}}>Inspect +
+
+ } + } + + return HAR file sanitizer (preview)
Choose categories to sanitize and then upload a file @@ -86,19 +107,9 @@ export const Sanitizer = (props: SanitizerProps) =>{ onChange={onChecked} styles={checkboxStyle} /> - - { - onFileUpload(event, - sanitizationCategories, - setFileName, - setDownloadUrl, - setSanitizedFileJson) - }}/> - {downloadButton} - +
+ {getButtons()} +