feat: list affected features (#3534)

frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/AvatarCell.tsx

@@ -1,4 +1,3 @@
-import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { styled, Typography } from '@mui/material';
 
@@ -13,10 +12,6 @@ export const AvatarCell = ({ value }: any) => {
     return (
         <TextCell>
             <StyledContainer>
-                <UserAvatar
-                    user={value}
-                    sx={theme => ({ marginRight: theme.spacing(0.5) })}
-                />
                 <Typography component={'span'} variant={'body2'}>
                     {' '}
                     {value?.username}

frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell.tsx

@@ -1,4 +1,4 @@
-import { TextCell } from '../../../../common/Table/cells/TextCell/TextCell';
+import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { Link, styled, Typography } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 import { useTheme } from '@mui/system';
@@ -20,7 +20,7 @@ export const ChangeRequestTitleCell = ({
     row: { original },
 }: IChangeRequestTitleCellProps) => {
     const projectId = useRequiredPathParam('projectId');
-    const { id, features: changes } = original;
+    const { id, title, features: changes } = original;
     const theme = useTheme();
     const path = `/projects/${projectId}/change-requests/${id}`;
 
@@ -31,11 +31,7 @@ export const ChangeRequestTitleCell = ({
     return (
         <TextCell sx={{ minWidth: '200px' }}>
             <StyledLink>
-                <Typography
-                    component={'span'}
-                    variant={'body2'}
-                    color={theme.palette.text.secondary}
-                >
+                <Typography variant={'body2'}>
                     <Link
                         component={RouterLink}
                         underline={'hover'}
@@ -48,9 +44,8 @@ export const ChangeRequestTitleCell = ({
                             },
                         })}
                     >
-                        Change request
+                        {title}
                     </Link>
-                    {`#${id}`}
                 </Typography>
             </StyledLink>
             <span>

frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx

@@ -19,13 +19,14 @@ import { useSearch } from 'hooks/useSearch';
 import { useSearchParams } from 'react-router-dom';
 import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
-import { ChangeRequestStatusCell } from './ChangeRequestStatusCell/ChangeRequestStatusCell';
-import { AvatarCell } from './AvatarCell/AvatarCell';
-import { ChangeRequestTitleCell } from './ChangeRequestTitleCell/ChangeRequestTitleCell';
+import { ChangeRequestStatusCell } from './ChangeRequestStatusCell';
+import { AvatarCell } from './AvatarCell';
+import { ChangeRequestTitleCell } from './ChangeRequestTitleCell';
 import { TableBody, TableRow } from 'component/common/Table';
 import { createLocalStorage } from 'utils/createLocalStorage';
 import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 import { useStyles } from './ChangeRequestsTabs.styles';
+import { FeaturesCell } from './FeaturesCell';
 
 export interface IChangeRequestTableProps {
     changeRequests: any[];
@@ -105,13 +106,22 @@ export const ChangeRequestsTabs = ({
                 accessor: 'id',
                 Cell: ChangeRequestTitleCell,
             },
+            {
+                id: 'Updated feature toggles',
+                Header: 'Updated feature toggles',
+                canSort: false,
+                accessor: 'features',
+                Cell: ({ value }: any) => {
+                    return <FeaturesCell project={projectId} value={value} />;
+                },
+            },
             {
                 Header: 'By',
                 accessor: 'createdBy',
-                maxWidth: 100,
+                maxWidth: 180,
                 canSort: false,
                 Cell: AvatarCell,
-                align: 'center',
+                align: 'left',
             },
             {
                 Header: 'Submitted',
@@ -132,8 +142,7 @@ export const ChangeRequestsTabs = ({
                 Header: 'Status',
                 accessor: 'state',
                 searchable: true,
-                minWidth: 150,
-                width: 150,
+                maxWidth: '170px',
                 Cell: ChangeRequestStatusCell,
             },
         ],

frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/FeaturesCell.tsx

@@ -0,0 +1,80 @@
+import { Box, styled } from '@mui/material';
+import { Link } from 'react-router-dom';
+import { VFC } from 'react';
+import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender';
+import { TooltipLink } from '../../../common/TooltipLink/TooltipLink';
+
+const StyledBox = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '300px',
+    padding: theme.spacing(1, 0, 1, 2),
+}));
+
+const StyledLink = styled(Link)(({ theme }) => ({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    textDecoration: 'none',
+    '&:hover, &:focus': {
+        textDecoration: 'underline',
+    },
+}));
+
+const StyledTooltipLink = styled(Link)(({ theme }) => ({
+    textDecoration: 'none',
+    '&:hover, &:focus': {
+        textDecoration: 'underline',
+    },
+}));
+
+const StyledTooltipContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    fontSize: theme.fontSizes.smallBody,
+    width: '100%',
+    whiteSpace: 'nowrap',
+}));
+
+interface FeaturesCellProps {
+    value: any;
+    project: string;
+}
+
+export const FeaturesCell: VFC<FeaturesCellProps> = ({ value, project }) => {
+    const featureNames = value?.map((feature: any) => feature.name);
+    return (
+        <StyledBox>
+            <ConditionallyRender
+                condition={featureNames?.length < 3}
+                show={featureNames?.map((featureName: string) => (
+                    <StyledLink
+                        title={featureName}
+                        to={`/projects/${project}/features/${featureName}`}
+                    >
+                        {featureName}
+                    </StyledLink>
+                ))}
+                elseShow={
+                    <TooltipLink
+                        tooltipProps={{ maxWidth: '800px' }}
+                        tooltip={
+                            <StyledTooltipContainer>
+                                {featureNames?.map((featureName: string) => (
+                                    <StyledTooltipLink
+                                        title={featureName}
+                                        to={`/projects/${project}/features/${featureName}`}
+                                    >
+                                        {featureName}
+                                    </StyledTooltipLink>
+                                ))}
+                            </StyledTooltipContainer>
+                        }
+                    >
+                        {featureNames?.length} toggles
+                    </TooltipLink>
+                }
+            />
+        </StyledBox>
+    );
+};