Add pickers for rule creation with control API and CLI examples by owenpearson · Pull Request #3285 · ably/docs

owenpearson · 2026-03-19T11:40:58Z

AIT-375

Adds pickers for channel/integration rule creation examples so that where applicable, users can choose between:

Using the website dashboard UI (all the existing examples were doing this)
Using the Control REST API
Using the Ably CLI

The UI looks like this:

Some possible future enhancements which I haven't implemented here could be to:

Persist users choice in the browser.
Add icons for each option.
Add examples using terraform or other options (e.g. ably-control-go)

coderabbitai · 2026-03-19T11:41:12Z

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 82605437-2d9f-4b4a-8dff-a47f29b6c03a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch rule-creation-example-pickers

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

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

matt423 · 2026-03-23T17:20:23Z

src/components/Layout/mdx/MethodPicker.tsx

+  children: ReactNode;
+}
+
+export const MethodPicker: React.FC<MethodPickerProps> = ({ children }) => {


[nitpick] Could probably benefit from unit tests for this

good shout, i've added a few now 👍

matt423 · 2026-03-23T17:22:16Z

src/components/Layout/mdx/MethodPicker.tsx

+      <div className="my-5">
+        <div className="flex gap-1 border-b border-neutral-300 dark:border-neutral-800 mb-5">
+          {methods.map((method) => (
+            <button


[nitpick] Could add aria attributes role="tab" and aria-selected

also a good idea - i've added some accessibility attributes now

matt423 · 2026-03-23T17:29:06Z

src/pages/docs/livesync/mongodb/index.mdx

+
+Refer to the [Control API reference](/docs/api/control-api) for a full list of available parameters.
+
+</Method>


[nitpick] Noticed in a few that we don't always have a CLI method. Due to lack of CLI support or something else?

yeah the CLI doesn't support a few of the rule types. tbh I wanted to avoid opening a can of worms with this work but I'll make an issue on the CLI repo so that we fix this properly in future by adding support for them in the CLI

matt423 · 2026-03-23T17:30:10Z

src/components/Layout/mdx/MethodPicker.tsx

+    }
+  });
+
+  const [activeMethod, setActiveMethod] = useState(methods[0] ?? 'dashboard');


[nitpick] Did you consider saving the user choice of method? Like we do for languages?

I did consider it, but i decided to leave it for a future enhancement :)

m-hulbert

This is a cool little feature, Owen! Just a few comments:

I think we should name this Tabs and Tab rather than use 'Method'. This is to avoid confusion from LLMs, but also means it's more widely usable.
I think we might need to bound this somewhat, so it's obvious where the tab ends and the copy continues.
Channel rule --> Rule throughout please.

m-hulbert · 2026-03-24T16:45:45Z

src/pages/docs/channels/index.mdx

+```
+</Code>
+
+Refer to the [Control API reference](/docs/api/control-api) for a full list of available parameters.


I don't think we need to link to this for every command considering we already link out to the docs on the Control API. If it's important enough to include then we should make the path a link to the reference for itself.

thanks, all good feedback. i've addressed all the above now 👍

m-hulbert · 2026-03-24T16:53:19Z

src/components/Layout/mdx/MethodPicker.tsx

+
+const MethodContext = createContext<MethodContextType | undefined>(undefined);
+
+const METHOD_LABELS: Record<string, string> = {


Ah missed this - I also don't think we should be hardcoding this. At the end of the day it's a label on a tab, so this should just take whatever value is defined by the author to make this a flexible component.

yeah good point, it's generic now 👍

matt423 · 2026-03-26T12:38:44Z

@owenpearson Will re-review changes shortly but just an FYI yarn lint is failing in the meantime

owenpearson requested review from m-hulbert and matt423 March 19, 2026 11:40

mschristensen added the review-app Create a Heroku review app label Mar 19, 2026

ably-ci temporarily deployed to ably-docs-rule-creation-3srjl1 March 19, 2026 12:18 Inactive

matt423 reviewed Mar 23, 2026

View reviewed changes

m-hulbert added review-app Create a Heroku review app and removed review-app Create a Heroku review app labels Mar 24, 2026

ably-ci had a problem deploying to ably-docs-rule-creation-bpicwr March 24, 2026 16:40 Failure

m-hulbert reviewed Mar 24, 2026

View reviewed changes

matt423 deployed to ably-docs-rule-creation-bpicwr March 24, 2026 16:49 View deployment

m-hulbert reviewed Mar 24, 2026

View reviewed changes

owenpearson force-pushed the rule-creation-example-pickers branch from 14f6fdd to be09949 Compare March 25, 2026 21:47

ably-ci temporarily deployed to ably-docs-rule-creation-bpicwr March 25, 2026 21:48 Inactive

ably-ci temporarily deployed to ably-docs-rule-creation-pchjly March 25, 2026 21:48 Inactive

owenpearson force-pushed the rule-creation-example-pickers branch from be09949 to 357bdc5 Compare March 25, 2026 22:00

ably-ci temporarily deployed to ably-docs-rule-creation-pchjly March 25, 2026 22:00 Inactive

owenpearson requested review from m-hulbert and matt423 March 25, 2026 22:01

add pickers for rule creation with control API and CLI examples

34ed5bb

owenpearson force-pushed the rule-creation-example-pickers branch from 357bdc5 to 34ed5bb Compare March 26, 2026 12:46

ably-ci deployed to ably-docs-rule-creation-pchjly March 26, 2026 12:46 View deployment


		Refer to the [Control API reference](/docs/api/control-api) for a full list of available parameters.

		</Method>


		const MethodContext = createContext<MethodContextType \| undefined>(undefined);

		const METHOD_LABELS: Record<string, string> = {

Conversation

owenpearson commented Mar 19, 2026 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

m-hulbert left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

m-hulbert Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

matt423 commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

5 participants

owenpearson commented Mar 19, 2026 •

edited by atlassian bot

Loading

coderabbitai bot commented Mar 19, 2026 •

edited

Loading

m-hulbert Mar 24, 2026 •

edited

Loading