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

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

* refactor: show env buttons when missing permission

frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentActionCell.tsx

@@ -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 { useState } from 'react';
-import { useContext, 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}
+                disabled={environment.protected}
+                tooltip={
+                    environment.enabled
+                        ? `Disable environment ${environment.name}`
+                        : `Enable environment ${environment.name}`
+                }
                 onClick={() => setToggleModal(true)}
-                                    disabled={environment.protected}
-                                    inputProps={{ 'aria-labelledby': toggleId }}
             />
-                            </div>
-                        </Tooltip>
             <ActionCell.Divider />
-                    </>
+            <PermissionIconButton
-                }
+                permission={UPDATE_ENVIRONMENT}
-            />
-            <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"
+                tooltipProps={{
+                    title: environment.protected
+                        ? 'You cannot edit protected environment'
+                        : 'Edit environment',
+                }}
+                onClick={() => navigate(`/environments/${environment.name}`)}
             >
                 <Edit />
-                            </IconButton>
+            </PermissionIconButton>
-                        </span>
+            <PermissionIconButton
-                    </Tooltip>
+                permission={DELETE_ENVIRONMENT}
-                }
-            />
-            <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"
+                tooltipProps={{
+                    title: environment.protected
+                        ? 'You cannot delete protected environment'
+                        : 'Delete environment',
+                }}
+                onClick={() => setDeleteModal(true)}
             >
                 <Delete />
-                            </IconButton>
+            </PermissionIconButton>
-                        </span>
-                    </Tooltip>
-                }
-            />
             <EnvironmentDeleteConfirm
                 env={environment}
                 setDeldialogue={setDeleteModal}

frontend/src/component/environments/EnvironmentTable/EnvironmentRow/EnvironmentRow.tsx

@@ -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}>