1
1
import React from 'react' ;
2
- import styled from 'styled-components' ;
3
- import { Link as LinkIcon , PencilSimpleLine , X } from '@phosphor-icons/react' ;
2
+ import { Button } from '@src/alchemy-components' ;
4
3
import { Tooltip2 } from '@src/alchemy-components/components/Tooltip2' ;
5
4
import PlatformIcon from '@src/app/sharedV2/icons/PlatformIcon' ;
6
5
import { capitalizeFirstLetter } from '@src/app/shared/textUtil' ;
7
- import { DataPlatform } from '@src/types.generated' ;
6
+ import { DataPlatform , EntityPrivileges } from '@src/types.generated' ;
8
7
import { useIncidentURNCopyLink } from '../hooks' ;
9
- import { IncidentAction } from '../constant' ;
8
+ import { IncidentAction , noPermissionsMessage } from '../constant' ;
10
9
import { IncidentTableRow } from '../types' ;
11
10
import {
12
11
ForPlatformWrapper ,
@@ -16,31 +15,14 @@ import {
16
15
StyledTitle ,
17
16
} from './styledComponents' ;
18
17
19
- const EditButton = styled ( PencilSimpleLine ) `
20
- :hover {
21
- cursor: pointer;
22
- }
23
- ` ;
24
-
25
- const CloseButton = styled ( X ) `
26
- :hover {
27
- cursor: pointer;
28
- }
29
- ` ;
30
-
31
- const LinkButton = styled ( LinkIcon ) `
32
- :hover {
33
- cursor: pointer;
34
- }
35
- ` ;
36
-
37
18
type IncidentDrawerHeaderProps = {
38
19
mode : IncidentAction ;
39
20
onClose ?: ( ) => void ;
40
21
isEditActive : boolean ;
41
22
setIsEditActive : React . Dispatch < React . SetStateAction < boolean > > ;
42
23
data ?: IncidentTableRow ;
43
24
platform ?: DataPlatform ;
25
+ privileges ?: EntityPrivileges ;
44
26
} ;
45
27
46
28
export const IncidentDrawerHeader = ( {
@@ -50,12 +32,18 @@ export const IncidentDrawerHeader = ({
50
32
setIsEditActive,
51
33
data,
52
34
platform,
35
+ privileges,
53
36
} : IncidentDrawerHeaderProps ) => {
54
37
const handleIncidentLinkCopy = useIncidentURNCopyLink ( data ? data ?. urn : '' ) ;
38
+
39
+ const canEditIncidents = privileges ?. canEditIncidents || false ;
40
+
55
41
return (
56
42
< StyledHeader >
57
43
< StyledHeaderTitleContainer >
58
- < StyledTitle > { mode === IncidentAction . CREATE ? 'Create New Incident' : data ?. title } </ StyledTitle >
44
+ < StyledTitle data-testid = "drawer-header-title" >
45
+ { mode === IncidentAction . CREATE ? 'Create New Incident' : data ?. title }
46
+ </ StyledTitle >
59
47
{ platform && (
60
48
< ForPlatformWrapper >
61
49
< PlatformIcon platform = { platform } size = { 16 } styles = { { marginRight : 4 } } />
@@ -66,19 +54,41 @@ export const IncidentDrawerHeader = ({
66
54
< StyledHeaderActions >
67
55
{ mode === IncidentAction . EDIT && isEditActive === false && (
68
56
< >
69
- < Tooltip2 title = "Edit Incident" >
70
- < EditButton
71
- size = { 20 }
72
- onClick = { ( ) => setIsEditActive ( ! isEditActive ) }
73
- data-testid = "edit-incident-icon"
74
- />
57
+ < Tooltip2 title = { canEditIncidents ? 'Edit Incident' : noPermissionsMessage } >
58
+ < span >
59
+ < Button
60
+ icon = "PencilSimpleLine"
61
+ variant = "text"
62
+ iconColor = "gray"
63
+ iconSource = "phosphor"
64
+ onClick = { ( ) => setIsEditActive ( ! isEditActive ) }
65
+ disabled = { ! canEditIncidents }
66
+ data-testid = "edit-incident-icon"
67
+ size = "xl"
68
+ />
69
+ </ span >
75
70
</ Tooltip2 >
76
71
< Tooltip2 title = "Copy Link" >
77
- < LinkButton size = { 20 } onClick = { handleIncidentLinkCopy } />
72
+ < Button
73
+ icon = "Link"
74
+ variant = "text"
75
+ iconColor = "gray"
76
+ iconSource = "phosphor"
77
+ onClick = { handleIncidentLinkCopy }
78
+ size = "xl"
79
+ />
78
80
</ Tooltip2 >
79
81
</ >
80
82
) }
81
- < CloseButton size = { 20 } onClick = { ( ) => onClose ?.( ) } data-testid = "incident-drawer-close-button" />
83
+ < Button
84
+ icon = "X"
85
+ variant = "text"
86
+ iconColor = "gray"
87
+ iconSource = "phosphor"
88
+ onClick = { ( ) => onClose ?.( ) }
89
+ data-testid = "incident-drawer-close-button"
90
+ size = "xl"
91
+ />
82
92
</ StyledHeaderActions >
83
93
</ StyledHeader >
84
94
) ;
0 commit comments