Skip to content

API explorer: redesign the examples rail and operation page - #4312

Merged
reakaleek merged 63 commits into
mainfrom
api-examples-redesign-0943e437
Oct 6, 2026
Merged

reakaleek merged 63 commits into
mainfrom
api-examples-redesign-0943e437

Conversation

@reakaleek

@reakaleek reakaleek commented Oct 5, 2026 •

Copy link
Copy Markdown
Member

Why

  • The examples panel on API operation pages used a language dropdown and tabs. Readers could not see which languages exist, long samples were hard to read, and the "Compare all" overlay was not useful.
  • Several rendering issues made the pages look unfinished: Console samples were only partly highlighted, short samples had too much padding or extra empty lines, route chips showed a stray space after optional segments, icons were drawn at three different sizes, and the first sample animated on every page load.

Closes elastic/docs-eng-team#895
Closes elastic/docs-eng-team#877
Closes elastic/docs-eng-team#891
Closes elastic/docs-eng-team#890
Closes elastic/docs-eng-team#928
Closes elastic/docs-eng-team#880
Closes elastic/docs-eng-team#878
Closes elastic/docs-eng-team#875
Closes elastic/docs-eng-team#927
Closes elastic/docs-eng-team#888

Part of elastic/docs-eng-team#942
Part of elastic/docs-eng-team#876
Part of elastic/docs-eng-team#929
Part of elastic/docs-eng-team#887

Follow-up: elastic/docs-eng-team#983

What

  • Replace the dropdown with a language carousel per example: example chips, one card per language, language dots that show only the languages an example has, a remembered language that also follows swipes, and deep links. Remove the "Compare all" overlay and the request expand button.
  • Label the request samples and the response card, name the client that runs each sample by its product name (for example Elasticsearch Java Client) and link it to the client docs on Elasticsearch APIs, and show every tooltip on API pages at once with tippy instead of the native title.
  • Add a full screen preview for any code card, 100 characters wide, and order languages by GitHub's Innovation Graph popularity ranking with Console first.
  • Merge an operation's routes and methods into endpoint rows: one dominant method per route, "also GET" for interchangeable methods, optional path segments marked, and the primary route shown larger than the alternatives. On Kibana, the path outside the space leads and its /s/{space_id} variant lists after it. Overview pages show the main path only.
  • Carry the request example body in synthetic Console and curl samples, so operations without x-codeSamples no longer show the body in a block of its own.
  • Collapse sibling operations onto one page only when they are the same call: parameters (name, requiredness, serialization, schema), request body, responses (schema and headers), security, lifecycle, and servers. Warn when a group keeps separate pages, naming what differs, and when a shared page cannot take its base URL.
  • Fix Console highlighting, code card heights and padding, icon sizes, the success check icon, carousel dot styling, the load-time animation, and give code cards the same corner radius as Markdown code blocks.

Notes

  • curl has no entry on the Innovation Graph, so it is ranked as Shell: after Python, before Java. This is one row in CodeSample.ByName if the order should change.
  • The api-nav-grouping feature flag is removed: operations that share x-namespace and x-api-name collapse into one page when they are interchangeable, tag groups always classify the sidebar, and Types pages are always listed. Former per-operation URLs redirect.
  • The stricter collapse rule separates five Kibana groups whose old route is deprecated next to its replacement (Create service token, Delete a connector, Get connector information, Get enrollment API key by ID, Reassign agent); the build warns about each.
  • Build instrumentation (RenderProgress, dev-server logging) is left out on purpose and will follow in a separate PR.

🤖 Generated with Claude Code

…rows

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Oct 6, 2026

Copy link
Copy Markdown
Contributor

Docs preview (local build)

Handbook preview: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4312/

Sample changed pages:

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Requesting changes because grouped operation collapse currently permits redirecting distinct operation contracts into a single primary-operation page, which can produce incorrect API documentation.


What is this? | From workflow: PR Review

Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not.

Comment thread src/Elastic.ApiExplorer/Navigation/ApiNavigationBuilder.cs Outdated
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…names without case

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…hat state

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
reakaleek and others added 16 commits October 6, 2026 12:15
The native title tooltip waits about a second, so the hints on the
optional path segment, the "also GET" badge, the example chip counts,
the schema type spans, the sidebar method glyphs and the code card
buttons all felt unresponsive next to the language dots. One delegated
tippy listener now serves every element with data-tippy-content,
creating each tooltip on first hover, and mounts tooltips inside the
code preview dialog so its top layer does not cover them. Schema type
spans without a title get no attribute at all, as an empty title showed
nothing natively.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The schema type partial branched four ways to leave the attribute off
spans without a title. The delegate now simply does not target an empty
data-tippy-content, which keeps that rule in one place and lets the
partial go back to its two branches.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
… pages (per review by @github-actions)

The interchangeability signature now includes each operation's security requirements (schemes and scopes, order-independent). An absent security list keys as inherit, distinct from an empty list, since OpenAPI gives them different meanings.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
A generated Console or curl sample is still a correct request; telling
the reader where it came from added nothing they could act on. The
data-generated marker stays for scripts and tests.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…collapse (per review by @github-actions)

SchemaKey no longer truncates at depth 4. Inline schemas cannot be cyclic (only references recurse, and references end the descent), so the cap only bought cheapness at the cost of merging contracts that differ below it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
… review by @github-actions)

The interchangeability signature now carries the operation's deprecated flag and x-beta state, so a method with a different lifecycle keeps its own page and badges.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…view by @github-actions)

