add features to MailToLink, list item icon formatting, update depende…

…ncies (#19)
WarnerMedia · Feb 3, 2023 · 7ec3936 · 7ec3936
1 parent f8e8f93
commit 7ec3936
Show file tree

Hide file tree

Showing 10 changed files with 2,361 additions and 2,508 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "artemis-ui",
 	"description": "Web UI for Artemis",
-	"version": "1.8.4",
+	"version": "1.9.0",
 	"author": "WMCSO AppSec Team <[email protected]>",
 	"contributors": [],
 	"license": "MIT",
@@ -16,19 +16,19 @@
 		"@date-io/luxon": "^2.16.1",
 		"@emotion/react": "^11.10.5",
 		"@emotion/styled": "^11.10.5",
-		"@lingui/core": "^3.15.0",
-		"@lingui/react": "^3.15.0",
+		"@lingui/core": "^3.17.0",
+		"@lingui/react": "^3.17.0",
 		"@mui/icons-material": "^5.11.0",
-		"@mui/lab": "^5.0.0-alpha.115",
-		"@mui/material": "^5.11.4",
-		"@mui/x-date-pickers": "^5.0.13",
-		"@reduxjs/toolkit": "^1.9.1",
+		"@mui/lab": "^5.0.0-alpha.118",
+		"@mui/material": "^5.11.7",
+		"@mui/x-date-pickers": "^5.0.17",
+		"@reduxjs/toolkit": "^1.9.2",
 		"@types/node": "^18.11.18",
-		"@types/react": "^18.0.26",
+		"@types/react": "^18.0.27",
 		"@types/react-dom": "^18.0.10",
 		"@types/react-router-dom": "^5.3.3",
 		"autosuggest-highlight": "3.2.1",
-		"axios": "^1.2.2",
+		"axios": "^1.2.6",
 		"formik": "^2.2.9",
 		"formik-mui": "^5.0.0-alpha.0",
 		"formik-mui-lab": "^1.0.0",
@@ -41,19 +41,19 @@
 		"react-dom": "^18.2.0",
 		"react-draggable": "^4.4.5",
 		"react-redux": "^8.0.5",
-		"react-router-dom": "^6.6.2",
+		"react-router-dom": "^6.8.0",
 		"react-syntax-highlighter": "^15.5.0",
-		"recharts": "2.1.14",
+		"recharts": "2.3.2",
 		"redux-logger": "^3.0.6",
 		"redux-saga": "^1.2.2",
-		"tss-react": "^4.5.2",
+		"tss-react": "^4.6.0",
 		"typeface-roboto": "1.1.13",
-		"typescript": "~4.9.4",
+		"typescript": "~4.9.5",
 		"yup": "^0.32.11"
 	},
 	"devDependencies": {
-		"@lingui/cli": "^3.15.0",
-		"@lingui/macro": "^3.15.0",
+		"@lingui/cli": "^3.17.0",
+		"@lingui/macro": "^3.17.0",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
@@ -68,7 +68,7 @@
 		"markdownlint": "^0.27.0",
 		"markdownlint-cli2": "^0.6.0",
 		"miragejs": "^0.1.47",
-		"prettier": "^2.8.2",
+		"prettier": "^2.8.3",
 		"react-scripts": "^5.0.1",
 		"source-map-explorer": "^2.5.3"
 	},

