Skip to content

Commit df1c1d9

Browse files
nickgrosnickgros
authored
Merge pull request #1544 from nickgros/PORTALS-2651-remaining
2 parents 6d27b27 + cb20e09 commit df1c1d9

15 files changed

Lines changed: 102 additions & 96 deletions

File tree

‎packages/synapse-react-client/src/components/ChallengeSubmission/AvailableEvaluationQueueList.stories.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Box } from '@mui/material'
22
import { Meta, StoryObj } from '@storybook/react'
3+
import { fn } from '@storybook/test'
34
import {
45
generatedEvaulations,
56
mockEvaluationQueue,
@@ -17,6 +18,9 @@ const meta: Meta = {
1718
</Box>
1819
),
1920
],
21+
args: {
22+
onChangeSelectedEvaluation: fn(),
23+
},
2024
} satisfies Meta<typeof AvailableEvaluationQueueList>
2125
export default meta
2226
type Story = StoryObj<typeof meta>

‎packages/synapse-react-client/src/components/EntityFinder/details/view/DetailsView.test.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -665,7 +665,7 @@ describe('DetailsView tests', () => {
665665
]),
666666
})
667667

668-
await screen.findByRole('listbox')
668+
await screen.findByRole('combobox')
669669

670670
// We should have two versions and 'Always Latest Version' as options
671671
expect((await screen.findAllByRole('option')).length).toBe(3)
@@ -715,7 +715,7 @@ describe('DetailsView tests', () => {
715715
versionSelection: VersionSelectionType.REQUIRED,
716716
})
717717

718-
await screen.findByRole('listbox')
718+
await screen.findByRole('combobox')
719719

720720
// We should have two versions
721721
expect(screen.getAllByRole('option').length).toBe(2)
@@ -731,7 +731,7 @@ describe('DetailsView tests', () => {
731731
[entityHeaders[0].id, { targetId: entityHeaders[0].id }],
732732
]),
733733
})
734-
const versionSelectBox = await screen.findByRole('listbox')
734+
const versionSelectBox = await screen.findByRole('combobox')
735735

736736
// There are two versions, plus "Always Latest"
737737
const options = await screen.findAllByRole('option')
@@ -775,7 +775,7 @@ describe('DetailsView tests', () => {
775775
[entityHeaders[0].id, { targetId: entityHeaders[0].id }],
776776
]),
777777
})
778-
expect(await screen.findByRole('listbox')).toBeDefined()
778+
expect(await screen.findByRole('combobox')).toBeDefined()
779779

780780
expect(
781781
(screen.getAllByRole('option')[0] as HTMLOptionElement).selected,
@@ -815,7 +815,7 @@ describe('DetailsView tests', () => {
815815
],
816816
]),
817817
})
818-
expect(await screen.findByRole('listbox')).toBeDefined()
818+
expect(await screen.findByRole('combobox')).toBeDefined()
819819

820820
expect(
821821
(screen.getAllByRole('option')[0] as HTMLOptionElement).selected,
@@ -850,7 +850,7 @@ describe('DetailsView tests', () => {
850850
]),
851851
versionSelection: VersionSelectionType.REQUIRED,
852852
})
853-
expect(await screen.findByRole('listbox')).toBeDefined()
853+
expect(await screen.findByRole('combobox')).toBeDefined()
854854

855855
// Always Latest Version is not an option
856856
expect(screen.getAllByRole('option').length).toBe(2)

