Skip to content
This repository has been archived by the owner on Oct 27, 2022. It is now read-only.

Commit

Permalink
Merge branch 'main' into task/Add_strategy_information_to_playground_…
Browse files Browse the repository at this point in the history 
…results
  • Loading branch information
@andreas-unleash
andreas-unleash committed Aug 8, 2022
2 parents 0126604 + ab5df41 commit 0b29048
Show file tree
Hide file tree
Showing 17 changed files with 306 additions and 144 deletions.
39 changes: 13 additions & 26 deletions src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -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',
Expand Down
64 changes: 35 additions & 29 deletions src/component/admin/groups/Group/Group.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -140,38 +139,44 @@ 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>
),
maxWidth: 100,
disableSortBy: true,
},
],
[setSelectedUser, setRemoveUserOpen]
[setSelectedUser, setRemoveUserOpen, group?.users.length]
);

const [searchParams, setSearchParams] = useSearchParams();
Expand Down Expand Up @@ -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>
</>
}
>
Expand Down Expand Up @@ -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>
Expand Down
13 changes: 6 additions & 7 deletions src/component/admin/groups/Group/RemoveGroupUser/RemoveGroupUser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
12 changes: 10 additions & 2 deletions src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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[];
Expand Down Expand Up @@ -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[],
Expand All @@ -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}
Expand Down
20 changes: 13 additions & 7 deletions src/component/admin/groups/GroupsList/GroupsList.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>>;
Expand All @@ -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(
Expand Down Expand Up @@ -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>
</>
}
>
Expand Down
10 changes: 5 additions & 5 deletions src/component/admin/groups/RemoveGroup/RemoveGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion src/component/common/MainHeader/MainHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const StyledMainHeader = styled(Paper)(({ theme }) => ({

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

Expand Down

0 comments on commit 0b29048

Please sign in to comment.