Skip to content

Commit d93588a

Browse files
liu-samuelliu-samuel
committed
Convert Help Menu Form from Haml to React and add Cypress Testing
1 parent 0a3bfeb commit d93588a

File tree

11 files changed

+828
-62
lines changed

11 files changed

+828
-62
lines changed

‎app/controllers/ops_controller.rb

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,7 @@ def explorer
199199
@ldap_group = @edit[:ldap_group] if params[:cls_id] && params[:cls_id].split('_')[0] == "lg"
200200
@x_edit_buttons_locals = set_form_locals if @in_a_form
201201
if @edit && (@sb[:active_tab] == 'settings_help_menu' || (@sb[:active_tab] == 'settings_tags' && !%w[settings_import settings_import_tags].include?(@sb[:active_subtab])))
202+
@hide_bottom_bar = true
202203
edit_changed?
203204
end
204205
# do not show buttons, when settings_workers - it uses react form buttons
@@ -496,6 +497,7 @@ def set_form_locals
496497
record_id = @sb[:active_tab].split("settings_").last
497498
locals[:no_cancel] = true
498499
elsif @sb[:active_tab] == "settings_help_menu"
500+
@hide_bottom_bar = true
499501
action_url = "settings_update_help_menu"
500502
locals[:submit_button] = true
501503
locals[:no_cancel] = true
@@ -806,6 +808,9 @@ def handle_bottom_cell(nodetype, presenter, locals)
806808
if ["settings_workers", "diagnostics_cu_repair"].include?(@sb[:active_tab])
807809
presenter.hide(:form_buttons_div)
808810
end
811+
if @hide_bottom_bar
812+
presenter.hide(:form_buttons_div)
813+
end
809814
end
810815

811816
def replace_explorer_trees(replace_trees, presenter)

‎app/controllers/ops_controller/settings/help_menu.rb

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ module OpsController::Settings::HelpMenu
44
def settings_update_help_menu
55
assert_privileges("region_edit")
66

7+
help_menu_form_get_vars
8+
79
return unless load_edit('customize_help_menu')
810

911
begin
@@ -20,22 +22,12 @@ def settings_update_help_menu
2022
if success
2123
MiqServer.my_server.add_settings_for_resource(konfig)
2224
session.delete(:edit)
23-
add_flash(_('Help menu customization changes successfully stored.'), :success)
24-
else
25-
add_flash(_('Storing the custom help menu configuration was not successful.'), :error)
2625
end
2726

2827
session[:changed] = !success
29-
30-
render :update do |page|
31-
page << javascript_prologue
32-
page << javascript_for_miq_button_visibility(!success)
33-
page.replace(:flash_msg_div, :partial => "layouts/flash_msg")
34-
page << "miqScrollTop();" if @flash_array.present?
35-
end
3628
end
3729

38-
def help_menu_form_field_changed
30+
def help_menu_form_get_vars
3931
assert_privileges("region_edit")
4032

4133
return unless load_edit('customize_help_menu')
@@ -44,19 +36,11 @@ def help_menu_form_field_changed
4436
id = item.id.to_sym
4537
%i[title href type].map do |field|
4638
param = params["#{id}_#{field}"]
47-
next if param.nil?
4839

4940
@edit[:new][id][field] = param
50-
@edit[:new][id].delete(field) if param.empty?
5141
end
5242
end
53-
5443
changed = @edit[:new] != @edit[:current]
5544
session[:changed] = changed
56-
57-
render :update do |page|
58-
page << javascript_prologue
59-
page << javascript_for_miq_button_visibility(changed)
60-
end
6145
end
6246
end

