Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Help menu form conversion #9309

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Help menu form conversion #9309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d93588a
Convert Help Menu Form from Haml to React and add Cypress Testing
liu-samuel Nov 5, 2024
498c9cc
Merge branch 'master' into help-menu-form-conversion
liu-samuel Nov 19, 2024
872b1e9
Fix typos and remove unneeded code
liu-samuel Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions app/controllers/ops_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,7 @@ def explorer
@ldap_group = @edit[:ldap_group] if params[:cls_id] && params[:cls_id].split('_')[0] == "lg"
@x_edit_buttons_locals = set_form_locals if @in_a_form
if @edit && (@sb[:active_tab] == 'settings_help_menu' || (@sb[:active_tab] == 'settings_tags' && !%w[settings_import settings_import_tags].include?(@sb[:active_subtab])))
@hide_bottom_bar = true
edit_changed?
end
# do not show buttons, when settings_workers - it uses react form buttons
Expand Down Expand Up @@ -496,6 +497,7 @@ def set_form_locals
record_id = @sb[:active_tab].split("settings_").last
locals[:no_cancel] = true
elsif @sb[:active_tab] == "settings_help_menu"
@hide_bottom_bar = true
action_url = "settings_update_help_menu"
locals[:submit_button] = true
locals[:no_cancel] = true
Expand Down Expand Up @@ -806,6 +808,9 @@ def handle_bottom_cell(nodetype, presenter, locals)
if ["settings_workers", "diagnostics_cu_repair"].include?(@sb[:active_tab])
presenter.hide(:form_buttons_div)
end
if @hide_bottom_bar
presenter.hide(:form_buttons_div)
end
end

def replace_explorer_trees(replace_trees, presenter)
Expand Down
22 changes: 3 additions & 19 deletions app/controllers/ops_controller/settings/help_menu.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ module OpsController::Settings::HelpMenu
def settings_update_help_menu
assert_privileges("region_edit")

help_menu_form_get_vars

return unless load_edit('customize_help_menu')

begin
Expand All @@ -20,22 +22,12 @@ def settings_update_help_menu
if success
MiqServer.my_server.add_settings_for_resource(konfig)
session.delete(:edit)
add_flash(_('Help menu customization changes successfully stored.'), :success)
else
add_flash(_('Storing the custom help menu configuration was not successful.'), :error)
end

session[:changed] = !success

render :update do |page|
page << javascript_prologue
page << javascript_for_miq_button_visibility(!success)
page.replace(:flash_msg_div, :partial => "layouts/flash_msg")
page << "miqScrollTop();" if @flash_array.present?
end
end

def help_menu_form_field_changed
def help_menu_form_get_vars
assert_privileges("region_edit")

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

@edit[:new][id][field] = param
@edit[:new][id].delete(field) if param.empty?
end
end

changed = @edit[:new] != @edit[:current]
session[:changed] = changed

render :update do |page|
page << javascript_prologue
page << javascript_for_miq_button_visibility(changed)
end
end
end
234 changes: 234 additions & 0 deletions app/javascript/components/settings-help-menu-form/help-menu-form.schema.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,234 @@
import { componentTypes } from '@@ddf';

