Skip to content

Commit 1a5d2e0

Browse files
shahednassershahednasser
authored
docs: added documentation for command palette (#15066)
* docs: added documentation for command palette * fix links
1 parent 834553b commit 1a5d2e0

File tree

16 files changed

+302
-32
lines changed

16 files changed

+302
-32
lines changed

‎www/apps/cloud/app/billing/plans/page.mdx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { InlineIcon } from "docs-ui"
1+
import { InlineIcon, getOsShortcut, Kbd } from "docs-ui"
22
import { ChevronUpDown } from "@medusajs/icons"
33

44
export const metadata = {
@@ -28,6 +28,12 @@ When you change your organization's plan, the following will happen:
2828

2929
To change your organization's plan:
3030

31+
<Note title="Tip">
32+
33+
You can also navigate to plan management from the [command palette](../../command-palette/page.mdx). Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd>, then select **Upgrade Plan**.
34+
35+
</Note>
36+
3137
1. Make sure you're viewing the [correct organization's dashboard in Cloud](../../organizations/page.mdx#switch-organization).
3238
2. Click on the <InlineIcon Icon={ChevronUpDown} alt="switch organization" /> icon in the [organization switcher](../../organizations/page.mdx#switch-organization) at the top left of the Cloud dashboard.
3339
3. Choose "Organization Settings" from the dropdown.

‎www/apps/cloud/app/command-palette/page.mdx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import { getOsShortcut, Kbd, InlineIcon } from "docs-ui"
2+
import { ChevronRight } from "@medusajs/icons"
3+
4+
export const metadata = {
5+
title: `Command Palette`,
6+
}
7+
8+
# {metadata.title}
9+
10+
In this guide, you'll learn how to use the command palette in Cloud to quickly perform actions and navigate to pages.
11+
12+
## Open the Command Palette
13+
14+
Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd> to open the command palette from anywhere in the Cloud dashboard.
15+
16+
To close the palette, press <Kbd>Esc</Kbd> or click anywhere outside it.
17+
18+
---
19+
20+
## Navigate the Palette
21+
22+
Aside from clicking items with your mouse, you can navigate the command palette using your keyboard:
23+
24+
- <Kbd>↑</Kbd> / <Kbd>↓</Kbd>: Move between items.
25+
- <Kbd>↵</Kbd> (Enter): Select the highlighted item.
26+
- <Kbd>Esc</Kbd>: Close the palette.
27+
28+
---
29+
30+
## Available Commands
31+
32+
The command palette organizes its commands into three types: **Actions**, **Navigation**, and **Settings**.
33+
34+
### Actions
35+
36+
Actions let you perform tasks directly without navigating to a specific page first:
37+
38+
- [Upgrade Plan](../billing/plans/page.mdx#change-plan): Open the upgrade plan page to change your Cloud subscription.
39+
- [Create Project](../projects/page.mdx): Open the project creation flow.
40+
- [Add Sender Domain](../emails/page.mdx#add-email-sender-domain-to-cloud): Add a sender domain for outbound emails.
41+
- [Add Backend Custom Domain](../environments/custom-domains/page.mdx#backend-custom-domains): Add a custom domain for a project's backend.
42+
- [Add Storefront Custom Domain](../environments/custom-domains/page.mdx#storefront-custom-domains): Add a custom domain for a project's storefront.
43+
- [Edit Variables](../environments/environment-variables/page.mdx): Edit environment variables for a project.
44+
- [View Logs](../logs/page.mdx): View runtime logs for a project's environment.
45+
- [Create Environment](../environments/long-lived/page.mdx#create-a-long-lived-environment-on-cloud): Create a new environment for a project.
46+
- **Log Out**: Sign out of your Cloud account.
47+
48+
For the commands that perform actions on a specific project, such as **Edit Variables** or **View Logs**, you'll need to [select a project](#select-a-specific-project) after choosing the command.
49+
50+
### Navigation
51+
52+
Navigation items take you directly to a specific page in the Cloud dashboard:
53+
54+
- [Projects](../projects/page.mdx): Go to your organization's projects list.
55+
- [Project Overview](../projects/page.mdx): Go to a specific project's dashboard.
56+
- [Logs](../logs/page.mdx): Go to the runtime logs page for a specific project.
57+
- [Deployments](../deployments/page.mdx): Go to the deployments page for a specific project.
58+
- [Environment Overview](../environments/page.mdx): Go to the environment overview for a specific project.
59+
- [Custom Domains](../environments/custom-domains/page.mdx): Go to the custom domains settings for a specific project.
60+
- [Environment Variables](../environments/environment-variables/page.mdx): Go to the environment variables settings for a specific project.
61+
- [Storage](../s3/page.mdx): Go to [database](../database/page.mdx) and storage settings for a specific project.
62+
- [Project Settings](../projects/page.mdx): Go to the settings page for a specific project.
63+
- [Environment Settings](../environments/long-lived/page.mdx): Go to the settings page of a specific environment.
64+
65+
For the commands that navigate to a specific project, such as **Project Overview** or **Logs**, you'll need to [select a project](#select-a-specific-project) after choosing the command.
66+
67+
### Settings
68+
69+
Settings items take you to specific settings pages in the Cloud dashboard:
70+
71+
- [Organization Settings](../organizations/page.mdx): Go to your organization's settings page.
72+
- [Team Members](../organizations/page.mdx#invite-members-to-organization): Go to the team members settings of your organization.
73+
- [Usage](../usage/page.mdx): Go to the usage page for your organization to view your current usage and limits.
74+
- [Email Activity](../emails/page.mdx#monitor-email-sending-activity-on-cloud): Go to the email activity page to monitor your outbound email sending activity.
75+
- [Sender Domains](../emails/page.mdx#add-email-sender-domain-to-cloud): Go to the sender domains settings to manage your email sender domains.
76+
77+
---
78+
79+
## Select a Specific Project
80+
81+
Some commands require you to choose a project before continuing. These commands display a <InlineIcon Icon={ChevronRight} alt="arrow" /> icon on the right side.
82+
83+
When you select one of these commands, the palette switches to a project-picker view:
84+
85+
1. Open the command palette with <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd>.
86+
2. Select a command that shows a <InlineIcon Icon={ChevronRight} alt="arrow" /> icon, such as **Project Overview**.
87+
3. The palette displays a **"Select a project..."** search field and a list of your projects.
88+
4. Select a project from the list. You can search for a project by typing its name, and use <Kbd>↑</Kbd> / <Kbd>↓</Kbd> to move between projects.
89+
90+
The selected project's page opens immediately.
91+
92+
To go back to the main command list without selecting a project, click the badge (for example, the **Project Overview** badge) at the top of the palette.
93+
94+
---
95+
96+
## Search for a Project
97+
98+
You can type in the command palette's search bar to filter both commands and project names.
99+
100+
To search for a project and navigate to its dashboard:
101+
102+
1. Open the command palette with <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd>.
103+
2. Type the name of the project in the search bar.
104+
3. Select the matching project from the results.
105+
106+
This takes you directly to that project's dashboard.

‎www/apps/cloud/app/database/page.mdx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { getOsShortcut, Kbd } from "docs-ui"
2+
13
export const metadata = {
24
title: `Database`,
35
}
@@ -40,6 +42,12 @@ Medusa gives you read access to your Cloud project's database, which is useful w
4042

4143
To get the read-only connection string for an environment's database:
4244

45+
<Note title="Tip">
46+
47+
You can access the database settings from the [command palette](../command-palette/page.mdx). Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd>, then select **Storage**.
48+
49+
</Note>
50+
4351
1. From the [organization's dashboard](../organizations/page.mdx), click on the environment's project.
4452
2. In the project's dashboard, click on the name of the environment. For example, "Production".
4553
3. In the environment's dashboard, click on the "Settings" tab.
@@ -64,6 +72,12 @@ Medusa allows you to export and import database dumps for any environment on Clo
6472

6573
To import or export a database dump for an environment:
6674

75+
<Note title="Tip">
76+
77+
You can access the database settings from the [command palette](../command-palette/page.mdx). Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd>, then select **Storage**.
78+
79+
</Note>
80+
6781
1. From the [organization's dashboard](../organizations/page.mdx), click on the environment's project.
6882
2. In the project's dashboard, click on the name of the environment. For example, "Production".
6983
3. In the environment's dashboard, click on the "Settings" tab.

‎www/apps/cloud/app/deployments/page.mdx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Table, InlineIcon } from "docs-ui"
1+
import { Table, InlineIcon, getOsShortcut, Kbd } from "docs-ui"
22
import { EllipsisHorizontal } from "@medusajs/icons"
33

44
export const metadata = {
@@ -89,6 +89,12 @@ You can find the deployments for a project in its dashboard.
8989

9090
To find the deployments for a project:
9191

92+
<Note title="Tip">
93+
94+
You can also navigate to a project's deployments from the [command palette](../command-palette/page.mdx). Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd>, select **Deployments**, then choose a project.
95+
96+
</Note>
97+
9298
1. Make sure you're viewing the [correct organization's dashboard in Cloud](../organizations/page.mdx#switch-organization).
9399
2. Click on the project you want to view its deployments.
94100
3. Click on the "Deployments" tab in the project's dashboard.

‎www/apps/cloud/app/emails/page.mdx‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ keywords:
1111
- medusa emails
1212
---
1313

14-
import { CodeTabs, CodeTab, Prerequisites, InlineIcon } from "docs-ui"
14+
import { CodeTabs, CodeTab, Prerequisites, InlineIcon, getOsShortcut, Kbd } from "docs-ui"
1515
import { ChevronUpDown } from "@medusajs/icons"
1616

1717
export const metadata = {
@@ -95,13 +95,13 @@ module.exports = defineConfig({
9595

9696
In this setup, the Local Notification Module Provider is used for the `email` channel only in the development environment. In other environments, it uses the `feed` channel.
9797

98-
### (Optional) Verify Your Email Sender Domain
98+
### (Optional) Add Email Sender Domain to Cloud
9999

100100
By default, Medusa Emails sends emails using a randomly generated email address at the domain `medusajsemails.com`.
101101

102-
If you don't verify an email sender domain, you can only send emails to addresses of users in your Cloud organization.
102+
If you don't add an email sender domain, you can only send emails to addresses of users in your Cloud organization.
103103

104-
To send emails to external email addresses, [verify your email sender domain](#verify-email-sender-domain-on-cloud).
104+
To send emails to external email addresses, [add an email sender domain](#add-email-sender-domain-to-cloud).
105105

106106
---
107107

@@ -126,7 +126,7 @@ const myWorkflow = createWorkflow(
126126
"my-workflow",
127127
(input: Input) => {
128128
const data = sendNotificationsStep({
129-
// must either have a verified sender domain or use an email
129+
// must either have an added sender domain or use an email
130130
// address that belongs to your Cloud organization
131131
to: input.email,
132132
channel: "email",
@@ -152,7 +152,7 @@ const notificationModuleService = container.resolve(
152152
)
153153

154154
await notificationModuleService.createNotifications({
155-
// must either have a verified sender domain or use an email
155+
// must either have an added sender domain or use an email
156156
// address that belongs to your Cloud organization
157157
to: "user@example.com",
158158
channel: "email",
@@ -176,7 +176,7 @@ Refer to the [Set Up React Email Templates](./react-email/page.mdx) guide to lea
176176

177177
---
178178

179-
## Verify Email Sender Domain on Cloud
179+
## Add Email Sender Domain to Cloud
180180

181181
<Prerequisites
182182
items={[
@@ -192,9 +192,15 @@ Verified email sender domains are available for Launch, Scale, and Enterprise pl
192192

193193
</Note>
194194

195-
To send emails to external email addresses using Medusa Emails, you need to verify your email sender domain in your Cloud organization. You can verify multiple sender domains if needed.
195+
To send emails to external email addresses using Medusa Emails, you need to add an email sender domain in your Cloud organization. You can add multiple sender domains if needed.
196196

197-
To verify your email sender domain:
197+
To add your email sender domain:
198+
199+
<Note title="Tip">
200+
201+
You can also navigate to the sender domains form from the [command palette](../command-palette/page.mdx). Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd> and select **Add Sender Domain**.
202+
203+
</Note>
198204

199205
1. Make sure you're viewing the [correct organization's dashboard in Cloud](../organizations/page.mdx#switch-organization).
200206
2. Click on the <InlineIcon Icon={ChevronUpDown} alt="switch organization" /> icon in the [organization switcher](../organizations/page.mdx#switch-organization) at the top left of the Cloud dashboard.
@@ -205,7 +211,7 @@ To verify your email sender domain:
205211
4. Click Emails -> Sender Domains from the sidebar.
206212
5. Click the "Add sender domain" button.
207213
6. In the form that opens, perform these two steps:
208-
- **Domain**: Enter the domain you want to verify (for example, `yourdomain.com`).
214+
- **Domain**: Enter the domain you want to add (for example, `yourdomain.com`).
209215
- **DNS Records**: Add the provided DNS records to your domain's DNS settings. These records are necessary for verifying domain ownership and setting up email authentication.
210216
- If you're unsure how to add DNS records, refer to your domain registrar's documentation or support.
211217
7. Once you're done, click the "I've added the records" button.
@@ -216,7 +222,7 @@ The domain will then be added, and the system will periodically check the DNS re
216222

217223
### Specify From Email
218224

219-
After verifying your email sender domain, specify a `from` property in the notification to set the sender email address.
225+
After adding your email sender domain, specify a `from` property in the notification to set the sender email address.
220226

221227
For example:
222228

@@ -283,6 +289,12 @@ You can monitor email sending activity like sent emails, delivery rates, open ra
283289

284290
To view email sending activity:
285291

292+
<Note title="Tip">
293+
294+
You can also navigate to the sender domains form from the [command palette](../command-palette/page.mdx). Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd> and select **Sender Domains**.
295+
296+
</Note>
297+
286298
1. Make sure you're viewing the [correct organization's dashboard in Cloud](../organizations/page.mdx#switch-organization).
287299
2. Click on the <InlineIcon Icon={ChevronUpDown} alt="switch organization" /> icon in the [organization switcher](../organizations/page.mdx#switch-organization) at the top left of the Cloud dashboard.
288300
3. Choose "Organization Settings" from the dropdown.

‎www/apps/cloud/app/environments/environment-variables/page.mdx‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { InlineIcon } from "docs-ui"
1+
import { InlineIcon, getOsShortcut, Kbd } from "docs-ui"
22
import { EllipsisHorizontal } from "@medusajs/icons"
33

44
export const metadata = {
@@ -48,6 +48,12 @@ The following environment variable names are reserved by Cloud and you can't use
4848

4949
To add environment variables to an environment:
5050

51+
<Note title="Tip">
52+
53+
You can also navigate to an environment's variables from the [command palette](../../command-palette/page.mdx). Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd>, select **Edit Variables**, then choose a project.
54+
55+
</Note>
56+
5157
1. In the [environment's dashboard](../long-lived/page.mdx#open-environment-dashboard), click on the "Settings" tab.
5258
2. Choose the "Environment Variables" tab from the sidebar.
5359
3. If you deployed both the Medusa backend and storefront in the environment, use the toggle at the top to switch between managing the backend and storefront environment variables.
@@ -75,6 +81,12 @@ After adding the environment variables, you must [redeploy the environment](../l
7581

7682
To edit an environment variable:
7783

84+
<Note title="Tip">
85+
86+
You can also navigate to an environment's variables from the [command palette](../../command-palette/page.mdx). Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd>, select **Edit Variables**, then choose a project.
87+
88+
</Note>
89+
7890
1. In the [environment's dashboard](../long-lived/page.mdx#open-environment-dashboard), click on the "Settings" tab.
7991
2. Choose the "Environment Variables" tab from the sidebar.
8092
3. If you deployed both the Medusa backend and storefront in the environment, use the toggle at the top to switch between managing the backend and storefront environment variables.
@@ -101,6 +113,12 @@ After editing the environment variable, you must [redeploy the environment](../l
101113

102114
To delete an environment variable:
103115

116+
<Note title="Tip">
117+
118+
You can also navigate to an environment's variables from the [command palette](../../command-palette/page.mdx). Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd>, select **Edit Variables**, then choose a project.
119+
120+
</Note>
121+
104122
1. In the [environment's dashboard](../long-lived/page.mdx#open-environment-dashboard), click on the "Settings" tab.
105123
2. Choose the "Environment Variables" tab from the sidebar.
106124
3. If you deployed both the Medusa backend and storefront in the environment, use the toggle at the top to switch between managing the backend and storefront environment variables.
@@ -124,6 +142,12 @@ You can export an environment's variables as a `.env` file. This is useful for d
124142

125143
To export an environment's variables:
126144

145+
<Note title="Tip">
146+
147+
You can also navigate to an environment's variables from the [command palette](../../command-palette/page.mdx). Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd>, select **Edit Variables**, then choose a project.
148+
149+
</Note>
150+
127151
1. In the [environment's dashboard](../long-lived/page.mdx#open-environment-dashboard), click on the "Settings" tab.
128152
2. Choose the "Environment Variables" tab from the sidebar.
129153
3. If you deployed both the Medusa backend and storefront in the environment, use the toggle at the top to switch between managing the backend and storefront environment variables.

‎www/apps/cloud/app/environments/long-lived/page.mdx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { InlineIcon } from "docs-ui"
1+
import { InlineIcon, getOsShortcut, Kbd } from "docs-ui"
22
import { EllipsisHorizontal, ChevronUpDown } from "@medusajs/icons"
33

44
export const metadata = {
@@ -50,6 +50,12 @@ git push origin staging # push branch to remote
5050

5151
To create a long-lived environment:
5252

53+
<Note title="Tip">
54+
55+
You can also navigate to the environment creation form from the [command palette](../../command-palette/page.mdx). Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd>, select **Create Environment**, then choose a project.
56+
57+
</Note>
58+
5359
1. In the [project's dashboard](../../projects/page.mdx#open-project-dashboard), click on the "Add environment" button at the top right.
5460
2. In the side window that opens:
5561
- **Environment name**: Enter the name of the environment. For example, `Staging`.

‎www/apps/cloud/app/environments/page.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { getOsShortcut, Kbd } from "docs-ui"
2+
13
export const metadata = {
24
title: `Environments`,
35
}
@@ -29,6 +31,12 @@ There are two types of environments:
2931

3032
To view a project's environments:
3133

34+
<Note title="Tip">
35+
36+
You can also navigate to a project's overview page from the [command palette](../command-palette/page.mdx). Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd>, select **Project Overview**, then choose a project.
37+
38+
</Note>
39+
3240
1. Make sure you're viewing the [correct organization's dashboard in Cloud](../organizations/page.mdx#switch-organization).
3341
2. Click on the project whose environments you want to view.
3442

‎www/apps/cloud/app/logs/page.mdx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { InlineIcon } from "docs-ui"
1+
import { InlineIcon, getOsShortcut, Kbd } from "docs-ui"
22
import { ArrowDownTray, ArrowPath, Brackets } from "@medusajs/icons"
33

44
export const metadata = {
@@ -103,6 +103,12 @@ You can only view the runtime logs of an environment's live deployment, as older
103103

104104
To view the runtime logs for an environment's live deployment:
105105

106+
<Note title="Tip">
107+
108+
You can also navigate to an environment's runtime logs from the [command palette](../command-palette/page.mdx). Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>K</Kbd>, select **View Logs**, then choose a project.
109+
110+
</Note>
111+
106112
1. Make sure you're viewing the [correct organization's dashboard in Cloud](../organizations/page.mdx#switch-organization).
107113
2. Click on the project that the environment belongs to.
108114
3. Click on the environment, such as "Production".

0 commit comments

Comments
 (0)
⚡