Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-31 00:16:47 +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', display: 'flex',
color: theme.palette.text.secondary, color: theme.palette.text.secondary,
fontSize: theme.fontSizes.smallBody, fontSize: theme.fontSizes.smallBody,
marginBottom: theme.spacing(1),
})); }));
const StyledButtonContainer = styled('div')(({ theme }) => ({ const StyledButtonContainer = styled('div')(({ theme }) => ({
marginTop: theme.spacing(2), marginTop: theme.spacing(1),
})); }));
const StyledDivider = styled(Divider)(({ theme }) => ({ const StyledDivider = styled(Divider)(({ theme }) => ({
@ -211,14 +212,14 @@ export const ProjectActionsForm = ({
autoComplete='off' autoComplete='off'
/> />
<ProjectActionsFormStep name='Trigger'> <ProjectActionsFormStep
<StyledInputDescription> name='Trigger'
Create incoming webhooks from&nbsp; resourceLink={
<RouterLink to='/integrations/incoming-webhooks'> <RouterLink to='/integrations/incoming-webhooks'>
integrations section Create incoming webhook
</RouterLink> </RouterLink>
. }
</StyledInputDescription> >
<GeneralSelect <GeneralSelect
label='Incoming webhook' label='Incoming webhook'
name='incoming-webhook' name='incoming-webhook'
@ -260,14 +261,15 @@ export const ProjectActionsForm = ({
</StyledButtonContainer> </StyledButtonContainer>
</ProjectActionsFormStep> </ProjectActionsFormStep>
<ProjectActionsFormStep name='Do these action(s)' verticalConnector> <ProjectActionsFormStep
<StyledInputDescription> name='Do these action(s)'
Create service accounts from&nbsp; verticalConnector
resourceLink={
<RouterLink to='/admin/service-accounts'> <RouterLink to='/admin/service-accounts'>
service accounts section Create service account
</RouterLink> </RouterLink>
. }
</StyledInputDescription> >
<GeneralSelect <GeneralSelect
label='Service account' label='Service account'
name='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 { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
const StyledBadge = styled(Badge)(({ theme }) => ({ const StyledHeader = styled('div')(({ theme }) => ({
margin: 'auto', position: 'relative',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: theme.spacing(2), 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, { const StyledBox = styled(Box, {
shouldForwardProp: (prop) => prop !== 'verticalConnector', shouldForwardProp: (prop) => prop !== 'verticalConnector',
})<{ verticalConnector?: boolean }>(({ theme, verticalConnector }) => ({ })<{ verticalConnector?: boolean }>(({ theme, verticalConnector }) => ({
@ -28,12 +40,14 @@ const StyledVerticalConnector = styled(Divider)(({ theme }) => ({
interface IProjectActionsFormStepProps { interface IProjectActionsFormStepProps {
name: string; name: string;
verticalConnector?: boolean; verticalConnector?: boolean;
resourceLink?: ReactNode;
children: ReactNode; children: ReactNode;
} }
export const ProjectActionsFormStep = ({ export const ProjectActionsFormStep = ({
name, name,
verticalConnector, verticalConnector,
resourceLink,
children, children,
}: IProjectActionsFormStepProps) => ( }: IProjectActionsFormStepProps) => (
<> <>
@ -42,7 +56,10 @@ export const ProjectActionsFormStep = ({
show={<StyledVerticalConnector orientation='vertical' />} show={<StyledVerticalConnector orientation='vertical' />}
/> />
<StyledBox verticalConnector={verticalConnector}> <StyledBox verticalConnector={verticalConnector}>
<StyledBadge color='secondary'>{name}</StyledBadge> <StyledHeader>
<Badge color='secondary'>{name}</Badge>
<StyledResourceLink>{resourceLink}</StyledResourceLink>
</StyledHeader>
{children} {children}
</StyledBox> </StyledBox>
</> </>