From bf8a1b763ec40a3ce5e37774fe9a0f199b306c08 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Tue, 10 Jun 2025 13:34:48 +0200 Subject: [PATCH] delete legacy accordion view --- .../ConstraintAccordionEdit.tsx | 272 ------------------ .../ConstraintAccordionEditBody.tsx | 76 ----- .../ConstraintFormHeader.tsx | 18 -- .../DateSingleValue/DateSingleValue.test.tsx | 18 -- .../DateSingleValue/DateSingleValue.tsx | 84 ------ .../DateSingleValue.test.tsx.snap | 8 - .../FreeTextInput/FreeTextInput.tsx | 173 ----------- .../LegalValueLabel/LegalValueLabel.styles.ts | 24 -- .../LegalValueLabel/LegalValueLabel.tsx | 42 --- .../ResolveInput/ResolveInput.tsx | 193 ------------- .../RestrictiveLegalValues.test.tsx | 52 ---- .../RestrictiveLegalValues.tsx | 177 ------------ .../SingleLegalValue.test.tsx | 27 -- .../SingleLegalValue/SingleLegalValue.tsx | 116 -------- .../SingleValue/SingleValue.tsx | 55 ---- .../constraintValidators.test.ts | 110 ------- .../constraintValidators.ts | 55 ---- .../useConstraintInput/useConstraintInput.tsx | 162 ----------- .../ConstraintAccordionEditHeader.tsx | 212 -------------- .../ConstraintAccordionEditHeader/helpers.ts | 82 ------ .../CaseSensitiveButton.tsx | 54 ---- .../InvertedOperatorButton.tsx | 50 ---- .../StyledToggleButton/StyledToggleButton.tsx | 45 --- .../ConstraintAccordionHeaderActions.tsx | 77 ----- .../ConstraintAccordionView.tsx | 123 -------- .../ConstraintAccordionViewBody.tsx | 37 --- .../MultipleValues/MultipleValues.tsx | 54 ---- .../SingleValue/SingleValue.tsx | 47 --- .../ConstraintIcon.tsx | 40 --- .../ConstraintOperator/ConstraintOperator.tsx | 56 ---- .../formatOperatorDescription.ts | 47 --- .../ConstraintOperatorSelect.tsx | 151 ---------- .../ConstraintValueSearch.tsx | 42 --- 33 files changed, 2779 deletions(-) delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.test.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/__snapshots__/DateSingleValue.test.tsx.snap delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.test.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.test.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleValue/SingleValue.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/constraintValidators.test.ts delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/constraintValidators.ts delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/useConstraintInput.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/helpers.ts delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/MultipleValues/MultipleValues.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/SingleValue/SingleValue.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintIcon.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintOperator/formatOperatorDescription.ts delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintOperatorSelect.tsx delete mode 100644 frontend/src/component/common/LegacyConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch.tsx diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx deleted file mode 100644 index f0e892de4b..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx +++ /dev/null @@ -1,272 +0,0 @@ -import { useCallback, useEffect, useState } from 'react'; -import type { IConstraint } from 'interfaces/strategy'; -import { ConstraintAccordionEditBody } from './ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx'; -import { ConstraintAccordionEditHeader } from './ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - styled, -} from '@mui/material'; -import { cleanConstraint } from 'utils/cleanConstraint'; -import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi'; -import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; -import { formatUnknownError } from 'utils/formatUnknownError'; -import type { IUnleashContextDefinition } from 'interfaces/context'; -import { useConstraintInput } from './ConstraintAccordionEditBody/useConstraintInput/useConstraintInput.tsx'; -import type { Operator } from 'constants/operators'; -import { ResolveInput } from './ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx'; - -interface IConstraintAccordionEditProps { - constraint: IConstraint; - onCancel: () => void; - onSave: (constraint: IConstraint) => void; - compact: boolean; - onDelete?: () => void; -} - -export const CANCEL = 'cancel'; -export const SAVE = 'save'; - -const resolveContextDefinition = ( - context: IUnleashContextDefinition[], - contextName: string, -): IUnleashContextDefinition => { - const definition = context.find( - (contextDef) => contextDef.name === contextName, - ); - - return ( - definition || { - name: '', - description: '', - createdAt: '', - sortOrder: 1, - stickiness: false, - } - ); -}; - -const StyledForm = styled('div')({ padding: 0, margin: 0, width: '100%' }); - -const StyledAccordion = styled(Accordion)(({ theme }) => ({ - border: `1px solid ${theme.palette.divider}`, - borderRadius: theme.shape.borderRadiusMedium, - backgroundColor: theme.palette.background.elevation1, - boxShadow: 'none', - margin: 0, - '& .expanded': { - '&:before': { - opacity: '0 !important', - }, - }, -})); - -const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({ - border: 'none', - padding: theme.spacing(0.5, 3), - '&:hover .valuesExpandLabel': { - textDecoration: 'underline', - }, -})); - -const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({ - borderTop: `1px dashed ${theme.palette.divider}`, - display: 'flex', - flexDirection: 'column', - padding: 0, -})); - -/** - * @deprecated use NewConstraintAccordion components - */ -export const ConstraintAccordionEdit = ({ - constraint, - compact, - onCancel, - onSave, - onDelete, -}: IConstraintAccordionEditProps) => { - const [localConstraint, setLocalConstraint] = useState( - cleanConstraint(constraint), - ); - - const { context } = useUnleashContext(); - const [contextDefinition, setContextDefinition] = useState( - resolveContextDefinition(context, localConstraint.contextName), - ); - const { validateConstraint } = useFeatureApi(); - const [expanded, setExpanded] = useState(false); - const [action, setAction] = useState(''); - - useEffect(() => { - // Setting expanded to true on mount will cause the accordion - // animation to take effect and transition the expanded accordion in - setExpanded(true); - }, []); - - useEffect(() => { - setContextDefinition( - resolveContextDefinition(context, localConstraint.contextName), - ); - }, [localConstraint.contextName, context]); - - const setContextName = useCallback((contextName: string) => { - setLocalConstraint((prev) => ({ - ...prev, - contextName, - values: [], - value: '', - })); - }, []); - - const setOperator = useCallback((operator: Operator) => { - setLocalConstraint((prev) => ({ - ...prev, - operator, - values: [], - value: '', - })); - }, []); - - const setValues = useCallback((values: string[]) => { - setLocalConstraint((prev) => ({ - ...prev, - values, - })); - }, []); - - const setValue = useCallback((value: string) => { - setLocalConstraint((prev) => ({ ...prev, value })); - }, []); - - const setInvertedOperator = () => { - setLocalConstraint((prev) => ({ ...prev, inverted: !prev.inverted })); - }; - - const setCaseInsensitive = useCallback(() => { - setLocalConstraint((prev) => ({ - ...prev, - caseInsensitive: !prev.caseInsensitive, - })); - }, []); - - const removeValue = useCallback( - (index: number) => { - const valueCopy = [...localConstraint.values!]; - valueCopy.splice(index, 1); - - setValues(valueCopy); - }, - [localConstraint, setValues], - ); - - const triggerTransition = () => { - setExpanded(false); - }; - - const validateConstraintValues = () => { - const hasValues = - Array.isArray(localConstraint.values) && - Boolean(localConstraint.values.length > 0); - const hasValue = Boolean(localConstraint.value); - - if (hasValues || hasValue) { - setError(''); - return true; - } - setError('You must provide a value for the constraint'); - return false; - }; - - const onSubmit = async () => { - const hasValues = validateConstraintValues(); - if (!hasValues) return; - const [typeValidatorResult, err] = validator(); - - if (!typeValidatorResult) { - setError(err); - } - - if (typeValidatorResult) { - try { - await validateConstraint(localConstraint); - setError(''); - setAction(SAVE); - triggerTransition(); - return; - } catch (error: unknown) { - setError(formatUnknownError(error)); - } - } - }; - - const { input, validator, setError, error } = useConstraintInput({ - contextDefinition, - localConstraint, - }); - - useEffect(() => { - setError(''); - setLocalConstraint((localConstraint) => - cleanConstraint(localConstraint), - ); - }, [localConstraint.operator, localConstraint.contextName, setError]); - - return ( - - { - if (action === CANCEL) { - setAction(''); - onCancel(); - } else if (action === SAVE) { - setAction(''); - onSave(localConstraint); - } - }, - }} - > - - - - - - - - - - - - ); -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx deleted file mode 100644 index 32b3bdc650..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { Button, styled } from '@mui/material'; -import type { IConstraint } from 'interfaces/strategy'; -import { CANCEL } from '../ConstraintAccordionEdit.tsx'; - -import type React from 'react'; - -interface IConstraintAccordionBody { - localConstraint: IConstraint; - setValues: (values: string[]) => void; - triggerTransition: () => void; - setValue: (value: string) => void; - setAction: React.Dispatch>; - onSubmit: () => void; - children?: React.ReactNode; -} - -const StyledInputContainer = styled('div')(({ theme }) => ({ - padding: theme.spacing(2), -})); - -const StyledButtonContainer = styled('div')(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - marginTop: theme.spacing(2), - borderTop: `1px solid ${theme.palette.divider}`, - width: '100%', - padding: theme.spacing(2), -})); - -const StyledInputButtonContainer = styled('div')({ - marginLeft: 'auto', -}); - -const StyledLeftButton = styled(Button)(({ theme }) => ({ - marginRight: theme.spacing(1), - minWidth: '125px', -})); - -const StyledRightButton = styled(Button)(({ theme }) => ({ - marginLeft: theme.spacing(1), - minWidth: '125px', -})); - -/** - * @deprecated use NewConstraintAccordion components - */ -export const ConstraintAccordionEditBody: React.FC< - IConstraintAccordionBody -> = ({ localConstraint, children, triggerTransition, setAction, onSubmit }) => { - return ( - <> - {children} - - - - Done - - { - setAction(CANCEL); - triggerTransition(); - }} - > - Cancel - - - - - ); -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx deleted file mode 100644 index 54545fb6a1..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type React from 'react'; -import { styled } from '@mui/material'; - -const StyledHeader = styled('h3')(({ theme }) => ({ - fontSize: theme.fontSizes.bodySize, - fontWeight: theme.typography.fontWeightRegular, - marginTop: theme.spacing(2), - marginBottom: theme.spacing(0.5), -})); - -/** - * @deprecated use NewConstraintAccordion components - */ -export const ConstraintFormHeader: React.FC< - React.HTMLAttributes -> = ({ children, ...rest }) => { - return {children}; -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.test.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.test.tsx deleted file mode 100644 index 732b181a1f..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.test.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { parseDateValue } from 'component/common/util'; - -test(`Date component is able to parse midnight when it's 00`, () => { - const f = parseDateValue('2022-03-15T12:27'); - const midnight = parseDateValue('2022-03-15T00:27'); - expect(f).toEqual('2022-03-15T12:27'); - expect(midnight).toEqual('2022-03-15T00:27'); -}); - -test(`Date component - snapshot matching`, () => { - const midnight = '2022-03-15T00:00'; - const midday = '2022-03-15T12:00'; - const obj = { - midnight: parseDateValue(midnight), - midday: parseDateValue(midday), - }; - expect(obj).toMatchSnapshot(); -}); diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.tsx deleted file mode 100644 index 38a5becd9d..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader.tsx'; -import Input from 'component/common/Input/Input'; -import { parseDateValue, parseValidDate } from 'component/common/util'; - -import { useMemo, useState } from 'react'; -import { styled } from '@mui/material'; -import { getAllTimezones } from 'countries-and-timezones'; - -interface IDateSingleValueProps { - setValue: (value: string) => void; - value?: string; - error: string; - setError: React.Dispatch>; -} - -const StyledWrapper = styled('div')(({ theme }) => ({ - display: 'flex', - flexDirection: 'row', - marginBottom: theme.spacing(1), - alignItems: 'center', - gap: theme.spacing(1), -})); - -/** - * @deprecated use NewConstraintAccordion components - */ -export const DateSingleValue = ({ - setValue, - value, - error, - setError, -}: IDateSingleValueProps) => { - const timezones = Object.values(getAllTimezones({ deprecated: false })).map( - (timezone) => ({ - key: timezone.name, - label: `${timezone.name}`, - utcOffset: timezone.utcOffsetStr, - }), - ); - const { timeZone: localTimezoneName } = - Intl.DateTimeFormat().resolvedOptions(); - const [pickedDate, setPickedDate] = useState(value || ''); - - const timezoneText = useMemo(() => { - const localTimezone = timezones.find( - (t) => t.key === localTimezoneName, - ); - if (localTimezone != null) { - return `${localTimezone.key} (UTC ${localTimezone.utcOffset})`; - } else { - return 'The time shown is in your local time zone according to your browser.'; - } - }, [timezones, localTimezoneName]); - - if (!value) return null; - - return ( - <> - Select a date - - { - setError(''); - const parsedDate = parseValidDate(e.target.value); - const dateString = parsedDate?.toISOString(); - dateString && setPickedDate(dateString); - dateString && setValue(dateString); - }} - InputLabelProps={{ - shrink: true, - }} - error={Boolean(error)} - errorText={error} - required - /> -

{timezoneText}

- - - ); -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/__snapshots__/DateSingleValue.test.tsx.snap b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/__snapshots__/DateSingleValue.test.tsx.snap deleted file mode 100644 index a3e0f94081..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/__snapshots__/DateSingleValue.test.tsx.snap +++ /dev/null @@ -1,8 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`Date component - snapshot matching 1`] = ` -{ - "midday": "2022-03-15T12:00", - "midnight": "2022-03-15T00:00", -} -`; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx deleted file mode 100644 index 5c073789cc..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx +++ /dev/null @@ -1,173 +0,0 @@ -import { Button, Chip } from '@mui/material'; -import { makeStyles } from 'tss-react/mui'; -import Input from 'component/common/Input/Input'; -import StringTruncator from 'component/common/StringTruncator/StringTruncator'; -import type React from 'react'; -import { useState } from 'react'; -import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader.tsx'; -import { parseParameterStrings } from 'utils/parseParameter'; - -interface IFreeTextInputProps { - values: string[]; - removeValue: (index: number) => void; - setValues: (values: string[]) => void; - beforeValues?: JSX.Element; - error: string; - setError: React.Dispatch>; -} - -const useStyles = makeStyles()((theme) => ({ - valueChip: { - margin: '0 0.5rem 0.5rem 0', - }, - chipValue: { - whiteSpace: 'pre', - }, - inputContainer: { - display: 'flex', - alignItems: 'center', - [theme.breakpoints.down(700)]: { - flexDirection: 'column', - alignItems: 'flex-start', - }, - }, - inputInnerContainer: { - minWidth: '300px', - [theme.breakpoints.down(700)]: { - minWidth: '100%', - }, - }, - input: { - width: '100%', - margin: '1rem 0', - }, - button: { - marginLeft: '1rem', - [theme.breakpoints.down(700)]: { - marginLeft: 0, - marginBottom: '0.5rem', - }, - }, - valuesContainer: { marginTop: '1rem' }, -})); - -const ENTER = 'Enter'; - -/** - * @deprecated use NewConstraintAccordion components - */ -export const FreeTextInput = ({ - values, - removeValue, - setValues, - error, - setError, -}: IFreeTextInputProps) => { - const [inputValues, setInputValues] = useState(''); - const { classes: styles } = useStyles(); - - const onKeyPress = (event: React.KeyboardEvent) => { - if (event.key === ENTER) { - event.preventDefault(); - addValues(); - } - }; - - const addValues = () => { - const newValues = uniqueValues([ - ...values, - ...parseParameterStrings(inputValues), - ]); - - if (newValues.length === 0) { - setError('values cannot be empty'); - } else if (newValues.some((v) => v.length > 100)) { - setError('values cannot be longer than 100 characters'); - } else { - setError(''); - setInputValues(''); - setValues(newValues); - } - }; - - return ( -
- - Set values (maximum 100 char length per value) - -
-
- { - setError(''); - }} - onChange={(e) => setInputValues(e.target.value)} - placeholder='value1, value2, value3...' - className={styles.input} - error={Boolean(error)} - errorText={error} - data-testid='CONSTRAINT_VALUES_INPUT' - /> -
- -
-
- -
-
- ); -}; - -interface IConstraintValueChipsProps { - values: string[]; - removeValue: (index: number) => void; -} - -const ConstraintValueChips = ({ - values, - removeValue, -}: IConstraintValueChipsProps) => { - const { classes: styles } = useStyles(); - return ( - <> - {values.map((value, index) => { - // Key is not ideal, but we don't have anything guaranteed to - // be unique here. - return ( - - } - key={`${value}-${index}`} - onDelete={() => removeValue(index)} - className={styles.valueChip} - /> - ); - })} - - ); -}; - -const uniqueValues = (values: T[]): T[] => { - return Array.from(new Set(values)); -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts deleted file mode 100644 index 24cbc2b777..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()((theme) => ({ - container: { - display: 'inline-block', - wordBreak: 'break-word', - padding: theme.spacing(0.5, 1), - background: theme.palette.background.paper, - border: `1px solid ${theme.palette.divider}`, - borderRadius: theme.shape.borderRadius, - '&:hover': { - border: `1px solid ${theme.palette.primary.main}`, - }, - }, - value: { - lineHeight: 1.33, - fontSize: theme.fontSizes.smallBody, - }, - description: { - lineHeight: 1.33, - fontSize: theme.fontSizes.smallerBody, - color: theme.palette.action.active, - }, -})); diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx deleted file mode 100644 index cee30550af..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import type { ILegalValue } from 'interfaces/context'; -import { useStyles } from './LegalValueLabel.styles'; -import type React from 'react'; -import { FormControlLabel } from '@mui/material'; - -interface ILegalValueTextProps { - legal: ILegalValue; - control: React.ReactElement; -} - -export const LegalValueLabel = ({ legal, control }: ILegalValueTextProps) => { - const { classes: styles } = useStyles(); - - return ( -
- -
{legal.value}
-
- {legal.description} -
- - } - /> -
- ); -}; - -/** - * @deprecated use NewConstraintAccordion components - */ -export const filterLegalValues = ( - legalValues: ILegalValue[], - filter: string, -): ILegalValue[] => { - return legalValues.filter((legalValue) => { - return legalValue.value.includes(filter); - }); -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx deleted file mode 100644 index 4ea4e866b4..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx +++ /dev/null @@ -1,193 +0,0 @@ -import type { - ILegalValue, - IUnleashContextDefinition, -} from 'interfaces/context'; -import type { IConstraint } from 'interfaces/strategy'; -import { DateSingleValue } from '../DateSingleValue/DateSingleValue.tsx'; -import { FreeTextInput } from '../FreeTextInput/FreeTextInput.tsx'; -import { RestrictiveLegalValues } from '../RestrictiveLegalValues/RestrictiveLegalValues.tsx'; -import { SingleLegalValue } from '../SingleLegalValue/SingleLegalValue.tsx'; -import { SingleValue } from '../SingleValue/SingleValue.tsx'; -import { - IN_OPERATORS_LEGAL_VALUES, - STRING_OPERATORS_FREETEXT, - STRING_OPERATORS_LEGAL_VALUES, - SEMVER_OPERATORS_SINGLE_VALUE, - NUM_OPERATORS_LEGAL_VALUES, - NUM_OPERATORS_SINGLE_VALUE, - SEMVER_OPERATORS_LEGAL_VALUES, - DATE_OPERATORS_SINGLE_VALUE, - IN_OPERATORS_FREETEXT, - type Input, -} from '../useConstraintInput/useConstraintInput.tsx'; -import type React from 'react'; - -interface IResolveInputProps { - contextDefinition: IUnleashContextDefinition; - localConstraint: IConstraint; - constraintValues: string[]; - constraintValue: string; - setValue: (value: string) => void; - setValues: (values: string[]) => void; - setError: React.Dispatch>; - removeValue: (index: number) => void; - input: Input; - error: string; -} - -const resolveLegalValues = ( - values: IConstraint['values'], - legalValues: IUnleashContextDefinition['legalValues'], -): { legalValues: ILegalValue[]; deletedLegalValues: ILegalValue[] } => { - if (legalValues?.length === 0) { - return { - legalValues: [], - deletedLegalValues: [], - }; - } - - const deletedLegalValues = (values || []) - .filter( - (value) => - !(legalValues || []).some( - ({ value: legalValue }) => legalValue === value, - ), - ) - .map((v) => ({ value: v, description: '' })); - - return { - legalValues: legalValues || [], - deletedLegalValues, - }; -}; - -/** - * @deprecated use NewConstraintAccordion components - */ -export const ResolveInput = ({ - input, - contextDefinition, - constraintValues, - constraintValue, - localConstraint, - setValue, - setValues, - setError, - removeValue, - error, -}: IResolveInputProps) => { - const resolveInput = () => { - switch (input) { - case IN_OPERATORS_LEGAL_VALUES: - case STRING_OPERATORS_LEGAL_VALUES: - return ( - <> - - - ); - case NUM_OPERATORS_LEGAL_VALUES: - return ( - <> - Number(legalValue.value), - ) || [] - } - error={error} - setError={setError} - /> - - ); - case SEMVER_OPERATORS_LEGAL_VALUES: - return ( - <> - - - ); - case DATE_OPERATORS_SINGLE_VALUE: - return ( - - ); - case IN_OPERATORS_FREETEXT: - return ( - - ); - case STRING_OPERATORS_FREETEXT: - return ( - <> - - - ); - case NUM_OPERATORS_SINGLE_VALUE: - return ( - - ); - case SEMVER_OPERATORS_SINGLE_VALUE: - return ( - - ); - } - }; - - return <>{resolveInput()}; -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.test.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.test.tsx deleted file mode 100644 index ef81f83352..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.test.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { render } from 'utils/testRenderer'; -import { screen } from '@testing-library/react'; -import { RestrictiveLegalValues } from './RestrictiveLegalValues.tsx'; - -test('should show alert when you have illegal legal values', async () => { - const contextDefinitionValues = [{ value: 'value1' }, { value: 'value2' }]; - const fixedValues = ['value1', 'value2']; - const localValues = ['value1', 'value2']; - const deletedLegalValues = [{ value: 'value1' }]; - - render( - {}} - error={''} - setError={() => {}} - />, - ); - - await screen.findByText( - 'This constraint is using legal values that have been deleted as valid options. If you save changes on this constraint and then save the strategy the following values will be removed:', - ); -}); - -test('Should remove illegal legal values from internal value state when mounting', () => { - const contextDefinitionValues = [{ value: 'value1' }, { value: 'value2' }]; - const fixedValues = ['value1', 'value2']; - let localValues = ['value1', 'value2']; - const deletedLegalValues = [{ value: 'value1' }]; - - const setValues = (values: string[]) => { - localValues = values; - }; - - render( - {}} - />, - ); - - expect(localValues).toEqual(['value2']); -}); diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx deleted file mode 100644 index 970557fb57..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import { useEffect, useState } from 'react'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { Alert, Checkbox, styled } from '@mui/material'; -import { useThemeStyles } from 'themes/themeStyles'; -import { ConstraintValueSearch } from 'component/common/LegacyConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch'; -import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader.tsx'; -import type { ILegalValue } from 'interfaces/context'; -import { - filterLegalValues, - LegalValueLabel, -} from '../LegalValueLabel/LegalValueLabel.tsx'; - -interface IRestrictiveLegalValuesProps { - data: { - legalValues: ILegalValue[]; - deletedLegalValues: ILegalValue[]; - }; - constraintValues: string[]; - values: string[]; - setValues: (values: string[]) => void; - beforeValues?: JSX.Element; - error: string; - setError: React.Dispatch>; -} - -interface IValuesMap { - [key: string]: boolean; -} - -const createValuesMap = (values: string[]): IValuesMap => { - return values.reduce((result: IValuesMap, currentValue: string) => { - if (!result[currentValue]) { - result[currentValue] = true; - } - return result; - }, {}); -}; - -export const getLegalValueSet = (values: ILegalValue[]) => { - return new Set(values.map(({ value }) => value)); -}; - -export const getIllegalValues = ( - constraintValues: string[], - deletedLegalValues: ILegalValue[], -) => { - const deletedValuesSet = getLegalValueSet(deletedLegalValues); - - return constraintValues.filter((value) => deletedValuesSet.has(value)); -}; - -const StyledValuesContainer = styled('div')(({ theme }) => ({ - display: 'flex', - flexWrap: 'wrap', - gap: theme.spacing(1), - padding: theme.spacing(2), - border: `1px solid ${theme.palette.divider}`, - borderRadius: theme.shape.borderRadiusMedium, - maxHeight: '378px', - overflow: 'auto', -})); - -/** - * @deprecated use NewConstraintAccordion components - */ -export const RestrictiveLegalValues = ({ - data, - values, - setValues, - error, - setError, - constraintValues, -}: IRestrictiveLegalValuesProps) => { - const [filter, setFilter] = useState(''); - const { legalValues, deletedLegalValues } = data; - - const filteredValues = filterLegalValues(legalValues, filter); - - // Lazily initialise the values because there might be a lot of them. - const [valuesMap, setValuesMap] = useState(() => createValuesMap(values)); - const { classes: styles } = useThemeStyles(); - - const cleanDeletedLegalValues = (constraintValues: string[]): string[] => { - const deletedValuesSet = getLegalValueSet(deletedLegalValues); - return ( - constraintValues?.filter((value) => !deletedValuesSet.has(value)) || - [] - ); - }; - - const illegalValues = getIllegalValues( - constraintValues, - deletedLegalValues, - ); - - useEffect(() => { - setValuesMap(createValuesMap(values)); - }, [values, setValuesMap, createValuesMap]); - - useEffect(() => { - if (illegalValues.length > 0) { - setValues(cleanDeletedLegalValues(values)); - } - }, []); - - const onChange = (legalValue: string) => { - setError(''); - - if (valuesMap[legalValue]) { - const index = values.findIndex((value) => value === legalValue); - const newValues = [...values]; - newValues.splice(index, 1); - setValues(newValues); - return; - } - - setValues([...cleanDeletedLegalValues(values), legalValue]); - }; - - return ( - <> - 0)} - show={ - - This constraint is using legal values that have been - deleted as valid options. If you save changes on this - constraint and then save the strategy the following - values will be removed: -
    - {illegalValues?.map((value) => ( -
  • {value}
    • - ))} -
