@flanksource/clicky-ui 0.3.1 → 0.3.3

package/dist/rpc/OperationCommandPage.js

@@ -1,17 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useMemo, useEffect, useRef, useCallback } from "react";
+import { useState, useMemo, useEffect, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { FilterBar } from "../components/FilterBar.js";
 import { MethodBadge } from "../data/MethodBadge.js";
-import { AcceptPicker } from "./AcceptPicker.js";
 import { CommandForm } from "./CommandForm.js";
-import { pathParamNames, submitValue } from "./command-form-utils.js";
-import { CommandOutput } from "./CommandOutput.js";
+import { submitValue, pathParamNames } from "./command-form-utils.js";
 import { buildInitialParameterValues, useDebouncedRecord, packParameterValues, parametersToFormConfig, dataTablePaginationFromForm, pruneParameterValues, titleCase } from "./formMetadata.js";
 import { InlineError } from "./InlineError.js";
 import { OperationActionDialog } from "./OperationActionDialog.js";
-import { isPositionalParam } from "./types.js";
+import { OperationResultView } from "./OperationResultView.js";
+import { hrefForOperation } from "./rowNavigation.js";
 import { useOperationById } from "./useOperations.js";
+const RESULT_ACCEPT = "application/clicky+json";
 const EMPTY_PARAMETER_VALUES = {};
 function OperationCommandPage({
   client,
@@ -24,18 +23,19 @@ function OperationCommandPage({
   backLabel = "Back",
   renderLink,
   onNavigate,
+  commandRuntime,
   hideLockedPathFilters = Boolean(providedOperation),
   className
 }) {
-  const lookup = useOperationById(client, providedOperation ? void 0 : operationId);
+  const lookup = useOperationById(
+    client,
+    providedOperation ? void 0 : operationId
+  );
   const operation = providedOperation ?? lookup.operation;
   const isLoading = providedOperation ? false : lookup.isLoading;
-  const [accept, setAccept] = useState("application/clicky+json");
-  const [previewMode, setPreviewMode] = useState("hidden");
   const [isExecuting, setIsExecuting] = useState(false);
   const [result, setResult] = useState(null);
   const [error, setError] = useState(null);
-  const [submitError, setSubmitError] = useState("");
   const [hasAutoRun, setHasAutoRun] = useState(false);
   const parameters = (operation == null ? void 0 : operation.operation.parameters) ?? [];
   const isGet = ((operation == null ? void 0 : operation.method) ?? "").toUpperCase() === "GET";
@@ -57,7 +57,10 @@ function OperationCommandPage({
       parameters,
       operation.method,
       {},
-      stripRunnerParams(initialValues)
+      {
+        ...readQueryParameterValuesFromUrl(parameters),
+        ...stripRunnerParams(initialValues)
+      }
     ) : stripRunnerParams(initialValues),
     [initialValues, operation == null ? void 0 : operation.method, parameterSignature]
   );
@@ -83,11 +86,19 @@ function OperationCommandPage({
   const [values, setValues] = useState(effectiveInitialValues);
   useEffect(() => {
     setValues(effectiveInitialValues);
-    setSubmitError("");
   }, [effectiveInitialValues]);
   const debouncedValues = useDebouncedRecord(values, 250);
+  useEffect(() => {
+    if (!isGet || !operation) return;
+    writeQueryParameterValuesToUrl(debouncedValues, parameters);
+  }, [isGet, operationKey, debouncedValues, parameterSignature]);
   const lookupQuery = useQuery({
-    queryKey: ["operation-query-lookup", operation == null ? void 0 : operation.method, operation == null ? void 0 : operation.path, debouncedValues],
+    queryKey: [
+      "operation-query-lookup",
+      operation == null ? void 0 : operation.method,
+      operation == null ? void 0 : operation.path,
+      debouncedValues
+    ],
     queryFn: async () => {
       var _a;
       if (!operation) return { filters: {} };
@@ -110,30 +121,19 @@ function OperationCommandPage({
       lockedValues: lockedPathValues,
       hideLocked: hideLockedPathFilters
     });
-  }, [isGet, parameters, values, lookupQuery.data, lockedPathValues, hideLockedPathFilters]);
+  }, [
+    isGet,
+    parameters,
+    values,
+    lookupQuery.data,
+    lockedPathValues,
+    hideLockedPathFilters
+  ]);
   const dataTablePagination = useMemo(
     () => dataTablePaginationFromForm(formConfig.pagination, result),
     [formConfig.pagination, result]
   );
   const lastSubmittedSignature = useRef("");
-  function handleManualSubmit() {
-    if (!operation) return;
-    const merged = { ...values, ...lockedPathValues };
-    const missingRequired = parameters.filter((param) => {
-      if (!param.required) return false;
-      return (merged[param.name] ?? "").trim() === "";
-    });
-    if (missingRequired.length > 0) {
-      setSubmitError(
-        `Missing required fields: ${missingRequired.map((param) => titleCase(param.name)).join(", ")}`
-      );
-      return;
-    }
-    setSubmitError("");
-    setHasAutoRun(true);
-    lastSubmittedSignature.current = JSON.stringify(pruneParameterValues(merged));
-    void executeOperation(merged);
-  }
   async function executeOperation(values2) {
     if (!operation) return;
     setIsExecuting(true);
@@ -143,7 +143,7 @@ function OperationCommandPage({
         operation.path,
         operation.method,
         packParameterValues(values2, operation.operation.parameters ?? []),
-        { Accept: accept }
+        { Accept: RESULT_ACCEPT }
       );
       setResult(response);
     } catch (err) {
@@ -167,10 +167,11 @@ function OperationCommandPage({
     });
     if (missingRequired.length > 0) return;
     setHasAutoRun(true);
-    lastSubmittedSignature.current = JSON.stringify(pruneParameterValues(effectiveInitialValues));
+    lastSubmittedSignature.current = JSON.stringify(
+      pruneParameterValues(effectiveInitialValues)
+    );
     void executeOperation(effectiveInitialValues);
   }, [
-    accept,
     effectiveAutoRun,
     effectiveInitialValues,
     hasAutoRun,
@@ -189,28 +190,25 @@ function OperationCommandPage({
     if (lastSubmittedSignature.current === signature) return;
     lastSubmittedSignature.current = signature;
     void executeOperation(merged);
-  }, [isGet, hasAutoRun, debouncedValues, lockedPathValues, parameterSignature]);
-  const getRowDetailHref = useCallback(
-    (row) => {
-      if (!detailOperation) return void 0;
-      const id = getClickyRowId(row);
-      if (!id) return void 0;
-      return hrefForOperation(detailOperation, [], { id });
-    },
-    [detailOperation]
-  );
-  const handleTableRowClick = useCallback(
-    (row) => {
-      const href = getRowDetailHref(row);
-      if (href) onNavigate == null ? void 0 : onNavigate(href);
-    },
-    [getRowDetailHref, onNavigate]
-  );
+  }, [
+    isGet,
+    hasAutoRun,
+    debouncedValues,
+    lockedPathValues,
+    parameterSignature
+  ]);
   const backLink = backHref == null ? null : renderLink ? renderLink({
     to: backHref,
     className: "text-sm text-primary underline-offset-4 hover:underline",
     children: backLabel
-  }) : /* @__PURE__ */ jsx("a", { href: backHref, className: "text-sm text-primary underline-offset-4 hover:underline", children: backLabel });
+  }) : /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: backHref,
+      className: "text-sm text-primary underline-offset-4 hover:underline",
+      children: backLabel
+    }
+  );
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Loading operation..." });
   }
