Merge pull request #8751 from jeffibm/utilization-tabs-conversion

Fix Utilisation accessibility violation and tabs conversion from HAML to React
ManageIQ · Apr 27, 2023 · 986df6b · 986df6b
2 parents 5904b9b + 70bece5
commit 986df6b
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 33 deletions.
diff --git a/app/helpers/utilization_helper.rb b/app/helpers/utilization_helper.rb
@@ -0,0 +1,24 @@
+module UtilizationHelper
+  def utilization_tab_configuration
+    [:summary, :details, :report].map do |item|
+      {:name => item, :text => utilization_tabs_types[item]}
+    end
+  end
+
+  def utilization_tab_content(key_name, &block)
+    if utilization_tabs_types[key_name]
+      class_name = key_name == :summary ? 'tab_content active' : 'tab_content'
+      tag.div(:id => key_name, :class => class_name, &block)
+    end
+  end
+
+  private
+
+  def utilization_tabs_types
+    {
+      :summary => _('Summary'),
+      :details => _('Details'),
+      :report  => _('Report'),
+    }
+  end
+end
diff --git a/app/javascript/components/miq-custom-tab/index.jsx b/app/javascript/components/miq-custom-tab/index.jsx
@@ -8,6 +8,7 @@ const MiqCustomTab = ({ containerId, tabLabels, type }) => {
     { type: 'CATALOG_SUMMARY' },
     { type: 'CATALOG_EDIT' },
     { type: 'CATALOG_REQUEST_INFO', url: `/miq_request/prov_field_changed?tab_id=${name}&edit_mode=true` },
+    { type: 'UTILIZATION' },
   ];
 
   const configuration = (name) => tabConfigurations(name).find((item) => item.type === type);

diff --git a/app/stylesheet/miq-custom-tab.scss b/app/stylesheet/miq-custom-tab.scss
@@ -1,9 +1,12 @@
 
+.miq_custom_tab_wrapper div[role='tabpanel'] {
+  display: none;
+}
+
 .miq_custom_tabs_container {
   display: flex;
   flex-direction: column;
   width: 100%;
-  margin-top: -32px;
 
   .tab_content {
     display: flex;

diff --git a/app/views/catalog/_form.html.haml b/app/views/catalog/_form.html.haml
@@ -1,7 +1,8 @@
 - catalog_tab_labels, catalog_condition = catalog_tab_edit_configuration(@edit[:new])
-= react('MiqCustomTab', {:containerId => 'catalog-tabs-edit',
-                         :tabLabels => catalog_tab_labels,
-                         :type => 'CATALOG_EDIT'})
+.miq_custom_tab_wrapper
+  = react('MiqCustomTab', {:containerId => 'catalog-tabs-edit',
+                          :tabLabels => catalog_tab_labels,
+                          :type => 'CATALOG_EDIT'})
 
 #catalog-tabs-edit.miq_custom_tabs_container
   = catalog_tab_content(:basic) do

diff --git a/app/views/catalog/_sandt_tree_show.html.haml b/app/views/catalog/_sandt_tree_show.html.haml
@@ -1,10 +1,10 @@
 = render :partial => "layouts/flash_msg"
 - record, sb, tenants_tree, options, no_wf_msg = @record, @sb, @tenants_tree, @options, @no_wf_msg
 - tab_labels, condition = catalog_tab_configuration(record)
-
-= react('MiqCustomTab', {:containerId => 'catalog-tabs',
-                         :tabLabels => tab_labels,
-                         :type => 'CATALOG_SUMMARY'})
+.miq_custom_tab_wrapper
+  = react('MiqCustomTab', {:containerId => 'catalog-tabs',
+                          :tabLabels => tab_labels,
+                          :type => 'CATALOG_SUMMARY'})
 
 #catalog-tabs.miq_custom_tabs_container
   = catalog_tab_content(:basic) do

diff --git a/app/views/catalog/_st_angular_form.html.haml b/app/views/catalog/_st_angular_form.html.haml
@@ -1,7 +1,8 @@
 - @angular_form = true
-= react('MiqCustomTab', {:containerId => 'catalog-tabs-generic-edit',
-                         :tabLabels => catalog_tab_edit_generic_configuration,
-                         :type => 'CATALOG_EDIT'})
+.miq_custom_tab_wrapper
+  = react('MiqCustomTab', {:containerId => 'catalog-tabs-generic-edit',
+                          :tabLabels => catalog_tab_edit_generic_configuration,
+                          :type => 'CATALOG_EDIT'})
 
 
 %form.form-horizontal#form_div{"name" => "angularForm",

diff --git a/app/views/layouts/_content.html.haml b/app/views/layouts/_content.html.haml
@@ -4,12 +4,13 @@
       = yield
 - elsif inner_layout_present?
   .container-fluid.container-pf-nav-pf-vertical.container-pf-nav-pf-vertical-with-sub-menus.max-height{:style => "overflow: hidden !important"}
-    #breadcrumbs
-      = render :partial => "layouts/breadcrumbs"
-    .row.toolbar-pf#toolbar.miq-toolbar-menu
-      .col-sm-12
-        = miq_toolbar toolbar_from_hash
-    .row.max-height.content-focus-order
+    %header
+      #breadcrumbs
+        = render :partial => "layouts/breadcrumbs"
+      .row.toolbar-pf#toolbar.miq-toolbar-menu
+        .col-sm-12
+          = miq_toolbar toolbar_from_hash
+    %main.row.max-height.content-focus-order
       - if simulate?
         #left_div.sidebar-pf.sidebar-pf-left.scrollable.max-height.col-sm-5.col-md-4.col-sm-pull-7.col-md-pull-8
           #default_left_cell

diff --git a/app/views/miq_request/_prov_wf.html.haml b/app/views/miq_request/_prov_wf.html.haml
@@ -1,7 +1,7 @@
 -# wf					The workflow object currently in use
 -# dialog			The name (symbol) of the selected dialog
 - if (@options && @options[:wf]) || (@edit && @edit[:wf])
-  #prov_wf_div
+  #prov_wf_div.miq_custom_tab_wrapper
     - options = @options || @edit[:new]
     - wf = options[:wf] || @edit[:wf]
     - tabname = (@tabactive || options[:current_tab_key]).to_s

diff --git a/app/views/utilization/_utilization_tabs.html.haml b/app/views/utilization/_utilization_tabs.html.haml
@@ -1,18 +1,11 @@
-#utilization_tabs
-  %ul.nav.nav-tabs{'role' => 'tablist'}
-    = miq_tab_header('summary', @sb[:active_tab]) do
-      = _('Summary')
-    = miq_tab_header('details', @sb[:active_tab]) do
-      = _('Details')
-    = miq_tab_header('report', @sb[:active_tab]) do
-      = _('Report')
-  .tab-content
-    = miq_tab_content('summary', @sb[:active_tab]) do
+#utilization-tabs-wrapper.miq_custom_tab_wrapper
+  = react('MiqCustomTab', {:containerId => 'utilization-tabs',
+                           :tabLabels => utilization_tab_configuration,
+                           :type => 'UTILIZATION'})
+  #utilization-tabs.miq_custom_tabs_container
+    = utilization_tab_content(:summary) do
       = render :partial => "utilization_summary"
-    = miq_tab_content('details', @sb[:active_tab]) do
+    = utilization_tab_content(:details) do
       = render :partial => "utilization_details"
-    = miq_tab_content('report', @sb[:active_tab]) do
+    = utilization_tab_content(:report) do
       = render :partial => "utilization_report"
-
-:javascript
-  miq_tabs_init('#utilization_tabs', '/utilization/change_tab');