Merge pull request #1982 from ChildMindInstitute/release/1.45.1

Release/1.45.1 [main]

package.json

@@ -119,6 +119,10 @@
       "last 1 safari version"
     ]
   },
+  "overrides": {
+    "crypto-js": "^4.2.0",
+    "@babel/traverse": "^7.23.2"
+  },
   "devDependencies": {
     "@types/dompurify": "^3.0.3",
     "@types/downloadjs": "^1.4.4",

src/modules/Builder/features/PerformanceTasks/Flanker/RoundSettings/RoundOptions/RoundOptions.tsx

@@ -1,26 +1,27 @@
+import { Checkbox, FormControlLabel } from '@mui/material';
 import { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Checkbox, FormControlLabel } from '@mui/material';
 
+import { useCurrentActivity, useCustomFormContext } from 'modules/Builder/hooks';
+import { FlankerItemPositions, FlankerSamplingMethod } from 'modules/Builder/types';
+import { CheckboxController, InputController } from 'shared/components/FormComponents';
+import {
+  MAX_THRESHOLD_DURATION,
+  MIN_MILLISECONDS_DURATION,
+  MIN_THRESHOLD_DURATION,
+} from 'shared/consts';
 import {
   StyledBodyMedium,
   StyledFlexColumn,
   StyledFlexTopCenter,
   StyledSmallNumberInput,
+  StyledSmallPercentageInput,
   StyledTitleMedium,
   theme,
 } from 'shared/styles';
-import { useCurrentActivity, useCustomFormContext } from 'modules/Builder/hooks';
-import { CheckboxController, InputController } from 'shared/components/FormComponents';
-import {
-  MAX_THRESHOLD_DURATION,
-  MIN_MILLISECONDS_DURATION,
-  MIN_THRESHOLD_DURATION,
-} from 'shared/consts';
-import { FlankerItemPositions, FlankerSamplingMethod } from 'modules/Builder/types';
 
-import { getCheckboxes } from './RoundOptions.utils';
 import { RoundOptionsProps } from './RoundOptions.types';
+import { getCheckboxes } from './RoundOptions.utils';
 
 export const RoundOptions = ({ isPracticeRound, 'data-testid': dataTestid }: RoundOptionsProps) => {
   const { t } = useTranslation();
@@ -61,7 +62,7 @@ export const RoundOptions = ({ isPracticeRound, 'data-testid': dataTestid }: Rou
           <StyledTitleMedium sx={{ mr: theme.spacing(0.5) }}>
             {t('flankerRound.threshold')}
           </StyledTitleMedium>
-          <StyledSmallNumberInput>
+          <StyledSmallPercentageInput>
             <InputController
               control={control}
               key={`${roundField}.minimumAccuracy`}
@@ -72,7 +73,7 @@ export const RoundOptions = ({ isPracticeRound, 'data-testid': dataTestid }: Rou
               textAdornment="%"
               data-testid={`${dataTestid}-minimum-accuracy`}
             />
-          </StyledSmallNumberInput>
+          </StyledSmallPercentageInput>
         </StyledFlexTopCenter>
       )}
       <StyledFlexColumn sx={{ mb: theme.spacing(2.4) }}>

src/modules/Builder/features/PerformanceTasks/GyroscopeAndTouch/GeneralSettings/GeneralSettings.tsx

@@ -1,29 +1,28 @@
+import { Grid } from '@mui/material';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Grid } from '@mui/material';
 
 import { StyledItemOptionContainer } from 'modules/Builder/components';
-import {
-  StyledCheckboxTooltipSvg,
-  StyledFlexTopCenter,
-  StyledSmallNumberInput,
-  StyledTitleLarge,
-  StyledTitleMedium,
-  theme,
-} from 'shared/styles';
 import { useCurrentActivity, useCustomFormContext } from 'modules/Builder/hooks';
 import { InputController } from 'shared/components/FormComponents';
 import { Tooltip } from 'shared/components/Tooltip';
 import {
   MAX_LENGTH_OF_TEST,
   MAX_NUMBER_OF_TRIALS,
+  MAX_SLOPE,
   MIN_LENGTH_OF_TEST,
   MIN_NUMBER_OF_TRIALS,
   MIN_SLOPE,
-  MAX_SLOPE,
 } from 'shared/consts';
-
-import { StyledLambdaScopeInput } from './GeneralSettings.styles';
+import {
+  StyledCheckboxTooltipSvg,
+  StyledFlexTopCenter,
+  StyledSmallNumberInput,
+  StyledSmallPercentageInput,
+  StyledTitleLarge,
+  StyledTitleMedium,
+  theme,
+} from 'shared/styles';
 
 export const GeneralSettings = () => {
   const { t } = useTranslation();
@@ -104,7 +103,7 @@ export const GeneralSettings = () => {
               </span>
             </Tooltip>
           </StyledTitleMedium>
-          <StyledLambdaScopeInput>
+          <StyledSmallPercentageInput>
             <InputController
               type="number"
               control={control}
@@ -115,7 +114,7 @@ export const GeneralSettings = () => {
               textAdornment="%"
               data-testid={`${dataTestid}-lambda-scope`}
             />
-          </StyledLambdaScopeInput>
+          </StyledSmallPercentageInput>
         </Grid>
       </Grid>
     </StyledItemOptionContainer>

src/modules/Dashboard/components/ParticipantDropdown/ParticipantDropdown.hooks.ts

@@ -4,7 +4,7 @@ import { DEFAULT_ROWS_PER_PAGE, Roles } from 'shared/consts';
 import { ParticipantsData } from 'modules/Dashboard/features/Participants';
 import { getWorkspaceManagersApi, getWorkspaceRespondentsApi } from 'api';
 import { useAsync } from 'shared/hooks';
-import { Manager, Respondent } from 'modules/Dashboard/types';
+import { Manager, Respondent, RespondentStatus } from 'modules/Dashboard/types';
 import { auth, workspaces } from 'redux/modules';
 
 import {
@@ -23,6 +23,7 @@ const ALLOWED_TEAM_MEMBER_ROLES: readonly Roles[] = [
 
 export const useParticipantDropdown = ({
   appletId,
+  includePendingAccounts = false,
   skip = false,
   successCallback,
   errorCallback,
@@ -36,12 +37,18 @@ export const useParticipantDropdown = ({
   const { ownerId } = workspaces.useData() || {};
   const userData = auth.useData();
 
+  const isParticipantValid = useCallback(
+    (r: Respondent) =>
+      !r.isAnonymousRespondent && (includePendingAccounts || r.status !== RespondentStatus.Pending),
+    [includePendingAccounts],
+  );
+
   const { execute: fetchParticipants, isLoading: isFetchingParticipants } = useAsync(
     getWorkspaceRespondentsApi,
     (response) => {
       if (response?.data) {
         const options = (response.data as ParticipantsData).result
-          .filter((r) => !r.isAnonymousRespondent)
+          .filter(isParticipantValid)
           .map(participantToOption);
 
         setAllParticipants(options);
@@ -128,7 +135,7 @@ export const useParticipantDropdown = ({
 
   /**
    * Handle participant search. It can be a combination of team members and any participants
-   * (full account, pending, and limited), or just team members and full account participants
+   * (full and limited accounts), or just team members and full account participants
    */
   const handleSearch = useCallback(
     async (
@@ -194,20 +201,23 @@ export const useParticipantDropdown = ({
         (teamMemberResponse?.data.result as Manager[]) ?? []
       ).filter((manager) => manager.roles.some((role) => ALLOWED_TEAM_MEMBER_ROLES.includes(role)));
 
-      const participantsSearchResults = (participantsResponse?.data.result as Respondent[]) ?? [];
+      const participantsSearchResults = (
+        (participantsResponse?.data.result as Respondent[]) ?? []
+      ).filter((participant) => {
+        if (!isParticipantValid(participant)) return false;
 
-      // If there are team members in the search results, we only want to show them if they are allowed
-      return participantsSearchResults.map(participantToOption).filter((participant) => {
-        if (!participant.isTeamMember) {
-          return isAnyParticipant || !!participant.userId;
+        // If there are team members in the search results, we only want to show them if they are
+        // allowed
+        if (!participant.id || participant.details[0].subjectTag !== 'Team') {
+          return isAnyParticipant || !!participant.id;
         } else {
-          return allowedTeamMembersSearchResults.some(
-            (manager) => manager.id === participant.userId,
-          );
+          return allowedTeamMembersSearchResults.some((manager) => manager.id === participant.id);
         }
       });
+
+      return participantsSearchResults.map(participantToOption);
     },
-    [ownerId, appletId],
+    [ownerId, appletId, isParticipantValid],
   );
 
   useEffect(() => {

src/modules/Dashboard/components/ParticipantDropdown/ParticipantDropdown.types.ts

@@ -41,6 +41,7 @@ export type FullTeamSearchType = 'team' | 'full-participant';
 
 export type UseParticipantDropdownProps = {
   appletId?: string;
+  includePendingAccounts?: boolean;
   skip?: boolean;
   successCallback?: (data: AxiosResponse) => void;
   errorCallback?: (data?: AxiosError<ApiErrorResponse> | null) => void;

src/modules/Dashboard/components/TakeNowModal/TakeNowModal.tsx

@@ -92,6 +92,7 @@ export const useTakeNowModal = ({ dataTestId }: UseTakeNowModalProps) => {
     useState<ParticipantDropdownOption | null>(null);
   const [defaultSourceSubject, setDefaultSourceSubject] =
     useState<ParticipantDropdownOption | null>(null);
+  const [defaultIsSelfReporting, setDefaultIsSelfReporting] = useState<boolean>(true);
   const [multiInformantAssessmentId, setMultiInformantAssessmentId] = useState<string | null>(null);
   const workspaceRoles = workspaces.useRolesData();
   const roles = appletId ? workspaceRoles?.data?.[appletId] : undefined;
@@ -154,7 +155,7 @@ export const useTakeNowModal = ({ dataTestId }: UseTakeNowModalProps) => {
     const [sourceSubject, setSourceSubject] = useState<ParticipantDropdownOption | null>(
       defaultSourceSubject,
     );
-    const [isSelfReporting, setIsSelfReporting] = useState<boolean>(true);
+    const [isSelfReporting, setIsSelfReporting] = useState<boolean>(defaultIsSelfReporting);
     const [loggedInUser, setLoggedInUser] = useState<ParticipantDropdownOption | null>(
       defaultSourceSubject?.userId ? defaultSourceSubject : null,
     );
@@ -512,7 +513,9 @@ export const useTakeNowModal = ({ dataTestId }: UseTakeNowModalProps) => {
 
     if (sourceSubject) {
       setDefaultSourceSubject(sourceSubject);
-      event[MixpanelProps.SourceAccountType] = getAccountType(sourceSubject);
+      const accountType = getAccountType(sourceSubject);
+      setDefaultIsSelfReporting(accountType !== 'Limited');
+      event[MixpanelProps.SourceAccountType] = accountType;
     } else {
       setDefaultSourceSubject(enableParticipantMultiInformant ? null : loggedInTeamMember);
     }

src/modules/Dashboard/features/Applet/Overview/Overview.utils.tsx

@@ -100,6 +100,7 @@ export function mapResponseToSubmissionsTableProps(
               };
 
               return {
+                rowState: { value: 'has-hover' },
                 activity: {
                   onClick: handleClick,
                   content: () => <StyledMaybeEmpty>{activityName}</StyledMaybeEmpty>,

src/modules/Dashboard/features/Applets/AppletsTable/AppletItem/AppletItem.test.tsx

@@ -203,8 +203,8 @@ describe('AppletItem component tests', () => {
     const tableRow = await findByTestId('dashboard-applets-table-applet-row');
 
     expect(tableRow).toBeInTheDocument();
-    expect(tableRow).toHaveClass('has-hover');
-    expect(tableRow).not.toHaveClass('dragged-over');
+    expect(tableRow).toHaveClass('MuiTableRow-has-hover');
+    expect(tableRow).not.toHaveClass('MuiTableRow-dragged-over');
 
     jest.spyOn(appletsTableHooks, 'useAppletsDnd').mockReturnValue({
       isDragOver: true,
@@ -213,6 +213,6 @@ describe('AppletItem component tests', () => {
 
     rerender(getAppletItemComponent());
 
-    expect(tableRow).toHaveClass('has-hover dragged-over');
+    expect(tableRow).toHaveClass('MuiTableRow-has-hover MuiTableRow-dragged-over');
   });
 });

src/modules/Dashboard/features/Applets/AppletsTable/AppletsTable.styles.ts

@@ -2,7 +2,6 @@ import { Box, styled, TableCell, TableContainer } from '@mui/material';
 
 import { variables, StyledFlexTopCenter } from 'shared/styles';
 import { shouldForwardProp } from 'shared/utils/shouldForwardProp';
-import { tableRowHoverColor } from 'shared/utils/colors';
 
 export const StyledTableContainer = styled(TableContainer)`
   display: flex;
@@ -22,33 +21,6 @@ export const StyledTableContainer = styled(TableContainer)`
   .MuiTableCell-head {
     background: ${variables.palette.surface};
   }
-
-  && .MuiTableRow-root.has-hover {
-    cursor: pointer;
-
-    &:hover {
-      background-color: ${tableRowHoverColor};
-    }
-  }
-
-  && .MuiTableRow-root.dragged-over {
-    .MuiTableCell-body {
-      border-top: ${variables.borderWidth.lg} solid ${variables.palette.primary};
-      border-bottom: ${variables.borderWidth.lg} solid ${variables.palette.primary};
-    }
-
-    .MuiTableCell-body:first-of-type {
-      border-left: ${variables.borderWidth.lg} solid ${variables.palette.primary};
-      border-top-left-radius: ${variables.borderRadius.xs} ${variables.borderRadius.xs};
-      border-bottom-left-radius: ${variables.borderRadius.xs} ${variables.borderRadius.xs};
-    }
-
-    .MuiTableCell-body:last-of-type {
-      border-right: ${variables.borderWidth.lg} solid ${variables.palette.primary};
-      border-top-right-radius: ${variables.borderRadius.xs} ${variables.borderRadius.xs};
-      border-bottom-right-radius: ${variables.borderRadius.xs} ${variables.borderRadius.xs};
-    }
-  }
 `;
 
 export const StyledTableCellContent = styled(Box)`

src/modules/Dashboard/features/Applets/AppletsTable/AppletsTable.utils.test.ts

@@ -2,9 +2,9 @@ import { getTableRowClassNames } from './AppletsTable.utils';
 
 describe('getTableRowClassNames', () => {
   test.each([
-    [{ hasHover: true, isDragOver: true }, 'dragged-over has-hover'],
-    [{ hasHover: true, isDragOver: false }, 'has-hover'],
-    [{ hasHover: false, isDragOver: true }, 'dragged-over'],
+    [{ hasHover: true, isDragOver: true }, 'MuiTableRow-dragged-over MuiTableRow-has-hover'],
+    [{ hasHover: true, isDragOver: false }, 'MuiTableRow-has-hover'],
+    [{ hasHover: false, isDragOver: true }, 'MuiTableRow-dragged-over'],
     [{ hasHover: false, isDragOver: false }, ''],
   ])('should return correct class names', (input, expected) => {
     expect(getTableRowClassNames(input)).toBe(expected);

src/modules/Dashboard/features/Applets/AppletsTable/AppletsTable.utils.ts

@@ -1,7 +1,10 @@
 import { GetTableRowClassNames } from './AppletsTable.types';
 
 export const getTableRowClassNames = ({ hasHover, isDragOver }: GetTableRowClassNames) => {
-  const classNames = [isDragOver && 'dragged-over', hasHover && 'has-hover'].filter(Boolean);
+  const classNames = [
+    isDragOver && 'MuiTableRow-dragged-over',
+    hasHover && 'MuiTableRow-has-hover',
+  ].filter(Boolean);
 
   return classNames.join(' ');
 };

src/modules/Dashboard/features/Applets/AppletsTable/FolderItem/FolderItem.test.tsx

@@ -233,8 +233,8 @@ describe('FolderItem component tests', () => {
     const tableRow = await findByTestId('dashboard-applets-table-folder-row');
 
     expect(tableRow).toBeInTheDocument();
-    expect(tableRow).toHaveClass('has-hover');
-    expect(tableRow).not.toHaveClass('dragged-over');
+    expect(tableRow).toHaveClass('MuiTableRow-has-hover');
+    expect(tableRow).not.toHaveClass('MuiTableRow-dragged-over');
 
     jest.spyOn(appletsTableHooks, 'useAppletsDnd').mockReturnValue({
       isDragOver: true,
@@ -243,7 +243,7 @@ describe('FolderItem component tests', () => {
 
     rerender(getFolderItemComponent(false));
 
-    expect(tableRow).toHaveClass('has-hover dragged-over');
+    expect(tableRow).toHaveClass('MuiTableRow-has-hover MuiTableRow-dragged-over');
   });
 
   test('should not have classname for hover if folder is empty', async () => {
@@ -256,6 +256,6 @@ describe('FolderItem component tests', () => {
     const tableRow = await findByTestId('dashboard-applets-table-folder-row');
 
     expect(tableRow).toBeInTheDocument();
-    expect(tableRow).not.toHaveClass('has-hover');
+    expect(tableRow).not.toHaveClass('MuiTableRow-has-hover');
   });
 });