diff --git a/website/docs/how-to/how-to-create-and-assign-custom-project-roles.md b/website/docs/how-to/how-to-create-and-assign-custom-project-roles.md index b179c5b4b6..865ff00d4f 100644 --- a/website/docs/how-to/how-to-create-and-assign-custom-project-roles.md +++ b/website/docs/how-to/how-to-create-and-assign-custom-project-roles.md @@ -12,15 +12,23 @@ This guide takes you through [how to create](#creating-custom-project-roles "how To create custom project roles: 1. Navigate to the custom project roles page by using the admin menu (the gear symbol) and navigating to users. -2. Navigate to the "roles" tab. + ![A visual representation of the current step: the Unleash Admin UI with the steps highlighted.](/img/create-cpr-step-1.png) +2. Navigate to the "project roles" tab. + ![The admin/roles screen, with the project roles tab highlighted. The page shows a table of project roles with their descriptions.](/img/create-cpr-step-2.png) 3. Use the "new project role" button to open the role creation form. + ![The visual position of the 'new project role' button on the page.](/img/create-cpr-step-3.png) 4. Give the role a name, an optional description, and the set of permissions you'd like it to have. For a full overview of all the options, consult the [custom project roles reference documentation](../user_guide/rbac.md#custom-project-roles). + ![The project role creation form filled in with details for a "developer" role. To the left is the equivalent cURL command you could run if you wanted to use the API instead of the form.](/img/create-cpr-step-4.png) ## Assigning custom project roles To assign a custom project role to a user: 1. Navigate to the project you want to assign the user a role in. + ![The steps to navigate to a project: use the 'projects' navigation item and select your project.](/img/assign-cpr-step-1.png) 2. Navigate to the project's _access_ page. + ![A project overview with the 'access' tab highlighted.](/img/assign-cpr-step-2.png) 3. This step depends on whether the user has already been added to the project or not: - If the user has already been added to the project, select the new role you want to give them from the dropdown menu next to their name. + ![A list of users with access to the current project. To the right of each user is a dropdown input labeled role.](/img/assign-cpr-step-3a.png) - If the user _hasn't_ been added to the project, add them via the 'add user' form. Select the role you want to give them from the role field. + ![Adding a user to a project. The add user form is filled out with data for an "Alexis". The Role input is open and the custom "Developer" role is highlighted.](/img/assign-cpr-step-3b.png) diff --git a/website/static/img/assign-cpr-step-1.png b/website/static/img/assign-cpr-step-1.png new file mode 100644 index 0000000000..eb419f0962 Binary files /dev/null and b/website/static/img/assign-cpr-step-1.png differ diff --git a/website/static/img/assign-cpr-step-2.png b/website/static/img/assign-cpr-step-2.png new file mode 100644 index 0000000000..0b9976416c Binary files /dev/null and b/website/static/img/assign-cpr-step-2.png differ diff --git a/website/static/img/assign-cpr-step-3a.png b/website/static/img/assign-cpr-step-3a.png new file mode 100644 index 0000000000..15d1a879db Binary files /dev/null and b/website/static/img/assign-cpr-step-3a.png differ diff --git a/website/static/img/assign-cpr-step-3b.png b/website/static/img/assign-cpr-step-3b.png new file mode 100644 index 0000000000..df2e0b233a Binary files /dev/null and b/website/static/img/assign-cpr-step-3b.png differ diff --git a/website/static/img/create-cpr-step-1.png b/website/static/img/create-cpr-step-1.png new file mode 100644 index 0000000000..38f0d6b887 Binary files /dev/null and b/website/static/img/create-cpr-step-1.png differ diff --git a/website/static/img/create-cpr-step-2.png b/website/static/img/create-cpr-step-2.png new file mode 100644 index 0000000000..e3cb11e2f2 Binary files /dev/null and b/website/static/img/create-cpr-step-2.png differ diff --git a/website/static/img/create-cpr-step-3.png b/website/static/img/create-cpr-step-3.png new file mode 100644 index 0000000000..e7dfc504de Binary files /dev/null and b/website/static/img/create-cpr-step-3.png differ diff --git a/website/static/img/create-cpr-step-4.png b/website/static/img/create-cpr-step-4.png new file mode 100644 index 0000000000..a1a795edaa Binary files /dev/null and b/website/static/img/create-cpr-step-4.png differ