Skip to content

Commit 39645e4

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #564 from Lemoncode/vnext
figma bar
2 parents a3de465 + e8d4767 commit 39645e4

21 files changed

Lines changed: 452 additions & 145 deletions

‎e2e/add-new-collection.spec.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ test('opens MongoDB Designer, adds collection, and checks "New Collection" visib
1212
await expect(newButton).toBeVisible();
1313
await newButton.click();
1414

15-
const addCollectionButton = page
16-
.getByRole('button', { name: 'Add Collection' })
17-
.first();
15+
const addCollectionButton = page.locator('.add-collection-button');
1816
await expect(addCollectionButton).toBeVisible();
1917
await addCollectionButton.click();
2018

‎src/common/components/action-button/action-button.component.spec.tsx‎

Lines changed: 91 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,27 @@ import { fireEvent, render, screen } from '@testing-library/react';
22
import { vi } from 'vitest';
33
import { ActionButton } from './action-button.component';
44
import { ShortcutOptions } from '@/common/shortcut';
5+
import { useModalDialogContext } from '@/core/providers';
6+
7+
vi.mock('@/core/providers', () => ({
8+
useModalDialogContext: vi.fn(),
9+
}));
510

611
describe('ActionButton', () => {
712
let onClick: () => void;
813
let shortcutOptions: ShortcutOptions;
914

1015
beforeEach(() => {
16+
vi.mocked(useModalDialogContext).mockReturnValue({
17+
modalDialog: {
18+
isOpen: false,
19+
selectedComponent: null,
20+
title: '',
21+
},
22+
openModal: vi.fn(),
23+
closeModal: vi.fn(),
24+
});
25+
1126
onClick = vi.fn();
1227

1328
shortcutOptions = {
@@ -52,19 +67,84 @@ describe('ActionButton', () => {
5267
expect(onClick).toHaveBeenCalled();
5368
});
5469

55-
it('should render the tooltip with the correct shortcut key', () => {
56-
const { getByRole } = render(
57-
<ActionButton
58-
icon={<span>Icon</span>}
59-
label="Label"
60-
onClick={onClick}
61-
shortcutOptions={shortcutOptions}
62-
/>
63-
);
70+
describe('tooltip display', () => {
71+
it('should render system modifier correctly', () => {
72+
// Test Mac
73+
const { getByRole, rerender } = render(
74+
<ActionButton
75+
icon={<span>Icon</span>}
76+
label="Label"
77+
onClick={onClick}
78+
shortcutOptions={{
79+
...shortcutOptions,
80+
modifierType: 'system',
81+
}}
82+
/>
83+
);
84+
expect(getByRole('tooltip').textContent).toBe('(⌘ + A)');
85+
86+
// Test Windows
87+
Object.defineProperty(window.navigator, 'userAgent', {
88+
value: 'Windows',
89+
configurable: true,
90+
});
91+
rerender(
92+
<ActionButton
93+
icon={<span>Icon</span>}
94+
label="Label"
95+
onClick={onClick}
96+
shortcutOptions={{
97+
...shortcutOptions,
98+
modifierType: 'system',
99+
}}
100+
/>
101+
);
102+
expect(getByRole('tooltip').textContent).toBe('(Ctrl + A)');
103+
});
64104

65-
const tooltip = getByRole('tooltip');
105+
it('should render alt tooltip correctly', () => {
106+
const { getByRole } = render(
107+
<ActionButton
108+
icon={<span>Icon</span>}
109+
label="Label"
110+
onClick={onClick}
111+
shortcutOptions={{
112+
...shortcutOptions,
113+
modifierType: 'alt',
114+
}}
115+
/>
116+
);
117+
expect(getByRole('tooltip').textContent).toBe('(Alt + A)');
118+
});
119+
120+
it('should render mo-modifier tooltip correctly', () => {
121+
const { getByRole } = render(
122+
<ActionButton
123+
icon={<span>Icon</span>}
124+
label="Label"
125+
onClick={onClick}
126+
shortcutOptions={{
127+
...shortcutOptions,
128+
modifierType: 'none',
129+
}}
130+
/>
131+
);
132+
expect(getByRole('tooltip').textContent).toBe('(A)');
133+
});
66134

67-
expect(tooltip.textContent).toContain('Ctrl + A');
135+
it('should not show tooltip when disabled', () => {
136+
const { queryByRole } = render(
137+
<ActionButton
138+
icon={<span>Icon</span>}
139+
label="Label"
140+
onClick={onClick}
141+
disabled
142+
shortcutOptions={shortcutOptions}
143+
/>
144+
);
145+
146+
expect(queryByRole('tooltip')).toBeNull();
147+
});
68148
});
69149

70150
it('should disable the button if the disabled prop is true', () => {

‎src/common/components/action-button/action-button.component.tsx‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { isMacOS } from '@/common/helpers/platform.helpers';
33
import classes from './action-button.component.module.css';
4-
import { ShortcutOptions } from '@/common/shortcut';
4+
import { ModifierType, ShortcutOptions } from '@/common/shortcut';
55
import useShortcut from '@/common/shortcut/shortcut.hook';
66

77
interface Props {
@@ -25,9 +25,28 @@ export const ActionButton: React.FC<Props> = ({
2525
showLabel = true,
2626
tooltipPosition = 'bottom',
2727
}) => {
28-
const shortcutCommand = isMacOS() ? 'Ctrl' : 'Alt';
28+
const getModifierSymbol = (modifierType: ModifierType = 'system') => {
29+
switch (modifierType) {
30+
case 'none':
31+
return '';
32+
case 'alt':
33+
return 'Alt';
34+
case 'system':
35+
default:
36+
return isMacOS() ? '⌘' : 'Ctrl';
37+
}
38+
};
39+
40+
const shortcutCommand = getModifierSymbol(shortcutOptions?.modifierType);
41+
2942
const showTooltip = shortcutOptions && !disabled;
30-
const tooltipText = `(${shortcutCommand} + ${shortcutOptions?.targetKeyLabel})`;
43+
const tooltipText =
44+
shortcutOptions &&
45+
`(${
46+
shortcutOptions.modifierType === 'none'
47+
? shortcutOptions.targetKeyLabel
48+
: `${shortcutCommand} + ${shortcutOptions.targetKeyLabel}`
49+
})`;
3150

3251
const tooltipPositionClass =
3352
tooltipPosition === 'top' ? classes.tooltipTop : classes.tooltipBottom;

‎src/common/shortcut/shortcut.const.ts‎

Lines changed: 101 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,108 @@
11
import { ShortcutOptions } from './shortcut.model';
22

33
interface Shortcut {
4-
[key: string]: ShortcutOptions;
4+
[key: string]: ShortcutOptions;
55
}
66

77
export const SHORTCUTS: Shortcut = {
8-
addCollection: {
9-
description: 'Add Collection',
10-
id: 'add-collection-button-shortcut',
11-
targetKey: ['c'],
12-
targetKeyLabel: 'C',
13-
},
14-
addRelation: {
15-
description: 'Add Relation',
16-
id: 'add-relation-button-shortcut',
17-
targetKey: ['r'],
18-
targetKeyLabel: 'R',
19-
},
20-
delete: {
21-
description: 'Delete',
22-
id: 'delete-button-shortcut',
23-
targetKey: ['backspace'],
24-
targetKeyLabel: 'Backspace',
25-
},
26-
export: {
27-
description: 'Export',
28-
id: 'export-button-shortcut',
29-
targetKey: ['e'],
30-
targetKeyLabel: 'E',
31-
},
32-
new: {
33-
description: 'New',
34-
id: 'new-button-shortcut',
35-
targetKey: ['n'],
36-
targetKeyLabel: 'N',
37-
},
38-
open: {
39-
description: 'Open',
40-
id: 'open-button-shortcut',
41-
targetKey: ['o'],
42-
targetKeyLabel: 'O',
43-
},
44-
redo: {
45-
description: 'Redo',
46-
id: 'redo-button-shortcut',
47-
targetKey: ['y'],
48-
targetKeyLabel: 'Y',
49-
},
50-
save: {
51-
description: 'Save',
52-
id: 'save-button-shortcut',
53-
targetKey: ['s'],
54-
targetKeyLabel: 'S',
55-
},
56-
settings: {
57-
description: 'Settings',
58-
id: 'settings-button-shortcut',
59-
targetKey: ['t'],
60-
targetKeyLabel: 'T',
61-
},
62-
undo: {
63-
description: 'Undo',
64-
id: 'undo-button-shortcut',
65-
targetKey: ['z'],
66-
targetKeyLabel: 'Z',
67-
},
68-
zoomIn: {
69-
description: 'Zoom In',
70-
id: 'zoom-in-button-shortcut',
71-
targetKey: ['=', '+'],
72-
targetKeyLabel: '"+"',
73-
},
74-
zoomOut: {
75-
description: 'Zoom Out',
76-
id: 'zoom-out-button-shortcut',
77-
targetKey: ['-', '-'],
78-
targetKeyLabel: '"-"',
79-
},
80-
duplicate: {
81-
description: 'Duplicate',
82-
id: 'duplicate-button-shortcut',
83-
targetKey: ['d'],
84-
targetKeyLabel: 'D',
85-
},
86-
copy: {
87-
description: 'Copy',
88-
id: 'copy-button-shortcut',
89-
targetKey: ['c'],
90-
targetKeyLabel: 'C',
91-
},
92-
paste: {
93-
description: 'Paste',
94-
id: 'paste-button-shortcut',
95-
targetKey: ['v'],
96-
targetKeyLabel: 'V',
97-
},
98-
import: {
99-
description: 'Import',
100-
id: 'import-button-shortcut',
101-
targetKey: ['i'],
102-
targetKeyLabel: 'I',
103-
},
8+
addCollection: {
9+
description: 'Add Collection',
10+
id: 'add-collection-button-shortcut',
11+
targetKey: ['c'],
12+
targetKeyLabel: 'Collection "C"',
13+
modifierType: 'none',
14+
},
15+
addRelation: {
16+
description: 'Add Relation',
17+
id: 'add-relation-button-shortcut',
18+
targetKey: ['r'],
19+
targetKeyLabel: 'Relation "R"',
20+
modifierType: 'none',
21+
},
22+
delete: {
23+
description: 'Delete',
24+
id: 'delete-button-shortcut',
25+
targetKey: ['backspace'],
26+
targetKeyLabel: 'Backspace',
27+
modifierType: 'none',
28+
},
29+
export: {
30+
description: 'Export',
31+
id: 'export-button-shortcut',
32+
targetKey: ['e'],
33+
targetKeyLabel: 'E',
34+
},
35+
new: {
36+
description: 'New',
37+
id: 'new-button-shortcut',
38+
targetKey: ['n'],
39+
targetKeyLabel: 'N',
40+
modifierType: 'alt',
41+
},
42+
open: {
43+
description: 'Open',
44+
id: 'open-button-shortcut',
45+
targetKey: ['o'],
46+
targetKeyLabel: 'O',
47+
},
48+
redo: {
49+
description: 'Redo',
50+
id: 'redo-button-shortcut',
51+
targetKey: ['y'],
52+
targetKeyLabel: 'Y',
53+
},
54+
save: {
55+
description: 'Save',
56+
id: 'save-button-shortcut',
57+
targetKey: ['s'],
58+
targetKeyLabel: 'S',
59+
},
60+
settings: {
61+
description: 'Settings',
62+
id: 'settings-button-shortcut',
63+
targetKey: [','],
64+
targetKeyLabel: ',',
65+
},
66+
undo: {
67+
description: 'Undo',
68+
id: 'undo-button-shortcut',
69+
targetKey: ['z'],
70+
targetKeyLabel: 'Z',
71+
},
72+
zoomIn: {
73+
description: 'Zoom In',
74+
id: 'zoom-in-button-shortcut',
75+
targetKey: ['=', '+'],
76+
targetKeyLabel: '"+"',
77+
},
78+
zoomOut: {
79+
description: 'Zoom Out',
80+
id: 'zoom-out-button-shortcut',
81+
targetKey: ['-', '-'],
82+
targetKeyLabel: '"-"',
83+
},
84+
duplicate: {
85+
description: 'Duplicate',
86+
id: 'duplicate-button-shortcut',
87+
targetKey: ['d'],
88+
targetKeyLabel: 'D',
89+
},
90+
copy: {
91+
description: 'Copy',
92+
id: 'copy-button-shortcut',
93+
targetKey: ['c'],
94+
targetKeyLabel: 'C',
95+
},
96+
paste: {
97+
description: 'Paste',
98+
id: 'paste-button-shortcut',
99+
targetKey: ['v'],
100+
targetKeyLabel: 'V',
101+
},
102+
import: {
103+
description: 'Import',
104+
id: 'import-button-shortcut',
105+
targetKey: ['i'],
106+
targetKeyLabel: 'I',
107+
},
104108
};

0 commit comments

Comments
 (0)