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()}
+