- - } - /> - - - Select values from a predefined set - - 100} - show={ - - } - /> - - {filteredValues.map((match) => ( - onChange(match.value)} - name={match.value} - color='primary' - disabled={deletedLegalValues - .map(({ value }) => value) - .includes(match.value)} - /> - } - /> - ))} - - - {error}

} - /> - - ); -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.test.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.test.tsx deleted file mode 100644 index 3ad1d0d4d7..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.test.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { render } from 'utils/testRenderer'; -import { screen } from '@testing-library/react'; -import { SingleLegalValue } from './SingleLegalValue.tsx'; - -test('should show alert when you have illegal legal values', async () => { - const contextDefinitionValues = [{ value: 'value1' }, { value: 'value2' }]; - const fixedValue = 'value1'; - const localValue = 'value1'; - const deletedLegalValues = [{ value: 'value1' }]; - - render( - {}} - type='number' - legalValues={contextDefinitionValues} - error={''} - setError={() => {}} - />, - ); - - await screen.findByText( - 'This constraint is using legal values that have been deleted as a valid option. Please select a new value from the remaining predefined legal values. The constraint will be updated with the new value when you save the strategy.', - ); -}); diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx deleted file mode 100644 index 6fb7985793..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import type React from 'react'; -import { useState } from 'react'; -import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader.tsx'; -import { FormControl, RadioGroup, Radio, Alert } from '@mui/material'; -import { ConstraintValueSearch } from 'component/common/LegacyConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useThemeStyles } from 'themes/themeStyles'; -import type { ILegalValue } from 'interfaces/context'; -import { - LegalValueLabel, - filterLegalValues, -} from '../LegalValueLabel/LegalValueLabel.tsx'; -import { getIllegalValues } from '../RestrictiveLegalValues/RestrictiveLegalValues.tsx'; - -interface ISingleLegalValueProps { - setValue: (value: string) => void; - value?: string; - type: string; - legalValues: ILegalValue[]; - error: string; - setError: React.Dispatch>; - data: { - legalValues: ILegalValue[]; - deletedLegalValues: ILegalValue[]; - }; - constraintValue: string; -} - -/** - * @deprecated use NewConstraintAccordion components - */ -export const SingleLegalValue = ({ - setValue, - value, - type, - legalValues, - error, - setError, - data, - constraintValue, -}: ISingleLegalValueProps) => { - const [filter, setFilter] = useState(''); - const { classes: styles } = useThemeStyles(); - const filteredValues = filterLegalValues(legalValues, filter); - - const { deletedLegalValues } = data; - - const illegalValues = getIllegalValues( - [constraintValue], - deletedLegalValues, - ); - - return ( - <> - 0)} - show={ - ({ marginTop: theme.spacing(1) })} - > - {' '} - This constraint is using legal values that have been - deleted as a valid option. Please select a new value - from the remaining predefined legal values. The - constraint will be updated with the new value when you - save the strategy. - - } - /> - - Add a single {type.toLowerCase()} value - - 100)} - show={ - - } - /> - - { - setError(''); - setValue(e.target.value); - }} - > - {filteredValues.map((match) => ( - } - /> - ))} - - - } - elseShow={ -

No valid legal values available for this operator.

- } - /> - {error}

} - /> - - ); -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleValue/SingleValue.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleValue/SingleValue.tsx deleted file mode 100644 index 6f7312c70c..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleValue/SingleValue.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import Input from 'component/common/Input/Input'; -import { makeStyles } from 'tss-react/mui'; -import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader.tsx'; - -interface ISingleValueProps { - setValue: (value: string) => void; - value?: string; - type: string; - error: string; - setError: React.Dispatch>; -} - -const useStyles = makeStyles()((theme) => ({ - singleValueContainer: { maxWidth: '300px', marginTop: '-1rem' }, - singleValueInput: { - width: '100%', - margin: '1rem 0', - }, -})); - -/** - * @deprecated use NewConstraintAccordion components - */ -export const SingleValue = ({ - setValue, - value, - type, - error, - setError, -}: ISingleValueProps) => { - const { classes: styles } = useStyles(); - return ( - <> - - Add a single {type.toLowerCase()} value - -
- { - setError(''); - setValue(e.target.value.trim()); - }} - onFocus={() => setError('')} - placeholder={`Enter a single ${type} value`} - className={styles.singleValueInput} - error={Boolean(error)} - errorText={error} - /> -
- - ); -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/constraintValidators.test.ts b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/constraintValidators.test.ts deleted file mode 100644 index 5d926831a0..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/constraintValidators.test.ts +++ /dev/null @@ -1,110 +0,0 @@ -import { - numberValidatorGenerator, - semVerValidatorGenerator, - dateValidatorGenerator, - stringValidatorGenerator, -} from './constraintValidators.js'; - -test('numbervalidator should accept 0', () => { - const numValidator = numberValidatorGenerator(0); - const [result, err] = numValidator(); - - expect(result).toBe(true); - expect(err).toBe(''); -}); - -test('number validator should reject value that cannot be parsed to number', () => { - const numValidator = numberValidatorGenerator('testa31'); - const [result, err] = numValidator(); - - expect(result).toBe(false); - expect(err).toBe('Value must be a number'); -}); - -test('number validator should reject NaN', () => { - const numValidator = numberValidatorGenerator(Number.NaN); - const [result, err] = numValidator(); - - expect(result).toBe(false); - expect(err).toBe('Value must be a number'); -}); - -test('number validator should accept value that can be parsed to number', () => { - const numValidator = numberValidatorGenerator('31'); - const [result, err] = numValidator(); - - expect(result).toBe(true); - expect(err).toBe(''); -}); - -test('number validator should accept float values', () => { - const numValidator = numberValidatorGenerator('31.12'); - const [result, err] = numValidator(); - - expect(result).toBe(true); - expect(err).toBe(''); -}); - -test('semver validator should reject prefixed values', () => { - const semVerValidator = semVerValidatorGenerator('v1.4.2'); - const [result, err] = semVerValidator(); - - expect(result).toBe(false); - expect(err).toBe('Value is not a valid semver. For example 1.2.4'); -}); - -test('semver validator should reject partial semver values', () => { - const semVerValidator = semVerValidatorGenerator('4.2'); - const [result, err] = semVerValidator(); - - expect(result).toBe(false); - expect(err).toBe('Value is not a valid semver. For example 1.2.4'); -}); - -test('semver validator should accept semver complient values', () => { - const semVerValidator = semVerValidatorGenerator('1.4.2'); - const [result, err] = semVerValidator(); - - expect(result).toBe(true); - expect(err).toBe(''); -}); - -test('date validator should reject invalid date', () => { - const dateValidator = dateValidatorGenerator('114mydate2005'); - const [result, err] = dateValidator(); - - expect(result).toBe(false); - expect(err).toBe('Value must be a valid date matching RFC3339'); -}); - -test('date validator should accept valid date', () => { - const dateValidator = dateValidatorGenerator('2022-03-03T10:15:23.262Z'); - const [result, err] = dateValidator(); - - expect(result).toBe(true); - expect(err).toBe(''); -}); - -test('string validator should accept a list of strings', () => { - const stringValidator = stringValidatorGenerator(['1234', '4121']); - const [result, err] = stringValidator(); - - expect(result).toBe(true); - expect(err).toBe(''); -}); - -test('string validator should reject values that are not arrays', () => { - const stringValidator = stringValidatorGenerator(4); - const [result, err] = stringValidator(); - - expect(result).toBe(false); - expect(err).toBe('Values must be a list of strings'); -}); - -test('string validator should reject arrays that are not arrays of strings', () => { - const stringValidator = stringValidatorGenerator(['test', Number.NaN, 5]); - const [result, err] = stringValidator(); - - expect(result).toBe(false); - expect(err).toBe('Values must be a list of strings'); -}); diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/constraintValidators.ts b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/constraintValidators.ts deleted file mode 100644 index 75d528441c..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/constraintValidators.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { isValid, parseISO } from 'date-fns'; -import semver from 'semver'; - -export type ConstraintValidatorOutput = [boolean, string]; - -export const numberValidatorGenerator = (value: unknown) => { - return (): ConstraintValidatorOutput => { - const converted = Number(value); - - if (typeof converted !== 'number' || Number.isNaN(converted)) { - return [false, 'Value must be a number']; - } - - return [true, '']; - }; -}; - -export const stringValidatorGenerator = (values: unknown) => { - return (): ConstraintValidatorOutput => { - const error: ConstraintValidatorOutput = [ - false, - 'Values must be a list of strings', - ]; - if (!Array.isArray(values)) { - return error; - } - - if (!values.every((value) => typeof value === 'string')) { - return error; - } - - return [true, '']; - }; -}; - -export const semVerValidatorGenerator = (value: string) => { - return (): ConstraintValidatorOutput => { - const isCleanValue = semver.clean(value) === value; - - if (!semver.valid(value) || !isCleanValue) { - return [false, 'Value is not a valid semver. For example 1.2.4']; - } - - return [true, '']; - }; -}; - -export const dateValidatorGenerator = (value: string) => { - return (): ConstraintValidatorOutput => { - if (!isValid(parseISO(value))) { - return [false, 'Value must be a valid date matching RFC3339']; - } - return [true, '']; - }; -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/useConstraintInput.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/useConstraintInput.tsx deleted file mode 100644 index 5d7345fa4e..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/useConstraintInput.tsx +++ /dev/null @@ -1,162 +0,0 @@ -import { - inOperators, - stringOperators, - numOperators, - semVerOperators, - dateOperators, -} from 'constants/operators'; -import type { IUnleashContextDefinition } from 'interfaces/context'; -import type { IConstraint } from 'interfaces/strategy'; -import type React from 'react'; -import { useCallback, useEffect, useState } from 'react'; -import { oneOf } from 'utils/oneOf'; - -import { - numberValidatorGenerator, - stringValidatorGenerator, - semVerValidatorGenerator, - dateValidatorGenerator, - type ConstraintValidatorOutput, -} from './constraintValidators.ts'; -import { nonEmptyArray } from 'utils/nonEmptyArray'; - -interface IUseConstraintInputProps { - contextDefinition: IUnleashContextDefinition; - localConstraint: IConstraint; -} - -interface IUseConstraintOutput { - input: Input; - error: string; - validator: () => ConstraintValidatorOutput; - setError: React.Dispatch>; -} - -export const IN_OPERATORS_LEGAL_VALUES = 'IN_OPERATORS_LEGAL_VALUES'; -export const STRING_OPERATORS_LEGAL_VALUES = 'STRING_OPERATORS_LEGAL_VALUES'; -export const NUM_OPERATORS_LEGAL_VALUES = 'NUM_OPERATORS_LEGAL_VALUES'; -export const SEMVER_OPERATORS_LEGAL_VALUES = 'SEMVER_OPERATORS_LEGAL_VALUES'; -export const DATE_OPERATORS_SINGLE_VALUE = 'DATE_OPERATORS_SINGLE_VALUE'; -export const IN_OPERATORS_FREETEXT = 'IN_OPERATORS_FREETEXT'; -export const STRING_OPERATORS_FREETEXT = 'STRING_OPERATORS_FREETEXT'; -export const NUM_OPERATORS_SINGLE_VALUE = 'NUM_OPERATORS_SINGLE_VALUE'; -export const SEMVER_OPERATORS_SINGLE_VALUE = 'SEMVER_OPERATORS_SINGLE_VALUE'; - -export type Input = - | 'IN_OPERATORS_LEGAL_VALUES' - | 'STRING_OPERATORS_LEGAL_VALUES' - | 'NUM_OPERATORS_LEGAL_VALUES' - | 'SEMVER_OPERATORS_LEGAL_VALUES' - | 'DATE_OPERATORS_SINGLE_VALUE' - | 'IN_OPERATORS_FREETEXT' - | 'STRING_OPERATORS_FREETEXT' - | 'NUM_OPERATORS_SINGLE_VALUE' - | 'SEMVER_OPERATORS_SINGLE_VALUE'; - -const NUMBER_VALIDATOR = 'NUMBER_VALIDATOR'; -const SEMVER_VALIDATOR = 'SEMVER_VALIDATOR'; -const STRING_ARRAY_VALIDATOR = 'STRING_ARRAY_VALIDATOR'; -const DATE_VALIDATOR = 'DATE_VALIDATOR'; - -type Validator = - | 'NUMBER_VALIDATOR' - | 'SEMVER_VALIDATOR' - | 'STRING_ARRAY_VALIDATOR' - | 'DATE_VALIDATOR'; - -/** - * @deprecated use NewConstraintAccordion components - */ -export const useConstraintInput = ({ - contextDefinition, - localConstraint, -}: IUseConstraintInputProps): IUseConstraintOutput => { - const [input, setInput] = useState(IN_OPERATORS_LEGAL_VALUES); - const [validator, setValidator] = useState( - STRING_ARRAY_VALIDATOR, - ); - const [error, setError] = useState(''); - - const resolveInputType = useCallback(() => { - if ( - nonEmptyArray(contextDefinition.legalValues) && - oneOf(inOperators, localConstraint.operator) - ) { - setInput(IN_OPERATORS_LEGAL_VALUES); - } else if ( - nonEmptyArray(contextDefinition.legalValues) && - oneOf(stringOperators, localConstraint.operator) - ) { - setInput(STRING_OPERATORS_LEGAL_VALUES); - } else if ( - nonEmptyArray(contextDefinition.legalValues) && - oneOf(numOperators, localConstraint.operator) - ) { - setInput(NUM_OPERATORS_LEGAL_VALUES); - } else if ( - nonEmptyArray(contextDefinition.legalValues) && - oneOf(semVerOperators, localConstraint.operator) - ) { - setInput(SEMVER_OPERATORS_LEGAL_VALUES); - } else if (oneOf(dateOperators, localConstraint.operator)) { - setInput(DATE_OPERATORS_SINGLE_VALUE); - } else if (oneOf(inOperators, localConstraint.operator)) { - setInput(IN_OPERATORS_FREETEXT); - } else if (oneOf(stringOperators, localConstraint.operator)) { - setInput(STRING_OPERATORS_FREETEXT); - } else if (oneOf(numOperators, localConstraint.operator)) { - setInput(NUM_OPERATORS_SINGLE_VALUE); - } else if (oneOf(semVerOperators, localConstraint.operator)) { - setInput(SEMVER_OPERATORS_SINGLE_VALUE); - } - }, [localConstraint, contextDefinition]); - - const resolveValidator = () => { - switch (validator) { - case NUMBER_VALIDATOR: - return numberValidatorGenerator(localConstraint.value); - case STRING_ARRAY_VALIDATOR: - return stringValidatorGenerator(localConstraint.values || []); - case SEMVER_VALIDATOR: - return semVerValidatorGenerator(localConstraint.value || ''); - case DATE_VALIDATOR: - return dateValidatorGenerator(localConstraint.value || ''); - } - }; - - const resolveValidatorType = useCallback( - (operator: string) => { - if (oneOf(numOperators, operator)) { - setValidator(NUMBER_VALIDATOR); - } - - if (oneOf([...stringOperators, ...inOperators], operator)) { - setValidator(STRING_ARRAY_VALIDATOR); - } - - if (oneOf(semVerOperators, operator)) { - setValidator(SEMVER_VALIDATOR); - } - - if (oneOf(dateOperators, operator)) { - setValidator(DATE_VALIDATOR); - } - }, - [setValidator], - ); - - useEffect(() => { - resolveValidatorType(localConstraint.operator); - }, [ - localConstraint.operator, - localConstraint.value, - localConstraint.values, - resolveValidatorType, - ]); - - useEffect(() => { - resolveInputType(); - }, [contextDefinition, localConstraint, resolveInputType]); - - return { input, error, validator: resolveValidator(), setError }; -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx deleted file mode 100644 index 646a27da61..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx +++ /dev/null @@ -1,212 +0,0 @@ -import type { IConstraint } from 'interfaces/strategy'; - -import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; -import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect'; -import { ConstraintIcon } from 'component/common/LegacyConstraintAccordion/ConstraintIcon'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { - dateOperators, - DATE_AFTER, - IN, - stringOperators, -} from 'constants/operators'; -import { resolveText } from './helpers.ts'; -import { oneOf } from 'utils/oneOf'; -import type React from 'react'; -import { useEffect, useState } from 'react'; -import type { Operator } from 'constants/operators'; -import { ConstraintOperatorSelect } from 'component/common/LegacyConstraintAccordion/ConstraintOperatorSelect'; -import { - operatorsForContext, - CURRENT_TIME_CONTEXT_FIELD, -} from 'utils/operatorsForContext'; -import { InvertedOperatorButton } from '../StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx'; -import { CaseSensitiveButton } from '../StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx'; -import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx'; -import { styled } from '@mui/material'; - -interface IConstraintAccordionViewHeader { - localConstraint: IConstraint; - setContextName: (contextName: string) => void; - setOperator: (operator: Operator) => void; - setLocalConstraint: React.Dispatch>; - action: string; - compact: boolean; - onDelete?: () => void; - setInvertedOperator: () => void; - setCaseInsensitive: () => void; -} - -const StyledHeaderContainer = styled('div')(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - width: '100%', - [theme.breakpoints.down('sm')]: { - flexDirection: 'column', - alignItems: 'center', - position: 'relative', - }, -})); -const StyledSelectContainer = styled('div')(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - [theme.breakpoints.down(770)]: { - flexDirection: 'column', - }, -})); -const StyledBottomSelect = styled('div')(({ theme }) => ({ - [theme.breakpoints.down(770)]: { - marginTop: theme.spacing(2), - }, - display: 'inline-flex', -})); - -const StyledHeaderSelect = styled('div')(({ theme }) => ({ - marginRight: theme.spacing(2), - width: '200px', - [theme.breakpoints.between(1101, 1365)]: { - width: '170px', - marginRight: theme.spacing(1), - }, -})); - -const StyledGeneralSelect = styled(GeneralSelect)(({ theme }) => ({ - marginRight: theme.spacing(2), - width: '200px', - [theme.breakpoints.between(1101, 1365)]: { - width: '170px', - marginRight: theme.spacing(1), - }, -})); - -const StyledHeaderText = styled('p')(({ theme }) => ({ - maxWidth: '400px', - fontSize: theme.fontSizes.smallBody, - [theme.breakpoints.down('xl')]: { - display: 'none', - }, -})); - -/** - * @deprecated use NewConstraintAccordion components - */ -export const ConstraintAccordionEditHeader = ({ - compact, - localConstraint, - setLocalConstraint, - setContextName, - setOperator, - onDelete, - setInvertedOperator, - setCaseInsensitive, -}: IConstraintAccordionViewHeader) => { - const { context } = useUnleashContext(); - const { contextName, operator } = localConstraint; - const [showCaseSensitiveButton, setShowCaseSensitiveButton] = - useState(false); - - /* We need a special case to handle the currentTime context field. Since - this field will be the only one to allow DATE_BEFORE and DATE_AFTER operators - this will check if the context field is the current time context field AND check - if it is not already using one of the date operators (to not overwrite if there is existing - data). */ - useEffect(() => { - if ( - contextName === CURRENT_TIME_CONTEXT_FIELD && - !oneOf(dateOperators, operator) - ) { - setLocalConstraint((prev) => ({ - ...prev, - operator: DATE_AFTER, - value: new Date().toISOString(), - })); - } else if ( - contextName !== CURRENT_TIME_CONTEXT_FIELD && - oneOf(dateOperators, operator) - ) { - setOperator(IN); - } - - if (oneOf(stringOperators, operator)) { - setShowCaseSensitiveButton(true); - } else { - setShowCaseSensitiveButton(false); - } - }, [contextName, setOperator, operator, setLocalConstraint]); - - if (!context) { - return null; - } - - const constraintNameOptions = context.map((context) => { - return { key: context.name, label: context.name }; - }); - - const onOperatorChange = (operator: Operator) => { - if (oneOf(stringOperators, operator)) { - setShowCaseSensitiveButton(true); - } else { - setShowCaseSensitiveButton(false); - } - - if (oneOf(dateOperators, operator)) { - setLocalConstraint((prev) => ({ - ...prev, - operator: operator, - value: new Date().toISOString(), - })); - } else { - setOperator(operator); - } - }; - - return ( - - - -
- -
- - - - - - - } - /> - - - - {resolveText(operator, contextName)} - - } - /> - - - ); -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/helpers.ts b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/helpers.ts deleted file mode 100644 index e9e1f2eee1..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/helpers.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { - DATE_BEFORE, - DATE_AFTER, - IN, - NOT_IN, - NUM_EQ, - NUM_GT, - NUM_GTE, - NUM_LT, - NUM_LTE, - STR_CONTAINS, - STR_ENDS_WITH, - STR_STARTS_WITH, - SEMVER_EQ, - SEMVER_GT, - SEMVER_LT, - type Operator, -} from 'constants/operators'; - -export const resolveText = (operator: Operator, contextName: string) => { - const base = `To satisfy this constraint, values passed into the SDK as ${contextName} must`; - - if (operator === IN) { - return `${base} include:`; - } - - if (operator === NOT_IN) { - return `${base} not include:`; - } - - if (operator === STR_ENDS_WITH) { - return `${base} end with:`; - } - - if (operator === STR_STARTS_WITH) { - return `${base} start with:`; - } - - if (operator === STR_CONTAINS) { - return `${base} contain:`; - } - - if (operator === NUM_EQ) { - return `${base} match:`; - } - - if (operator === NUM_GT) { - return `${base} be greater than:`; - } - - if (operator === NUM_GTE) { - return `${base} be greater than or equal to:`; - } - - if (operator === NUM_LT) { - return `${base} be less than:`; - } - - if (operator === NUM_LTE) { - return `${base} be less than or equal to:`; - } - - if (operator === DATE_AFTER) { - return `${base} be after the following date`; - } - - if (operator === DATE_BEFORE) { - return `${base} be before the following date:`; - } - - if (operator === SEMVER_EQ) { - return `${base} match the following version:`; - } - - if (operator === SEMVER_GT) { - return `${base} be greater than the following version:`; - } - - if (operator === SEMVER_LT) { - return `${base} be less than the following version:`; - } -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx deleted file mode 100644 index d51431afff..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { Tooltip, Box } from '@mui/material'; -import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg'; -import { ReactComponent as CaseSensitiveOff } from 'assets/icons/24_Text format off.svg'; -import { - StyledToggleButtonOff, - StyledToggleButtonOn, -} from '../StyledToggleButton.tsx'; -import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender.tsx'; -import type { IConstraint } from 'interfaces/strategy'; - -interface CaseSensitiveButtonProps { - localConstraint: IConstraint; - setCaseInsensitive: () => void; -} - -/** - * @deprecated use NewConstraintAccordion components - */ -export const CaseSensitiveButton = ({ - localConstraint, - setCaseInsensitive, -}: CaseSensitiveButtonProps) => ( - - - - - - } - elseShow={ - - - - } - /> - - -); diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx deleted file mode 100644 index 1e5fab3e01..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { Box, Tooltip } from '@mui/material'; -import { ReactComponent as NegatedOnIcon } from 'assets/icons/not_operator_selected.svg'; -import { ReactComponent as NegatedOffIcon } from 'assets/icons/not_operator_unselected.svg'; -import type { IConstraint } from 'interfaces/strategy'; -import { - StyledToggleButtonOff, - StyledToggleButtonOn, -} from '../StyledToggleButton.tsx'; -import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender.tsx'; - -interface InvertedOperatorButtonProps { - localConstraint: IConstraint; - setInvertedOperator: () => void; -} - -/** - * @deprecated use NewConstraintAccordion components - */ -export const InvertedOperatorButton = ({ - localConstraint, - setInvertedOperator, -}: InvertedOperatorButtonProps) => ( - - - - - - } - elseShow={ - - - - } - /> - - -); diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx deleted file mode 100644 index ce370ce9a8..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { styled } from '@mui/system'; -import { IconButton } from '@mui/material'; - -/** - * @deprecated use NewConstraintAccordion components - */ -export const StyledToggleButtonOff = styled(IconButton)(({ theme }) => ({ - width: '28px', - minWidth: '28px', - maxWidth: '28px', - height: 'auto', - backgroundColor: theme.palette.background.paper, - borderRadius: theme.shape.borderRadius, - padding: '0 1px 0', - marginRight: '1rem', - '&:hover': { - background: theme.palette.background.application, - }, - [theme.breakpoints.between(1101, 1365)]: { - marginRight: '0.5rem', - alignItems: 'center', - }, -})); - -/** - * @deprecated use NewConstraintAccordion components - */ -export const StyledToggleButtonOn = styled(IconButton)(({ theme }) => ({ - width: '28px', - minWidth: '28px', - maxWidth: '28px', - color: theme.palette.primary.contrastText, - backgroundColor: theme.palette.primary.main, - borderRadius: theme.shape.borderRadius, - marginRight: '1rem', - padding: '0 1px 0', - '&:hover': { - color: theme.palette.primary.contrastText, - backgroundColor: theme.palette.primary.main, - }, - [theme.breakpoints.between(1101, 1365)]: { - marginRight: '0.5rem', - alignItems: 'center', - }, -})); diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx deleted file mode 100644 index 0e6b0602f5..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import type React from 'react'; -import { IconButton, styled, Tooltip } from '@mui/material'; -import Delete from '@mui/icons-material/Delete'; -import Edit from '@mui/icons-material/Edit'; -import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender.tsx'; - -interface ConstraintAccordionHeaderActionsProps { - onDelete?: () => void; - onEdit?: () => void; - disableEdit?: boolean; - disableDelete?: boolean; -} - -const StyledHeaderActions = styled('div')(({ theme }) => ({ - marginLeft: 'auto', - whiteSpace: 'nowrap', - [theme.breakpoints.down('sm')]: { - display: 'none', - }, -})); - -/** - * @deprecated use NewConstraintAccordion components - */ -export const ConstraintAccordionHeaderActions = ({ - onEdit, - onDelete, - disableDelete = false, - disableEdit = false, -}: ConstraintAccordionHeaderActionsProps) => { - const onEditClick = - onEdit && - ((event: React.SyntheticEvent) => { - event.stopPropagation(); - onEdit(); - }); - - const onDeleteClick = - onDelete && - ((event: React.SyntheticEvent) => { - event.stopPropagation(); - onDelete(); - }); - - return ( - - - - - - - } - /> - - - - - - } - /> - - ); -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx deleted file mode 100644 index 8d0eb3af40..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import { useState } from 'react'; -import { - Accordion, - AccordionSummary, - AccordionDetails, - type SxProps, - type Theme, - styled, -} from '@mui/material'; -import type { IConstraint } from 'interfaces/strategy'; -import { ConstraintAccordionViewBody } from './ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx'; -import { ConstraintAccordionViewHeader } from 'component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader'; -import { oneOf } from 'utils/oneOf'; -import { - dateOperators, - numOperators, - semVerOperators, -} from 'constants/operators'; - -interface IConstraintAccordionViewProps { - constraint: IConstraint; - onDelete?: () => void; - onEdit?: () => void; - sx?: SxProps; - compact?: boolean; - disabled?: boolean; - renderAfter?: JSX.Element; -} - -const StyledAccordion = styled(Accordion)(({ theme }) => ({ - border: `1px solid ${theme.palette.divider}`, - borderRadius: theme.shape.borderRadiusMedium, - backgroundColor: 'transparent', - boxShadow: 'none', - margin: 0, - '&:before': { - opacity: '0', - }, -})); - -const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({ - '& .root': { - border: 'none', - padding: theme.spacing(0.5, 3), - '&:hover .valuesExpandLabel': { - textDecoration: 'underline', - }, - }, - userSelect: 'auto', - WebkitUserSelect: 'auto', - MozUserSelect: 'auto', - MsUserSelect: 'auto', -})); -const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({ - borderTop: `1px dashed ${theme.palette.divider}`, - display: 'flex', - flexDirection: 'column', -})); - -const StyledWrapper = styled('div')({ - display: 'flex', - flexDirection: 'column', - width: '100%', -}); - -/** - * @deprecated use NewConstraintAccordion components - */ -export const ConstraintAccordionView = ({ - constraint, - onEdit, - onDelete, - sx = undefined, - compact = false, - disabled = false, - renderAfter, -}: IConstraintAccordionViewProps) => { - const [expandable, setExpandable] = useState(true); - const [expanded, setExpanded] = useState(false); - - const singleValue = oneOf( - [...semVerOperators, ...numOperators, ...dateOperators], - constraint.operator, - ); - const handleClick = () => { - if (expandable) { - setExpanded(!expanded); - } - }; - - return ( - - - - - {renderAfter} - - - - - - - - ); -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx deleted file mode 100644 index f0ec413269..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import type { IConstraint } from 'interfaces/strategy'; -import { formatConstraintValue } from 'utils/formatConstraintValue'; -import { useLocationSettings } from 'hooks/useLocationSettings'; -import { MultipleValues } from './MultipleValues/MultipleValues.tsx'; -import { SingleValue } from './SingleValue/SingleValue.tsx'; -import { styled } from '@mui/material'; - -interface IConstraintAccordionViewBodyProps { - constraint: IConstraint; -} - -const StyledValueContainer = styled('div')(({ theme }) => ({ - padding: theme.spacing(2, 0), - maxHeight: '400px', - overflowY: 'auto', -})); - -/** - * @deprecated use NewConstraintAccordion components - */ -export const ConstraintAccordionViewBody = ({ - constraint, -}: IConstraintAccordionViewBodyProps) => { - const { locationSettings } = useLocationSettings(); - - return ( -
- - - - -
- ); -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/MultipleValues/MultipleValues.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/MultipleValues/MultipleValues.tsx deleted file mode 100644 index 80f55b8667..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/MultipleValues/MultipleValues.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { useState } from 'react'; -import { Chip, styled } from '@mui/material'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import StringTruncator from 'component/common/StringTruncator/StringTruncator'; -import { ConstraintValueSearch } from '../../../ConstraintValueSearch/ConstraintValueSearch.tsx'; - -interface IMultipleValuesProps { - values: string[] | undefined; -} - -const StyledTruncator = styled(StringTruncator)({ - whiteSpace: 'pre', -}); - -const StyledChip = styled(Chip)(({ theme }) => ({ - margin: theme.spacing(0, 1, 1, 0), -})); - -/** - * @deprecated use NewConstraintAccordion components - */ -export const MultipleValues = ({ values }: IMultipleValuesProps) => { - const [filter, setFilter] = useState(''); - - if (!values || values.length === 0) return null; - - return ( - <> - 20} - show={ - - } - /> - {values - .filter((value) => value.includes(filter)) - .map((value, index) => ( - - } - /> - ))} - - ); -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/SingleValue/SingleValue.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/SingleValue/SingleValue.tsx deleted file mode 100644 index 11d9f67492..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/SingleValue/SingleValue.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { Chip, styled } from '@mui/material'; -import StringTruncator from 'component/common/StringTruncator/StringTruncator'; - -interface ISingleValueProps { - value: string | undefined; - operator: string; -} - -const StyledDiv = styled('div')(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - [theme.breakpoints.down(600)]: { flexDirection: 'column' }, -})); - -const StyledParagraph = styled('p')(({ theme }) => ({ - marginRight: theme.spacing(1.5), - [theme.breakpoints.down(600)]: { - marginBottom: theme.spacing(1.5), - marginRight: 0, - }, -})); - -const StyledChip = styled(Chip)(({ theme }) => ({ - margin: theme.spacing(0, 1, 1, 0), -})); - -/** - * @deprecated use NewConstraintAccordion components - */ -export const SingleValue = ({ value, operator }: ISingleValueProps) => { - if (!value) return null; - - return ( - - Value must be {operator}{' '} - - } - /> - - ); -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintIcon.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintIcon.tsx deleted file mode 100644 index ff0119fde3..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintIcon.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import type { VFC } from 'react'; -import { Box } from '@mui/material'; -import TrackChanges from '@mui/icons-material/TrackChanges'; - -interface IConstraintIconProps { - compact?: boolean; - disabled?: boolean; -} - -/** - * @deprecated use NewConstraintAccordion components - */ -export const ConstraintIcon: VFC = ({ - compact, - disabled, -}) => ( - ({ - backgroundColor: disabled - ? theme.palette.neutral.border - : 'primary.light', - p: compact ? '1px' : '2px', - borderRadius: '50%', - width: compact ? '18px' : '24px', - height: compact ? '18px' : '24px', - marginRight: '13px', - })} - > - ({ - fill: theme.palette.common.white, - display: 'block', - width: compact ? theme.spacing(2) : theme.spacing(2.5), - height: compact ? theme.spacing(2) : theme.spacing(2.5), - })} - /> - -); diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx deleted file mode 100644 index 12c2a218e1..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import type { IConstraint } from 'interfaces/strategy'; -import { formatOperatorDescription } from 'component/common/LegacyConstraintAccordion/ConstraintOperator/formatOperatorDescription'; -import { styled } from '@mui/material'; - -interface IConstraintOperatorProps { - constraint: IConstraint; - hasPrefix?: boolean; - disabled?: boolean; -} - -const StyledContainer = styled('div')(({ theme }) => ({ - padding: theme.spacing(0.5, 1.5), - borderRadius: theme.shape.borderRadius, - backgroundColor: theme.palette.background.elevation2, - lineHeight: 1.25, -})); - -const StyledName = styled('p', { - shouldForwardProp: (prop) => prop !== 'disabled', -})<{ disabled: boolean }>(({ theme, disabled }) => ({ - fontSize: theme.fontSizes.smallBody, - lineHeight: 17 / 14, - color: disabled ? theme.palette.text.secondary : theme.palette.text.primary, -})); - -const StyledText = styled('p', { - shouldForwardProp: (prop) => prop !== 'disabled', -})<{ disabled: boolean }>(({ theme, disabled }) => ({ - fontSize: theme.fontSizes.smallerBody, - color: disabled ? theme.palette.text.secondary : theme.palette.neutral.main, -})); - -/** - * @deprecated use NewConstraintAccordion components - */ -export const ConstraintOperator = ({ - constraint, - hasPrefix, - disabled = false, -}: IConstraintOperatorProps) => { - const operatorName = constraint.operator; - const operatorText = formatOperatorDescription(constraint.operator); - - return ( - - {operatorName} - {operatorText} - - ); -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintOperator/formatOperatorDescription.ts b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintOperator/formatOperatorDescription.ts deleted file mode 100644 index 5e01186ad6..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintOperator/formatOperatorDescription.ts +++ /dev/null @@ -1,47 +0,0 @@ -import type { Operator } from 'constants/operators'; - -export const formatOperatorDescription = ( - operator: Operator, - inverted?: boolean, -): string => { - if (inverted) { - return invertedConstraintOperatorDescriptions[operator]; - } - return constraintOperatorDescriptions[operator]; -}; - -const constraintOperatorDescriptions = { - IN: 'is one of', - NOT_IN: 'is not one of', - STR_CONTAINS: 'is a string that contains', - STR_STARTS_WITH: 'is a string that starts with', - STR_ENDS_WITH: 'is a string that ends with', - NUM_EQ: 'is a number equal to', - NUM_GT: 'is a number greater than', - NUM_GTE: 'is a number greater than or equal to', - NUM_LT: 'is a number less than', - NUM_LTE: 'is a number less than or equal to', - DATE_BEFORE: 'is a date before', - DATE_AFTER: 'is a date after', - SEMVER_EQ: 'is a SemVer equal to', - SEMVER_GT: 'is a SemVer greater than', - SEMVER_LT: 'is a SemVer less than', -}; - -const invertedConstraintOperatorDescriptions = { - IN: 'is not one of', - NOT_IN: 'is one of', - STR_CONTAINS: 'is a string that does not contain', - STR_STARTS_WITH: 'is a string that does not start with', - STR_ENDS_WITH: 'is a string that does not end with', - NUM_EQ: 'is a number not equal to', - NUM_GT: 'is a number not greater than', - NUM_GTE: 'is a number less than', - NUM_LT: 'is a number not less than', - NUM_LTE: 'is a number greater than', - DATE_BEFORE: 'is a date not before', - DATE_AFTER: 'is a date not after', - SEMVER_EQ: 'is a SemVer not equal to', - SEMVER_GT: 'is a SemVer not greater than', - SEMVER_LT: 'is a SemVer not less than', -}; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintOperatorSelect.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintOperatorSelect.tsx deleted file mode 100644 index cfcaa12351..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintOperatorSelect.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import { - Select, - MenuItem, - FormControl, - InputLabel, - type SelectChangeEvent, - styled, -} from '@mui/material'; -import { - type Operator, - stringOperators, - semVerOperators, - dateOperators, - numOperators, - inOperators, -} from 'constants/operators'; -import { useState } from 'react'; -import { formatOperatorDescription } from 'component/common/LegacyConstraintAccordion/ConstraintOperator/formatOperatorDescription'; - -interface IConstraintOperatorSelectProps { - options: Operator[]; - value: Operator; - onChange: (value: Operator) => void; -} - -const StyledValueContainer = styled('div')(({ theme }) => ({ - lineHeight: 1.1, - marginTop: -2, - marginBottom: -10, -})); - -const StyledLabel = styled('div')(({ theme }) => ({ - fontSize: theme.fontSizes.smallBody, -})); - -const StyledDescription = styled('div')(({ theme }) => ({ - fontSize: theme.fontSizes.smallerBody, - color: theme.palette.neutral.main, - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', -})); - -const StyledFormInput = styled(FormControl)(({ theme }) => ({ - [theme.breakpoints.between(1101, 1365)]: { - width: '170px', - marginRight: theme.spacing(0.5), - }, -})); - -const StyledMenuItem = styled(MenuItem, { - shouldForwardProp: (prop) => prop !== 'separator', -})<{ separator: boolean }>(({ theme, separator }) => - separator - ? { - position: 'relative', - overflow: 'visible', - marginTop: theme.spacing(2), - '&:before': { - content: '""', - display: 'block', - position: 'absolute', - top: theme.spacing(-1), - left: 0, - right: 0, - borderTop: '1px solid', - borderTopColor: theme.palette.divider, - }, - } - : {}, -); - -const StyledOptionContainer = styled('div')(({ theme }) => ({ - lineHeight: 1.2, -})); - -/** - * @deprecated use NewConstraintAccordion components - */ -export const ConstraintOperatorSelect = ({ - options, - value, - onChange, -}: IConstraintOperatorSelectProps) => { - const [open, setOpen] = useState(false); - - const onSelectChange = (event: SelectChangeEvent) => { - onChange(event.target.value as Operator); - }; - - const renderValue = () => { - return ( - - {value} - - {formatOperatorDescription(value)} - - - ); - }; - - return ( - - Operator - - - ); -}; - -const needSeparatorAbove = (options: Operator[], option: Operator): boolean => { - if (option === options[0]) { - return false; - } - - return operatorGroups.some((group) => { - return group[0] === option; - }); -}; - -const operatorGroups = [ - inOperators, - stringOperators, - numOperators, - dateOperators, - semVerOperators, -]; diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch.tsx deleted file mode 100644 index 60e3c9b8a9..0000000000 --- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { TextField, InputAdornment } from '@mui/material'; -import Search from '@mui/icons-material/Search'; - -interface IConstraintValueSearchProps { - filter: string; - setFilter: React.Dispatch>; -} - -/** - * @deprecated use NewConstraintAccordion components - */ -export const ConstraintValueSearch = ({ - filter, - setFilter, -}: IConstraintValueSearchProps) => { - return ( -
-
- setFilter(e.target.value)} - placeholder='Filter values' - style={{ - width: '100%', - margin: '1rem 0', - }} - variant='outlined' - size='small' - InputProps={{ - startAdornment: ( - - - - ), - }} - /> -
-
- ); -};