From dfb9981c291143d5b7ad45a1ab9328ce206de706 Mon Sep 17 00:00:00 2001 From: Samuel Liu Date: Tue, 19 Nov 2024 15:51:54 -0500 Subject: [PATCH] convert settings tabs and subtabs --- app/controllers/ops_controller.rb | 3 +- .../ops_controller/settings/common.rb | 10 +- app/helpers/ops_helper.rb | 2 + app/helpers/settings_tabs_helper.rb | 37 ++++++++ app/helpers/settings_tags_helper.rb | 36 ++++++++ .../components/miq-custom-tab/helper.js | 20 ++++ .../components/miq-custom-tab/index.jsx | 42 ++++++++- app/views/ops/_all_tabs.html.haml | 91 ++++++++----------- .../ops/_settings_co_categories_tab.html.haml | 2 +- app/views/ops/_settings_co_tags_tab.html.haml | 2 +- app/views/ops/_settings_import_tab.html.haml | 2 +- .../_settings_label_tag_mapping_tab.html.haml | 2 +- spec/controllers/ops_controller_spec.rb | 1 - 13 files changed, 185 insertions(+), 65 deletions(-) create mode 100644 app/helpers/settings_tabs_helper.rb create mode 100644 app/helpers/settings_tags_helper.rb diff --git a/app/controllers/ops_controller.rb b/app/controllers/ops_controller.rb index 7c07a6ea681..ff48cd484d0 100644 --- a/app/controllers/ops_controller.rb +++ b/app/controllers/ops_controller.rb @@ -685,8 +685,7 @@ def settings_replace_right_cell(nodetype, presenter) @edit ? _("Editing Schedule \"%{name}\"") % {:name => @schedule.name} : _("Schedule \"%{name}\"") % {:name => @schedule.name} end else - if %w[accordion_select change_tab tree_select].include?(params[:action]) && - params[:tab_id] != "settings_advanced" + if %w[accordion_select change_tab tree_select].include?(params[:action]) presenter.replace(:ops_tabs, r[:partial => "all_tabs"]) elsif %w[zone_delete].include?(params[:pressed]) presenter.replace(:ops_tabs, r[:partial => "all_tabs"]) diff --git a/app/controllers/ops_controller/settings/common.rb b/app/controllers/ops_controller/settings/common.rb index aa16dd8857b..b0afda47c11 100644 --- a/app/controllers/ops_controller/settings/common.rb +++ b/app/controllers/ops_controller/settings/common.rb @@ -859,6 +859,8 @@ def settings_get_info(nodetype = x_node) nodes = nodetype.downcase.split("-") case nodes[0] when "root" + @settings_tab, @settings_tab_length = settings_tab_index_by_name(@sb[:active_tab]) + @subtab = settings_tags_tab_index_by_name(@sb[:active_subtab]) @right_cell_text = _("%{product} Region \"%{name}\"") % {:name => "#{MiqRegion.my_region.description} [#{MiqRegion.my_region.region}]", :product => Vmdb::Appliance.PRODUCT_NAME} @@ -870,9 +872,9 @@ def settings_get_info(nodetype = x_node) @in_a_form = true when "settings_tags" case @sb[:active_subtab] - when "settings_co_categories" + when "settings_my_company_categories" category_get_all - when "settings_co_tags" + when "settings_my_company_tags" # dont hide the disabled categories, so user can remove tags from the disabled ones cats = Classification.categories.sort_by(&:description) # Get the categories, sort by name @cats = {} # Classifications array for first chooser @@ -887,7 +889,7 @@ def settings_get_info(nodetype = x_node) @edit[:key] = "#{@sb[:active_tab]}_edit__#{@sb[:selected_server_id]}" add_flash(_("Locate and upload a file to start the import process"), :info) @in_a_form = true - when "settings_import" # Import tab + when "settings_import_variables" # Import tab @edit = {} @edit[:new] = {} @edit[:key] = "#{@sb[:active_tab]}_edit__#{@sb[:selected_server_id]}" @@ -895,7 +897,7 @@ def settings_get_info(nodetype = x_node) @sb[:good] = nil unless @sb[:show_button] add_flash(_("Choose the type of custom variables to be imported"), :info) @in_a_form = true - when "settings_label_tag_mapping" + when "settings_map_tags" label_tag_mapping_get_all end when "settings_help_menu" diff --git a/app/helpers/ops_helper.rb b/app/helpers/ops_helper.rb index af32760c3da..5c74dca1778 100644 --- a/app/helpers/ops_helper.rb +++ b/app/helpers/ops_helper.rb @@ -9,6 +9,8 @@ module OpsHelper include SettingsLabelTagMappingHelper include SettingsScheduleHelper include SettingsServerDescHelper + include SettingsTabsHelper + include SettingsTagsHelper include SettingsUsersHelper include SettingsZoneHelper include SettingsRbacTagHelper diff --git a/app/helpers/settings_tabs_helper.rb b/app/helpers/settings_tabs_helper.rb new file mode 100644 index 00000000000..9dc1552e039 --- /dev/null +++ b/app/helpers/settings_tabs_helper.rb @@ -0,0 +1,37 @@ +module SettingsTabsHelper + SETTINGS_TAB_IDS = %w[ + settings_details + settings_cu_collection + settings_tags + settings_replication + settings_help_menu + settings_advanced + ] + + def settings_tab_configuration + [:details, :cu_collection, :tags, :replication, :help_menu, :advanced] + end + + def settings_tab_content(key_name, &block) + if settings_tabs_types[key_name] + tag.div(:id => "settings_#{key_name}", :class => 'tab_content', &block) + end + end + +def settings_tab_index_by_name(name) + [SETTINGS_TAB_IDS.index(name) || -1, SETTINGS_TAB_IDS.length] +end + + private + + def settings_tabs_types + { + :details => _('Details'), + :cu_collection => _('C & U Collection'), + :tags => _('Tags'), + :replication => _('Replication'), + :help_menu => _('Help Menu'), + :advanced => _('Advanced'), + } + end +end diff --git a/app/helpers/settings_tags_helper.rb b/app/helpers/settings_tags_helper.rb new file mode 100644 index 00000000000..8075ef6cb92 --- /dev/null +++ b/app/helpers/settings_tags_helper.rb @@ -0,0 +1,36 @@ +module SettingsTagsHelper + + SETTINGS_TAGS_TABS_IDS = %w[ + settings_my_company_categories + settings_my_company_tags + settings_import_tags + settings_import_variables + settings_map_tags +] + + def settings_tags_configuration + [:my_company_categories, :my_company_tags, :import_tags, :import_variables, :map_tags] + end + + def settings_tags_content(key_name, &block) + if settings_tags_types[key_name] + tag.div(:id => key_name, :class => 'tab_content', &block) + end + end + + def settings_tags_tab_index_by_name(name) + SETTINGS_TAGS_TABS_IDS.index(name) || -1 + end + + private + + def settings_tags_types + { + :my_company_categories => _('My Company Categories'), + :my_company_tags => _('My Company Tags'), + :import_tags => _('Import Tags'), + :import_variables => _('Import Variables'), + :map_tags => _('Map Tags'), + } + end +end diff --git a/app/javascript/components/miq-custom-tab/helper.js b/app/javascript/components/miq-custom-tab/helper.js index 46bd411bec0..e2e5b99e6ad 100644 --- a/app/javascript/components/miq-custom-tab/helper.js +++ b/app/javascript/components/miq-custom-tab/helper.js @@ -28,6 +28,24 @@ const requestInfo = { network: __('Network'), }; +/** Tab labels used for settings in application settings page. */ +const settings = { + details: __('Details'), + cu_collection: __('C & U Collection'), + tags: __('Tags'), + replication: __('Replication'), + help_menu: __('Help'), + advanced: __('Advanced'), +}; + +const settingsTags = { + my_company_categories: __('My Company Categories'), + my_company_tags: __('My Company Tags'), + import_tags: ('Import Tags'), + import_variables: __('Import Variables'), + map_tags: __('Map Tags'), +} + /** Function to select the tab labels. */ export const labelConfig = (type) => { const configMap = { @@ -35,6 +53,8 @@ export const labelConfig = (type) => { CATALOG_EDIT: catalog, UTILIZATION: utilization, CATALOG_REQUEST_INFO: requestInfo, + SETTINGS: settings, + SETTINGS_TAGS: settingsTags, }; return configMap[type]; diff --git a/app/javascript/components/miq-custom-tab/index.jsx b/app/javascript/components/miq-custom-tab/index.jsx index 54f826ccbd2..2e47cae8c01 100644 --- a/app/javascript/components/miq-custom-tab/index.jsx +++ b/app/javascript/components/miq-custom-tab/index.jsx @@ -1,13 +1,17 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { Tabs, Tab } from 'carbon-components-react'; import { useDispatch } from 'react-redux'; import { miqCustomTabActions } from '../../miq-redux/actions/miq-custom-tab-actions'; import { labelConfig, tabText } from './helper'; -const MiqCustomTab = ({ containerId, tabLabels, type }) => { +const MiqCustomTab = ({ + containerId, tabLabels, type, activeTab, subtab, tabLength, +}) => { const dispatch = useDispatch(); const [data, setData] = useState({ loading: false }); + const activeTabClassName = 'bx--tabs--scrollable__nav-item--selected'; + const selectedClassName = 'bx--tabs__nav-item--selected'; /** Labels used for a Tab found from the 'type'. */ const selectedLabels = labelConfig(type); @@ -23,6 +27,13 @@ const MiqCustomTab = ({ containerId, tabLabels, type }) => { { type: 'CATALOG_EDIT', js: () => name === 'detail' && dispatch(miqCustomTabActions.incrementClickCount()) }, { type: 'CATALOG_REQUEST_INFO', url: `/miq_request/prov_field_changed?tab_id=${name}&edit_mode=true` }, { type: 'UTILIZATION' }, + { + type: 'SETTINGS', + url: name === 'tags' + ? `/ops/change_tab?tab_id=settings_my_company_categories&parent_tab_id=settings_${name}` + : `/ops/change_tab?tab_id=settings_${name}`, + }, + { type: 'SETTINGS_TAGS', url: `/ops/change_tab?parent_tab_id=settings_tags&tab_id=settings_${name}` }, ]; const configuration = (name) => tabConfigurations(name).find((item) => item.type === type); @@ -78,6 +89,7 @@ const MiqCustomTab = ({ containerId, tabLabels, type }) => { /** Function to handle tab click events. */ const onTabSelect = (name) => { + setData(true); if (!data.loading) { miqSparkleOn(); const config = configuration(name); @@ -91,6 +103,23 @@ const MiqCustomTab = ({ containerId, tabLabels, type }) => { onTabSelect(label)} /> )); + useEffect(() => { + if (activeTab) { + let elements = document.getElementsByClassName('bx--tabs--scrollable__nav-item'); + elements.forEach((element) => { + element.classList.remove(activeTabClassName); + element.classList.remove(selectedClassName); + }); + if (subtab !== undefined && subtab !== -1) { + elements[tabLength].classList.remove(activeTabClassName); + elements[subtab + tabLength].classList.add(activeTabClassName); + } + elements[activeTab].classList.add(activeTabClassName); + + elements = document.getElementsByClassName('bx--tabs--scrollable__nav-item'); + } + }, [data.loading]); + return ( {renderTabs()} @@ -104,4 +133,13 @@ MiqCustomTab.propTypes = { containerId: PropTypes.string.isRequired, tabLabels: PropTypes.arrayOf(PropTypes.string).isRequired, type: PropTypes.string.isRequired, + activeTab: PropTypes.number, + subtab: PropTypes.number, + tabLength: PropTypes.number, +}; + +MiqCustomTab.defaultProps = { + activeTab: undefined, + subtab: undefined, + tabLength: undefined, }; diff --git a/app/views/ops/_all_tabs.html.haml b/app/views/ops/_all_tabs.html.haml index 27e51d3b70b..90d33442f37 100644 --- a/app/views/ops/_all_tabs.html.haml +++ b/app/views/ops/_all_tabs.html.haml @@ -52,58 +52,45 @@ = render :partial => "settings_list_tab" - else = render(:partial => "layouts/flash_msg") - %ul.nav.nav-tabs{'role' => 'tablist'} - = miq_tab_header("settings_details", @sb[:active_tab]) do - = _("Details") - = miq_tab_header("settings_cu_collection", @sb[:active_tab]) do - = _("C & U Collection") - = miq_tab_header("settings_tags", @sb[:active_tab]) do - = _("Tags") - = miq_tab_header("settings_replication", @sb[:active_tab]) do - = _("Replication") - = miq_tab_header("settings_help_menu", @sb[:active_tab]) do - = _("Help Menu") - = miq_tab_header("settings_advanced", @sb[:active_tab]) do - = _("Advanced") - .tab-content - = miq_tab_content("settings_details", @sb[:active_tab]) do - = render :partial => "settings_details_tab" - = miq_tab_content("settings_cu_collection", @sb[:active_tab]) do - = render :partial => "settings_cu_collection_tab" - = miq_tab_content("settings_tags", @sb[:active_tab]) do - #ops_tags_subtabs - %ul.nav.nav-tabs.nav-tabs-pf{:style => 'font-size: 12px'} - = miq_tab_header("settings_co_categories", @sb[:active_subtab]) do - = escape_javascript(current_tenant.name) - = _("Categories") - = miq_tab_header("settings_co_tags", @sb[:active_subtab]) do - = escape_javascript(current_tenant.name) - = _("Tags") - = miq_tab_header("settings_import_tags", @sb[:active_subtab]) do - = _("Import Tags") - = miq_tab_header("settings_import", @sb[:active_subtab]) do - = _("Import Variables") - = miq_tab_header("settings_label_tag_mapping", @sb[:active_subtab]) do - = _("Map Tags") - .tab-content - = miq_tab_content("settings_co_categories", @sb[:active_subtab]) do - = render :partial => "settings_co_categories_tab" - = miq_tab_content("settings_co_tags", @sb[:active_subtab]) do - = render :partial => "settings_co_tags_tab" - = miq_tab_content("settings_import_tags", @sb[:active_subtab]) do - = render :partial => "settings_import_tags_tab" - = miq_tab_content("settings_import", @sb[:active_subtab]) do - = render :partial => "settings_import_tab" - = miq_tab_content("settings_label_tag_mapping", @sb[:active_subtab]) do - = render :partial => "settings_label_tag_mapping_tab" - :javascript - miq_tabs_init("#ops_tags_subtabs", "/ops/change_tab", {parent_tab_id: 'settings_tags'}); - = miq_tab_content("settings_replication", @sb[:active_tab]) do - = render :partial => "settings_replication_tab" - = miq_tab_content("settings_help_menu", @sb[:active_tab]) do - = render :partial => "settings_help_menu_tab" - = miq_tab_content("settings_advanced", @sb[:active_tab]) do - = render :partial => "settings_advanced_tab" + #utilization-tabs-wrapper + = react('MiqCustomTab', {:containerId => 'settings-tabs', + :tabLabels => settings_tab_configuration, + :type => 'SETTINGS', + :activeTab => @settings_tab, + }) + #settings-tabs + = settings_tab_content(:details) do + = render :partial => "settings_details_tab" + = settings_tab_content(:cu_collection) do + = render :partial => "settings_cu_collection_tab" + = settings_tab_content(:tags) do + - if @sb[:active_tab] == 'settings_tags' + #ops_tags_subtabs + %ul.nav.nav-tabs.nav-tabs-pf{:style => 'font-size: 12px'} + = react('MiqCustomTab', {:containerId => 'ops_tags_subtabs', + :tabLabels => settings_tags_configuration, + :type => 'SETTINGS_TAGS', + :activeTab => @settings_tab, + :subtab => @subtab, + :tabLength => @settings_tab_length, + }) + .tab-content + = settings_tags_content(:my_company_categories) do + = render :partial => "settings_co_categories_tab" + = settings_tags_content(:my_company_tags) do + = render :partial => "settings_co_tags_tab" + = settings_tags_content(:import_tags) do + = render :partial => "settings_import_tags_tab" + = settings_tags_content(:import_variables) do + = render :partial => "settings_import_tab" + = settings_tags_content(:map_tags) do + = render :partial => "settings_label_tag_mapping_tab" + = settings_tab_content(:replication) do + = render :partial => "settings_replication_tab" + = settings_tab_content(:help_menu) do + = render :partial => "settings_help_menu_tab" + = settings_tab_content(:advanced) do + = render :partial => "settings_advanced_tab" -# Diagnostics - when :diagnostics_tree - if x_node.split("-")[0] == "z" diff --git a/app/views/ops/_settings_co_categories_tab.html.haml b/app/views/ops/_settings_co_categories_tab.html.haml index 1f17df6cad8..ba009a7305d 100644 --- a/app/views/ops/_settings_co_categories_tab.html.haml +++ b/app/views/ops/_settings_co_categories_tab.html.haml @@ -1,2 +1,2 @@ -- if @sb[:active_tab] == "settings_tags" && @sb[:active_subtab] == "settings_co_categories" +- if @sb[:active_tab] == "settings_tags" && @sb[:active_subtab] == "settings_my_company_categories" = react('SettingsCompanyCategories', {:initialData => settings_company_categories_list(@categories)}) diff --git a/app/views/ops/_settings_co_tags_tab.html.haml b/app/views/ops/_settings_co_tags_tab.html.haml index 2292457ab76..1e6e1ee048c 100644 --- a/app/views/ops/_settings_co_tags_tab.html.haml +++ b/app/views/ops/_settings_co_tags_tab.html.haml @@ -1,3 +1,3 @@ -- if @sb[:active_tab] == "settings_tags" && @sb[:active_subtab] == "settings_co_tags" +- if @sb[:active_tab] == "settings_tags" && @sb[:active_subtab] == "settings_my_company_tags" #tab_div = react('SettingsCompanyTags', {:pageTitle => "#{current_tenant.name} #{_('Tags')}", :categoryId => @cat.id}) diff --git a/app/views/ops/_settings_import_tab.html.haml b/app/views/ops/_settings_import_tab.html.haml index 6fc33afb2d4..361151cf16f 100644 --- a/app/views/ops/_settings_import_tab.html.haml +++ b/app/views/ops/_settings_import_tab.html.haml @@ -1,4 +1,4 @@ -- if @sb[:active_tab] == "settings_tags" && @sb[:active_subtab] == "settings_import" +- if @sb[:active_tab] == "settings_tags" && @sb[:active_subtab] == "settings_import_variables" - url = url_for_only_path(:action => 'upload_form_field_changed', :id => @sb[:active_tab].split('_').last) %h3= _("Messages") %hr diff --git a/app/views/ops/_settings_label_tag_mapping_tab.html.haml b/app/views/ops/_settings_label_tag_mapping_tab.html.haml index baecaf2e854..e9998c4f324 100644 --- a/app/views/ops/_settings_label_tag_mapping_tab.html.haml +++ b/app/views/ops/_settings_label_tag_mapping_tab.html.haml @@ -1,2 +1,2 @@ -- if @sb[:active_tab] == "settings_tags" && @sb[:active_subtab] == "settings_label_tag_mapping" +- if @sb[:active_tab] == "settings_tags" && @sb[:active_subtab] == "settings_map_tags" = react('SettingsLabelTagMapping', {:initialData => settings_label_tab_mapping_list(@any_mapping_is_all_entities, @lt_mapping)}) diff --git a/spec/controllers/ops_controller_spec.rb b/spec/controllers/ops_controller_spec.rb index 2473853fe92..3d6fc9a77d1 100644 --- a/spec/controllers/ops_controller_spec.rb +++ b/spec/controllers/ops_controller_spec.rb @@ -320,7 +320,6 @@ allow(controller).to receive(:check_privileges).and_return(true) allow(controller).to receive(:assert_privileges).and_return(true) seed_session_trees('ops', :settings_tree, 'root') - expect(controller).to receive(:render_to_string).with(any_args).exactly(3).times post :change_tab, :params => {:tab_id => tab, :parent_tab_id => 'settings_tags'} end