Codespaces: Explain how to display the Remote Explorer (#29988)

* Initial draft commit

* Add more instances of the reusable

* Add reusable note box to new article added in another PR

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

@@ -27,7 +27,9 @@ To find the display name of a codespace:
 
   ![Screenshot of the Remote Explorer in VS Code](/assets/images/help/codespaces/codespaces-remote-explorer.png)
 
+{% indented_data_reference reusables.codespaces.remote-explorer spaces=2 %}
 - In a terminal window on your local machine, use this {% data variables.product.prodname_cli %} command: `gh codespace list`. 
+
 ### Permanent codespace names
 
 In addition to the display name, when you create a codespace, a permanent name is also assigned to the codespace. The name is a combination of your {% data variables.product.company_short %} handle, the repository name, and some random characters. For example: `octocat-myrepo-gmc7`. You can't change this name.

content/codespaces/troubleshooting/working-with-support-for-github-codespaces.md

@@ -32,7 +32,8 @@ The name the codespace is also included in many of the log files. For example, i
 Every codespace also has an ID (identifier). This is not shown by default in {% data variables.product.prodname_vscode %} so you may need to update the settings for the {% data variables.product.prodname_github_codespaces %} extension before you can access the ID.
 
 1. In {% data variables.product.prodname_vscode %}, browser or desktop, in the Activity Bar on the left, click **Remote Explorer** to show details for the codespace.
-2. If the sidebar includes a "Codespace Performance" section, hover over the "Codespace ID" and click the clipboard icon to copy the ID.
-3. If the information is not shown, click {% octicon "gear" aria-label="The gear icon" %}, in the bottom-left corner of the Activity Bar, to display the "Settings" tab.
-4. Expand **Extensions** and click **{% data variables.product.prodname_github_codespaces %}** to display the settings for the extension. Then enable **Show Performance Explorer** to display the "Codespace Performance" section in the sidebar.
+{% indented_data_reference reusables.codespaces.remote-explorer spaces=3 %}
+1. If the sidebar includes a "Codespace Performance" section, hover over the "Codespace ID" and click the clipboard icon to copy the ID.
+1. If the information is not shown, click {% octicon "gear" aria-label="The gear icon" %}, in the bottom-left corner of the Activity Bar, to display the "Settings" tab.
+1. Expand **Extensions** and click **{% data variables.product.prodname_github_codespaces %}** to display the settings for the extension. Then enable **Show Performance Explorer** to display the "Codespace Performance" section in the sidebar.
   ![Codespace ID and settings required to display performance information](/assets/images/help/codespaces/find-codespace-id.png)

data/reusables/codespaces/click-remote-explorer-icon-vscode.md

@@ -1,2 +1,5 @@
 1. In {% data variables.product.prodname_vscode_shortname %}, in the left sidebar, click the Remote Explorer icon.
+
    ![The Remote Explorer icon in {% data variables.product.prodname_vscode %}](/assets/images/help/codespaces/click-remote-explorer-icon-vscode.png)
+
+{% indented_data_reference reusables.codespaces.remote-explorer spaces=3 %}

data/reusables/codespaces/remote-explorer.md

@@ -0,0 +1,9 @@
+{% note %}
+
+**Note**: If the Remote Explorer is not displayed in the Activity Bar:
+
+1. Access the command palette. For example, by pressing <kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> (Mac) / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> (Windows/Linux).
+1. Type: `codespaces`.
+1. Click **Codespaces: Details**.
+
+{% endnote %}