Skip to content

Commit a7debc8

Browse files
elad-nelad-n
committed
Merge branch 'date-manager' into display-filter-enhancment
2 parents 33f47e2 + 0e44c83 commit a7debc8

File tree

7 files changed

+13758
-9130
lines changed

7 files changed

+13758
-9130
lines changed

‎package-lock.json

+13,319-9,053
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"type": "git",
55
"url": "git+https://github.com/dagshub/design-system.git"
66
},
7-
"version": "0.1.69",
7+
"version": "0.1.72",
88
"description": "A component library for consuming dagshub user interfaces.",
99
"main": "dist/cjs/index.js",
1010
"module": "dist/esm/index.js",
@@ -88,7 +88,7 @@
8888
"@rollup/plugin-json": "^6.1.0",
8989
"@rollup/plugin-url": "^8.0.2",
9090
"@storybook/cli": "^7.0.0-beta.20",
91-
"@storybook/core": "^6.1.21",
91+
"@storybook/core": "^6.5.16",
9292
"@tippyjs/react": "^4.2.6",
9393
"ag-grid-community": "^31.0.1",
9494
"ag-grid-react": "^31.0.1",

‎src/components/dagshub/data-engine/queryBuilder/GroupCondition.tsx

+115-48
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,15 @@ import { Box } from '@mui/system';
33
import { ConditionDropdown } from './ConditionDropdown';
44
import { Button as DagshubButton, ButtonVariant } from '../../../elements';
55
import { Icon } from '../../../icons';
6-
import { IconButton, Menu, MenuItem, ThemeProvider, Tooltip, Typography } from '@mui/material';
6+
import {
7+
Divider,
8+
IconButton,
9+
Menu,
10+
MenuItem,
11+
ThemeProvider,
12+
Tooltip,
13+
Typography
14+
} from '@mui/material';
715
import theme from '../../../../theme';
816
import Condition from './Condition';
917
import AddIcon from '@mui/icons-material/Add';
@@ -69,36 +77,44 @@ export function GroupCondition({
6977
}}
7078
>
7179
{level == 0 && (
72-
<Box
73-
sx={{
74-
position: 'absolute',
75-
top: '-1px',
76-
right: '-1px',
77-
borderRadius: '0px 0px 0px 14px',
78-
border: '1px solid rgba(226, 232, 240, 1)',
79-
display: 'flex',
80-
justifyContent: 'center',
81-
borderRight: 'none',
82-
borderTop: 'none',
83-
alignItems: 'center',
84-
'& .MuiSwitch-switchBase': {
85-
'&.Mui-checked': {
86-
'& + .MuiSwitch-track': {
87-
backgroundColor: 'rgba(84, 103, 222, 1)!important'
80+
<Tooltip
81+
title={
82+
!isDisplayableInSimpleMode ? 'Simplified query cannot contain groups, OR, NOT' : ''
83+
}
84+
placement={'top-start'}
85+
arrow={true}
86+
>
87+
<Box
88+
sx={{
89+
position: 'absolute',
90+
top: '-1px',
91+
right: '-1px',
92+
borderRadius: '0px 0px 0px 14px',
93+
border: '1px solid rgba(226, 232, 240, 1)',
94+
display: 'flex',
95+
justifyContent: 'center',
96+
borderRight: 'none',
97+
borderTop: 'none',
98+
alignItems: 'center',
99+
'& .MuiSwitch-switchBase': {
100+
'&.Mui-checked': {
101+
'& + .MuiSwitch-track': {
102+
backgroundColor: 'rgba(84, 103, 222, 1)!important'
103+
}
88104
}
89105
}
90-
}
91-
}}
92-
>
93-
<LabeledSwitch
94-
label={'Advanced query builder'}
95-
labelPlacement={'end'}
96-
padding={'8px'}
97-
checked={!isSimpleMode}
98-
disabled={!isDisplayableInSimpleMode}
99-
onChange={onToggleQueryMode}
100-
/>
101-
</Box>
106+
}}
107+
>
108+
<LabeledSwitch
109+
label={'Advanced query builder'}
110+
labelPlacement={'end'}
111+
padding={'8px'}
112+
checked={!isSimpleMode}
113+
disabled={!isDisplayableInSimpleMode}
114+
onChange={onToggleQueryMode}
115+
/>
116+
</Box>
117+
</Tooltip>
102118
)}
103119
<Box
104120
style={{
@@ -238,7 +254,9 @@ export function GroupCondition({
238254
'& .MuiPaper-root': {
239255
borderRadius: '12px'
240256
},
241-
padding: '8px'
257+
'.MuiList-root': {
258+
padding: '8px!important'
259+
}
242260
}}
243261
id="basic-menu"
244262
anchorEl={addMenuAnchorEl}
@@ -248,6 +266,29 @@ export function GroupCondition({
248266
'aria-labelledby': 'basic-button'
249267
}}
250268
>
269+
<MenuItem
270+
onClick={() => {
271+
const newConditions = condition.and || condition.or || [];
272+
newConditions.push({ and: [] }); // is it ok or should it be [{}]
273+
onChangeHandler(newConditions);
274+
setIsAddMenuOpen(false);
275+
}}
276+
sx={{
277+
display: 'flex',
278+
flexDirection: 'row',
279+
gap: '8px',
280+
alignItems: 'center',
281+
padding: '8px!important'
282+
}}
283+
>
284+
<Icon
285+
icon={'outline-group'}
286+
width={11.83}
287+
height={13.95}
288+
fill={'rgba(71, 85, 105, 1)'}
289+
/>
290+
<Typography variant={'medium'}>Add condition group</Typography>
291+
</MenuItem>
251292
{!areThereSimpleFilters && (
252293
<MenuItem
253294
onClick={() => {
@@ -263,29 +304,55 @@ export function GroupCondition({
263304
onChangeHandler(newConditions);
264305
setIsAddMenuOpen(false);
265306
}}
307+
sx={{
308+
display: 'flex',
309+
flexDirection: 'row',
310+
gap: '8px',
311+
alignItems: 'center',
312+
padding: '8px!important'
313+
}}
266314
>
315+
<Icon
316+
icon={'solid-plus'}
317+
width={11.2}
318+
height={11.2}
319+
fill={'rgba(71, 85, 105, 1)'}
320+
/>
267321
<Typography variant={'medium'}>Add condition</Typography>
268322
</MenuItem>
269323
)}
270-
<MenuItem
271-
onClick={() => {
272-
const newConditions = condition.and || condition.or || [];
273-
newConditions.push({ and: [] }); // is it ok or should it be [{}]
274-
onChangeHandler(newConditions);
275-
setIsAddMenuOpen(false);
276-
}}
277-
>
278-
<Typography variant={'medium'}>Add condition group</Typography>
279-
</MenuItem>
280324
{!condition.not && (
281-
<MenuItem
282-
onClick={() => {
283-
onChange({ ...condition, not: !condition.not });
284-
setIsAddMenuOpen(false);
285-
}}
286-
>
287-
<Typography variant={'medium'}>Add NOT to group</Typography>
288-
</MenuItem>
325+
<>
326+
<Divider
327+
sx={{
328+
height: '2px',
329+
backgroundColor: 'rgba(226, 232, 240, 1)',
330+
border: '0px',
331+
margin: '0px!important'
332+
}}
333+
/>
334+
<MenuItem
335+
onClick={() => {
336+
onChange({ ...condition, not: !condition.not });
337+
setIsAddMenuOpen(false);
338+
}}
339+
sx={{
340+
display: 'flex',
341+
flexDirection: 'row',
342+
gap: '8px',
343+
alignItems: 'center',
344+
padding: '8px!important'
345+
}}
346+
>
347+
<Icon
348+
icon={'outline-not'}
349+
width={14}
350+
height={14}
351+
fill={'rgba(71, 85, 105, 1)'}
352+
/>
353+
<Typography variant={'medium'}>Add NOT to group</Typography>
354+
</MenuItem>
355+
</>
289356
)}
290357
</Menu>
291358
</Box>

0 commit comments

Comments
 (0)