Skip to content

Commit 533a6ec

Browse files
andreilakatosLukshio
andreilakatos
authored and
Lukshio
committed
Fixes #39496 - update editor settings to pf5 and the tests to RTL
1 parent ef193a4 commit 533a6ec

4 files changed

Lines changed: 277 additions & 693 deletions

File tree

‎webpack/assets/javascripts/react_app/components/Editor/components/EditorSettings.js‎

Lines changed: 118 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,85 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import PropTypes from 'prop-types';
3-
import { Dropdown, MenuItem, Button } from 'patternfly-react';
43
import { CogIcon } from '@patternfly/react-icons';
54
import {
5+
Button,
6+
Checkbox,
7+
FormGroup,
68
Icon,
9+
MenuToggle,
710
Popover,
811
PopoverPosition,
12+
Select,
13+
SelectList,
14+
SelectOption,
915
Tooltip,
1016
TooltipPosition,
1117
} from '@patternfly/react-core';
1218
import { translate as __ } from '../../../common/I18n';
1319

20+
const SettingsSelect = ({
21+
id,
22+
label,
23+
disabled,
24+
options,
25+
selected,
26+
onSelect,
27+
}) => {
28+
const [isOpen, setIsOpen] = useState(false);
29+
30+
return (
31+
<FormGroup label={label} fieldId={id} isInline>
32+
<Select
33+
id={id}
34+
ouiaId={id}
35+
isOpen={isOpen}
36+
selected={selected}
37+
onSelect={(_event, selection) => {
38+
onSelect(selection);
39+
setIsOpen(false);
40+
}}
41+
onOpenChange={setIsOpen}
42+
toggle={toggleRef => (
43+
<MenuToggle
44+
ref={toggleRef}
45+
onClick={() => {
46+
if (!disabled) {
47+
setIsOpen(!isOpen);
48+
}
49+
}}
50+
isExpanded={isOpen}
51+
isDisabled={disabled}
52+
isFullWidth
53+
>
54+
{selected}
55+
</MenuToggle>
56+
)}
57+
>
58+
<SelectList id="settings-dropdown">
59+
{options.map(option => (
60+
<SelectOption key={option} value={option}>
61+
{option}
62+
</SelectOption>
63+
))}
64+
</SelectList>
65+
</Select>
66+
</FormGroup>
67+
);
68+
};
69+
70+
SettingsSelect.propTypes = {
71+
id: PropTypes.string.isRequired,
72+
label: PropTypes.string.isRequired,
73+
disabled: PropTypes.bool,
74+
options: PropTypes.arrayOf(PropTypes.string).isRequired,
75+
selected: PropTypes.string.isRequired,
76+
onSelect: PropTypes.func.isRequired,
77+
};
78+
79+
SettingsSelect.defaultProps = {
80+
disabled: false,
81+
};
82+
1483
const EditorSettings = ({
1584
selectedView,
1685
changeSetting,
@@ -32,96 +101,58 @@ const EditorSettings = ({
32101
headerContent={__('Settings')}
33102
bodyContent={
34103
<div>
35-
<div className="cog-popover-dropdown">
36-
<div className="cog-popover-dropdown-title">{__('Syntax')}</div>
37-
<Dropdown disabled={selectedView === 'preview'} id="mode-dropdown">
38-
<Dropdown.Toggle>{mode}</Dropdown.Toggle>
39-
<Dropdown.Menu id="settings-dropdown">
40-
{modes.map((aceMode, i) => (
41-
<MenuItem
42-
key={i}
43-
onClick={() => changeSetting({ mode: aceMode })}
44-
>
45-
{aceMode}
46-
</MenuItem>
47-
))}
48-
</Dropdown.Menu>
49-
</Dropdown>
50-
</div>
51-
<div className="cog-popover-dropdown">
52-
<div className="cog-popover-dropdown-title">{__('Keybind')}</div>
53-
<Dropdown
54-
disabled={selectedView === 'preview'}
55-
id="keybindings-dropdown"
56-
>
57-
<Dropdown.Toggle>{keyBinding}</Dropdown.Toggle>
58-
<Dropdown.Menu id="settings-dropdown">
59-
{keyBindings.map((keyBind, i) => (
60-
<MenuItem
61-
key={i}
62-
onClick={() => changeSetting({ keyBinding: keyBind })}
63-
>
64-
{keyBind}
65-
</MenuItem>
66-
))}
67-
</Dropdown.Menu>
68-
</Dropdown>
69-
</div>
70-
<div className="cog-popover-dropdown">
71-
<div className="cog-popover-dropdown-title">{__('Theme')}</div>
72-
<Dropdown id="themes-dropdown">
73-
<Dropdown.Toggle>{theme}</Dropdown.Toggle>
74-
<Dropdown.Menu id="settings-dropdown">
75-
{themes.map((themeKey, i) => (
76-
<MenuItem
77-
key={i}
78-
onClick={() => changeSetting({ theme: themeKey })}
79-
>
80-
{themeKey}
81-
</MenuItem>
82-
))}
83-
</Dropdown.Menu>
84-
</Dropdown>
85-
</div>
86-
<div className="cog-popover-dropdown">
87-
<div className="cog-popover-dropdown-title">
88-
{__('Autocompletion')}
89-
</div>
90-
<div className="dropdown btn-group">
91-
<input
92-
id="autocompletion-checkbox"
93-
name="autocompletion"
94-
type="checkbox"
95-
checked={autocompletion}
96-
onChange={e =>
97-
changeSetting({ autocompletion: !autocompletion })
98-
}
99-
/>
100-
</div>
101-
</div>
102-
<div className="cog-popover-dropdown">
103-
<div className="cog-popover-dropdown-title">
104-
{__('Live Autocompletion')}
105-
</div>
106-
<div className="dropdown btn-group">
107-
<input
108-
id="live-autocompletion-checkbox"
109-
name="liveAutocompletion"
110-
type="checkbox"
111-
checked={liveAutocompletion}
112-
disabled={!autocompletion}
113-
onChange={e =>
114-
changeSetting({ liveAutocompletion: !liveAutocompletion })
115-
}
116-
/>
117-
</div>
118-
</div>
104+
<SettingsSelect
105+
id="mode-dropdown"
106+
label={__('Syntax')}
107+
disabled={selectedView === 'preview'}
108+
options={modes}
109+
selected={mode}
110+
onSelect={selection => changeSetting({ mode: selection })}
111+
/>
112+
<SettingsSelect
113+
id="keybindings-dropdown"
114+
label={__('Keybind')}
115+
disabled={selectedView === 'preview'}
116+
options={keyBindings}
117+
selected={keyBinding}
118+
onSelect={selection => changeSetting({ keyBinding: selection })}
119+
/>
120+
<SettingsSelect
121+
id="themes-dropdown"
122+
label={__('Theme')}
123+
options={themes}
124+
selected={theme}
125+
onSelect={selection => changeSetting({ theme: selection })}
126+
/>
127+
<Checkbox
128+
id="autocompletion-checkbox"
129+
ouiaId="autocompletion-checkbox"
130+
label={__('Autocompletion')}
131+
isChecked={autocompletion}
132+
onChange={() => changeSetting({ autocompletion: !autocompletion })}
133+
/>
134+
<Checkbox
135+
id="live-autocompletion-checkbox"
136+
ouiaId="live-autocompletion-checkbox"
137+
label={__('Live Autocompletion')}
138+
isChecked={liveAutocompletion}
139+
isDisabled={!autocompletion}
140+
onChange={() =>
141+
changeSetting({ liveAutocompletion: !liveAutocompletion })
142+
}
143+
/>
119144
</div>
120145
}
121146
triggerRef={() => document.getElementById('cog-btn')}
122147
/>
123148
<Tooltip content={__('Settings')} position={TooltipPosition.top}>
124-
<Button className="editor-button" id="cog-btn" bsStyle="link">
149+
<Button
150+
variant="plain"
151+
className="editor-button"
152+
id="cog-btn"
153+
ouiaId="cog-btn"
154+
aria-label={__('Settings')}
155+
>
125156
<Icon size="md">
126157
<CogIcon />
127158
</Icon>

0 commit comments

Comments
 (0)