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

Merge branch 'main' into task/Add_strategy_information_to_playground_results

Browse Source
This commit is contained in:
andreas-unleash 2022-08-08 14:07:08 +03:00 committed by GitHub
commit 74ccde2096
17 changed files with 306 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx
View File

@ -18,18 +18,19 @@ import { CopyApiTokenButton } from 'component/admin/apiToken/CopyApiTokenButton/
import { RemoveApiTokenButton } from 'component/admin/apiToken/RemoveApiTokenButton/RemoveApiTokenButton';
import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
import { sortTypes } from 'utils/sortTypes';
import { useEffect, useMemo } from 'react';
import { useMemo } from 'react';
import theme from 'themes/theme';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { ProjectsList } from 'component/admin/apiToken/ProjectsList/ProjectsList';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
import { Search } from 'component/common/Search/Search';
import useHiddenColumns from 'hooks/useHiddenColumns';
export const ApiTokenTable = () => {
const { tokens, loading } = useApiTokens();
const hiddenColumns = useHiddenColumns();
const initialState = useMemo(() => ({ sortBy: [{ id: 'createdAt' }] }), []);
const { uiConfig } = useUiConfig();
const {
getTableProps,
@ -52,9 +53,16 @@ export const ApiTokenTable = () => {
useSortBy
);
useEffect(() => {
setHiddenColumns(hiddenColumns);
}, [setHiddenColumns, hiddenColumns]);
useHiddenColumns(
setHiddenColumns,
['Icon', 'createdAt'],
useMediaQuery(theme.breakpoints.down('md'))
);
useHiddenColumns(
setHiddenColumns,
['projects', 'environment'],
!uiConfig.flags.E
);
return (
<PageContent
@ -124,27 +132,6 @@ export const ApiTokenTable = () => {
);
};
const useHiddenColumns = (): string[] => {
const { uiConfig } = useUiConfig();
const isMediumScreen = useMediaQuery(theme.breakpoints.down('md'));
return useMemo(() => {
const hidden: string[] = [];
if (!uiConfig.flags.E) {
hidden.push('projects');
hidden.push('environment');
}
if (isMediumScreen) {
hidden.push('Icon');
hidden.push('createdAt');
}
return hidden;
}, [uiConfig, isMediumScreen]);
};
const COLUMNS = [
{
id: 'Icon',

64
frontend/src/component/admin/groups/Group/Group.tsx
View File

@ -1,13 +1,12 @@
import { useEffect, useMemo, useState, VFC } from 'react';
import {
Button,
IconButton,
styled,
Tooltip,
useMediaQuery,
useTheme,
} from '@mui/material';
import { useSearchParams } from 'react-router-dom';
import { useSearchParams, Link } from 'react-router-dom';
import { SortingRule, useFlexLayout, useSortBy, useTable } from 'react-table';
import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
import { useGroup } from 'hooks/api/getters/useGroup/useGroup';
@ -26,17 +25,17 @@ import { HighlightCell } from 'component/common/Table/cells/HighlightCell/Highli
import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell';
import { GroupUserRoleCell } from 'component/admin/groups/GroupUserRoleCell/GroupUserRoleCell';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import { Delete, Edit } from '@mui/icons-material';
import { Add, Delete, Edit } from '@mui/icons-material';
import { ADMIN } from 'component/providers/AccessProvider/permissions';
import { MainHeader } from 'component/common/MainHeader/MainHeader';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { RemoveGroup } from 'component/admin/groups/RemoveGroup/RemoveGroup';
import { Link } from 'react-router-dom';
import { ActionCell } from 'component/common/Table/cells/ActionCell/ActionCell';
import { AddGroupUser } from './AddGroupUser/AddGroupUser';
import { EditGroupUser } from './EditGroupUser/EditGroupUser';
import { RemoveGroupUser } from './RemoveGroupUser/RemoveGroupUser';
import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
import {
UG_EDIT_BTN_ID,
UG_DELETE_BTN_ID,
@ -140,30 +139,36 @@ export const Group: VFC = () => {
Cell: ({ row: { original: rowUser } }: any) => (
<ActionCell>
<Tooltip title="Edit user" arrow describeChild>
<IconButton
data-testid={`${UG_EDIT_USER_BTN_ID}-${rowUser.id}`}
onClick={() => {
setSelectedUser(rowUser);
setEditUserOpen(true);
}}
>
<Edit />
</IconButton>
<span>
<IconButton
data-testid={`${UG_EDIT_USER_BTN_ID}-${rowUser.id}`}
disabled={group?.users.length === 1}
onClick={() => {
setSelectedUser(rowUser);
setEditUserOpen(true);
}}
>
<Edit />
</IconButton>
</span>
</Tooltip>
<Tooltip
title="Remove user from group"
arrow
describeChild
>
<IconButton
data-testid={`${UG_REMOVE_USER_BTN_ID}-${rowUser.id}`}
onClick={() => {
setSelectedUser(rowUser);
setRemoveUserOpen(true);
}}
>
<Delete />
</IconButton>
<span>
<IconButton
data-testid={`${UG_REMOVE_USER_BTN_ID}-${rowUser.id}`}
disabled={group?.users.length === 1}
onClick={() => {
setSelectedUser(rowUser);
setRemoveUserOpen(true);
}}
>
<Delete />
</IconButton>
</span>
</Tooltip>
</ActionCell>
),
@ -171,7 +176,7 @@ export const Group: VFC = () => {
disableSortBy: true,
},
],
[setSelectedUser, setRemoveUserOpen]
[setSelectedUser, setRemoveUserOpen, group?.users.length]
);
const [searchParams, setSearchParams] = useSearchParams();
@ -306,16 +311,17 @@ export const Group: VFC = () => {
</>
}
/>
<Button
<ResponsiveButton
data-testid={UG_ADD_USER_BTN_ID}
variant="contained"
color="primary"
onClick={() => {
setAddUserOpen(true);
}}
maxWidth="700px"
Icon={Add}
permission={ADMIN}
>
Add user
</Button>
</ResponsiveButton>
</>
}
>
@ -376,13 +382,13 @@ export const Group: VFC = () => {
<EditGroupUser
open={editUserOpen}
setOpen={setEditUserOpen}
user={selectedUser!}
user={selectedUser}
group={group!}
/>
<RemoveGroupUser
open={removeUserOpen}
setOpen={setRemoveUserOpen}
user={selectedUser!}
user={selectedUser}
group={group!}
/>
</PageContent>

13
frontend/src/component/admin/groups/Group/RemoveGroupUser/RemoveGroupUser.tsx
View File

@ -47,23 +47,22 @@ export const RemoveGroupUser: FC<IRemoveGroupUserProps> = ({
}
};
const userName = user?.name || user?.username || user?.email;
return (
<Dialogue
open={open && Boolean(user)}
primaryButtonText="Remove"
primaryButtonText="Remove user"
secondaryButtonText="Cancel"
onClick={onRemoveClick}
onClose={() => {
setOpen(false);
}}
title="Remove user from group"
title="Remove user from group?"
>
<Typography>
Are you sure you wish to remove{' '}
<strong>{user?.name || user?.username || user?.email}</strong>{' '}
from <strong>{group.name}</strong>? Removing the user from this
group may also remove their access from projects this group is
assigned to.
Do you really want to remove <strong>{userName}</strong> from{' '}
<strong>{group.name}</strong>? <strong>{userName}</strong> will
lose all access rights granted by this group.
</Typography>
</Dialogue>
);

12
frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx
View File

@ -1,5 +1,5 @@
import { useMemo, VFC } from 'react';
import { IconButton, Tooltip } from '@mui/material';
import { IconButton, Tooltip, useMediaQuery } from '@mui/material';
import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
import { IGroupUser } from 'interfaces/group';
import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
@ -11,6 +11,8 @@ import { VirtualizedTable } from 'component/common/Table';
import { useFlexLayout, useSortBy, useTable } from 'react-table';
import { sortTypes } from 'utils/sortTypes';
import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
import theme from 'themes/theme';
import useHiddenColumns from 'hooks/useHiddenColumns';
interface IGroupFormUsersTableProps {
users: IGroupUser[];
@ -106,7 +108,7 @@ export const GroupFormUsersTable: VFC<IGroupFormUsersTableProps> = ({
[setUsers]
);
const { headerGroups, rows, prepareRow } = useTable(
const { headerGroups, rows, prepareRow, setHiddenColumns } = useTable(
{
columns: columns as any[],
data: users as any[],
@ -119,6 +121,12 @@ export const GroupFormUsersTable: VFC<IGroupFormUsersTableProps> = ({
useFlexLayout
);
useHiddenColumns(
setHiddenColumns,
['imageUrl', 'name'],
useMediaQuery(theme.breakpoints.down('md'))
);
return (
<ConditionallyRender
condition={rows.length > 0}

20
frontend/src/component/admin/groups/GroupsList/GroupsList.tsx
View File

@ -1,6 +1,6 @@
import { useEffect, useMemo, useState, VFC } from 'react';
import { useGroups } from 'hooks/api/getters/useGroups/useGroups';
import { Link, useSearchParams } from 'react-router-dom';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { IGroup } from 'interfaces/group';
import { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
@ -12,6 +12,9 @@ import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightC
import { TablePlaceholder } from 'component/common/Table';
import { GroupCard } from './GroupCard/GroupCard';
import { GroupEmpty } from './GroupEmpty/GroupEmpty';
import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
import { ADMIN } from 'component/providers/AccessProvider/permissions';
import { Add } from '@mui/icons-material';
import { NAVIGATE_TO_CREATE_GROUP } from 'utils/testIds';
type PageQueryType = Partial<Record<'search', string>>;
@ -33,6 +36,7 @@ const groupsSearch = (group: IGroup, searchValue: string) => {
};
export const GroupsList: VFC = () => {
const navigate = useNavigate();
const { groups = [], loading } = useGroups();
const [searchParams, setSearchParams] = useSearchParams();
const [searchValue, setSearchValue] = useState(
@ -81,15 +85,17 @@ export const GroupsList: VFC = () => {
</>
}
/>
<Button
to="/admin/groups/create-group"
component={Link}
variant="contained"
color="primary"
<ResponsiveButton
onClick={() =>
navigate('/admin/groups/create-group')
}
maxWidth="700px"
Icon={Add}
permission={ADMIN}
data-testid={NAVIGATE_TO_CREATE_GROUP}
>
New group
</Button>
</ResponsiveButton>
</>
}
>

10
frontend/src/component/admin/groups/RemoveGroup/RemoveGroup.tsx
View File

@ -42,18 +42,18 @@ export const RemoveGroup: FC<IRemoveGroupProps> = ({
return (
<Dialogue
open={open}
primaryButtonText="Remove"
primaryButtonText="Delete group"
secondaryButtonText="Cancel"
onClick={onRemoveClick}
onClose={() => {
setOpen(false);
}}
title="Delete group"
title="Delete group?"
>
<Typography>
Are you sure you wish to delete <strong>{group.name}</strong>?
If this group is currently assigned to one or more projects then
users belonging to this group may lose access to those projects.
Do you really want to delete <strong>{group.name}</strong>?
Users who are granted access to projects only via this group
will lose access to those projects.
</Typography>
</Dialogue>
);

2
frontend/src/component/common/MainHeader/MainHeader.tsx
View File

@ -13,7 +13,7 @@ const StyledMainHeader = styled(Paper)(({ theme }) => ({
const StyledTitleHeader = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
alignItems: 'flex-start',
justifyContent: 'space-between',
}));

50
frontend/src/component/project/Project/DeleteProject/DeleteProjectDialogue.tsx Normal file
View File

@ -0,0 +1,50 @@
import { Dialogue } from 'component/common/Dialogue/Dialogue';
import React from 'react';
import { formatUnknownError } from 'utils/formatUnknownError';
import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
import useProjects from 'hooks/api/getters/useProjects/useProjects';
import useToast from 'hooks/useToast';
interface IDeleteProjectDialogueProps {
project: string;
open: boolean;
onClose?: () => void;
onSuccess?: () => void;
}
export const DeleteProjectDialogue = ({
open,
onClose,
project,
onSuccess,
}: IDeleteProjectDialogueProps) => {
const { deleteProject } = useProjectApi();
const { refetch: refetchProjectOverview } = useProjects();
const { setToastData, setToastApiError } = useToast();
const onClick = async (e: React.SyntheticEvent) => {
e.preventDefault();
try {
await deleteProject(project);
refetchProjectOverview();
setToastData({
title: 'Deleted project',
type: 'success',
text: 'Successfully deleted project',
});
onSuccess?.();
} catch (ex: unknown) {
setToastApiError(formatUnknownError(ex));
}
onClose?.();
};
return (
<Dialogue
open={open}
onClick={onClick}
onClose={onClose}
title="Really delete project"
/>
);
};

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

@ -18,7 +18,7 @@ export const useStyles = makeStyles()(theme => ({
marginBottom: '1rem',
},
innerContainer: {
padding: '1rem 2rem',
padding: '1.25rem 2rem',
display: 'flex',
alignItems: 'center',
},

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

@ -4,21 +4,44 @@ import useLoading from 'hooks/useLoading';
import ApiError from 'component/common/ApiError/ApiError';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useStyles } from './Project.styles';
import { Tab, Tabs } from '@mui/material';
import { Edit } from '@mui/icons-material';
import { styled, Tab, Tabs } from '@mui/material';
import { Delete, Edit } from '@mui/icons-material';
import useToast from 'hooks/useToast';
import useQueryParams from 'hooks/useQueryParams';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { ProjectAccess } from '../ProjectAccess/ProjectAccess';
import ProjectEnvironment from '../ProjectEnvironment/ProjectEnvironment';
import { ProjectFeaturesArchive } from './ProjectFeaturesArchive/ProjectFeaturesArchive';
import ProjectOverview from './ProjectOverview';
import ProjectHealth from './ProjectHealth/ProjectHealth';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import { UPDATE_PROJECT } from 'component/providers/AccessProvider/permissions';
import {
DELETE_PROJECT,
UPDATE_PROJECT,
} 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 { DeleteProjectDialogue } from './DeleteProject/DeleteProjectDialogue';
const StyledDiv = styled('div')(() => ({
display: 'flex',
}));
const StyledName = styled('div')(({ theme }) => ({
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
paddingBottom: theme.spacing(2),
}));
const StyledTitle = styled('span')(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
fontWeight: 'normal',
}));
const StyledText = styled(StyledTitle)(({ theme }) => ({
color: theme.palette.grey[800],
}));
const Project = () => {
const projectId = useRequiredPathParam('projectId');
@ -33,6 +56,8 @@ const Project = () => {
const basePath = `/projects/${projectId}`;
const projectName = project?.name || projectId;
const [showDelDialog, setShowDelDialog] = useState(false);
const tabs = [
{
title: 'Overview',
@ -85,21 +110,60 @@ const Project = () => {
<div className={styles.header}>
<div className={styles.innerContainer}>
<h2 className={styles.title}>
<div className={styles.titleText} data-loading>
{projectName}
<div>
<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>
}
/>
<StyledDiv>
<StyledTitle data-loading>
projectId:&nbsp;
</StyledTitle>
<StyledText data-loading>
{projectId}
</StyledText>
</StyledDiv>
</div>
<PermissionIconButton
permission={UPDATE_PROJECT}
projectId={projectId}
sx={{ visibility: isOss() ? 'hidden' : 'visible' }}
onClick={() =>
navigate(`/projects/${projectId}/edit`)
}
tooltipProps={{ title: 'Edit project' }}
data-loading
>
<Edit />
</PermissionIconButton>
<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>
</div>
<ConditionallyRender
@ -132,6 +196,16 @@ const Project = () => {
</Tabs>
</div>
</div>
<DeleteProjectDialogue
project={projectId}
open={showDelDialog}
onClose={() => {
setShowDelDialog(false);
}}
onSuccess={() => {
navigate('/projects');
}}
/>
<Routes>
<Route path="health" element={<ProjectHealth />} />
<Route path="access/*" element={<ProjectAccess />} />

4
frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx
View File

@ -47,8 +47,8 @@ const StyledAutocompleteWrapper = styled('div')(({ theme }) => ({
},
}));
const StyledButtonContainer = styled('div')(() => ({
marginTop: 'auto',
const StyledButtonContainer = styled('div')(({ theme }) => ({
marginTop: theme.spacing(6),
display: 'flex',
justifyContent: 'flex-end',
}));

2
frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescription.tsx
View File

@ -9,7 +9,7 @@ const StyledDescription = styled('div')(({ theme }) => ({
padding: theme.spacing(3),
backgroundColor: theme.palette.neutral.light,
color: theme.palette.text.secondary,
fontSize: theme.fontSizes.smallerBody,
fontSize: theme.fontSizes.smallBody,
borderRadius: theme.shape.borderRadiusMedium,
}));

54
frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx
View File

@ -1,8 +1,8 @@
import { useEffect, useMemo, useState, VFC } from 'react';
import { SortingRule, useFlexLayout, useSortBy, useTable } from 'react-table';
import { VirtualizedTable, TablePlaceholder } from 'component/common/Table';
import { Button, useMediaQuery, useTheme } from '@mui/material';
import { Delete, Edit } from '@mui/icons-material';
import { styled, useMediaQuery, useTheme } from '@mui/material';
import { Add, Delete, Edit } from '@mui/icons-material';
import { sortTypes } from 'utils/sortTypes';
import useProjectAccess, {
ENTITY_TYPE,
@ -38,9 +38,11 @@ import { IUser } from 'interfaces/user';
import { IGroup } from 'interfaces/group';
import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
import { ProjectAccessCreate } from 'component/project/ProjectAccess/ProjectAccessCreate/ProjectAccessCreate';
import { ProjectAccessEditUser } from 'component/project/ProjectAccess/ProjectAccessEditUser/ProjectAccessEditUser';
import { ProjectAccessEditGroup } from 'component/project/ProjectAccess/ProjectAccessEditGroup/ProjectAccessEditGroup';
import useHiddenColumns from 'hooks/useHiddenColumns';
export type PageQueryType = Partial<
Record<'sort' | 'order' | 'search', string>
@ -53,6 +55,20 @@ const { value: storedParams, setValue: setStoredParams } = createLocalStorage(
defaultSort
);
const StyledUserAvatars = styled('div')(({ theme }) => ({
display: 'inline-flex',
alignItems: 'center',
flexWrap: 'wrap',
marginLeft: theme.spacing(1),
}));
const StyledEmptyAvatar = styled(UserAvatar)(({ theme }) => ({
marginRight: theme.spacing(-3.5),
}));
const StyledGroupAvatar = styled(UserAvatar)(({ theme }) => ({
outline: `${theme.spacing(0.25)} solid ${theme.palette.background.paper}`,
}));
export const ProjectAccessTable: VFC = () => {
const projectId = useRequiredPathParam('projectId');
@ -77,11 +93,15 @@ export const ProjectAccessTable: VFC = () => {
Header: 'Avatar',
accessor: 'imageUrl',
Cell: ({ row: { original: row } }: any) => (
<TextCell>
<UserAvatar user={row.entity}>
<StyledUserAvatars>
<ConditionallyRender
condition={row.type === ENTITY_TYPE.GROUP}
show={<StyledEmptyAvatar />}
/>
<StyledGroupAvatar user={row.entity}>
{row.entity.users?.length}
</UserAvatar>
</TextCell>
</StyledGroupAvatar>
</StyledUserAvatars>
),
maxWidth: 85,
disableSortBy: true,
@ -124,6 +144,7 @@ export const ProjectAccessTable: VFC = () => {
searchable: true,
},
{
id: 'role',
Header: 'Role',
accessor: (row: IProjectAccess) =>
access?.roles.find(({ id }) => id === row.entity.roleId)
@ -145,6 +166,7 @@ export const ProjectAccessTable: VFC = () => {
maxWidth: 150,
},
{
id: 'lastLogin',
Header: 'Last login',
accessor: (row: IProjectAccess) => {
if (row.type === ENTITY_TYPE.USER) {
@ -240,6 +262,7 @@ export const ProjectAccessTable: VFC = () => {
headerGroups,
rows,
prepareRow,
setHiddenColumns,
state: { sortBy },
} = useTable(
{
@ -258,6 +281,12 @@ export const ProjectAccessTable: VFC = () => {
useFlexLayout
);
useHiddenColumns(
setHiddenColumns,
['imageUrl', 'username', 'role', 'added', 'lastLogin'],
isSmallScreen
);
useEffect(() => {
const tableState: PageQueryType = {};
tableState.sort = sortBy[0].id;
@ -332,14 +361,15 @@ export const ProjectAccessTable: VFC = () => {
</>
}
/>
<Button
component={Link}
to={`create`}
variant="contained"
color="primary"
<ResponsiveButton
onClick={() => navigate('create')}
maxWidth="700px"
Icon={Add}
permission={UPDATE_PROJECT}
projectId={projectId}
>
Assign {entityType}
</Button>
</ResponsiveButton>
</>
}
>

17
frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx
View File

@ -20,17 +20,22 @@ import { IGroup, IGroupUser } from 'interfaces/group';
import { VFC, useState } from 'react';
import { SortingRule, useFlexLayout, useSortBy, useTable } from 'react-table';
import { sortTypes } from 'utils/sortTypes';
import useHiddenColumns from 'hooks/useHiddenColumns';
const StyledPageContent = styled(PageContent)(({ theme }) => ({
height: '100vh',
overflow: 'auto',
padding: theme.spacing(7.5, 6),
[theme.breakpoints.down('md')]: {
padding: theme.spacing(4, 2),
},
'& .header': {
padding: theme.spacing(0, 0, 2, 0),
},
'& .body': {
padding: theme.spacing(3, 0, 0, 0),
},
borderRadius: `${theme.spacing(1.5, 0, 0, 1.5)} !important`,
}));
const StyledTitle = styled('div')(({ theme }) => ({
@ -38,7 +43,7 @@ const StyledTitle = styled('div')(({ theme }) => ({
flexDirection: 'column',
'& > span': {
color: theme.palette.text.secondary,
fontSize: theme.fontSizes.smallBody,
fontSize: theme.fontSizes.bodySize,
},
}));
@ -80,6 +85,7 @@ const columns = [
filterName: 'type',
},
{
id: 'joined',
Header: 'Joined',
accessor: 'joinedAt',
Cell: DateCell,
@ -87,6 +93,7 @@ const columns = [
maxWidth: 150,
},
{
id: 'lastLogin',
Header: 'Last login',
accessor: (row: IGroupUser) => row.seenAt || '',
Cell: ({ row: { original: user } }: any) => (
@ -135,7 +142,7 @@ export const ProjectGroupView: VFC<IProjectGroupViewProps> = ({
group?.users ?? []
);
const { headerGroups, rows, prepareRow } = useTable(
const { headerGroups, rows, prepareRow, setHiddenColumns } = useTable(
{
columns: columns as any[],
data,
@ -149,6 +156,12 @@ export const ProjectGroupView: VFC<IProjectGroupViewProps> = ({
useFlexLayout
);
useHiddenColumns(
setHiddenColumns,
['imageUrl', 'name', 'joined', 'lastLogin'],
useMediaQuery(theme.breakpoints.down('md'))
);
return (
<SidebarModal
open={open}

1
frontend/src/component/project/ProjectCard/ProjectCard.styles.ts
View File

@ -32,6 +32,7 @@ export const useStyles = makeStyles()(theme => ({
boxOrient: 'vertical',
textOverflow: 'ellipsis',
overflow: 'hidden',
alignItems: 'flex-start',
},
projectIcon: {

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

@ -4,21 +4,17 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
import { ReactComponent as ProjectIcon } from 'assets/icons/projectIcon.svg';
import React, { useState, SyntheticEvent, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { Dialogue } from 'component/common/Dialogue/Dialogue';
import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
import useProjects from 'hooks/api/getters/useProjects/useProjects';
import { Delete, Edit } from '@mui/icons-material';
import { getProjectEditPath } from 'utils/routePathHelpers';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import useToast from 'hooks/useToast';
import {
UPDATE_PROJECT,
DELETE_PROJECT,
} from 'component/providers/AccessProvider/permissions';
import { formatUnknownError } from 'utils/formatUnknownError';
import AccessContext from 'contexts/AccessContext';
import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { DeleteProjectDialogue } from '../Project/DeleteProject/DeleteProjectDialogue';
interface IProjectCardProps {
name: string;
@ -40,36 +36,15 @@ export const ProjectCard = ({
const { classes } = useStyles();
const { hasAccess } = useContext(AccessContext);
const { isOss } = useUiConfig();
const { refetch: refetchProjectOverview } = useProjects();
const [anchorEl, setAnchorEl] = useState(null);
const [showDelDialog, setShowDelDialog] = useState(false);
const { deleteProject } = useProjectApi();
const navigate = useNavigate();
const { setToastData, setToastApiError } = useToast();
// @ts-expect-error
const handleClick = e => {
e.preventDefault();
setAnchorEl(e.currentTarget);
};
const onRemoveProject = async (e: React.SyntheticEvent) => {
e.preventDefault();
try {
await deleteProject(id);
refetchProjectOverview();
setToastData({
title: 'Deleted project',
type: 'success',
text: 'Successfully deleted project',
});
} catch (e: unknown) {
setToastApiError(formatUnknownError(e));
}
setShowDelDialog(false);
setAnchorEl(null);
};
const canDeleteProject =
hasAccess(DELETE_PROJECT, id) && id !== DEFAULT_PROJECT_ID;
@ -152,15 +127,13 @@ export const ProjectCard = ({
<p data-loading>members</p>
</div>
</div>
<Dialogue
<DeleteProjectDialogue
project={id}
open={showDelDialog}
onClick={onRemoveProject}
onClose={event => {
event.preventDefault();
onClose={() => {
setAnchorEl(null);
setShowDelDialog(false);
}}
title="Really delete project"
/>
</Card>
);

15
frontend/src/hooks/useHiddenColumns.ts Normal file
View File

@ -0,0 +1,15 @@
import { useEffect } from 'react';
import { IdType } from 'react-table';
const useHiddenColumns = (
setHiddenColumns: <D>(param: Array<IdType<D>>) => void,
hiddenColumns: string[],
condition: boolean
) => {
useEffect(() => {
const hidden = condition ? hiddenColumns : [];
setHiddenColumns(hidden);
}, [setHiddenColumns, condition]);
};
export default useHiddenColumns;