Topcoder Admin App - Misc Update 0518

src/apps/admin/src/billing-account/BillingAccountsPage/BillingAccountsPage.tsx

@@ -1,11 +1,11 @@
 /**
  * Billing accounts page.
  */
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import classNames from 'classnames'
 
 import { PlusIcon } from '@heroicons/react/solid'
-import { LinkButton, LoadingSpinner, PageDivider, PageTitle } from '~/libs/ui'
+import { colWidthType, LinkButton, LoadingSpinner, PageDivider, PageTitle } from '~/libs/ui'
 
 import { BillingAccountsFilter } from '../../lib/components/BillingAccountsFilter'
 import { BillingAccountsTable } from '../../lib/components/BillingAccountsTable'
@@ -22,6 +22,7 @@ interface Props {
 const pageTitle = 'Billing Accounts'
 
 export const BillingAccountsPage: FC<Props> = (props: Props) => {
+    const [colWidth, setColWidth] = useState<colWidthType>({})
     const {
         isLoading,
         datas,
@@ -76,6 +77,8 @@ export const BillingAccountsPage: FC<Props> = (props: Props) => {
                                 setPage={setPage}
                                 setSort={setSort}
                                 sort={sort}
+                                colWidth={colWidth}
+                                setColWidth={setColWidth}
                             />
                         )}
                     </>

src/apps/admin/src/billing-account/ClientsPage/ClientsPage.tsx

@@ -1,10 +1,10 @@
 /**
  * Billing account clients page.
  */
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import classNames from 'classnames'
 
-import { LinkButton, LoadingSpinner, PageDivider, PageTitle } from '~/libs/ui'
+import { colWidthType, LinkButton, LoadingSpinner, PageDivider, PageTitle } from '~/libs/ui'
 import { PlusIcon } from '@heroicons/react/solid'
 
 import { MSG_NO_RECORD_FOUND } from '../../config/index.config'
@@ -22,6 +22,7 @@ interface Props {
 const pageTitle = 'Clients'
 
 export const ClientsPage: FC<Props> = (props: Props) => {
+    const [colWidth, setColWidth] = useState<colWidthType>({})
     const {
         isLoading,
         datas,
@@ -77,6 +78,8 @@ export const ClientsPage: FC<Props> = (props: Props) => {
                                 setPage={setPage}
                                 setSort={setSort}
                                 sort={sort}
+                                colWidth={colWidth}
+                                setColWidth={setColWidth}
                             />
                         )}
                     </>

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

@@ -21,3 +21,9 @@
 .btnDelete {
     padding-right: 0;
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}

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

@@ -1,11 +1,11 @@
 /**
  * Billing account resources table.
  */
-import { FC, useMemo } from 'react'
+import { FC, useMemo, useState } from 'react'
 import classNames from 'classnames'
 
 import { useWindowSize, WindowSize } from '~/libs/shared'
-import { Button, Table, TableColumn } from '~/libs/ui'
+import { Button, colWidthType, Table, TableColumn } from '~/libs/ui'
 
 import { useTableFilterLocal, useTableFilterLocalProps } from '../../hooks'
 import { Pagination } from '../common/Pagination'
@@ -26,6 +26,7 @@ interface Props {
 }
 
 export const BillingAccountResourcesTable: FC<Props> = (props: Props) => {
+    const [colWidth, setColWidth] = useState<colWidthType>({})
     const {
         page,
         setPage,
@@ -40,12 +41,14 @@ export const BillingAccountResourcesTable: FC<Props> = (props: Props) => {
     const columns = useMemo<TableColumn<BillingAccountResource>[]>(
         () => [
             {
+                columnId: 'name',
                 label: 'Name',
                 propertyName: 'name',
                 type: 'text',
             },
             {
                 className: styles.blockColumnAction,
+                columnId: 'action',
                 label: '',
                 renderer: (data: BillingAccountResource) => (
                     <Button
@@ -100,6 +103,9 @@ export const BillingAccountResourcesTable: FC<Props> = (props: Props) => {
                     onToggleSort={setSort}
                     forceSort={sort}
                     removeDefaultSort
+                    className={styles.desktopTable}
+                    colWidth={colWidth}
+                    setColWidth={setColWidth}
                 />
             )}
 

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

@@ -38,3 +38,9 @@
     white-space: break-spaces !important;
     text-align: left !important;
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}

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

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom'
 import classNames from 'classnames'
 
 import { Sort } from '~/apps/gamification-admin/src/game-lib'
-import { LinkButton, Table, TableColumn } from '~/libs/ui'
+import { colWidthType, LinkButton, Table, TableColumn } from '~/libs/ui'
 import { useWindowSize, WindowSize } from '~/libs/shared'
 
 import { BillingAccount, MobileTableColumn } from '../../models'
@@ -23,12 +23,15 @@ interface Props {
     setPage: Dispatch<SetStateAction<number>>
     sort: Sort | undefined,
     setSort: Dispatch<SetStateAction<Sort | undefined>>
+    colWidth: colWidthType | undefined,
+    setColWidth: Dispatch<SetStateAction<colWidthType>> | undefined
 }
 
 export const BillingAccountsTable: FC<Props> = (props: Props) => {
     const columns = useMemo<TableColumn<BillingAccount>[]>(
         () => [
             {
+                columnId: 'id',
                 label: 'Account ID',
                 renderer: (data: BillingAccount) => (
                     <div>
@@ -39,26 +42,31 @@ export const BillingAccountsTable: FC<Props> = (props: Props) => {
             },
             {
                 className: styles.tableCell,
+                columnId: 'name',
                 label: 'Name',
                 propertyName: 'name',
                 type: 'text',
             },
             {
+                columnId: 'status',
                 label: 'Status',
                 propertyName: 'status',
                 type: 'text',
             },
             {
+                columnId: 'startDateString',
                 label: 'Start Date',
                 propertyName: 'startDateString',
                 type: 'text',
             },
             {
+                columnId: 'endDateString',
                 label: 'End Date',
                 propertyName: 'endDateString',
                 type: 'text',
             },
             {
+                columnId: 'action',
                 label: '',
                 renderer: (data: BillingAccount) => (
                     <span>
@@ -167,6 +175,9 @@ export const BillingAccountsTable: FC<Props> = (props: Props) => {
                     onToggleSort={props.setSort}
                     removeDefaultSort
                     forceSort={props.sort}
+                    colWidth={props.colWidth}
+                    setColWidth={props.setColWidth}
+                    className={styles.desktopTable}
                 />
             )}
             <Pagination

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

@@ -53,3 +53,9 @@
         flex: none;
     }
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}

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

@@ -332,6 +332,8 @@ const ChallengeList: FC<ChallengeListProps> = props => {
                     columns={columns}
                     data={props.challenges}
                     disableSorting
+                    onToggleSort={_.noop}
+                    className={styles.desktopTable}
                 />
             )}
             {screenWidth <= 1279 && (

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

@@ -48,3 +48,9 @@
         text-align: right;
     }
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}

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

@@ -421,6 +421,7 @@ const ChallengeUserList: FC<ChallengeUserListProps> = props => {
                         columns={columns}
                         data={props.users}
                         disableSorting
+                        className={styles.desktopTable}
                     />
                 )}
                 {screenWidth <= 984 && (

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

@@ -30,3 +30,9 @@
     white-space: break-spaces !important;
     text-align: left !important;
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}

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

@@ -7,7 +7,7 @@ import classNames from 'classnames'
 
 import { Sort } from '~/apps/gamification-admin/src/game-lib'
 import { useWindowSize, WindowSize } from '~/libs/shared'
-import { Table, TableColumn } from '~/libs/ui'
+import { colWidthType, Table, TableColumn } from '~/libs/ui'
 
 import { ClientInfo, MobileTableColumn } from '../../models'
 import { Pagination } from '../common/Pagination'
@@ -23,12 +23,15 @@ interface Props {
     setPage: Dispatch<SetStateAction<number>>
     sort: Sort | undefined
     setSort: Dispatch<SetStateAction<Sort | undefined>>
+    colWidth: colWidthType | undefined,
+    setColWidth: Dispatch<SetStateAction<colWidthType>> | undefined
 }
 
 export const ClientsTable: FC<Props> = (props: Props) => {
     const columns = useMemo<TableColumn<ClientInfo>[]>(
         () => [
             {
+                columnId: 'ClientID',
                 label: 'Client ID',
                 renderer: (data: ClientInfo) => (
                     <div>
@@ -39,26 +42,31 @@ export const ClientsTable: FC<Props> = (props: Props) => {
             },
             {
                 className: styles.tableCell,
+                columnId: 'name',
                 label: 'Name',
                 propertyName: 'name',
                 type: 'text',
             },
             {
+                columnId: 'status',
                 label: 'Status',
                 propertyName: 'status',
                 type: 'text',
             },
             {
+                columnId: 'startDateString',
                 label: 'Start Date',
                 propertyName: 'startDateString',
                 type: 'text',
             },
             {
+                columnId: 'endDateString',
                 label: 'End Date',
                 propertyName: 'endDateString',
                 type: 'text',
             },
             {
+                columnId: 'codeName',
                 label: 'Code name',
                 renderer: (data: ClientInfo) => (
                     <>
@@ -161,6 +169,9 @@ export const ClientsTable: FC<Props> = (props: Props) => {
                     onToggleSort={props.setSort}
                     removeDefaultSort
                     forceSort={props.sort}
+                    className={styles.desktopTable}
+                    colWidth={props.colWidth}
+                    setColWidth={props.setColWidth}
                 />
             )}
             <Pagination

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

@@ -61,3 +61,9 @@
         background: none;
     }
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}

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

@@ -158,6 +158,7 @@ export const DialogEditUserGroups: FC<Props> = (props: Props) => {
                                 data={userGroups}
                                 disableSorting
                                 onToggleSort={_.noop}
+                                className={styles.desktopTable}
                             />
                         ) : (
                             <div>No groups</div>

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

@@ -61,3 +61,9 @@
         background: none;
     }
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}

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

@@ -154,6 +154,7 @@ export const DialogEditUserRoles: FC<Props> = (props: Props) => {
                                 data={userRoles}
                                 disableSorting
                                 onToggleSort={_.noop}
+                                className={styles.desktopTable}
                             />
                         ) : (
                             <div>No roles</div>

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

@@ -78,3 +78,9 @@
         background: none;
     }
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}

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

@@ -223,6 +223,7 @@ export const DialogEditUserTerms: FC<Props> = (props: Props) => {
                                             data={addedInfo.datas}
                                             disableSorting
                                             onToggleSort={_.noop}
+                                            className={styles.desktopTable}
                                         />
                                         <Pagination
                                             page={addedInfo.page}
@@ -276,6 +277,7 @@ export const DialogEditUserTerms: FC<Props> = (props: Props) => {
                                             data={notAddedInfo.datas}
                                             disableSorting
                                             onToggleSort={_.noop}
+                                            className={styles.desktopTable}
                                         />
                                         <Pagination
                                             page={notAddedInfo.page}

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

@@ -41,3 +41,9 @@
     padding: 16px 16px 32px;
     text-align: center;
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}

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

@@ -92,6 +92,7 @@ export const DialogUserStatusHistory: FC<Props> = (props: Props) => {
                                 data={userAchievements}
                                 disableSorting
                                 onToggleSort={_.noop}
+                                className={styles.desktopTable}
                             />
                         )}
                     </>

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

@@ -32,3 +32,9 @@
 .blockCellWrap {
     white-space: break-spaces !important;
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}