Request Dialog Options summary conversion from HAML to React

app/helpers/miq_request_helper.rb

@@ -1,6 +1,7 @@
 module MiqRequestHelper
   include RequestInfoHelper
   include RequestDetailsHelper
+  include RequestDialogOptionsHelper
 
   def row_data(label, value)
     {:cells => {:label => label, :value => value}}

app/helpers/request_dialog_options_helper.rb

@@ -0,0 +1,66 @@
+module RequestDialogOptionsHelper
+  def request_dialog_options(workflow)
+    data = workflow.dialog.dialog_tabs.map do |tab, _tab_index|
+      {
+        :label   => _(tab.label),
+        :content => request_dialog_options_groups(tab.dialog_groups, workflow)
+      }
+    end
+    react('RequestDialogOptions', {:data => data})
+  end
+
+  private
+
+  def request_dialog_options_groups(dialog_groups, workflow)
+    dialog_groups.map do |group|
+      {
+        :title => _(group.label),
+        :rows  => request_dialog_options_fields(group.dialog_fields, workflow),
+        :mode  => "miq_summary request_dialog_options"
+      }
+    end
+  end
+
+  def request_dialog_options_fields(dialog_fields, workflow)
+    dialog_fields.map do |field|
+      row_data(_(field.label), request_dialog_options_field_content(field, workflow))
+    end
+  end
+
+  def request_dialog_options_field_content(field, workflow)
+    case field.type
+    when 'DialogFieldTextBox', 'DialogFieldTextAreaBox'
+      if field.protected?
+        "********"
+      else
+        field.value
+      end
+
+    when 'DialogFieldCheckBox'
+      {:input => "checkbox", :name => field.name, :checked => field.checked?, :disabled => true, :label => ''}
+
+    when 'DialogFieldDateControl'
+      field.value
+
+    when 'DialogFieldDateTimeControl'
+      date_val, time_val = field.value.split
+      hour_val, minute_val = time_val.split(":")
+      "#{date_val} at #{hour_val.rjust(2, '0')}:#{minute_val.rjust(2, '0')} #{session[:user_tz]}"
+
+    when "DialogFieldRadioButton"
+      field.values.detect { |k, _v| k == workflow.value(field.name) }.try(:last) || workflow.value(field.name)
+
+    when "DialogFieldDropDownList"
+      field.value.blank? ? _("<None>") : field.value.to_s.gsub("\x1F", ", ")
+
+    when 'DialogFieldTagControl'
+      value = workflow.value(field.name) || '' # it returns in format Clasification::id
+      classifications = value.split(',').map { |c| Classification.find_by(:id => c.split('::').second).description }
+      if classifications.empty?
+        ''
+      else
+        classifications.join(', ')
+      end
+    end
+  end
+end

app/javascript/components/request-dialog-options/index.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tabs, Tab } from 'carbon-components-react';
+import MiqStructuredList from '../miq-structured-list';
+
+/** Component to render the dialog options in Request/show page. */
+const RequestDialogOptions = ({ data }) => {
+  /** Function to render the tabs from the tabLabels props */
+  const renderTabs = () => data.map(({ label, content }, tabIndex) => (
+    <Tab className="dialog-option-tab" key={`${tabIndex.toString()}-tabKey`} label={label}>
+      {content.map((item, contentIndex) => (
+        <MiqStructuredList
+          key={`${contentIndex.toString()}-contentKey`}
+          title={item.title}
+          rows={item.rows}
+          mode={item.mode}
+        />
+      ))}
+    </Tab>
+  ));
+
+  return (
+    <Tabs className="miq_custom_tabs">
+      {renderTabs()}
+    </Tabs>
+  );
+};
+
+export default RequestDialogOptions;
+
+RequestDialogOptions.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.any).isRequired,
+};

app/javascript/packs/component-definitions-common.js

@@ -108,10 +108,11 @@ import RemoveGenericItemModal from '../components/remove-generic-item-modal';
 import ReportChartWidget from '../components/create-report-chart-form';
 import ReportDataTable from '../components/data-tables/report-data-table/report-data-table';
 import ReportList from '../components/data-tables/reports/ReportList';
+import RoleList from '../components/data-tables/role-list';
+import RequestDialogOptions from '../components/request-dialog-options';
 import RequestsTable from '../components/data-tables/requests-table';
 import RequestWorkflowStatus from '../components/request-workflow-status';
 import RetirementForm from '../components/retirement-form';
-import RoleList from '../components/data-tables/role-list';
 import RoutersForm from '../components/routers-form';
 import ScheduleForm from '../components/schedule-form';
 import SearchBar from '../components/search-bar';
@@ -277,6 +278,9 @@ ManageIQ.component.addReact('RemoveGenericItemModal', RemoveGenericItemModal);
 ManageIQ.component.addReact('ReportChartWidget', ReportChartWidget);
 ManageIQ.component.addReact('ReportDataTable', ReportDataTable);
 ManageIQ.component.addReact('ReportList', ReportList);
+ManageIQ.component.addReact('RetirementForm', RetirementForm);
+ManageIQ.component.addReact('RoleList', RoleList);
+ManageIQ.component.addReact('RequestDialogOptions', RequestDialogOptions);
 ManageIQ.component.addReact('RequestsTable', RequestsTable);
 ManageIQ.component.addReact('RequestWorkflowStatus', RequestWorkflowStatus);
 ManageIQ.component.addReact('RetirementForm', RetirementForm);