‎packages/synapse-react-client/src/components/EntityFinder/details/view/table/EntityFinderVersionCell.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import { Select } from '@mui/material'
12
import { EntityType, Reference } from '@sage-bionetworks/synapse-types'
23
import { CellContext } from '@tanstack/react-table'
3-
import { SyntheticEvent, useEffect } from 'react'
4-
import { Form } from 'react-bootstrap'
4+
import { useEffect } from 'react'
55
import { useGetVersionsInfinite } from '../../../../../synapse-queries/index'
66
import { isTableType } from '../../../../../utils/functions/EntityTypeUtils'
77
import IconSvg from '../../../../IconSvg/IconSvg'
@@ -111,17 +111,17 @@ export function EntityFinderVersionCell(props: EntityFinderVersionCellProps) {
111111
return (
112112
<div>
113113
{versions && versions.length > 0 ? (
114-
<Form.Control
115-
role="listbox"
116-
size="sm"
117-
as="select"
114+
<Select
115+
native
116+
fullWidth
118117
value={currentSelectedVersionOptionValue}
119-
onClick={(event: SyntheticEvent<HTMLSelectElement>) => {
118+
onClick={event => {
120119
event.stopPropagation()
121120
}}
121+
sx={{ height: '30px' }}
122122
onChange={event => {
123123
event.stopPropagation()
124-
const version = parseInt(event.target.value)
124+
const version = parseInt((event.target as HTMLInputElement).value)
125125
toggleSelection({
126126
targetId: id,
127127
targetVersionNumber:
@@ -143,7 +143,7 @@ export function EntityFinderVersionCell(props: EntityFinderVersionCellProps) {
143143
</option>
144144
)
145145
})}
146-
</Form.Control>
146+
</Select>
147147
) : (
148148
latestVersionText
149149
)}

‎packages/synapse-react-client/src/components/Markdown/MarkdownEditor.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export function MarkdownEditor({
118118
}
119119

120120
return (
121-
<div className="bootstrap-4-backport MarkdownEditor">
121+
<div className="MarkdownEditor">
122122
<div className="MarkdownEditorControls">
123123
<div className="Tabs">
124124
{MarkdownEditorTabs.map(tabName => {

‎packages/synapse-react-client/src/components/ProvenanceGraph/ProvenanceGraph.stories.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,8 @@ import ProvenanceGraph, { ProvenanceProps } from './ProvenanceGraph'
44
const meta: Meta<ProvenanceProps> = {
55
title: 'Synapse/ProvenanceGraph',
66
component: ProvenanceGraph,
7-
decorators: [
8-
Story => (
9-
<div className="bootstrap-4-backport">
10-
<Story />
11-
</div>
12-
),
13-
],
147
}
8+
159
export default meta
1610
type Story = StoryObj<typeof meta>
1711

‎packages/synapse-react-client/src/components/ProvenanceGraph/ProvenanceGraph.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -397,7 +397,7 @@ const ProvenanceReactFlow = (props: ProvenanceProps) => {
397397
)
398398
return (
399399
<div
400-
className="bootstrap-4-backport ProvenanceWidget"
400+
className="ProvenanceWidget"
401401
role="graphics-doc" //https://www.w3.org/wiki/SVG_Accessibility/ARIA_roles_for_charts#Document_Roles
402402
style={{ width: '100%', height: containerHeight }}
403403
>

‎packages/synapse-react-client/src/components/QuerySortSelector.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ function QuerySortSelector({ sortConfig }: QuerySortSelectorProps) {
5555
}
5656

5757
return (
58-
<div className="QuerySortSelector bootstrap-4-backport">
58+
<div className="QuerySortSelector">
5959
<Typography variant="label" className="sort-by-label SRC-inlineBlock">
6060
Sort by
6161
</Typography>

‎packages/synapse-react-client/src/components/SubsectionRowRenderer/SubsectionRowRenderer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ function SubsectionRowRenderer({
107107
return friendlyValue ? friendlyValue : rawValue
108108
}
109109
return (
110-
<div className="SubsectionRowRenderer bootstrap-4-backport">
110+
<div className="SubsectionRowRenderer">
111111
{isLoading && <SkeletonTable numRows={2} numCols={1} />}
112112
{!isLoading &&
113113
rowSet &&

‎packages/synapse-react-client/src/components/SynapseForm/SynapseFormWrapper.stories.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
11
import { Meta, StoryObj } from '@storybook/react'
2-
import { SynapseContextConsumer } from '../../utils/context/SynapseContext'
32
import SynapseFormWrapper, {
43
SynapseFormWrapperProps,
54
} from './SynapseFormWrapper'
65

76
const meta = {
87
title: 'Synapse/SynapseFormWrapper',
98
component: SynapseFormWrapper,
10-
render: args => (
11-
<SynapseContextConsumer>
12-
{synapseContext => (
13-
<SynapseFormWrapper {...args} token={synapseContext?.accessToken} />
14-
)}
15-
</SynapseContextConsumer>
16-
),
9+
parameters: {
10+
withRouter: true,
11+
},
1712
} satisfies Meta<SynapseFormWrapperProps>
1813
export default meta
1914
type Story = StoryObj<typeof meta>

‎packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.tsx‎

Lines changed: 63 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
1-
import { Badge, Drawer, List, ListItemButton, Tooltip } from '@mui/material'
1+
import {
2+
Badge,
3+
Drawer,
4+
InputAdornment,
5+
List,
6+
ListItemButton,
7+
TextField,
8+
Tooltip,
9+
} from '@mui/material'
210
import {
311
Direction,
412
SubmissionSortField,
513
SubmissionState,
614
} from '@sage-bionetworks/synapse-types'
7-
import { useState } from 'react'
8-
import { Form } from 'react-bootstrap'
15+
import { useState, KeyboardEvent } from 'react'
916
import SynapseIconWhite from '../../assets/icons/SynapseIconWhite'
1017
import SynapseLogoName from '../../assets/icons/SynapseLogoName'
1118
import SynapseClient from '../../synapse-client'
@@ -416,26 +423,32 @@ export function SynapseNavDrawer({
416423
<IconSvg icon="addCircleOutline" />
417424
</a>
418425
</Tooltip>
419-
<div className="searchInputWithIcon">
420-
<IconSvg icon="searchOutlined" />
421-
<Form.Control
422-
type="search"
423-
placeholder="Search All Projects"
424-
value={projectSearchText}
425-
onChange={event => {
426-
setProjectSearchText(event.target.value)
427-
}}
428-
onKeyDown={(event: any) => {
429-
if (event.key === 'Enter') {
430-
if (event.target.value !== '') {
431-
setProjectSearchText('')
432-
handleDrawerClose()
433-
onProjectSearch(event.target.value)
434-
}
426+
<TextField
427+
type="search"
428+
placeholder="Search All Projects"
429+
value={projectSearchText}
430+
onChange={event => {
431+
setProjectSearchText(event.target.value)
432+
}}
433+
onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
434+
if (event.key === 'Enter') {
435+
if ((event.target as HTMLInputElement).value !== '') {
436+
setProjectSearchText('')
437+
handleDrawerClose()
438+
onProjectSearch(
439+
(event.target as HTMLInputElement).value,
440+
)
435441
}
436-
}}
437-
/>
438-
</div>
442+
}
443+
}}
444+
InputProps={{
445+
startAdornment: (
446+
<InputAdornment position="start">
447+
<IconSvg icon="searchOutlined" />
448+
</InputAdornment>
449+
),
450+
}}
451+
/>
439452
<div className="linkList" onClick={handleDrawerClose}>
440453
<a
441454
className="SRC-whiteText"
@@ -544,30 +557,35 @@ export function SynapseNavDrawer({
544557
{selectedItem == NavItem.HELP && (
545558
<>
546559
<div className="header">Help</div>
547-
<div className="searchInputWithIcon">
548-
<IconSvg icon="searchOutlined" />
549-
<Form.Control
550-
type="search"
551-
placeholder="Search Synapse Documentation"
552-
value={docSiteSearchText}
553-
onChange={event => {
554-
setDocSiteSearchText(event.target.value)
555-
}}
556-
onKeyDown={(event: any) => {
557-
if (event.key === 'Enter') {
558-
if (event.target.value !== '') {
559-
window.open(
560-
`https://help.synapse.org/search.html?max=10&s=docs&q=${encodeURI(
561-
event.target.value,
562-
)}`,
563-
)
564-
setDocSiteSearchText('')
565-
handleDrawerClose()
566-
}
560+
<TextField
561+
type="search"
562+
placeholder="Search Documentation"
563+
value={docSiteSearchText}
564+
onChange={event => {
565+
setDocSiteSearchText(event.target.value)
566+
}}
567+
InputProps={{
568+
startAdornment: (
569+
<InputAdornment position="start">
570+
<IconSvg icon="searchOutlined" />
571+
</InputAdornment>
572+
),
573+
}}
574+
onKeyDown={event => {
575+
if (event.key === 'Enter') {
576+
if ((event.target as HTMLInputElement).value !== '') {
577+
window.open(
578+
`https://help.synapse.org/search.html?max=10&s=docs&q=${encodeURI(
579+
(event.target as HTMLInputElement).value,
580+
)}`,
581+
)
582+
setDocSiteSearchText('')
583+
handleDrawerClose()
567584
}
568-
}}
569-
/>
570-
</div>
585+
}
586+
}}
587+
/>
588+
571589
<div className="linkList" onClick={handleDrawerClose}>
572590
<a
573591
className="SRC-whiteText"

0 commit comments

Comments
 (0)