+
+
{totalProjectsCount > 0 ? (
<>
-
+
-
+
-
{selectedProjects.length === 0 ? (
-
+
+
+
-
- {tableTopArea}
-
- }
- bs5={
-
- {tableTopArea}
-
- }
- />
+
+ {tableTopArea}
+
@@ -253,11 +198,7 @@ function DashApiError() {
const { t } = useTranslation()
return (
-
+
e.preventDefault()}
- bs3Props={{ horizontal: true }}
{...props}
>
-
+
-
-
-
-
-
- handleEditTag(e, tag._id)}
- >
- {t('edit')}
-
- handleDeleteTag(e, tag._id)}
- >
- {t('delete')}
-
-
-
- }
- bs3={
-
-
-
+
+
+
+
+ handleEditTag(e, tag._id)}
+ >
+ {t('edit')}
+
+ handleDeleteTag(e, tag._id)}
+ >
+ {t('delete')}
+
+
+
)
})}
diff --git a/services/web/frontend/js/features/project-list/components/sort/with-content.tsx b/services/web/frontend/js/features/project-list/components/sort/with-content.tsx
index 88226f649c..a76d746a32 100644
--- a/services/web/frontend/js/features/project-list/components/sort/with-content.tsx
+++ b/services/web/frontend/js/features/project-list/components/sort/with-content.tsx
@@ -1,6 +1,5 @@
import { useTranslation } from 'react-i18next'
import { Sort } from '../../../../../../types/project/dashboard/api'
-import { bsVersion } from '@/features/utils/bootstrap-5'
type SortBtnOwnProps = {
column: string
@@ -28,9 +27,7 @@ function withContent(
if (column === sort.by) {
iconType =
- sort.order === 'asc'
- ? bsVersion({ bs5: 'arrow_upward_alt', bs3: 'caret-up' })
- : bsVersion({ bs5: 'arrow_downward_alt', bs3: 'caret-down' })
+ sort.order === 'asc' ? 'arrow_upward_alt' : 'arrow_downward_alt'
screenReaderText = t('reverse_x_sort_order', { x: text })
}
diff --git a/services/web/frontend/js/features/project-list/components/survey-widget.tsx b/services/web/frontend/js/features/project-list/components/survey-widget.tsx
index 1695ec8d80..ae0847ef92 100644
--- a/services/web/frontend/js/features/project-list/components/survey-widget.tsx
+++ b/services/web/frontend/js/features/project-list/components/survey-widget.tsx
@@ -2,7 +2,6 @@ import usePersistedState from '../../../shared/hooks/use-persisted-state'
import getMeta from '../../../utils/meta'
import { useCallback } from 'react'
import Close from '@/shared/components/close'
-import { bsVersion } from '@/features/utils/bootstrap-5'
export default function SurveyWidget() {
const survey = getMeta('ol-survey')
@@ -22,13 +21,7 @@ export default function SurveyWidget() {
return (
-
-
- - - -
- - - -
-
+
-
+
+
{project.name}{' '}
-
-
+
-
+
-
+
-
+
-
diff --git a/services/web/frontend/js/features/project-list/components/table/project-list-table.tsx b/services/web/frontend/js/features/project-list/components/table/project-list-table.tsx
index 0a3302b343..ae1341270e 100644
--- a/services/web/frontend/js/features/project-list/components/table/project-list-table.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/project-list-table.tsx
@@ -1,6 +1,5 @@
import { useCallback, useRef, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
-import Icon from '../../../../shared/components/icon'
import ProjectListTableRow from './project-list-table-row'
import { useProjectListContext } from '../../context/project-list-context'
import useSort from '../../hooks/use-sort'
@@ -8,30 +7,16 @@ import withContent, { SortBtnProps } from '../sort/with-content'
import OLTable from '@/features/ui/components/ol/ol-table'
import OLFormCheckbox from '@/features/ui/components/ol/ol-form-checkbox'
import MaterialIcon from '@/shared/components/material-icon'
-import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
-import { bsVersion } from '@/features/utils/bootstrap-5'
-import classnames from 'classnames'
function SortBtn({ onClick, text, iconType, screenReaderText }: SortBtnProps) {
return (
)
}
@@ -66,26 +51,11 @@ function ProjectListTable() {
return (
-
- {t('projects_list')}
-
-
+ {t('projects_list')}
+
@@ -123,22 +89,13 @@ function ProjectListTable() {
/>
{t('date_and_owner')}
handleSort('lastUpdated')}
/>
-
+
{t('tags')}
diff --git a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/archive-projects-button.tsx b/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/archive-projects-button.tsx
index b60dd3402e..1085cbd198 100644
--- a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/archive-projects-button.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/archive-projects-button.tsx
@@ -7,7 +7,6 @@ import useIsMounted from '../../../../../../shared/hooks/use-is-mounted'
import { useProjectListContext } from '../../../../context/project-list-context'
import { archiveProject } from '../../../../util/api'
import { Project } from '../../../../../../../../types/project/dashboard/api'
-import { bsVersion } from '@/features/utils/bootstrap-5'
function ArchiveProjectsButton() {
const { selectedProjects, toggleSelectedProject, updateProjectViewData } =
@@ -50,7 +49,7 @@ function ArchiveProjectsButton() {
onClick={handleOpenModal}
variant="secondary"
accessibilityLabel={text}
- icon={bsVersion({ bs5: 'inbox', bs3: 'inbox' })}
+ icon="inbox"
/>
-
- {t('more')}
-
-
-
-
- }
- bs5={
-
-
- {t('more')}
-
-
-
-
-
-
-
-
- }
- />
+
+
+ {t('more')}
+
+
+
+
+
+
+
+
)
}
diff --git a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx b/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx
index 3bb86dce78..a67663f1f0 100644
--- a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx
@@ -1,15 +1,11 @@
import { sortBy } from 'lodash'
import { memo, useCallback } from 'react'
-import { Button, Dropdown as BS3Dropdown } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
-import ControlledDropdown from '../../../../../../shared/components/controlled-dropdown'
-import Icon from '../../../../../../shared/components/icon'
import MaterialIcon from '../../../../../../shared/components/material-icon'
import { useProjectListContext } from '../../../../context/project-list-context'
import useTag from '../../../../hooks/use-tag'
import { addProjectsToTag, removeProjectsFromTag } from '../../../../util/api'
import { getTagColor } from '../../../../util/tag'
-import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import {
Dropdown,
DropdownDivider,
@@ -79,140 +75,62 @@ function TagsDropdown() {
[selectedProjects]
)
- const containsSomeSelectedProjects = useCallback(
- tag => {
- for (const project of selectedProjects) {
- if (tag.project_ids?.includes(project.id)) {
- return true
- }
- }
- return false
- },
- [selectedProjects]
- )
-
return (
<>
-
-
+
+
+
+ {t('add_to_tag')}
+ {sortBy(tags, tag => tag.name?.toLowerCase()).map((tag, index) => (
+
+
+ containsAllSelectedProjects(tag)
+ ? handleRemoveTagFromSelectedProjects(e, tag._id)
+ : handleAddTagToSelectedProjects(e, tag._id)
+ }
+ aria-label={t('add_or_remove_project_from_tag', {
+ tagName: tag.name,
+ })}
+ as="button"
+ tabIndex={-1}
+ leadingIcon={
+ containsAllSelectedProjects(tag) ? (
+ 'check'
+ ) : (
+
+
+ ))}
+
+
-
-
-
- {t('add_to_tag')}
-
- {sortBy(tags, tag => tag.name?.toLowerCase()).map(tag => {
- return (
-
-
-
- )
- })}
-
-
-
-
-
-
- }
- bs5={
-
-
-
-
- {t('add_to_tag')}
- {sortBy(tags, tag => tag.name?.toLowerCase()).map(
- (tag, index) => (
-
-
- containsAllSelectedProjects(tag)
- ? handleRemoveTagFromSelectedProjects(e, tag._id)
- : handleAddTagToSelectedProjects(e, tag._id)
- }
- aria-label={t('add_or_remove_project_from_tag', {
- tagName: tag.name,
- })}
- as="button"
- tabIndex={-1}
- leadingIcon={
- containsAllSelectedProjects(tag) ? (
- 'check'
- ) : (
-
-
- )
- )}
-
-
- {t('create_new_tag')}
-
-
-
-
- }
- />
+ {t('create_new_tag')}
+
+
+
+
void
@@ -39,143 +35,63 @@ function TagsList({ onTagClick, onEditClick }: TagsListProps) {
return (
<>
-
- {sortBy(tags, ['name']).map((tag, index) => (
-
- handleClick(e as unknown as React.MouseEvent, tag)
- }
- className="projects-types-menu-item projects-types-menu-tag-item"
- afterNode={
-
- }
- >
-
- {selectedTagId === tag._id ? (
-
+ handleClick(e as unknown as React.MouseEvent, tag)}
+ leadingIcon={
+
+
- ))}
- {
- selectTag(UNCATEGORIZED_KEY)
- onTagClick?.()
- }}
+ }
+ trailingIcon={selectedTagId === tag._id ? 'check' : undefined}
+ active={selectedTagId === tag._id}
>
- {selectedTagId === UNCATEGORIZED_KEY ? (
-
- {
- openCreateTagModal()
- onTagClick?.()
+
+ {
+ e.stopPropagation()
+ handleManageTag(e, tag._id)
}}
- className="projects-types-menu-item"
+ aria-label={t('edit_tag')}
>
-
-
-
- }
- bs5={
- <>
- {sortBy(tags, ['name']).map((tag, index) => (
-
-
- handleClick(e as unknown as React.MouseEvent, tag)
- }
- leadingIcon={
-
-
- {
- e.stopPropagation()
- handleManageTag(e, tag._id)
- }}
- aria-label={t('edit_tag')}
- >
-
-
- ))}
-
- selectTag(UNCATEGORIZED_KEY)}
- trailingIcon={
- selectedTagId === UNCATEGORIZED_KEY ? 'check' : undefined
- }
- active={selectedTagId === UNCATEGORIZED_KEY}
- >
- {t('uncategorized')} ({untaggedProjectsCount})
-
-
-
-
- {t('new_tag')}
-
-
-
- }
- />
+
+ selectTag(UNCATEGORIZED_KEY)}
+ trailingIcon={
+ selectedTagId === UNCATEGORIZED_KEY ? 'check' : undefined
+ }
+ active={selectedTagId === UNCATEGORIZED_KEY}
+ >
+ {t('uncategorized')} ({untaggedProjectsCount})
+
+
+
+
+ {t('new_tag')}
+
+
+
) => {
- if (e.code === 'Enter') {
- handleClick()
- } else if (e.code === 'Space') {
- handleClick()
-
- // prevent page down when pressing space
- e.preventDefault()
- }
- },
- [handleClick]
- )
-
const handleDropdownItemClick = useCallback(
(
e: React.MouseEvent,
@@ -96,15 +70,13 @@ function WelcomeMessageCreateNewProjectDropdown({
// prevent firing the main dropdown onClick event
e.stopPropagation()
- setShowDropdown(false)
-
sendMB('welcome-page-create-first-project-click', {
dropdownOpen: true,
dropdownMenu: dropdownMenuEvent,
})
setActiveModal(modalVariant)
},
- [setActiveModal, setShowDropdown]
+ [setActiveModal]
)
const handlePortalTemplateClick = useCallback(
@@ -112,187 +84,91 @@ function WelcomeMessageCreateNewProjectDropdown({
// prevent firing the main dropdown onClick event
e.stopPropagation()
- setShowDropdown(false)
-
sendMB('welcome-page-create-first-project-click', {
dropdownMenu: 'institution-template',
dropdownOpen: true,
institutionTemplateName,
})
},
- [setShowDropdown]
+ []
)
return (
-
-
-
-
+ {t('blank_project')}
+
+
+
+
+ handleDropdownItemClick(e, 'example_project', 'example-project')
+ }
+ tabIndex={-1}
+ >
+ {t('example_project')}
+
+
+
+
+ handleDropdownItemClick(e, 'upload_project', 'upload-project')
+ }
+ tabIndex={-1}
+ >
+ {t('upload_project')}
+
+
+ {isOverleaf && (
+
+
+ handleDropdownItemClick(
+ e,
+ 'import_from_github',
+ 'import-from-github'
+ )
+ }
+ tabIndex={-1}
+ >
+ {t('import_from_github')}
+
+
+ )}
+ {(portalTemplates?.length ?? 0) > 0 ? (
+ <>
+
- handleDropdownItemClick(e, 'blank_project', 'blank-project')
- }
- tabIndex={-1}
+ key={`portal-template-${index}`}
+ onClick={e => handlePortalTemplateClick(e, portalTemplate.name)}
+ href={`${portalTemplate.url}#templates`}
>
- {t('blank_project')}
+ {portalTemplate.name}
-
-
-
- handleDropdownItemClick(
- e,
- 'example_project',
- 'example-project'
- )
- }
- tabIndex={-1}
- >
- {t('example_project')}
-
-
-
-
- handleDropdownItemClick(e, 'upload_project', 'upload-project')
- }
- tabIndex={-1}
- >
- {t('upload_project')}
-
-
- {isOverleaf && (
-
-
- handleDropdownItemClick(
- e,
- 'import_from_github',
- 'import-from-github'
- )
- }
- tabIndex={-1}
- >
- {t('import_from_github')}
-
-
- )}
- {(portalTemplates?.length ?? 0) > 0 ? (
- <>
-
- handlePortalTemplateClick(e, portalTemplate.name)
- }
- href={`${portalTemplate.url}#templates`}
- >
- {portalTemplate.name}
-
- ))}
-
- ) : null}
-
-
- }
- />
+ ))}
+
+ ) : null}
+
+
)
}
diff --git a/services/web/test/frontend/features/project-list/components/new-project-button.test.tsx b/services/web/test/frontend/features/project-list/components/new-project-button.test.tsx
index 1629655973..93c7a68e3a 100644
--- a/services/web/test/frontend/features/project-list/components/new-project-button.test.tsx
+++ b/services/web/test/frontend/features/project-list/components/new-project-button.test.tsx
@@ -117,7 +117,7 @@ describe('
{survey.preText}
diff --git a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/compile-and-download-project-pdf-button.tsx b/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/compile-and-download-project-pdf-button.tsx
index feb5ecccbe..2225945465 100644
--- a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/compile-and-download-project-pdf-button.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/compile-and-download-project-pdf-button.tsx
@@ -1,7 +1,6 @@
import { useTranslation } from 'react-i18next'
import { memo, useCallback, useState } from 'react'
import { Project } from '../../../../../../../../types/project/dashboard/api'
-import Icon from '../../../../../../shared/components/icon'
import * as eventTracking from '../../../../../../infrastructure/event-tracking'
import { useLocation } from '../../../../../../shared/hooks/use-location'
import useAbortController from '../../../../../../shared/hooks/use-abort-controller'
@@ -15,7 +14,6 @@ import OLModal, {
OLModalHeader,
OLModalTitle,
} from '@/features/ui/components/ol/ol-modal'
-import { bsVersion } from '@/features/utils/bootstrap-5'
import OLIconButton from '@/features/ui/components/ol/ol-icon-button'
type CompileAndDownloadProjectPDFButtonProps = {
@@ -159,13 +157,7 @@ const CompileAndDownloadProjectPDFButtonTooltip = memo(
loadingLabel={text}
isLoading={pendingCompile}
className="action-btn"
- icon={bsVersion({ bs5: 'picture_as_pdf', bs3: 'file-pdf-o' })}
- bs3Props={{
- fw: true,
- loading: pendingCompile ? (
- (null)
-
- const handleLabelClick = (e: React.MouseEvent) => {
- // trigger the click on the button only when the event
- // is triggered from the wrapper element
- if (e.target === tagLabelRef.current) {
- tagBtnRef.current?.click()
- }
- }
const handleRemoveTag = useCallback(
async (tagId: string, projectId: string) => {
@@ -55,66 +41,25 @@ function InlineTag({ tag, projectId }: InlineTagProps) {
},
[removeProjectFromTagInView]
)
- const handleCloseMouseOver = () => setClassNames('tag-label-close-hover')
- const handleCloseMouseOut = () => setClassNames('')
-
return (
-
-
- {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
-
-
+
+
+
+
+
+
+ handleDropdownItemClick(e, 'blank_project', 'blank-project')
+ }
+ tabIndex={-1}
>
-
-
- }
- bs5={
- {t('create_a_new_project')}
- - {showDropdown && ( -
- {showDropdown && (
-
-
-
-
- {isOverleaf && (
-
- )}
- {portalTemplates.length > 0 ? (
- <>
-
-
- )}
- -
- {t('institution_templates')}
-
- {portalTemplates?.map((portalTemplate, index) => (
-
- handlePortalTemplateClick(e, portalTemplate.name)
- }
- >
- {portalTemplate.name}
-
- ))}
-
- ) : null}
-