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

feat: adjust safeguard form elements size (#10973)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2025-11-13 10:06:24 +01:00 committed by GitHub
parent 8689afe7be
commit de04e816df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 53 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/SafeguardForm/SafeguardForm.tsx
View File

@ -1,4 +1,4 @@
import { Button } from '@mui/material'; import { Button, FormControl, TextField } from '@mui/material';
import ShieldIcon from '@mui/icons-material/Shield'; import ShieldIcon from '@mui/icons-material/Shield';
import type { FormEvent } from 'react'; import type { FormEvent } from 'react';
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
@ -18,7 +18,6 @@ import {
StyledLabel, StyledLabel,
StyledMenuItem, StyledMenuItem,
StyledSelect, StyledSelect,
StyledTextField,
StyledTopRow, StyledTopRow,
} from '../shared/SharedFormComponents.tsx'; } from '../shared/SharedFormComponents.tsx';
import type { ISafeguard } from 'interfaces/releasePlans.ts'; import type { ISafeguard } from 'interfaces/releasePlans.ts';
@ -213,6 +212,9 @@ export const SafeguardForm = ({
<StyledFormContainer onSubmit={handleSubmit}> <StyledFormContainer onSubmit={handleSubmit}>
<StyledTopRow> <StyledTopRow>
<StyledIcon /> <StyledIcon />
<StyledLabel>Pause automation when</StyledLabel>
</StyledTopRow>
<StyledTopRow>
<MetricSelector <MetricSelector
value={metricName} value={metricName}
onChange={handleMetricChange} onChange={handleMetricChange}
@ -221,20 +223,23 @@ export const SafeguardForm = ({
/> />
<StyledLabel>filtered by</StyledLabel> <StyledLabel>filtered by</StyledLabel>
<StyledSelect <FormControl variant='outlined' size='small'>
value={appName} <StyledSelect
onChange={(e) => sx={{ minWidth: 200 }}
handleApplicationChange(String(e.target.value)) value={appName}
} onChange={(e) =>
variant='outlined' handleApplicationChange(String(e.target.value))
size='small' }
> variant='outlined'
{applicationNames.map((app) => ( size='small'
<StyledMenuItem key={app} value={app}> >
{app === '*' ? 'All' : app} {applicationNames.map((app) => (
</StyledMenuItem> <StyledMenuItem key={app} value={app}>
))} {app === '*' ? 'All' : app}
</StyledSelect> </StyledMenuItem>
))}
</StyledSelect>
</FormControl>
<StyledLabel>aggregated by</StyledLabel> <StyledLabel>aggregated by</StyledLabel>
<ModeSelector <ModeSelector
@ -242,33 +247,39 @@ export const SafeguardForm = ({
onChange={handleAggregationModeChange} onChange={handleAggregationModeChange}
metricType={metricType} metricType={metricType}
/> />
</StyledTopRow>
<StyledTopRow>
<StyledLabel>is</StyledLabel> <StyledLabel>is</StyledLabel>
<StyledSelect <FormControl variant='outlined' size='small'>
value={operator} <StyledSelect
onChange={(e) => value={operator}
handleOperatorChange( onChange={(e) =>
e.target.value as CreateSafeguardSchemaOperator, handleOperatorChange(
) e.target.value as CreateSafeguardSchemaOperator,
} )
variant='outlined' }
size='small' variant='outlined'
> size='small'
<StyledMenuItem value='>'>More than</StyledMenuItem> >
<StyledMenuItem value='<'>Less than</StyledMenuItem> <StyledMenuItem value='>'>More than</StyledMenuItem>
</StyledSelect> <StyledMenuItem value='<'>Less than</StyledMenuItem>
</StyledSelect>
</FormControl>
<StyledTextField <FormControl variant='outlined' size='small'>
type='number' <TextField
value={threshold} sx={{ minWidth: 120 }}
onChange={(e) => type='number'
handleThresholdChange(Number(e.target.value)) value={threshold}
} onChange={(e) =>
placeholder='Value' handleThresholdChange(Number(e.target.value))
variant='outlined' }
size='small' placeholder='Value'
required variant='outlined'
/> size='small'
required
/>
</FormControl>
<StyledLabel>over</StyledLabel> <StyledLabel>over</StyledLabel>
<RangeSelector <RangeSelector

12
frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/shared/SharedFormComponents.tsx
View File

@ -1,4 +1,4 @@
import { styled, Select, MenuItem, TextField } from '@mui/material'; import { styled, Select, MenuItem } from '@mui/material';
export const StyledFormContainer = styled('form')(({ theme }) => ({ export const StyledFormContainer = styled('form')(({ theme }) => ({
display: 'flex', display: 'flex',
@ -39,8 +39,6 @@ export const StyledSelect = styled(Select)(({ theme }) => ({
minWidth: 120, minWidth: 120,
maxWidth: 120, maxWidth: 120,
'& .MuiSelect-select': { '& .MuiSelect-select': {
fontSize: theme.typography.body2.fontSize,
padding: theme.spacing(0.5, 1),
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
@ -51,14 +49,6 @@ export const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
fontSize: theme.typography.body2.fontSize, fontSize: theme.typography.body2.fontSize,
})); }));
export const StyledTextField = styled(TextField)(({ theme }) => ({
width: 80,
'& .MuiInputBase-input': {
fontSize: theme.typography.body2.fontSize,
padding: theme.spacing(0.5, 1),
},
}));
export const createStyledIcon = (IconComponent: React.ComponentType<any>) => export const createStyledIcon = (IconComponent: React.ComponentType<any>) =>
styled(IconComponent)(({ theme }) => ({ styled(IconComponent)(({ theme }) => ({
color: theme.palette.common.white, color: theme.palette.common.white,