Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

Fix/favorites UI improvements (#2636)

Browse Source 
<!-- 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>
This commit is contained in:
andreas-unleash 2022-12-08 14:41:51 +02:00 committed by GitHub
parent 2107834768
commit 6bccffef97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 155 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/component/common/FavoriteIconButton/FavoriteIconButton.tsx
View File

@ -1,50 +1,58 @@
import React, { VFC } from 'react'; import React, { VFC } from 'react';
import { Dialogue } from 'component/common/Dialogue/Dialogue'; import { IconButton, SxProps, Theme } from '@mui/material';
import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
import useToast from 'hooks/useToast';
import { formatUnknownError } from 'utils/formatUnknownError';
import { IconButton } from '@mui/material';
import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
import { import {
Star as StarIcon, Star as StarIcon,
StarBorder as StarBorderIcon, StarBorder as StarBorderIcon,
} from '@mui/icons-material'; } from '@mui/icons-material';
import { TooltipResolver } from '../TooltipResolver/TooltipResolver';
interface IFavoriteIconButtonProps { interface IFavoriteIconButtonProps {
onClick: (event?: any) => void; onClick: (event?: any) => void;
isFavorite: boolean; isFavorite: boolean;
size?: 'medium' | 'large'; size?: 'medium' | 'large';
sx?: SxProps<Theme>;
} }
export const FavoriteIconButton: VFC<IFavoriteIconButtonProps> = ({ export const FavoriteIconButton: VFC<IFavoriteIconButtonProps> = ({
onClick, onClick,
isFavorite, isFavorite,
size = 'large', size = 'large',
sx,
}) => { }) => {
return ( return (
<IconButton size={size} data-loading sx={{ mr: 1 }} onClick={onClick}> <IconButton
size={size}
data-loading
sx={{ mr: 1, ...sx }}
onClick={onClick}
>
<ConditionallyRender <ConditionallyRender
condition={isFavorite} condition={isFavorite}
show={ show={
<StarIcon <TooltipResolver title={'Remove from favorites'}>
color="primary" <StarIcon
sx={{ color="primary"
fontSize: theme => sx={{
size === 'medium' fontSize: theme =>
? theme.spacing(2) size === 'medium'
: theme.spacing(3), ? theme.spacing(2)
}} : theme.spacing(3),
/> }}
/>
</TooltipResolver>
} }
elseShow={ elseShow={
<StarBorderIcon <TooltipResolver title={'Add to favorites'}>
sx={{ <StarBorderIcon
fontSize: theme => sx={{
size === 'medium' fontSize: theme =>
? theme.spacing(2) size === 'medium'
: theme.spacing(3), ? theme.spacing(2)
}} : theme.spacing(3),
/> }}
/>
</TooltipResolver>
} }
/> />
</IconButton> </IconButton>

9
frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx
View File

@ -1,10 +1,11 @@
import { useState, VFC } from 'react'; import { useState, VFC } from 'react';
import { IconButton, Tooltip } from '@mui/material'; import { IconButton } from '@mui/material';
import { import {
Star as StarIcon, Star as StarIcon,
StarBorder as StarBorderIcon, StarBorder as StarBorderIcon,
} from '@mui/icons-material'; } from '@mui/icons-material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { TooltipResolver } from '../../TooltipResolver/TooltipResolver';
interface IFavoriteIconHeaderProps { interface IFavoriteIconHeaderProps {
isActive: boolean; isActive: boolean;
@ -22,13 +23,12 @@ export const FavoriteIconHeader: VFC<IFavoriteIconHeaderProps> = ({
}; };
return ( return (
<Tooltip <TooltipResolver
title={ title={
internalState internalState
? 'Unpin favorite features from the top' ? 'Unpin favorite features from the top'
: 'Pin favorite features to the top' : 'Pin favorite features to the top'
} }
placement="bottom-start"
> >
<IconButton <IconButton
sx={{ sx={{
@ -36,6 +36,7 @@ export const FavoriteIconHeader: VFC<IFavoriteIconHeaderProps> = ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
padding: 1.25,
}} }}
onClick={onToggle} onClick={onToggle}
size="small" size="small"
@ -46,6 +47,6 @@ export const FavoriteIconHeader: VFC<IFavoriteIconHeaderProps> = ({
elseShow={<StarBorderIcon fontSize="small" />} elseShow={<StarBorderIcon fontSize="small" />}
/> />
</IconButton> </IconButton>
</Tooltip> </TooltipResolver>
); );
}; };

26
frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx
View File

@ -5,6 +5,7 @@ import {
StarBorder as StarBorderIcon, StarBorder as StarBorderIcon,
} from '@mui/icons-material'; } from '@mui/icons-material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { TooltipResolver } from '../../../TooltipResolver/TooltipResolver';
interface IFavoriteIconCellProps { interface IFavoriteIconCellProps {
value?: boolean; value?: boolean;
@ -26,14 +27,27 @@ export const FavoriteIconCell: VFC<IFavoriteIconCellProps> = ({
<ConditionallyRender <ConditionallyRender
condition={value} condition={value}
show={ show={
<IconButton onClick={onClick} color="primary" size="small"> <TooltipResolver title={'Remove from favorites'}>
<StarIcon fontSize="small" /> <IconButton
</IconButton> onClick={onClick}
color="primary"
size="small"
sx={{ padding: 1.25 }}
>
<StarIcon fontSize="small" />
</IconButton>
</TooltipResolver>
} }
elseShow={ elseShow={
<InactiveIconButton onClick={onClick} size="small"> <TooltipResolver title={'Add to favorites'}>
<StarBorderIcon fontSize="small" /> <InactiveIconButton
</InactiveIconButton> onClick={onClick}
size="small"
sx={{ padding: 1.25 }}
>
<StarBorderIcon fontSize="small" />
</InactiveIconButton>
</TooltipResolver>
} }
/> />
</Box> </Box>

16
frontend/src/component/feature/FeatureView/FeatureView.tsx
View File

@ -1,19 +1,12 @@
import { IconButton, Tab, Tabs, useMediaQuery } from '@mui/material'; import { Tab, Tabs, useMediaQuery } from '@mui/material';
import React, { useCallback, useState } from 'react'; import React, { useState } from 'react';
import { import { Archive, FileCopy, Label, WatchLater } from '@mui/icons-material';
Archive,
FileCopy,
Label,
WatchLater,
Star as StarIcon,
StarBorder as StarBorderIcon,
} from '@mui/icons-material';
import { import {
Link, Link,
Route, Route,
useNavigate,
Routes, Routes,
useLocation, useLocation,
useNavigate,
} from 'react-router-dom'; } from 'react-router-dom';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import useProject from 'hooks/api/getters/useProject/useProject'; import useProject from 'hooks/api/getters/useProject/useProject';
@ -130,6 +123,7 @@ export const FeatureView = () => {
<FavoriteIconButton <FavoriteIconButton
onClick={onFavorite} onClick={onFavorite}
isFavorite={feature?.favorite} isFavorite={feature?.favorite}
sx={{ pr: 0.25 }}
/> />
)} )}
/> />

3
frontend/src/component/project/Project/Project.styles.ts
View File

@ -19,7 +19,8 @@ export const useStyles = makeStyles()(theme => ({
innerContainer: { innerContainer: {
padding: '1.25rem 2rem', padding: '1.25rem 2rem',
display: 'flex', display: 'flex',
alignItems: 'center', flexDirection: 'column',
alignItems: 'start',
}, },
separator: { separator: {
width: '100%', width: '100%',

152
frontend/src/component/project/Project/Project.tsx
View File

@ -20,7 +20,7 @@ import {
} from 'component/providers/AccessProvider/permissions'; } from 'component/providers/AccessProvider/permissions';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; 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 { DeleteProjectDialogue } from './DeleteProject/DeleteProjectDialogue';
import { ProjectLog } from './ProjectLog/ProjectLog'; import { ProjectLog } from './ProjectLog/ProjectLog';
import { ChangeRequestOverview } from 'component/changeRequest/ChangeRequestOverview/ChangeRequestOverview'; import { ChangeRequestOverview } from 'component/changeRequest/ChangeRequestOverview/ChangeRequestOverview';
@ -31,17 +31,28 @@ import { ProjectSettings } from './ProjectSettings/ProjectSettings';
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { FavoriteIconButton } from '../../common/FavoriteIconButton/FavoriteIconButton'; import { FavoriteIconButton } from '../../common/FavoriteIconButton/FavoriteIconButton';
import { useFavoriteProjectsApi } from '../../../hooks/api/actions/useFavoriteProjectsApi/useFavoriteProjectsApi'; import { useFavoriteProjectsApi } from '../../../hooks/api/actions/useFavoriteProjectsApi/useFavoriteProjectsApi';
import { CenteredNavLink } from '../../admin/menu/CenteredNavLink';
const StyledDiv = styled('div')(() => ({ const StyledDiv = styled('div')(() => ({
display: 'flex', 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 }) => ({ const StyledName = styled('div')(({ theme }) => ({
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
paddingBottom: theme.spacing(2), paddingTop: theme.spacing(1),
})); }));
const StyledTitle = styled('span')(({ theme }) => ({ const StyledTitle = styled('span')(({ theme }) => ({
@ -168,71 +179,82 @@ const Project = () => {
> >
<div className={styles.header}> <div className={styles.header}>
<div className={styles.innerContainer}> <div className={styles.innerContainer}>
<ConditionallyRender <Row>
condition={Boolean(uiConfig?.flags?.favorites)} <ConditionallyRender
show={() => ( condition={Boolean(uiConfig?.flags?.favorites)}
<FavoriteIconButton show={() => (
onClick={onFavorite} <FavoriteIconButton
isFavorite={project?.favorite} onClick={onFavorite}
/> isFavorite={project?.favorite}
)} sx={{ pl: 0, pr: 0.25 }}
/> />
<h2 className={styles.title}> )}
<div> />
<h2 className={styles.title}>
<StyledName data-loading>{projectName}</StyledName> <StyledName data-loading>{projectName}</StyledName>
<ConditionallyRender </h2>
condition={Boolean(project.description)} </Row>
show={ <Column>
<StyledDiv> <h2 className={styles.title}>
<StyledTitle data-loading> <div>
Description:&nbsp; <ConditionallyRender
</StyledTitle> condition={Boolean(project.description)}
<StyledText data-loading> show={
{project.description} <StyledDiv>
</StyledText> <StyledTitle data-loading>
</StyledDiv> 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> <StyledDiv>
<StyledTitle data-loading> <PermissionIconButton
projectId:&nbsp; permission={UPDATE_PROJECT}
</StyledTitle> projectId={projectId}
<StyledText data-loading> sx={{
{projectId} visibility: isOss()
</StyledText> ? '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> </StyledDiv>
</div> </h2>
<StyledDiv> </Column>
<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>
</div> </div>
<div className={styles.separator} /> <div className={styles.separator} />

5
frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
View File

@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
import { useMediaQuery, useTheme } from '@mui/material'; import { useMediaQuery, useTheme } from '@mui/material';
import { Add } from '@mui/icons-material'; import { Add } from '@mui/icons-material';
import { useNavigate, useSearchParams } from 'react-router-dom'; 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 { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { PageHeader } from 'component/common/PageHeader/PageHeader'; import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { PageContent } from 'component/common/PageContent/PageContent'; 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 { UpdateEnabledMessage } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/UpdateEnabledMessage';
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { IFeatureToggleListItem } from 'interfaces/featureToggle'; import { IFeatureToggleListItem } from 'interfaces/featureToggle';
import { FeatureTagCell } from 'component/common/Table/cells/FeatureTagCell/FeatureTagCell';
import { FavoriteIconHeader } from 'component/common/Table/FavoriteIconHeader/FavoriteIconHeader'; import { FavoriteIconHeader } from 'component/common/Table/FavoriteIconHeader/FavoriteIconHeader';
import { FavoriteIconCell } from 'component/common/Table/cells/FavoriteIconCell/FavoriteIconCell'; import { FavoriteIconCell } from 'component/common/Table/cells/FavoriteIconCell/FavoriteIconCell';
import { useEnvironmentsRef } from './hooks/useEnvironmentsRef'; 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> & { const defaultSort: SortingRule<string> & {
columns?: string[]; columns?: string[];

5
frontend/src/component/project/ProjectCard/ProjectCard.tsx
View File

@ -2,14 +2,14 @@ import { Card, Menu, MenuItem } from '@mui/material';
import { useStyles } from './ProjectCard.styles'; import { useStyles } from './ProjectCard.styles';
import MoreVertIcon from '@mui/icons-material/MoreVert'; import MoreVertIcon from '@mui/icons-material/MoreVert';
import { ReactComponent as ProjectIcon } from 'assets/icons/projectIcon.svg'; 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 { useNavigate } from 'react-router-dom';
import { Delete, Edit } from '@mui/icons-material'; import { Delete, Edit } from '@mui/icons-material';
import { getProjectEditPath } from 'utils/routePathHelpers'; import { getProjectEditPath } from 'utils/routePathHelpers';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton'; import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import { import {
UPDATE_PROJECT,
DELETE_PROJECT, DELETE_PROJECT,
UPDATE_PROJECT,
} from 'component/providers/AccessProvider/permissions'; } from 'component/providers/AccessProvider/permissions';
import AccessContext from 'contexts/AccessContext'; import AccessContext from 'contexts/AccessContext';
import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId'; import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId';
@ -76,6 +76,7 @@ export const ProjectCard = ({
onClick={onFavorite} onClick={onFavorite}
isFavorite={isFavorite} isFavorite={isFavorite}
size="medium" size="medium"
sx={{ ml: -1 }}
/> />
)} )}
/> />