diff --git a/server-ce/test/history.spec.ts b/server-ce/test/history.spec.ts
index 6c55a25311..cc1950f240 100644
--- a/server-ce/test/history.spec.ts
+++ b/server-ce/test/history.spec.ts
@@ -29,10 +29,7 @@ describe('History', function () {
cy.log(`download version ${JSON.stringify(name)}`)
cy.findByText('Labels').click()
cy.findByText(name)
- .parent()
- .parent()
- .parent()
- .parent()
+ .closest('[data-testid="history-version-details"]')
.within(() => {
cy.get('.history-version-dropdown-menu-btn').click()
cy.findByText('Download this version').click()
diff --git a/services/web/frontend/js/features/clone-project-modal/components/clone-project-tag.tsx b/services/web/frontend/js/features/clone-project-modal/components/clone-project-tag.tsx
index f32243d7c8..d486d97b28 100644
--- a/services/web/frontend/js/features/clone-project-modal/components/clone-project-tag.tsx
+++ b/services/web/frontend/js/features/clone-project-modal/components/clone-project-tag.tsx
@@ -1,31 +1,53 @@
import { FC } from 'react'
-import { Tag } from '../../../../../app/src/Features/Tags/types'
+import { Tag as TagType } from '../../../../../app/src/Features/Tags/types'
import { getTagColor } from '@/features/project-list/util/tag'
import Icon from '@/shared/components/icon'
import { useTranslation } from 'react-i18next'
+import Tag from '@/features/ui/components/bootstrap-5/tag'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
export const CloneProjectTag: FC<{
- tag: Tag
- removeTag: (tag: Tag) => void
+ tag: TagType
+ removeTag: (tag: TagType) => void
}> = ({ tag, removeTag }) => {
const { t } = useTranslation()
return (
-
-
-
-
- {' '}
- {tag.name}
-
-
-
+
+
+
+
+ {' '}
+ {tag.name}
+
+
+
+ }
+ bs5={
+
+ }
+ closeBtnProps={{
+ onClick: () => removeTag(tag),
+ }}
+ className="ms-2 mb-2"
+ >
+ {tag.name}
+
+ }
+ />
)
}
diff --git a/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx b/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx
index 767cf3e2bf..91541ec832 100644
--- a/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx
@@ -1,11 +1,13 @@
import { useCallback, useState, useRef } from 'react'
import { useTranslation } from 'react-i18next'
-import { Tag } from '../../../../../../../app/src/Features/Tags/types'
+import { Tag as TagType } from '../../../../../../../app/src/Features/Tags/types'
import Icon from '../../../../../shared/components/icon'
import { useProjectListContext } from '../../../context/project-list-context'
import { removeProjectFromTag } from '../../../util/api'
import classnames from 'classnames'
import { getTagColor } from '../../../util/tag'
+import Tag from '@/features/ui/components/bootstrap-5/tag'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
type InlineTagsProps = {
projectId: string
@@ -27,7 +29,7 @@ function InlineTags({ projectId, ...props }: InlineTagsProps) {
}
type InlineTagProps = {
- tag: Tag
+ tag: TagType
projectId: string
}
@@ -57,38 +59,62 @@ function InlineTag({ tag, projectId }: InlineTagProps) {
const handleCloseMouseOut = () => setClassNames('')
return (
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-
-
- {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
-
-
+
+ {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
+
+
+ }
+ bs5={
+
+ }
+ contentProps={{
+ 'aria-label': t('select_tag', { tagName: tag.name }),
+ onClick: () => selectTag(tag._id),
+ }}
+ closeBtnProps={{
+ onClick: () => handleRemoveTag(tag._id, projectId),
+ }}
+ className="ms-2"
+ >
+ {tag.name}
+
+ }
+ />
)
}
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/tag.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/tag.tsx
index 38cb2962d3..4663591f40 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/tag.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/tag.tsx
@@ -1,13 +1,14 @@
import { useTranslation } from 'react-i18next'
-import { Badge } from 'react-bootstrap-5'
+import { Badge, BadgeProps } from 'react-bootstrap-5'
import MaterialIcon from '@/shared/components/material-icon'
import { MergeAndOverride } from '../../../../../../types/utils'
import classnames from 'classnames'
type TagProps = MergeAndOverride<
- React.ComponentProps,
+ BadgeProps,
{
prepend?: React.ReactNode
+ contentProps?: React.ComponentProps<'button'>
closeBtnProps?: React.ComponentProps<'button'>
}
>
@@ -15,16 +16,35 @@ type TagProps = MergeAndOverride<
function Tag({
prepend,
children,
+ contentProps,
closeBtnProps,
className,
...rest
}: TagProps) {
const { t } = useTranslation()
- return (
-
+ const content = (
+ <>
{prepend && {prepend}}
{children}
+ >
+ )
+
+ return (
+
+ {contentProps?.onClick ? (
+
+ ) : (
+
+ {content}
+
+ )}
{closeBtnProps && (