Chore/cleanup tag color feature falg (#9959)

Removes the flag for tag type colors.
2025-06-27 01:19:00 +02:00 · 2025-05-12 13:54:38 +02:00 · 2025-05-12 13:54:38 +02:00 · d4d6e658ff
commit d4d6e658ff
parent 6efbe2d545
10 changed files with 32 additions and 124 deletions
--- 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<ITagItemProps> = ({ tag, onClick }) => {
-    const isTagTypeColorEnabled = useUiFlag('tagTypeColor');
    const tagFullText = formatTag(tag);

-    if (isTagTypeColorEnabled) {
-        const tagComponent = (
-            <Box onClick={() => onClick(tag)} sx={{ cursor: 'pointer' }}>
-                <Tag tag={tag} maxLength={30} />
-            </Box>
-        );
-
-        return (
-            <HtmlTooltip key={tagFullText} title={tagFullText} arrow>
-                <span>{tagComponent}</span>
-            </HtmlTooltip>
-        );
-    }
-
-    // For non-color tags, use the StyledTag approach
-    const isOverflowing = tagFullText.length > 30;
-    const displayText = isOverflowing
-        ? `${tagFullText.substring(0, 30)}...`
-        : tagFullText;
+    const tagComponent = (
+        <Box onClick={() => onClick(tag)} sx={{ cursor: 'pointer' }}>
+            <Tag tag={tag} maxLength={30} />
+        </Box>
+    );

    return (
-        <StyledTag
-            key={tagFullText}
-            label={displayText}
-            size='small'
-            onClick={() => onClick(tag)}
-            sx={{ cursor: 'pointer' }}
-            title={isOverflowing ? tagFullText : undefined}
-        />
+        <HtmlTooltip key={tagFullText} title={tagFullText} arrow>
+            <span>{tagComponent}</span>
+        </HtmlTooltip>
    );
 };

@ -214,8 +194,6 @@ const RestTags: FC<{
    tags: TagSchema[];
    onClick: (tag: string) => void;
 }> = ({ tags, onClick }) => {
-    const isTagTypeColorEnabled = useUiFlag('tagTypeColor');
-
    return (
        <HtmlTooltip
            title={tags.map((tag) => {
@ -226,11 +204,7 @@ const RestTags: FC<{
                        onClick={() => onClick(formattedTag)}
                        key={formattedTag}
                    >
-                        {isTagTypeColorEnabled ? (
-                            <Tag tag={tag} maxLength={30} />
-                        ) : (
-                            formattedTag
-                        )}
+                        <Tag tag={tag} maxLength={30} />
                    </Box>
                );
            })}
@ -238,9 +212,7 @@ const RestTags: FC<{
            <CustomTagButton
                sx={{
                    cursor: 'initial',
-                    ...(isTagTypeColorEnabled && {
-                        borderRadius: (theme) => theme.spacing(2),
-                    }),
+                    borderRadius: (theme) => theme.spacing(2),
                }}
            >
                {tags.length} more...
--- 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 = (
-        <Tooltip title='Remove tag' arrow>
-            <DeleteTagIcon />
-        </Tooltip>
-    );
+
    const onDelete = canUpdateTags ? () => onTagRemove(tag) : undefined;

-    if (isTagTypeColorEnabled) {
-        const deleteIcon = (
-            <Tooltip title='Remove tag' arrow>
-                <ClearIcon sx={{ height: '20px', width: '20px' }} />
-            </Tooltip>
-        );
-
-        return (
-            <Tooltip key={tagLabel} title={isOverflowing ? tagLabel : ''} arrow>
-                <span>
-                    <Tag
-                        tag={tag}
-                        onDelete={onDelete}
-                        deleteIcon={deleteIcon}
-                    />
-                </span>
-            </Tooltip>
-        );
-    }
+    const deleteIcon = (
+        <Tooltip title='Remove tag' arrow>
+            <ClearIcon sx={{ height: '20px', width: '20px' }} />
+        </Tooltip>
+    );

    return (
-        <StyledTag
-            key={tagLabel}
-            label={
-                <Tooltip
-                    key={tagLabel}
-                    title={isOverflowing ? tagLabel : ''}
-                    arrow
-                >
-                    <span>
-                        {tagLabel.substring(0, 25)}
-                        {isOverflowing ? (
-                            <StyledEllipsis>…</StyledEllipsis>
-                        ) : (
-                            ''
-                        )}
-                    </span>
-                </Tooltip>
-            }
-            size='small'
-            deleteIcon={deleteIcon}
-            onDelete={onDelete}
-        />
+        <Tooltip key={tagLabel} title={isOverflowing ? tagLabel : ''} arrow>
+            <span>
+                <Tag tag={tag} onDelete={onDelete} deleteIcon={deleteIcon} />
+            </span>
+        </Tooltip>
    );
 };
--- 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}
            >
                <CreateButton name='type' permission={CREATE_TAG_TYPE} />
            </TagTypeForm>
--- 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}
            >
                <UpdateButton permission={UPDATE_TAG_TYPE} />
            </TagForm>
--- 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<ITagTypeForm> = ({
    mode,
    validateNameUniqueness,
    clearErrors,
-    isTagTypeColorEnabled,
 }) => {
    return (
        <StyledForm onSubmit={handleSubmit}>
@ -102,20 +99,14 @@ const TagTypeForm: React.FC<ITagTypeForm> = ({
                    value={tagDesc}
                    onChange={(e) => setTagDesc(e.target.value)}
                />
-                <ConditionallyRender
-                    condition={isTagTypeColorEnabled}
-                    show={
-                        <>
-                            <Typography variant='body2'>
-                                Tag color
-                                <TagTypeColorPicker
-                                    selectedColor={color}
-                                    onChange={setColor}
-                                />
-                            </Typography>
-                        </>
-                    }
-                />
+
+                <Typography variant='body2'>
+                    Tag color
+                    <TagTypeColorPicker
+                        selectedColor={color}
+                        onChange={setColor}
+                    />
+                </Typography>
            </StyledContainer>
            <StyledButtonContainer>
                {children}
--- 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,
    };
 };

--- 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 (
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <ConditionallyRender
-                                condition={
-                                    isTagTypeColorEnabled && Boolean(color)
-                                }
+                                condition={Boolean(color)}
                                show={<StyledColorDot $color={color} />}
                            />
                            <LinkCell
@ -162,7 +159,7 @@ export const TagTypeList = () => {
                disableSortBy: true,
            },
        ],
-        [navigate, isTagTypeColorEnabled],
+        [navigate],
    );

    const initialState = useMemo(
--- 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;
--- 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,
--- 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,