diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelTags/FeatureOverviewSidePanelTags.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelTags/FeatureOverviewSidePanelTags.tsx index 00206d4137..6a91257fd2 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelTags/FeatureOverviewSidePanelTags.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelTags/FeatureOverviewSidePanelTags.tsx @@ -1,6 +1,6 @@ import type { IFeatureToggle } from 'interfaces/featureToggle'; import { useContext, useState } from 'react'; -import { Button, Divider, styled } from '@mui/material'; +import { Button, Chip, Divider, styled } from '@mui/material'; import useFeatureTags from 'hooks/api/getters/useFeatureTags/useFeatureTags'; import Add from '@mui/icons-material/Add'; import Cancel from '@mui/icons-material/Cancel'; @@ -13,7 +13,6 @@ import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi'; import useToast from 'hooks/useToast'; import { formatUnknownError } from 'utils/formatUnknownError'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { Tag } from 'component/common/Tag/Tag'; const StyledContainer = styled('div')(({ theme }) => ({ display: 'flex', @@ -27,6 +26,10 @@ const StyledTagContainer = styled('div')(({ theme }) => ({ flexWrap: 'wrap', })); +const StyledChip = styled(Chip)(({ theme }) => ({ + fontSize: theme.fontSizes.smallBody, +})); + const StyledDivider = styled(Divider)(({ theme }) => ({ margin: theme.spacing(3), borderStyle: 'dashed', @@ -79,21 +82,24 @@ export const FeatureOverviewSidePanelTags = ({ {header} - {tags.map((tag) => ( - { - setShowDelDialog(true); - setSelectedTag(tag); - } - : undefined - } - deleteIcon={} - /> - ))} + {tags.map((tag) => { + const tagLabel = `${tag.type}:${tag.value}`; + return ( + } + onDelete={ + canUpdateTags + ? () => { + setShowDelDialog(true); + setSelectedTag(tag); + } + : undefined + } + /> + ); + })} { + setShowDelDialog(false); + setSelectedTag(undefined); + }} onClick={() => { setShowDelDialog(false); handleDelete(); setSelectedTag(undefined); }} - onClose={() => { - setShowDelDialog(false); - setSelectedTag(undefined); - }} - title='Delete tag' + title='Delete tag?' > You are about to delete tag:{' '} diff --git a/frontend/src/component/project/ProjectCard/ProjectCard.tsx b/frontend/src/component/project/ProjectCard/ProjectCard.tsx index 9d9464d7c2..afa3caba06 100644 --- a/frontend/src/component/project/ProjectCard/ProjectCard.tsx +++ b/frontend/src/component/project/ProjectCard/ProjectCard.tsx @@ -8,7 +8,7 @@ import { ProjectCardFooter } from './ProjectCardFooter/ProjectCardFooter'; import { ProjectModeBadge } from './ProjectModeBadge/ProjectModeBadge'; import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon'; import { FavoriteAction } from './FavoriteAction/FavoriteAction'; -import { Box, styled, Chip, type ChipProps } from '@mui/material'; +import { Box, styled } from '@mui/material'; import { flexColumn } from 'themes/themeStyles'; import { TimeAgo } from 'component/common/TimeAgo/TimeAgo'; import { ProjectLastSeen } from './ProjectLastSeen/ProjectLastSeen'; @@ -18,7 +18,6 @@ import { ProjectMembers } from './ProjectCardFooter/ProjectMembers/ProjectMember import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId'; import type { ProjectSchema } from 'openapi'; -import type { ITag } from 'interfaces/tags'; const StyledUpdated = styled('span')(({ theme }) => ({ color: theme.palette.text.secondary, @@ -46,30 +45,7 @@ const StyledHeader = styled('div')(({ theme }) => ({ alignItems: 'center', })); -const StyledTags = styled('div')(({ theme }) => ({ - display: 'flex', - flexWrap: 'wrap', - gap: theme.spacing(0.5), - marginTop: theme.spacing(1), -})); - -interface StyledTagProps extends ChipProps { - tagColor?: string; -} - -const StyledTag = styled(Chip)(({ theme, tagColor }) => ({ - backgroundColor: tagColor || theme.palette.primary.main, - color: theme.palette.primary.contrastText, - '& .MuiChip-label': { - padding: theme.spacing(0.5, 1), - fontSize: theme.fontSizes.smallerBody, - }, -})); - -interface ProjectCardProps extends ProjectSchema { - onHover?: () => void; - tags?: ITag[]; -} +type ProjectCardProps = ProjectSchema & { onHover?: () => void }; export const ProjectCard = ({ name, @@ -84,7 +60,6 @@ export const ProjectCard = ({ createdAt, lastUpdatedAt, lastReportedFlagUsage, - tags = [], }: ProjectCardProps) => { const { searchQuery } = useSearchHighlightContext(); @@ -128,21 +103,6 @@ export const ProjectCard = ({ - 0} - show={ - - {tags.map((tag: ITag) => ( - - ))} - - } - />