feat: new flag info box (#9308)

- updated spacing of elements
- modified header and "flag type" 
- added "collaborators"
- refactored tags

Co-authored-by: Thomas Heartman <thomas@getunleash.io>

frontend/src/component/feature/Dependencies/AddDependencyDialogue.tsx

@@ -90,7 +90,7 @@ export const AddDependencyDialogue = ({
     return (
         <Dialogue
             open={showDependencyDialogue}
-            title='Add parent feature dependency'
+            title='Add parent flag dependency'
             onClose={onClose}
             onClick={manageDependency}
             primaryButtonText={

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

@@ -17,7 +17,6 @@ import { useLastViewedFlags } from 'hooks/useLastViewedFlags';
 import { useUiFlag } from 'hooks/useUiFlag';
 import OldFeatureOverviewMetaData from './FeatureOverviewMetaData/OldFeatureOverviewMetaData';
 import { OldFeatureOverviewSidePanel } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/OldFeatureOverviewSidePanel';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { NewFeatureOverviewEnvironment } from './NewFeatureOverviewEnvironment/NewFeatureOverviewEnvironment';
 
 const StyledContainer = styled('div')(({ theme }) => ({
@@ -51,39 +50,37 @@ const FeatureOverview = () => {
         setLastViewed({ featureId, projectId });
     }, [featureId]);
     const [environmentId, setEnvironmentId] = useState('');
-
     const flagOverviewRedesign = useUiFlag('flagOverviewRedesign');
-    const FeatureOverviewMetaData = flagOverviewRedesign
-        ? NewFeatureOverviewMetaData
-        : OldFeatureOverviewMetaData;
-    const FeatureOverviewSidePanel = flagOverviewRedesign ? (
-        <NewFeatureOverviewSidePanel
-            environmentId={environmentId}
-            setEnvironmentId={setEnvironmentId}
-        />
-    ) : (
-        <OldFeatureOverviewSidePanel
-            hiddenEnvironments={hiddenEnvironments}
-            setHiddenEnvironments={setHiddenEnvironments}
-        />
-    );
 
     return (
         <StyledContainer>
             <div>
-                <FeatureOverviewMetaData />
+                {flagOverviewRedesign ? (
-                {FeatureOverviewSidePanel}
+                    <>
+                        <NewFeatureOverviewMetaData />
+                        <NewFeatureOverviewSidePanel
+                            environmentId={environmentId}
+                            setEnvironmentId={setEnvironmentId}
+                        />
+                    </>
+                ) : (
+                    <>
+                        <OldFeatureOverviewMetaData />
+                        <OldFeatureOverviewSidePanel
+                            hiddenEnvironments={hiddenEnvironments}
+                            setHiddenEnvironments={setHiddenEnvironments}
+                        />
+                    </>
+                )}
             </div>
             <StyledMainContent>
-                <ConditionallyRender
+                {flagOverviewRedesign ? (
-                    condition={flagOverviewRedesign}
-                    show={
                     <NewFeatureOverviewEnvironment
                         environmentId={environmentId}
                     />
-                    }
+                ) : (
-                    elseShow={<FeatureOverviewEnvironments />}
+                    <FeatureOverviewEnvironments />
-                />
+                )}
             </StyledMainContent>
             <Routes>
                 <Route

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

@@ -0,0 +1,35 @@
+import type { FC } from 'react';
+import AddIcon from '@mui/icons-material/Add';
+import { styled } from '@mui/material';
+import PermissionButton from 'component/common/PermissionButton/PermissionButton';
+import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
+
+const StyledAddTagButton = styled(PermissionButton)(({ theme }) => ({
+    lineHeight: theme.typography.body1.lineHeight,
+    borderRadius: theme.shape.borderRadiusExtraLarge,
+    background: theme.palette.secondary.light,
+    padding: theme.spacing(0.5, 1),
+    height: theme.spacing(3.5),
+}));
+
+const StyledAddIcon = styled(AddIcon)(({ theme }) => ({
+    fontSize: theme.typography.body2.fontSize,
+}));
+
+type AddTagButtonProps = {
+    project: string;
+    onClick: () => void;
+};
+
+export const AddTagButton: FC<AddTagButtonProps> = ({ project, onClick }) => (
+    <StyledAddTagButton
+        size='small'
+        permission={UPDATE_FEATURE}
+        projectId={project}
+        variant='text'
+        onClick={onClick}
+        startIcon={<StyledAddIcon />}
+    >
+        Add tag
+    </StyledAddTagButton>
+);

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

@@ -0,0 +1,34 @@
+import { styled } from '@mui/material';
+import {
+    AvatarComponent,
+    AvatarGroup,
+} from 'component/common/AvatarGroup/AvatarGroup';
+import type { Collaborator } from 'interfaces/featureToggle';
+import type { FC } from 'react';
+
+const StyledAvatarComponent = styled(AvatarComponent)(({ theme }) => ({
+    width: theme.spacing(2.5),
+    height: theme.spacing(2.5),
+}));
+
+const StyledAvatarGroup = styled(AvatarGroup)({
+    flexWrap: 'nowrap',
+});
+
+type CollaboratorsProps = {
+    collaborators: Collaborator[] | undefined;
+};
+
+export const Collaborators: FC<CollaboratorsProps> = ({ collaborators }) => {
+    if (!collaborators || collaborators.length === 0) {
+        return null;
+    }
+
+    return (
+        <StyledAvatarGroup
+            users={collaborators}
+            avatarLimit={9}
+            AvatarComponent={StyledAvatarComponent}
+        />
+    );
+};

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

@@ -1,4 +1,3 @@
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { AddDependencyDialogue } from 'component/feature/Dependencies/AddDependencyDialogue';
 import type { IFeatureToggle } from 'interfaces/featureToggle';
 import { useState } from 'react';
@@ -26,11 +25,8 @@ import {
 } from './FeatureOverviewMetaData';
 
 const StyledPermissionButton = styled(PermissionButton)(({ theme }) => ({
-    '&&&': {
     fontSize: theme.fontSizes.smallBody,
-        lineHeight: 1,
+    lineHeight: theme.typography.body1.lineHeight,
-        margin: 0,
-    },
 }));
 
 const useDeleteDependency = (project: string, featureId: string) => {
@@ -112,13 +108,12 @@ export const DependencyRow = ({ feature }: IDependencyRowProps) => {
 
     return (
         <>
-            <ConditionallyRender
+            {canAddParentDependency ? (
-                condition={canAddParentDependency}
-                show={
                 <StyledMetaDataItem>
                     <StyledMetaDataItemLabel>
                         Dependency:
                     </StyledMetaDataItemLabel>
+                    <div>
                         <StyledPermissionButton
                             size='small'
                             permission={UPDATE_FEATURE_DEPENDENCY}
@@ -128,14 +123,12 @@ export const DependencyRow = ({ feature }: IDependencyRowProps) => {
                                 setShowDependencyDialogue(true);
                             }}
                         >
-                            Add parent feature
+                            Add parent flag
                         </StyledPermissionButton>
+                    </div>
                 </StyledMetaDataItem>
-                }
+            ) : null}
-            />
+            {hasParentDependency ? (
-            <ConditionallyRender
-                condition={hasParentDependency}
-                show={
                 <StyledMetaDataItem>
                     <StyledMetaDataItemLabel>
                         Dependency:
@@ -146,44 +139,26 @@ export const DependencyRow = ({ feature }: IDependencyRowProps) => {
                         >
                             {feature.dependencies[0]?.feature}
                         </StyledLink>
-                            <ConditionallyRender
+                        {checkAccess(UPDATE_FEATURE_DEPENDENCY, environment) ? (
-                                condition={checkAccess(
-                                    UPDATE_FEATURE_DEPENDENCY,
-                                    environment,
-                                )}
-                                show={
                             <DependencyActions
                                 feature={feature.name}
-                                        onEdit={() =>
+                                onEdit={() => setShowDependencyDialogue(true)}
-                                            setShowDependencyDialogue(true)
-                                        }
                                 onDelete={deleteDependency}
                             />
-                                }
+                        ) : null}
-                            />
                     </StyledMetaDataItemValue>
                 </StyledMetaDataItem>
-                }
+            ) : null}
-            />
+            {hasParentDependency && !feature.dependencies[0]?.enabled ? (
-            <ConditionallyRender
-                condition={
-                    hasParentDependency && !feature.dependencies[0]?.enabled
-                }
-                show={
                 <StyledMetaDataItem>
                     <StyledMetaDataItemLabel>
                         Dependency value:
                     </StyledMetaDataItemLabel>
                     <span>disabled</span>
                 </StyledMetaDataItem>
-                }
+            ) : null}
-            />
+            {hasParentDependency &&
-            <ConditionallyRender
+            Boolean(feature.dependencies[0]?.variants?.length) ? (
-                condition={
-                    hasParentDependency &&
-                    Boolean(feature.dependencies[0]?.variants?.length)
-                }
-                show={
                 <StyledMetaDataItem>
                     <StyledMetaDataItemLabel>
                         Dependency value:
@@ -192,26 +167,17 @@ export const DependencyRow = ({ feature }: IDependencyRowProps) => {
                         variants={feature.dependencies[0]?.variants || []}
                     />
                 </StyledMetaDataItem>
-                }
+            ) : null}
-            />
+            {hasChildren ? (
-            <ConditionallyRender
-                condition={hasChildren}
-                show={
                 <StyledMetaDataItem>
-                        <StyledMetaDataItemLabel>
+                    <StyledMetaDataItemLabel>Children:</StyledMetaDataItemLabel>
-                            Children:
-                        </StyledMetaDataItemLabel>
                     <ChildrenTooltip
                         childFeatures={feature.children}
                         project={feature.project}
                     />
                 </StyledMetaDataItem>
-                }
+            ) : null}
-            />
+            {feature.project ? (
-
-            <ConditionallyRender
-                condition={Boolean(feature.project)}
-                show={
                 <AddDependencyDialogue
                     project={feature.project}
                     featureId={feature.name}
@@ -219,8 +185,7 @@ export const DependencyRow = ({ feature }: IDependencyRowProps) => {
                     onClose={() => setShowDependencyDialogue(false)}
                     showDependencyDialogue={showDependencyDialogue}
                 />
-                }
+            ) : null}
-            />
         </>
     );
 };

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

@@ -97,11 +97,11 @@ test('show dependency dialogue', async () => {
         },
     );
 
-    const addParentButton = await screen.findByText('Add parent feature');
+    const addParentButton = await screen.findByText('Add parent flag');
 
     addParentButton.click();
 
-    await screen.findByText('Add parent feature dependency');
+    await screen.findByText('Add parent flag dependency');
 });
 
 test('show dependency dialogue for OSS with dependencies', async () => {
@@ -127,11 +127,11 @@ test('show dependency dialogue for OSS with dependencies', async () => {
         },
     );
 
-    const addParentButton = await screen.findByText('Add parent feature');
+    const addParentButton = await screen.findByText('Add parent flag');
 
     addParentButton.click();
 
-    await screen.findByText('Add parent feature dependency');
+    await screen.findByText('Add parent flag dependency');
 });
 
 test('show child', async () => {
@@ -291,7 +291,7 @@ test('edit dependency', async () => {
     const editButton = await screen.findByText('Edit');
     fireEvent.click(editButton);
 
-    await screen.findByText('Add parent feature dependency');
+    await screen.findByText('Add parent flag dependency');
 });
 
 test('show variant dependencies', async () => {

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

@@ -1,8 +1,6 @@
-import { capitalize, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
-import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { FeatureArchiveDialog } from 'component/common/FeatureArchiveDialog/FeatureArchiveDialog';
 import { useState } from 'react';
@@ -14,8 +12,9 @@ import { useLocationSettings } from 'hooks/useLocationSettings';
 import { useShowDependentFeatures } from './useShowDependentFeatures';
 import { FeatureLifecycle } from '../FeatureLifecycle/FeatureLifecycle';
 import { MarkCompletedDialogue } from '../FeatureLifecycle/MarkCompletedDialogue';
-import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
 import { TagRow } from './TagRow';
+import { capitalizeFirst } from 'utils/capitalizeFirst';
+import { Collaborators } from './Collaborators';
 
 const StyledMetaDataContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(3),
@@ -30,22 +29,10 @@ const StyledMetaDataContainer = styled('div')(({ theme }) => ({
     },
 }));
 
-const StyledMetaDataHeader = styled('div')(({ theme }) => ({
+const StyledTitle = styled('h2')(({ theme }) => ({
-    display: 'flex',
+    fontSize: theme.typography.body1.fontSize,
-    alignItems: 'center',
+    fontWeight: theme.typography.fontWeightBold,
-    gap: theme.spacing(2),
+    marginBottom: theme.spacing(0.5),
-    '& > svg': {
-        height: theme.spacing(5),
-        width: theme.spacing(5),
-        padding: theme.spacing(0.5),
-        backgroundColor: theme.palette.background.alternative,
-        fill: theme.palette.primary.contrastText,
-        borderRadius: theme.shape.borderRadiusMedium,
-    },
-    '& > h2': {
-        fontSize: theme.fontSizes.mainHeader,
-        fontWeight: 'normal',
-    },
 }));
 
 const StyledBody = styled('div')({
@@ -57,7 +44,7 @@ export const StyledMetaDataItem = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
-    minHeight: theme.spacing(4.25),
+    minHeight: theme.spacing(4.5),
     fontSize: theme.fontSizes.smallBody,
 }));
 
@@ -76,11 +63,6 @@ export const StyledMetaDataItemValue = styled('div')(({ theme }) => ({
     gap: theme.spacing(1),
 }));
 
-const StyledUserAvatar = styled(UserAvatar)(({ theme }) => ({
-    height: theme.spacing(3.5),
-    width: theme.spacing(3.5),
-}));
-
 const FeatureOverviewMetaData = () => {
     const projectId = useRequiredPathParam('projectId');
     const featureId = useRequiredPathParam('featureId');
@@ -97,37 +79,29 @@ const FeatureOverviewMetaData = () => {
 
     const showDependentFeatures = useShowDependentFeatures(project);
 
-    const FlagTypeIcon = getFeatureTypeIcons(type);
-
     return (
         <>
             <StyledMetaDataContainer>
-                <StyledMetaDataHeader data-loading>
+                <div>
-                    <FlagTypeIcon />
+                    <StyledTitle>Flag details</StyledTitle>
-                    <h2>{capitalize(type || '')} flag</h2>
+                    {description ? (
-                </StyledMetaDataHeader>
-                <ConditionallyRender
-                    condition={Boolean(description)}
-                    show={
                         <StyledMetaDataItem data-loading>
                             <StyledMetaDataItemText>
                                 {description}
                             </StyledMetaDataItemText>
                         </StyledMetaDataItem>
-                    }
+                    ) : null}
-                />
+                </div>
                 <StyledBody>
                     <StyledMetaDataItem>
                         <StyledMetaDataItemLabel>
-                            Project:
+                            Flag type:
                         </StyledMetaDataItemLabel>
                         <StyledMetaDataItemText data-loading>
-                            {project}
+                            {capitalizeFirst(type || ' ')} flag
                         </StyledMetaDataItemText>
                     </StyledMetaDataItem>
-                    <ConditionallyRender
+                    {feature.lifecycle ? (
-                        condition={Boolean(feature.lifecycle)}
-                        show={
                         <StyledMetaDataItem data-loading>
                             <StyledMetaDataItemLabel>
                                 Lifecycle:
@@ -141,11 +115,10 @@ const FeatureOverviewMetaData = () => {
                                 onUncomplete={refetchFeature}
                             />
                         </StyledMetaDataItem>
-                        }
+                    ) : null}
-                    />
                     <StyledMetaDataItem>
                         <StyledMetaDataItemLabel>
-                            Created at:
+                            Created:
                         </StyledMetaDataItemLabel>
                         <StyledMetaDataItemText data-loading>
                             {formatDateYMD(
@@ -154,9 +127,7 @@ const FeatureOverviewMetaData = () => {
                             )}
                         </StyledMetaDataItemText>
                     </StyledMetaDataItem>
-                    <ConditionallyRender
+                    {feature.createdBy ? (
-                        condition={Boolean(feature.createdBy)}
-                        show={() => (
                         <StyledMetaDataItem>
                             <StyledMetaDataItemLabel>
                                 Created by:
@@ -165,31 +136,36 @@ const FeatureOverviewMetaData = () => {
                                 <StyledMetaDataItemText data-loading>
                                     {feature.createdBy?.name}
                                 </StyledMetaDataItemText>
-                                    <StyledUserAvatar
+                            </StyledMetaDataItemValue>
-                                        user={feature.createdBy}
+                        </StyledMetaDataItem>
+                    ) : null}
+                    {feature.collaborators?.users &&
+                    feature.collaborators?.users.length > 0 ? (
+                        <StyledMetaDataItem>
+                            <StyledMetaDataItemLabel>
+                                Collaborators:
+                            </StyledMetaDataItemLabel>
+                            <StyledMetaDataItemValue>
+                                <Collaborators
+                                    collaborators={feature.collaborators?.users}
                                 />
                             </StyledMetaDataItemValue>
                         </StyledMetaDataItem>
-                        )}
+                    ) : null}
-                    />
+                    {showDependentFeatures ? (
-                    <ConditionallyRender
+                        <DependencyRow feature={feature} />
-                        condition={showDependentFeatures}
+                    ) : null}
-                        show={<DependencyRow feature={feature} />}
-                    />
                     <TagRow feature={feature} />
                 </StyledBody>
             </StyledMetaDataContainer>
-            <ConditionallyRender
+            {feature.children.length > 0 ? (
-                condition={feature.children.length > 0}
-                show={
                 <FeatureArchiveNotAllowedDialog
                     features={feature.children}
                     project={projectId}
                     isOpen={archiveDialogOpen}
                     onClose={() => setArchiveDialogOpen(false)}
                 />
-                }
+            ) : (
-                elseShow={
                 <FeatureArchiveDialog
                     isOpen={archiveDialogOpen}
                     onConfirm={() => {
@@ -199,11 +175,8 @@ const FeatureOverviewMetaData = () => {
                     projectId={projectId}
                     featureIds={[featureId]}
                 />
-                }
+            )}
-            />
+            {feature.project ? (
-            <ConditionallyRender
-                condition={Boolean(feature.project)}
-                show={
                 <MarkCompletedDialogue
                     isOpen={markCompletedDialogueOpen}
                     setIsOpen={setMarkCompletedDialogueOpen}
@@ -211,8 +184,7 @@ const FeatureOverviewMetaData = () => {
                     featureId={feature.name}
                     onComplete={refetchFeature}
                 />
-                }
+            ) : null}
-            />
         </>
     );
 };

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

@@ -119,7 +119,7 @@ export const OldDependencyRow: FC<{ feature: IFeatureToggle }> = ({
                                     marginBottom: theme.spacing(0.4),
                                 })}
                             >
-                                Add parent feature
+                                Add parent flag
                             </PermissionButton>
                         </StyledDetail>
                     </FlexRow>

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

@@ -2,8 +2,7 @@ import type { IFeatureToggle } from 'interfaces/featureToggle';
 import { useContext, useState } from 'react';
 import { Chip, styled, Tooltip } from '@mui/material';
 import useFeatureTags from 'hooks/api/getters/useFeatureTags/useFeatureTags';
-import Add from '@mui/icons-material/Add';
+import DeleteTagIcon from '@mui/icons-material/Cancel';
-import ClearIcon from '@mui/icons-material/Clear';
 import { ManageTagsDialog } from 'component/feature/FeatureView/FeatureOverview/ManageTagsDialog/ManageTagsDialog';
 import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
 import AccessContext from 'contexts/AccessContext';
@@ -12,57 +11,42 @@ import type { ITag } from 'interfaces/tags';
 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 { StyledMetaDataItem } from './FeatureOverviewMetaData';
-import {
+import { AddTagButton } from './AddTagButton';
-    StyledMetaDataItem,
-    StyledMetaDataItemLabel,
-} from './FeatureOverviewMetaData';
-import PermissionButton from 'component/common/PermissionButton/PermissionButton';
 
-const StyledPermissionButton = styled(PermissionButton)(({ theme }) => ({
+const StyledLabel = styled('span')(({ theme }) => ({
-    '&&&': {
+    marginTop: theme.spacing(1),
-        fontSize: theme.fontSizes.smallBody,
+    color: theme.palette.text.secondary,
-        lineHeight: 1,
+    marginRight: theme.spacing(1),
-        margin: 0,
-    },
 }));
 
 const StyledTagRow = styled('div')(({ theme }) => ({
     display: 'flex',
-    alignItems: 'start',
+    justifyContent: 'space-between',
-    minHeight: theme.spacing(4.25),
+    flexWrap: 'wrap',
-    lineHeight: theme.spacing(4.25),
+    minHeight: theme.spacing(4.5),
     fontSize: theme.fontSizes.smallBody,
-    justifyContent: 'start',
 }));
 
 const StyledTagContainer = styled('div')(({ theme }) => ({
     display: 'flex',
-    flex: 1,
     overflow: 'hidden',
     gap: theme.spacing(1),
     flexWrap: 'wrap',
     marginTop: theme.spacing(0.75),
 }));
 
-const StyledChip = styled(Chip)(({ theme }) => ({
+const StyledTag = styled(Chip)(({ theme }) => ({
-    fontSize: theme.fontSizes.smallerBody,
     overflowWrap: 'anywhere',
+    lineHeight: theme.typography.body1.lineHeight,
     backgroundColor: theme.palette.neutral.light,
-    color: theme.palette.neutral.dark,
+    color: theme.palette.text.primary,
-    '&&& > svg': {
+    padding: theme.spacing(0.25),
-        color: theme.palette.neutral.dark,
+    height: theme.spacing(3.5),
-        fontSize: theme.fontSizes.smallBody,
-    },
 }));
 
-const StyledAddedTag = styled(StyledChip)(({ theme }) => ({
+const StyledEllipsis = styled('span')(({ theme }) => ({
-    backgroundColor: theme.palette.secondary.light,
+    color: theme.palette.text.secondary,
-    color: theme.palette.secondary.dark,
-    '&&& > svg': {
-        color: theme.palette.secondary.dark,
-        fontSize: theme.fontSizes.smallBody,
-    },
 }));
 
 interface IFeatureOverviewSidePanelTagsProps {
@@ -81,6 +65,10 @@ export const TagRow = ({ feature }: IFeatureOverviewSidePanelTagsProps) => {
     const { hasAccess } = useContext(AccessContext);
     const canUpdateTags = hasAccess(UPDATE_FEATURE, feature.project);
 
+    const handleAdd = () => {
+        setManageTagsOpen(true);
+    };
+
     const handleRemove = async () => {
         if (!selectedTag) return;
         try {
@@ -101,78 +89,71 @@ export const TagRow = ({ feature }: IFeatureOverviewSidePanelTagsProps) => {
 
     return (
         <>
-            <ConditionallyRender
+            {!tags.length ? (
-                condition={!tags.length}
-                show={
                 <StyledMetaDataItem>
-                        <StyledMetaDataItemLabel>Tags:</StyledMetaDataItemLabel>
+                    <StyledLabel>Tags:</StyledLabel>
-                        <StyledPermissionButton
+                    <StyledTagContainer>
-                            size='small'
+                        <AddTagButton
-                            permission={UPDATE_FEATURE}
+                            project={feature.project}
-                            projectId={feature.project}
+                            onClick={handleAdd}
-                            variant='text'
+                        />
-                            onClick={() => {
+                    </StyledTagContainer>
-                                setManageTagsOpen(true);
-                            }}
-                        >
-                            Add tag
-                        </StyledPermissionButton>
                 </StyledMetaDataItem>
-                }
+            ) : (
-                elseShow={
                 <StyledTagRow>
-                        <StyledMetaDataItemLabel>Tags:</StyledMetaDataItemLabel>
+                    <StyledLabel>Tags:</StyledLabel>
                     <StyledTagContainer>
                         {tags.map((tag) => {
                             const tagLabel = `${tag.type}:${tag.value}`;
+                            const isOverflowing = tagLabel.length > 25;
                             return (
+                                <StyledTag
+                                    label={
                                         <Tooltip
                                             key={tagLabel}
                                             title={
-                                            tagLabel.length > 35 ? tagLabel : ''
+                                                isOverflowing ? tagLabel : ''
                                             }
                                             arrow
                                         >
-                                        <StyledAddedTag
+                                            <span>
-                                            label={tagLabel}
+                                                {tagLabel.substring(0, 25)}
+                                                {isOverflowing ? (
+                                                    <StyledEllipsis>
+                                                        …
+                                                    </StyledEllipsis>
+                                                ) : (
+                                                    ''
+                                                )}
+                                            </span>
+                                        </Tooltip>
+                                    }
                                     size='small'
                                     deleteIcon={
-                                                <Tooltip
+                                        <Tooltip title='Remove tag' arrow>
-                                                    title='Remove tag'
+                                            <DeleteTagIcon />
-                                                    arrow
-                                                >
-                                                    <ClearIcon />
                                         </Tooltip>
                                     }
                                     onDelete={
                                         canUpdateTags
                                             ? () => {
-                                                          setRemoveTagOpen(
+                                                  setRemoveTagOpen(true);
-                                                              true,
-                                                          );
                                                   setSelectedTag(tag);
                                               }
                                             : undefined
                                     }
                                 />
-                                    </Tooltip>
                             );
                         })}
-                            <ConditionallyRender
+                        {canUpdateTags ? (
-                                condition={canUpdateTags}
+                            <AddTagButton
-                                show={
+                                project={feature.project}
-                                    <StyledChip
+                                onClick={handleAdd}
-                                        icon={<Add />}
-                                        label='Add tag'
-                                        size='small'
-                                        onClick={() => setManageTagsOpen(true)}
-                                    />
-                                }
                             />
+                        ) : null}
                     </StyledTagContainer>
                 </StyledTagRow>
-                }
+            )}
-            />
             <ManageTagsDialog
                 open={manageTagsOpen}
                 setOpen={setManageTagsOpen}
@@ -184,6 +165,7 @@ export const TagRow = ({ feature }: IFeatureOverviewSidePanelTagsProps) => {
                 onClose={() => {
                     setRemoveTagOpen(false);
                     setSelectedTag(undefined);
+                    refetch();
                 }}
                 onClick={() => {
                     setRemoveTagOpen(false);

website/docs/reference/feature-toggles.mdx

@@ -140,7 +140,7 @@ A child feature flag is evaluated only when both the child and its parent featur
 - Parent feature is disabled: Useful when the parent acts as a kill switch with inverted enabled/disabled logic.
 - Parent feature is enabled with variants: Useful for A/B testing scenarios where you need specific variant dependencies.
 
-To add a dependency, you need the `update-feature-dependency` project permission. In the Admin UI, go to the feature flag you want to add a parent to and select **Add parent feature**.
+To add a dependency, you need the `update-feature-dependency` project permission. In the Admin UI, go to the feature flag you want to add a parent to and select **Add parent flag**.
 
 ![Feature parent flag](/img/add-parent-flag.png)