Merge branch '0.7' of github.com:msqd/harp into 0.7

docs/start/docker.rst

@@ -75,7 +75,7 @@ Then add the following to your `docker-compose.yml` file:
 
     services:
       harp:
-        image: makersquad/harp-proxy:git-dev
+        image: makersquad/harp-proxy
         volumes:
           - "./harp.yaml:/etc/harp.yaml"
           - "./harp-data:/var/lib/harp/data"

harp_apps/dashboard/frontend/src/Pages/Transactions/Components/Foldable.tsx

@@ -9,13 +9,14 @@ interface FoldableProps {
   title: ReactNode
   subtitle?: ReactNode
   children?: ReactNode
+  className?: string
 }
 
-export function Foldable({ open = true, title, subtitle, children = undefined }: FoldableProps) {
+export function Foldable({ open = true, title, subtitle, children = undefined, className }: FoldableProps) {
   const [isOpen, setIsOpen] = useState(open)
 
   return (
-    <div className="px-4 py-3">
+    <div className={classNames(className, "px-4 py-3")}>
       <H5
         padding="pt-0"
         className={classNames("flex w-full whitespace-nowrap", children ? "cursor-pointer" : null)}

harp_apps/dashboard/frontend/src/Pages/Transactions/Components/MessageBody.tsx

@@ -1,15 +1,27 @@
+import { useRef } from "react"
+
 import { useBlobQuery } from "Domain/Transactions/useBlobQuery.ts"
+import CopyToClipboard from "ui/Components/CopyToClipBoard/CopyToClipboard.tsx"
 
 import { PrettyBody } from "./PrettyBody.tsx"
 
 export function MessageBody({ id }: { id: string }) {
   const query = useBlobQuery(id)
+  const ref = useRef<HTMLDivElement>(null)
 
   if (query && query.isSuccess && query.data !== undefined) {
     if (query.data.content.byteLength) {
       return (
-        <div className="px-2">
-          <PrettyBody content={query.data.content} contentType={query.data.contentType} />
+        <div className="flex space-y-2">
+          <CopyToClipboard
+            targetRef={ref}
+            contentType={query.data.contentType}
+            className="absolute right-2"
+            description="copy content"
+          />
+          <div className="px-2 pt-4 mt-4" ref={ref}>
+            <PrettyBody content={query.data.content} contentType={query.data.contentType} />
+          </div>
         </div>
       )
     }

harp_apps/dashboard/frontend/src/Pages/Transactions/Components/MessageHeaders.tsx

@@ -1,4 +1,7 @@
+import { useRef } from "react"
+
 import { useBlobQuery } from "Domain/Transactions/useBlobQuery.ts"
+import CopyToClipboard from "ui/Components/CopyToClipBoard/CopyToClipboard.tsx"
 
 import { NoCacheIcon } from "./Duration.tsx"
 
@@ -9,34 +12,45 @@ interface MessageHeadersProps {
 export function MessageHeaders({ id }: MessageHeadersProps) {
   const query = useBlobQuery(id)
   const decoder = new TextDecoder("utf-8")
+  const ref = useRef<HTMLTableElement>(null)
 
   if (query && query.isSuccess && query.data !== undefined) {
     return (
-      <table className="mb-2 w-full text-xs font-mono">
-        <tbody>
-          {decoder
-            .decode(query.data.content)
-            .split("\n")
-            .map((line, index) => {
-              const s = line.split(":", 2)
-              return (
-                <tr key={index}>
-                  <td className="px-2 w-1 text-blue-600 truncate">{s[0]}</td>
-                  <td className="px-2 whitespace-nowrap">
-                    {s[0].toLowerCase() == "cache-control" && s[1].toLowerCase().includes("no-cache") ? (
-                      <span className="h-4 flex text-xs" title="Cache was bypassed.">
-                        <NoCacheIcon />
-                        {s[1]}
-                      </span>
-                    ) : (
-                      s[1]
-                    )}
-                  </td>
-                </tr>
-              )
-            })}
-        </tbody>
-      </table>
+      <div className="flex space-y-2">
+        <CopyToClipboard
+          targetRef={ref}
+          contentType="text/html"
+          className="absolute right-2"
+          description="copy headers"
+        />
+        <div ref={ref} className="pt-4">
+          <table className="mb-2 w-full text-xs font-mono">
+            <tbody>
+              {decoder
+                .decode(query.data.content)
+                .split("\n")
+                .map((line, index) => {
+                  const s = line.split(":", 2)
+                  return (
+                    <tr key={index}>
+                      <td className="px-2 w-1 text-blue-600 truncate">{s[0]}</td>
+                      <td className="px-2 whitespace-nowrap">
+                        {s[0].toLowerCase() == "cache-control" && s[1].toLowerCase().includes("no-cache") ? (
+                          <span className="h-4 flex text-xs" title="Cache was bypassed.">
+                            <NoCacheIcon />
+                            {s[1]}
+                          </span>
+                        ) : (
+                          s[1]
+                        )}
+                      </td>
+                    </tr>
+                  )
+                })}
+            </tbody>
+          </table>
+        </div>
+      </div>
     )
   }
 }

harp_apps/dashboard/frontend/src/Pages/Transactions/TransactionDetailOnQuerySuccess.tsx

@@ -1,10 +1,12 @@
 import { format } from "date-fns"
 import { QueryObserverSuccessResult } from "react-query/types/core/types"
+import { useLocation } from "react-router-dom"
 
 import { KeyValueSettings } from "Domain/System/useSystemSettingsQuery"
 import { Transaction } from "Models/Transaction"
 import { SettingsTable } from "Pages/System/Components"
 import { ucfirst } from "Utils/Strings"
+import CopyToClipboard from "ui/Components/CopyToClipBoard/CopyToClipboard.tsx"
 import { Pane } from "ui/Components/Pane"
 
 import { Duration } from "./Components/Duration.tsx"
@@ -26,6 +28,8 @@ function Tags({ tags }: { tags: [string, string] }) {
 }
 
 export function TransactionDetailOnQuerySuccess({ query }: { query: QueryObserverSuccessResult<Transaction> }) {
+  const location = useLocation()
+
   const transaction = query.data
   const [duration, tpdex, cached, noCache] = [
     transaction.elapsed ? Math.trunc(transaction.elapsed) / 1000 : null,
@@ -34,12 +38,14 @@ export function TransactionDetailOnQuerySuccess({ query }: { query: QueryObserve
     !!transaction.extras?.no_cache,
   ]
   const tags = (transaction.tags ? Object.entries(transaction.tags) : []) as unknown as [string, string]
+  const transactionUrl = `${window.location.origin}${location.pathname}/${transaction.id}`
   return (
     <Pane hasDefaultPadding={false} className="divide-y divide-gray-100 overflow-hidden text-gray-900 sm:text-sm">
       <Foldable
         title={
           <div className="flex gap-x-0.5 items-center">
             <span className="grow">Transaction</span>
+            <CopyToClipboard text={transactionUrl} description="copy transaction link" className="font-light" />
             <Duration
               duration={duration}
               tpdex={tpdex}
@@ -67,6 +73,7 @@ export function TransactionDetailOnQuerySuccess({ query }: { query: QueryObserve
             ) : undefined
           }
           open={message.kind != "error"}
+          className="relative"
         >
           <MessageHeaders id={message.headers} />
           <MessageBody id={message.body} />