@@ -224,7 +222,6 @@ function OperationCommandPage({
     ] });
   }
   const { path, method, operation: op } = operation;
-  const preview = buildOperationPreview(operation, effectiveInitialValues, accept, previewMode);
   return /* @__PURE__ */ jsxs("div", { className: className ?? "min-w-0 flex-1 space-y-6 p-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -237,102 +234,64 @@ function OperationCommandPage({
         op.operationId && op.summary && /* @__PURE__ */ jsx("p", { className: "mt-2 font-mono text-xs text-muted-foreground", children: op.operationId }),
         op.description && op.description !== op.summary && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: op.description })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-end gap-3", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { className: "mb-1 text-right text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Accept" }),
-          /* @__PURE__ */ jsx(
-            AcceptPicker,
-            {
-              value: accept,
-              onChange: setAccept,
-              previewMode,
-              onPreviewModeChange: setPreviewMode
-            }
-          )
-        ] }),
-        relatedOperations.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-end gap-2", children: relatedOperations.map(
-          (related) => related.href ? renderLink ? renderLink({
-            key: `${related.operation.method}:${related.operation.path}`,
-            to: related.href,
+      /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-col items-end gap-3", children: relatedOperations.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-end gap-2", children: relatedOperations.map(
+        (related) => related.href ? renderLink ? renderLink({
+          key: `${related.operation.method}:${related.operation.path}`,
+          to: related.href,
+          className: "inline-flex h-8 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground",
+          children: related.label
+        }) : /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: related.href,
             className: "inline-flex h-8 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground",
             children: related.label
-          }) : /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: related.href,
-              className: "inline-flex h-8 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground",
-              children: related.label
-            },
-            `${related.operation.method}:${related.operation.path}`
-          ) : /* @__PURE__ */ jsx(
-            OperationActionDialog,
-            {
-              operation: related.operation,
-              client,
-              initialValues: lockedPathValues,
-              label: related.label,
-              defaultAccept: accept,
-              ...onNavigate ? { onNavigateAction: onNavigate } : {}
-            },
-            `${related.operation.method}:${related.operation.path}`
-          )
-        ) })
-      ] })
+          },
+          `${related.operation.method}:${related.operation.path}`
+        ) : /* @__PURE__ */ jsx(
+          OperationActionDialog,
+          {
+            operation: related.operation,
+            client,
+            initialValues: lockedPathValues,
+            label: related.label,
+            defaultAccept: RESULT_ACCEPT,
+            ...onNavigate ? { onNavigateAction: onNavigate } : {}
+          },
+          `${related.operation.method}:${related.operation.path}`
+        )
+      ) }) })
     ] }),
