-
-
Notifications
You must be signed in to change notification settings - Fork 656
/
InsightsHeader.tsx
121 lines (112 loc) · 3.87 KB
/
InsightsHeader.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import type { ReactNode, VFC } from 'react';
import { useUiFlag } from 'hooks/useUiFlag';
import { useFeedback } from 'component/feedbackNew/useFeedback';
import ReviewsOutlined from '@mui/icons-material/ReviewsOutlined';
import {
Button,
Typography,
styled,
useMediaQuery,
useTheme,
} from '@mui/material';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { Badge } from 'component/common/Badge/Badge';
import { ShareLink } from './ShareLink/ShareLink';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
type DashboardHeaderProps = {
actions?: ReactNode;
};
const StyledActionsContainer = styled('div')(({ theme }) => ({
display: 'flex',
gap: theme.spacing(1),
[theme.breakpoints.down('md')]: {
flexDirection: 'column',
gap: theme.spacing(1),
},
}));
const StyledActionButtons = styled('div')(({ theme }) => ({
display: 'flex',
gap: theme.spacing(1),
}));
const StyledExternalActionsContainer = styled('div')(({ theme }) => ({
display: 'flex',
gap: theme.spacing(1),
width: 300,
[theme.breakpoints.down('md')]: {
width: '100%',
},
}));
const StyledActionsSmallScreen = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-end',
gap: theme.spacing(1),
marginTop: theme.spacing(2),
}));
export const InsightsHeader: VFC<DashboardHeaderProps> = ({ actions }) => {
const showInactiveUsers = useUiFlag('showInactiveUsers');
const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
const { openFeedback } = useFeedback(
'insights',
'automatic',
showInactiveUsers ? 'withInactiveUsers' : 'withoutInactiveUsers',
);
const createFeedbackContext = () => {
openFeedback({
title: 'How easy was it to use insights?',
positiveLabel: 'What do you like most about insights?',
areasForImprovementsLabel: 'What should be improved in insights?',
});
};
return (
<>
<PageHeader
titleElement={
<Typography
variant='h1'
component='div'
sx={(theme) => ({
display: 'flex',
alignItems: 'center',
gap: theme.spacing(1),
})}
>
<span>Insights</span>{' '}
<Badge color='success'>Beta</Badge>
</Typography>
}
actions={
<StyledActionsContainer>
<ConditionallyRender
condition={!isSmallScreen}
show={
<StyledExternalActionsContainer>
{actions}
</StyledExternalActionsContainer>
}
/>
<StyledActionButtons>
<ShareLink />
<Button
startIcon={<ReviewsOutlined />}
variant='outlined'
onClick={createFeedbackContext}
>
Provide feedback
</Button>
</StyledActionButtons>
</StyledActionsContainer>
}
/>
<ConditionallyRender
condition={isSmallScreen}
show={
<StyledActionsSmallScreen>
{actions}
</StyledActionsSmallScreen>
}
/>
</>
);
};