The interchangeability signature now carries the operation's servers (URLs, order-independent), with absent servers keyed as inherited from the document.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…se (per review by @github-actions)

Each response in the interchangeability signature now carries its headers by name (case-insensitive), requiredness and schema.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
… collapse (per review by @github-actions)

The parameter part of the interchangeability signature now carries style, explode and allowReserved, with an unset style resolved to the OpenAPI default for the parameter's location so an explicit default and an omitted one compare equal.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…wns (per review by @github-actions)

The navigation builder now hands CanonicalOperationMoniker the moniker every operation in the API would claim on its own. When the collapsed group's base moniker belongs to an operation outside the group, the page keeps the primary operation's full id instead.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Operations grouped under one API are meant to be the same call, so a
group that keeps separate pages points at something in the spec worth
a look. AreInterchangeable now rests on Differences, which names the
facets (parameters, request body, responses, security, lifecycle,
servers) the operations disagree on, and the navigation builder logs
them. It also warns when a shared page cannot take its base URL because
another operation owns it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…by @github-actions)

The preview copy button now passes a rejection handler to the clipboard write: the error is logged, as the code block copy button does, and the icon stays as it was instead of leaving an unhandled rejection.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Kibana lists each path again under /s/{space_id}: the same call made in
a space. Longest-first put that variant on the main row with the space
prefix marked optional, which read as if the prefix were part of the
path. The spaceless path now leads and the space variant lists after
it, with nothing marked optional. A /s/{x}/… route that does not prefix
another route in the set is unaffected.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
An operation with a request example but no x-codeSamples got body-less
synthetic samples, so the example body had to render as a block of its
own under the carousel, with a second Request label, where a spec
sample would have carried it. The synthetic samples are now built
around the first request example's body: Console puts it under the
request line, curl sends it with -d and a Content-Type header, and the
samples attach to that example as spec samples do.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The API overview and the tag landing pages listed every path of each
operation, which doubled every Kibana row with its /s/{space_id}
variant. A row now shows the main path, with its optional segments
still marked; the operation page keeps the full list.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
showModal moves focus to the dialog's first control, the copy button,
and a focused control shows its tooltip, so every preview opened with
"Copy code" hanging over it. Focus now starts on the dialog itself; the
first Tab reaches the copy button as before.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Requesting changes because operation-collapse equivalence and collapsed-page moniker allocation still permit publishing incorrect operation pages in specific multi-operation edge cases.


What is this? | From workflow: PR Review

Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not.

Comment thread src/Elastic.ApiExplorer/Operations/OperationEndpoint.cs
Comment thread src/Elastic.ApiExplorer/Navigation/ApiNavigationBuilder.cs Outdated
reakaleek and others added 4 commits October 6, 2026 20:18
A merged page shows each path with its dominant method (POST also GET),
but its samples come from one of the merged operations and could use
another of the path's methods: GET /my-index-000001/_search under a
POST badge, on 136 samples across 47 Elasticsearch groups. Those
methods are interchangeable, so the sample now shows the dominant one.

The rewrite is anchored: a Console request line is a method at the
start of a line followed by its path, the same rule the highlighter
uses, so JSON bodies are never touched; curl only rewrites its -X or
--request flag, keyed on the sample's URL; a description's Run line
follows too, so generated samples agree with it. A sample whose method
the path does not list, or whose path is not one of the operation's,
and every client-library sample, stay as written.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…-0943e437

# Conflicts:
#	src/Elastic.ApiExplorer/OpenApiGenerator.cs
#	src/Elastic.Documentation.Site/Assets/main.ts
… it (per review by @github-actions)

The navigation builder's set of taken monikers is now mutable and gains each collapsed page's moniker as it is created, so a second group with the same base id falls back to its primary operation's id instead of rendering over the first group's page.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…se (per review by @github-actions)

The servers facet of the interchangeability signature now keys each server by its URL plus its variables (name, default, allowed values, order-independent), so two operations sharing a templated URL but constraining a variable differently keep separate pages.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Comment thread src/Elastic.ApiExplorer/Operations/OperationEndpoint.cs Outdated
Comment thread src/Elastic.ApiExplorer/Operations/OperationEndpoint.cs Outdated
reakaleek and others added 2 commits October 6, 2026 20:54
… by @github-actions)

HTTP header names are case-insensitive, so the response headers facet now keys each header by its lowercased name.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…by @github-actions)

Scopes within a security scheme are now sorted before they enter the signature, so [read, write] and [write, read] compare equal.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Requesting changes: there are correctness issues that can merge non-equivalent operations and omit expected generated curl samples in some valid input shapes.


What is this? | From workflow: PR Review

Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not.

Comment thread src/Elastic.ApiExplorer/Operations/GeneratedCodeSamples.cs
Comment thread src/Elastic.ApiExplorer/Operations/OperationEndpoint.cs
reakaleek and others added 2 commits October 6, 2026 21:25
…e (per review by @github-actions)

SchemaKey now records additionalProperties: a closed object, an open one, and a map of typed values key differently, so operations that differ only there keep separate pages.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
… (per review by @github-actions)

The host regex behind generated curl samples now accepts http(s)://host[:port] alongside $VAR and ${VAR} hosts, so a JSON-only example keeps its curl sample whichever form the spec uses.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved.


What is this? | From workflow: PR Review

Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not.

@reakaleek
reakaleek merged commit 98218cb into main Oct 6, 2026
37 checks passed
@reakaleek
reakaleek deleted the api-examples-redesign-0943e437 branch October 6, 2026 19:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

redesign Frontend visual or structural redesign

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant