Fix for handles not showing with submissions in review app for large challenges and better group searching in system admin app

Author: jmgasper

src/apps/admin/src/permission-management/PermissionGroupsPage/PermissionGroupsPage.module.scss

@@ -19,10 +19,29 @@
     text-align: center;
 }
 
-.btnNewGroup {
-    margin: $sp-8 $sp-8 $sp-4 $sp-8;
+.actions {
+    display: flex;
+    align-items: flex-end;
+    gap: $sp-4;
+    margin: $sp-8 $sp-8 $sp-4;
 
     @include ltelg {
+        flex-direction: column;
+        align-items: stretch;
         margin: $sp-4;
+        gap: $sp-3;
+    }
+}
+
+.searchField {
+    flex: 1;
+}
+
+.btnNewGroup {
+    margin: 0;
+    min-width: max-content;
+
+    @include ltelg {
+        width: 100%;
     }
 }

src/apps/admin/src/permission-management/PermissionGroupsPage/PermissionGroupsPage.tsx

@@ -1,10 +1,10 @@
 /**
  * Permission groups page.
  */
-import { FC, useContext, useState } from 'react'
+import { ChangeEvent, FC, useContext, useMemo, useState } from 'react'
 import classNames from 'classnames'
 
-import { Button, LoadingSpinner, PageTitle } from '~/libs/ui'
+import { Button, InputText, LoadingSpinner, PageTitle } from '~/libs/ui'
 import { PlusIcon } from '@heroicons/react/solid'
 
 import { DialogAddGroup } from '../../lib/components/DialogAddGroup'
@@ -24,6 +24,7 @@ const pageTitle = 'Groups'
 
 export const PermissionGroupsPage: FC<Props> = (props: Props) => {
     const [openDialogAddGroup, setOpenDialogAddGroup] = useState(false)
+    const [searchTerm, setSearchTerm] = useState('')
     const { loadUser, cancelLoadUser, usersMapping }: AdminAppContextType
         = useContext(AdminAppContext)
     const {
@@ -37,6 +38,26 @@ export const PermissionGroupsPage: FC<Props> = (props: Props) => {
         usersMapping,
     )
 
+    const filteredGroups = useMemo(() => {
+        const normalized = searchTerm
+            .trim()
+            .toLowerCase()
+        if (!normalized) {
+            return groups
+        }
+
+        return groups.filter(group => {
+            const id = group.id ? group.id.toLowerCase() : ''
+            const name = group.name ? group.name.toLowerCase() : ''
+
+            return id.includes(normalized) || name.includes(normalized)
+        })
+    }, [groups, searchTerm])
+    const hasSearchTerm = useMemo(
+        () => searchTerm.trim().length > 0,
+        [searchTerm],
+    )
+
     return (
         <div className={classNames(styles.container, props.className)}>
             <PageTitle>{pageTitle}</PageTitle>
@@ -51,24 +72,40 @@ export const PermissionGroupsPage: FC<Props> = (props: Props) => {
                     </div>
                 ) : (
                     <>
-                        <Button
-                            primary
-                            size='lg'
-                            icon={PlusIcon}
-                            iconToLeft
-                            label='new group'
-                            onClick={function onClick() {
-                                setOpenDialogAddGroup(true)
-                            }}
-                            className={styles.btnNewGroup}
-                        />
-                        {groups.length === 0 ? (
+                        <div className={styles.actions}>
+                            <InputText
+                                name='groupSearch'
+                                type='text'
+                                label='Search groups'
+                                placeholder='Search by name or ID'
+                                value={searchTerm}
+                                onChange={function onChange(event: ChangeEvent<HTMLInputElement>) {
+                                    setSearchTerm(event.target.value)
+                                }}
+                                forceUpdateValue
+                                classNameWrapper={styles.searchField}
+                            />
+                            <Button
+                                primary
+                                size='lg'
+                                icon={PlusIcon}
+                                iconToLeft
+                                label='new group'
+                                onClick={function onClick() {
+                                    setOpenDialogAddGroup(true)
+                                }}
+                                className={styles.btnNewGroup}
+                            />
+                        </div>
+                        {filteredGroups.length === 0 ? (
                             <p className={styles.noRecordFound}>
-                                {MSG_NO_RECORD_FOUND}
+                                {hasSearchTerm
+                                    ? 'No groups match your search.'
+                                    : MSG_NO_RECORD_FOUND}
                             </p>
                         ) : (
                             <GroupsTable
-                                datas={groups}
+                                datas={filteredGroups}
                                 usersMapping={usersMapping}
                             />
                         )}

src/apps/review/src/lib/components/ChallengePhaseInfo/ChallengePhaseInfo.tsx

@@ -48,6 +48,14 @@ type ChallengePhaseItem = ChallengePhaseDisplayItem | ChallengePhaseProgressItem
 
 type ChallengeVariant = 'active' | 'past'
 
+interface PhaseDisplayInfo {
+    phaseEndDateString?: string
+    phaseLabel: string
+    timeLeft?: string
+    timeLeftColor?: string
+    timeLeftStatus?: string
+}
+
 export const ChallengePhaseInfo: FC<Props> = (props: Props) => {
     const { myChallengeRoles }: useRoleProps = useRole()
     const {
@@ -157,17 +165,16 @@ export const ChallengePhaseInfo: FC<Props> = (props: Props) => {
         isLoadingPayment,
         isTopgearTask,
     ])
-    const phaseDisplayInfo = useMemo(
-        () => computePhaseDisplayInfo(props.challengeInfo),
-        [props.challengeInfo],
-    )
     const {
         phaseEndDateString: displayPhaseEndDateString,
         phaseLabel: displayPhaseLabel,
         timeLeft: displayTimeLeft,
         timeLeftColor: displayTimeLeftColor,
         timeLeftStatus: displayTimeLeftStatus,
-    } = phaseDisplayInfo
+    }: PhaseDisplayInfo = useMemo(
+        () => computePhaseDisplayInfo(props.challengeInfo),
+        [props.challengeInfo],
+    )
 
     useEffect(() => {
         const run = async (): Promise<void> => {
@@ -489,14 +496,6 @@ function createActiveItems(config: {
     return items
 }
 
-interface PhaseDisplayInfo {
-    phaseEndDateString?: string
-    phaseLabel: string
-    timeLeft?: string
-    timeLeftColor?: string
-    timeLeftStatus?: string
-}
-
 function computePhaseDisplayInfo(data?: ChallengeInfo): PhaseDisplayInfo {
     const fallbackPhaseLabel = (data?.currentPhase || '').trim() || 'N/A'
     const fallback: PhaseDisplayInfo = {

src/apps/review/src/lib/services/resources.service.ts

@@ -17,6 +17,7 @@ import {
 } from '../models'
 
 const resourceBaseUrl = `${EnvironmentConfig.API.V6}`
+const DEFAULT_PER_PAGE = 1000
 
 /**
  * Fetch all resource roles
@@ -38,13 +39,49 @@ export const fetchResources = async (query: {
     challengeId?: string
     memberId?: string
 }): Promise<PaginatedResponse<BackendResource[]>> => {
-    const results = await xhrGetPaginatedAsync<BackendResource[]>(
-        `${resourceBaseUrl}/resources?${qs.stringify(query)}`,
+    const baseQuery = {
+        ...query,
+        page: 1,
+        perPage: DEFAULT_PER_PAGE,
+    }
+    const firstPage = await xhrGetPaginatedAsync<BackendResource[]>(
+        `${resourceBaseUrl}/resources?${qs.stringify(baseQuery)}`,
     )
+    const totalPages = firstPage.totalPages ?? 0
+
+    if (totalPages <= 1) {
+        return {
+            ...firstPage,
+            data: firstPage.data
+                .map(adjustBackendResource)
+                .filter((resource): resource is BackendResource => Boolean(resource)),
+        }
+    }
+
+    const remainingPagePromises: Array<Promise<PaginatedResponse<BackendResource[]>>> = []
+    for (let page = 2; page <= totalPages; page += 1) {
+        remainingPagePromises.push(
+            xhrGetPaginatedAsync<BackendResource[]>(
+                `${resourceBaseUrl}/resources?${qs.stringify({
+                    ...query,
+                    page,
+                    perPage: DEFAULT_PER_PAGE,
+                })}`,
+            ),
+        )
+    }
+
+    const remainingPages = await Promise.all(remainingPagePromises)
+    const combinedData = [
+        ...firstPage.data,
+        ...remainingPages.flatMap(pageResult => pageResult.data),
+    ]
 
     return {
-        ...results,
-        data: results.data.map(adjustBackendResource) as BackendResource[],
+        ...firstPage,
+        data: combinedData
+            .map(adjustBackendResource)
+            .filter((resource): resource is BackendResource => Boolean(resource)),
     }
 }