Skip to content

Topcoder Admin App - Misc Update 0518 #1085

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: feat/system-admin
Choose a base branch
from
Open

Topcoder Admin App - Misc Update 0518 #1085

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions src/apps/admin/src/billing-account/BillingAccountsPage/BillingAccountsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
/**
* Billing accounts page.
*/
import { FC } from 'react'
import { FC, useState } from 'react'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The useState hook is imported but not used in the current code. Consider removing it if it's not needed.

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'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The colWidthType import is added but not used in the current code. Consider removing it if it's not needed.


import { BillingAccountsFilter } from '../../lib/components/BillingAccountsFilter'
import { BillingAccountsTable } from '../../lib/components/BillingAccountsTable'
Expand All @@ -22,6 +22,7 @@ interface Props {
const pageTitle = 'Billing Accounts'

export const BillingAccountsPage: FC<Props> = (props: Props) => {
const [colWidth, setColWidth] = useState<colWidthType>({})
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The useState hook is initialized with an empty object, but it's unclear what colWidthType is. Ensure that colWidthType is defined and matches the expected shape of the state object.

const {
isLoading,
datas,
Expand Down Expand Up @@ -76,6 +77,8 @@ export const BillingAccountsPage: FC<Props> = (props: Props) => {
setPage={setPage}
setSort={setSort}
sort={sort}
colWidth={colWidth}
setColWidth={setColWidth}
/>
)}
</>
Expand Down
7 changes: 5 additions & 2 deletions src/apps/admin/src/billing-account/ClientsPage/ClientsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
/**
* Billing account clients page.
*/
import { FC } from 'react'
import { FC, useState } from 'react'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The useState hook is imported but not used in the current code. If it's not needed, consider removing it to keep the imports clean.

import classNames from 'classnames'

import { LinkButton, LoadingSpinner, PageDivider, PageTitle } from '~/libs/ui'
import { colWidthType, LinkButton, LoadingSpinner, PageDivider, PageTitle } from '~/libs/ui'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The colWidthType is imported but not used in the current code. If it's not needed, consider removing it to keep the imports clean.

import { PlusIcon } from '@heroicons/react/solid'

import { MSG_NO_RECORD_FOUND } from '../../config/index.config'
Expand All @@ -22,6 +22,7 @@ interface Props {
const pageTitle = 'Clients'

export const ClientsPage: FC<Props> = (props: Props) => {
const [colWidth, setColWidth] = useState<colWidthType>({})
const {
isLoading,
datas,
Expand Down Expand Up @@ -77,6 +78,8 @@ export const ClientsPage: FC<Props> = (props: Props) => {
setPage={setPage}
setSort={setSort}
sort={sort}
colWidth={colWidth}
setColWidth={setColWidth}
/>
)}
</>
Expand Down
6 changes: 6 additions & 0 deletions .../src/lib/components/BillingAccountResourcesTable/BillingAccountResourcesTable.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,9 @@
.btnDelete {
padding-right: 0;
}

.desktopTable {
td {
vertical-align: middle;
}
}
10 changes: 8 additions & 2 deletions ...ps/admin/src/lib/components/BillingAccountResourcesTable/BillingAccountResourcesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
/**
* Billing account resources table.
*/
import { FC, useMemo } from 'react'
import { FC, useMemo, useState } from 'react'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The useState hook is imported but not used in the code. Consider removing it if it's not needed.

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'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The colWidthType is imported but not used in the code. Consider removing it if it's not needed.


import { useTableFilterLocal, useTableFilterLocalProps } from '../../hooks'
import { Pagination } from '../common/Pagination'
Expand All @@ -26,6 +26,7 @@ interface Props {
}

export const BillingAccountResourcesTable: FC<Props> = (props: Props) => {
const [colWidth, setColWidth] = useState<colWidthType>({})
const {
page,
setPage,
Expand All @@ -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
Expand Down Expand Up @@ -100,6 +103,9 @@ export const BillingAccountResourcesTable: FC<Props> = (props: Props) => {
onToggleSort={setSort}
forceSort={sort}
removeDefaultSort
className={styles.desktopTable}
colWidth={colWidth}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The colWidth prop is being added to the component. Ensure that this prop is being used correctly within the component to adjust column widths as expected.

setColWidth={setColWidth}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The setColWidth prop is being added to the component. Verify that this function is being used appropriately to update the column widths dynamically.

/>
)}

Expand Down
6 changes: 6 additions & 0 deletions src/apps/admin/src/lib/components/BillingAccountsTable/BillingAccountsTable.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,9 @@
white-space: break-spaces !important;
text-align: left !important;
}

.desktopTable {
td {
vertical-align: middle;
}
}
13 changes: 12 additions & 1 deletion src/apps/admin/src/lib/components/BillingAccountsTable/BillingAccountsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -23,12 +23,15 @@ interface Props {
setPage: Dispatch<SetStateAction<number>>
sort: Sort | undefined,
setSort: Dispatch<SetStateAction<Sort | undefined>>
colWidth: colWidthType | undefined,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The colWidth prop is added but not used within the component. Consider utilizing this prop to adjust column widths dynamically if intended.

setColWidth: Dispatch<SetStateAction<colWidthType>> | undefined
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The setColWidth prop is added but not used within the component. Ensure this prop is necessary for the component's functionality or remove it if not needed.

}

export const BillingAccountsTable: FC<Props> = (props: Props) => {
const columns = useMemo<TableColumn<BillingAccount>[]>(
() => [
{
columnId: 'id',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The addition of columnId: 'id' seems redundant if the column ID is not used elsewhere in the code. Ensure that this addition is necessary for functionality or remove it if not needed.

label: 'Account ID',
renderer: (data: BillingAccount) => (
<div>
Expand All @@ -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>
Expand Down Expand Up @@ -167,6 +175,9 @@ export const BillingAccountsTable: FC<Props> = (props: Props) => {
onToggleSort={props.setSort}
removeDefaultSort
forceSort={props.sort}
colWidth={props.colWidth}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The colWidth prop is being added to the component, but ensure that this prop is being used correctly within the component to adjust column widths as intended.

setColWidth={props.setColWidth}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The setColWidth prop is introduced, but verify that it is being utilized appropriately within the component to update column widths dynamically.

className={styles.desktopTable}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The className prop is set to styles.desktopTable. Ensure that the corresponding CSS class is defined and applied correctly to style the table as expected.

/>
)}
<Pagination
Expand Down
6 changes: 6 additions & 0 deletions src/apps/admin/src/lib/components/ChallengeList/ChallengeList.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,9 @@
flex: none;
}
}

.desktopTable {
td {
vertical-align: middle;
}
}
2 changes: 2 additions & 0 deletions src/apps/admin/src/lib/components/ChallengeList/ChallengeList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,6 +332,8 @@ const ChallengeList: FC<ChallengeListProps> = props => {
columns={columns}
data={props.challenges}
disableSorting
onToggleSort={_.noop}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The onToggleSort prop is set to _.noop, which is a no-operation function. If sorting functionality is not needed, consider removing this prop entirely to avoid confusion.

className={styles.desktopTable}
/>
)}
{screenWidth <= 1279 && (
Expand Down
6 changes: 6 additions & 0 deletions src/apps/admin/src/lib/components/ChallengeUserList/ChallengeUserList.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,9 @@
text-align: right;
}
}

.desktopTable {
td {
vertical-align: middle;
}
}
1 change: 1 addition & 0 deletions src/apps/admin/src/lib/components/ChallengeUserList/ChallengeUserList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -421,6 +421,7 @@ const ChallengeUserList: FC<ChallengeUserListProps> = props => {
columns={columns}
data={props.users}
disableSorting
className={styles.desktopTable}
/>
)}
{screenWidth <= 984 && (
Expand Down
6 changes: 6 additions & 0 deletions src/apps/admin/src/lib/components/ClientsTable/ClientsTable.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,9 @@
white-space: break-spaces !important;
text-align: left !important;
}

.desktopTable {
td {
vertical-align: middle;
}
}
13 changes: 12 additions & 1 deletion src/apps/admin/src/lib/components/ClientsTable/ClientsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -23,12 +23,15 @@ interface Props {
setPage: Dispatch<SetStateAction<number>>
sort: Sort | undefined
setSort: Dispatch<SetStateAction<Sort | undefined>>
colWidth: colWidthType | undefined,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The colWidth prop is marked as undefined, but it might be better to ensure that it always has a default value or is required, to avoid potential runtime errors when accessing it.

setColWidth: Dispatch<SetStateAction<colWidthType>> | undefined
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The setColWidth prop is marked as undefined, but it might be better to ensure that it always has a default value or is required, to avoid potential runtime errors when calling it.

}

export const ClientsTable: FC<Props> = (props: Props) => {
const columns = useMemo<TableColumn<ClientInfo>[]>(
() => [
{
columnId: 'ClientID',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The addition of columnId: 'ClientID' should be checked for consistency with other column definitions. Ensure that all columns have a columnId if this is a new requirement.

label: 'Client ID',
renderer: (data: ClientInfo) => (
<div>
Expand All @@ -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) => (
<>
Expand Down Expand Up @@ -161,6 +169,9 @@ export const ClientsTable: FC<Props> = (props: Props) => {
onToggleSort={props.setSort}
removeDefaultSort
forceSort={props.sort}
className={styles.desktopTable}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The className prop is being set to styles.desktopTable. Ensure that styles.desktopTable is defined in your CSS module and that it is being imported correctly. If it's not defined, it may lead to a runtime error.

colWidth={props.colWidth}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The colWidth prop is being added. Verify that the component receiving this prop is designed to handle it correctly. If this is a new prop, ensure that it is documented and that its purpose is clear.

setColWidth={props.setColWidth}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The setColWidth prop is being added. Ensure that this function is correctly implemented and that it updates the column width as intended. Also, verify that it does not introduce any side effects or performance issues.

/>
)}
<Pagination
Expand Down
6 changes: 6 additions & 0 deletions src/apps/admin/src/lib/components/DialogEditUserGroups/DialogEditUserGroups.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,3 +61,9 @@
background: none;
}
}

.desktopTable {
td {
vertical-align: middle;
}
}
1 change: 1 addition & 0 deletions src/apps/admin/src/lib/components/DialogEditUserGroups/DialogEditUserGroups.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@ export const DialogEditUserGroups: FC<Props> = (props: Props) => {
data={userGroups}
disableSorting
onToggleSort={_.noop}
className={styles.desktopTable}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider verifying that styles.desktopTable is defined and correctly imported. If it is not defined or imported, it could lead to runtime errors or styling issues.

/>
) : (
<div>No groups</div>
Expand Down
6 changes: 6 additions & 0 deletions src/apps/admin/src/lib/components/DialogEditUserRoles/DialogEditUserRoles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,3 +61,9 @@
background: none;
}
}

.desktopTable {
td {
vertical-align: middle;
}
}
1 change: 1 addition & 0 deletions src/apps/admin/src/lib/components/DialogEditUserRoles/DialogEditUserRoles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@ export const DialogEditUserRoles: FC<Props> = (props: Props) => {
data={userRoles}
disableSorting
onToggleSort={_.noop}
className={styles.desktopTable}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider verifying if the styles.desktopTable class is defined and applied correctly to ensure consistent styling across different components.

/>
) : (
<div>No roles</div>
Expand Down
6 changes: 6 additions & 0 deletions src/apps/admin/src/lib/components/DialogEditUserTerms/DialogEditUserTerms.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,3 +78,9 @@
background: none;
}
}

.desktopTable {
td {
vertical-align: middle;
}
}
2 changes: 2 additions & 0 deletions src/apps/admin/src/lib/components/DialogEditUserTerms/DialogEditUserTerms.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,7 @@ export const DialogEditUserTerms: FC<Props> = (props: Props) => {
data={addedInfo.datas}
disableSorting
onToggleSort={_.noop}
className={styles.desktopTable}
/>
<Pagination
page={addedInfo.page}
Expand Down Expand Up @@ -276,6 +277,7 @@ export const DialogEditUserTerms: FC<Props> = (props: Props) => {
data={notAddedInfo.datas}
disableSorting
onToggleSort={_.noop}
className={styles.desktopTable}
/>
<Pagination
page={notAddedInfo.page}
Expand Down
6 changes: 6 additions & 0 deletions ...apps/admin/src/lib/components/DialogUserStatusHistory/DialogUserStatusHistory.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,9 @@
padding: 16px 16px 32px;
text-align: center;
}

.desktopTable {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding a class for the table element itself to ensure that the styles are applied correctly to the intended table structure. This can help avoid potential conflicts with other table styles.

td {
vertical-align: middle;
}
}
1 change: 1 addition & 0 deletions src/apps/admin/src/lib/components/DialogUserStatusHistory/DialogUserStatusHistory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ export const DialogUserStatusHistory: FC<Props> = (props: Props) => {
data={userAchievements}
disableSorting
onToggleSort={_.noop}
className={styles.desktopTable}
/>
)}
</>
Expand Down
6 changes: 6 additions & 0 deletions src/apps/admin/src/lib/components/GroupMembersTable/GroupMembersTable.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,9 @@
.blockCellWrap {
white-space: break-spaces !important;
}

.desktopTable {
td {
vertical-align: middle;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using vertical-align: middle; on th elements as well, if applicable, to ensure consistent alignment across headers and data cells.

}
}
Loading