add role assignment page (#10115)

## Context
This PR introduces the "assignment" tab in the Role edit page, currently
allowing admin users to assign workspace members to specific roles.

Note: For now, a user can only have one role and a modal will warn you
if you try to re-assign a user to a new role.

## Test
<img width="648" alt="Screenshot 2025-02-10 at 17 59 21"
src="https://github.com/user-attachments/assets/dabd7a17-6aca-4d2b-95d8-46182f53e1e8"
/>
<img width="668" alt="Screenshot 2025-02-10 at 17 59 33"
src="https://github.com/user-attachments/assets/802aab7a-db67-4f83-9a44-35773df100f7"
/>
<img width="629" alt="Screenshot 2025-02-10 at 17 59 42"
src="https://github.com/user-attachments/assets/277db061-3f05-4ccd-8a83-7a96d6c1673e"
/>
This commit is contained in:
Weiko
2025-02-11 14:51:31 +01:00
committed by GitHub
parent 179d3ae2a4
commit 02ced028e5
26 changed files with 813 additions and 70 deletions

View File

@ -69,7 +69,6 @@ const StyledButton = styled('button', {
: theme.background.transparent.light
: theme.background.transparent.light};
border-width: 1px 1px 1px 1px !important;
opacity: ${disabled ? 0.24 : 1};
box-shadow: ${!disabled && focus
? `0 0 0 3px ${
!inverted
@ -112,7 +111,6 @@ const StyledButton = styled('button', {
}`
: 'none'};
color: ${!inverted ? theme.grayScale.gray0 : theme.color.blue};
opacity: ${disabled ? 0.24 : 1};
${disabled
? ''
: css`
@ -147,7 +145,6 @@ const StyledButton = styled('button', {
}`
: 'none'};
color: ${!inverted ? theme.background.primary : theme.color.red};
opacity: ${disabled ? 0.24 : 1};
${disabled
? ''
: css`
@ -194,7 +191,6 @@ const StyledButton = styled('button', {
: theme.background.transparent.medium
}`
: 'none'};
opacity: ${disabled ? 0.24 : 1};
color: ${!inverted
? !disabled
? theme.font.color.secondary
@ -241,7 +237,6 @@ const StyledButton = styled('button', {
: theme.background.transparent.medium
}`
: 'none'};
opacity: ${disabled ? 0.24 : 1};
color: ${!inverted
? !disabled
? theme.color.blue
@ -288,7 +283,6 @@ const StyledButton = styled('button', {
: theme.background.transparent.medium
}`
: 'none'};
opacity: ${disabled ? 0.24 : 1};
color: ${!inverted
? theme.font.color.danger
: theme.font.color.inverted};