Add Invocation Commands

[Cahllagerfeld]

closes #865

Summary by CodeRabbit

• New Features
  • Added an “Endpoint” collapsible panel on deployment pages with tabs for CLI, Python, and conditional cURL examples.
  • Provides ready-to-copy code snippets that auto-fill URL and auth when available.
• Style
  • Improved right-hand panel layout with consistent vertical spacing between sections.
• Tests
  • Added comprehensive tests validating command generation across diverse inputs, including auth handling, empty and nested payloads, special characters, and edge cases.

Tasks

• Replace hardcoded example payloads in code snippets with real deployment data or schema-derived examples
• Add Typescript

Im waiting for the palyground to be merged, to get access to helper functions that are part of this for getting the default valeus for the schema

[Cahllagerfeld]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

📝 Walkthrough

Walkthrough

Introduces a DeploymentCodeCollapsible UI showing an “Endpoint” panel with tabs (CLI, Python, conditional cURL) that display command/code snippets. Adds command-builder utilities (buildCurl, buildZenCommand, buildPythonCommand) and corresponding tests. Integrates the new component into the deployments detail page’s right-hand container.

Changes

Cohort / File(s)	Change Summary
Command builders src/app/deployments/[deploymentId]/_components/command-builder.ts	New module exporting buildCurl, buildZenCommand, buildPythonCommand to generate cURL, CLI, and Python invocation strings with conditional payload/auth handling.
Command builder tests src/app/deployments/[deploymentId]/_components/command-builder.spec.ts	New comprehensive tests covering happy paths and edge cases for all three builders, including auth, body types, quoting, ordering, and stringify/parse checks.
Endpoint UI component src/app/deployments/[deploymentId]/_components/code-collapsible.tsx	New DeploymentCodeCollapsible component rendering a collapsible “Endpoint” with tabs (CLI, Python, conditional cURL) and Codesnippet outputs using command-builder helpers.
Page integration src/app/deployments/[deploymentId]/page.tsx	Imports and renders DeploymentCodeCollapsible alongside DeployerConfigCollapsible; adds spacing class to the right-hand container.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Page as Deployment Detail Page
  participant UI as DeploymentCodeCollapsible
  participant Builder as command-builder.ts
  participant Snippet as Codesnippet

  User->>Page: Open deployment detail
  Page->>UI: Render with deployment props
  UI->>UI: Determine url, authKey, defaultBody
  UI->>Builder: buildZenCommand(name, body)
  Builder-->>UI: CLI command string
  UI->>Builder: buildPythonCommand({deploymentId, defaultBody})
  Builder-->>UI: Python snippet string
  alt deployment.body.url exists
    UI->>Builder: buildCurl(url, body, authKey)
    Builder-->>UI: cURL command string
  else
    UI-->>UI: Hide cURL tab
  end
  UI->>Snippet: Render selected tab content
  User->>UI: Toggle collapse / switch tabs
  UI-->>User: Display corresponding snippet

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• tzador

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes Check	⚠️ Warning	While the pull request fulfills the cURL requirement, it also adds CLI and Python command generation functions, their tests, and corresponding UI tabs which extend beyond the single-issue objective of adding only a cURL command to the Deployments detail panel.	To align with issue #865, remove or separate the CLI and Python command helpers, tests, and UI tabs into a distinct pull request so this change set only adds the cURL command feature.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title “Add Invocation Commands” is concise and accurately reflects the addition of CLI, Python, and cURL invocation snippets to the Deployment details panel, summarizing the main change without extraneous detail.
Linked Issues Check	✅ Passed	The changes introduce the required cURL command functionality by adding a buildCurl helper, rendering a cURL tab in the DeploymentCodeCollapsible component, and including tests to validate its behavior, thereby satisfying issue #865’s coding objective.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/865--curl-command

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Cahllagerfeld]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

src/app/deployments/[deploymentId]/_components/command-builder.ts (1)

1-24: Consider simplifying the indentation logic.

The curl command formatting works correctly, but line 13's indentation approach is somewhat convoluted:

