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 type { FormEvent } from 'react';
import { useEffect, useMemo, useState } from 'react';
@ -18,7 +18,6 @@ import {
StyledLabel,
StyledMenuItem,
StyledSelect,
StyledTextField,
StyledTopRow,
} from '../shared/SharedFormComponents.tsx';
import type { ISafeguard } from 'interfaces/releasePlans.ts';
@ -213,6 +212,9 @@ export const SafeguardForm = ({
<StyledFormContainer onSubmit={handleSubmit}>
<StyledTopRow>
<StyledIcon />
<StyledLabel>Pause automation when</StyledLabel>
</StyledTopRow>
<StyledTopRow>
<MetricSelector
value={metricName}
onChange={handleMetricChange}
@ -221,20 +223,23 @@ export const SafeguardForm = ({
/>
<StyledLabel>filtered by</StyledLabel>
<StyledSelect
value={appName}
onChange={(e) =>
handleApplicationChange(String(e.target.value))
}
variant='outlined'
size='small'
>
{applicationNames.map((app) => (
<StyledMenuItem key={app} value={app}>
{app === '*' ? 'All' : app}
</StyledMenuItem>
))}
</StyledSelect>
<FormControl variant='outlined' size='small'>
<StyledSelect
sx={{ minWidth: 200 }}
value={appName}
onChange={(e) =>
handleApplicationChange(String(e.target.value))
}
variant='outlined'
size='small'
>
{applicationNames.map((app) => (
<StyledMenuItem key={app} value={app}>
{app === '*' ? 'All' : app}
</StyledMenuItem>
))}
</StyledSelect>
</FormControl>
<StyledLabel>aggregated by</StyledLabel>
<ModeSelector
@ -242,33 +247,39 @@ export const SafeguardForm = ({
onChange={handleAggregationModeChange}
metricType={metricType}
/>
</StyledTopRow>
<StyledTopRow>
<StyledLabel>is</StyledLabel>
<StyledSelect
value={operator}
onChange={(e) =>
handleOperatorChange(
e.target.value as CreateSafeguardSchemaOperator,
)
}
variant='outlined'
size='small'
>
<StyledMenuItem value='>'>More than</StyledMenuItem>
<StyledMenuItem value='<'>Less than</StyledMenuItem>
</StyledSelect>
<FormControl variant='outlined' size='small'>
<StyledSelect
value={operator}
onChange={(e) =>
handleOperatorChange(
e.target.value as CreateSafeguardSchemaOperator,
)
}
variant='outlined'
size='small'
>
<StyledMenuItem value='>'>More than</StyledMenuItem>
<StyledMenuItem value='<'>Less than</StyledMenuItem>
</StyledSelect>
</FormControl>
<StyledTextField
type='number'
value={threshold}
onChange={(e) =>
handleThresholdChange(Number(e.target.value))
}
placeholder='Value'
variant='outlined'
size='small'
required
/>
<FormControl variant='outlined' size='small'>
<TextField
sx={{ minWidth: 120 }}
type='number'
value={threshold}
onChange={(e) =>
handleThresholdChange(Number(e.target.value))
}
placeholder='Value'
variant='outlined'
size='small'
required
/>
</FormControl>
<StyledLabel>over</StyledLabel>
<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 }) => ({
display: 'flex',
@ -39,8 +39,6 @@ export const StyledSelect = styled(Select)(({ theme }) => ({
minWidth: 120,
maxWidth: 120,
'& .MuiSelect-select': {
fontSize: theme.typography.body2.fontSize,
padding: theme.spacing(0.5, 1),
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
@ -51,14 +49,6 @@ export const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
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>) =>
styled(IconComponent)(({ theme }) => ({
color: theme.palette.common.white,