Skip to content

Commit

Permalink
Fix/favorites UI improvements (#2636)
Browse files Browse the repository at this point in the history 
<!-- 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>
  • Loading branch information
@andreas-unleash
andreas-unleash committed Dec 8, 2022
1 parent 2107834 commit 6bccffe
Show file tree
Hide file tree
Showing 8 changed files with 155 additions and 115 deletions.
54 changes: 31 additions & 23 deletions frontend/src/component/common/FavoriteIconButton/FavoriteIconButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -22,20 +23,20 @@ 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={{
mx: -0.75,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: 1.25,
}}
onClick={onToggle}
size="small"
Expand All @@ -46,6 +47,6 @@ export const FavoriteIconHeader: VFC<IFavoriteIconHeaderProps> = ({
elseShow={<StarBorderIcon fontSize="small" />}
/>
</IconButton>
</Tooltip>
</TooltipResolver>
);
};
26 changes: 20 additions & 6 deletions frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
Expand Down
16 changes: 5 additions & 11 deletions frontend/src/component/feature/FeatureView/FeatureView.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -130,6 +123,7 @@ export const FeatureView = () => {
<FavoriteIconButton
onClick={onFavorite}
isFavorite={feature?.favorite}
sx={{ pr: 0.25 }}
/>
)}
/>
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/component/project/Project/Project.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
Expand Down
152 changes: 87 additions & 65 deletions frontend/src/component/project/Project/Project.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 }) => ({
Expand Down Expand Up @@ -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} />
Expand Down

0 comments on commit 6bccffe

Please sign in to comment.