Fix/favorites UI improvements (#2636)

<!-- 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>

frontend/src/component/common/FavoriteIconButton/FavoriteIconButton.tsx

@@ -1,31 +1,36 @@
 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={
+                    <TooltipResolver title={'Remove from favorites'}>
                         <StarIcon
                             color="primary"
                             sx={{
@@ -35,8 +40,10 @@ export const FavoriteIconButton: VFC<IFavoriteIconButtonProps> = ({
                                         : theme.spacing(3),
                             }}
                         />
+                    </TooltipResolver>
                 }
                 elseShow={
+                    <TooltipResolver title={'Add to favorites'}>
                         <StarBorderIcon
                             sx={{
                                 fontSize: theme =>
@@ -45,6 +52,7 @@ export const FavoriteIconButton: VFC<IFavoriteIconButtonProps> = ({
                                         : theme.spacing(3),
                             }}
                         />
+                    </TooltipResolver>
                 }
             />
         </IconButton>

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>
     );
 };

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">
+                <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">
+                <TooltipResolver title={'Add to favorites'}>
+                    <InactiveIconButton
+                        onClick={onClick}
+                        size="small"
+                        sx={{ padding: 1.25 }}
+                    >
                         <StarBorderIcon fontSize="small" />
                     </InactiveIconButton>
+                </TooltipResolver>
             }
         />
     </Box>

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 }}
                                             />
                                         )}
                                     />

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%',

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,18 +179,24 @@ const Project = () => {
         >
             <div className={styles.header}>
                 <div className={styles.innerContainer}>
+                    <Row>
                         <ConditionallyRender
                             condition={Boolean(uiConfig?.flags?.favorites)}
                             show={() => (
                                 <FavoriteIconButton
                                     onClick={onFavorite}
                                     isFavorite={project?.favorite}
+                                    sx={{ pl: 0, pr: 0.25 }}
                                 />
                             )}
                         />
                         <h2 className={styles.title}>
-                        <div>
                             <StyledName data-loading>{projectName}</StyledName>
+                        </h2>
+                    </Row>
+                    <Column>
+                        <h2 className={styles.title}>
+                            <div>
                                 <ConditionallyRender
                                     condition={Boolean(project.description)}
                                     show={
@@ -207,7 +224,9 @@ const Project = () => {
                                     permission={UPDATE_PROJECT}
                                     projectId={projectId}
                                     sx={{
-                                    visibility: isOss() ? 'hidden' : 'visible',
+                                        visibility: isOss()
+                                            ? 'hidden'
+                                            : 'visible',
                                     }}
                                     onClick={() =>
                                         navigate(`/projects/${projectId}/edit`)
@@ -221,7 +240,9 @@ const Project = () => {
                                     permission={DELETE_PROJECT}
                                     projectId={projectId}
                                     sx={{
-                                    visibility: isOss() ? 'hidden' : 'visible',
+                                        visibility: isOss()
+                                            ? 'hidden'
+                                            : 'visible',
                                     }}
                                     onClick={() => {
                                         setShowDelDialog(true);
@@ -233,6 +254,7 @@ const Project = () => {
                                 </PermissionIconButton>
                             </StyledDiv>
                         </h2>
+                    </Column>
                 </div>
 
                 <div className={styles.separator} />

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[];

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 }}
                         />
                     )}
                 />