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 fe7f6d2f64..70a9f0ebe7 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 @@ -1,18 +1,24 @@ --- title: How to create and assign custom project roles --- +import VideoContent from '@site/src/components/VideoContent.jsx' + :::info availability Custom project roles were introduced in **Unleash 4.6** and are only available in Unleash Enterprise. ::: -This guide takes you through [how to create](#creating-custom-project-roles "how to create custom project roles") and [assign](#assigning-custom-project-roles "how to assign custom project roles") [custom project roles](../user_guide/rbac.md#custom-project-roles). + +This guide takes you through [how to create](#creating-custom-project-roles "how to create custom project roles") and [assign](#assigning-custom-project-roles "how to assign custom project roles") [custom project roles](../user_guide/rbac.md#custom-project-roles). Custom project roles allow you to fine-tune access rights and permissions within your projects. + + + +The guides on this page are also available in video format! Does a minute or two of watching someone walk through the steps sound better to you than following steps with static screenshots? If so, check out these video walkthroughs instead 🍿 + + ## Creating custom project roles - -It takes about three steps to create custom project roles. You can either follow the steps in writing below or watch [the accompanying video](#video-create). - -To create custom project roles: +It takes about three steps 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. ![A visual representation of the current step: the Unleash Admin UI with the steps highlighted.](/img/create-cpr-step-1.png) @@ -23,17 +29,9 @@ To create custom project roles: 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) -### How to create custom project roles (video) {#video-create} - -Here's a video recording with accompanying explanations of how to create custom project roles: - - - - - ## Assigning custom project roles -Custom project role creation is a pretty straightforward process and requires around three steps, outlined below. There's also a [video version](#video-assign) available. +Custom project role creation is a pretty straightforward process and requires around three steps, outlined below. To assign a custom project role to a user: 1. Navigate to the project you want to assign the user a role in. @@ -45,9 +43,3 @@ To assign a custom project role to a user: ![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) - -### How to assign custom project roles (video) {#video-assign} - -Here's a video recording with accompanying explanations of how to assign custom project roles: - - diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index b177081d1d..148539ac49 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -44,7 +44,14 @@ module.exports = { ], }, prism: { - additionalLanguages: ['java', 'swift', 'ruby', 'csharp', 'kotlin', 'php'], + additionalLanguages: [ + 'java', + 'swift', + 'ruby', + 'csharp', + 'kotlin', + 'php', + ], }, footer: { style: 'dark', @@ -71,13 +78,11 @@ module.exports = { items: [ { label: 'Stack Overflow', - href: - 'https://stackoverflow.com/questions/tagged/unleash', + href: 'https://stackoverflow.com/questions/tagged/unleash', }, { label: 'Slack', - href: - 'https://join.slack.com/t/unleash-community/shared_invite/zt-8b6l1uut-LL67kLpIXm9bcN3~6RVaRQ', + href: 'https://join.slack.com/t/unleash-community/shared_invite/zt-8b6l1uut-LL67kLpIXm9bcN3~6RVaRQ', }, { label: 'Twitter', @@ -105,8 +110,11 @@ module.exports = { 'https://github.com/Unleash/unleash/edit/main/website/', routeBasePath: '/', remarkPlugins: [ - [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}] - ] + [ + require('@docusaurus/remark-plugin-npm2yarn'), + { sync: true }, + ], + ], }, theme: { customCss: require.resolve('./src/css/custom.css'), @@ -153,7 +161,7 @@ module.exports = { from: '/user_guide/control_rollout', }, ], - createRedirects: function(toPath) { + createRedirects: function (toPath) { if ( toPath.indexOf('/docs/') === -1 && toPath.indexOf('index.html') === -1 diff --git a/website/src/components/VideoContent.jsx b/website/src/components/VideoContent.jsx new file mode 100644 index 0000000000..fa79262296 --- /dev/null +++ b/website/src/components/VideoContent.jsx @@ -0,0 +1,52 @@ +import React from 'react'; +import Admonition from '@theme/Admonition'; + +const icons = { + tip: ( + + + + ), +}; + +const Component = ({ title = 'video content', videoUrls, children }) => { + return ( +
+ + {children} + + +
+ {videoUrls ? ( + videoUrls.map((url) => ( + + )) + ) : ( + + You need to provide YouTube video URLs for this + component to work properly. + + )} +
+
+ ); +}; + +export default Component; diff --git a/website/src/css/custom.css b/website/src/css/custom.css index c00de0f93b..87ef50ea89 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -7,7 +7,13 @@ /* You can override the default Infima variables here. */ :root { - --color-unleash-purple: #635dc5; + --unleash-color-purple: #635dc5; + --unleash-color-gray: #ecebeb; + + --unleash-color-admonition-background: var(--unleash-color-gray); + --unleash-color-admonition-border: #999; + --unleash-color-admonition-text: #2b2b2b; + --ifm-color-primary: #39535b; --ifm-color-primary-dark: #334b52; --ifm-color-primary-darker: #30474d; @@ -17,10 +23,13 @@ --ifm-color-primary-lightest: #4a6c76; --ifm-code-font-size: 90%; --ifm-font-size-base: 15px; - --ifm-link-color: var(--color-unleash-purple); + --ifm-link-color: var(--unleash-color-purple); + --ifm-menu-color-background-active: var(--unleash-color-gray); + --ifm-menu-color-background-hover: var(--unleash-color-gray); --navbar-link-color: #122d33; } + footer { --ifm-footer-link-hover-color: var(--ifm-footer-link-color); } @@ -33,7 +42,7 @@ li.theme-doc-sidebar-item-category-level-1 > div::before { width: 0.3em; height: 100%; content: ' '; - background-color: var(--color-unleash-purple); + background-color: var(--unleash-color-purple); border-radius: 2px; position: absolute; } @@ -62,3 +71,44 @@ html[data-theme='dark'] .header-github-link:before { background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat; } + +/* Video content container */ + +.unleash-video-container { + display: grid; + --gap: 0.5em; + --border-radius: var(--ifm-alert-border-radius); + gap: var(--gap); + margin-bottom: 1em; +} + +.unleash-video-container > .videos { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + gap: var(--gap); +} + +.unleash-video-container > .admonition { + box-shadow: none; + background-color: var(--unleash-color-admonition-background); + color: var(--unleash-color-admonition-text); + border-color: var(--unleash-color-admonition-border); + margin: 0; +} + +.unleash-video-container iframe { + aspect-ratio: 16/9; +} + +@media screen and (min-width: 450px) { + .unleash-video-container { + grid-template-columns: 1fr min(250px, 25%); + } + .unleash-video-container > .videos { + display: flex; + flex-direction: column; + gap: var(--gap); + } +} + +/* end video content container */