Merge pull request #1070 from topcoder-platform/diazz-admin-f2f-30376773

Topcoder Admin App - Misc Update 0505

Author: jmgasper

src/apps/admin/src/challenge-management/ChallengeManagementPage/ChallengeManagementPage.tsx

@@ -10,6 +10,7 @@ import {
     useState,
 } from 'react'
 import { useSearchParams } from 'react-router-dom'
+import _ from 'lodash'
 
 import { LoadingSpinner, PageDivider, PageTitle } from '~/libs/ui'
 import { PaginatedResponse } from '~/libs/core'
@@ -36,6 +37,17 @@ import { useEventCallback } from '../../lib/hooks'
 
 import styles from './ChallengeManagementPage.module.scss'
 
+const defaultFilter: ChallengeFilterCriteria = {
+    challengeId: '',
+    legacyId: 0,
+    name: '',
+    page: 1,
+    perPage: 25,
+    status: ChallengeStatus.Active,
+    track: null!, // eslint-disable-line @typescript-eslint/no-non-null-assertion, unicorn/no-null
+    type: null!, // eslint-disable-line @typescript-eslint/no-non-null-assertion, unicorn/no-null
+}
+
 /**
  * Challenge Management page.
  */
@@ -45,15 +57,9 @@ export const ChallengeManagementPage: FC = () => {
         ChallengeFilterCriteria,
         Dispatch<SetStateAction<ChallengeFilterCriteria>>,
     ] = useState<ChallengeFilterCriteria>({
-        challengeId: '',
-        legacyId: 0,
-        name: '',
-        page: 1,
-        perPage: 25,
-        status: ChallengeStatus.Active,
-        track: null!, // eslint-disable-line @typescript-eslint/no-non-null-assertion, unicorn/no-null
-        type: null!, // eslint-disable-line @typescript-eslint/no-non-null-assertion, unicorn/no-null
+        ...defaultFilter,
     })
+    const disableReset = useMemo(() => _.isEqual(filterCriteria, defaultFilter), [filterCriteria])
     const [challenges, setChallenges]: [
         Array<Challenge>,
         Dispatch<SetStateAction<Array<Challenge>>>,
@@ -119,19 +125,6 @@ export const ChallengeManagementPage: FC = () => {
         }
     }, [pageChangeEvent]) // eslint-disable-line react-hooks/exhaustive-deps -- missing dependency: search
 
