[WIP] Convert the angular error modal to react

app/javascript/components/cloud-tenant-form/index.jsx

@@ -10,7 +10,7 @@ const CloudTenantForm = ({ recordId }) => {
 
   useEffect(() => {
     if (recordId) {
-      API.get(`/api/cloud_tenants/${recordId}`).then((initialValues) => {
+      API.get(`/api/cloud_tenants1/${recordId}`).then((initialValues) => {
         setState((state) => ({ ...state, initialValues, isLoading: false }));
       });
     }

app/javascript/components/miq-error-modal/miq-error-modal.jsx

@@ -0,0 +1,126 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable react/prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { Modal, ModalBody, Button } from 'carbon-components-react';
+import DOMPurify from 'dompurify';
+
+const SHOW_ERROR_MODAL = '@@errorModal/show';
+const HIDE_ERROR_MODAL = '@@errorModal/hide';
+const LOAD_ERROR_MODAL = '@@errorModal/load';
+
+const showModal = () => (dispatch, getState) => {
+  if (getState().ErrorModal && getState().ErrorModal.error) {
+    // If the modal has been already rendered, do not request its data twice
+    return dispatch({ type: SHOW_ERROR_MODAL });
+  }
+
+  // Request the modal data from the API
+  //   return API.get('/api').then((root) =>
+  //     API.get(root.server_info.region_href).then((region) =>
+  //       API.get(root.server_info.zone_href).then((zone) => ({ ...root, region, zone })).then((data) =>
+  //         dispatch({ type: LOAD_ERROR_MODAL, data })).then(() =>
+  //         dispatch({ type: SHOW_ERROR_MODAL }))));
+};
+
+const hideModal = () => ({ type: HIDE_ERROR_MODAL });
+
+ManageIQ.redux.addReducer({
+  ErrorModal: function ErrorModalReducer(state = { show: false }, action) {
+    switch (action.type) {
+      case SHOW_ERROR_MODAL:
+        return { ...state, show: true };
+      case HIDE_ERROR_MODAL:
+        return { ...state, show: false };
+      case LOAD_ERROR_MODAL:
+        return { ...state, error: action.data };
+      default:
+        return state;
+    }
+  },
+});
+
+class MiqErrorModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: '' };
+    console.log(props);
+  }
+
+  componentDidMount() {
+    const { showModal } = this.props;
+    // this.subscribe = window.listenToRx((event) => {
+    //   if (event.type === 'showErrorModal') {
+    //     showModal();
+    //   }
+    // });
+
+    this.subscribe = window.listenToRx((event) => {
+      if ('serverError' in event) {
+        console.log(event);
+        this.setState({ error: event.serverError, source: event.source, backendName: event.backendName });
+        showModal();
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.subscribe.unsubscribe();
+  }
+
+  render() {
+    // const {
+    //   data, dialogClassName, hideModal,
+    // } = this.props;
+    // const { show } = this.props;
+    // const { expand } = this.state;
+    // let className = 'about-modal';
+    // if (dialogClassName === 'whitelabel') {
+    //   className = dialogClassName;
+    // }
+    // if (!data) {
+    //   return null;
+    // }
+
+    console.log(this.state);
+    return (
+      <div>
+        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(this.state.error.data) }} />
+      </div>
+    );
+  }
+}
+
+MiqErrorModal.propTypes = {
+  dialogClassName: PropTypes.string,
+  show: PropTypes.bool,
+  data: PropTypes.shape({
+    product_info: PropTypes.shape({
+      name_full: PropTypes.string,
+      copyright: PropTypes.string,
+      branding_info: PropTypes.shape({
+        logo: PropTypes.string,
+      }),
+    }),
+    server_info: PropTypes.shape({
+      release: PropTypes.string,
+    }),
+  }),
+  hideModal: PropTypes.func.isRequired,
+  showModal: PropTypes.func.isRequired,
+};
+
+MiqErrorModal.defaultProps = {
+  dialogClassName: '',
+  show: false,
+  data: undefined,
+};
+
+const mapStateToProps = (state) =>
+  (state.ErrorModal ? { show: state.ErrorModal.show, error: state.ErrorModal.error } : {});
+const mapDispatchToProps = (dispatch) => bindActionCreators({ showModal, hideModal }, dispatch);
+export default connect(mapStateToProps, mapDispatchToProps)(MiqErrorModal);

app/javascript/oldjs/controllers/error_modal_controller.js

@@ -9,6 +9,7 @@ function ErrorModalController($timeout) {
 
   listenToRx(function(event) {
     if ('serverError' in event) {
+      console.log(event.serverError.headers.get('content-type'));
       $timeout(function() {
         $ctrl.show(event.serverError, event.source, event.backendName);
       });

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

@@ -76,6 +76,7 @@ import LiveMigrateForm from '../components/live-migrate-form';
 import MarkdownPreview from '../components/MarkdownPreview';
 import MiqAboutModal from '../components/miq-about-modal/miq-about-modal';
 import MiqAeCustomization from '../components/miq-ae-customization';
+import MiqErrorModal from '../components/miq-error-modal/miq-error-modal';
 import MiqAlertSetForm from '../components/miq-alert-set-form';
 import MiqCustomTab from '../components/miq-custom-tab';
 import MiqDataTable from '../components/miq-data-table';
@@ -259,6 +260,7 @@ ManageIQ.component.addReact('menu.Navbar', Navbar);
 ManageIQ.component.addReact('MarkdownPreview', MarkdownPreview);
 ManageIQ.component.addReact('MiqAboutModal', MiqAboutModal);
 ManageIQ.component.addReact('MiqAeCustomization', MiqAeCustomization);
+ManageIQ.component.addReact('MiqErrorModal', MiqErrorModal);
 ManageIQ.component.addReact('MiqAlertSetForm', MiqAlertSetForm);
 ManageIQ.component.addReact('MiqCustomTab', MiqCustomTab);
 ManageIQ.component.addReact('MiqDataTable', MiqDataTable);

app/views/layouts/_header.html.haml

@@ -15,6 +15,7 @@
                           :miqGroups => groups}, :id => 'main-menu')
 
 = react('ToastList')
+= react('MiqErrorModal')
 = react('MiqAboutModal', {:dialogClassName => ::Settings.server.custom_login_logo ? 'whitelabel' : ''})
 
 = render :partial => "layouts/spinner"

app/views/vm_common/_evm_relationship.html.haml

@@ -3,4 +3,4 @@
   %h3
     = _('Servers')
   .col-md-12
-    = react('VmServerRelationshipForm', :recordId => @record.id.to_s, :redirect => url_for(:action => :show, :id => @record.id))
+    = react('VmServerRelationshipForm', :recordId => @edit[:vm_id].to_s, :redirect => url_for(:action => :show, :id => @record.id))