const curlParams = JSON.stringify(defaultBody, null, 2).split("\n").join("\n    ");

This splits and rejoins to add indentation. While functional, it could be clearer.

Consider this alternative that's more explicit about the transformation:

-const curlParams = JSON.stringify(defaultBody, null, 2).split("\n").join("\n    ");
+const curlParams = JSON.stringify(defaultBody, null, 2)
+  .split("\n")
+  .map((line, idx) => (idx === 0 ? line : `    ${line}`))
+  .join("\n");

Or use a helper function:

function indentJson(obj: unknown, spaces: number = 4): string {
  const json = JSON.stringify(obj, null, 2);
  const indent = ' '.repeat(spaces);
  return json.split('\n').map((line, i) => i === 0 ? line : indent + line).join('\n');
}

The current implementation is acceptable, but these alternatives make the intent clearer.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between af51c34 and a7b8ebf.

📒 Files selected for processing (4)

• src/app/deployments/[deploymentId]/_components/code-collapsible.tsx (1 hunks)
• src/app/deployments/[deploymentId]/_components/command-builder.spec.ts (1 hunks)
• src/app/deployments/[deploymentId]/_components/command-builder.ts (1 hunks)
• src/app/deployments/[deploymentId]/page.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

src/**/*.tsx

⚙️ CodeRabbit configuration file

src/**/*.tsx: Review React components for adherence to the ZenML design system, accessibility standards, and efficient state management.

Files:

• src/app/deployments/[deploymentId]/page.tsx
• src/app/deployments/[deploymentId]/_components/code-collapsible.tsx

src/**/*.ts

⚙️ CodeRabbit configuration file

src/**/*.ts: Evaluate TypeScript modules and hooks for strict typing, predictable side effects, and consistent error handling.

Files:

• src/app/deployments/[deploymentId]/_components/command-builder.spec.ts
• src/app/deployments/[deploymentId]/_components/command-builder.ts

src/**/*.spec.ts*

⚙️ CodeRabbit configuration file

src/**/*.spec.ts*: Ensure Vitest unit tests stay deterministic, include clear assertions, and reset mocks, timers, and TanStack Query caches.

Files:

• src/app/deployments/[deploymentId]/_components/command-builder.spec.ts

🔇 Additional comments (7)

src/app/deployments/[deploymentId]/page.tsx (1)

1-1: LGTM! Clean integration.

The new DeploymentCodeCollapsible is properly imported and integrated into the layout with consistent spacing.

Also applies to: 13-16

src/app/deployments/[deploymentId]/_components/code-collapsible.tsx (1)

26-34: LGTM! Safe property access.

The component correctly handles optional chaining for deployment.body?.url and deployment.metadata?.auth_key, with appropriate fallback to undefined.

src/app/deployments/[deploymentId]/_components/command-builder.spec.ts (4)

1-106: Excellent test coverage for buildCurl.

The test suite thoroughly covers happy paths (basic command, auth header, various body types) and edge cases (empty inputs, primitives, nested objects). The assertions verify both structure and content.

---

108-237: Comprehensive buildZenCommand tests.

Good coverage including mixed parameter types, null handling, fallback scenarios, and edge cases like empty objects and special characters.

---

178-183: Test documents trailing space behavior.

The test explicitly expects a trailing space when an empty object is passed: "zenml deployment invoke my-deployment ". This documents the current implementation behavior but suggests a minor quality issue in the command builder.

Consider whether the implementation should be adjusted to avoid the trailing space for empty objects (see review comments on command-builder.ts).

---

239-378: Thorough buildPythonCommand test coverage.

The tests validate happy paths, edge cases, and fallback behavior consistently. The nested object parseability checks (lines 339-366) are particularly valuable.

src/app/deployments/[deploymentId]/_components/command-builder.ts (1)

43-68: LGTM! Clean conditional argument handling.

The buildPythonCommand function properly avoids extraneous output by only appending argsString when arguments exist (lines 62-64). This approach is cleaner than the trailing space issue in buildZenCommand.