docs(nx-cloud): add more information about setting up CI access tokens (#27883)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

More graphics for changing and viewing access tokens (both CI and
personal). Also update the CI access token page with more information on
how to set them and the purposes of read-only tokens.

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

---------

Co-authored-by: Isaac Mann <isaacplmann@users.noreply.github.com>

docs/nx-cloud/recipes/access-tokens.md

@@ -1,6 +1,8 @@
 # Nx CLI and CI Access Tokens
 
-The permissions and membership define what developers can access on nx.app but they don't affect what happens when you run Nx commands in CI. To manage that, you need to provision CI access tokens in Workspace settings / Manage CI access tokens.
+The permissions and membership define what developers can access on nx.app but they don't affect what happens when you run Nx commands in CI. To manage that, you need to provision CI access tokens in your workspace settings, under the `CI access tokens` tab.
+
+![CI Access Tokens Settings Page](/nx-cloud/recipes/ci-access-tokens-settings.avif)
 
 ## Access Types
 
@@ -15,7 +17,7 @@ There are currently two (2) types of CI Access Token for Nx Cloud's runner that
 
 ### Read Only Access
 
-The `read-only` access tokens will only read from the remote cache. Task results will not be stored in the remote cache for other machines or CI pipelines to use.
+The `read-only` access tokens will only read from the remote cache. New task results will not be stored in the remote cache, but cached results can be downloaded and replayed for other machines or CI pipelines to use. This option provides the benefit of remote cache hits while restricting machines without proper permissions from adding entries into the remote cache.
 
 ### Read & Write Access
 
@@ -23,9 +25,27 @@ The `read-write` access tokens allows task results to be stored in the remote ca
 
 ## Setting CI Access Tokens
 
-You can configure an access token in CI by setting the `NX_CLOUD_ACCESS_TOKEN` environment variable. `NX_CLOUD_ACCESS_TOKEN` takes precedence over any value in your `nx.json`.
+You can configure an access token in CI by setting the `NX_CLOUD_ACCESS_TOKEN` environment variable. `NX_CLOUD_ACCESS_TOKEN` takes precedence over any authentication method in your `nx.json`.
 
-We do not recommend that you commit an access token to your repository but older versions of Nx do support this and if you open your `nx.json`, you may see something like this:
+The following example shows how to set the `NX_CLOUD_ACCESS_TOKEN` environment variable in a GitHub Actions workflow. You will need to add the `secrets.NX_CLOUD_ACCESS_TOKEN` secret to your repository based on instructions provided by your CI provider.
+
+```yml {% fileName=".github/workflows/ci.yml" highlightLines=["29-32"] %}
+name: CI
+# ...
+env:
+  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    steps: ...
+```
+
+### Legacy methods of setting CI Access Tokens
+
+#### Using CI Access Tokens in nx.json
+
+We **do not recommend** that you commit an access token to your repository but older versions of Nx do support this and if you open your `nx.json`, you may see something like this:
 
 {% tabs %}
 {% tab label="Nx >= 17" %}
@@ -56,9 +76,9 @@ We do not recommend that you commit an access token to your repository but older
 {% /tabs %}
 
 {% callout type="warning" title="Nx Cloud authentication is changing" %}
-From Nx 19.7 new workspaces are connected to Nx Cloud with a property called `nxCloudId` instead, and we recommend developers use [`nx login`](/ci/reference/nx-cloud-cli#npx-nxcloud-login) to provision their own local [personal access tokens](/ci/recipes/security/personal-access-tokens).
+From Nx 19.7 new workspaces are connected to Nx Cloud with a property called `nxCloudId` instead, and we recommend developers use [`nx login`](/ci/reference/nx-cloud-cli#npx-nxcloud-login) to provision their own local [personal access tokens](/ci/recipes/security/personal-access-tokens) for user based authentication.
 {% /callout %}
 
-## Using `nx-cloud.env`
+#### Using `nx-cloud.env`
 
 You can set an environment variable locally via the `nx-cloud.env` file. Nx Cloud CLI will look in this file to load custom configuration like `NX_CLOUD_ACCESS_TOKEN`. These environment variables will take precedence over the configuration in `nx.json`.

docs/nx-cloud/recipes/personal-access-tokens.md

@@ -46,6 +46,22 @@ To utilize personal access tokens and Nx Cloud ID with Nx <= 19.6, the nx-cloud
 
 When you run [`npx nx login`](/ci/reference/nx-cloud-cli#npx-nxcloud-login) you will be directed to the Nx Cloud app where you will be required to create an account and login. A new personal access token will be provisioned and saved in a local configuration file in your home folder (the location of this will be displayed when login is complete and varies depending on OS).
 
+### View your Personal Access Tokens
+
+You can view your personal access tokens in the Nx Cloud app by navigating to your profile settings. Click your user icon in the top right corner of the app and select `Profile`.
+
+![Profile Settings](/nx-cloud/recipes/profile-page.avif)
+
+From there, click on the `Personal access tokens` tab.
+
+![Personal Access Tokens](/nx-cloud/recipes/personal-access-tokens-profile.avif)
+
+### Manually create a Personal Access Token
+
+Personal access tokens can also be manually created in the Nx Cloud app. Navigate to your profile settings and click on the `Personal access tokens` tab. Select `New access token`, enter a name for the token and click `Generate Token`. The token will be displayed on the screen and can be copied to your clipboard.
+
+You can then use [nx-cloud configure](/ci/reference/nx-cloud-cli#npx-nxcloud-configure) in your terminal to set the token in your local configuration file.
+
 ## Permissions
 
 There are two types of permissions that can be granted to users.