convert settings tabs and subtabs

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"])

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,15 +889,15 @@ 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]}"
           @edit[:new][:upload_type] = nil
           @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"

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

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

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

app/javascript/components/miq-custom-tab/helper.js

@@ -28,13 +28,33 @@ 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 = {
     CATALOG_SUMMARY: catalog,
     CATALOG_EDIT: catalog,
     UTILIZATION: utilization,
     CATALOG_REQUEST_INFO: requestInfo,
+    SETTINGS: settings,
+    SETTINGS_TAGS: settingsTags,
   };
 
   return configMap[type];

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 }) => {
     <Tab key={`tab${label}`} label={`${tabText(selectedLabels, label)}`} onClick={() => 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 (
     <Tabs className="miq_custom_tabs" id={tabIdentifier('')}>
       {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,
 };

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"

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)})

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})

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

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)})

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