Add Command Palette guide for Codespaces (github#19756)

* adding command palette guide

* finishing command palette guide

* copy editing

* adding and updating reusables

* adding correct reusable name

* minor fixes

* minor fixes

* Apply suggestions from code review

Co-authored-by: Allison Weins <[email protected]>
Co-authored-by: Lucas Costi <[email protected]>

* updating images and alt text

Co-authored-by: Allison Weins <[email protected]>
Co-authored-by: Lucas Costi <[email protected]>

Author: 3 people

assets/images/help/codespaces/add-prebuilt-container-command.png

@@ -7,5 +7,6 @@ children:
   - /about-billing-for-codespaces
   - /troubleshooting-your-codespace
   - /allowing-your-codespace-to-access-a-private-image-registry
+  - /using-the-command-palette-in-codespaces
 ---
 {% data reusables.codespaces.release-stage %}

assets/images/help/codespaces/codespaces-commad-palette.png

@@ -0,0 +1,64 @@
+---
+title: Using the Command Palette in Codespaces
+intro: 'You can use the Command Palette feature of {% data variables.product.prodname_vscode %} to access many commands in Codespaces.'
+versions:
+  free-pro-team: '*'
+type: reference  
+topics:
+  - Codespaces
+  - Visual Studio Code
+---
+
+{% data reusables.codespaces.release-stage %}
+
+### About the Command Palette
+
+The Command Palette is one of the focal features of {% data variables.product.prodname_vscode %} and is available for you to use in Codespaces. The Command Palette allows you to access many commands for {% data variables.product.prodname_codespaces %} and {% data variables.product.prodname_vscode %}. For more information on using the Command Palette, see "[User Interface](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette)" in the Visual Studio Code documentation.
+
+### Accessing the Command Palette
+
+You can access the Command Palette in a number of ways.
+
+- `Shift + Command + P` (Mac) / `Ctrl + Shift + P` (Windows).
+
+  Note that this command is a reserved keyboard shortcut in Firefox.
+- `F1`
+- From the Application Menu, click **View > Command Palette…**.
+
+  ![The application menu](/assets/images/help/codespaces/codespaces-view-menu.png)
+
+### Commands for {% data variables.product.prodname_github_codespaces %}
+
+To see all commands related to {% data variables.product.prodname_github_codespaces %} access the Command Palette, then start typing "Codespaces".
+
+![A list of all commands that relate to Codespaces](/assets/images/help/codespaces/codespaces-commad-palette.png)
+
+#### Suspending or stopping a codespace
+
+If you add a new secret, you'll have to stop and restart the codespace for it to apply your changes. 
+
+To suspend or stop your codespace's container, access the Command Palette, then start typing "stop". Select **Codespaces: Stop Current Codespace**.
+
+![Command to stop a codespace](/assets/images/help/codespaces/codespaces-stop.png)
+
+#### Adding a dev container from a template
+
+To add a dev container from a template, access the Command Palette, then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**
+
+![Command to add a dev container](/assets/images/help/codespaces/add-prebuilt-container-command.png)
+
+#### Rebuilding a codespace
+
+If you add a dev container or edit any of the configuration files (`devcontainer.json` and `Dockerfile`), you'll have to rebuild your codespace for it to apply your changes. 
+
+To rebuild your container, access the Command Palette, then start typing "rebuild". Select **Codespaces: Rebuild Container**.
+
+![Command to rebuild a codespace](/assets/images/help/codespaces/codespaces-rebuild.png)
+
+#### Codespaces logs
+
+You can use the Command Palette to access the codespace creation logs, or you can use it export all logs. 
+
+To retrieve the logs for Codespaces, access the Command Palette, then start typing "log". Select **Codespaces: Export Logs** to export all logs related to Codespaces or select **Codespaces: View Creation Logs** to view logs related to the setup.
+
+![Command to access logs](/assets/images/help/codespaces/codespaces-logs.png)

assets/images/help/codespaces/codespaces-logs.png

@@ -47,6 +47,10 @@ For more information on using {% data variables.product.prodname_vscode %}, see
 
 {% data reusables.codespaces.committing-link-to-procedure %} 
 
+#### Using the Command Palette
+
+The Command Palette allows you to access and manage many features for {% data variables.product.prodname_codespaces %} and {% data variables.product.prodname_vscode %}. For more information, see "[Using the Command Palette in {% data variables.product.prodname_codespaces %}](/codespaces/codespaces-reference/using-the-command-palette-in-codespaces)."
+
 ### Navigating to an existing codespace
 
 1. {% data reusables.codespaces.you-can-see-all-your-codespaces %}

assets/images/help/codespaces/codespaces-stop.png

@@ -44,16 +44,14 @@ To set up your project with a custom container, you will need to use a `devconta
 ](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
 
 
-1. Access the command palette (`shift command P` / `shift control P`), then start typing "dev container". Click **Codespaces: Add Development Container Configuration Files...**
-  !["Codespaces: Add Development Container Configuration Files..." in the command palette](/assets/images/help/codespaces/add-prebuilt-container-command.png)
+{% data reusables.codespaces.command-palette-container %}
 2. For this example, click **C# (.NET)**. If you need additional features you can select any container that’s specific to C# (.NET) or a combination of tools such as C# (.NET) and MS SQL.
   ![Select C# (.NET) option from the list](/assets/images/help/codespaces/add-dotnet-prebuilt-container.png)
 3. Click the recommended version of .NET.
   ![.NET version selection](/assets/images/help/codespaces/add-dotnet-version.png)
 4. Accept the default option to add Node.js to your customization.
   ![Add Node.js selection](/assets/images/help/codespaces/dotnet-options.png)
-5. To rebuild your container, access the command palette (`shift command P` / `shift control P`), then start typing "rebuild". Click **Codespaces: Rebuild Container**. 
-  ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+{% data reusables.codespaces.rebuild-command %}
 
 #### Anatomy of your dev container
 
@@ -190,9 +188,7 @@ With your dev container added and a basic understanding of what everything does,
   "postCreateCommand": "dotnet restore",
   ```
 
-4. To rebuild your container and apply the devcontainer.json changes, access the command palette (`shift command P` / `shift control P`), then start typing "rebuild". Click **Codespaces: Rebuild Container**. 
-
-  ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+{% data reusables.codespaces.rebuild-command %}
 
   Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
 

assets/images/help/codespaces/codespaces-view-menu.png

@@ -42,14 +42,12 @@ The default codespaces container comes with the latest Java version, package man
 To set up your project with a custom container, you will need to use a `devcontainer.json` file to define the environment. In {% data variables.product.prodname_codespaces %} you can add this either from a template or you can create your own. For more information on dev containers, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
 
 
-1. Access the command palette (`shift command P` / `shift control P`), then start typing "dev container". Click **Codespaces: Add Development Container Configuration Files...**
-  !["Codespaces: Add Development Container Configuration Files..." in the command palette](/assets/images/help/codespaces/add-prebuilt-container-command.png)
+{% data reusables.codespaces.command-palette-container %}
 3. For this example, click **Java**. In practice, you could select any container that’s specific to Java or a combination of tools such as Java and Azure Functions.
   ![Select Java option from the list](/assets/images/help/codespaces/add-java-prebuilt-container.png)
 4. Click the recommended version of Java.
   ![Java version selection](/assets/images/help/codespaces/add-java-version.png)
-5. To rebuild your container, access the command palette (`shift command P` / `shift control P`), then start typing "rebuild". Click **Codespaces: Rebuild Container**. 
-  ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+{% data reusables.codespaces.rebuild-command %}
 
 #### Anatomy of your dev container
 
@@ -163,9 +161,7 @@ With your dev container added and a basic understanding of what everything does,
 
   For more information on `devcontainer.json` properties, see the [devcontainer.json reference](https://code.visualstudio.com/docs/remote/devcontainerjson-reference) on the Visual Studio Code docs.
 
-3. To rebuild your container, access the command palette (`shift command P` / `shift control P`), then start typing "rebuild". Click **Codespaces: Rebuild Container**. 
-
-  ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+{% data reusables.codespaces.rebuild-command %}
 
   Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
 

content/codespaces/codespaces-reference/index.md

@@ -44,14 +44,12 @@ The default codespaces container will support running Node.js projects like [vsc
 
 To set up your project with a custom container, you will need to use a `devcontainer.json` file to define the environment. In {% data variables.product.prodname_codespaces %} you can add this either from a template or you can create your own. For more information on dev containers, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)". 
 
-1. Access the command palette (`shift command P` / `shift control P`), then start typing "dev container". Click **Codespaces: Add Development Container Configuration Files...**
-  !["Codespaces: Add Development Container Configuration Files..." in the command palette](/assets/images/help/codespaces/add-prebuilt-container-command.png)
+{% data reusables.codespaces.command-palette-container %}
 3. For this example, click **Node.js**.  If you need additional features you can select any container that’s specific to Node or a combination of tools such as Node and MongoDB.
   ![Select Node option from the list](/assets/images/help/codespaces/add-node-prebuilt-container.png)
 4. Click the recommended version of Node.js.
   ![Node.js version selection](/assets/images/help/codespaces/add-node-version.png)
-5. To rebuild your container, access the command palette (`shift command P` / `shift control P`), then start typing "rebuild". Click **Codespaces: Rebuild Container**. 
-  ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+{% data reusables.codespaces.rebuild-command %}
 
 #### Anatomy of your dev container
 
@@ -147,9 +145,7 @@ With your dev container added and a basic understanding of what everything does,
 
   For more information on `devcontainer.json` properties, see the [devcontainer.json reference](https://code.visualstudio.com/docs/remote/devcontainerjson-reference) in the {% data variables.product.prodname_vscode %} docs.
 
-3. To rebuild your container, access the command palette (`shift command P` / `shift control P`), then start typing "rebuild". Click **Codespaces: Rebuild Container**. 
-
-  ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+{% data reusables.codespaces.rebuild-command %}
 
   Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
 

content/codespaces/codespaces-reference/using-the-command-palette-in-codespaces.md

@@ -45,16 +45,14 @@ The default codespaces container comes with the latest Python version, package m
 To set up your project with a custom container, you will need to use a `devcontainer.json` file to define the environment. In {% data variables.product.prodname_codespaces %} you can add this either from a template or you can create your own. For more information on dev containers, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)." 
 
 
-1. Access the command palette (`shift command P` / `shift control P`), then start typing "dev container". Click **Codespaces: Add Development Container Configuration Files...**
-  !["Codespaces: Add Development Container Configuration Files..." in the command palette](/assets/images/help/codespaces/add-prebuilt-container-command.png)
+{% data reusables.codespaces.command-palette-container %}
 2. For this example, click **Python 3**. If you need additional features you can select any container that’s specific to Python or a combination of tools such as Python 3 and PostgresSQL.
   ![Select Python option from the list](/assets/images/help/codespaces/add-python-prebuilt-container.png)
 3. Click the recommended version of Python.
   ![Python version selection](/assets/images/help/codespaces/add-python-version.png)
 4. Accept the default option to add Node.js to your customization.
   ![Add Node.js selection](/assets/images/help/codespaces/add-nodejs-selection.png)
-5. To rebuild your container, access the command palette (`shift command P` / `shift control P`), then start typing "rebuild". Click **Codespaces: Rebuild Container**. 
-  ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+{% data reusables.codespaces.rebuild-command %}
 
 #### Anatomy of your dev container
 
@@ -180,9 +178,7 @@ With your dev container added and a basic understanding of what everything does,
   "postCreateCommand": "pip3 install --user -r requirements.txt",
   ```
 
-4. To rebuild your container and apply the devcontainer.json changes, access the command palette (`shift command P` / `shift control P`), then start typing "rebuild". Click **Codespaces: Rebuild Container**. 
-
-  ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+{% data reusables.codespaces.rebuild-command %}
 
   Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
 

content/codespaces/developing-in-codespaces/developing-in-a-codespace.md

@@ -77,8 +77,7 @@ Predefined container definitions include a common configuration for a particular
 
 Using a predefined configuration is a great idea if you need some additional extensibility. You can also start with a predefined configuration and amend it as needed for your project's setup. 
 
-1. To access the command palette, in the upper-left corner, select the Application Menu and click **Command Palette…** from the **View** menu, then start typing "Codespaces: Add Development Container Configuration Files...". Click **Codespaces: Add Development Container Configuration Files...**
-  !["Codespaces: Add Development Container Configuration Files..." in the command palette](/assets/images/help/codespaces/add-prebuilt-container-command.png)
+{% data reusables.codespaces.command-palette-container %}
 1. Click the definition you want to use.
   ![List of predefined container definitions](/assets/images/help/codespaces/predefined-container-definitions-list.png)
 1. Follow the prompts to customize your definition.
@@ -137,10 +136,9 @@ For more information about the available settings for `devcontainer.json`, see [
 
 {% data reusables.codespaces.apply-devcontainer-changes %}
 
-1. {% data reusables.codespaces.rebuild-command %}
-  !["Codespaces: Rebuild Container" in the command palette](/assets/images/help/codespaces/rebuild-container-command.png)
+{% data reusables.codespaces.rebuild-command %}
 1. {% data reusables.codespaces.recovery-mode %} Fix the errors in the configuration.
   ![Error message about recovery mode](/assets/images/help/codespaces/recovery-mode-error-message.png)
    - To diagnose the error by reviewing the creation logs, click **View creation log**.
    - To fix the errors identified in the logs, update your `devcontainer.json` file.
-   - To apply the changes, rebuild your container. {% data reusables.codespaces.rebuild-command %}
+   - To apply the changes, rebuild your container. 

content/codespaces/getting-started-with-codespaces/getting-started-with-your-dotnet-project.md

@@ -0,0 +1,3 @@
+1. Access the Command Palette (`Shift + Command + P` / `Ctrl + Shift + P`), then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**.
+
+   !["Codespaces: Add Development Container Configuration Files..." in the command palette](/assets/images/help/codespaces/add-prebuilt-container-command.png)

content/codespaces/getting-started-with-codespaces/getting-started-with-your-java-project-in-codespaces.md

@@ -1 +1,3 @@
-Access the command palette (`shift command P` / `shift control P`), then start typing "Codespaces: Rebuild Container". Click **Codespaces: Rebuild Container**. 
+1. Access the command palette (`Shift + Command + P`/ `Ctrl + Shift + P`), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
+
+    ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)

content/codespaces/getting-started-with-codespaces/getting-started-with-your-nodejs-project-in-codespaces.md

@@ -1 +1 @@
-Once you have created a secret, it will be available when you create a new codespace or restart the codespace. To use a secret that you've just created in a current codespace, you will need to suspend the codespace and resume it.
+Once you have created a secret, it will be available when you create a new codespace or restart the codespace. To use a secret that you've just created in a current codespace, you will need to stop the codespace and resume it. For information about stopping the codespace, see "[Using the Command Palette in {% data variables.product.prodname_codespaces %}](/codespaces/codespaces-reference/using-the-command-palette-in-codespaces#suspending-or-stopping-a-codespace)."