Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

fix: small ui/ux adjustments to the actions form (#6269)

Browse Source 
Small UI/UX adjustments to the actions form after aligning.


![image](https://github.com/Unleash/unleash/assets/14320932/5ededf9c-af54-4628-8fb3-0fcc6afc87dc)
This commit is contained in:
Nuno Góis 2024-02-19 13:22:18 +00:00 committed by GitHub
parent a007ddd5df
commit 9b980bb212
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsForm.tsx
View File

@ -47,10 +47,11 @@ const StyledSecondaryDescription = styled('p')(({ theme }) => ({
display: 'flex',
color: theme.palette.text.secondary,
fontSize: theme.fontSizes.smallBody,
marginBottom: theme.spacing(1),
}));
const StyledButtonContainer = styled('div')(({ theme }) => ({
marginTop: theme.spacing(2),
marginTop: theme.spacing(1),
}));
const StyledDivider = styled(Divider)(({ theme }) => ({
@ -211,14 +212,14 @@ export const ProjectActionsForm = ({
autoComplete='off'
/>
<ProjectActionsFormStep name='Trigger'>
<StyledInputDescription>
Create incoming webhooks from&nbsp;
<ProjectActionsFormStep
name='Trigger'
resourceLink={
<RouterLink to='/integrations/incoming-webhooks'>
integrations section
Create incoming webhook
</RouterLink>
.
</StyledInputDescription>
}
>
<GeneralSelect
label='Incoming webhook'
name='incoming-webhook'
@ -260,14 +261,15 @@ export const ProjectActionsForm = ({
</StyledButtonContainer>
</ProjectActionsFormStep>
<ProjectActionsFormStep name='Do these action(s)' verticalConnector>
<StyledInputDescription>
Create service accounts from&nbsp;
<ProjectActionsFormStep
name='Do these action(s)'
verticalConnector
resourceLink={
<RouterLink to='/admin/service-accounts'>
service accounts section
Create service account
</RouterLink>
.
</StyledInputDescription>
}
>
<GeneralSelect
label='Service account'
name='service-account'

23
frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep.tsx
View File

@ -3,11 +3,23 @@ import { Badge } from 'component/common/Badge/Badge';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { ReactNode } from 'react';
const StyledBadge = styled(Badge)(({ theme }) => ({
margin: 'auto',
const StyledHeader = styled('div')(({ theme }) => ({
position: 'relative',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: theme.spacing(2),
}));
const StyledResourceLink = styled('div')(({ theme }) => ({
position: 'absolute',
right: 0,
fontSize: theme.fontSizes.smallBody,
[theme.breakpoints.down('sm')]: {
display: 'none',
},
}));
const StyledBox = styled(Box, {
shouldForwardProp: (prop) => prop !== 'verticalConnector',
})<{ verticalConnector?: boolean }>(({ theme, verticalConnector }) => ({
@ -28,12 +40,14 @@ const StyledVerticalConnector = styled(Divider)(({ theme }) => ({
interface IProjectActionsFormStepProps {
name: string;
verticalConnector?: boolean;
resourceLink?: ReactNode;
children: ReactNode;
}
export const ProjectActionsFormStep = ({
name,
verticalConnector,
resourceLink,
children,
}: IProjectActionsFormStepProps) => (
<>
@ -42,7 +56,10 @@ export const ProjectActionsFormStep = ({
show={<StyledVerticalConnector orientation='vertical' />}
/>
<StyledBox verticalConnector={verticalConnector}>
<StyledBadge color='secondary'>{name}</StyledBadge>
<StyledHeader>
<Badge color='secondary'>{name}</Badge>
<StyledResourceLink>{resourceLink}</StyledResourceLink>
</StyledHeader>
{children}
</StyledBox>
</>