Add cookie editing and inherited request settings (#463)

apps/yaak-client/components/core/KeyValueRow.tsx

@@ -1,16 +1,24 @@
 import classNames from "classnames";
 import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+import { CopyIconButton } from "../CopyIconButton";
 
 interface Props {
   children:
     | ReactElement<HTMLAttributes<HTMLTableColElement>>
     | (ReactElement<HTMLAttributes<HTMLTableColElement>> | null)[];
+  selectable?: boolean;
 }
 
-export function KeyValueRows({ children }: Props) {
+export function KeyValueRows({ children, selectable }: Props) {
   const childArray = Array.isArray(children) ? children.filter(Boolean) : [children];
   return (
-    <table className="text-editor font-mono min-w-0 w-full mb-auto">
+    <table
+      className={classNames(
+        "text-editor font-mono min-w-0 w-full mb-auto",
+        selectable &&
+          "[&_td]:select-auto [&_td]:cursor-auto [&_td_*]:select-auto [&_td_*]:cursor-auto",
+      )}
+    >
       <tbody className="divide-y divide-surface-highlight">
         {childArray.map((child, i) => (
           // oxlint-disable-next-line react/no-array-index-key
@@ -26,8 +34,11 @@ interface KeyValueRowProps {
   children: ReactNode;
   rightSlot?: ReactNode;
   leftSlot?: ReactNode;
+  align?: "top" | "middle";
   labelClassName?: string;
   labelColor?: "secondary" | "primary" | "info";
+  enableCopy?: boolean;
+  copyText?: string;
 }
 
 export function KeyValueRow({
@@ -35,14 +46,34 @@ export function KeyValueRow({
   children,
   rightSlot,
   leftSlot,
+  align = "top",
   labelColor = "secondary",
   labelClassName,
+  enableCopy,
+  copyText,
 }: KeyValueRowProps) {
+  const textToCopy =
+    copyText ??
+    (typeof children === "string" || typeof children === "number" ? `${children}` : null);
+  const resolvedRightSlot =
+    rightSlot ??
+    (enableCopy && textToCopy != null ? (
+      <CopyIconButton
+        text={textToCopy}
+        className="text-text-subtle"
+        size="2xs"
+        title={`Copy ${label}`}
+        iconSize="sm"
+      />
+    ) : null);
+
   return (
     <>
       <td
         className={classNames(
-          "select-none py-0.5 pr-2 h-full align-top max-w-[10rem]",
+          "select-none py-0.5 pr-2 h-full max-w-[10rem]",
+          align === "top" && "align-top",
+          align === "middle" && "align-middle",
           labelClassName,
           labelColor === "primary" && "text-primary",
           labelColor === "secondary" && "text-text-subtle",
@@ -51,11 +82,21 @@ export function KeyValueRow({
       >
         <span className="select-text cursor-text">{label}</span>
       </td>
-      <td className="select-none py-0.5 break-all align-top max-w-[15rem]">
+      <td
+        className={classNames(
+          "select-none py-0.5 break-all max-w-[15rem]",
+          align === "top" && "align-top",
+          align === "middle" && "align-middle",
+        )}
+      >
         <div className="select-text cursor-text max-h-[12rem] overflow-y-auto grid grid-cols-[auto_minmax(0,1fr)_auto]">
           {leftSlot ?? <span aria-hidden />}
           {children}
-          {rightSlot ? <div className="ml-1.5">{rightSlot}</div> : <span aria-hidden />}
+          {resolvedRightSlot ? (
+            <div className="ml-1.5">{resolvedRightSlot}</div>
+          ) : (
+            <span aria-hidden />
+          )}
         </div>
       </td>
     </>