Merge pull request #195 from paritytech/playground/output-panel-logs-and-editor

Playground: keep logs on timeout, refine copy button, hide editor line numbers

Author: pgherveou

playground/src/app/globals.css

@@ -780,6 +780,7 @@ button {
 /* Inline console (no outer head, since the tab bar provides it) */
 
 .console--inline {
+  position: relative;
   background: var(--console-bg);
   border: 1px solid var(--console-rule);
   border-radius: var(--radius);
@@ -1004,6 +1005,43 @@ button {
   max-height: 420px;
   overflow: auto;
 }
+.console__copy {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  color: var(--console-mute);
+  background: color-mix(in srgb, var(--console-bg) 72%, transparent);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  opacity: 0.55;
+  backdrop-filter: blur(4px);
+  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
+}
+.console__copy svg {
+  width: 15px;
+  height: 15px;
+}
+.console--inline:hover .console__copy,
+.console__copy:focus-visible {
+  opacity: 1;
+}
+.console__copy:hover {
+  opacity: 1;
+  color: var(--console-ink);
+  background: color-mix(in srgb, var(--console-ink) 10%, transparent);
+}
+.console__copy[data-copied="true"] {
+  opacity: 1;
+  color: var(--good);
+}
 .console__body--error {
   color: #ffb4b4;
 }

playground/src/components/ExampleEditor.tsx

@@ -66,6 +66,10 @@ export function ExampleEditor({
         options={{
           minimap: { enabled: false },
           fontSize: 13,
+          lineNumbers: "off",
+          lineDecorationsWidth: 0,
+          lineNumbersMinChars: 0,
+          glyphMargin: false,
           scrollBeyondLastLine: false,
           tabSize: 2,
           padding: { top: 12, bottom: 12 },

playground/src/components/MethodView.tsx

@@ -66,6 +66,7 @@ export function MethodView({
   const [running, setRunning] = useState(false);
   const [error, setError] = useState("");
   const [tab, setTab] = useState<"example" | "output">("example");
+  const [copied, setCopied] = useState(false);
   const callAbortRef = useRef<((reason: string) => void) | null>(null);
   const cancelRunRef = useRef<(() => void) | null>(null);
 
@@ -150,6 +151,20 @@ export function MethodView({
     callAbortRef.current?.("Call aborted");
   };
 
+  const handleCopyLogs = async () => {
+    const text = [...logs.map((entry) => entry.text), ...(error ? [error] : [])]
+      .join("\n")
+      .trim();
+    if (!text) return;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard unavailable */
+    }
+  };
+
   const kind = methodInfo?.type ?? "unary";
 
   const status: Status = error
@@ -305,41 +320,81 @@ export function MethodView({
           </>
         ) : (
           <div className="console console--inline" data-status={status}>
-            {error ? (
-              <div
-                className="console__body console__body--error"
-                data-testid="error-display"
-              >
-                {error}
-                {isHostMissingError(error) && (
-                  <div className="console__cta">
-                    <a
-                      className="open-in-dotli"
-                      href={hostedPlaygroundUrl(service, method)}
-                      target="_blank"
-                      rel="noreferrer"
-                      title="Open this example in the host-backed playground"
+            {logs.length > 0 || error ? (
+              <>
+                <button
+                  type="button"
+                  className="console__copy"
+                  data-copied={copied}
+                  onClick={handleCopyLogs}
+                  aria-label="Copy output to clipboard"
+                  title="Copy output"
+                >
+                  {copied ? (
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden
+                    >
+                      <path d="M20 6 9 17l-5-5" />
+                    </svg>
+                  ) : (
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden
                     >
-                      Run in hosted playground ↗
-                    </a>
+                      <rect x="8" y="8" width="14" height="14" rx="2" ry="2" />
+                      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+                    </svg>
+                  )}
+                </button>
+                {logs.length > 0 && (
+                  <div className="console__body" data-testid="stream-log">
+                    {logs.map((entry, i) => (
+                      <div
+                        key={i}
+                        className={`console__entry console__entry--${entry.level}`}
+                        data-testid="stream-entry"
+                      >
+                        <span className="console__entry-i">
+                          {String(i + 1).padStart(2, "0")}
+                        </span>
+                        <span className="console__entry-body">{entry.text}</span>
+                      </div>
+                    ))}
                   </div>
                 )}
-              </div>
-            ) : logs.length > 0 ? (
-              <div className="console__body" data-testid="stream-log">
-                {logs.map((entry, i) => (
+                {error && (
                   <div
-                    key={i}
-                    className={`console__entry console__entry--${entry.level}`}
-                    data-testid="stream-entry"
+                    className="console__body console__body--error"
+                    data-testid="error-display"
                   >
-                    <span className="console__entry-i">
-                      {String(i + 1).padStart(2, "0")}
-                    </span>
-                    <span className="console__entry-body">{entry.text}</span>
+                    {error}
+                    {isHostMissingError(error) && (
+                      <div className="console__cta">
+                        <a
+                          className="open-in-dotli"
+                          href={hostedPlaygroundUrl(service, method)}
+                          target="_blank"
+                          rel="noreferrer"
+                          title="Open this example in the host-backed playground"
+                        >
+                          Run in hosted playground ↗
+                        </a>
+                      </div>
+                    )}
                   </div>
-                ))}
-              </div>
+                )}
+              </>
             ) : (
               <div className="console__body console__body--empty">
                 {!runnable