From 6bccffef9744f9a3e180a8b59883a22523b5f40b Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Thu, 8 Dec 2022 14:41:51 +0200
Subject: [PATCH] Fix/favorites UI improvements (#2636)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- Thanks for creating a PR! To make it easier for reviewers and
everyone else to understand what your changes relate to, please add some
relevant content to the headings below. Feel free to ignore or delete
sections that you don't think are relevant. Thank you! ❤️ -->
Favorite UI improvements
## About the changes
<!-- Describe the changes introduced. What are they and why are they
being introduced? Feel free to also add screenshots or steps to view the
changes if they're visual. -->

<!-- Does it close an issue? Multiple? -->
Closes #

<!-- (For internal contributors): Does it relate to an issue on public
roadmap? -->
<!--
Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#
-->

### Important files
<!-- PRs can contain a lot of changes, but not all changes are equally
important. Where should a reviewer start looking to get an overview of
the changes? Are any files particularly important? -->


## Discussion points
<!-- Anything about the PR you'd like to discuss before it gets merged?
Got any questions or doubts? -->

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 .../FavoriteIconButton/FavoriteIconButton.tsx |  54 ++++---
 .../FavoriteIconHeader/FavoriteIconHeader.tsx |   9 +-
 .../FavoriteIconCell/FavoriteIconCell.tsx     |  26 ++-
 .../feature/FeatureView/FeatureView.tsx       |  16 +-
 .../project/Project/Project.styles.ts         |   3 +-
 .../src/component/project/Project/Project.tsx | 152 ++++++++++--------
 .../ProjectFeatureToggles.tsx                 |   5 +-
 .../project/ProjectCard/ProjectCard.tsx       |   5 +-
 8 files changed, 155 insertions(+), 115 deletions(-)

diff --git a/frontend/src/component/common/FavoriteIconButton/FavoriteIconButton.tsx b/frontend/src/component/common/FavoriteIconButton/FavoriteIconButton.tsx
index 5cf1cce351..7697789a35 100644
--- a/frontend/src/component/common/FavoriteIconButton/FavoriteIconButton.tsx
+++ b/frontend/src/component/common/FavoriteIconButton/FavoriteIconButton.tsx
@@ -1,50 +1,58 @@
 import React, { VFC } from 'react';
-import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
-import useToast from 'hooks/useToast';
-import { formatUnknownError } from 'utils/formatUnknownError';
-import { IconButton } from '@mui/material';
+import { IconButton, SxProps, Theme } from '@mui/material';
 import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
 import {
     Star as StarIcon,
     StarBorder as StarBorderIcon,
 } from '@mui/icons-material';
+import { TooltipResolver } from '../TooltipResolver/TooltipResolver';
 
 interface IFavoriteIconButtonProps {
     onClick: (event?: any) => void;
     isFavorite: boolean;
     size?: 'medium' | 'large';
+    sx?: SxProps<Theme>;
 }
 
 export const FavoriteIconButton: VFC<IFavoriteIconButtonProps> = ({
     onClick,
     isFavorite,
     size = 'large',
+    sx,
 }) => {
     return (
-        <IconButton size={size} data-loading sx={{ mr: 1 }} onClick={onClick}>
+        <IconButton
+            size={size}
+            data-loading
+            sx={{ mr: 1, ...sx }}
+            onClick={onClick}
+        >
             <ConditionallyRender
                 condition={isFavorite}
                 show={
-                    <StarIcon
-                        color="primary"
-                        sx={{
-                            fontSize: theme =>
-                                size === 'medium'
-                                    ? theme.spacing(2)
-                                    : theme.spacing(3),
-                        }}
-                    />
+                    <TooltipResolver title={'Remove from favorites'}>
+                        <StarIcon
+                            color="primary"
+                            sx={{
+                                fontSize: theme =>
+                                    size === 'medium'
+                                        ? theme.spacing(2)
+                                        : theme.spacing(3),
+                            }}
+                        />
+                    </TooltipResolver>
                 }
                 elseShow={
-                    <StarBorderIcon
-                        sx={{
-                            fontSize: theme =>
-                                size === 'medium'
-                                    ? theme.spacing(2)
-                                    : theme.spacing(3),
-                        }}
-                    />
+                    <TooltipResolver title={'Add to favorites'}>
+                        <StarBorderIcon
+                            sx={{
+                                fontSize: theme =>
+                                    size === 'medium'
+                                        ? theme.spacing(2)
+                                        : theme.spacing(3),
+                            }}
+                        />
+                    </TooltipResolver>
                 }
             />
         </IconButton>
diff --git a/frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx b/frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx
index c8dc95bcb4..f5c537fd0f 100644
--- a/frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx
+++ b/frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx
@@ -1,10 +1,11 @@
 import { useState, VFC } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import { IconButton } from '@mui/material';
 import {
     Star as StarIcon,
     StarBorder as StarBorderIcon,
 } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { TooltipResolver } from '../../TooltipResolver/TooltipResolver';
 
 interface IFavoriteIconHeaderProps {
     isActive: boolean;
@@ -22,13 +23,12 @@ export const FavoriteIconHeader: VFC<IFavoriteIconHeaderProps> = ({
     };
 
     return (
-        <Tooltip
+        <TooltipResolver
             title={
                 internalState
                     ? 'Unpin favorite features from the top'
                     : 'Pin favorite features to the top'
             }
-            placement="bottom-start"
         >
             <IconButton
                 sx={{
@@ -36,6 +36,7 @@ export const FavoriteIconHeader: VFC<IFavoriteIconHeaderProps> = ({
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
+                    padding: 1.25,
                 }}
                 onClick={onToggle}
                 size="small"
@@ -46,6 +47,6 @@ export const FavoriteIconHeader: VFC<IFavoriteIconHeaderProps> = ({
                     elseShow={<StarBorderIcon fontSize="small" />}
                 />
             </IconButton>
-        </Tooltip>
+        </TooltipResolver>
     );
 };
diff --git a/frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx b/frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx
index ba46ba0a33..53653ad455 100644
--- a/frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx
+++ b/frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx
@@ -5,6 +5,7 @@ import {
     StarBorder as StarBorderIcon,
 } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { TooltipResolver } from '../../../TooltipResolver/TooltipResolver';
 
 interface IFavoriteIconCellProps {
     value?: boolean;
@@ -26,14 +27,27 @@ export const FavoriteIconCell: VFC<IFavoriteIconCellProps> = ({
         <ConditionallyRender
             condition={value}
             show={
-                <IconButton onClick={onClick} color="primary" size="small">
-                    <StarIcon fontSize="small" />
-                </IconButton>
+                <TooltipResolver title={'Remove from favorites'}>
+                    <IconButton
+                        onClick={onClick}
+                        color="primary"
+                        size="small"
+                        sx={{ padding: 1.25 }}
+                    >
+                        <StarIcon fontSize="small" />
+                    </IconButton>
+                </TooltipResolver>
             }
             elseShow={
-                <InactiveIconButton onClick={onClick} size="small">
-                    <StarBorderIcon fontSize="small" />
-                </InactiveIconButton>
+                <TooltipResolver title={'Add to favorites'}>
+                    <InactiveIconButton
+                        onClick={onClick}
+                        size="small"
+                        sx={{ padding: 1.25 }}
+                    >
+                        <StarBorderIcon fontSize="small" />
+                    </InactiveIconButton>
+                </TooltipResolver>
             }
         />
     </Box>
diff --git a/frontend/src/component/feature/FeatureView/FeatureView.tsx b/frontend/src/component/feature/FeatureView/FeatureView.tsx
index 917aac0836..f4b56b799c 100644
--- a/frontend/src/component/feature/FeatureView/FeatureView.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureView.tsx
@@ -1,19 +1,12 @@
-import { IconButton, Tab, Tabs, useMediaQuery } from '@mui/material';
-import React, { useCallback, useState } from 'react';
-import {
-    Archive,
-    FileCopy,
-    Label,
-    WatchLater,
-    Star as StarIcon,
-    StarBorder as StarBorderIcon,
-} from '@mui/icons-material';
+import { Tab, Tabs, useMediaQuery } from '@mui/material';
+import React, { useState } from 'react';
+import { Archive, FileCopy, Label, WatchLater } from '@mui/icons-material';
 import {
     Link,
     Route,
-    useNavigate,
     Routes,
     useLocation,
+    useNavigate,
 } from 'react-router-dom';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import useProject from 'hooks/api/getters/useProject/useProject';
@@ -130,6 +123,7 @@ export const FeatureView = () => {
                                             <FavoriteIconButton
                                                 onClick={onFavorite}
                                                 isFavorite={feature?.favorite}
+                                                sx={{ pr: 0.25 }}
                                             />
                                         )}
                                     />
diff --git a/frontend/src/component/project/Project/Project.styles.ts b/frontend/src/component/project/Project/Project.styles.ts
index cd19609118..ab223f91b4 100644
--- a/frontend/src/component/project/Project/Project.styles.ts
+++ b/frontend/src/component/project/Project/Project.styles.ts
@@ -19,7 +19,8 @@ export const useStyles = makeStyles()(theme => ({
     innerContainer: {
         padding: '1.25rem 2rem',
         display: 'flex',
-        alignItems: 'center',
+        flexDirection: 'column',
+        alignItems: 'start',
     },
     separator: {
         width: '100%',
diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index cb8e10b1b1..35606e475a 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -20,7 +20,7 @@ import {
 } from 'component/providers/AccessProvider/permissions';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import { Routes, Route, useLocation } from 'react-router-dom';
+import { Route, Routes, useLocation } from 'react-router-dom';
 import { DeleteProjectDialogue } from './DeleteProject/DeleteProjectDialogue';
 import { ProjectLog } from './ProjectLog/ProjectLog';
 import { ChangeRequestOverview } from 'component/changeRequest/ChangeRequestOverview/ChangeRequestOverview';
@@ -31,17 +31,28 @@ import { ProjectSettings } from './ProjectSettings/ProjectSettings';
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { FavoriteIconButton } from '../../common/FavoriteIconButton/FavoriteIconButton';
 import { useFavoriteProjectsApi } from '../../../hooks/api/actions/useFavoriteProjectsApi/useFavoriteProjectsApi';
-import { CenteredNavLink } from '../../admin/menu/CenteredNavLink';
 
 const StyledDiv = styled('div')(() => ({
     display: 'flex',
 }));
 
+const Row = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingBottom: theme.spacing(0.25),
+}));
+
+const Column = styled('div')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+}));
+
 const StyledName = styled('div')(({ theme }) => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    paddingBottom: theme.spacing(2),
+    paddingTop: theme.spacing(1),
 }));
 
 const StyledTitle = styled('span')(({ theme }) => ({
@@ -168,71 +179,82 @@ const Project = () => {
         >
             <div className={styles.header}>
                 <div className={styles.innerContainer}>
-                    <ConditionallyRender
-                        condition={Boolean(uiConfig?.flags?.favorites)}
-                        show={() => (
-                            <FavoriteIconButton
-                                onClick={onFavorite}
-                                isFavorite={project?.favorite}
-                            />
-                        )}
-                    />
-                    <h2 className={styles.title}>
-                        <div>
+                    <Row>
+                        <ConditionallyRender
+                            condition={Boolean(uiConfig?.flags?.favorites)}
+                            show={() => (
+                                <FavoriteIconButton
+                                    onClick={onFavorite}
+                                    isFavorite={project?.favorite}
+                                    sx={{ pl: 0, pr: 0.25 }}
+                                />
+                            )}
+                        />
+                        <h2 className={styles.title}>
                             <StyledName data-loading>{projectName}</StyledName>
-                            <ConditionallyRender
-                                condition={Boolean(project.description)}
-                                show={
-                                    <StyledDiv>
-                                        <StyledTitle data-loading>
-                                            Description:&nbsp;
-                                        </StyledTitle>
-                                        <StyledText data-loading>
-                                            {project.description}
-                                        </StyledText>
-                                    </StyledDiv>
-                                }
-                            />
+                        </h2>
+                    </Row>
+                    <Column>
+                        <h2 className={styles.title}>
+                            <div>
+                                <ConditionallyRender
+                                    condition={Boolean(project.description)}
+                                    show={
+                                        <StyledDiv>
+                                            <StyledTitle data-loading>
+                                                Description:&nbsp;
+                                            </StyledTitle>
+                                            <StyledText data-loading>
+                                                {project.description}
+                                            </StyledText>
+                                        </StyledDiv>
+                                    }
+                                />
+                                <StyledDiv>
+                                    <StyledTitle data-loading>
+                                        projectId:&nbsp;
+                                    </StyledTitle>
+                                    <StyledText data-loading>
+                                        {projectId}
+                                    </StyledText>
+                                </StyledDiv>
+                            </div>
                             <StyledDiv>
-                                <StyledTitle data-loading>
-                                    projectId:&nbsp;
-                                </StyledTitle>
-                                <StyledText data-loading>
-                                    {projectId}
-                                </StyledText>
+                                <PermissionIconButton
+                                    permission={UPDATE_PROJECT}
+                                    projectId={projectId}
+                                    sx={{
+                                        visibility: isOss()
+                                            ? 'hidden'
+                                            : 'visible',
+                                    }}
+                                    onClick={() =>
+                                        navigate(`/projects/${projectId}/edit`)
+                                    }
+                                    tooltipProps={{ title: 'Edit project' }}
+                                    data-loading
+                                >
+                                    <Edit />
+                                </PermissionIconButton>
+                                <PermissionIconButton
+                                    permission={DELETE_PROJECT}
+                                    projectId={projectId}
+                                    sx={{
+                                        visibility: isOss()
+                                            ? 'hidden'
+                                            : 'visible',
+                                    }}
+                                    onClick={() => {
+                                        setShowDelDialog(true);
+                                    }}
+                                    tooltipProps={{ title: 'Delete project' }}
+                                    data-loading
+                                >
+                                    <Delete />
+                                </PermissionIconButton>
                             </StyledDiv>
-                        </div>
-                        <StyledDiv>
-                            <PermissionIconButton
-                                permission={UPDATE_PROJECT}
-                                projectId={projectId}
-                                sx={{
-                                    visibility: isOss() ? 'hidden' : 'visible',
-                                }}
-                                onClick={() =>
-                                    navigate(`/projects/${projectId}/edit`)
-                                }
-                                tooltipProps={{ title: 'Edit project' }}
-                                data-loading
-                            >
-                                <Edit />
-                            </PermissionIconButton>
-                            <PermissionIconButton
-                                permission={DELETE_PROJECT}
-                                projectId={projectId}
-                                sx={{
-                                    visibility: isOss() ? 'hidden' : 'visible',
-                                }}
-                                onClick={() => {
-                                    setShowDelDialog(true);
-                                }}
-                                tooltipProps={{ title: 'Delete project' }}
-                                data-loading
-                            >
-                                <Delete />
-                            </PermissionIconButton>
-                        </StyledDiv>
-                    </h2>
+                        </h2>
+                    </Column>
                 </div>
 
                 <div className={styles.separator} />
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
index 704342fe1e..1f7094a1e3 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMediaQuery, useTheme } from '@mui/material';
 import { Add } from '@mui/icons-material';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { useFlexLayout, useSortBy, useTable, SortingRule } from 'react-table';
+import { SortingRule, useFlexLayout, useSortBy, useTable } from 'react-table';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { PageContent } from 'component/common/PageContent/PageContent';
@@ -33,7 +33,6 @@ import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConf
 import { UpdateEnabledMessage } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/UpdateEnabledMessage';
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { IFeatureToggleListItem } from 'interfaces/featureToggle';
-import { FeatureTagCell } from 'component/common/Table/cells/FeatureTagCell/FeatureTagCell';
 import { FavoriteIconHeader } from 'component/common/Table/FavoriteIconHeader/FavoriteIconHeader';
 import { FavoriteIconCell } from 'component/common/Table/cells/FavoriteIconCell/FavoriteIconCell';
 import { useEnvironmentsRef } from './hooks/useEnvironmentsRef';
@@ -63,7 +62,7 @@ type ListItemType = Pick<
     };
 };
 
-const staticColumns = ['Actions', 'name'];
+const staticColumns = ['Actions', 'name', 'favorite'];
 
 const defaultSort: SortingRule<string> & {
     columns?: string[];
diff --git a/frontend/src/component/project/ProjectCard/ProjectCard.tsx b/frontend/src/component/project/ProjectCard/ProjectCard.tsx
index 157ef1fb9c..9aa5ec690d 100644
--- a/frontend/src/component/project/ProjectCard/ProjectCard.tsx
+++ b/frontend/src/component/project/ProjectCard/ProjectCard.tsx
@@ -2,14 +2,14 @@ import { Card, Menu, MenuItem } from '@mui/material';
 import { useStyles } from './ProjectCard.styles';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { ReactComponent as ProjectIcon } from 'assets/icons/projectIcon.svg';
-import React, { useState, SyntheticEvent, useContext } from 'react';
+import React, { SyntheticEvent, useContext, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Delete, Edit } from '@mui/icons-material';
 import { getProjectEditPath } from 'utils/routePathHelpers';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import {
-    UPDATE_PROJECT,
     DELETE_PROJECT,
+    UPDATE_PROJECT,
 } from 'component/providers/AccessProvider/permissions';
 import AccessContext from 'contexts/AccessContext';
 import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId';
@@ -76,6 +76,7 @@ export const ProjectCard = ({
                             onClick={onFavorite}
                             isFavorite={isFavorite}
                             size="medium"
+                            sx={{ ml: -1 }}
                         />
                     )}
                 />