PORTALS-2651 - various components

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

@@ -1,5 +1,6 @@
 import { Box } from '@mui/material'
 import { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
 import {
   generatedEvaulations,
   mockEvaluationQueue,
@@ -17,6 +18,9 @@ const meta: Meta = {
       </Box>
     ),
   ],
+  args: {
+    onChangeSelectedEvaluation: fn(),
+  },
 } satisfies Meta<typeof AvailableEvaluationQueueList>
 export default meta
 type Story = StoryObj<typeof meta>

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

@@ -665,7 +665,7 @@ describe('DetailsView tests', () => {
           ]),
         })
 
-        await screen.findByRole('listbox')
+        await screen.findByRole('combobox')
 
         // We should have two versions and 'Always Latest Version' as options
         expect((await screen.findAllByRole('option')).length).toBe(3)
@@ -715,7 +715,7 @@ describe('DetailsView tests', () => {
           versionSelection: VersionSelectionType.REQUIRED,
         })
 
-        await screen.findByRole('listbox')
+        await screen.findByRole('combobox')
 
         // We should have two versions
         expect(screen.getAllByRole('option').length).toBe(2)
@@ -731,7 +731,7 @@ describe('DetailsView tests', () => {
             [entityHeaders[0].id, { targetId: entityHeaders[0].id }],
           ]),
         })
-        const versionSelectBox = await screen.findByRole('listbox')
+        const versionSelectBox = await screen.findByRole('combobox')
 
         // There are two versions, plus "Always Latest"
         const options = await screen.findAllByRole('option')
@@ -775,7 +775,7 @@ describe('DetailsView tests', () => {
             [entityHeaders[0].id, { targetId: entityHeaders[0].id }],
           ]),
         })
-        expect(await screen.findByRole('listbox')).toBeDefined()
+        expect(await screen.findByRole('combobox')).toBeDefined()
 
         expect(
           (screen.getAllByRole('option')[0] as HTMLOptionElement).selected,
@@ -815,7 +815,7 @@ describe('DetailsView tests', () => {
             ],
           ]),
         })
-        expect(await screen.findByRole('listbox')).toBeDefined()
+        expect(await screen.findByRole('combobox')).toBeDefined()
 
         expect(
           (screen.getAllByRole('option')[0] as HTMLOptionElement).selected,
@@ -850,7 +850,7 @@ describe('DetailsView tests', () => {
           ]),
           versionSelection: VersionSelectionType.REQUIRED,
         })
-        expect(await screen.findByRole('listbox')).toBeDefined()
+        expect(await screen.findByRole('combobox')).toBeDefined()
 
         // Always Latest Version is not an option
         expect(screen.getAllByRole('option').length).toBe(2)

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

@@ -1,7 +1,7 @@
+import { Select } from '@mui/material'
 import { EntityType, Reference } from '@sage-bionetworks/synapse-types'
 import { CellContext } from '@tanstack/react-table'
-import { SyntheticEvent, useEffect } from 'react'
-import { Form } from 'react-bootstrap'
+import { useEffect } from 'react'
 import { useGetVersionsInfinite } from '../../../../../synapse-queries/index'
 import { isTableType } from '../../../../../utils/functions/EntityTypeUtils'
 import IconSvg from '../../../../IconSvg/IconSvg'
