From 56f09ce3929165a14cd49166e511f0bc2cd7512d Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Mon, 17 Apr 2023 16:03:59 +0300
Subject: [PATCH] feat: list affected features (#3534)

---
 .../{AvatarCell => }/AvatarCell.tsx           |  5 --
 .../ChangeRequestStatusCell.tsx               |  0
 .../ChangeRequestTitleCell.tsx                | 13 +--
 .../ChangeRequestsTabs/ChangeRequestsTabs.tsx | 23 ++++--
 .../ChangeRequestsTabs/FeaturesCell.tsx       | 80 +++++++++++++++++++
 5 files changed, 100 insertions(+), 21 deletions(-)
 rename frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/{AvatarCell => }/AvatarCell.tsx (73%)
 rename frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/{ChangeRequestStatusCell => }/ChangeRequestStatusCell.tsx (100%)
 rename frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/{ChangeRequestTitleCell => }/ChangeRequestTitleCell.tsx (80%)
 create mode 100644 frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/FeaturesCell.tsx

diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/AvatarCell/AvatarCell.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/AvatarCell.tsx
similarity index 73%
rename from frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/AvatarCell/AvatarCell.tsx
rename to frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/AvatarCell.tsx
index 29decc66ba..24bfb149c5 100644
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/AvatarCell/AvatarCell.tsx
+++ b/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}
diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestStatusCell/ChangeRequestStatusCell.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestStatusCell.tsx
similarity index 100%
rename from frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestStatusCell/ChangeRequestStatusCell.tsx
rename to frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestStatusCell.tsx
diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell/ChangeRequestTitleCell.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell.tsx
similarity index 80%
rename from frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell/ChangeRequestTitleCell.tsx
rename to frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell.tsx
index a3951f728d..28ff9bfb90 100644
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell/ChangeRequestTitleCell.tsx
+++ b/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>
diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
index cb4d2f319f..43f94d2acb 100644
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
+++ b/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,
             },
         ],
diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/FeaturesCell.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/FeaturesCell.tsx
new file mode 100644
index 0000000000..60d664f816
--- /dev/null
+++ b/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>
+    );
+};