From 46b1eedcc7630645620b7ae1f966d94c00602916 Mon Sep 17 00:00:00 2001 From: Mateusz Kwasniewski Date: Mon, 8 Jul 2024 15:08:16 +0200 Subject: [PATCH] feat: constraints values limit in a strategy UI (#7557) --- frontend/src/component/common/Limit/Limit.tsx | 9 +++--- .../FreeTextInput/FreeTextInput.test.tsx | 17 +++++++++++ .../FreeTextInput/FreeTextInput.tsx | 29 ++++++++++++++++--- 3 files changed, 47 insertions(+), 8 deletions(-) diff --git a/frontend/src/component/common/Limit/Limit.tsx b/frontend/src/component/common/Limit/Limit.tsx index 7c66c5750c9d..830f4b0a6749 100644 --- a/frontend/src/component/common/Limit/Limit.tsx +++ b/frontend/src/component/common/Limit/Limit.tsx @@ -10,7 +10,8 @@ import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender' const StyledBox = styled(Box)(({ theme }) => ({ display: 'flex', flexDirection: 'column', - border: `2px solid ${theme.palette.background.application}`, + backgroundColor: theme.palette.background.default, + border: `1px solid ${theme.palette.divider}`, borderRadius: `${theme.shape.borderRadiusMedium}px`, width: '100%', })); @@ -33,7 +34,7 @@ const Header = styled(Box)(({ theme }) => ({ gap: theme.spacing(1), alignItems: 'center', fontWeight: 'bold', - borderBottom: `1px solid ${theme.palette.background.application}`, + borderBottom: `1px solid ${theme.palette.divider}`, padding: theme.spacing(3, 4), fontSize: theme.typography.h2.fontSize, })); @@ -43,7 +44,7 @@ const Footer = styled(Box)(({ theme }) => ({ })); const Main = styled(Box)(({ theme }) => ({ - borderBottom: `1px solid ${theme.palette.background.application}`, + borderBottom: `1px solid ${theme.palette.divider}`, padding: theme.spacing(3, 4), })); @@ -68,7 +69,7 @@ export const Limit: FC<{ currentValue: number; onClose?: () => void; }> = ({ name, shortName, limit, currentValue, onClose }) => { - const percentageLimit = Math.round((currentValue / limit) * 100); + const percentageLimit = Math.floor((currentValue / limit) * 100); const belowLimit = currentValue < limit; const threshold = 80; diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.test.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.test.tsx index e80254cb2666..e56b835f4054 100644 --- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.test.tsx +++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.test.tsx @@ -119,3 +119,20 @@ test('should set values', async () => { expect(errors).toEqual(['']); expect(values).toEqual(['1', '2', '3']); }); + +test('should show limit reached indicator', async () => { + setupApi(); + render( + {}} + setError={(newError: string) => {}} + removeValue={() => {}} + />, + ); + + await screen.findByText( + 'You have reached the limit for single constraint values', + ); +}); diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx index 62d56d25f51f..c74e4d8d6168 100644 --- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx +++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx @@ -1,4 +1,4 @@ -import { Button, Chip } from '@mui/material'; +import { Box, Button, Chip, styled } from '@mui/material'; import { makeStyles } from 'tss-react/mui'; import Input from 'component/common/Input/Input'; import StringTruncator from 'component/common/StringTruncator/StringTruncator'; @@ -8,6 +8,8 @@ import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHead import { parseParameterStrings } from 'utils/parseParameter'; import { useUiFlag } from 'hooks/useUiFlag'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { Limit } from 'component/common/Limit/Limit'; interface IFreeTextInputProps { values: string[]; @@ -53,6 +55,12 @@ const useStyles = makeStyles()((theme) => ({ valuesContainer: { marginTop: '1rem' }, })); +const LimitContainer = styled(Box)(({ theme }) => ({ + '&:has(*)': { + marginTop: theme.spacing(2), + }, +})); + const ENTER = 'Enter'; export const FreeTextInput = ({ @@ -66,6 +74,7 @@ export const FreeTextInput = ({ const { classes: styles } = useStyles(); const resourceLimitsEnabled = useUiFlag('resourceLimits'); const { uiConfig, loading } = useUiConfig(); + const constraintValuesLimit = uiConfig.resourceLimits.constraintValues; const onKeyPress = (event: React.KeyboardEvent) => { if (event.key === ENTER) { @@ -80,13 +89,12 @@ export const FreeTextInput = ({ ...parseParameterStrings(inputValues), ]); const limitReached = Boolean( - resourceLimitsEnabled && - newValues.length > uiConfig.resourceLimits.constraintValues, + resourceLimitsEnabled && newValues.length > constraintValuesLimit, ); if (limitReached) { setError( - `constraints cannot have more than ${uiConfig.resourceLimits.constraintValues} values`, + `constraints cannot have more than ${constraintValuesLimit} values`, ); } else if (newValues.length === 0) { setError('values cannot be empty'); @@ -139,6 +147,19 @@ export const FreeTextInput = ({ removeValue={removeValue} /> + + + } + /> + ); };