Chore/cleanup tag color feature falg (#9959)

Removes the flag for tag type colors.

frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx

@@ -175,10 +175,8 @@ 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} />
@@ -190,32 +188,12 @@ const TagItem: FC<ITagItemProps> = ({ tag, onClick }) => {
             <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;
-
-    return (
-        <StyledTag
-            key={tagFullText}
-            label={displayText}
-            size='small'
-            onClick={() => onClick(tag)}
-            sx={{ cursor: 'pointer' }}
-            title={isOverflowing ? tagFullText : undefined}
-        />
-    );
 };
 
 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
-                        )}
                     </Box>
                 );
             })}
@@ -238,9 +212,7 @@ const RestTags: FC<{
             <CustomTagButton
                 sx={{
                     cursor: 'initial',
-                    ...(isTagTypeColorEnabled && {
                     borderRadius: (theme) => theme.spacing(2),
-                    }),
                 }}
             >
                 {tags.length} more...

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/TagRow.tsx

@@ -162,17 +162,11 @@ 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' }} />
@@ -182,38 +176,8 @@ const TagItem = ({ tag, canUpdateTags, onTagRemove }: ITagItemProps) => {
     return (
         <Tooltip key={tagLabel} title={isOverflowing ? tagLabel : ''} arrow>
             <span>
-                    <Tag
+                <Tag tag={tag} onDelete={onDelete} deleteIcon={deleteIcon} />
-                        tag={tag}
-                        onDelete={onDelete}
-                        deleteIcon={deleteIcon}
-                    />
             </span>
         </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}
-        />
-    );
 };

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>

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>

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,10 +99,7 @@ const TagTypeForm: React.FC<ITagTypeForm> = ({
                     value={tagDesc}
                     onChange={(e) => setTagDesc(e.target.value)}
                 />
-                <ConditionallyRender
+
-                    condition={isTagTypeColorEnabled}
-                    show={
-                        <>
                 <Typography variant='body2'>
                     Tag color
                     <TagTypeColorPicker
@@ -113,9 +107,6 @@ const TagTypeForm: React.FC<ITagTypeForm> = ({
                         onChange={setColor}
                     />
                 </Typography>
-                        </>
-                    }
-                />
             </StyledContainer>
             <StyledButtonContainer>
                 {children}

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,
     };
 };
 

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={
+                                condition={Boolean(color)}
-                                    isTagTypeColorEnabled && Boolean(color)
-                                }
                                 show={<StyledColorDot $color={color} />}
                             />
                             <LinkCell
@@ -162,7 +159,7 @@ export const TagTypeList = () => {
                 disableSortBy: true,
             },
         ],
-        [navigate, isTagTypeColorEnabled],
+        [navigate],
     );
 
     const initialState = useMemo(

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;

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,

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,