-    /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
-      method.toUpperCase() === "GET" ? parameters.length > 0 ? (
-        // Before a result lands the FilterBar lives here so users can
-        // fill in path params / required inputs and submit. Once a
-        // result is showing AND auto-run is on (sidebar flow), the same
-        // filter chips relocate into the DataTable's filter bar via
-        // externalFilters, which is the unified placement the user asked
-        // for. The two branches share `formConfig.filters` so the values
-        // stay in sync.
-        !result || !effectiveAutoRun ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(
-            FilterBar,
-            {
-              autoSubmit: effectiveAutoRun,
-              filters: formConfig.filters,
-              ...!effectiveAutoRun ? { onApply: () => handleManualSubmit() } : {},
-              applyLabel: "Execute request",
-              isPending: isExecuting,
-              ...formConfig.timeRange ? { timeRange: formConfig.timeRange } : {}
-            }
-          ),
-          submitError && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive", children: submitError })
-        ] }) : null
-      ) : null : /* @__PURE__ */ jsx("div", { className: "rounded-lg border p-4", children: /* @__PURE__ */ jsx(
-        CommandForm,
-        {
-          parameters,
-          onExecute: (params) => executeOperation(params),
-          isPending: isExecuting,
-          method,
-          path,
-          accept,
-          initialValues: effectiveInitialValues
-        }
-      ) }),
-      preview && /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto rounded-md bg-muted p-3 font-mono text-xs", children: preview })
-    ] }),
-    error ? /* @__PURE__ */ jsx(InlineError, { title: `Failed to load ${path} as ${accept}`, error }) : isExecuting || result ? /* @__PURE__ */ jsx("div", { role: "region", "aria-label": "Response body", children: /* @__PURE__ */ jsx(
-      CommandOutput,
+    method.toUpperCase() !== "GET" && /* @__PURE__ */ jsx("section", { className: "space-y-3", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border p-4", children: /* @__PURE__ */ jsx(
+      CommandForm,
+      {
+        parameters,
+        onExecute: (params) => executeOperation(params),
+        isPending: isExecuting,
+        method,
+        path,
+        accept: RESULT_ACCEPT,
+        initialValues: effectiveInitialValues
+      }
+    ) }) }),
+    error ? /* @__PURE__ */ jsx(InlineError, { title: `Failed to load ${path}`, error }) : isExecuting || result ? /* @__PURE__ */ jsx(
+      OperationResultView,
       {
         response: result,
         loading: isExecuting,
         loadingMessage: "Loading execution results…",
-        bare: true,
-        ...detailOperation ? {
-          getTableRowHref: getRowDetailHref,
-          onTableRowClick: handleTableRowClick,
-          isTableRowClickable: (row) => Boolean(getRowDetailHref(row))
+        ariaLabel: "Response body",
+        detailOperation,
+        ...commandRuntime ? { commandRuntime } : {},
+        ...isGet && effectiveAutoRun ? {
+          filterConfig: {
+            filters: formConfig.filters,
+            ...formConfig.timeRange ? { timeRange: formConfig.timeRange } : {}
+          }
         } : {},
-        ...isGet && effectiveAutoRun && formConfig.filters.length > 0 ? { externalFilters: formConfig.filters } : {},
-        ...isGet && effectiveAutoRun && formConfig.timeRange ? { timeRange: formConfig.timeRange } : {},
         ...isGet && effectiveAutoRun && dataTablePagination ? { pagination: dataTablePagination } : {}
       }
-    ) }) : null
+    ) : null
   ] });
 }
 function findRelatedOperations(current, operations, pathValues) {
@@ -353,7 +312,9 @@ function findRelatedOperations(current, operations, pathValues) {
       label: operationLabel(related),
       ...href ? { href } : {}
     };
-  }).filter((related) => related.operation.method.toUpperCase() !== "GET" || related.href);
+  }).filter(
+    (related) => related.operation.method.toUpperCase() !== "GET" || related.href
+  );
 }
 function findDetailOperation(current, operations) {
   const method = current.method.toUpperCase();
@@ -367,28 +328,6 @@ function findDetailOperation(current, operations) {
     }
   );
 }