-    // Reset
-    const [resetEvent, setResetEvent] = useState(false)
-    useEffect(() => {
-        if (resetEvent) {
-            search()
-            setResetEvent(false)
-        }
-    }, [resetEvent]) // eslint-disable-line react-hooks/exhaustive-deps -- missing dependency: search
-
-    const handleReset = useEventCallback(() => {
-        previousPageChangeEvent.current = false
-        setResetEvent(true)
-    })
     const handlePageChange = useEventCallback((page: number) => {
         setFilterCriteria({ ...filterCriteria, page })
         setPageChangeEvent(true)
@@ -149,12 +142,15 @@ export const ChallengeManagementPage: FC = () => {
                     onFilterCriteriaChange={setFilterCriteria}
                     onSearch={search}
                     disabled={searching || !filtersInited}
-                    showResetButton={
-                        previousPageChangeEvent.current
-                        && searched
-                        && challenges.length === 0
-                    }
-                    onReset={handleReset}
+                    onReset={function onReset() {
+                        setFilterCriteria({
+                            ...defaultFilter,
+                        })
+                        setTimeout(() => {
+                            search()
+                        })
+                    }}
+                    disableReset={disableReset}
                 />
                 <PageDivider />
                 {searching && (

src/apps/admin/src/lib/components/BillingAccountResourcesTable/BillingAccountResourcesTable.tsx

@@ -44,11 +44,6 @@ export const BillingAccountResourcesTable: FC<Props> = (props: Props) => {
                 propertyName: 'name',
                 type: 'text',
             },
-            {
-                label: 'Status',
-                propertyName: 'status',
-                type: 'text',
-            },
             {
                 className: styles.blockColumnAction,
                 label: '',
@@ -81,21 +76,8 @@ export const BillingAccountResourcesTable: FC<Props> = (props: Props) => {
                 },
             ],
             [
-                {
-                    label: 'Status label',
-                    mobileType: 'label',
-                    propertyName: 'status',
-                    renderer: () => <div>Status:</div>,
-                    type: 'element',
-                },
                 {
                     ...columns[1],
-                    mobileType: 'last-value',
-                },
-            ],
-            [
-                {
-                    ...columns[2],
                     colSpan: 2,
                     mobileType: 'last-value',
                 },

src/apps/admin/src/lib/components/BillingAccountsFilter/BillingAccountsFilter.module.scss

@@ -44,7 +44,7 @@
     display: flex;
     justify-content: flex-end;
     align-items: flex-start;
-    gap: 30px;
+    gap: 15px;
     flex-wrap: wrap;
 
     @include ltemd {

src/apps/admin/src/lib/components/BillingAccountsFilter/BillingAccountsFilter.tsx

@@ -27,22 +27,30 @@ interface Props {
     onSubmitForm?: (data: FormBillingAccountsFilter) => void
 }
 
+const defaultValues: FormBillingAccountsFilter = {
+    endDate: undefined,
+    name: '',
+    startDate: undefined,
+    status: '1',
+    user: '',
+}
+
 export const BillingAccountsFilter: FC<Props> = (props: Props) => {
     const maxDate = useMemo(() => moment()
         .add(20, 'y')
         .toDate(), [])
     const {
         register,
+        reset,
         handleSubmit,
         control,
-        formState: { isValid },
+        formState: { isValid, isDirty },
     }: UseFormReturn<FormBillingAccountsFilter> = useForm({
-        defaultValues: {
-            status: '1',
-        },
+        defaultValues,
         mode: 'all',
         resolver: yupResolver(formBillingAccountsFilterSchema),
     })
+
     const onSubmit = useCallback(
         (data: FormBillingAccountsFilter) => {
             props.onSubmitForm?.(data)
@@ -162,6 +170,19 @@ export const BillingAccountsFilter: FC<Props> = (props: Props) => {
                 >
                     Filter
                 </Button>
+                <Button
+                    secondary
+                    onClick={function onClick() {
+                        reset(defaultValues)
+                        setTimeout(() => {
+                            onSubmit(defaultValues)
+                        })
+                    }}
+                    size='lg'
+                    disabled={!isDirty}
+                >
+                    Reset
+                </Button>
             </div>
         </form>
     )

src/apps/admin/src/lib/components/ChallengeFilters/ChallengeFilters.module.scss

@@ -16,10 +16,6 @@
         gap: 15px 30px;
     }
 
-    .searchButton {
-        margin-left: auto;
-    }
-
     @media (max-width: #{$lg-max}) {
         .filters {
             grid-template-columns: 1fr 1fr;
@@ -32,3 +28,10 @@
         }
     }
 }
+
+.blockBtns {
+    margin-left: auto;
+    display: flex;
+    gap: 15px;
+    justify-content: flex-end;
+}

src/apps/admin/src/lib/components/ChallengeFilters/ChallengeFilters.tsx

@@ -19,10 +19,10 @@ import styles from './ChallengeFilters.module.scss'
 interface ChallengeFiltersProps {
     filterCriteria: ChallengeFilterCriteria
     disabled: boolean
-    showResetButton: boolean
     onFilterCriteriaChange: (newFilterCriteria: ChallengeFilterCriteria) => void
     onSearch: () => void
     onReset: () => void
+    disableReset: boolean
 }
 
 const ChallengeFilters: FC<ChallengeFiltersProps> = props => {
@@ -188,28 +188,24 @@ const ChallengeFilters: FC<ChallengeFiltersProps> = props => {
                     disabled={props.disabled}
                 />
             </div>
-            {!props.showResetButton && (
+            <div className={styles.blockBtns}>
                 <Button
                     primary
-                    className={styles.searchButton}
                     onClick={props.onSearch}
                     disabled={props.disabled}
                     size='lg'
                 >
                     Search
                 </Button>
-            )}
-            {props.showResetButton && (
                 <Button
                     secondary
-                    className={styles.searchButton}
                     onClick={handleReset}
-                    disabled={props.disabled}
+                    disabled={props.disabled || props.disableReset}
                     size='lg'
                 >
                     Reset
                 </Button>
-            )}
+            </div>
         </div>
     )
 }

src/apps/admin/src/lib/components/ChallengeList/ChallengeList.tsx

@@ -267,7 +267,13 @@ const ChallengeList: FC<ChallengeListProps> = props => {
                 propertyName: 'name',
                 renderer: (challenge: Challenge) => (
                     // eslint-disable-next-line jsx-a11y/anchor-is-valid
-                    <a href='#' className={styles.challengeTitle}>
+                    <a
+                        href={`${EnvironmentConfig.ADMIN.CHALLENGE_URL}/${challenge.id}`}
+                        className={styles.challengeTitle}
+                        onClick={function onClick() {
+                            window.location.href = `${EnvironmentConfig.ADMIN.CHALLENGE_URL}/${challenge.id}`
+                        }}
+                    >
                         {challenge.name}
                     </a>
                 ),

src/apps/admin/src/lib/components/ClientsFilter/ClientsFilter.module.scss

@@ -24,7 +24,7 @@
     display: flex;
     justify-content: flex-end;
     align-items: flex-start;
-    gap: 30px;
+    gap: 15px;
     flex-wrap: wrap;
 
     @include ltemd {

src/apps/admin/src/lib/components/ClientsFilter/ClientsFilter.tsx

@@ -27,19 +27,25 @@ interface Props {
     onSubmitForm?: (data: FormClientsFilter) => void
 }
 
+const defaultValues: FormClientsFilter = {
+    endDate: undefined,
+    name: '',
+    startDate: undefined,
+    status: '1',
+}
+
 export const ClientsFilter: FC<Props> = (props: Props) => {
     const maxDate = useMemo(() => moment()
         .add(20, 'y')
         .toDate(), [])
     const {
         register,
+        reset,
         handleSubmit,
         control,
-        formState: { isValid },
+        formState: { isValid, isDirty },
     }: UseFormReturn<FormClientsFilter> = useForm({
-        defaultValues: {
-            status: '1',
-        },
+        defaultValues,
         mode: 'all',
         resolver: yupResolver(formClientsFilterSchema),
     })
@@ -149,6 +155,19 @@ export const ClientsFilter: FC<Props> = (props: Props) => {
                 >
                     Filter
                 </Button>
+                <Button
+                    secondary
+                    onClick={function onClick() {
+                        reset(defaultValues)
+                        setTimeout(() => {
+                            onSubmit(defaultValues)
+                        })
+                    }}
+                    size='lg'
+                    disabled={!isDirty}
+                >
+                    Reset
+                </Button>
             </div>
         </form>
     )

src/apps/admin/src/lib/components/ReviewSummaryList/ReviewSummaryList.module.scss

@@ -9,15 +9,18 @@
     }
 }
 
-.challengeTitle {
+.challengeTitleText,
+.challengeTitleLink {
     min-width: 200px;
     padding: 0;
     justify-content: flex-start;
     border-radius: 0;
     color: $body-color;
     line-height: 16px;
     white-space: break-spaces;
+}
 
+.challengeTitleLink {
     &:hover {
         color: $blue-110;
     }