feat: Table with feature overview cell (#6713)

Unleash · Mar 27, 2024 · 6a0135a · 6a0135a
1 parent f89c2aa
commit 6a0135a
Show file tree

Hide file tree

Showing 7 changed files with 575 additions and 96 deletions.
diff --git a/frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx b/frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx
@@ -28,8 +28,7 @@ const HeaderCell = <T extends object>(header: Header<T, unknown>) => {
             onClick={() => column.toggleSorting()}
             styles={{
                 borderRadius: '0px',
-                paddingTop: 0,
-                paddingBottom: 0,
+                padding: 0,
                 width,
                 maxWidth: fixedWidth,
                 minWidth: fixedWidth,

diff --git a/frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx b/frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx
@@ -5,12 +5,12 @@ import StarBorderIcon from '@mui/icons-material/StarBorder';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 const StyledCell = styled(Box)(({ theme }) => ({
-    paddingLeft: theme.spacing(1.25),
+    paddingRight: theme.spacing(0.5),
 }));
 
 const StyledIconButton = styled(IconButton)(({ theme }) => ({
     color: theme.palette.primary.main,
-    padding: theme.spacing(1.25),
+    paddingRight: theme.spacing(0.5),
 }));
 
 const StyledIconButtonInactive = styled(StyledIconButton)({

diff --git a/frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx b/frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import type { FeatureSearchResponseSchema } from '../../../../../openapi';
-import { Box, styled, Tooltip } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
 import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
 import { useSearchHighlightContext } from '../../SearchHighlightContext/SearchHighlightContext';
@@ -59,25 +59,40 @@ const CappedDescription: FC<{ text: string; searchQuery: string }> = ({
                     placement='bottom-start'
                     arrow
                 >
-                    <StyledDescription data-loading>
+                    <StyledDescription>
                         <Highlighter search={searchQuery}>{text}</Highlighter>
                     </StyledDescription>
                 </HtmlTooltip>
             }
             elseShow={
-                <StyledDescription data-loading>
+                <StyledDescription>
                     <Highlighter search={searchQuery}>{text}</Highlighter>
                 </StyledDescription>
             }
         />
     );
 };
 
+const CappedTag: FC<{ tag: string }> = ({ tag }) => {
+    return (
+        <ConditionallyRender
+            condition={tag.length > 30}
+            show={
+                <HtmlTooltip title={tag}>
+                    <Tag>{tag}</Tag>
+                </HtmlTooltip>
+            }
+            elseShow={<Tag>{tag}</Tag>}
+        />
+    );
+};
+
 const Container = styled(Box)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(0.5),
-    margin: theme.spacing(1, 0, 1, 0),
+    margin: theme.spacing(1.25, 0, 1, 0),
+    paddingLeft: theme.spacing(2),
 }));
 
 const FeatureNameAndType = styled(Box)(({ theme }) => ({
@@ -108,7 +123,6 @@ const FeatureName: FC<{
         <Box sx={(theme) => ({ fontWeight: theme.typography.fontWeightBold })}>
             <StyledFeatureLink to={`/projects/${project}/features/${feature}`}>
                 <StyledTitle
-                    data-loading
                     style={{
                         WebkitLineClamp: 1,
                         lineClamp: 1,
@@ -136,9 +150,9 @@ const Tags: FC<{ tags: FeatureSearchResponseSchema['tags'] }> = ({ tags }) => {
 
     return (
         <TagsContainer>
-            {tag1 && <Tag>{tag1}</Tag>}
-            {tag2 && <Tag>{tag2}</Tag>}
-            {tag3 && <Tag>{tag3}</Tag>}
+            {tag1 && <CappedTag tag={tag1} />}
+            {tag2 && <CappedTag tag={tag2} />}
+            {tag3 && <CappedTag tag={tag3} />}
             <ConditionallyRender
                 condition={restTags.length > 0}
                 show={<RestTags tags={restTags} />}
@@ -152,56 +166,58 @@ const PrimaryFeatureInfo: FC<{
     feature: string;
     searchQuery: string;
     type: string;
-}> = ({ project, feature, type, searchQuery }) => {
+    dependencyType: string;
+}> = ({ project, feature, type, searchQuery, dependencyType }) => {
     const { featureTypes } = useFeatureTypes();
     const IconComponent = getFeatureTypeIcons(type);
     const typeName = featureTypes.find(
         (featureType) => featureType.id === type,
     )?.name;
-    const title = `This is a "${typeName || type}" flag`;
+    const title = `${typeName || type} flag`;
 
     const TypeIcon = () => (
-        <Tooltip arrow title={title} describeChild>
-            <IconComponent
-                sx={(theme) => ({ fontSize: theme.spacing(2) })}
-                data-loading
-            />
-        </Tooltip>
+        <HtmlTooltip arrow title={title} describeChild>
+            <IconComponent sx={(theme) => ({ fontSize: theme.spacing(2) })} />
+        </HtmlTooltip>
     );
 
     return (
-        <FeatureNameAndType>
+        <FeatureNameAndType data-loading>
             <TypeIcon />
             <FeatureName
                 project={project}
                 feature={feature}
                 searchQuery={searchQuery}
             />
+            <ConditionallyRender
+                condition={Boolean(dependencyType)}
+                show={
+                    <DependencyBadge
+                        color={
+                            dependencyType === 'parent'
+                                ? 'warning'
+                                : 'secondary'
+                        }
+                    >
+                        {dependencyType}
+                    </DependencyBadge>
+                }
+            />
         </FeatureNameAndType>
     );
 };
 
 const SecondaryFeatureInfo: FC<{
-    dependencyType: string;
     description: string;
     searchQuery: string;
-}> = ({ dependencyType, description, searchQuery }) => {
+}> = ({ description, searchQuery }) => {
     return (
         <ConditionallyRender
-            condition={Boolean(dependencyType) || Boolean(description)}
+            condition={Boolean(description)}
             show={
                 <Box
                     sx={(theme) => ({ display: 'flex', gap: theme.spacing(1) })}
                 >
-                    <DependencyBadge
-                        color={
-                            dependencyType === 'parent'
-                                ? 'warning'
-                                : 'secondary'
-                        }
-                    >
-                        {dependencyType}
-                    </DependencyBadge>
                     <CappedDescription
                         text={description}
                         searchQuery={searchQuery}
@@ -222,10 +238,10 @@ export const FeatureOverviewCell: FC<IFeatureNameCellProps> = ({ row }) => {
                 feature={row.original.name}
                 searchQuery={searchQuery}
                 type={row.original.type || ''}
+                dependencyType={row.original.dependencyType || ''}
             />
             <SecondaryFeatureInfo
                 description={row.original.description || ''}
-                dependencyType={row.original.dependencyType || ''}
                 searchQuery={searchQuery}
             />
             <Tags tags={row.original.tags} />