feat(CollapseJSON): add a Copy button

Author: jstarpl

meteor/client/lib/collapseJSON.tsx

@@ -41,39 +41,60 @@ export function CollapseJSON({ json }: { json: string }): JSX.Element {
 		return indexOf5thLine
 	}, [originalString])
 
+	function copyContents() {
+		if (!navigator.clipboard) return
+
+		navigator.clipboard.writeText(json).catch((e) => console.error('Unable to copy JSON contents to clipboard', e))
+	}
+
 	if (originalString.length < 100 && indexOf5thLine === null) {
 		return <pre className="collapse-json__block">{originalString}</pre>
 	}
 
 	const displayContents = expanded ? (
 		<>
 			{originalString}
-			<button
-				key={'collapse'}
-				className="collapse-json__collapser"
-				tabIndex={0}
-				onClick={(e) => {
-					e.stopPropagation()
-					setExpanded(false)
-				}}
-			>
-				⮥
-			</button>
+			<div className="collapse-json__tools">
+				<button
+					key={'collapse'}
+					className="collapse-json__copy"
+					tabIndex={0}
+					onClick={(e) => {
+						e.stopPropagation()
+						copyContents()
+					}}
+				>
+					Copy
+				</button>
+				<button
+					key={'collapse'}
+					className="collapse-json__collapser"
+					tabIndex={0}
+					onClick={(e) => {
+						e.stopPropagation()
+						setExpanded(false)
+					}}
+				>
+					⮥
+				</button>
+			</div>
 		</>
 	) : (
 		<>
 			{originalString.substring(0, Math.min(indexOf5thLine || 100, 100))}
-			<button
-				key={'expand'}
-				className="collapse-json__collapser"
-				tabIndex={0}
-				onClick={(e) => {
-					e.stopPropagation()
-					setExpanded(true)
-				}}
-			>
-				…
-			</button>
+			<div className="collapse-json__tools">
+				<button
+					key={'expand'}
+					className="collapse-json__collapser"
+					tabIndex={0}
+					onClick={(e) => {
+						e.stopPropagation()
+						setExpanded(true)
+					}}
+				>
+					…
+				</button>
+			</div>
 		</>
 	)
 

meteor/client/styles/collapseJSON.scss

@@ -8,20 +8,36 @@
 	}
 }
 
-.collapse-json__collapser {
+.collapse-json__tools {
 	display: block;
+	float: right;
+	clear: both;
+}
+
+.collapse-json__tools > button {
 	background: #eee;
 	border-radius: 3px;
-	line-height: 1.3em;
-	padding: 0 0.3em;
-	margin-top: 0.2em;
+	line-height: 1rem;
+	padding: 0 0.3rem;
+	margin-top: 0.2rem;
 	border: none;
-	float: right;
-	clear: both;
 	user-select: none;
+	margin-left: 0.2rem;
+	vertical-align: top;
+
+	&:focus {
+		outline: none;
+		box-shadow: 0 0 0 2px #00feff;
+	}
+
+	&:active {
+		background-color: #ddd;
+	}
 }
 
-.collapse-json__collapser:focus {
-	outline: none;
-	box-shadow: 0 0 0 2px #00feff;
+.collapse-json__copy {
+	font-family: Roboto, arial, sans-serif;
+	font-weight: 500;
+	font-size: 0.8em;
+	color: #888;
 }