-function hrefForOperation(operation, args = [], flags = {}) {
-  let route = apiPathToRoutePath(operation.path);
-  const consumedFlags = /* @__PURE__ */ new Set();
-  pathParamNames(operation.path).forEach((name, index) => {
-    const value = flags[name] ?? args[index];
-    if (!value) return;
-    consumedFlags.add(name);
-    route = route.replace(`:${name}`, encodeURIComponent(value));
-  });
-  if (route.includes(":")) return void 0;
-  const search = new URLSearchParams();
-  for (const [key, value] of Object.entries(flags)) {
-    if (value && !consumedFlags.has(key)) search.set(key, value);
-  }
-  const query = search.toString();
-  return query ? `${route}?${query}` : route;
-}
-function apiPathToRoutePath(path) {
-  const cliPath = path.trim().replace(/^\/api\/v1\/?/, "").replace(/^\/+/, "").replace(/\/+$/, "");
-  if (!cliPath) return "/";
-  return `/${cliPath.replace(/\{([^}]+)\}/g, ":$1")}`;
-}
 function pathTemplateSatisfied(path, values) {
   return pathParamNames(path).every((name) => Boolean(values[name]));
 }
@@ -397,52 +336,6 @@ function operationLabel(operation) {
   const actionName = ((_a = operation.operation["x-clicky"]) == null ? void 0 : _a.actionName) || operation.path.split("/").filter(Boolean).at(-1) || operation.operation.operationId || operation.method;
   return titleCase(actionName.replace(/[_-]+/g, " "));
 }