diff --git a/ui/src/api/server.ts b/ui/src/api/server.ts
@@ -1804,7 +1804,7 @@ export function makeServer() {
 					risk: null,
 					qualified_scan: null,
 					application_metadata: {
-						...sampleMetaData6,
+						...sampleMetaData1,
 					},
 				},
 				{
@@ -1814,7 +1814,7 @@ export function makeServer() {
 					risk: null,
 					qualified_scan: null,
 					application_metadata: {
-						...sampleMetaData6,
+						...sampleMetaData1,
 					},
 				},
 				{
@@ -1824,7 +1824,7 @@ export function makeServer() {
 					risk: null,
 					qualified_scan: null,
 					application_metadata: {
-						...sampleMetaData6,
+						...sampleMetaData1,
 					},
 				},
 				{
@@ -1838,7 +1838,7 @@ export function makeServer() {
 						scan_id: generateId(),
 					},
 					application_metadata: {
-						...sampleMetaData6,
+						...sampleMetaData1,
 					},
 				},
 				{
@@ -1848,7 +1848,7 @@ export function makeServer() {
 					risk: null,
 					qualified_scan: null,
 					application_metadata: {
-						...sampleMetaData6,
+						...sampleMetaData1,
 					},
 				},
 				{

diff --git a/ui/src/components/MailToLink.test.tsx b/ui/src/components/MailToLink.test.tsx
@@ -194,4 +194,59 @@ describe("MailToLink component", () => {
 			)}&body=${encodeURIComponent(body)}`
 		);
 	});
+
+	test("disabled", () => {
+		const recipient = "[email protected]";
+		const text = "Test Me";
+		const body = "words";
+		render(
+			<MailToLink
+				text={text}
+				recipient={recipient}
+				subject={body}
+				body={body}
+				disabled
+			/>
+		);
+		expect(screen.getByRole("link", { name: text })).toHaveAttribute(
+			"aria-disabled",
+			"true"
+		);
+	});
+
+	test("iconButton with label", () => {
+		const recipient = "[email protected]";
+		const text = "Test Me";
+		const body = "words";
+		render(
+			<MailToLink
+				iconButton
+				text={text}
+				recipient={recipient}
+				subject={body}
+				body={body}
+			/>
+		);
+		expect(screen.getByRole("link", { name: text })).toBeInTheDocument();
+	});
+
+	test("iconButton disabled", () => {
+		const recipient = "[email protected]";
+		const text = "Test Me";
+		const body = "words";
+		render(
+			<MailToLink
+				iconButton
+				text={text}
+				recipient={recipient}
+				subject={body}
+				body={body}
+				disabled
+			/>
+		);
+		expect(screen.getByRole("link", { name: text })).toHaveAttribute(
+			"aria-disabled",
+			"true"
+		);
+	});
 });
diff --git a/ui/src/components/MailToLink.tsx b/ui/src/components/MailToLink.tsx
@@ -1,4 +1,4 @@
-import { Button, Tooltip } from "@mui/material";
+import { Button, IconButton, Tooltip } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
 import { Email as EmailIcon } from "@mui/icons-material";
 import { Trans, t } from "@lingui/macro";
@@ -12,6 +12,8 @@ interface MailToLinkProps {
 	body?: string;
 	text: string;
 	tooltip?: boolean;
+	iconButton?: boolean;
+	disabled?: boolean;
 }
 
 const useStyles = makeStyles()(() => ({
@@ -29,7 +31,7 @@ const EMAIL_REGEX = new RegExp(
 const MailToLink = (props: MailToLinkProps) => {
 	const { i18n } = useLingui();
 	const { classes } = useStyles();
-	const { subject, body, text, tooltip } = props;
+	const { subject, body, text, tooltip, iconButton, disabled = false } = props;
 	let { recipient } = props;
 	let elt = <>{text}</>;
 	let tooltipTitle = text;
@@ -78,20 +80,39 @@ const MailToLink = (props: MailToLinkProps) => {
 		href += "body=" + encodeURIComponent(body);
 	}
 
-	elt = (
-		<span>
-			<Button
-				className={classes.emailButton}
-				startIcon={<EmailIcon />}
-				href={href}
-				target="_blank"
-				rel="noopener noreferrer nofollow"
-				size="small"
-			>
-				{text}
-			</Button>
-		</span>
-	);
+	if (iconButton) {
+		elt = (
+			<span>
+				<IconButton
+					aria-label={text}
+					className={classes.emailButton}
+					href={href}
+					target="_blank"
+					rel="noopener noreferrer nofollow"
+					size="small"
+					disabled={disabled}
+				>
+					<EmailIcon fontSize="small" />
+				</IconButton>
+			</span>
+		);
+	} else {
+		elt = (
+			<span>
+				<Button
+					className={classes.emailButton}
+					startIcon={<EmailIcon />}
+					href={href}
+					target="_blank"
+					rel="noopener noreferrer nofollow"
+					size="small"
+					disabled={disabled}
+				>
+					{text}
+				</Button>
+			</span>
+		);
+	}
 	if (tooltip) {
 		return (
 			<Tooltip describeChild title={tooltipTitle}>

diff --git a/ui/src/custom/SearchMetaField.tsx b/ui/src/custom/SearchMetaField.tsx
@@ -118,8 +118,11 @@ const SearchMetaField = (props: { data: RowDef | null }) => {
 };
 export default SearchMetaField;
 
-export const exportMetaData = (meta: AppMeta | null) => {
-	return `${meta?.sample_metadata?.field1 ?? "Unknown"}, ${
-		meta?.sample_metadata?.field2 ?? "Unknown"
-	}, ${meta?.sample_metadata?.field3 ?? "Unknown"}`;
+type ExportMetaDataT = (meta: AppMeta | null) => { [field: string]: string };
+export const exportMetaData: ExportMetaDataT = (meta) => {
+	return {
+		application_metadata: `${meta?.sample_metadata?.field1 ?? "Unknown"}, ${
+			meta?.sample_metadata?.field2 ?? "Unknown"
+		}, ${meta?.sample_metadata?.field3 ?? "Unknown"}`,
+	};
 };