Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-03-27 00:19:39 +01:00
Code Issues Projects Releases Wiki Activity

refactor: show env buttons when missing permission (#1111)

Browse Source 
* refactor: disable environment drag-and-drop when missing permission

* refactor: show env buttons when missing permission
This commit is contained in:
olav 2022-06-22 13:13:08 +02:00 committed by GitHub
parent b4197e54e6
commit 7d909c6b66
2 changed files with 43 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentActionCell.tsx
View File

@ -4,11 +4,8 @@ import {
UPDATE_ENVIRONMENT,
} from 'component/providers/AccessProvider/permissions';
import { Edit, Delete } from '@mui/icons-material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { IconButton, Tooltip } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import AccessContext from 'contexts/AccessContext';
import { useContext, useState } from 'react';
import { useState } from 'react';
import { IEnvironment } from 'interfaces/environments';
import { formatUnknownError } from 'utils/formatUnknownError';
import EnvironmentToggleConfirm from '../../EnvironmentToggleConfirm/EnvironmentToggleConfirm';
@ -17,8 +14,8 @@ import useEnvironmentApi from 'hooks/api/actions/useEnvironmentApi/useEnvironmen
import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
import useToast from 'hooks/useToast';
import { useId } from 'hooks/useId';
import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
interface IEnvironmentTableActionsProps {
environment: IEnvironment;
@ -28,9 +25,6 @@ export const EnvironmentActionCell = ({
environment,
}: IEnvironmentTableActionsProps) => {
const navigate = useNavigate();
const { hasAccess } = useContext(AccessContext);
const updatePermission = hasAccess(UPDATE_ENVIRONMENT);
const { setToastApiError, setToastData } = useToast();
const { refetchEnvironments } = useEnvironments();
const { refetch: refetchPermissions } = useProjectRolePermissions();
@ -95,88 +89,46 @@ export const EnvironmentActionCell = ({
}
};
const toggleIconTooltip = environment.enabled
? `Disable environment ${environment.name}`
: `Enable environment ${environment.name}`;
const toggleId = useId();
const editId = useId();
const deleteId = useId();
return (
<ActionCell>
<ConditionallyRender
condition={updatePermission}
show={
<>
<Tooltip title={toggleIconTooltip} arrow>
<div id={toggleId}>
<PermissionSwitch
permission={UPDATE_ENVIRONMENT}
checked={environment.enabled}
onClick={() => setToggleModal(true)}
disabled={environment.protected}
inputProps={{ 'aria-labelledby': toggleId }}
/>
</div>
</Tooltip>
<ActionCell.Divider />
</>
}
/>
<ConditionallyRender
condition={updatePermission}
show={
<Tooltip
title={
environment.protected
? 'You cannot edit protected environment'
: 'Edit environment'
}
arrow
>
<span id={editId}>
<IconButton
aria-labelledby={editId}
disabled={environment.protected}
onClick={() => {
navigate(
`/environments/${environment.name}`
);
}}
size="large"
>
<Edit />
</IconButton>
</span>
</Tooltip>
}
/>
<ConditionallyRender
condition={hasAccess(DELETE_ENVIRONMENT)}
show={
<Tooltip
title={
environment.protected
? 'You cannot delete protected environment'
: 'Delete environment'
}
describeChild
arrow
>
<span id={deleteId}>
<IconButton
aria-labelledby={deleteId}
disabled={environment.protected}
onClick={() => setDeleteModal(true)}
size="large"
>
<Delete />
</IconButton>
</span>
</Tooltip>
<PermissionSwitch
permission={UPDATE_ENVIRONMENT}
checked={environment.enabled}
disabled={environment.protected}
tooltip={
environment.enabled
? `Disable environment ${environment.name}`
: `Enable environment ${environment.name}`
}
onClick={() => setToggleModal(true)}
/>
<ActionCell.Divider />
<PermissionIconButton
permission={UPDATE_ENVIRONMENT}
disabled={environment.protected}
size="large"
tooltipProps={{
title: environment.protected
? 'You cannot edit protected environment'
: 'Edit environment',
}}
onClick={() => navigate(`/environments/${environment.name}`)}
>
<Edit />
</PermissionIconButton>
<PermissionIconButton
permission={DELETE_ENVIRONMENT}
disabled={environment.protected}
size="large"
tooltipProps={{
title: environment.protected
? 'You cannot delete protected environment'
: 'Delete environment',
}}
onClick={() => setDeleteModal(true)}
>
<Delete />
</PermissionIconButton>
<EnvironmentDeleteConfirm
env={environment}
setDeldialogue={setDeleteModal}

6
frontend/src/component/environments/EnvironmentTable/EnvironmentRow/EnvironmentRow.tsx
View File

@ -3,6 +3,9 @@ import { Row } from 'react-table';
import { TableRow } from '@mui/material';
import { TableCell } from 'component/common/Table';
import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { UPDATE_ENVIRONMENT } from 'component/providers/AccessProvider/permissions';
import AccessContext from 'contexts/AccessContext';
import { useContext } from 'react';
interface IEnvironmentRowProps {
row: Row;
@ -10,9 +13,10 @@ interface IEnvironmentRowProps {
}
export const EnvironmentRow = ({ row, moveListItem }: IEnvironmentRowProps) => {
const { hasAccess } = useContext(AccessContext);
const dragItemRef = useDragItem(row.index, moveListItem);
const { searchQuery } = useSearchHighlightContext();
const draggable = !searchQuery;
const draggable = !searchQuery && hasAccess(UPDATE_ENVIRONMENT);
return (
<TableRow hover ref={draggable ? dragItemRef : undefined}>