Skip to content

Commit 61927c2

Browse files
phixMephix
phixMe
and
phix
authored
Visual tweaks after DQ update (#2812)
* Update tooltip refs and other minor visual quirks remedied. * Longer character limit for tooltips --------- Co-authored-by: phix <peter.hicks@astronomer.io>
1 parent df3a7f1 commit 61927c2

13 files changed

Lines changed: 56 additions & 53 deletions

File tree

‎web/src/components/core/chip/MqChip.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const MqChip: React.FC<MqChipProps> = ({
4141
sx={{
4242
display: 'inline-block',
4343
borderRadius: theme.spacing(2),
44-
padding: '2px 8px',
44+
padding: '2px 12px',
4545
cursor: 'pointer',
4646
userSelect: 'none',
4747
boxShadow: selected ? `0 0 2px 3px ${theme.palette.common.white}` : 'initial',
@@ -64,7 +64,9 @@ const MqChip: React.FC<MqChipProps> = ({
6464
)}
6565
{text && (
6666
<Box ml={icon ? 1 : 0} display={'inline'}>
67-
<MqText inline>{text}</MqText>{' '}
67+
<MqText font={'mono'} inline>
68+
{text}
69+
</MqText>
6870
</Box>
6971
)}
7072
</Box>

‎web/src/components/core/tooltip/MQTooltip.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const MQTooltip: React.FC<MqToolTipProps> = ({ title, onOpen, onClose, children,
4040
sx: {
4141
backgroundColor: `${darken(theme.palette.background.paper, 0.1)}`,
4242
color: theme.palette.common.white,
43+
border: `1px solid ${theme.palette.secondary.main}`,
4344
maxWidth: '600px',
4445
fontSize: 14,
4546
},

‎web/src/components/jobs/RunStatus.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
// Copyright 2018-2023 contributors to the Marquez project
22
// SPDX-License-Identifier: Apache-2.0
33

4-
import { Box, Tooltip, createTheme } from '@mui/material'
4+
import { Box, createTheme } from '@mui/material'
55
import { Run } from '../../types/api'
66
import { runStateColor } from '../../helpers/nodes'
77

88
import { useTheme } from '@emotion/react'
9+
import MQTooltip from '../core/tooltip/MQTooltip'
910
import React, { FunctionComponent } from 'react'
1011

1112
interface RunStatusProps {
@@ -17,7 +18,7 @@ const RunStatus: FunctionComponent<RunStatusProps> = (props) => {
1718
const theme = createTheme(useTheme())
1819

1920
return (
20-
<Tooltip title={run.state}>
21+
<MQTooltip title={run.state}>
2122
<Box
2223
mr={1}
2324
sx={{
@@ -28,7 +29,7 @@ const RunStatus: FunctionComponent<RunStatusProps> = (props) => {
2829
}}
2930
style={{ backgroundColor: runStateColor(run.state) }}
3031
/>
31-
</Tooltip>
32+
</MQTooltip>
3233
)
3334
}
3435

‎web/src/components/search/Search.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
import * as Redux from 'redux'
5-
import { Box, darken } from '@mui/material'
5+
import { Box } from '@mui/material'
66
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
77
import { GroupedSearch } from '../../types/api'
88
import { IState } from '../../store/reducers'
@@ -33,14 +33,14 @@ const INITIAL_SEARCH_FILTER = [
3333
icon: faCog,
3434
foregroundColor: theme.palette.common.white,
3535
backgroundColor: theme.palette.primary.main,
36-
text: i18next.t('search.filter.jobs'),
36+
text: 'JOBS',
3737
value: 'JOB',
3838
},
3939
{
4040
icon: faDatabase,
4141
foregroundColor: theme.palette.common.white,
42-
backgroundColor: theme.palette.primary.main,
43-
text: i18next.t('search.filter.datasets'),
42+
backgroundColor: theme.palette.info.main,
43+
text: 'DATASETS',
4444
value: 'DATASET',
4545
},
4646
]
@@ -254,12 +254,12 @@ const Search: React.FC<SearchProps> = (props: SearchProps) => {
254254
return (
255255
<Box
256256
sx={{
257-
borderTop: `2px solid ${theme.palette.common.white}`,
258-
borderBottom: `2px solid ${theme.palette.common.white}`,
257+
borderTop: `2px dashed ${theme.palette.secondary.main}`,
258+
borderBottom: `2px dashed ${theme.palette.secondary.main}`,
259259
padding: `${theme.spacing(1)} ${theme.spacing(3)} ${theme.spacing(
260260
0.5
261261
)} ${theme.spacing(1)}`,
262-
backgroundColor: darken(theme.palette.background.paper, 0.05),
262+
backgroundColor: theme.palette.background.paper,
263263
}}
264264
key={result}
265265
display={'flex'}

‎web/src/components/search/SearchListItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ interface OwnProps {
2323

2424
const searchResultIcon: { [key in JobOrDataset]: JSX.Element } = {
2525
JOB: <FontAwesomeIcon icon={faCog} color={theme.palette.primary.main} />,
26-
DATASET: <FontAwesomeIcon icon={faDatabase} color={theme.palette.primary.main} />,
26+
DATASET: <FontAwesomeIcon icon={faDatabase} color={theme.palette.info.main} />,
2727
}
2828

2929
type DkSearchListItemProps = OwnProps

‎web/src/helpers/nodes.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const searchDelimiterMap = {
5656
type SearchDelimiterMap = typeof searchDelimiterMap
5757

5858
export function parseSearchGroup(nodeId: string, field: keyof SearchDelimiterMap) {
59-
return nodeId.split(':')[searchDelimiterMap[field]] || ''
59+
return decodeURIComponent(nodeId.split(':')[searchDelimiterMap[field]]) || ''
6060
}
6161

6262
export function eventTypeColor(state: EventType) {

‎web/src/routes/column-level/ActionBar.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { ArrowBackIosRounded, Refresh } from '@mui/icons-material'
2-
import { Divider, TextField, Tooltip } from '@mui/material'
2+
import { Divider, TextField } from '@mui/material'
33
import { fetchColumnLineage } from '../../store/actionCreators'
44
import { theme } from '../../helpers/theme'
55
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
66
import Box from '@mui/material/Box'
77
import IconButton from '@mui/material/IconButton'
8+
import MQTooltip from '../../components/core/tooltip/MQTooltip'
89
import MqText from '../../components/core/text/MqText'
910
import React from 'react'
1011

@@ -35,11 +36,11 @@ export const ActionBar = ({ fetchColumnLineage, depth, setDepth }: ActionBarProp
3536
borderColor={theme.palette.secondary.main}
3637
>
3738
<Box display={'flex'} alignItems={'center'}>
38-
<Tooltip title={'Back to datasets'}>
39+
<MQTooltip title={'Back to datasets'}>
3940
<IconButton size={'small'} sx={{ mr: 2 }} onClick={() => navigate('/datasets')}>
4041
<ArrowBackIosRounded fontSize={'small'} />
4142
</IconButton>
42-
</Tooltip>
43+
</MQTooltip>
4344
<MqText heading>Datasets</MqText>
4445
<Divider orientation='vertical' flexItem sx={{ mx: 2 }} />
4546
<Box>
@@ -58,7 +59,7 @@ export const ActionBar = ({ fetchColumnLineage, depth, setDepth }: ActionBarProp
5859
</Box>
5960
</Box>
6061
<Box display={'flex'} alignItems={'center'}>
61-
<Tooltip title={'Refresh'}>
62+
<MQTooltip title={'Refresh'}>
6263
<IconButton
6364
sx={{ mr: 2 }}
6465
color={'primary'}
@@ -71,7 +72,7 @@ export const ActionBar = ({ fetchColumnLineage, depth, setDepth }: ActionBarProp
7172
>
7273
<Refresh fontSize={'small'} />
7374
</IconButton>
74-
</Tooltip>
75+
</MQTooltip>
7576
<TextField
7677
id='column-level-depth'
7778
type='number'

‎web/src/routes/datasets/Datasets.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
TableCell,
1212
TableHead,
1313
TableRow,
14-
Tooltip,
1514
createTheme,
1615
} from '@mui/material'
1716
import { ChevronLeftRounded, ChevronRightRounded, Refresh } from '@mui/icons-material'
@@ -114,7 +113,7 @@ const Datasets: React.FC<DatasetsProps> = ({
114113
</Box>
115114
<Box display={'flex'} alignItems={'center'}>
116115
{isDatasetsLoading && <CircularProgress size={16} />}
117-
<Tooltip title={'Refresh'}>
116+
<MQTooltip title={'Refresh'}>
118117
<IconButton
119118
sx={{ ml: 2 }}
120119
color={'primary'}
@@ -127,7 +126,7 @@ const Datasets: React.FC<DatasetsProps> = ({
127126
>
128127
<Refresh fontSize={'small'} />
129128
</IconButton>
130-
</Tooltip>
129+
</MQTooltip>
131130
</Box>
132131
</Box>
133132
<MqScreenLoad loading={isDatasetsLoading && !isDatasetsInit}>
@@ -213,9 +212,7 @@ const Datasets: React.FC<DatasetsProps> = ({
213212
<Box>
214213
<MqStatus
215214
label={
216-
assertions.find((a) => !a.success)
217-
? 'UNHEALTHILY'
218-
: 'HEALTHY'
215+
assertions.find((a) => !a.success) ? 'UNHEALTHY' : 'HEALTHY'
219216
}
220217
color={datasetFacetsStatus(dataset.facets)}
221218
/>
@@ -252,7 +249,7 @@ const Datasets: React.FC<DatasetsProps> = ({
252249
{Math.min(PAGE_SIZE * (state.page + 1), totalCount)} of {totalCount}
253250
</>
254251
</MqText>
255-
<Tooltip title={i18next.t('events_route.previous_page')}>
252+
<MQTooltip title={i18next.t('events_route.previous_page')}>
256253
<span>
257254
<IconButton
258255
sx={{
@@ -266,8 +263,8 @@ const Datasets: React.FC<DatasetsProps> = ({
266263
<ChevronLeftRounded />
267264
</IconButton>
268265
</span>
269-
</Tooltip>
270-
<Tooltip title={i18next.t('events_route.next_page')}>
266+
</MQTooltip>
267+
<MQTooltip title={i18next.t('events_route.next_page')}>
271268
<span>
272269
<IconButton
273270
color='primary'
@@ -278,7 +275,7 @@ const Datasets: React.FC<DatasetsProps> = ({
278275
<ChevronRightRounded />
279276
</IconButton>
280277
</span>
281-
</Tooltip>
278+
</MQTooltip>
282279
</Box>
283280
</>
284281
)}

‎web/src/routes/events/Events.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
TableCell,
1212
TableHead,
1313
TableRow,
14-
Tooltip,
1514
createTheme,
1615
} from '@mui/material'
1716
import { ChevronLeftRounded, ChevronRightRounded, Refresh } from '@mui/icons-material'
@@ -30,6 +29,7 @@ import { useTheme } from '@emotion/react'
3029
import Box from '@mui/material/Box'
3130
import CircularProgress from '@mui/material/CircularProgress/CircularProgress'
3231
import IconButton from '@mui/material/IconButton'
32+
import MQTooltip from '../../components/core/tooltip/MQTooltip'
3333
import MqCopy from '../../components/core/copy/MqCopy'
3434
import MqDatePicker from '../../components/core/date-picker/MqDatePicker'
3535
import MqEmpty from '../../components/core/empty/MqEmpty'
@@ -187,7 +187,7 @@ const Events: React.FC<EventsProps> = ({
187187
></Chip>
188188
</Box>
189189
</Box>
190-
<Tooltip title={'Refresh'}>
190+
<MQTooltip title={'Refresh'}>
191191
<IconButton
192192
color={'primary'}
193193
size={'small'}
@@ -197,7 +197,7 @@ const Events: React.FC<EventsProps> = ({
197197
>
198198
<Refresh fontSize={'small'} />
199199
</IconButton>
200-
</Tooltip>
200+
</MQTooltip>
201201
</Box>
202202
<Box
203203
p={2}
@@ -344,7 +344,7 @@ const Events: React.FC<EventsProps> = ({
344344
{Math.min(PAGE_SIZE * (state.page + 1), totalCount)} of {totalCount}
345345
</>
346346
</MqText>
347-
<Tooltip title={i18next.t('events_route.previous_page')}>
347+
<MQTooltip title={i18next.t('events_route.previous_page')}>
348348
<span>
349349
<IconButton
350350
sx={{
@@ -358,8 +358,8 @@ const Events: React.FC<EventsProps> = ({
358358
<ChevronLeftRounded />
359359
</IconButton>
360360
</span>
361-
</Tooltip>
362-
<Tooltip title={i18next.t('events_route.next_page')}>
361+
</MQTooltip>
362+
<MQTooltip title={i18next.t('events_route.next_page')}>
363363
<span>
364364
<IconButton
365365
color='primary'
@@ -370,7 +370,7 @@ const Events: React.FC<EventsProps> = ({
370370
<ChevronRightRounded />
371371
</IconButton>
372372
</span>
373-
</Tooltip>
373+
</MQTooltip>
374374
</Box>
375375
</>
376376
)}

‎web/src/routes/jobs/Jobs.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
TableCell,
1212
TableHead,
1313
TableRow,
14-
Tooltip,
1514
createTheme,
1615
} from '@mui/material'
1716
import { ChevronLeftRounded, ChevronRightRounded, Refresh } from '@mui/icons-material'
@@ -29,6 +28,7 @@ import { useTheme } from '@emotion/react'
2928
import Box from '@mui/material/Box'
3029
import CircularProgress from '@mui/material/CircularProgress/CircularProgress'
3130
import IconButton from '@mui/material/IconButton'
31+
import MQTooltip from '../../components/core/tooltip/MQTooltip'
3232
import MqEmpty from '../../components/core/empty/MqEmpty'
3333
import MqStatus from '../../components/core/status/MqStatus'
3434
import MqText from '../../components/core/text/MqText'
@@ -109,7 +109,7 @@ const Jobs: React.FC<JobsProps> = ({
109109
</Box>
110110
<Box display={'flex'} alignItems={'center'}>
111111
{isJobsLoading && <CircularProgress size={16} />}
112-
<Tooltip title={'Refresh'}>
112+
<MQTooltip title={'Refresh'}>
113113
<IconButton
114114
sx={{ ml: 2 }}
115115
color={'primary'}
@@ -122,7 +122,7 @@ const Jobs: React.FC<JobsProps> = ({
122122
>
123123
<Refresh fontSize={'small'} />
124124
</IconButton>
125-
</Tooltip>
125+
</MQTooltip>
126126
</Box>
127127
</Box>
128128
<MqScreenLoad loading={isJobsLoading && !isJobsInit}>
@@ -213,7 +213,7 @@ const Jobs: React.FC<JobsProps> = ({
213213
{Math.min(PAGE_SIZE * (state.page + 1), totalCount)} of {totalCount}
214214
</>
215215
</MqText>
216-
<Tooltip title={i18next.t('events_route.previous_page')}>
216+
<MQTooltip title={i18next.t('events_route.previous_page')}>
217217
<span>
218218
<IconButton
219219
sx={{
@@ -227,8 +227,8 @@ const Jobs: React.FC<JobsProps> = ({
227227
<ChevronLeftRounded />
228228
</IconButton>
229229
</span>
230-
</Tooltip>
231-
<Tooltip title={i18next.t('events_route.next_page')}>
230+
</MQTooltip>
231+
<MQTooltip title={i18next.t('events_route.next_page')}>
232232
<span>
233233
<IconButton
234234
color='primary'
@@ -239,7 +239,7 @@ const Jobs: React.FC<JobsProps> = ({
239239
<ChevronRightRounded />
240240
</IconButton>
241241
</span>
242-
</Tooltip>
242+
</MQTooltip>
243243
</Box>
244244
</>
245245
)}

0 commit comments

Comments
 (0)
⚡