Add article on opening an existing codespace (github#30643)

Co-authored-by: hubwriter <[email protected]>

content/codespaces/customizing-your-codespace/setting-your-default-editor-for-github-codespaces.md

@@ -1,7 +1,7 @@
 ---
 title: Setting your default editor for GitHub Codespaces
 shortTitle: Set the default editor
-intro: 'You can set your default editor for {% data variables.product.prodname_codespaces %} in your personal settings page.'
+intro: '{% data reusables.codespaces.about-changing-default-editor %}'
 product: '{% data reusables.gated-features.codespaces %}'
 versions:
   fpt: '*'

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

@@ -150,4 +150,5 @@ For full details of the options for this command, see [the {% data variables.pro
 {% endcli %}
 
 ## Further reading
+- "[Opening an existing codespace](/codespaces/developing-in-codespaces/opening-an-existing-codespace)"
 - "[Adding an 'Open in GitHub Codespaces' badge](/codespaces/setting-up-your-project-for-codespaces/adding-a-codespaces-badge)"

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

@@ -24,9 +24,8 @@ There are costs associated with storing codespaces. You should therefore delete
 
 {% webui %}
 
-1. Navigate to the "Your Codespaces" page at [github.com/codespaces](https://github.com/codespaces).
-
-2. To the right of the codespace you want to delete, click {% octicon "kebab-horizontal" aria-label="The horizontal kebab icon" %}, then click **{% octicon "trash" aria-label="The trash icon" %} Delete**
+{% data reusables.codespaces.your-codespaces-procedure-step %}
+1. To the right of the codespace you want to delete, click {% octicon "kebab-horizontal" aria-label="The horizontal kebab icon" %}, then click **{% octicon "trash" aria-label="The trash icon" %} Delete**
 
    ![Delete button](/assets/images/help/codespaces/delete-codespace.png)
 

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

@@ -53,12 +53,4 @@ For more information on using {% data variables.product.prodname_vscode_shortnam
 
 ### Using the {% data variables.product.prodname_vscode_command_palette %}
 
-The {% data variables.product.prodname_vscode_command_palette %} allows you to access and manage many features for {% data variables.product.prodname_codespaces %} and {% data variables.product.prodname_vscode_shortname %}. For more information, see "[Using the {% data variables.product.prodname_vscode_command_palette_shortname %} in {% data variables.product.prodname_codespaces %}](/codespaces/codespaces-reference/using-the-vs-code-command-palette-in-codespaces)."
-
-## Navigating to an existing codespace
-
-1. {% data reusables.codespaces.you-can-see-all-your-codespaces %}
-2. Click the name of the codespace you want to develop in.
-  ![Name of codespace](/assets/images/help/codespaces/click-name-codespace.png)
-
-Alternatively, you can see any active codespaces for a repository by navigating to that repository and selecting **{% octicon "code" aria-label="The code icon" %} Code**. The drop-down menu will display all active codespaces for a repository.
+The {% data variables.product.prodname_vscode_command_palette %} allows you to access and manage many features for {% data variables.product.prodname_codespaces %} and {% data variables.product.prodname_vscode_shortname %}. For more information, see "[Using the {% data variables.product.prodname_vscode_command_palette_shortname %} in {% data variables.product.prodname_codespaces %}](/codespaces/codespaces-reference/using-the-vs-code-command-palette-in-codespaces)."

content/codespaces/developing-in-codespaces/index.md

@@ -9,8 +9,9 @@ topics:
   - Codespaces
 children:
   - /codespaces-lifecycle
-  - /creating-a-codespace
   - /developing-in-a-codespace
+  - /creating-a-codespace
+  - /opening-an-existing-codespace
   - /using-source-control-in-your-codespace
   - /using-github-codespaces-for-pull-requests
   - /stopping-and-starting-a-codespace

content/codespaces/developing-in-codespaces/opening-an-existing-codespace.md

@@ -0,0 +1,74 @@
+---
+title: Opening an existing codespace
+intro: 'You can reopen a codespace that you have closed or stopped and return to your work.'
+product: '{% data reusables.gated-features.codespaces %}'
+versions:
+  fpt: '*'
+  ghec: '*'
+type: how_to
+topics:
+  - Codespaces
+  - Fundamentals
+  - Developer
+shortTitle: Open an existing codespace
+---
+
+You can reopen any of your active or stopped codespaces on {% data variables.product.prodname_dotcom_the_website %}, in {% data variables.product.prodname_vscode %}, or by using {% data variables.product.prodname_cli %}. You can't reopen a codespace that has been deleted. For more information, see "[{% data variables.product.prodname_codespaces %} lifecycle](/codespaces/developing-in-codespaces/codespaces-lifecycle)."
+
+## Opening an existing codespace
+
+{% webui %}
+
+{% data reusables.codespaces.your-codespaces-procedure-step %}
+1. To open a codespace in your default editor, click the name of the codespace. {% data reusables.codespaces.about-changing-default-editor %} For more information, see "[Setting your default editor for {% data variables.product.prodname_github_codespaces %}](/codespaces/customizing-your-codespace/setting-your-default-editor-for-github-codespaces)."
+
+   To open the codespace in an editor other than your default, select the ellipsis (**...**) to the right of the codespace and click **Open in APPLICATION**.
+
+   ![Screenshot of the "Your codespaces" page, with "Open in Visual Studio Code" highlighted](/assets/images/help/codespaces/open-codespace-in-another-editor.png)
+
+{% endwebui %}
+
+{% vscode %}
+
+{% note %}
+
+**Note:** {% data reusables.codespaces.using-codespaces-in-vscode %} For more information, see "[Using {% data variables.product.prodname_github_codespaces %} in {% data variables.product.prodname_vscode %}](/codespaces/developing-in-codespaces/using-github-codespaces-in-visual-studio-code)."
+
+{% endnote %}
+
+1. In the {% data variables.product.prodname_vscode_shortname %} desktop application, open the Command Palette with <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> (Mac) or <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> (Windows/Linux).
+1. Type "Codespaces" and select one of the following commands.
+   - To open a codespace in a new window of {% data variables.product.prodname_vscode_shortname %}, select **Codespaces: Open Codespace in New Window**
+   - To open a codespace in the web editor, select **Codespaces: Open in Browser**
+1. Click the codespace that you want to open.
+
+   ![Screenshot of a list of codespaces in Visual Studio Code](/assets/images/help/codespaces/open-codespace-from-vscode.png)
+
+You can also access the commands listed above by navigating to the Remote Explorer view in {% data variables.product.prodname_vscode_shortname %} and right-clicking the codespace that you want to open.
+
+![Screenshot of a codespace selected in the Remote Explorer, with "Open in Browser" highlighted](/assets/images/help/codespaces/open-codespace-remote-explorer.png)
+
+{% data reusables.codespaces.remote-explorer %}
+{% endvscode %}
+
+{% cli %}
+
+1. In a terminal, enter one of the following {% data variables.product.prodname_cli %} commands.
+   - To open a codespace in {% data variables.product.prodname_vscode_shortname %}, enter:
+
+     ```shell{:copy}
+     gh codespace code
+     ```
+
+   - To open a codespace in the browser, enter:
+  
+     ```shell{:copy}
+     gh codespace code --web
+     ```
+
+1. Using the arrow keys, navigate to the codespace that you want to open.
+1. To open the codespace, press <kbd>Enter</kbd>.
+
+For more information, see [`gh codespace code`](https://cli.github.com/manual/gh_codespace_code) in the {% data variables.product.prodname_cli %} manual.
+
+{% endcli %}

content/codespaces/developing-in-codespaces/using-github-codespaces-in-visual-studio-code.md

@@ -21,7 +21,7 @@ shortTitle: Visual Studio Code
 
 ## About {% data variables.product.prodname_github_codespaces %} in {% data variables.product.prodname_vscode %}
 
-You can use your local install of {% data variables.product.prodname_vscode %} to create, manage, work in, and delete codespaces. To use {% data variables.product.prodname_github_codespaces %} in {% data variables.product.prodname_vscode_shortname %}, you need to install the {% data variables.product.prodname_codespaces %} extension. For more information on setting up Codespaces in {% data variables.product.prodname_vscode_shortname %}, see "[Prerequisites](#prerequisites)."
+You can use your local install of {% data variables.product.prodname_vscode %} to create, manage, work in, and delete codespaces. {% data reusables.codespaces.using-codespaces-in-vscode %} For more information on setting up {% data variables.product.prodname_github_codespaces %} in {% data variables.product.prodname_vscode_shortname %}, see "[Prerequisites](#prerequisites)."
 
 By default, if you create a new codespace on {% data variables.product.prodname_dotcom_the_website %}, it will open in the browser. If you would prefer to open any new codespaces in {% data variables.product.prodname_vscode_shortname %} automatically, you can set your default editor to be {% data variables.product.prodname_vscode_shortname %}. For more information, see "[Setting your default editor for {% data variables.product.prodname_github_codespaces %}](/codespaces/customizing-your-codespace/setting-your-default-editor-for-github-codespaces)."
 

content/codespaces/guides.md

@@ -22,6 +22,7 @@ includeGuides:
   - /codespaces/developing-in-codespaces/developing-in-a-codespace
   - /codespaces/developing-in-codespaces/deleting-a-codespace
   - /codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace
+  - /codespaces/developing-in-codespaces/opening-an-existing-codespace
   - /codespaces/developing-in-codespaces/stopping-and-starting-a-codespace
   - /codespaces/developing-in-codespaces/using-codespaces-in-visual-studio-code
   - /codespaces/developing-in-codespaces/using-codespaces-with-github-cli

content/codespaces/index.md

@@ -28,6 +28,7 @@ featuredLinks:
   guideCards:
     - /codespaces/getting-started/deep-dive
     - /codespaces/developing-in-codespaces/creating-a-codespace
+    - /codespaces/developing-in-codespaces/opening-an-existing-codespace
     - /codespaces/developing-in-codespaces/using-codespaces-in-visual-studio-code
     - /codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account
   popularHeading: Set up your project

content/codespaces/troubleshooting/exporting-changes-to-a-branch.md

@@ -19,10 +19,10 @@ This can be useful when you have hit a [spending limit](/billing/managing-billin
 
 To export your changes:
 
-1. Browse to the "Your Codespaces" page at [github.com/codespaces](https://github.com/codespaces) or, for an individual repository, click the **{% octicon "code" aria-label="The code icon" %} Code** menu.
-2. Click the ellipsis (**...**) to the right of the codespace you want to export from.
-3. Select **{% octicon "git-branch" aria-label="The git branch icon" %} Export changes to branch**.
+{% data reusables.codespaces.your-codespaces-procedure-step %} Or, for an individual repository, click the **{% octicon "code" aria-label="The code icon" %} Code** menu.
+1. Click the ellipsis (**...**) to the right of the codespace you want to export from.
+1. Select **{% octicon "git-branch" aria-label="The git branch icon" %} Export changes to branch**.
 
   ![Export changes to a branch](/assets/images/help/codespaces/export-changes-to-a-branch.png)
 
-4. From the popover, select **Create branch**.
+1. From the popover, select **Create branch**.

data/reusables/codespaces/about-changing-default-editor.md

@@ -0,0 +1 @@
+You can set your default editor for {% data variables.product.prodname_codespaces %} in your personal settings page.

data/reusables/codespaces/links-to-get-started.md

@@ -1 +1 @@
-To get started with {% data variables.product.prodname_codespaces %}, see "[Quickstart for {% data variables.product.prodname_github_codespaces %}](/codespaces/getting-started/quickstart)." To learn more about how {% data variables.product.prodname_codespaces %} works, see "[Deep dive into {% data variables.product.prodname_github_codespaces %}](/codespaces/getting-started/deep-dive)."
+To get started with {% data variables.product.prodname_codespaces %}, see "[Quickstart for {% data variables.product.prodname_github_codespaces %}](/codespaces/getting-started/quickstart)." For more information on creating or reopening a codespace, see "[Creating a codespace](/codespaces/developing-in-codespaces/creating-a-codespace)" and "[Opening an existing codespace](/codespaces/developing-in-codespaces/opening-an-existing-codespace)." To learn more about how {% data variables.product.prodname_codespaces %} works, see "[Deep dive into {% data variables.product.prodname_github_codespaces %}](/codespaces/getting-started/deep-dive)."

data/reusables/codespaces/using-codespaces-in-vscode.md

@@ -0,0 +1 @@
+To use {% data variables.product.prodname_github_codespaces %} in {% data variables.product.prodname_vscode_shortname %}, you need to install the {% data variables.product.prodname_codespaces %} extension.

data/reusables/codespaces/your-codespaces-procedure-step.md

@@ -1,3 +1 @@
-1. In the top right corner of {% ifversion fpt or ghec %}{% data variables.product.prodname_dotcom_the_website %}{% else %}{% data variables.product.product_name %}{% endif %}, click your profile photo, then click **Your codespaces**.
-
-  !['Your codespaces' menu option](/assets/images/help/codespaces/your-codespaces-option.png)
+1. Navigate to the "Your codespaces" page at [github.com/codespaces](https://github.com/codespaces).