Skip to content

Commit

Permalink
Merge pull request #1493 from nickgros/PORTALS-3369
Browse files Browse the repository at this point in the history
  • Loading branch information
@nickgros
nickgros authored Jan 9, 2025
2 parents b3e26b5 + 58e1296 commit 038f70a
Show file tree
Hide file tree
Showing 5 changed files with 210 additions and 162 deletions.
2 changes: 1 addition & 1 deletion eslint.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default tseslint.config(
},
rules: {
'react/prop-types': [0],
'react/no-unstable-nested-components': 'warn',
'react/no-unstable-nested-components': 'error',
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': [
'warn',
Expand Down
116 changes: 73 additions & 43 deletions packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,44 @@ export const TESTING_TRASH_BTN_CLASS = 'TESTING_TRASH_BTN_CLASS'

dayjs.extend(localizedFormat)

function InteractiveSortIcon(props: {
columnSortBy: SortField
sort: Sort | undefined
setSort: React.Dispatch<React.SetStateAction<Sort | undefined>>
}) {
const { columnSortBy, sort, setSort } = props
return (
<span>
{setSort && (
<SortIcon
role="button"
style={{ height: '20px' }}
active={sort?.field === columnSortBy}
direction={
sort?.field === columnSortBy
? sort.direction === 'DESC'
? Direction.DESC
: Direction.ASC
: Direction.DESC
}
onClick={() => {
const direction =
columnSortBy === sort?.field
? sort.direction === 'ASC'
? 'DESC'
: 'ASC'
: 'DESC'
setSort({
field: columnSortBy,
direction,
})
}}
/>
)}
</span>
)
}

export type DownloadListTableProps = {
filesStatistics: FilesStatisticsResponse
refetchStatistics: () => Promise<any>
Expand Down Expand Up @@ -138,42 +176,6 @@ export default function DownloadListTable(props: DownloadListTableProps) {
console.error(err)
}
}
const InteractiveSortIcon = ({
columnSortBy,
}: {
columnSortBy: SortField
}) => {
return (
<span>
{setSort && (
<SortIcon
role="button"
style={{ height: '20px' }}
active={sort?.field === columnSortBy}
direction={
sort?.field === columnSortBy
? sort.direction === 'DESC'
? Direction.DESC
: Direction.ASC
: Direction.DESC
}
onClick={() => {
const direction =
columnSortBy === sort?.field
? sort.direction === 'ASC'
? 'DESC'
: 'ASC'
: 'DESC'
setSort({
field: columnSortBy,
direction,
})
}}
/>
)}
</span>
)
}

const availableFiltersArray: AvailableFilter[] = [
undefined,
Expand Down Expand Up @@ -216,11 +218,19 @@ export default function DownloadListTable(props: DownloadListTableProps) {
<th>{/* Eligible/Ineligible icon */}</th>
<th>
Name
<InteractiveSortIcon columnSortBy="fileName" />
<InteractiveSortIcon
columnSortBy="fileName"
sort={sort}
setSort={setSort}
/>
</th>
<th>
Size
<InteractiveSortIcon columnSortBy="fileSize" />
<InteractiveSortIcon
columnSortBy="fileSize"
sort={sort}
setSort={setSort}
/>
</th>
<th>
SynID
Expand All @@ -231,23 +241,43 @@ export default function DownloadListTable(props: DownloadListTableProps) {
setCopyingAllSynapseIDs(true)
}}
/>
<InteractiveSortIcon columnSortBy="synId" />
<InteractiveSortIcon
columnSortBy="synId"
sort={sort}
setSort={setSort}
/>
</th>
<th>
Project
<InteractiveSortIcon columnSortBy="projectName" />
<InteractiveSortIcon
columnSortBy="projectName"
sort={sort}
setSort={setSort}
/>
</th>
<th>
Added On
<InteractiveSortIcon columnSortBy="addedOn" />
<InteractiveSortIcon
columnSortBy="addedOn"
sort={sort}
setSort={setSort}
/>
</th>
<th>
Created By
<InteractiveSortIcon columnSortBy="createdBy" />
<InteractiveSortIcon
columnSortBy="createdBy"
sort={sort}
setSort={setSort}
/>
</th>
<th>
Created On
<InteractiveSortIcon columnSortBy="createdOn" />
<InteractiveSortIcon
columnSortBy="createdOn"
sort={sort}
setSort={setSort}
/>
</th>
<th className="stickyColumn">Actions</th>
</tr>
Expand Down
178 changes: 100 additions & 78 deletions packages/synapse-react-client/src/components/OAuthClientManagement/OAuthManagement.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,106 @@
import { useMemo, useState } from 'react'
import { formatDate } from '../../utils/functions/DateFormatter'
import dayjs from 'dayjs'
import { useGetOAuthClientInfinite } from '../../synapse-queries'
import { CreateOAuthModal } from './CreateOAuthClient'
import { OAuthClient } from '@sage-bionetworks/synapse-client/generated/models/OAuthClient'
import WarningDialog from '../SynapseForm/WarningDialog'
import SynapseClient from '../../synapse-client'
import { useSynapseContext } from '../../utils'
import CopyToClipboardInput from '../CopyToClipboardInput/CopyToClipboardInput'
import { displayToast } from '../ToastMessage'
import { DialogBase } from '../DialogBase'
import { Box, Button, Link } from '@mui/material'
import { AddCircleTwoTone } from '@mui/icons-material'
import { Box, Button, Link } from '@mui/material'
import { OAuthClient } from '@sage-bionetworks/synapse-client/generated/models/OAuthClient'
import {
ColumnDef,
createColumnHelper,
getCoreRowModel,
Table,
useReactTable,
} from '@tanstack/react-table'
import dayjs from 'dayjs'
import { useMemo, useState } from 'react'
import SynapseClient from '../../synapse-client'
import { useGetOAuthClientInfinite } from '../../synapse-queries'
import { useSynapseContext } from '../../utils'
import { formatDate } from '../../utils/functions/DateFormatter'
import CopyToClipboardInput from '../CopyToClipboardInput/CopyToClipboardInput'
import { DialogBase } from '../DialogBase'
import WarningDialog from '../SynapseForm/WarningDialog'
import ColumnHeader from '../TanStackTable/ColumnHeader'
import StyledTanStackTable from '../TanStackTable/StyledTanStackTable'
import { displayToast } from '../ToastMessage'
import { CreateOAuthModal } from './CreateOAuthClient'

const columnHelper = createColumnHelper<OAuthClient>()
function getColumns(columnOptions: {
setIsShowingVerification: (value: boolean) => void
setSelectedClient: (value: OAuthClient) => void
setIsShowingSecretWarning: (value: boolean) => void
setIsEdit: (value: boolean) => void
setIsShowingCreateClientModal: (value: boolean) => void
}) {
const {
setIsShowingVerification,
setSelectedClient,
setIsShowingSecretWarning,
setIsEdit,
setIsShowingCreateClientModal,
} = columnOptions
return [
columnHelper.accessor('createdOn', {
header: props => <ColumnHeader {...props} title={'Created'} />,
cell: info => formatDate(dayjs(info.getValue())),
}),
columnHelper.accessor('modifiedOn', {
header: props => <ColumnHeader {...props} title={'Modified'} />,
cell: info => formatDate(dayjs(info.getValue())),
}),
columnHelper.accessor('client_id', {
header: props => <ColumnHeader {...props} title={'ID'} />,
}),
columnHelper.accessor('client_name', {
header: props => <ColumnHeader {...props} title={'Client'} />,
}),
columnHelper.accessor('verified', {
header: props => <ColumnHeader {...props} title={'Verified'} />,
cell: ({ getValue }) =>
getValue() ? (
'Yes'
) : (
<Button
variant="outlined"
size="small"
onClick={() => setIsShowingVerification(true)}
>
Submit Verification
</Button>
),
}),
columnHelper.display({
id: 'generateSecret',
header: props => <ColumnHeader {...props} title={'App Secret'} />,
cell: ({ row }) => (
<Button
variant="outlined"
onClick={() => {
setSelectedClient(row.original)
setIsShowingSecretWarning(true)
}}
size="small"
>
Generate Secret
</Button>
),
}),
columnHelper.display({
id: 'actions',
header: props => <ColumnHeader {...props} title={'Actions'} />,
cell: ({ row }) => (
<Button
variant="outlined"
onClick={() => {
setSelectedClient(row.original)
setIsEdit(true)
setIsShowingCreateClientModal(true)
}}
size="small"
>
Edit
</Button>
),
}),
]
}

export function OAuthManagement() {
const { accessToken } = useSynapseContext()
Expand Down Expand Up @@ -61,71 +139,15 @@ export function OAuthManagement() {
}
}

const columns: ColumnDef<OAuthClient, any>[] = useMemo(
() => [
columnHelper.accessor('createdOn', {
header: props => <ColumnHeader {...props} title={'Created'} />,
cell: info => formatDate(dayjs(info.getValue())),
}),
columnHelper.accessor('modifiedOn', {
header: props => <ColumnHeader {...props} title={'Modified'} />,
cell: info => formatDate(dayjs(info.getValue())),
}),
columnHelper.accessor('client_id', {
header: props => <ColumnHeader {...props} title={'ID'} />,
}),
columnHelper.accessor('client_name', {
header: props => <ColumnHeader {...props} title={'Client'} />,
}),
columnHelper.accessor('verified', {
header: props => <ColumnHeader {...props} title={'Verified'} />,
cell: ({ getValue }) =>
getValue() ? (
'Yes'
) : (
<Button
variant="outlined"
size="small"
onClick={() => setIsShowingVerification(true)}
>
Submit Verification
</Button>
),
const columns = useMemo(
() =>
getColumns({
setIsShowingVerification,
setSelectedClient,
setIsShowingSecretWarning,
setIsEdit,
setIsShowingCreateClientModal,
}),
{
id: 'generateSecret',
header: props => <ColumnHeader {...props} title={'App Secret'} />,
cell: ({ row }) => (
<Button
variant="outlined"
onClick={() => {
setSelectedClient(row.original)
setIsShowingSecretWarning(true)
}}
size="small"
>
Generate Secret
</Button>
),
},
{
id: 'actions',
header: props => <ColumnHeader {...props} title={'Actions'} />,
cell: ({ row }) => (
<Button
variant="outlined"
onClick={() => {
setSelectedClient(row.original)
setIsEdit(true)
setIsShowingCreateClientModal(true)
}}
size="small"
>
Edit
</Button>
),
},
],
[],
)

Expand Down
Loading

0 comments on commit 038f70a

Please sign in to comment.