diff --git a/.prettierrc b/.prettierrc index c83269b73e..80a8c69ce7 100644 --- a/.prettierrc +++ b/.prettierrc @@ -6,7 +6,7 @@ "jsxSingleQuote": false, "trailingComma": "all", "semi": true, - "printWidth": 120, + "printWidth": 100, "tabWidth": 2, "useTabs": false, "endOfLine": "lf" diff --git a/src/__mocks__/EditorController.tsx b/src/__mocks__/EditorController.tsx index 9fc9f3688c..7c6aa7b99e 100644 --- a/src/__mocks__/EditorController.tsx +++ b/src/__mocks__/EditorController.tsx @@ -2,5 +2,9 @@ import { Input } from '@mui/material'; import { EditorProps } from 'md-editor-rt'; export const StyledMdEditor = ({ modelValue, onChange, sanitize }: EditorProps) => ( - onChange?.(e.target.value)} multiline /> + onChange?.(e.target.value)} + multiline + /> ); diff --git a/src/modules/Auth/features/Login/LockForm/LockForm.tsx b/src/modules/Auth/features/Login/LockForm/LockForm.tsx index d57dd17135..5c47fe5692 100644 --- a/src/modules/Auth/features/Login/LockForm/LockForm.tsx +++ b/src/modules/Auth/features/Login/LockForm/LockForm.tsx @@ -7,7 +7,13 @@ import { yupResolver } from '@hookform/resolvers/yup'; import { SignIn } from 'api'; import { useAppDispatch } from 'redux/store'; import { InputController } from 'shared/components/FormComponents'; -import { variables, StyledBodyMedium, StyledHeadline, StyledTitleMedium, StyledErrorText } from 'shared/styles'; +import { + variables, + StyledBodyMedium, + StyledHeadline, + StyledTitleMedium, + StyledErrorText, +} from 'shared/styles'; import { auth, User } from 'redux/modules'; import { useLogout } from 'shared/hooks/useLogout'; import { Avatar } from 'shared/components'; @@ -63,8 +69,12 @@ export const LockForm = () => { - {fullName} - {email} + + {fullName} + + + {email} + diff --git a/src/modules/Auth/features/Login/Login.styles.ts b/src/modules/Auth/features/Login/Login.styles.ts index 7630a994ce..5db05219f7 100644 --- a/src/modules/Auth/features/Login/Login.styles.ts +++ b/src/modules/Auth/features/Login/Login.styles.ts @@ -1,6 +1,13 @@ import { styled, Button, Box } from '@mui/material'; -import { theme, variables, StyledHeadline, StyledLinkBtn, StyledBodyMedium, StyledFlexAllCenter } from 'shared/styles'; +import { + theme, + variables, + StyledHeadline, + StyledLinkBtn, + StyledBodyMedium, + StyledFlexAllCenter, +} from 'shared/styles'; export const StyledWelcome = styled(StyledHeadline)` color: ${variables.palette.primary}; diff --git a/src/modules/Auth/features/Login/LoginForm/LoginForm.test.tsx b/src/modules/Auth/features/Login/LoginForm/LoginForm.test.tsx index 09a41da303..963ee2d501 100644 --- a/src/modules/Auth/features/Login/LoginForm/LoginForm.test.tsx +++ b/src/modules/Auth/features/Login/LoginForm/LoginForm.test.tsx @@ -25,7 +25,9 @@ describe('Login component tests', () => { await waitFor(() => expect(screen.getByText('Email must be valid')).toBeInTheDocument()); submitForm(mockedEmail, ` ${mockedPassword}`); - await waitFor(() => expect(screen.getByText('Password must not contain spaces.')).toBeInTheDocument()); + await waitFor(() => + expect(screen.getByText('Password must not contain spaces.')).toBeInTheDocument(), + ); submitForm('', ''); await waitFor(() => expect(screen.getByText('Email is required')).toBeInTheDocument()); diff --git a/src/modules/Auth/features/Login/LoginForm/LoginForm.tsx b/src/modules/Auth/features/Login/LoginForm/LoginForm.tsx index 2c30ac22db..4bf5d9cf60 100644 --- a/src/modules/Auth/features/Login/LoginForm/LoginForm.tsx +++ b/src/modules/Auth/features/Login/LoginForm/LoginForm.tsx @@ -75,7 +75,9 @@ export const LoginForm = () => { {t('login')} - {t('logIntoAccount')} + + {t('logIntoAccount')} + { /> {errorMessage && {errorMessage}} - navigate(page.passwordReset)} data-testid="login-form-forgot-password"> + navigate(page.passwordReset)} + data-testid="login-form-forgot-password" + > {t('forgotPassword')} - + {t('login')} - + {t('createAccount')} diff --git a/src/modules/Auth/features/ResetPassword/Confirmation/Confirmation.tsx b/src/modules/Auth/features/ResetPassword/Confirmation/Confirmation.tsx index 45b929d8bb..cc4c0c9943 100644 --- a/src/modules/Auth/features/ResetPassword/Confirmation/Confirmation.tsx +++ b/src/modules/Auth/features/ResetPassword/Confirmation/Confirmation.tsx @@ -19,13 +19,19 @@ export const Confirmation = ({ email }: { email: string }) => { sx={{ mb: theme.spacing(2.4), color: variables.palette.on_surface_variant }} > - A password reset link is sent to {{ email }}
if that email is associated with a MindLogger account. + A password reset link is sent to {{ email }}
if that email is associated with a + MindLogger account. {t('ifYouDontReceiveEmail')} - diff --git a/src/modules/Auth/features/ResetPassword/ResetForm/ResetForm.tsx b/src/modules/Auth/features/ResetPassword/ResetForm/ResetForm.tsx index 20c94e22c1..6065e52676 100644 --- a/src/modules/Auth/features/ResetPassword/ResetForm/ResetForm.tsx +++ b/src/modules/Auth/features/ResetPassword/ResetForm/ResetForm.tsx @@ -52,7 +52,13 @@ export const ResetForm = ({ setEmail }: ResetFormProps) => { {t('enterEmailAssociatedWithAccount')} - + {errorMessage && {errorMessage}} diff --git a/src/modules/Auth/features/SignUp/AdvancedSettings/AdvancedSettings.tsx b/src/modules/Auth/features/SignUp/AdvancedSettings/AdvancedSettings.tsx index c134eb77b0..ff26e1b10d 100644 --- a/src/modules/Auth/features/SignUp/AdvancedSettings/AdvancedSettings.tsx +++ b/src/modules/Auth/features/SignUp/AdvancedSettings/AdvancedSettings.tsx @@ -22,11 +22,17 @@ export const AdvancedSettings = () => { const [showSettings, setShowSettings] = useState(false); const handleServerChange = (e: React.SyntheticEvent, selectedValue: string | ServerUrlOption) => { - storage.setItem(LocalStorageKeys.ApiUrl, typeof selectedValue === 'string' ? selectedValue : selectedValue.value); + storage.setItem( + LocalStorageKeys.ApiUrl, + typeof selectedValue === 'string' ? selectedValue : selectedValue.value, + ); setSelectValue(selectedValue); }; - const handleFilterOptions = (options: ServerUrlOption[], params: FilterOptionsState) => { + const handleFilterOptions = ( + options: ServerUrlOption[], + params: FilterOptionsState, + ) => { const { inputValue } = params; const filtered = options.filter((option) => option.name.includes(inputValue)); const isExisting = options.some((option) => inputValue === option.value); @@ -63,8 +69,12 @@ export const AdvancedSettings = () => { clearOnBlur options={BACKEND_SERVERS} getOptionLabel={(option) => (typeof option === 'string' ? option : option.name)} - renderOption={(props, option) => {option.name}} - renderInput={({ InputLabelProps, ...params }) => } + renderOption={(props, option) => ( + {option.name} + )} + renderInput={({ InputLabelProps, ...params }) => ( + + )} freeSolo /> diff --git a/src/modules/Auth/features/SignUp/SignUpForm/SignUpForm.test.tsx b/src/modules/Auth/features/SignUp/SignUpForm/SignUpForm.test.tsx index c7a572ec08..e6e0fc013e 100644 --- a/src/modules/Auth/features/SignUp/SignUpForm/SignUpForm.test.tsx +++ b/src/modules/Auth/features/SignUp/SignUpForm/SignUpForm.test.tsx @@ -35,7 +35,9 @@ describe('SignUp component tests', () => { await waitFor(() => expect(screen.getByText('Email must be valid')).toBeInTheDocument()); submitForm(mockedEmail, ` ${mockedPassword}`, 'fname', 'lname'); - await waitFor(() => expect(screen.getByText('Password must not contain spaces.')).toBeInTheDocument()); + await waitFor(() => + expect(screen.getByText('Password must not contain spaces.')).toBeInTheDocument(), + ); submitForm('', '', '', ''); await waitFor(() => expect(screen.getByText('Email is required')).toBeInTheDocument()); diff --git a/src/modules/Auth/features/SignUp/SignUpForm/SignUpForm.tsx b/src/modules/Auth/features/SignUp/SignUpForm/SignUpForm.tsx index f7b5503c95..e519d4c818 100644 --- a/src/modules/Auth/features/SignUp/SignUpForm/SignUpForm.tsx +++ b/src/modules/Auth/features/SignUp/SignUpForm/SignUpForm.tsx @@ -68,9 +68,17 @@ export const SignUpForm = () => { return ( - {t('createAccount')} + + {t('createAccount')} + - + { data-testid="signup-form-terms" /> - + {t('createAccount')} diff --git a/src/modules/Auth/state/Auth.reducer.ts b/src/modules/Auth/state/Auth.reducer.ts index e993ce9b50..fb20c2c8d2 100644 --- a/src/modules/Auth/state/Auth.reducer.ts +++ b/src/modules/Auth/state/Auth.reducer.ts @@ -4,7 +4,11 @@ import { ApiErrorReturn } from 'shared/state/Base'; import { AuthSchema } from './Auth.schema'; import { signIn, getUserDetails } from './Auth.thunk'; -import { createAuthFulfilledData, createAuthPendingData, createAuthRejectedData } from './Auth.utils'; +import { + createAuthFulfilledData, + createAuthPendingData, + createAuthRejectedData, +} from './Auth.utils'; import { state as initialState } from './Auth.state'; export const reducers = { diff --git a/src/modules/Auth/state/Auth.thunk.ts b/src/modules/Auth/state/Auth.thunk.ts index 599f36a58c..7ababeb17e 100644 --- a/src/modules/Auth/state/Auth.thunk.ts +++ b/src/modules/Auth/state/Auth.thunk.ts @@ -5,7 +5,15 @@ import { authStorage } from 'shared/utils/authStorage'; import { Mixpanel } from 'shared/utils/mixpanel'; import { getApiErrorResult, getErrorMessage } from 'shared/utils/errors'; import { ApiErrorResponse } from 'shared/state/Base'; -import { signInApi, SignIn, getUserDetailsApi, signUpApi, SignUpArgs, resetPasswordApi, ResetPassword } from 'api'; +import { + signInApi, + SignIn, + getUserDetailsApi, + signUpApi, + SignUpArgs, + resetPasswordApi, + ResetPassword, +} from 'api'; export const signIn = createAsyncThunk( 'auth/login', @@ -30,17 +38,20 @@ export const signIn = createAsyncThunk( }, ); -export const getUserDetails = createAsyncThunk('auth/getUserData', async (_: void, { rejectWithValue, signal }) => { - try { - const { data } = await getUserDetailsApi(signal); +export const getUserDetails = createAsyncThunk( + 'auth/getUserData', + async (_: void, { rejectWithValue, signal }) => { + try { + const { data } = await getUserDetailsApi(signal); - return { data }; - } catch (exception) { - const errorResult = getApiErrorResult(exception as AxiosError); + return { data }; + } catch (exception) { + const errorResult = getApiErrorResult(exception as AxiosError); - return rejectWithValue(errorResult); - } -}); + return rejectWithValue(errorResult); + } + }, +); export const signUp = createAsyncThunk( 'auth/signup', diff --git a/src/modules/Auth/state/Auth.utils.ts b/src/modules/Auth/state/Auth.utils.ts index 3a75f5de04..4b238354c7 100644 --- a/src/modules/Auth/state/Auth.utils.ts +++ b/src/modules/Auth/state/Auth.utils.ts @@ -12,7 +12,11 @@ export const createAuthPendingData = (authentication: Draft, request } }; -export const createAuthFulfilledData = (state: Draft, requestId: string, data: AuthData) => { +export const createAuthFulfilledData = ( + state: Draft, + requestId: string, + data: AuthData, +) => { const { authentication } = state; if (authentication.status === 'loading' && authentication.requestId === requestId) { authentication.requestId = initialState.authentication.requestId; @@ -23,7 +27,11 @@ export const createAuthFulfilledData = (state: Draft, requestId: str } }; -export const createAuthRejectedData = (state: Draft, requestId: string, error: ApiErrorReturn) => { +export const createAuthRejectedData = ( + state: Draft, + requestId: string, + error: ApiErrorReturn, +) => { const { authentication } = state; if (authentication.status === 'loading' && authentication.requestId === requestId) { authentication.requestId = initialState.authentication.requestId; diff --git a/src/modules/Auth/state/index.ts b/src/modules/Auth/state/index.ts index 6663ec4d0b..84fff3f460 100644 --- a/src/modules/Auth/state/index.ts +++ b/src/modules/Auth/state/index.ts @@ -28,7 +28,8 @@ export const auth = { }, }) => status, ), - useAuthorized: (): AuthSchema['isAuthorized'] => useAppSelector(({ auth: { isAuthorized } }) => isAuthorized), + useAuthorized: (): AuthSchema['isAuthorized'] => + useAppSelector(({ auth: { isAuthorized } }) => isAuthorized), useData: (): AuthSchema['authentication']['data'] => useAppSelector( ({ @@ -43,7 +44,13 @@ export const auth = { auth: { authentication: { data }, }, - }) => (data ? `${data.user.firstName.substring(0, 1)}${data.user.lastName.substring(0, 1)}`.toUpperCase() : ''), + }) => + data + ? `${data.user.firstName.substring(0, 1)}${data.user.lastName.substring( + 0, + 1, + )}`.toUpperCase() + : '', ), useLogoutInProgress: (): AuthSchema['isLogoutInProgress'] => useAppSelector(({ auth: { isLogoutInProgress } }) => isLogoutInProgress), diff --git a/src/modules/Builder/components/ConditionRow/Condition/Condition.test.tsx b/src/modules/Builder/components/ConditionRow/Condition/Condition.test.tsx index f0ec39711c..2bf10af895 100644 --- a/src/modules/Builder/components/ConditionRow/Condition/Condition.test.tsx +++ b/src/modules/Builder/components/ConditionRow/Condition/Condition.test.tsx @@ -28,7 +28,8 @@ const mockedScoreConditionId = uuidv4(); const mockedConditionName = 'activities.0.conditionalLogic.0.conditions.0'; const mockedConditional = mockedAppletFormData.activities[0].conditionalLogic[0]; const mockedSingleSelectionCondition = mockedConditional.conditions[0]; -const mockedMultiSelectionCondition = mockedAppletFormData.activities[0].conditionalLogic[1].conditions[0]; +const mockedMultiSelectionCondition = + mockedAppletFormData.activities[0].conditionalLogic[1].conditions[0]; const mockedSliderCondition = { key: uuidv4(), type: ConditionType.Equal, @@ -61,7 +62,10 @@ const mockedScoreConditionCondition = { payload: mockedSingleSelectionCondition.payload, }; -const mockedItemOptions = getItemOptions(mockedAppletFormData.activities[0].items, ConditionRowType.Item); +const mockedItemOptions = getItemOptions( + mockedAppletFormData.activities[0].items, + ConditionRowType.Item, +); const mockedScoreOptions = [ { labelKey: 'Score option', @@ -77,7 +81,9 @@ const mockedScoreConditionOptions = [ }, ]; const mockedValueOptions = getValueOptionsList( - mockedAppletFormData.activities[0].items.find((item) => getEntityKey(item) === mockedConditional.itemKey), + mockedAppletFormData.activities[0].items.find( + (item) => getEntityKey(item) === mockedConditional.itemKey, + ), ); const mockedNames = { @@ -232,7 +238,14 @@ describe('Condition', () => { ${mockedScoreId} | ${ConditionItemType.Score} | ${mockedScoreOptions} | ${'condition state options for score should be greaterThan/lessThan/equal/notEqual/between/outsideOf'} `('$description', ({ item, type, itemOptions }) => { renderWithAppletFormData({ - children: , + children: ( + + ), }); if (type !== ConditionItemType.Score) { @@ -302,7 +315,14 @@ describe('Condition', () => { ${['min-value', 'max-value']} | ${mockedScoreId} | ${ConditionType.OutsideOf} | ${mockedScoreOptions} | ${'range value is shown if item is score and state is "between"'} `('$description', ({ testIds, item, state, options }) => { renderWithAppletFormData({ - children: , + children: ( + + ), }); expect(screen.getByTestId(`editing-condition-${testIds[0]}`)).toBeInTheDocument(); @@ -331,14 +351,18 @@ describe('Condition', () => { appletFormData: getAppletFormData(condition), }); - expect(screen.getByTestId('editing-condition-name').querySelector('input').value).toBe(condition.itemName); - expect(screen.getByTestId('editing-condition-type').querySelector('input').value).toBe(condition.type); - expect(screen.getByTestId(`editing-condition-${valueTestIds[0]}`).querySelector('input').value).toBe( - expectedValues[0], + expect(screen.getByTestId('editing-condition-name').querySelector('input').value).toBe( + condition.itemName, + ); + expect(screen.getByTestId('editing-condition-type').querySelector('input').value).toBe( + condition.type, ); + expect( + screen.getByTestId(`editing-condition-${valueTestIds[0]}`).querySelector('input').value, + ).toBe(expectedValues[0]); valueTestIds[1] && - expect(screen.getByTestId(`editing-condition-${valueTestIds[1]}`).querySelector('input').value).toBe( - expectedValues[1], - ); + expect( + screen.getByTestId(`editing-condition-${valueTestIds[1]}`).querySelector('input').value, + ).toBe(expectedValues[1]); }); }); diff --git a/src/modules/Builder/components/ConditionRow/Condition/Condition.tsx b/src/modules/Builder/components/ConditionRow/Condition/Condition.tsx index 63acc2901e..e63dccbf02 100644 --- a/src/modules/Builder/components/ConditionRow/Condition/Condition.tsx +++ b/src/modules/Builder/components/ConditionRow/Condition/Condition.tsx @@ -50,7 +50,8 @@ export const Condition = ({ selectedItem?.type === ConditionItemType.MultiSelection || isItemScoreCondition; const isValueSelectShown = !selectedItem || isItemSelect; - const isNumberValueShown = (isItemSlider || isItemScore) && !CONDITION_TYPES_TO_HAVE_RANGE_VALUE.includes(state); + const isNumberValueShown = + (isItemSlider || isItemScore) && !CONDITION_TYPES_TO_HAVE_RANGE_VALUE.includes(state); const isRangeValueShown = (isItemSlider || isItemScore) && !isNumberValueShown; const { minNumber, maxNumber } = getConditionMinMaxValues({ item: selectedItem, @@ -77,7 +78,9 @@ export const Condition = ({ SelectProps={{ renderValue: (value: unknown) => { const item = itemOptions?.find((item) => item.value === value); - const placeholder = isRowTypeItem ? t('conditionItemSelected', { value: item?.labelKey }) : item?.labelKey; + const placeholder = isRowTypeItem + ? t('conditionItemSelected', { value: item?.labelKey }) + : item?.labelKey; return {placeholder}; }, @@ -93,7 +96,9 @@ export const Condition = ({ control={control} name={stateName} options={getStateOptions(selectedItem?.type)} - placeholder={isStateSelectDisabled ? t('conditionDisabledPlaceholder') : t('conditionTypePlaceholder')} + placeholder={ + isStateSelectDisabled ? t('conditionDisabledPlaceholder') : t('conditionTypePlaceholder') + } customChange={onStateChange} isLabelNeedTranslation={false} data-testid={`${dataTestid}-type`} @@ -143,7 +148,11 @@ export const Condition = ({ )} {isRemoveVisible && ( - + )} diff --git a/src/modules/Builder/components/ConditionRow/Condition/Condition.utils.ts b/src/modules/Builder/components/ConditionRow/Condition/Condition.utils.ts index 92b94b6be9..5e3b8fa419 100644 --- a/src/modules/Builder/components/ConditionRow/Condition/Condition.utils.ts +++ b/src/modules/Builder/components/ConditionRow/Condition/Condition.utils.ts @@ -51,14 +51,24 @@ const getDefaultMinMaxValues = (state: ConditionType) => ({ minNumber: state ? Number.MIN_SAFE_INTEGER : DEFAULT_NUMBER_MIN_VALUE, maxNumber: undefined, }); -export const getConditionMinMaxValues = ({ item, state }: { item?: ConditionItem; state: ConditionType }) => { +export const getConditionMinMaxValues = ({ + item, + state, +}: { + item?: ConditionItem; + state: ConditionType; +}) => { if (!item?.type) return getDefaultMinMaxValues(state); switch (item.type) { case ConditionItemType.Slider: return { - minNumber: state ? +(item.responseValues! as SliderItemResponseValues).minValue : DEFAULT_NUMBER_MIN_VALUE, - maxNumber: state ? +(item.responseValues! as SliderItemResponseValues).maxValue : Number.MAX_SAFE_INTEGER, + minNumber: state + ? +(item.responseValues! as SliderItemResponseValues).minValue + : DEFAULT_NUMBER_MIN_VALUE, + maxNumber: state + ? +(item.responseValues! as SliderItemResponseValues).maxValue + : Number.MAX_SAFE_INTEGER, }; default: return getDefaultMinMaxValues(state); diff --git a/src/modules/Builder/components/ConditionRow/ConditionRow.tsx b/src/modules/Builder/components/ConditionRow/ConditionRow.tsx index 224da2bb75..9416b3233e 100644 --- a/src/modules/Builder/components/ConditionRow/ConditionRow.tsx +++ b/src/modules/Builder/components/ConditionRow/ConditionRow.tsx @@ -56,14 +56,22 @@ export const ConditionRow = ({ const conditionPayloadMaxValueName = `${conditionPayloadName}.maxValue`; const [conditions, items, reports, conditionItem, conditionType, conditionPayload] = useWatch({ - name: [conditionsName, itemsName, reportsName, conditionItemName, conditionTypeName, conditionPayloadName], + name: [ + conditionsName, + itemsName, + reportsName, + conditionItemName, + conditionTypeName, + conditionPayloadName, + ], }); const scores = reports?.filter((report: ScoreOrSection) => report.type === ScoreReportType.Score); const groupedItems = getObjectFromList(items); const conditionItemResponseType = groupedItems[conditionItem]?.responseType; const selectedItem = groupedItems[conditionItem]; - const selectedScore = scores?.find((score: ScoreReport) => getEntityKey(score, false) === scoreKey) ?? {}; + const selectedScore = + scores?.find((score: ScoreReport) => getEntityKey(score, false) === scoreKey) ?? {}; const options = { [ConditionRowType.Item]: getItemOptions(items, type), [ConditionRowType.Section]: [ @@ -77,7 +85,9 @@ export const ConditionRow = ({ const handleChangeConditionItemName = useCallback( (event: SelectEvent) => { const selectedItemKey = event.target.value; - const selectedItem = items?.find((item: ItemFormValues) => getEntityKey(item) === selectedItemKey); + const selectedItem = items?.find( + (item: ItemFormValues) => getEntityKey(item) === selectedItemKey, + ); const selectedItemIndex = items?.indexOf(selectedItem); if (conditionItemResponseType !== selectedItem?.responseType) { @@ -125,7 +135,11 @@ export const ConditionRow = ({ const errorMessage = showError && error && - t(Object.keys(error).length === VALIDATED_ITEMS_COUNT ? 'setUpAtLeastOneCondition' : 'setUpCorrectCondition'); + t( + Object.keys(error).length === VALIDATED_ITEMS_COUNT + ? 'setUpAtLeastOneCondition' + : 'setUpCorrectCondition', + ); return ( <> @@ -147,7 +161,9 @@ export const ConditionRow = ({ type={type} data-testid={dataTestid} /> - {errorMessage && {errorMessage}} + {errorMessage && ( + {errorMessage} + )} ); }; diff --git a/src/modules/Builder/components/ConditionRow/ConditionRow.utils.ts b/src/modules/Builder/components/ConditionRow/ConditionRow.utils.ts index f70fee167a..3356283f15 100644 --- a/src/modules/Builder/components/ConditionRow/ConditionRow.utils.ts +++ b/src/modules/Builder/components/ConditionRow/ConditionRow.utils.ts @@ -39,7 +39,10 @@ export const getItemOptions = (items: ItemFormValues[], conditionRowType: Condit return [ ...optionList, { - labelKey: conditionRowType === ConditionRowType.Item ? item.name : `${t('conditionItem')}: ${item.name}`, + labelKey: + conditionRowType === ConditionRowType.Item + ? item.name + : `${t('conditionItem')}: ${item.name}`, value: getEntityKey(item), type: getConditionItemType(item), responseValues: item.responseValues, @@ -118,8 +121,12 @@ export const getPayload = ({ conditionType, conditionPayload, selectedItem }: Ge } return { - minValue: (conditionPayload as RangeValueCondition['payload'])?.minValue ?? DEFAULT_PAYLOAD_MIN_VALUE, - maxValue: (conditionPayload as RangeValueCondition['payload'])?.maxValue ?? DEFAULT_PAYLOAD_MAX_VALUE, + minValue: + (conditionPayload as RangeValueCondition['payload'])?.minValue ?? + DEFAULT_PAYLOAD_MIN_VALUE, + maxValue: + (conditionPayload as RangeValueCondition['payload'])?.maxValue ?? + DEFAULT_PAYLOAD_MAX_VALUE, }; default: return {}; diff --git a/src/modules/Builder/components/Item/Item.styles.ts b/src/modules/Builder/components/Item/Item.styles.ts index 9ad89170fd..cf43e52fa7 100644 --- a/src/modules/Builder/components/Item/Item.styles.ts +++ b/src/modules/Builder/components/Item/Item.styles.ts @@ -26,7 +26,10 @@ export const StyledItem = styled(StyledFlexTopCenter, shouldForwardProp)` }) => { let bgColor = 'inherit'; if (isDragging) { - bgColor = blendColorsNormal(variables.palette.surface, variables.palette.on_surface_alfa16) as string; + bgColor = blendColorsNormal( + variables.palette.surface, + variables.palette.on_surface_alfa16, + ) as string; } if (hasError) { bgColor = variables.palette.error_container; @@ -38,7 +41,9 @@ export const StyledItem = styled(StyledFlexTopCenter, shouldForwardProp)` padding: ${theme.spacing(1.3, 2.4)}; width: 100%; border-radius: ${variables.borderRadius.lg2}; - height: ${uiType === ItemUiType.Activity || uiType === ItemUiType.FlowBuilder ? '9.8rem' : '7.2rem'}; + height: ${ + uiType === ItemUiType.Activity || uiType === ItemUiType.FlowBuilder ? '9.8rem' : '7.2rem' + }; transition: ${variables.transitions.all}; cursor: ${onClick ? 'pointer' : 'default'}; background-color: ${bgColor}; @@ -46,7 +51,10 @@ export const StyledItem = styled(StyledFlexTopCenter, shouldForwardProp)` box-shadow: ${isDragging ? variables.boxShadow.light3 : 'inherit'}; &:hover { - background-color: ${blendColorsNormal(variables.palette.surface, variables.palette.on_surface_alfa8)}; + background-color: ${blendColorsNormal( + variables.palette.surface, + variables.palette.on_surface_alfa8, + )}; .item-name { font-weight: ${uiType === ItemUiType.Flow ? variables.font.weight.bold : 'inherit'}; @@ -54,14 +62,18 @@ export const StyledItem = styled(StyledFlexTopCenter, shouldForwardProp)` } &:active { - background-color: ${blendColorsNormal(variables.palette.surface, variables.palette.on_surface_alfa12)}; + background-color: ${blendColorsNormal( + variables.palette.surface, + variables.palette.on_surface_alfa12, + )}; } `; }} `; export const StyledCol = styled(Box, shouldForwardProp)` - width: ${({ hasImage }: { hasImage: boolean }) => `calc(100% - ${hasImage ? '32.4rem' : '24rem'})`}; + width: ${({ hasImage }: { hasImage: boolean }) => + `calc(100% - ${hasImage ? '32.4rem' : '24rem'})`}; padding-right: ${theme.spacing(1)}; `; diff --git a/src/modules/Builder/components/Item/Item.tsx b/src/modules/Builder/components/Item/Item.tsx index b084718d54..5dd047cebb 100644 --- a/src/modules/Builder/components/Item/Item.tsx +++ b/src/modules/Builder/components/Item/Item.tsx @@ -3,7 +3,13 @@ import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Actions } from 'shared/components'; -import { StyledTitleBoldMedium, StyledTitleBoldSmall, StyledTitleMedium, theme, variables } from 'shared/styles'; +import { + StyledTitleBoldMedium, + StyledTitleBoldSmall, + StyledTitleMedium, + theme, + variables, +} from 'shared/styles'; import { StyledActions, @@ -34,7 +40,11 @@ export const Item = ({ const commonSx = isInactive ? { opacity: variables.opacity.disabled } : undefined; - const image = img ? : ; + const image = img ? ( + + ) : ( + + ); return ( )} {name} - {description} + + {description} + {count !== undefined && ( - + {count} {t('item', { count })} )} diff --git a/src/modules/Builder/components/MLPlayer/MLPlayer.tsx b/src/modules/Builder/components/MLPlayer/MLPlayer.tsx index 998566baef..169ec0f27c 100644 --- a/src/modules/Builder/components/MLPlayer/MLPlayer.tsx +++ b/src/modules/Builder/components/MLPlayer/MLPlayer.tsx @@ -14,7 +14,12 @@ import { import { MLPlayerProps } from './MLPlayer.types'; import { useMLPlayerSetup } from './MLPlayer.hooks'; -export const MLPlayer = ({ media, hasRemoveButton = true, onRemove, 'data-testid': dataTestid }: MLPlayerProps) => { +export const MLPlayer = ({ + media, + hasRemoveButton = true, + onRemove, + 'data-testid': dataTestid, +}: MLPlayerProps) => { const { playerRef, state, diff --git a/src/modules/Builder/components/MediaUploader/MediaUploader.hooks.ts b/src/modules/Builder/components/MediaUploader/MediaUploader.hooks.ts index 9fb8d8da06..3e966a6138 100644 --- a/src/modules/Builder/components/MediaUploader/MediaUploader.hooks.ts +++ b/src/modules/Builder/components/MediaUploader/MediaUploader.hooks.ts @@ -13,7 +13,10 @@ export const useMediaUploader = ({ onUpload }: MediaUploaderHookProps) => { const { execute: executeMediaUpload } = useAsync(postFileUploadApi, (response) => { const name = response?.config?.data?.get('file')?.name; - return response?.data?.result && onUpload({ name, url: response?.data?.result.url ?? '', uploaded: true }); + return ( + response?.data?.result && + onUpload({ name, url: response?.data?.result.url ?? '', uploaded: true }) + ); }); const stopDefaults = (e: DragEvent | MouseEvent) => { diff --git a/src/modules/Builder/components/MediaUploader/MediaUploader.tsx b/src/modules/Builder/components/MediaUploader/MediaUploader.tsx index 622d9c1951..3c169ad189 100644 --- a/src/modules/Builder/components/MediaUploader/MediaUploader.tsx +++ b/src/modules/Builder/components/MediaUploader/MediaUploader.tsx @@ -54,7 +54,10 @@ export const MediaUploader = ({ {error && ( - + {t(error, { size: byteFormatter(MAX_FILE_SIZE_150MB) })} )} @@ -73,7 +76,9 @@ export const MediaUploader = ({ {media.uploaded && } - {media?.name} + + {media?.name} + {!media.uploaded && } diff --git a/src/modules/Builder/components/Popups/SaveAndPublishProcessPopup/Description/Description.tsx b/src/modules/Builder/components/Popups/SaveAndPublishProcessPopup/Description/Description.tsx index 444a2de274..324cc8a9ad 100644 --- a/src/modules/Builder/components/Popups/SaveAndPublishProcessPopup/Description/Description.tsx +++ b/src/modules/Builder/components/Popups/SaveAndPublishProcessPopup/Description/Description.tsx @@ -35,18 +35,25 @@ export const Description = ({ step }: DescriptionProps) => { return ( <> {hasNotBeenSaved} - {t('appletHasEmptyRequiredFields')} + + {t('appletHasEmptyRequiredFields')} + ); case SaveAndPublishSteps.ErrorsInFields: return ( <> {hasNotBeenSaved} - {t('appletHasErrorsInFields')} + + {t('appletHasErrorsInFields')} + ); case SaveAndPublishSteps.BeingCreated: { - const text = typePrefix === AppletThunkTypePrefix.Update ? t('appletIsBeingUpdated') : t('appletIsBeingCreated'); + const text = + typePrefix === AppletThunkTypePrefix.Update + ? t('appletIsBeingUpdated') + : t('appletIsBeingCreated'); return {text}; } diff --git a/src/modules/Builder/components/Popups/SaveAndPublishProcessPopup/SaveAndPublishProcessPopup.test.tsx b/src/modules/Builder/components/Popups/SaveAndPublishProcessPopup/SaveAndPublishProcessPopup.test.tsx index 12243d8c12..deac4044a2 100644 --- a/src/modules/Builder/components/Popups/SaveAndPublishProcessPopup/SaveAndPublishProcessPopup.test.tsx +++ b/src/modules/Builder/components/Popups/SaveAndPublishProcessPopup/SaveAndPublishProcessPopup.test.tsx @@ -28,23 +28,33 @@ describe('SaveAndPublishProcessPopup', () => { }); test('renders correctly for a beingCreated', () => { - renderWithProviders(); + renderWithProviders( + , + ); expect( - screen.getByTestId(`builder-save-and-publish-popup${saveAndPublishProcessTestIds.beingCreated}`), + screen.getByTestId( + `builder-save-and-publish-popup${saveAndPublishProcessTestIds.beingCreated}`, + ), ).toBeInTheDocument(); }); test('renders correctly for a reportConfigSave', () => { - renderWithProviders(); + renderWithProviders( + , + ); expect( - screen.getByTestId(`builder-save-and-publish-popup${saveAndPublishProcessTestIds.reportConfigSave}`), + screen.getByTestId( + `builder-save-and-publish-popup${saveAndPublishProcessTestIds.reportConfigSave}`, + ), ).toBeInTheDocument(); }); test('calls onClose when the close button is clicked', () => { - renderWithProviders(); + renderWithProviders( + , + ); fireEvent.click(screen.getByText('Back')); expect(mockOnClose).toHaveBeenCalled(); @@ -53,7 +63,9 @@ describe('SaveAndPublishProcessPopup', () => { test('dispatches correct action on report config save', () => { jest.spyOn(reduxHooks, 'useAppDispatch').mockReturnValue(mockDispatch); - renderWithProviders(); + renderWithProviders( + , + ); fireEvent.click(screen.getByText('Save')); expect(mockDispatch).toHaveBeenCalledWith({ diff --git a/src/modules/Builder/components/Popups/SaveAndPublishProcessPopup/SaveAndPublishProcessPopup.tsx b/src/modules/Builder/components/Popups/SaveAndPublishProcessPopup/SaveAndPublishProcessPopup.tsx index f146f7a0fc..81c65f054a 100644 --- a/src/modules/Builder/components/Popups/SaveAndPublishProcessPopup/SaveAndPublishProcessPopup.tsx +++ b/src/modules/Builder/components/Popups/SaveAndPublishProcessPopup/SaveAndPublishProcessPopup.tsx @@ -7,7 +7,10 @@ import { concatIf } from 'shared/utils'; import { useAppDispatch } from 'redux/store'; import { reportConfig } from 'modules/Builder/state'; -import { SaveAndPublishProcessPopupProps, SaveAndPublishSteps } from './SaveAndPublishProcessPopup.types'; +import { + SaveAndPublishProcessPopupProps, + SaveAndPublishSteps, +} from './SaveAndPublishProcessPopup.types'; import { Description } from './Description'; import { saveAndPublishProcessTestIds } from './SaveAndPublishProcessPopup.const'; @@ -83,7 +86,9 @@ export const SaveAndPublishProcessPopup = ({ }} > - {step === SaveAndPublishSteps.BeingCreated && } + {step === SaveAndPublishSteps.BeingCreated && ( + + )} diff --git a/src/modules/Builder/components/SaveChangesPopup/SaveChangesPopup.tsx b/src/modules/Builder/components/SaveChangesPopup/SaveChangesPopup.tsx index 2b514dbf93..ac30637e5b 100644 --- a/src/modules/Builder/components/SaveChangesPopup/SaveChangesPopup.tsx +++ b/src/modules/Builder/components/SaveChangesPopup/SaveChangesPopup.tsx @@ -34,7 +34,9 @@ export const SaveChangesPopup = ({ data-testid={dataTestid} > - {t('saveChangesDescription')} + + {t('saveChangesDescription')} + ); diff --git a/src/modules/Builder/components/ToggleItemContainer/ToggleItemContainer.styles.ts b/src/modules/Builder/components/ToggleItemContainer/ToggleItemContainer.styles.ts index 6fe4cd2b65..7ac33318d3 100644 --- a/src/modules/Builder/components/ToggleItemContainer/ToggleItemContainer.styles.ts +++ b/src/modules/Builder/components/ToggleItemContainer/ToggleItemContainer.styles.ts @@ -7,7 +7,9 @@ import { ToggleContainerUiType } from './ToggleItemContainer.types'; export const StyledItemOptionContainer = styled(StyledFlexColumn, shouldForwardProp)` background: ${({ uiType }: { uiType?: ToggleContainerUiType }) => - uiType === ToggleContainerUiType.Score ? variables.palette.surface3 : variables.palette.surface1}; + uiType === ToggleContainerUiType.Score + ? variables.palette.surface3 + : variables.palette.surface1}; padding: ${theme.spacing(3, 3, 2.4, 3)}; border-radius: ${variables.borderRadius.lg2}; margin-bottom: ${theme.spacing(2.4)}; diff --git a/src/modules/Builder/components/ToggleItemContainer/ToggleItemContainer.tsx b/src/modules/Builder/components/ToggleItemContainer/ToggleItemContainer.tsx index 5c45369491..c07d080732 100644 --- a/src/modules/Builder/components/ToggleItemContainer/ToggleItemContainer.tsx +++ b/src/modules/Builder/components/ToggleItemContainer/ToggleItemContainer.tsx @@ -15,7 +15,12 @@ import { } from 'shared/styles'; import { Svg, Tooltip } from 'shared/components'; -import { StyledItemOption, StylesTitleWrapper, StyledBadge, StyledTitleContainer } from './ToggleItemContainer.styles'; +import { + StyledItemOption, + StylesTitleWrapper, + StyledBadge, + StyledTitleContainer, +} from './ToggleItemContainer.styles'; import { ToggleItemProps } from './ToggleItemContainer.types'; export const ToggleItemContainer = ({ @@ -55,7 +60,9 @@ export const ToggleItemContainer = ({ data-testid={`${dataTestid}-header`} onClick={isHeaderClickable ? handleToggle : undefined} > - + {hasErrorMessage && ( - + {t(errorMessage)} )} )} - {HeaderContent && } + {HeaderContent && ( + + )} {tooltip && ( diff --git a/src/modules/Builder/features/AboutApplet/AboutApplet.test.tsx b/src/modules/Builder/features/AboutApplet/AboutApplet.test.tsx index 559828aec0..4a9bcfc55c 100644 --- a/src/modules/Builder/features/AboutApplet/AboutApplet.test.tsx +++ b/src/modules/Builder/features/AboutApplet/AboutApplet.test.tsx @@ -4,7 +4,12 @@ import { fireEvent, screen, waitFor } from '@testing-library/react'; import { renderWithAppletFormData } from 'shared/utils/renderWithAppletFormData'; import { page } from 'resources'; -import { mockedApplet, mockedAppletFormData, mockedAppletId, mockedCurrentWorkspace } from 'shared/mock'; +import { + mockedApplet, + mockedAppletFormData, + mockedAppletId, + mockedCurrentWorkspace, +} from 'shared/mock'; import { initialStateData } from 'shared/state'; import { Roles } from 'shared/consts'; @@ -120,7 +125,9 @@ describe('AboutApplet', () => { 'about-applet-watermark', ]; - fieldsDataTestIds.forEach((dataTestId) => expect(screen.getByTestId(dataTestId)).toBeInTheDocument()); + fieldsDataTestIds.forEach((dataTestId) => + expect(screen.getByTestId(dataTestId)).toBeInTheDocument(), + ); const theme = screen.getByLabelText('Applet Color Theme').querySelector('input'); theme && expect(theme.value).toBe('9b023afd-e5f9-403c-b154-fc8f35fcf3ab'); diff --git a/src/modules/Builder/features/AboutApplet/AboutApplet.tsx b/src/modules/Builder/features/AboutApplet/AboutApplet.tsx index a0bdb14147..bf3c14ed3c 100644 --- a/src/modules/Builder/features/AboutApplet/AboutApplet.tsx +++ b/src/modules/Builder/features/AboutApplet/AboutApplet.tsx @@ -4,7 +4,12 @@ import { Box } from '@mui/material'; import { EditorController, InputController } from 'shared/components/FormComponents'; import { StyledFlexTopCenter, theme } from 'shared/styles'; import { Tooltip, Uploader } from 'shared/components'; -import { MAX_DESCRIPTION_LENGTH_LONG, MAX_FILE_SIZE_25MB, MAX_NAME_LENGTH, TEXTAREA_ROWS_COUNT } from 'shared/consts'; +import { + MAX_DESCRIPTION_LENGTH_LONG, + MAX_FILE_SIZE_25MB, + MAX_NAME_LENGTH, + TEXTAREA_ROWS_COUNT, +} from 'shared/consts'; import { byteFormatter } from 'shared/utils'; import { Uploads } from 'modules/Builder/components'; import { themes } from 'modules/Builder/state'; diff --git a/src/modules/Builder/features/AboutApplet/ThemeSelectController/ThemeSelectController.tsx b/src/modules/Builder/features/AboutApplet/ThemeSelectController/ThemeSelectController.tsx index 54cad2a94c..163f241864 100644 --- a/src/modules/Builder/features/AboutApplet/ThemeSelectController/ThemeSelectController.tsx +++ b/src/modules/Builder/features/AboutApplet/ThemeSelectController/ThemeSelectController.tsx @@ -24,5 +24,7 @@ export const ThemeSelectController = (props: SelectContro hasTrigger: trigger, }); - return ; + return ( + + ); }; diff --git a/src/modules/Builder/features/Activities/Activities.test.tsx b/src/modules/Builder/features/Activities/Activities.test.tsx index 98c088b7b1..964b6448cf 100644 --- a/src/modules/Builder/features/Activities/Activities.test.tsx +++ b/src/modules/Builder/features/Activities/Activities.test.tsx @@ -147,7 +147,9 @@ describe('Activities', () => { await waitFor(() => { expect(screen.getByTestId(`${mockedTestid}-0-name`)).toHaveTextContent(name); - expect(screen.getByTestId(`${mockedTestid}-0-description`)).toHaveTextContent(activityDescription); + expect(screen.getByTestId(`${mockedTestid}-0-description`)).toHaveTextContent( + activityDescription, + ); expect(screen.getByTestId(`${mockedTestid}-0-items-count`)).toHaveTextContent(items); }); }); @@ -161,7 +163,9 @@ describe('Activities', () => { fireEvent.click(addActivity); expect(mockedUseNavigate).toBeCalledWith( - `/builder/${mockedAppletFormData.id}/activities/${ref.current.getValues('activities.0.key')}/about`, + `/builder/${mockedAppletFormData.id}/activities/${ref.current.getValues( + 'activities.0.key', + )}/about`, ); await waitFor(() => { @@ -188,7 +192,9 @@ describe('Activities', () => { const confirmRemoveModal = screen.getByTestId('builder-activities-delete-activity-popup-0'); expect(confirmRemoveModal).toBeVisible(); - fireEvent.click(screen.getByTestId('builder-activities-delete-activity-popup-0-submit-button')); + fireEvent.click( + screen.getByTestId('builder-activities-delete-activity-popup-0-submit-button'), + ); expect(ref.current.getValues('activities')).toEqual([]); expect(screen.queryAllByTestId(/^builder-activities-activity-\d+$/)).toEqual([]); @@ -224,7 +230,9 @@ describe('Activities', () => { expect(screen.getByTestId(`${mockedTestid}-1`)).toBeVisible(); }); - expect(screen.getByTestId(`${mockedTestid}-1-name`)).toHaveTextContent(`${mockedEmptyActivity.name} (1)`); + expect(screen.getByTestId(`${mockedTestid}-1-name`)).toHaveTextContent( + `${mockedEmptyActivity.name} (1)`, + ); expect(screen.getByTestId(`${mockedTestid}-1-description`)).toHaveTextContent( mockedActivityWithDescription.description, ); @@ -267,11 +275,15 @@ describe('Activities', () => { fireEvent.click(screen.getByTestId('builder-activities-add-perf-task')); - [mockedIPadTestid, mockedMobileTestid, mockedFlankerTestid, mockedGyroscopeTestid, mockedTouchTestid].forEach( - (testId) => { - expect(screen.getByTestId(testId)).toBeVisible(); - }, - ); + [ + mockedIPadTestid, + mockedMobileTestid, + mockedFlankerTestid, + mockedGyroscopeTestid, + mockedTouchTestid, + ].forEach((testId) => { + expect(screen.getByTestId(testId)).toBeVisible(); + }); }); test.each` @@ -281,30 +293,37 @@ describe('Activities', () => { ${PerformanceTasks.Flanker} | ${true} | ${'Simple & Choice Reaction Time Task Builder'} | ${'This Activity contains Flanker Item. The timestamps collected for an android are not as accurate as iOS devices.'} | ${'13 items'} | ${'Flanker'} ${PerformanceTasks.Gyroscope} | ${true} | ${'CST Gyroscope'} | ${'This Activity contains Stability Tracker (Gyroscope) Item.'} | ${'5 items'} | ${'CST Gyroscope'} ${PerformanceTasks.Touch} | ${true} | ${'CST Touch'} | ${'This Activity contains Stability Tracker (Touch) Item.'} | ${'5 items'} | ${'CST Touch'} - `('$description', async ({ perfTaskType, shouldNavigate, name, perfTaskDescription, items }) => { - const ref = renderActivities(mockedAppletWithNoActivities); - - addPerfTask(perfTaskType); + `( + '$description', + async ({ perfTaskType, shouldNavigate, name, perfTaskDescription, items }) => { + const ref = renderActivities(mockedAppletWithNoActivities); - await waitFor(() => { - expect(screen.getByTestId(`${mockedTestid}-0`)).toBeVisible(); - }); + addPerfTask(perfTaskType); - expect(screen.getByTestId(`${mockedTestid}-0-name`)).toHaveTextContent(name); - expect(screen.getByTestId(`${mockedTestid}-0-description`)).toHaveTextContent(perfTaskDescription); - expect(screen.getByTestId(`${mockedTestid}-0-items-count`)).toHaveTextContent(items); + await waitFor(() => { + expect(screen.getByTestId(`${mockedTestid}-0`)).toBeVisible(); + }); - if (shouldNavigate) { - expect(mockedUseNavigate).toBeCalledWith( - `/builder/${mockedAppletFormData.id}/activities/performance-task/${perfTaskType}/${ref.current.getValues( - 'activities.0.key', - )}`, + expect(screen.getByTestId(`${mockedTestid}-0-name`)).toHaveTextContent(name); + expect(screen.getByTestId(`${mockedTestid}-0-description`)).toHaveTextContent( + perfTaskDescription, ); - } + expect(screen.getByTestId(`${mockedTestid}-0-items-count`)).toHaveTextContent(items); - if (!shouldNavigate) { - expect(screen.queryByTestId(`${mockedTestid}-0-edit`)).not.toBeInTheDocument(); - } - }); + if (shouldNavigate) { + expect(mockedUseNavigate).toBeCalledWith( + `/builder/${ + mockedAppletFormData.id + }/activities/performance-task/${perfTaskType}/${ref.current.getValues( + 'activities.0.key', + )}`, + ); + } + + if (!shouldNavigate) { + expect(screen.queryByTestId(`${mockedTestid}-0-edit`)).not.toBeInTheDocument(); + } + }, + ); }); }); diff --git a/src/modules/Builder/features/Activities/Activities.tsx b/src/modules/Builder/features/Activities/Activities.tsx index 3b5648cacb..5a9bc80a5b 100644 --- a/src/modules/Builder/features/Activities/Activities.tsx +++ b/src/modules/Builder/features/Activities/Activities.tsx @@ -11,7 +11,10 @@ import { page } from 'resources'; import { ActivityFormValues, AppletFormValues, GetNewPerformanceTask } from 'modules/Builder/types'; import { DndDroppable, InsertItem, Item, ItemUiType } from 'modules/Builder/components'; import { REACT_HOOK_FORM_KEY_NAME } from 'modules/Builder/consts'; -import { getNewActivity, getNewPerformanceTask } from 'modules/Builder/pages/BuilderApplet/BuilderApplet.utils'; +import { + getNewActivity, + getNewPerformanceTask, +} from 'modules/Builder/pages/BuilderApplet/BuilderApplet.utils'; import { BuilderContainer } from 'shared/features'; import { PerfTaskType } from 'shared/consts'; import { pluck, Mixpanel } from 'shared/utils'; @@ -62,18 +65,29 @@ export const Activities = () => { appletId && performanceTasksType && navigate( - generatePath(getPerformanceTaskPath(performanceTasksType as unknown as EditablePerformanceTasksType), { - appletId, - activityId, - }), + generatePath( + getPerformanceTaskPath(performanceTasksType as unknown as EditablePerformanceTasksType), + { + appletId, + activityId, + }, + ), ); const handleModalClose = () => setActivityToDelete(''); const handleActivityAdd = (props: ActivityAddProps) => { Mixpanel.track('Add Activity click'); - const { index, performanceTaskName, performanceTaskDesc, isNavigationBlocked, performanceTaskType } = props || {}; + const { + index, + performanceTaskName, + performanceTaskDesc, + isNavigationBlocked, + performanceTaskType, + } = props || {}; const newActivityName = - performanceTaskName && performanceTaskDesc && performanceTaskType ? performanceTaskName : t('newActivity'); + performanceTaskName && performanceTaskDesc && performanceTaskType + ? performanceTaskName + : t('newActivity'); const name = getUniqueName({ name: newActivityName, existingNames: activityNames }); @@ -100,18 +114,21 @@ export const Activities = () => { }; const handleActivityRemove = (index: number, activityKey: string) => { - const newActivityFlows = activityFlows.reduce((acc: AppletFormValues['activityFlows'], flow) => { - if (flow.reportIncludedActivityName === activityKey) { - flow.reportIncludedActivityName = ''; - flow.reportIncludedItemName = ''; - } - const items = flow.items?.filter((item) => item.activityKey !== activityKey); - if (items && items.length > 0) { - acc.push({ ...flow, items }); - } - - return acc; - }, []); + const newActivityFlows = activityFlows.reduce( + (acc: AppletFormValues['activityFlows'], flow) => { + if (flow.reportIncludedActivityName === activityKey) { + flow.reportIncludedActivityName = ''; + flow.reportIncludedItemName = ''; + } + const items = flow.items?.filter((item) => item.activityKey !== activityKey); + if (items && items.length > 0) { + acc.push({ ...flow, items }); + } + + return acc; + }, + [], + ); removeActivity(index); setValue('activityFlows', newActivityFlows); @@ -177,7 +194,8 @@ export const Activities = () => { const isPerformanceTask = activity?.isPerformanceTask || false; const activityName = activity.name; const isEditVisible = - !isPerformanceTask || EditablePerformanceTasks.includes(activity.performanceTaskType || ''); + !isPerformanceTask || + EditablePerformanceTasks.includes(activity.performanceTaskType || ''); const hasError = errors[index]; const dataTestid = `builder-activities-activity-${index}`; @@ -185,10 +203,16 @@ export const Activities = () => { {(itemProvided, snapshot) => ( - + handleEditActivity(index) : undefined} + onItemClick={ + isEditVisible ? () => handleEditActivity(index) : undefined + } dragHandleProps={itemProvided.dragHandleProps} isDragging={snapshot.isDragging} img={activity.image} @@ -200,7 +224,8 @@ export const Activities = () => { key: activityKey, isActivityHidden: activity.isHidden, onEdit: () => handleEditActivity(index), - onDuplicate: () => handleDuplicateActivity(index, isPerformanceTask), + onDuplicate: () => + handleDuplicateActivity(index, isPerformanceTask), onRemove: () => setActivityToDelete(activityKey), onVisibilityChange: () => handleActivityVisibilityChange(index), isEditVisible, @@ -235,7 +260,9 @@ export const Activities = () => { ) : ( - {t('activityIsRequired')} + + {t('activityIsRequired')} + )} ); diff --git a/src/modules/Builder/features/Activities/ActivitiesHeader/ActivitiesHeader.tsx b/src/modules/Builder/features/Activities/ActivitiesHeader/ActivitiesHeader.tsx index a5816aea80..6dcbc7c182 100644 --- a/src/modules/Builder/features/Activities/ActivitiesHeader/ActivitiesHeader.tsx +++ b/src/modules/Builder/features/Activities/ActivitiesHeader/ActivitiesHeader.tsx @@ -37,7 +37,10 @@ export const ActivitiesHeader = ({ isSticky, children, headerProps }: Activities label={t('addPerformanceTask')} anchorEl={anchorEl} setAnchorEl={setAnchorEl} - menuItems={getPerformanceTasksMenu(headerProps?.onAddActivity || falseReturnFunc, setAnchorEl)} + menuItems={getPerformanceTasksMenu( + headerProps?.onAddActivity || falseReturnFunc, + setAnchorEl, + )} startIcon={} menuListWidth="44rem" data-testid="builder-activities-add-perf-task" diff --git a/src/modules/Builder/features/ActivityAbout/ActivityAbout.test.tsx b/src/modules/Builder/features/ActivityAbout/ActivityAbout.test.tsx index a0f68c536b..58e89feac8 100644 --- a/src/modules/Builder/features/ActivityAbout/ActivityAbout.test.tsx +++ b/src/modules/Builder/features/ActivityAbout/ActivityAbout.test.tsx @@ -99,7 +99,9 @@ describe('ActivityAbout', () => { 'builder-activity-about-reviewable', ]; - fieldsDataTestIds.forEach((dataTestId) => expect(screen.getByTestId(dataTestId)).toBeInTheDocument()); + fieldsDataTestIds.forEach((dataTestId) => + expect(screen.getByTestId(dataTestId)).toBeInTheDocument(), + ); }); test('should render all fields for exisiting applet with default values', () => { @@ -117,7 +119,9 @@ describe('ActivityAbout', () => { expect(showAllAtOnce).toBeChecked(); const isSkippable = screen.getByLabelText('Allow to skip all items'); expect(isSkippable).toBeChecked(); - const isEditable = screen.getByLabelText("Disable the respondent's ability to change the response"); + const isEditable = screen.getByLabelText( + "Disable the respondent's ability to change the response", + ); expect(isEditable).toBeChecked(); const isReviewable = screen.getByLabelText( "This Activity is only displayed in the Admin panel for the reviewer to provide responses about respondent's data. Only single selection, multiple selection, and slider items are supported.", @@ -132,7 +136,9 @@ describe('ActivityAbout', () => { options: { route, routePath }, }); - expect(screen.getByLabelText('Turn the Activity to the Reviewer dashboard assessment')).toBeDisabled(); + expect( + screen.getByLabelText('Turn the Activity to the Reviewer dashboard assessment'), + ).toBeDisabled(); }); test('should validate activity name', async () => { diff --git a/src/modules/Builder/features/ActivityAbout/ActivityAbout.tsx b/src/modules/Builder/features/ActivityAbout/ActivityAbout.tsx index da4a7ac2dd..a30ca5bbc6 100644 --- a/src/modules/Builder/features/ActivityAbout/ActivityAbout.tsx +++ b/src/modules/Builder/features/ActivityAbout/ActivityAbout.tsx @@ -21,12 +21,19 @@ import { import { byteFormatter } from 'shared/utils'; import { BuilderContainer } from 'shared/features'; import { ItemFormValues } from 'modules/Builder/types'; -import { useRedirectIfNoMatchedActivity, useCurrentActivity, useCustomFormContext } from 'modules/Builder/hooks'; +import { + useRedirectIfNoMatchedActivity, + useCurrentActivity, + useCustomFormContext, +} from 'modules/Builder/hooks'; import { Uploads } from '../../components'; import { StyledContainer } from './ActivityAbout.styles'; import { itemsForReviewableActivity, commonUploaderProps } from './ActivityAbout.const'; -import { useCheckIfItemsHaveRequiredItems, useCheckIfItemsHaveVariables } from './ActivityAbout.hooks'; +import { + useCheckIfItemsHaveRequiredItems, + useCheckIfItemsHaveVariables, +} from './ActivityAbout.hooks'; export const ActivityAbout = () => { const { t } = useTranslation(); @@ -40,10 +47,15 @@ export const ActivityAbout = () => { const activityItems = watch(`${fieldName}.items`); const hasUnsupportedReviewableItemTypes = activityItems?.some( - (item: ItemFormValues) => ![...itemsForReviewableActivity, ''].includes(item.responseType as ItemResponseType), + (item: ItemFormValues) => + ![...itemsForReviewableActivity, ''].includes(item.responseType as ItemResponseType), ); - const isReviewableUnsupportedTooltip = hasUnsupportedReviewableItemTypes ? t('isReviewableUnsupported') : null; - let allowToSkipAllItemsTooltip = hasVariableAmongItems ? t('activityHasVariableAmongItems') : null; + const isReviewableUnsupportedTooltip = hasUnsupportedReviewableItemTypes + ? t('isReviewableUnsupported') + : null; + let allowToSkipAllItemsTooltip = hasVariableAmongItems + ? t('activityHasVariableAmongItems') + : null; if (hasRequiredItems) { allowToSkipAllItemsTooltip = t('activityHasRequiredItems'); } diff --git a/src/modules/Builder/features/ActivityFlow/ActivityFlow.test.tsx b/src/modules/Builder/features/ActivityFlow/ActivityFlow.test.tsx index 88cf0d20f8..faccb7e011 100644 --- a/src/modules/Builder/features/ActivityFlow/ActivityFlow.test.tsx +++ b/src/modules/Builder/features/ActivityFlow/ActivityFlow.test.tsx @@ -45,7 +45,9 @@ describe('ActivityFlow', () => { test('Empty page', () => { renderActivityFlow(mockedAppletFormDataWithNoFlows); - expect(screen.getByText('Create an Activity Flow to order the sequence of Activities.')).toBeVisible(); + expect( + screen.getByText('Create an Activity Flow to order the sequence of Activities.'), + ).toBeVisible(); expect(screen.getByTestId('builder-activity-flows-add')).toBeVisible(); }); @@ -55,7 +57,9 @@ describe('ActivityFlow', () => { fireEvent.click(screen.getByTestId('builder-activity-flows-add')); expect(mockedUseNavigate).toBeCalledWith( - `/builder/${mockedAppletFormData.id}/activity-flows/${ref.current.getValues('activityFlows.0.key')}`, + `/builder/${mockedAppletFormData.id}/activity-flows/${ref.current.getValues( + 'activityFlows.0.key', + )}`, ); const activityFlowData = ref.current.getValues('activityFlows.0'); diff --git a/src/modules/Builder/features/ActivityFlow/ActivityFlow.tsx b/src/modules/Builder/features/ActivityFlow/ActivityFlow.tsx index 3fd7cf9e72..66a5b7402e 100644 --- a/src/modules/Builder/features/ActivityFlow/ActivityFlow.tsx +++ b/src/modules/Builder/features/ActivityFlow/ActivityFlow.tsx @@ -42,7 +42,11 @@ export const ActivityFlow = () => { insert: insertActivityFlow, update: updateActivityFlow, move: moveActivityFlow, - } = useFieldArray, string, typeof REACT_HOOK_FORM_KEY_NAME>({ + } = useFieldArray< + Record, + string, + typeof REACT_HOOK_FORM_KEY_NAME + >({ control, name: 'activityFlows', keyName: REACT_HOOK_FORM_KEY_NAME, @@ -96,9 +100,11 @@ export const ActivityFlow = () => { isHidden: !activityFlows[index].isHidden, }); - const getActivityFlowVisible = (isHidden: boolean | undefined) => (isHidden === undefined ? false : isHidden); + const getActivityFlowVisible = (isHidden: boolean | undefined) => + isHidden === undefined ? false : isHidden; - const handleSetFlowToDeleteData = (index: number, name: string) => () => setFlowToDeleteData({ index, name }); + const handleSetFlowToDeleteData = (index: number, name: string) => () => + setFlowToDeleteData({ index, name }); const handleDragEnd: DragDropContextProps['onDragEnd'] = ({ source, destination }) => { setIsDragging(false); @@ -127,7 +133,11 @@ export const ActivityFlow = () => { const dataTestid = `builder-activity-flows-flow-${index}`; return ( - + { data-testid={dataTestid} /> = 0 && index < activityFlows.length - 1 && !isDragging} + isVisible={ + index >= 0 && index < activityFlows.length - 1 && !isDragging + } onInsert={() => handleAddActivityFlow(index + 1)} data-testid={`${dataTestid}-insert`} /> @@ -176,7 +188,9 @@ export const ActivityFlow = () => { )} ) : ( - {t('activityFlowIsRequired')} + + {t('activityFlowIsRequired')} + )} ); diff --git a/src/modules/Builder/features/ActivityFlow/ActivityFlowHeader/ActivityFlowHeader.tsx b/src/modules/Builder/features/ActivityFlow/ActivityFlowHeader/ActivityFlowHeader.tsx index e6b30813a9..b4ca8c8643 100644 --- a/src/modules/Builder/features/ActivityFlow/ActivityFlowHeader/ActivityFlowHeader.tsx +++ b/src/modules/Builder/features/ActivityFlow/ActivityFlowHeader/ActivityFlowHeader.tsx @@ -7,7 +7,11 @@ import { falseReturnFunc } from 'shared/utils'; import { ActivityFlowHeaderProps } from './ActivityFlowHeader.types'; -export const ActivityFlowHeader = ({ isSticky, children, headerProps }: ActivityFlowHeaderProps) => { +export const ActivityFlowHeader = ({ + isSticky, + children, + headerProps, +}: ActivityFlowHeaderProps) => { const { t } = useTranslation('app'); const { onAddActivityFlow = falseReturnFunc } = headerProps || {}; diff --git a/src/modules/Builder/features/ActivityFlow/DeleteFlowModal/DeleteFlowModal.tsx b/src/modules/Builder/features/ActivityFlow/DeleteFlowModal/DeleteFlowModal.tsx index c6cb8eab19..c5e9e14153 100644 --- a/src/modules/Builder/features/ActivityFlow/DeleteFlowModal/DeleteFlowModal.tsx +++ b/src/modules/Builder/features/ActivityFlow/DeleteFlowModal/DeleteFlowModal.tsx @@ -5,7 +5,12 @@ import { StyledModalWrapper } from 'shared/styles'; import { DeleteFlowModalProps } from './DeleteFlowModal.types'; -export const DeleteFlowModal = ({ activityFlowName, isOpen, onModalClose, onModalSubmit }: DeleteFlowModalProps) => { +export const DeleteFlowModal = ({ + activityFlowName, + isOpen, + onModalClose, + onModalSubmit, +}: DeleteFlowModalProps) => { const { t } = useTranslation('app'); return ( diff --git a/src/modules/Builder/features/ActivityFlowAbout/ActivityFlowAbout.test.tsx b/src/modules/Builder/features/ActivityFlowAbout/ActivityFlowAbout.test.tsx index 09816531e9..b6412e98d1 100644 --- a/src/modules/Builder/features/ActivityFlowAbout/ActivityFlowAbout.test.tsx +++ b/src/modules/Builder/features/ActivityFlowAbout/ActivityFlowAbout.test.tsx @@ -57,7 +57,8 @@ const renderActivityFlowAbout = (formData = mockedAppletFormData) => { return ref; }; const renderNewActivityFlowAbout = () => renderActivityFlowAbout(mockedAppletFormDataWithEmptyFlow); -const renderActivityFlowAboutWithTwoFlows = () => renderActivityFlowAbout(mockedAppletFormDataWithTwoFlows); +const renderActivityFlowAboutWithTwoFlows = () => + renderActivityFlowAbout(mockedAppletFormDataWithTwoFlows); describe('ActivityFlowAbout', () => { beforeEach(() => { @@ -112,7 +113,9 @@ describe('ActivityFlowAbout', () => { const field = screen.getByTestId(testId); - inputType ? fireEvent.change(field.querySelector(inputType), { target: { value } }) : fireEvent.click(field); + inputType + ? fireEvent.change(field.querySelector(inputType), { target: { value } }) + : fireEvent.click(field); expect(ref.current.getValues(`activityFlows.0.${attribute}`)).toEqual(value); }); @@ -144,7 +147,9 @@ describe('ActivityFlowAbout', () => { await ref.current.trigger('activityFlows'); await waitFor(() => { - expect(screen.getByText('That Activity Flow Name is already in use. Please use a different name')).toBeVisible(); + expect( + screen.getByText('That Activity Flow Name is already in use. Please use a different name'), + ).toBeVisible(); }); }); }); diff --git a/src/modules/Builder/features/ActivityFlowAbout/ActivityFlowAbout.tsx b/src/modules/Builder/features/ActivityFlowAbout/ActivityFlowAbout.tsx index 7c6c38ee57..4c7008da46 100644 --- a/src/modules/Builder/features/ActivityFlowAbout/ActivityFlowAbout.tsx +++ b/src/modules/Builder/features/ActivityFlowAbout/ActivityFlowAbout.tsx @@ -5,7 +5,13 @@ import { Box } from '@mui/material'; import { useCustomFormContext } from 'modules/Builder/hooks'; import { Tooltip } from 'shared/components/Tooltip'; import { CheckboxController, InputController } from 'shared/components/FormComponents'; -import { theme, variables, StyledBodyLarge, StyledFlexColumn, StyledTitleMedium } from 'shared/styles'; +import { + theme, + variables, + StyledBodyLarge, + StyledFlexColumn, + StyledTitleMedium, +} from 'shared/styles'; import { MAX_DESCRIPTION_LENGTH, MAX_NAME_LENGTH, TEXTAREA_ROWS_COUNT_SM } from 'shared/consts'; import { BuilderContainer } from 'shared/features'; import { AppletFormValues } from 'modules/Builder/types'; @@ -57,7 +63,10 @@ export const ActivityFlowAbout = () => { data-testid={`${dataTestid}-description`} /> - + {t('additionalSettings')} diff --git a/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilder.test.tsx b/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilder.test.tsx index 75cd95c0bf..61d66c59e6 100644 --- a/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilder.test.tsx +++ b/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilder.test.tsx @@ -49,12 +49,16 @@ describe('Activity Flow Builder', () => { test('Is rendered correctly', async () => { renderActivityFlowBuilder(); - expect(screen.getByTestId(`${mockedActivityFlowBuilderTestid}-header`)).toHaveTextContent('Activity Flow Builder'); + expect(screen.getByTestId(`${mockedActivityFlowBuilderTestid}-header`)).toHaveTextContent( + 'Activity Flow Builder', + ); expect(screen.getByTestId(`${mockedActivityFlowBuilderTestid}-add`)).toBeVisible(); expect(screen.getByTestId(`${mockedActivityFlowBuilderTestid}-clear`)).toBeVisible(); await waitFor(() => { - const activities = screen.getAllByTestId(new RegExp(`^${mockedActivityFlowBuilderTestid}-flow-\\d+$`)); + const activities = screen.getAllByTestId( + new RegExp(`^${mockedActivityFlowBuilderTestid}-flow-\\d+$`), + ); expect(activities).toHaveLength(1); activities.forEach((activity, index) => { expect(activity).toBeVisible(); @@ -110,10 +114,14 @@ describe('Activity Flow Builder', () => { expect(screen.getByTestId(`${mockedActivityFlowBuilderTestid}-clear-popup`)).toBeVisible(); }); - fireEvent.click(screen.getByTestId(`${mockedActivityFlowBuilderTestid}-clear-popup-submit-button`)); + fireEvent.click( + screen.getByTestId(`${mockedActivityFlowBuilderTestid}-clear-popup-submit-button`), + ); await waitFor(() => { - expect(screen.queryAllByTestId(new RegExp(`^${mockedActivityFlowBuilderTestid}-flow-\\d+$`))).toHaveLength(0); + expect( + screen.queryAllByTestId(new RegExp(`^${mockedActivityFlowBuilderTestid}-flow-\\d+$`)), + ).toHaveLength(0); expect(ref.current.getValues('activityFlows.0.items')).toEqual([]); expect(clearFlow).toBeDisabled(); }); @@ -126,7 +134,9 @@ describe('Activity Flow Builder', () => { const addActivity = screen.getByTestId(`${mockedActivityFlowBuilderTestid}-add`); fireEvent.click(addActivity); - const selectActivity = screen.getByTestId(`${mockedActivityFlowBuilderTestid}-add-activity-0`); + const selectActivity = screen.getByTestId( + `${mockedActivityFlowBuilderTestid}-add-activity-0`, + ); fireEvent.click(selectActivity); await waitFor(() => { @@ -156,7 +166,9 @@ describe('Activity Flow Builder', () => { screen.getByTestId(`${mockedActivityFlowBuilderTestid}-flow-1`); }); - expect(screen.getByTestId(`${mockedActivityFlowBuilderTestid}-flow-1`)).toHaveTextContent('New Activity'); + expect(screen.getByTestId(`${mockedActivityFlowBuilderTestid}-flow-1`)).toHaveTextContent( + 'New Activity', + ); expect(ref.current.getValues('activityFlows.0.items')).toEqual([ mockedAppletFormDataWithTwoActivites.activityFlows[0].items[0], { @@ -179,10 +191,14 @@ describe('Activity Flow Builder', () => { expect(screen.getByTestId(`${mockedActivityFlowBuilderTestid}-remove-popup`)).toBeVisible(); }); - fireEvent.click(screen.getByTestId(`${mockedActivityFlowBuilderTestid}-remove-popup-submit-button`)); + fireEvent.click( + screen.getByTestId(`${mockedActivityFlowBuilderTestid}-remove-popup-submit-button`), + ); await waitFor(() => { - expect(screen.queryAllByTestId(new RegExp(`^${mockedActivityFlowBuilderTestid}-flow-\\d+$`))).toHaveLength(0); + expect( + screen.queryAllByTestId(new RegExp(`^${mockedActivityFlowBuilderTestid}-flow-\\d+$`)), + ).toHaveLength(0); expect(ref.current.getValues('activityFlows.0.items')).toEqual([]); }); }); diff --git a/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilder.tsx b/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilder.tsx index 82cd09429e..350d6953d5 100644 --- a/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilder.tsx +++ b/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilder.tsx @@ -17,7 +17,11 @@ import { REACT_HOOK_FORM_KEY_NAME } from 'modules/Builder/consts'; import { StyledTitleMedium, theme, variables } from 'shared/styles'; import { RemoveFlowActivityModal } from './RemoveFlowActivityModal'; -import { getActivityFlowIndex, getFlowBuilderActions, getMenuItems } from './ActivityFlowBuilder.utils'; +import { + getActivityFlowIndex, + getFlowBuilderActions, + getMenuItems, +} from './ActivityFlowBuilder.utils'; import { ActivityFlowBuilderHeader } from './ActivityFlowBuilderHeader'; import { GetMenuItemsType } from './ActivityFlowBuilder.types'; import { builderItemClassName } from './ActivityFlowBuilder.const'; @@ -70,8 +74,9 @@ export const ActivityFlowBuilder = () => { if ( currentActivityFlow.reportIncludedActivityName && flowActivityToDeleteData.activityKey === currentActivityFlow.reportIncludedActivityName && - activityFlowItems.filter((item) => item.activityKey === currentActivityFlow.reportIncludedActivityName).length === - 1 + activityFlowItems.filter( + (item) => item.activityKey === currentActivityFlow.reportIncludedActivityName, + ).length === 1 ) { removeReportConfigItemValue(); } @@ -99,8 +104,9 @@ export const ActivityFlowBuilder = () => { if ( flowActivityToUpdateIndex !== null && currentActivityFlow.reportIncludedActivityName && - activityFlowItems.filter((item) => item.activityKey === currentActivityFlow.reportIncludedActivityName).length === - 1 + activityFlowItems.filter( + (item) => item.activityKey === currentActivityFlow.reportIncludedActivityName, + ).length === 1 ) { removeReportConfigItemValue(); } @@ -167,7 +173,8 @@ export const ActivityFlowBuilder = () => { activityName || '', item.activityKey, ), - replaceItemActionActive: !!anchorEl && flowActivityToUpdateIndex === index, + replaceItemActionActive: + !!anchorEl && flowActivityToUpdateIndex === index, 'data-testid': itemDataTestid, }) } @@ -220,7 +227,9 @@ export const ActivityFlowBuilder = () => { )} ) : ( - + {t('activityFlowIsRequired')} )} diff --git a/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilder.utils.tsx b/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilder.utils.tsx index d99888bf55..2d7fc8bc5f 100644 --- a/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilder.utils.tsx +++ b/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilder.utils.tsx @@ -8,7 +8,8 @@ import { ActivityFlowFormValues } from 'modules/Builder/types'; import { GetFlowBuilderActions, GetMenuItems, GetMenuItemsType } from './ActivityFlowBuilder.types'; -const checkOnIdOrKey = (checkId: string) => (entity: ActivityFlowFormValues) => (entity.id || entity.key) === checkId; +const checkOnIdOrKey = (checkId: string) => (entity: ActivityFlowFormValues) => + (entity.id || entity.key) === checkId; export const getActivityFlowIndex = (activityFlows: ActivityFlowFormValues[], checkId: string) => activityFlows.findIndex(checkOnIdOrKey(checkId)); @@ -27,7 +28,9 @@ export const getMenuItems = ({ const activityKey = activity.id || activity.key || ''; type === GetMenuItemsType.AddActivity ? onAddFlowActivity && onAddFlowActivity(activityKey) - : onUpdateFlowActivity && index !== undefined && onUpdateFlowActivity(index, { key: uuidv4(), activityKey }); + : onUpdateFlowActivity && + index !== undefined && + onUpdateFlowActivity(index, { key: uuidv4(), activityKey }); onMenuClose(); }, 'data-testid': `builder-activity-flows-builder-add-activity-${key}`, @@ -43,7 +46,8 @@ export const getFlowBuilderActions = ({ }: GetFlowBuilderActions) => [ { icon: , - action: (item?: ItemType, event?: MouseEvent) => event && replaceItem(event, index), + action: (item?: ItemType, event?: MouseEvent) => + event && replaceItem(event, index), active: replaceItemActionActive, 'data-testid': `${dataTestid}-replace`, }, diff --git a/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilderHeader/ActivityFlowBuilderHeader.tsx b/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilderHeader/ActivityFlowBuilderHeader.tsx index 561f69dbdd..7cc33422da 100644 --- a/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilderHeader/ActivityFlowBuilderHeader.tsx +++ b/src/modules/Builder/features/ActivityFlowBuilder/ActivityFlowBuilderHeader/ActivityFlowBuilderHeader.tsx @@ -15,7 +15,11 @@ import { GetMenuItemsType } from '../ActivityFlowBuilder.types'; import { StyledButtons } from './ActivityFlowBuilderHeader.styles'; import { ActivityFlowBuilderHeaderProps } from './ActivityFlowBuilderHeader.types'; -export const ActivityFlowBuilderHeader = ({ isSticky, children, headerProps }: ActivityFlowBuilderHeaderProps) => { +export const ActivityFlowBuilderHeader = ({ + isSticky, + children, + headerProps, +}: ActivityFlowBuilderHeaderProps) => { const { t } = useTranslation('app'); const { watch } = useCustomFormContext(); const activities: AppletFormValues['activities'] = watch('activities'); diff --git a/src/modules/Builder/features/ActivityFlowSettings/ActivityFlowSettings.tsx b/src/modules/Builder/features/ActivityFlowSettings/ActivityFlowSettings.tsx index 8a7876a078..5db56b0ffb 100644 --- a/src/modules/Builder/features/ActivityFlowSettings/ActivityFlowSettings.tsx +++ b/src/modules/Builder/features/ActivityFlowSettings/ActivityFlowSettings.tsx @@ -15,7 +15,9 @@ export const ActivityFlowSettings = () => { useRedirectIfNoMatchedActivityFlow(); const handleItemClose = () => { - navigate(generatePath(page.builderAppletActivityFlowItemSettings, { appletId, activityFlowId })); + navigate( + generatePath(page.builderAppletActivityFlowItemSettings, { appletId, activityFlowId }), + ); }; const handleSetActiveItem = (setting: NavigationItem) => { navigate( diff --git a/src/modules/Builder/features/ActivityItems/ActivityItems.test.tsx b/src/modules/Builder/features/ActivityItems/ActivityItems.test.tsx index 2a1b6b001c..5c1ea2ee39 100644 --- a/src/modules/Builder/features/ActivityItems/ActivityItems.test.tsx +++ b/src/modules/Builder/features/ActivityItems/ActivityItems.test.tsx @@ -8,7 +8,10 @@ import { screen, fireEvent, waitFor } from '@testing-library/react'; import { page } from 'resources'; import { getEntityKey, renderWithAppletFormData } from 'shared/utils'; import { mockedParams, mockedAppletFormData, mockIntersectionObserver } from 'shared/mock'; -import { getNewActivity, getNewActivityItem } from 'modules/Builder/pages/BuilderApplet/BuilderApplet.utils'; +import { + getNewActivity, + getNewActivityItem, +} from 'modules/Builder/pages/BuilderApplet/BuilderApplet.utils'; import { ActivityItems } from './ActivityItems'; @@ -112,9 +115,13 @@ describe('Activity Items', () => { const addItem = screen.getByTestId(mockedAddItemTestId); fireEvent.click(addItem); - await waitFor(() => expect(screen.getByTestId(`${mockedActivityItemTestid}-0`)).toBeVisible()); + await waitFor(() => + expect(screen.getByTestId(`${mockedActivityItemTestid}-0`)).toBeVisible(), + ); - const hoverableItem = screen.getByTestId(`${mockedActivityItemTestid}-0`).querySelector('div'); + const hoverableItem = screen + .getByTestId(`${mockedActivityItemTestid}-0`) + .querySelector('div'); fireEvent.mouseEnter(hoverableItem); @@ -129,7 +136,9 @@ describe('Activity Items', () => { expect(duplicatedItem).toHaveTextContent('Item_1'); }); - const duplicatedHoverableItem = screen.getByTestId(`${mockedActivityItemTestid}-1`).querySelector('div'); + const duplicatedHoverableItem = screen + .getByTestId(`${mockedActivityItemTestid}-1`) + .querySelector('div'); fireEvent.mouseEnter(duplicatedHoverableItem); fireEvent.click(screen.getByTestId(`${mockedActivityItemTestid}-1-duplicate`)); @@ -146,9 +155,13 @@ describe('Activity Items', () => { const addItem = screen.getByTestId(mockedAddItemTestId); fireEvent.click(addItem); - await waitFor(() => expect(screen.getByTestId(`${mockedActivityItemTestid}-0`)).toBeVisible()); + await waitFor(() => + expect(screen.getByTestId(`${mockedActivityItemTestid}-0`)).toBeVisible(), + ); - const hoverableItem = screen.getByTestId(`${mockedActivityItemTestid}-0`).querySelector('div'); + const hoverableItem = screen + .getByTestId(`${mockedActivityItemTestid}-0`) + .querySelector('div'); fireEvent.mouseEnter(hoverableItem); @@ -171,9 +184,13 @@ describe('Activity Items', () => { const addItem = screen.getByTestId(mockedAddItemTestId); fireEvent.click(addItem); - await waitFor(() => expect(screen.getByTestId(`${mockedActivityItemTestid}-0`)).toBeVisible()); + await waitFor(() => + expect(screen.getByTestId(`${mockedActivityItemTestid}-0`)).toBeVisible(), + ); - const hoverableItem = screen.getByTestId(`${mockedActivityItemTestid}-0`).querySelector('div'); + const hoverableItem = screen + .getByTestId(`${mockedActivityItemTestid}-0`) + .querySelector('div'); fireEvent.mouseEnter(hoverableItem); @@ -187,7 +204,9 @@ describe('Activity Items', () => { expect(modal).toBeVisible(); }); - const confirmRemove = screen.getByTestId('builder-activity-items-delete-item-popup-submit-button'); + const confirmRemove = screen.getByTestId( + 'builder-activity-items-delete-item-popup-submit-button', + ); fireEvent.click(confirmRemove); expect(ref.current.getValues('activities.0.items')).toEqual([]); @@ -200,13 +219,19 @@ describe('Activity Items', () => { const addItem = screen.getByTestId(mockedAddItemTestId); fireEvent.click(addItem); - await waitFor(() => expect(screen.getByTestId(`${mockedActivityItemTestid}-0`)).toBeVisible()); + await waitFor(() => + expect(screen.getByTestId(`${mockedActivityItemTestid}-0`)).toBeVisible(), + ); - expect(screen.queryByTestId(`${mockedActivityItemTestid}-0-insert-0`)).not.toBeInTheDocument(); + expect( + screen.queryByTestId(`${mockedActivityItemTestid}-0-insert-0`), + ).not.toBeInTheDocument(); fireEvent.click(addItem); - await waitFor(() => expect(screen.getByTestId(`${mockedActivityItemTestid}-1`)).toBeVisible()); + await waitFor(() => + expect(screen.getByTestId(`${mockedActivityItemTestid}-1`)).toBeVisible(), + ); const insert = screen.queryByTestId(`${mockedActivityItemTestid}-0-insert-0`); fireEvent.mouseEnter(insert); @@ -225,7 +250,9 @@ describe('Activity Items', () => { const addItem = screen.getByTestId(mockedAddItemTestId); fireEvent.click(addItem); - expect(mockedUseNavigate).toBeCalledWith(getActivityItemUrl(ref.current.getValues('activities.0.items.0.key'))); + expect(mockedUseNavigate).toBeCalledWith( + getActivityItemUrl(ref.current.getValues('activities.0.items.0.key')), + ); }); test('Active on add if another item is active', () => { @@ -234,7 +261,9 @@ describe('Activity Items', () => { const addItem = screen.getByTestId(mockedAddItemTestId); fireEvent.click(addItem); - expect(mockedUseNavigate).toBeCalledWith(getActivityItemUrl(ref.current.getValues('activities.0.items.1.key'))); + expect(mockedUseNavigate).toBeCalledWith( + getActivityItemUrl(ref.current.getValues('activities.0.items.1.key')), + ); }); test('Active on insert by default', async () => { @@ -244,9 +273,13 @@ describe('Activity Items', () => { fireEvent.click(addItem); fireEvent.click(addItem); - await waitFor(() => expect(screen.getByTestId(`${mockedActivityItemTestid}-1`)).toBeVisible()); + await waitFor(() => + expect(screen.getByTestId(`${mockedActivityItemTestid}-1`)).toBeVisible(), + ); - fireEvent.click(screen.getByTestId(`${mockedActivityItemTestid}-0-insert-0`).querySelector('button')); + fireEvent.click( + screen.getByTestId(`${mockedActivityItemTestid}-0-insert-0`).querySelector('button'), + ); expect(mockedUseNavigate).toHaveBeenNthCalledWith( 3, @@ -260,9 +293,13 @@ describe('Activity Items', () => { const addItem = screen.getByTestId(mockedAddItemTestId); fireEvent.click(addItem); - await waitFor(() => expect(screen.getByTestId(`${mockedActivityItemTestid}-1`)).toBeVisible()); + await waitFor(() => + expect(screen.getByTestId(`${mockedActivityItemTestid}-1`)).toBeVisible(), + ); - fireEvent.click(screen.getByTestId(`${mockedActivityItemTestid}-0-insert-0`).querySelector('button')); + fireEvent.click( + screen.getByTestId(`${mockedActivityItemTestid}-0-insert-0`).querySelector('button'), + ); expect(mockedUseNavigate).toHaveBeenNthCalledWith( 2, @@ -277,9 +314,13 @@ describe('Activity Items', () => { fireEvent.click(addItem); fireEvent.click(addItem); - await waitFor(() => expect(screen.getByTestId(`${mockedActivityItemTestid}-0`)).toBeVisible()); + await waitFor(() => + expect(screen.getByTestId(`${mockedActivityItemTestid}-0`)).toBeVisible(), + ); - const hoverableItem = screen.getByTestId(`${mockedActivityItemTestid}-0`).querySelector('div'); + const hoverableItem = screen + .getByTestId(`${mockedActivityItemTestid}-0`) + .querySelector('div'); fireEvent.mouseEnter(hoverableItem); @@ -293,7 +334,9 @@ describe('Activity Items', () => { expect(modal).toBeVisible(); }); - const confirmRemove = screen.getByTestId('builder-activity-items-delete-item-popup-submit-button'); + const confirmRemove = screen.getByTestId( + 'builder-activity-items-delete-item-popup-submit-button', + ); fireEvent.click(confirmRemove); expect(mockedUseNavigate).nthCalledWith(3, getActivityItemUrl()); @@ -311,7 +354,10 @@ describe('Activity Items', () => { fireEvent.click(screen.getByTestId(`${mockedActivityItemTestid}-0`).querySelector('div')); - expect(mockedUseNavigate).nthCalledWith(2, getActivityItemUrl(ref.current.getValues('activities.0.items.0.key'))); + expect(mockedUseNavigate).nthCalledWith( + 2, + getActivityItemUrl(ref.current.getValues('activities.0.items.0.key')), + ); }); }); @@ -329,7 +375,9 @@ describe('Activity Items', () => { { itemKey: ref.current.getValues('activities.0.items.0.key') }, ]); - fireEvent.mouseEnter(screen.getByTestId(`${mockedActivityItemTestid}-0`).querySelector('div')); + fireEvent.mouseEnter( + screen.getByTestId(`${mockedActivityItemTestid}-0`).querySelector('div'), + ); const removes = screen.getAllByTestId(`${mockedActivityItemTestid}-0-remove`); fireEvent.click(removes[0]); @@ -356,7 +404,9 @@ describe('Activity Items', () => { { conditions: [{ itemName: ref.current.getValues('activities.0.items.0.key') }] }, ]); - fireEvent.mouseEnter(screen.getByTestId(`${mockedActivityItemTestid}-0`).querySelector('div')); + fireEvent.mouseEnter( + screen.getByTestId(`${mockedActivityItemTestid}-0`).querySelector('div'), + ); const removes = screen.getAllByTestId(`${mockedActivityItemTestid}-0-remove`); fireEvent.click(removes[0]); @@ -384,7 +434,9 @@ describe('Activity Items', () => { ref.current.setValue('activities.0.items.1.name', 'Item2'); ref.current.setValue('activities.0.items.1.question', '[[Item]]'); - fireEvent.mouseEnter(screen.getByTestId(`${mockedActivityItemTestid}-0`).querySelector('div')); + fireEvent.mouseEnter( + screen.getByTestId(`${mockedActivityItemTestid}-0`).querySelector('div'), + ); const removes = screen.getAllByTestId(`${mockedActivityItemTestid}-0-remove`); fireEvent.click(removes[0]); diff --git a/src/modules/Builder/features/ActivityItems/ActivityItems.tsx b/src/modules/Builder/features/ActivityItems/ActivityItems.tsx index 9b8ec199a3..339a4d9425 100644 --- a/src/modules/Builder/features/ActivityItems/ActivityItems.tsx +++ b/src/modules/Builder/features/ActivityItems/ActivityItems.tsx @@ -7,7 +7,10 @@ import { page } from 'resources'; import { StyledContainer } from 'shared/styles'; import { getEntityKey, pluck } from 'shared/utils'; import { useRedirectIfNoMatchedActivity, useCurrentActivity } from 'modules/Builder/hooks'; -import { getNewActivityItem, getUniqueItem } from 'modules/Builder/pages/BuilderApplet/BuilderApplet.utils'; +import { + getNewActivityItem, + getUniqueItem, +} from 'modules/Builder/pages/BuilderApplet/BuilderApplet.utils'; import { ItemFormValues } from 'modules/Builder/types'; import { getUniqueName } from 'modules/Builder/utils'; import { REACT_HOOK_FORM_KEY_NAME } from 'modules/Builder/consts'; @@ -37,8 +40,13 @@ export const ActivityItems = () => { const itemsValue: ItemFormValues[] = watch(itemsName); const { appletId, activityId, itemId } = useParams(); - const activeItemIndex = itemId ? itemsValue?.findIndex((item) => getEntityKey(item) === itemId) : -1; - const activeItem = activeItemIndex === undefined || activeItemIndex === -1 ? undefined : itemsValue[activeItemIndex]; + const activeItemIndex = itemId + ? itemsValue?.findIndex((item) => getEntityKey(item) === itemId) + : -1; + const activeItem = + activeItemIndex === undefined || activeItemIndex === -1 + ? undefined + : itemsValue[activeItemIndex]; const [itemIdToDelete, setItemIdToDelete] = useState(''); useRedirectIfNoMatchedActivity(); diff --git a/src/modules/Builder/features/ActivityItems/ActivityItems.utils.ts b/src/modules/Builder/features/ActivityItems/ActivityItems.utils.ts index ea568dd4a4..b7ca4c0404 100644 --- a/src/modules/Builder/features/ActivityItems/ActivityItems.utils.ts +++ b/src/modules/Builder/features/ActivityItems/ActivityItems.utils.ts @@ -4,10 +4,14 @@ import { ItemFormValues } from 'modules/Builder/types'; import { GetConditionsToRemoveConfig, ItemNameWithIndex } from './ActivityItems.types'; -export const getItemConditionDependencies = (item: ItemFormValues, conditionalLogic?: ConditionalLogic[]) => +export const getItemConditionDependencies = ( + item: ItemFormValues, + conditionalLogic?: ConditionalLogic[], +) => conditionalLogic?.filter( ({ itemKey, conditions }) => - itemKey === getEntityKey(item) || conditions?.some(({ itemName }) => itemName === getEntityKey(item)), + itemKey === getEntityKey(item) || + conditions?.some(({ itemName }) => itemName === getEntityKey(item)), ); export const getConditionsToRemove = ({ diff --git a/src/modules/Builder/features/ActivityItems/ConditionalPanel/ConditionalPanel.tsx b/src/modules/Builder/features/ActivityItems/ConditionalPanel/ConditionalPanel.tsx index 4d6674461f..e320a55c8e 100644 --- a/src/modules/Builder/features/ActivityItems/ConditionalPanel/ConditionalPanel.tsx +++ b/src/modules/Builder/features/ActivityItems/ConditionalPanel/ConditionalPanel.tsx @@ -13,7 +13,13 @@ import { } from 'shared/state'; import { getEntityKey, getObjectFromList } from 'shared/utils'; import { Svg } from 'shared/components/Svg'; -import { StyledBodyLarge, StyledClearedButton, StyledFlexColumn, StyledFlexTopCenter, theme } from 'shared/styles'; +import { + StyledBodyLarge, + StyledClearedButton, + StyledFlexColumn, + StyledFlexTopCenter, + theme, +} from 'shared/styles'; import { ItemResponseType, CONDITION_TYPES_TO_HAVE_RANGE_VALUE, @@ -60,31 +66,47 @@ export const ConditionalPanel = ({ condition }: { condition?: ConditionalLogic } {isExpanded && ( - + {condition?.conditions?.map(({ key, type, itemName, payload }) => { const relatedItem = groupedItems[itemName]; const valuePlaceholder = t('conditionPanelValue'); const isSlider = relatedItem?.responseType === ItemResponseType.Slider; const isSingleValueShown = - isSlider && type && CONDITION_TYPES_TO_HAVE_SINGLE_VALUE.includes(type as ConditionType); + isSlider && + type && + CONDITION_TYPES_TO_HAVE_SINGLE_VALUE.includes(type as ConditionType); const isRangeValueShown = - isSlider && type && CONDITION_TYPES_TO_HAVE_RANGE_VALUE.includes(type as ConditionType); + isSlider && + type && + CONDITION_TYPES_TO_HAVE_RANGE_VALUE.includes(type as ConditionType); return ( - - {relatedItem?.name ?? t('conditionPanelItem')} {t('conditionPanelType', { context: type })}{' '} + + {relatedItem?.name ?? t('conditionPanelItem')}{' '} + {t('conditionPanelType', { context: type })}{' '} {((!isSlider || (isSlider && !type)) && - (relatedItem?.responseValues as SingleAndMultipleSelectItemResponseValues)?.options?.find( + ( + relatedItem?.responseValues as SingleAndMultipleSelectItemResponseValues + )?.options?.find( (option: SingleAndMultiSelectOption) => getEntityKey(option) === (payload as OptionCondition['payload'])?.optionValue, )?.text) ?? valuePlaceholder} - {(isSingleValueShown && (payload as SingleValueCondition['payload'])?.value) ?? valuePlaceholder} + {(isSingleValueShown && (payload as SingleValueCondition['payload'])?.value) ?? + valuePlaceholder} {isRangeValueShown && t('conditionPanelValueRange', { - minValue: (payload as RangeValueCondition['payload'])?.minValue ?? valuePlaceholder, - maxValue: (payload as RangeValueCondition['payload'])?.maxValue ?? valuePlaceholder, + minValue: + (payload as RangeValueCondition['payload'])?.minValue ?? valuePlaceholder, + maxValue: + (payload as RangeValueCondition['payload'])?.maxValue ?? valuePlaceholder, })} ); diff --git a/src/modules/Builder/features/ActivityItems/DeleteItemModal/DeleteItemModal.tsx b/src/modules/Builder/features/ActivityItems/DeleteItemModal/DeleteItemModal.tsx index 236ff1998e..08c7c54bb4 100644 --- a/src/modules/Builder/features/ActivityItems/DeleteItemModal/DeleteItemModal.tsx +++ b/src/modules/Builder/features/ActivityItems/DeleteItemModal/DeleteItemModal.tsx @@ -10,7 +10,11 @@ import { } from 'modules/Builder/features/ActivityItems/ActivityItems.utils'; import { getEntityKey } from 'shared/utils'; import { ActivityFlowFormValues, ItemFormValues, SubscaleFormValue } from 'modules/Builder/types'; -import { useCurrentActivity, useFilterConditionalLogicByItem, useCustomFormContext } from 'modules/Builder/hooks'; +import { + useCurrentActivity, + useFilterConditionalLogicByItem, + useCustomFormContext, +} from 'modules/Builder/hooks'; import { ScoreReportType } from 'shared/consts'; import { DeleteItemModalProps } from './DeleteItemModal.types'; @@ -35,9 +39,14 @@ export const DeleteItemModal = ({ const itemToDelete = items?.[itemIndexToDelete]; const itemName = itemToDelete?.name; const filterConditionalLogicByItem = useFilterConditionalLogicByItem(itemToDelete); - const conditionalLogicForItemToDelete = getItemConditionDependencies(itemToDelete, activity?.conditionalLogic); + const conditionalLogicForItemToDelete = getItemConditionDependencies( + itemToDelete, + activity?.conditionalLogic, + ); const itemsWithVariablesToRemove = getItemsWithVariable(itemToDelete?.name, items); - const itemsWithVariablesToRemoveString = itemsWithVariablesToRemove.map((item) => item.name).join(', '); + const itemsWithVariablesToRemoveString = itemsWithVariablesToRemove + .map((item) => item.name) + .join(', '); const handleRemoveItem = (index: number) => { onRemoveItem(index); @@ -60,10 +69,7 @@ export const DeleteItemModal = ({ if (activity?.reportIncludedItemName === itemIdToDelete) { setValue(`${fieldName}.reportIncludedItemName`, ''); } - setValue( - `${fieldName}.items`, - items?.filter((_, key) => key !== index), - ); + setValue(`${fieldName}.items`, items?.filter((_, key) => key !== index)); if (itemsWithVariablesToRemove.length) { for (const item of itemsWithVariablesToRemove) { @@ -104,10 +110,7 @@ export const DeleteItemModal = ({ if (itemsPrint?.includes(itemIdToDelete)) { shouldTriggerReports = true; - setValue( - `${reportField}.itemsPrint`, - itemsPrint?.filter((id) => id !== itemIdToDelete), - ); + setValue(`${reportField}.itemsPrint`, itemsPrint?.filter((id) => id !== itemIdToDelete)); } if (type === ScoreReportType.Score) { const { itemsScore } = report; @@ -135,7 +138,9 @@ export const DeleteItemModal = ({ const { conditions } = conditionalLogic; if (conditions?.some((condition) => condition.itemName === itemIdToDelete)) { shouldTriggerReports = true; - const newConditions = conditions.filter((condition) => condition.itemName !== itemIdToDelete); + const newConditions = conditions.filter( + (condition) => condition.itemName !== itemIdToDelete, + ); setValue(`${reportField}.conditionalLogic.conditions`, newConditions); } } @@ -196,7 +201,10 @@ export const DeleteItemModal = ({ {deleteItemWithConditionalsDesc} {conditionalLogicForItemToDelete?.map((conditionalLogic: ConditionalLogic) => ( - + ))} )} diff --git a/src/modules/Builder/features/ActivityItems/ItemConfiguration/Alerts/Alert/Alert.tsx b/src/modules/Builder/features/ActivityItems/ItemConfiguration/Alerts/Alert/Alert.tsx index 2b289b1d2e..7b3b04b498 100644 --- a/src/modules/Builder/features/ActivityItems/ItemConfiguration/Alerts/Alert/Alert.tsx +++ b/src/modules/Builder/features/ActivityItems/ItemConfiguration/Alerts/Alert/Alert.tsx @@ -3,7 +3,13 @@ import get from 'lodash.get'; import { Svg } from 'shared/components/Svg'; import { InputController } from 'shared/components/FormComponents'; -import { StyledTitleBoldSmall, StyledIconButton, variables, theme, StyledBodyMedium } from 'shared/styles'; +import { + StyledTitleBoldSmall, + StyledIconButton, + variables, + theme, + StyledBodyMedium, +} from 'shared/styles'; import { ItemResponseType } from 'shared/consts'; import { ItemFormValues } from 'modules/Builder/types'; import { useCustomFormContext } from 'modules/Builder/hooks'; diff --git a/src/modules/Builder/features/ActivityItems/ItemConfiguration/Alerts/Alert/Alert.utils.ts b/src/modules/Builder/features/ActivityItems/ItemConfiguration/Alerts/Alert/Alert.utils.ts index 4fdc481b3f..3c9cc84cdf 100644 --- a/src/modules/Builder/features/ActivityItems/ItemConfiguration/Alerts/Alert/Alert.utils.ts +++ b/src/modules/Builder/features/ActivityItems/ItemConfiguration/Alerts/Alert/Alert.utils.ts @@ -23,14 +23,21 @@ export const getSliderOptions = (min: number, max: number) => export const getOptionsList = (formValues: ItemFormValues, alert: ItemAlert) => { const { responseType, responseValues, alerts } = formValues; - if (responseType === ItemResponseType.SingleSelection || responseType === ItemResponseType.MultipleSelection) { + if ( + responseType === ItemResponseType.SingleSelection || + responseType === ItemResponseType.MultipleSelection + ) { const { options } = responseValues ?? {}; return ( options?.reduce((result: Option[], option, index) => { - if (alerts?.some(({ value }) => value === option.id && option.id !== alert?.value)) return result; + if (alerts?.some(({ value }) => value === option.id && option.id !== alert?.value)) + return result; - return [...result, { labelKey: getOptionName(OptionTypes.Option, index, option.text), value: option.id! }]; + return [ + ...result, + { labelKey: getOptionName(OptionTypes.Option, index, option.text), value: option.id! }, + ]; }, []) || [] ); } @@ -52,7 +59,10 @@ export const getOptionsList = (formValues: ItemFormValues, alert: ItemAlert) => if (hasSameAlert) return result; - return [...result, { labelKey: getOptionName(OptionTypes.Option, index, option.text), value: option.id! }]; + return [ + ...result, + { labelKey: getOptionName(OptionTypes.Option, index, option.text), value: option.id! }, + ]; }, []); } @@ -84,12 +94,16 @@ export const getItemsList = (formValues: ItemFormValues, alert: ItemAlert) => { if (alertsWithRow?.length === options?.length && alert?.rowId !== row.id) return result; const hasSameAlert = alertsWithRow?.some( - ({ optionId, key }) => alert?.optionId && optionId === alert?.optionId && key !== alert?.key, + ({ optionId, key }) => + alert?.optionId && optionId === alert?.optionId && key !== alert?.key, ); if (hasSameAlert) return result; - return [...result, { labelKey: getOptionName(OptionTypes.Row, index, row.rowName), value: row.id }]; + return [ + ...result, + { labelKey: getOptionName(OptionTypes.Row, index, row.rowName), value: row.id }, + ]; }, []); } @@ -113,9 +127,12 @@ export const getSliderRowsItemList = ( }, []); if ([minValue, maxValue].includes(undefined)) return []; - const maxValueNumber = Number(maxValue) > DEFAULT_SLIDER_MAX_NUMBER ? DEFAULT_SLIDER_MAX_NUMBER : Number(maxValue); + const maxValueNumber = + Number(maxValue) > DEFAULT_SLIDER_MAX_NUMBER ? DEFAULT_SLIDER_MAX_NUMBER : Number(maxValue); const minValueNumber = - Number(minValue) < DEFAULT_SLIDER_ROWS_MIN_NUMBER ? DEFAULT_SLIDER_ROWS_MIN_NUMBER : Number(minValue); + Number(minValue) < DEFAULT_SLIDER_ROWS_MIN_NUMBER + ? DEFAULT_SLIDER_ROWS_MIN_NUMBER + : Number(minValue); return createArray(maxValueNumber - minValueNumber + 1, (index) => { const value = `${minValueNumber + index}`; diff --git a/src/modules/Builder/features/ActivityItems/ItemConfiguration/ConfigurationHeader/ConfigurationHeader.tsx b/src/modules/Builder/features/ActivityItems/ItemConfiguration/ConfigurationHeader/ConfigurationHeader.tsx index 980592a003..a7554bca31 100644 --- a/src/modules/Builder/features/ActivityItems/ItemConfiguration/ConfigurationHeader/ConfigurationHeader.tsx +++ b/src/modules/Builder/features/ActivityItems/ItemConfiguration/ConfigurationHeader/ConfigurationHeader.tsx @@ -4,7 +4,11 @@ import { StyledBuilderContainerHeader } from 'shared/features'; import { ConfigurationHeaderProps } from './ConfigurationHeader.types'; -export const ConfigurationHeader = ({ isSticky, children, headerProps }: ConfigurationHeaderProps) => { +export const ConfigurationHeader = ({ + isSticky, + children, + headerProps, +}: ConfigurationHeaderProps) => { const { responseType, optionalItemsRef, onClose } = headerProps ?? {}; return ( diff --git a/src/modules/Builder/features/ActivityItems/ItemConfiguration/EditItemModal/EditItemModal.tsx b/src/modules/Builder/features/ActivityItems/ItemConfiguration/EditItemModal/EditItemModal.tsx index 5e98cc09f1..30167719aa 100644 --- a/src/modules/Builder/features/ActivityItems/ItemConfiguration/EditItemModal/EditItemModal.tsx +++ b/src/modules/Builder/features/ActivityItems/ItemConfiguration/EditItemModal/EditItemModal.tsx @@ -16,7 +16,10 @@ export const EditItemModal = ({ open, itemFieldName, onClose, onSubmit }: EditIt const { watch } = useCustomFormContext(); const itemName = watch(`${itemFieldName}.name`); const currentItem = watch(itemFieldName); - const conditionalLogicForItem = getItemConditionDependencies(currentItem, activity?.conditionalLogic); + const conditionalLogicForItem = getItemConditionDependencies( + currentItem, + activity?.conditionalLogic, + ); const handleModalSubmit = () => { onClose(); @@ -48,7 +51,10 @@ export const EditItemModal = ({ open, itemFieldName, onClose, onSubmit }: EditIt {conditionalLogicForItem?.length ? t('deleteItemWithConditionalsDescription') : null} {conditionalLogicForItem?.map((conditionalLogic: ConditionalLogic) => ( - + ))} diff --git a/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/GroupedSelectSearchController.tsx b/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/GroupedSelectSearchController.tsx index 4faf8e0028..5813a93a6b 100644 --- a/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/GroupedSelectSearchController.tsx +++ b/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/GroupedSelectSearchController.tsx @@ -41,7 +41,10 @@ export const GroupedSelectSearchController = ({ const [currentItemType, setCurrentItemType] = useState(null); const searchTermLowercase = searchTerm.toLowerCase(); - const handleTooltipOpen = (event: MouseEvent, itemType: ItemResponseTypeNoPerfTasks) => { + const handleTooltipOpen = ( + event: MouseEvent, + itemType: ItemResponseTypeNoPerfTasks, + ) => { setCurrentItemType(itemType); setAnchorEl(event.currentTarget); }; @@ -102,7 +105,9 @@ export const GroupedSelectSearchController = ({ renderValue={() => ( - {itemsTypeIcons[value]} + + {itemsTypeIcons[value]} + {t(value)} {getIsOnlyMobileValue(value) && mobileOnly} @@ -112,7 +117,10 @@ export const GroupedSelectSearchController = ({ onClose={handleSelectClose} onOpen={handleSelectOpen} IconComponent={() => ( - + )} defaultValue="" data-testid="builder-activity-items-item-configuration-response-type" @@ -148,7 +156,11 @@ export const GroupedSelectSearchController = ({ return ( handleTooltipOpen(event, groupValue) : falseReturnFunc} + onMouseEnter={ + selectOpen + ? (event) => handleTooltipOpen(event, groupValue) + : falseReturnFunc + } onMouseLeave={handleTooltipClose} isHidden={isHidden} key={groupValue} @@ -156,7 +168,9 @@ export const GroupedSelectSearchController = ({ data-testid={`builder-activity-items-item-configuration-response-type-option-${groupValue}`} > - {icon} + + {icon} + {getGroupValueText(searchTerm, groupValue)} {isMobileOnly && mobileOnly} diff --git a/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/GroupedSelectSearchController.types.ts b/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/GroupedSelectSearchController.types.ts index 260ca6fe02..e5aab2da80 100644 --- a/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/GroupedSelectSearchController.types.ts +++ b/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/GroupedSelectSearchController.types.ts @@ -7,4 +7,5 @@ export type FormInputProps = { checkIfSelectChangePopupIsVisible?: (handleOnChange: () => void) => void; }; -export type GroupedSelectControllerProps = FormInputProps & UseControllerProps; +export type GroupedSelectControllerProps = FormInputProps & + UseControllerProps; diff --git a/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/GroupedSelectSearchController.utils.tsx b/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/GroupedSelectSearchController.utils.tsx index aa8526baae..54190684ae 100644 --- a/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/GroupedSelectSearchController.utils.tsx +++ b/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/GroupedSelectSearchController.utils.tsx @@ -23,14 +23,18 @@ export const getIsNotHaveSearchValue = (value: string, searchTermLowercase: stri t(value).toLowerCase().indexOf(searchTermLowercase) === -1; export const getItemTypesNames = (): string[] => - Object.keys(ItemResponseType).map((key) => t(ItemResponseType[key as keyof typeof ItemResponseType]).toLowerCase()); + Object.keys(ItemResponseType).map((key) => + t(ItemResponseType[key as keyof typeof ItemResponseType]).toLowerCase(), + ); export const getEmptyComponent = (searchTerm: string) => { if (getItemTypesNames().some((name) => name.includes(searchTerm.toLowerCase()))) return null; const MAX_SEARCH_VALUE_LENGTH = 80; const searchValue = - searchTerm.length > MAX_SEARCH_VALUE_LENGTH ? `${searchTerm.substring(0, MAX_SEARCH_VALUE_LENGTH)}...` : searchTerm; + searchTerm.length > MAX_SEARCH_VALUE_LENGTH + ? `${searchTerm.substring(0, MAX_SEARCH_VALUE_LENGTH)}...` + : searchTerm; return ( { ); }; -export const getGroupName = (groupName: string, options: ItemsOption[], searchTermLowercase: string) => { +export const getGroupName = ( + groupName: string, + options: ItemsOption[], + searchTermLowercase: string, +) => { if (options.some(({ value }) => t(value).toLowerCase().includes(searchTermLowercase))) { return ( { - {t('dropdown')} + + {t('dropdown')} + diff --git a/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/Selection.tsx b/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/Selection.tsx index 56e1380f17..c621994b75 100644 --- a/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/Selection.tsx +++ b/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/Selection.tsx @@ -29,7 +29,9 @@ export const Selection = ({ uiType }: SelectionProps) => { ))} - {isSingleSelection ? t('singleSelectionHint') : t('multipleSelectionHint')}. + + {isSingleSelection ? t('singleSelectionHint') : t('multipleSelectionHint')}. + ); }; diff --git a/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/SelectionOption.tsx b/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/SelectionOption.tsx index d50a7e4605..5e7da11b2a 100644 --- a/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/SelectionOption.tsx +++ b/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/SelectionOption.tsx @@ -8,5 +8,9 @@ import { SelectionOptionProps } from './TooltipComponents.types'; export const SelectionOption = ({ optionNumber }: SelectionOptionProps) => { const { t } = useTranslation(); - return {`${t('option')} ${optionNumber}`}; + return ( + {`${t( + 'option', + )} ${optionNumber}`} + ); }; diff --git a/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/SelectionPerRow.tsx b/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/SelectionPerRow.tsx index 649aa2f478..e4c87c8bae 100644 --- a/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/SelectionPerRow.tsx +++ b/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/SelectionPerRow.tsx @@ -28,7 +28,8 @@ const selectionContent = [ export const SelectionPerRow = ({ uiType }: SelectionProps) => { const { t } = useTranslation(); const isSingleSelection = uiType === SelectionUiType.Single; - const getTooltipText = (text: string) => (text ? {text} : ''); + const getTooltipText = (text: string) => + text ? {text} : ''; return ( <> @@ -40,7 +41,10 @@ export const SelectionPerRow = ({ uiType }: SelectionProps) => { {typeof col === 'string' ? ( getTooltipText(col) ) : ( - + )} ))} diff --git a/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/TooltipComponents.utils.ts b/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/TooltipComponents.utils.ts index df8f402011..8813116b27 100644 --- a/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/TooltipComponents.utils.ts +++ b/src/modules/Builder/features/ActivityItems/ItemConfiguration/GroupedSelectSearchController/ItemTypeTooltip/TooltipComponents/TooltipComponents.utils.ts @@ -6,7 +6,11 @@ export const getSelectionSvgId = (index: number, isSingleSelection: boolean) => return index === 2 ? 'checkbox-empty-outline' : 'checkbox-filled'; }; -export const getSelectionPerRowSvgId = (rowIndex: number, colIndex: number, isSingleSelection: boolean) => { +export const getSelectionPerRowSvgId = ( + rowIndex: number, + colIndex: number, + isSingleSelection: boolean, +) => { if (isSingleSelection) { return (rowIndex === 1 && colIndex === 1) || (rowIndex === 2 && colIndex === 2) || @@ -15,7 +19,9 @@ export const getSelectionPerRowSvgId = (rowIndex: number, colIndex: number, isSi : 'radio-button-empty-outline'; } - return rowIndex === 1 || (rowIndex === 2 && (colIndex === 1 || colIndex === 2)) || (rowIndex === 3 && colIndex === 1) + return rowIndex === 1 || + (rowIndex === 2 && (colIndex === 1 || colIndex === 2)) || + (rowIndex === 3 && colIndex === 1) ? 'checkbox-filled' : 'checkbox-empty-outline'; }; diff --git a/src/modules/Builder/features/ActivityItems/ItemConfiguration/InputTypeItems/AudioPlayer/AudioPlayer.tsx b/src/modules/Builder/features/ActivityItems/ItemConfiguration/InputTypeItems/AudioPlayer/AudioPlayer.tsx index e671d11550..a21105a370 100644 --- a/src/modules/Builder/features/ActivityItems/ItemConfiguration/InputTypeItems/AudioPlayer/AudioPlayer.tsx +++ b/src/modules/Builder/features/ActivityItems/ItemConfiguration/InputTypeItems/AudioPlayer/AudioPlayer.tsx @@ -17,7 +17,9 @@ export const AudioPlayer = ({ name }: AudioPlayerProps) => { const urlName = `${name}.responseValues.file`; const url = watch(urlName); - const [media, setMedia] = useState(url ? { url, name: getNameByUrl(url) } : null); + const [media, setMedia] = useState( + url ? { url, name: getNameByUrl(url) } : null, + ); useEffect(() => { if (!url) return; diff --git a/src/modules/Builder/features/ActivityItems/ItemConfiguration/InputTypeItems/AudioPlayer/AudioPlayerContent/AudioPlayerContent.tsx b/src/modules/Builder/features/ActivityItems/ItemConfiguration/InputTypeItems/AudioPlayer/AudioPlayerContent/AudioPlayerContent.tsx index 9e66bec8cd..425773fdc1 100644 --- a/src/modules/Builder/features/ActivityItems/ItemConfiguration/InputTypeItems/AudioPlayer/AudioPlayerContent/AudioPlayerContent.tsx +++ b/src/modules/Builder/features/ActivityItems/ItemConfiguration/InputTypeItems/AudioPlayer/AudioPlayerContent/AudioPlayerContent.tsx @@ -59,12 +59,21 @@ export const AudioPlayerContent = ({ media, setMedia, name }: AudioPlayerContent {t('audioPlayerDescription')} {url && ( - setRemoveAudioPopupOpened(true)} data-testid={`${dataTestid}-player`} /> + setRemoveAudioPopupOpened(true)} + data-testid={`${dataTestid}-player`} + /> )} {!url && ( - setUploadPopupOpened(true)} onRecordAudio={() => setRecordPopupOpened(true)} /> + setUploadPopupOpened(true)} + onRecordAudio={() => setRecordPopupOpened(true)} + /> + )} + {error?.message && ( + {error.message} )} - {error?.message && {error.message}} - + {t('audioPlayerRecordAudioDescription')}