From d4d6e658ffacefd05d06f870d0e69e6f47eb70db Mon Sep 17 00:00:00 2001 From: Fredrik Strand Oseberg Date: Mon, 12 May 2025 13:54:38 +0200 Subject: [PATCH] Chore/cleanup tag color feature falg (#9959) Removes the flag for tag type colors. --- .../FeatureOverviewCell.tsx | 48 ++++----------- .../FeatureOverviewMetaData/TagRow.tsx | 58 ++++--------------- .../tags/CreateTagType/CreateTagType.tsx | 2 - .../tags/EditTagType/EditTagType.tsx | 2 - .../tags/TagTypeForm/TagTypeForm.tsx | 25 +++----- .../tags/TagTypeForm/useTagTypeForm.ts | 7 +-- .../tags/TagTypeList/TagTypeList.tsx | 7 +-- frontend/src/interfaces/uiConfig.ts | 1 - src/lib/types/experimental.ts | 5 -- src/server-dev.ts | 1 - 10 files changed, 32 insertions(+), 124 deletions(-) diff --git a/frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx b/frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx index 2a8c678cf2..999104ca86 100644 --- a/frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx +++ b/frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx @@ -175,38 +175,18 @@ interface ITagItemProps { } const TagItem: FC = ({ tag, onClick }) => { - const isTagTypeColorEnabled = useUiFlag('tagTypeColor'); const tagFullText = formatTag(tag); - if (isTagTypeColorEnabled) { - const tagComponent = ( - onClick(tag)} sx={{ cursor: 'pointer' }}> - - - ); - - return ( - - {tagComponent} - - ); - } - - // For non-color tags, use the StyledTag approach - const isOverflowing = tagFullText.length > 30; - const displayText = isOverflowing - ? `${tagFullText.substring(0, 30)}...` - : tagFullText; + const tagComponent = ( + onClick(tag)} sx={{ cursor: 'pointer' }}> + + + ); return ( - onClick(tag)} - sx={{ cursor: 'pointer' }} - title={isOverflowing ? tagFullText : undefined} - /> + + {tagComponent} + ); }; @@ -214,8 +194,6 @@ const RestTags: FC<{ tags: TagSchema[]; onClick: (tag: string) => void; }> = ({ tags, onClick }) => { - const isTagTypeColorEnabled = useUiFlag('tagTypeColor'); - return ( { @@ -226,11 +204,7 @@ const RestTags: FC<{ onClick={() => onClick(formattedTag)} key={formattedTag} > - {isTagTypeColorEnabled ? ( - - ) : ( - formattedTag - )} + ); })} @@ -238,9 +212,7 @@ const RestTags: FC<{ theme.spacing(2), - }), + borderRadius: (theme) => theme.spacing(2), }} > {tags.length} more... diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/TagRow.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/TagRow.tsx index 6d12af00c7..aa4c4ccffd 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/TagRow.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/TagRow.tsx @@ -162,58 +162,22 @@ interface ITagItemProps { } const TagItem = ({ tag, canUpdateTags, onTagRemove }: ITagItemProps) => { - const isTagTypeColorEnabled = useUiFlag('tagTypeColor'); const tagLabel = formatTag(tag); const isOverflowing = tagLabel.length > 25; - const deleteIcon = ( - - - - ); + const onDelete = canUpdateTags ? () => onTagRemove(tag) : undefined; - if (isTagTypeColorEnabled) { - const deleteIcon = ( - - - - ); - - return ( - - - - - - ); - } + const deleteIcon = ( + + + + ); return ( - - - {tagLabel.substring(0, 25)} - {isOverflowing ? ( - … - ) : ( - '' - )} - - - } - size='small' - deleteIcon={deleteIcon} - onDelete={onDelete} - /> + + + + + ); }; diff --git a/frontend/src/component/tags/CreateTagType/CreateTagType.tsx b/frontend/src/component/tags/CreateTagType/CreateTagType.tsx index 7c608eb056..87477cfdb4 100644 --- a/frontend/src/component/tags/CreateTagType/CreateTagType.tsx +++ b/frontend/src/component/tags/CreateTagType/CreateTagType.tsx @@ -25,7 +25,6 @@ const CreateTagType = () => { validateNameUniqueness, errors, clearErrors, - isTagTypeColorEnabled, } = useTagTypeForm(); const { createTag, loading } = useTagTypesApi(); @@ -81,7 +80,6 @@ const CreateTagType = () => { mode='Create' clearErrors={clearErrors} validateNameUniqueness={validateNameUniqueness} - isTagTypeColorEnabled={isTagTypeColorEnabled} > diff --git a/frontend/src/component/tags/EditTagType/EditTagType.tsx b/frontend/src/component/tags/EditTagType/EditTagType.tsx index c4eb363a40..94018859b4 100644 --- a/frontend/src/component/tags/EditTagType/EditTagType.tsx +++ b/frontend/src/component/tags/EditTagType/EditTagType.tsx @@ -28,7 +28,6 @@ const EditTagType = () => { getTagPayload, errors, clearErrors, - isTagTypeColorEnabled, } = useTagTypeForm(tagType?.name, tagType?.description, tagType?.color); const { updateTagType, loading } = useTagTypesApi(); @@ -82,7 +81,6 @@ const EditTagType = () => { setColor={setColor} mode='Edit' clearErrors={clearErrors} - isTagTypeColorEnabled={isTagTypeColorEnabled} > diff --git a/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx b/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx index 65d73955d0..9658a21b4c 100644 --- a/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx +++ b/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx @@ -4,7 +4,6 @@ import { TagTypeColorPicker } from './TagTypeColorPicker'; import type React from 'react'; import { trim } from 'component/common/util'; import { EDIT } from 'constants/misc'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; interface ITagTypeForm { tagName: string; @@ -19,7 +18,6 @@ interface ITagTypeForm { mode: 'Create' | 'Edit'; clearErrors: () => void; validateNameUniqueness?: () => void; - isTagTypeColorEnabled: boolean; children?: React.ReactNode; } @@ -71,7 +69,6 @@ const TagTypeForm: React.FC = ({ mode, validateNameUniqueness, clearErrors, - isTagTypeColorEnabled, }) => { return ( @@ -102,20 +99,14 @@ const TagTypeForm: React.FC = ({ value={tagDesc} onChange={(e) => setTagDesc(e.target.value)} /> - - - Tag color - - - - } - /> + + + Tag color + + {children} diff --git a/frontend/src/component/tags/TagTypeForm/useTagTypeForm.ts b/frontend/src/component/tags/TagTypeForm/useTagTypeForm.ts index 482ffeb006..75d5a4417f 100644 --- a/frontend/src/component/tags/TagTypeForm/useTagTypeForm.ts +++ b/frontend/src/component/tags/TagTypeForm/useTagTypeForm.ts @@ -19,7 +19,6 @@ const useTagTypeForm = ( const [color, setColor] = useState(initialColor); const [errors, setErrors] = useState({}); const { validateTagName } = useTagTypesApi(); - const isTagTypeColorEnabled = Boolean(useUiFlag('tagTypeColor')); useEffect(() => { setTagName(initialTagName); @@ -37,12 +36,9 @@ const useTagTypeForm = ( const payload: TagTypePayload = { name: tagName, description: tagDesc, + color: color, }; - if (isTagTypeColorEnabled && color) { - payload.color = color; - } - return payload; }; @@ -85,7 +81,6 @@ const useTagTypeForm = ( clearErrors, validateNameUniqueness, errors, - isTagTypeColorEnabled, }; }; diff --git a/frontend/src/component/tags/TagTypeList/TagTypeList.tsx b/frontend/src/component/tags/TagTypeList/TagTypeList.tsx index dfc9bfcb27..7b23c83281 100644 --- a/frontend/src/component/tags/TagTypeList/TagTypeList.tsx +++ b/frontend/src/component/tags/TagTypeList/TagTypeList.tsx @@ -57,7 +57,6 @@ export const TagTypeList = () => { const { deleteTagType } = useTagTypesApi(); const { tagTypes, refetch, loading } = useTagTypes(); const { setToastData, setToastApiError } = useToast(); - const isTagTypeColorEnabled = Boolean(useUiFlag('tagTypeColor')); const data = useMemo(() => { if (loading) { @@ -105,9 +104,7 @@ export const TagTypeList = () => { return ( } /> { disableSortBy: true, }, ], - [navigate, isTagTypeColorEnabled], + [navigate], ); const initialState = useMemo( diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts index 10dbb2fa61..5a6d855674 100644 --- a/frontend/src/interfaces/uiConfig.ts +++ b/frontend/src/interfaces/uiConfig.ts @@ -88,7 +88,6 @@ export type UiFlags = { showUserDeviceCount?: boolean; consumptionModel?: boolean; edgeObservability?: boolean; - tagTypeColor?: boolean; addEditStrategy?: boolean; flagsReleaseManagementUI?: boolean; cleanupReminder?: boolean; diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts index 9f23d2c277..d1142ca3cf 100644 --- a/src/lib/types/experimental.ts +++ b/src/lib/types/experimental.ts @@ -58,7 +58,6 @@ export type IFlagKey = | 'consumptionModel' | 'teamsIntegrationChangeRequests' | 'edgeObservability' - | 'tagTypeColor' | 'addEditStrategy' | 'flagsOverviewSearch' | 'flagsReleaseManagementUI' @@ -280,10 +279,6 @@ const flags: IFlags = { process.env.EXPERIMENTAL_EDGE_OBSERVABILITY, false, ), - tagTypeColor: parseEnvVarBoolean( - process.env.UNLEASH_EXPERIMENTAL_TAG_TYPE_COLOR, - false, - ), addEditStrategy: parseEnvVarBoolean( process.env.UNLEASH_EXPERIMENTAL_ADD_EDIT_STRATEGY, false, diff --git a/src/server-dev.ts b/src/server-dev.ts index 5af332a5d7..58080c9823 100644 --- a/src/server-dev.ts +++ b/src/server-dev.ts @@ -52,7 +52,6 @@ process.nextTick(async () => { uniqueSdkTracking: true, filterExistingFlagNames: true, teamsIntegrationChangeRequests: true, - tagTypeColor: true, addEditStrategy: true, flagsOverviewSearch: true, cleanupReminder: true,