[Wrangler] Migrate a few commands to component + add optional description input (#24804)

* [Wrangler] Migrate a few commands to component

* re-add init

* remove the vectorize page since we're not replacing yet

Author: kodster28

src/components/WranglerCommand.astro

@@ -29,10 +29,11 @@ function getCommand(path: string) {
 
 const props = z.object({
 	command: z.string(),
-	headingLevel: z.number().default(2)
+	headingLevel: z.number().default(2),
+	description: z.string().optional(),
 });
 
-let { command, headingLevel } = props.parse(Astro.props);
+let { command, headingLevel, description } = props.parse(Astro.props);
 
 const definition = getCommand(command);
 
@@ -45,11 +46,12 @@ const { globalFlags } = experimental_getWranglerCommands();
 const positionals = definition.positionalArgs
 	?.map((p) => `[${p.toUpperCase()}]`)
 	.join(" ");
-
 ---
 
 <AnchorHeading depth={headingLevel} title={command} />
 
+<p>{description ? description : definition.metadata.description}</p>
+
 <PackageManagers
 	pkg="wrangler"
 	type="exec"

src/content/docs/style-guide/components/wrangler-command.mdx

@@ -31,4 +31,6 @@ import { WranglerCommand } from "~/components";
 - `command` <Type text="string" /> <MetaInfo text="required" />
   - The name of the command, i.e `d1 execute`.
 - `headingLevel` <Type text="boolean" /> <MetaInfo text="(default: 2) optional" />
-  - The heading level that the command name should be added at on the page, i.e `2` for a `h2`.
+  - The heading level that the command name should be added at on the page, i.e `2` for a `h2`.
+- `description` <Type text="string" /> <MetaInfo text="optional" />
+	- A description to render below the command heading. If not set, defaults to the value specified in the Wrangler help API.

src/content/docs/workers/wrangler/commands.mdx

@@ -14,6 +14,7 @@ import {
 	Type,
 	MetaInfo,
 	WranglerConfig,
+	WranglerCommand,
 	WranglerNamespace,
 	PackageManagers,
 } from "~/components";
@@ -99,18 +100,9 @@ You can then run them using your package manager of choice:
 
 ---
 
-## `docs`
+<WranglerCommand command="docs" description="Open the Cloudflare developer documentation in your default browser." />
 
-Open the Cloudflare developer documentation in your default browser.
-
-```txt
-wrangler docs [<COMMAND>]
-```
-
-- `COMMAND` <Type text="string" /> <MetaInfo text="optional" />
-  - The Wrangler command you want to learn more about. This opens your default browser to the section of the documentation that describes the command.
-
-<Render file="wrangler-commands/global-flags" product="workers" />
+---
 
 ## `init`
 
@@ -898,34 +890,7 @@ wrangler workflows trigger <WORKFLOW_NAME> <PARAMS> [OPTIONS]
 wrangler workflows trigger my-workflow '{"hello":"world"}'
 ```
 
-## `tail`
-
-Start a session to livestream logs from a deployed Worker.
-
-```txt
-wrangler tail <WORKER> [OPTIONS]
-```
-
-- `WORKER` <Type text="string" /> <MetaInfo text="required" />
-  - The name of your Worker or the route the Worker is running on.
-- `--format` <Type text="'json'|'pretty'" /> <MetaInfo text="optional" />
-  - The format of the log entries.
-- `--status` <Type text="'ok'|'error'|'canceled'" /> <MetaInfo text="optional" />
-  - Filter by invocation status.
-- `--header` <Type text="string" /> <MetaInfo text="optional" />
-  - Filter by HTTP header.
-- `--method` <Type text="string" /> <MetaInfo text="optional" />
-  - Filter by HTTP method.
-- `--sampling-rate` <Type text="number" /> <MetaInfo text="optional" />
-  - Add a fraction of requests to log sampling rate (between `0` and `1`).
-- `--search` <Type text="string" /> <MetaInfo text="optional" />
-  - Filter by a text match in `console.log` messages.
-- `--ip` <Type text="(string|'self')\[]" />" <MetaInfo text="optional" />
-  - Filter by the IP address the request originates from. Use `"self"` to show only messages from your own IP.
-- `--version-id` <Type text="string" /> <MetaInfo text="optional" />
-  - Filter by Worker version.
-
-<Render file="wrangler-commands/global-flags" product="workers" />
+<WranglerCommand command="tail" />
 
 After starting `wrangler tail`, you will receive a live feed of console and exception logs for each request your Worker receives.
 
@@ -1299,15 +1264,7 @@ If you are using `CLOUDFLARE_API_TOKEN` instead of OAuth, and you can logout by
 
 ---
 
-## `whoami`
-
-Retrieve your user information and test your authentication configuration.
-
-```txt
-wrangler whoami
-```
-
-<Render file="wrangler-commands/global-flags" product="workers" />
+<WranglerCommand command="whoami" />
 
 ---
 

src/content/partials/workers/wrangler-commands/kv.mdx

@@ -62,8 +62,4 @@ Since version 3.60.0, Wrangler supports the `kv ...` syntax. If you are using ve
 
 <WranglerCommand command="kv bulk put" />
 
-<WranglerCommand command="kv bulk delete" />
-
-## Global flags
-
-<Render file="wrangler-commands/global-flags" product="workers" />
+<WranglerCommand command="kv bulk delete" />