const createSchema = (options, dropdownValue, setDropdownValue, values) => {
const fields = [
{
component: componentTypes.SUB_FORM,
id: 'col1',
name: 'col1',
className: 'col1',
fields: [
{
component: componentTypes.PLAIN_TEXT,
id: 'menu_item_label',
name: 'menu_item_label',
className: 'menu-item-label',
label: __('Menu item label'),
style: { fontSize: '16px' },
},
{
component: componentTypes.PLAIN_TEXT,
id: 'divider_2',
name: 'divider_2',
label: '',
className: 'left-divider',
},
{
component: componentTypes.TEXT_FIELD,
id: 'item_label_1',
name: 'item_label_1',
className: 'item-label',
placeholder: __('Documentation'),
initialValue: values[0].title,
maxLength: 128,
isRequired: true,
},
{
component: componentTypes.PLAIN_TEXT,
id: 'divider_3',
name: 'divider_3',
label: '',
className: 'left-divider',
},
{
component: componentTypes.TEXT_FIELD,
id: 'item_label_2',
name: 'item_label_2',
className: 'item-label',
placeholder: __('ManageIQ.org'),
initialValue: values[1].title,
maxLength: 128,
isRequired: true,
},
{
component: componentTypes.PLAIN_TEXT,
id: 'divider_4',
name: 'divider_4',
label: '',
className: 'left-divider',
},
{
component: componentTypes.TEXT_FIELD,
id: 'item_label_3',
name: 'item_label_3',
className: 'item-label',
placeholder: __('About'),
initialValue: values[2].title,
maxLength: 128,
isRequired: true,
},
],
},
{
component: componentTypes.SUB_FORM,
id: 'col2',
name: 'col2',
className: 'col2',
fields: [
{
component: componentTypes.PLAIN_TEXT,
id: 'url_label',
name: 'url_label',
className: 'url-label',
label: __('URL'),
style: { fontSize: '16px' },
},
{
component: componentTypes.PLAIN_TEXT,
id: 'divider_5',
name: 'divider_5',
label: '',
className: 'middle-divider',
},
{
component: componentTypes.TEXT_FIELD,
id: 'url_1',
name: 'url_1',
className: 'url',
placeholder: __('https://www.manageiq.org/docs/'),
initialValue: values[0].href,
maxLength: 128,
isDisabled: dropdownValue[0] === 'modal',
},
{
component: componentTypes.PLAIN_TEXT,
id: 'divider_6',
name: 'divider_6',
label: '',
className: 'middle-divider',
},
{
component: componentTypes.TEXT_FIELD,
id: 'url_2',
name: 'url_2',
className: 'url',
placeholder: __('https://www.manageiq.org'),
maxLength: 128,
initialValue: values[0].href,
isDisabled: dropdownValue[1] === 'modal',
},
{
component: componentTypes.PLAIN_TEXT,
id: 'divider_7',
name: 'divider_7',
label: '',
className: 'middle-divider',
},
{
component: componentTypes.TEXT_FIELD,
id: 'url_3',
name: 'url_3',
className: 'url',
maxLength: 128,
initialValue: values[0].href,
isDisabled: dropdownValue[2] === 'modal',
},
],
},
{
component: componentTypes.SUB_FORM,
id: 'col3',
name: 'col3',
className: 'col3',
fields: [
{
component: componentTypes.PLAIN_TEXT,
id: 'open_label',
name: 'open_label',
className: 'open-label',
label: __('Open in'),
style: { fontSize: '16px' },
},
{
component: componentTypes.PLAIN_TEXT,
id: 'divider_8',
name: 'divider_8',
label: '',
className: 'right-divider',
},
{
component: componentTypes.SELECT,
id: 'select_dropdown_1',
name: 'select_dropdown_1',
className: 'dropdown',
hideLabel: true,
options,
maxLength: 128,
isRequired: true,
initialValue: dropdownValue[0],
onChange: (value) => {
setDropdownValue((prevValues) => {
const updatedValues = [...prevValues];
updatedValues[0] = value;
return updatedValues;
});
},
},
{
component: componentTypes.PLAIN_TEXT,
id: 'divider_9',
name: 'divider_9',
label: '',
className: 'right-divider',
},
{
component: componentTypes.SELECT,
id: 'select_dropdown_2',
name: 'select_dropdown_2',
className: 'dropdown',
hideLabel: true,
options,
initialValue: dropdownValue[1],
maxLength: 128,
onChange: (value) => {
setDropdownValue((prevValues) => {
const updatedValues = [...prevValues];
updatedValues[1] = value;
return updatedValues;
});
},
},
{
component: componentTypes.PLAIN_TEXT,
id: 'divider_10',
name: 'divider_10',
label: '',
className: 'right-divider',
},
{
component: componentTypes.SELECT,
id: 'select_dropdown_3',
name: 'select_dropdown_3',
className: 'dropdown',
hideLabel: true,
options,
initialValue: dropdownValue[2],
maxLength: 128,
onChange: (value) => {
setDropdownValue((prevValues) => {
const updatedValues = [...prevValues];
updatedValues[2] = value;
return updatedValues;
});
},
},
],
},
];

return {
fields,
};
};

export default createSchema;
Loading