-function buildOperationPreview(operation, values, accept, mode) {
-  if (mode === "hidden") return "";
-  if (mode === "cli") return buildCliPreview(operation, values);
-  return buildCurlPreview(operation, values, accept);
-}
-function buildCurlPreview(operation, values, accept) {
-  const params = operation.operation.parameters ?? [];
-  const parts = [`curl -X ${operation.method.toUpperCase()}`];
-  if (accept !== "application/json") parts.push(`-H "Accept: ${accept}"`);
-  let url = operation.path;
-  const queryParts = [];
-  for (const param of params) {
-    const value = submitValue(param, values[param.name]);
-    if (!value) continue;
-    if (param.in === "path") {
-      url = url.replace(`{${param.name}}`, encodeURIComponent(value));
-    } else if (param.in === "query") {
-      queryParts.push(`${encodeURIComponent(param.name)}=${encodeURIComponent(value)}`);
-    }
-  }
-  if (queryParts.length > 0) url += `?${queryParts.join("&")}`;
-  parts.push(`"${url}"`);
-  return parts.join(" ");
-}
-function buildCliPreview(operation, values) {
-  var _a;
-  const command = (_a = operation.operation["x-clicky"]) == null ? void 0 : _a.command;
-  if (!command) return buildCurlPreview(operation, values, "application/json");
-  const params = operation.operation.parameters ?? [];
-  const positionalNames = new Set(params.filter(isPositionalParam).map((param) => param.name));
-  const parts = [command.replaceAll("/", " ")];
-  for (const param of params) {
-    const value = submitValue(param, values[param.name]);
-    if (!value) continue;
-    if (param.in === "path" || positionalNames.has(param.name)) {
-      parts.push(shellQuote(value));
-      continue;
-    }
-    parts.push(`--${param.name}`, shellQuote(value));
-  }
-  return parts.join(" ");
-}
-function shellQuote(value) {
-  if (/^[a-zA-Z0-9_./:@-]+$/.test(value)) return value;
-  return `'${value.replaceAll("'", "'\\''")}'`;
-}
 function stripRunnerParams(values) {
   const next = {};
   for (const [key, value] of Object.entries(values)) {
@@ -451,23 +344,41 @@ function stripRunnerParams(values) {
   }
   return next;
 }
-function getClickyRowId(row) {
-  const candidates = ["_id", "id", "ID", "guid", "GUID"];
-  for (const key of candidates) {
-    const value = clickyNodeText(row.cells[key]);
-    if (value) return value;
+function readQueryParameterValuesFromUrl(parameters) {
+  if (typeof window === "undefined") return {};
+  const queryParamNames = new Set(
+    parameters.filter((param) => param.in === "query").map((p) => p.name)
+  );
+  if (queryParamNames.size === 0) return {};
+  const values = {};
+  const search = new URLSearchParams(window.location.search);
+  for (const name of queryParamNames) {
+    const value = search.get(name);
+    if (value != null && value !== "") {
+      values[name] = value;
+    }
   }
-  return void 0;
+  return values;
 }
-function clickyNodeText(node) {
-  if (!node) return "";
-  if (node.plain) return node.plain;
-  if (node.text) return node.text;
-  if (node.source) return node.source;
-  if (node.children) return node.children.map(clickyNodeText).join("");
-  if (node.items) return node.items.map(clickyNodeText).join(" ");
-  if (node.fields) return node.fields.map((field) => clickyNodeText(field.value)).join(" ");
-  return "";
+function writeQueryParameterValuesToUrl(values, parameters) {
+  if (typeof window === "undefined") return;
+  const queryParameters = parameters.filter((param) => param.in === "query");
+  if (queryParameters.length === 0) return;
+  const search = new URLSearchParams(window.location.search);
+  for (const param of queryParameters) {
+    const value = submitValue(param, values[param.name]);
+    if (value == null) {
+      search.delete(param.name);
+    } else {
+      search.set(param.name, value);
+    }
+  }
+  const query = search.toString();
+  const next = `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`;
+  const current = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+  if (next !== current) {
+    window.history.replaceState(window.history.state, "", next);
+  }
 }
 export {
   OperationCommandPage