@@ -111,17 +111,17 @@ export function EntityFinderVersionCell(props: EntityFinderVersionCellProps) {
   return (
     <div>
       {versions && versions.length > 0 ? (
-        <Form.Control
-          role="listbox"
-          size="sm"
-          as="select"
+        <Select
+          native
+          fullWidth
           value={currentSelectedVersionOptionValue}
-          onClick={(event: SyntheticEvent<HTMLSelectElement>) => {
+          onClick={event => {
             event.stopPropagation()
           }}
+          sx={{ height: '30px' }}
           onChange={event => {
             event.stopPropagation()
-            const version = parseInt(event.target.value)
+            const version = parseInt((event.target as HTMLInputElement).value)
             toggleSelection({
               targetId: id,
               targetVersionNumber:
@@ -143,7 +143,7 @@ export function EntityFinderVersionCell(props: EntityFinderVersionCellProps) {
               </option>
             )
           })}
-        </Form.Control>
+        </Select>
       ) : (
         latestVersionText
       )}

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

@@ -118,7 +118,7 @@ export function MarkdownEditor({
   }
 
   return (
-    <div className="bootstrap-4-backport MarkdownEditor">
+    <div className="MarkdownEditor">
       <div className="MarkdownEditorControls">
         <div className="Tabs">
           {MarkdownEditorTabs.map(tabName => {

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

@@ -4,14 +4,8 @@ import ProvenanceGraph, { ProvenanceProps } from './ProvenanceGraph'
 const meta: Meta<ProvenanceProps> = {
   title: 'Synapse/ProvenanceGraph',
   component: ProvenanceGraph,
-  decorators: [
-    Story => (
-      <div className="bootstrap-4-backport">
-        <Story />
-      </div>
-    ),
-  ],
 }
+
 export default meta
 type Story = StoryObj<typeof meta>
 

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

@@ -397,7 +397,7 @@ const ProvenanceReactFlow = (props: ProvenanceProps) => {
   )
   return (
     <div
-      className="bootstrap-4-backport ProvenanceWidget"
+      className="ProvenanceWidget"
       role="graphics-doc" //https://www.w3.org/wiki/SVG_Accessibility/ARIA_roles_for_charts#Document_Roles
       style={{ width: '100%', height: containerHeight }}
     >

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

@@ -69,7 +69,7 @@ function QuerySortSelector({ sortConfig }: QuerySortSelectorProps) {
   }
 
   return (
-    <div className="QuerySortSelector bootstrap-4-backport">
+    <div className="QuerySortSelector">
       <Typography variant="label" className="sort-by-label SRC-inlineBlock">
         Sort by
       </Typography>

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

@@ -107,7 +107,7 @@ function SubsectionRowRenderer({
     return friendlyValue ? friendlyValue : rawValue
   }
   return (
-    <div className="SubsectionRowRenderer bootstrap-4-backport">
+    <div className="SubsectionRowRenderer">
       {isLoading && <SkeletonTable numRows={2} numCols={1} />}
       {!isLoading &&
         rowSet &&

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

@@ -1,19 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react'
-import { SynapseContextConsumer } from '../../utils/context/SynapseContext'
 import SynapseFormWrapper, {
   SynapseFormWrapperProps,
 } from './SynapseFormWrapper'
 
 const meta = {
   title: 'Synapse/SynapseFormWrapper',
   component: SynapseFormWrapper,
-  render: args => (
-    <SynapseContextConsumer>
-      {synapseContext => (
-        <SynapseFormWrapper {...args} token={synapseContext?.accessToken} />
-      )}
-    </SynapseContextConsumer>
-  ),
+  parameters: {
+    withRouter: true,
+  },
 } satisfies Meta<SynapseFormWrapperProps>
 export default meta
 type Story = StoryObj<typeof meta>

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

@@ -1,11 +1,18 @@
-import { Badge, Drawer, List, ListItemButton, Tooltip } from '@mui/material'
+import {
+  Badge,
+  Drawer,
+  InputAdornment,
+  List,
+  ListItemButton,
+  TextField,
+  Tooltip,
+} from '@mui/material'
 import {
   Direction,
   SubmissionSortField,
   SubmissionState,
 } from '@sage-bionetworks/synapse-types'
-import { useState } from 'react'
-import { Form } from 'react-bootstrap'
+import { useState, KeyboardEvent } from 'react'
 import SynapseIconWhite from '../../assets/icons/SynapseIconWhite'
 import SynapseLogoName from '../../assets/icons/SynapseLogoName'
 import SynapseClient from '../../synapse-client'
@@ -416,26 +423,32 @@ export function SynapseNavDrawer({
                     <IconSvg icon="addCircleOutline" />
                   </a>
                 </Tooltip>
-                <div className="searchInputWithIcon">
-                  <IconSvg icon="searchOutlined" />
-                  <Form.Control
-                    type="search"
-                    placeholder="Search All Projects"
-                    value={projectSearchText}
-                    onChange={event => {
-                      setProjectSearchText(event.target.value)
-                    }}
-                    onKeyDown={(event: any) => {
-                      if (event.key === 'Enter') {
-                        if (event.target.value !== '') {
-                          setProjectSearchText('')
-                          handleDrawerClose()
-                          onProjectSearch(event.target.value)
-                        }
+                <TextField
+                  type="search"
+                  placeholder="Search All Projects"
+                  value={projectSearchText}
+                  onChange={event => {
+                    setProjectSearchText(event.target.value)
+                  }}
+                  onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
+                    if (event.key === 'Enter') {
+                      if ((event.target as HTMLInputElement).value !== '') {
+                        setProjectSearchText('')
+                        handleDrawerClose()
+                        onProjectSearch(
+                          (event.target as HTMLInputElement).value,
+                        )
                       }
-                    }}
-                  />
-                </div>
+                    }
+                  }}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <IconSvg icon="searchOutlined" />
+                      </InputAdornment>
+                    ),
+                  }}
+                />
                 <div className="linkList" onClick={handleDrawerClose}>
                   <a
                     className="SRC-whiteText"
@@ -544,30 +557,35 @@ export function SynapseNavDrawer({
             {selectedItem == NavItem.HELP && (
               <>
                 <div className="header">Help</div>
-                <div className="searchInputWithIcon">
-                  <IconSvg icon="searchOutlined" />
-                  <Form.Control
-                    type="search"
-                    placeholder="Search Synapse Documentation"
-                    value={docSiteSearchText}
-                    onChange={event => {
-                      setDocSiteSearchText(event.target.value)
-                    }}
-                    onKeyDown={(event: any) => {
-                      if (event.key === 'Enter') {
-                        if (event.target.value !== '') {
-                          window.open(
-                            `https://help.synapse.org/search.html?max=10&s=docs&q=${encodeURI(
-                              event.target.value,
-                            )}`,
-                          )
-                          setDocSiteSearchText('')
-                          handleDrawerClose()
-                        }
+                <TextField
+                  type="search"
+                  placeholder="Search Documentation"
+                  value={docSiteSearchText}
+                  onChange={event => {
+                    setDocSiteSearchText(event.target.value)
+                  }}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <IconSvg icon="searchOutlined" />
+                      </InputAdornment>
+                    ),
+                  }}
+                  onKeyDown={event => {
+                    if (event.key === 'Enter') {
+                      if ((event.target as HTMLInputElement).value !== '') {
+                        window.open(
+                          `https://help.synapse.org/search.html?max=10&s=docs&q=${encodeURI(
+                            (event.target as HTMLInputElement).value,
+                          )}`,
+                        )
+                        setDocSiteSearchText('')
+                        handleDrawerClose()
                       }
-                    }}
-                  />
-                </div>
+                    }
+                  }}
+                />
+
                 <div className="linkList" onClick={handleDrawerClose}>
                   <a
                     className="SRC-whiteText"

packages/synapse-react-client/src/components/SynapseTable/datasets/DatasetEditorVersionCell.tsx

@@ -1,7 +1,7 @@
+import { Select } from '@mui/material'
 import { EntityRef } from '@sage-bionetworks/synapse-types'
 import { CellContext } from '@tanstack/react-table'
-import { SyntheticEvent, useEffect } from 'react'
-import { Form } from 'react-bootstrap'
+import { useEffect } from 'react'
 import { useGetVersionsInfinite } from '../../../synapse-queries/index'
 import { DatasetItemsEditorTableData } from './DatasetItemsEditor'
 
@@ -47,17 +47,17 @@ export function DatasetEditorVersionCell(props: DatasetEditorVersionCellProps) {
   return (
     <div>
       {versions && versions.length > 0 && (
-        <Form.Control
-          role="listbox"
-          size="sm"
-          as="select"
+        <Select
+          native
+          fullWidth
           value={versionNumber}
-          onClick={(event: SyntheticEvent<HTMLSelectElement>) => {
+          sx={{ height: '30px' }}
+          onClick={event => {
             event.stopPropagation()
           }}
           onChange={event => {
             event.stopPropagation()
-            const version = parseInt(event.target.value)
+            const version = parseInt((event.target as HTMLInputElement).value)
             toggleSelection({
               entityId: entityId,
               versionNumber: version,
@@ -82,7 +82,7 @@ export function DatasetEditorVersionCell(props: DatasetEditorVersionCellProps) {
               </option>
             )
           })}
-        </Form.Control>
+        </Select>
       )}
     </div>
   )

packages/synapse-react-client/src/components/SynapseTable/datasets/DatasetItemsEditor.test.tsx

@@ -549,7 +549,7 @@ describe('Dataset Items Editor tests', () => {
     )
 
     // Call under test: select a different version
-    await user.selectOptions(await screen.findByRole('listbox'), '1')
+    await user.selectOptions(await screen.findByRole('combobox'), '1')
 
     // The version passed to the icons should now be v1
     await waitFor(() =>

packages/synapse-react-client/src/style/components/_markdown.scss

@@ -164,10 +164,6 @@
   margin-left: 185px;
 }
 
-.markdown span.bootstrap-4-backport a {
-  margin: 20px 20px 20px 0px;
-}
-
 .markdown details {
   cursor: pointer;
 }

packages/synapse-react-client/src/style/components/_synapse-nav-drawer.scss

@@ -40,8 +40,8 @@
   .synapseLogoNameContainer {
     padding: 25px 0px 16px 5px;
   }
-  .searchInputWithIcon {
-    padding-top: 30px;
+  .MuiTextField-root {
+    margin-top: 30px;
   }
   .header {
     font-size: 20px;