‎app/javascript/components/settings-help-menu-form/help-menu-form.schema.js

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
import { componentTypes } from '@@ddf';
2+
3+
const createSchema = (options, dropdownValue, setDropdownValue, values) => {
4+
const fields = [
5+
{
6+
component: componentTypes.SUB_FORM,
7+
id: 'col1',
8+
name: 'col1',
9+
className: 'col1',
10+
fields: [
11+
{
12+
component: componentTypes.PLAIN_TEXT,
13+
id: 'menu_item_label',
14+
name: 'menu_item_label',
15+
className: 'menu-item-label',
16+
label: __('Menu item label'),
17+
style: { fontSize: '16px' },
18+
},
19+
{
20+
component: componentTypes.PLAIN_TEXT,
21+
id: 'divider_2',
22+
name: 'divider_2',
23+
label: '',
24+
className: 'left-divider',
25+
},
26+
{
27+
component: componentTypes.TEXT_FIELD,
28+
id: 'item_label_1',
29+
name: 'item_label_1',
30+
className: 'item-label',
31+
placeholder: __('Documentation'),
32+
initialValue: values[0].title,
33+
maxLength: 128,
34+
isRequired: true,
35+
},
36+
{
37+
component: componentTypes.PLAIN_TEXT,
38+
id: 'divider_3',
39+
name: 'divider_3',
40+
label: '',
41+
className: 'left-divider',
42+
},
43+
{
44+
component: componentTypes.TEXT_FIELD,
45+
id: 'item_label_2',
46+
name: 'item_label_2',
47+
className: 'item-label',
48+
placeholder: __('ManageIQ.org'),
49+
initialValue: values[1].title,
50+
maxLength: 128,
51+
isRequired: true,
52+
},
53+
{
54+
component: componentTypes.PLAIN_TEXT,
55+
id: 'divider_4',
56+
name: 'divider_4',
57+
label: '',
58+
className: 'left-divider',
59+
},
60+
{
61+
component: componentTypes.TEXT_FIELD,
62+
id: 'item_label_3',
63+
name: 'item_label_3',
64+
className: 'item-label',
65+
placeholder: __('About'),
66+
initialValue: values[2].title,
67+
maxLength: 128,
68+
isRequired: true,
69+
},
70+
],
71+
},
72+
{
73+
component: componentTypes.SUB_FORM,
74+
id: 'col2',
75+
name: 'col2',
76+
className: 'col2',
77+
fields: [
78+
{
79+
component: componentTypes.PLAIN_TEXT,
80+
id: 'url_label',
81+
name: 'url_label',
82+
className: 'url-label',
83+
label: __('URL'),
84+
style: { fontSize: '16px' },
85+
},
86+
{
87+
component: componentTypes.PLAIN_TEXT,
88+
id: 'divider_5',
89+
name: 'divider_5',
90+
label: '',
91+
className: 'middle-divider',
92+
},
93+
{
94+
component: componentTypes.TEXT_FIELD,
95+
id: 'url_1',
96+
name: 'url_1',
97+
className: 'url',
98+
placeholder: __('https://www.manageiq.org/docs/'),
99+
initialValue: values[0].href,
100+
maxLength: 128,
101+
isDisabled: dropdownValue[0] === 'modal',
102+
},
103+
{
104+
component: componentTypes.PLAIN_TEXT,
105+
id: 'divider_6',
106+
name: 'divider_6',
107+
label: '',
108+
className: 'middle-divider',
109+
},
110+
{
111+
component: componentTypes.TEXT_FIELD,
112+
id: 'url_2',
113+
name: 'url_2',
114+
className: 'url',
115+
placeholder: __('https://www.manageiq.org'),
116+
maxLength: 128,
117+
initialValue: values[0].href,
118+
isDisabled: dropdownValue[1] === 'modal',
119+
},
120+
{
121+
component: componentTypes.PLAIN_TEXT,
122+
id: 'divider_7',
123+
name: 'divider_7',
124+
label: '',
125+
className: 'middle-divider',
126+
},
127+
{
128+
component: componentTypes.TEXT_FIELD,
129+
id: 'url_3',
130+
name: 'url_3',
131+
className: 'url',
132+
maxLength: 128,
133+
initialValue: values[0].href,
134+
isDisabled: dropdownValue[2] === 'modal',
135+
},
136+
],
137+
},
138+
{
139+
component: componentTypes.SUB_FORM,
140+
id: 'col3',
141+
name: 'col3',
142+
className: 'col3',
143+
fields: [
144+
{
145+
component: componentTypes.PLAIN_TEXT,
146+
id: 'open_label',
147+
name: 'open_label',
148+
className: 'open-label',
149+
label: __('Open in'),
150+
style: { fontSize: '16px' },
151+
},
152+
{
153+
component: componentTypes.PLAIN_TEXT,
154+
id: 'divider_8',
155+
name: 'divider_8',
156+
label: '',
157+
className: 'right-divider',
158+
},
159+
{
160+
component: componentTypes.SELECT,
161+
id: 'select_dropdown_1',
162+
name: 'select_dropdown_1',
163+
className: 'dropdown',
164+
hideLabel: true,
165+
options,
166+
maxLength: 128,
167+
isRequired: true,
168+
initialValue: dropdownValue[0],
169+
onChange: (value) => {
170+
setDropdownValue((prevValues) => {
171+
const updatedValues = [...prevValues];
172+
updatedValues[0] = value;
173+
return updatedValues;
174+
});
175+
},
176+
},
177+
{
178+
component: componentTypes.PLAIN_TEXT,
179+
id: 'divider_9',
180+
name: 'divider_9',
181+
label: '',
182+
className: 'right-divider',
183+
},
184+
{
185+
component: componentTypes.SELECT,
186+
id: 'select_dropdown_2',
187+
name: 'select_dropdown_2',
188+
className: 'dropdown',
189+
hideLabel: true,
190+
options,
191+
initialValue: dropdownValue[1],
192+
maxLength: 128,
193+
onChange: (value) => {
194+
setDropdownValue((prevValues) => {
195+
const updatedValues = [...prevValues];
196+
updatedValues[1] = value;
197+
return updatedValues;
198+
});
199+
},
200+
},
201+
{
202+
component: componentTypes.PLAIN_TEXT,
203+
id: 'divider_10',
204+
name: 'divider_10',
205+
label: '',
206+
className: 'right-divider',
207+
},
208+
{
209+
component: componentTypes.SELECT,
210+
id: 'select_dropdown_3',
211+
name: 'select_dropdown_3',
212+
className: 'dropdown',
213+
hideLabel: true,
214+
options,
215+
initialValue: dropdownValue[2],
216+
maxLength: 128,
217+
onChange: (value) => {
218+
setDropdownValue((prevValues) => {
219+
const updatedValues = [...prevValues];
220+
updatedValues[2] = value;
221+
return updatedValues;
222+
});
223+
},
224+
},
225+
],
226+
},
227+
];
228+
229+
return {
230+
fields,
231+
};
232+
};
233+
234+
export default createSchema;

0 commit comments

Comments
 (0)