Added react-ui-components to dependencies.

app/javascript/components/vm-snapshot-form-component.jsx

@@ -4,7 +4,7 @@ import { VmSnapshotForm } from '@manageiq/react-ui-components/dist/vm-snapshot-f
 
 const VmSnapshotFormComponent = (props) => {
   const {
-    nameRequired,
+    nameOptional,
     createUrl,
     cancelUrl,
     ...rest
@@ -24,9 +24,9 @@ const VmSnapshotFormComponent = (props) => {
     <VmSnapshotForm
       errorMessages={errorMessages}
       labels={labels}
-      hideName={!nameRequired}
+      hideName={nameOptional}
       nameRequired
-      descriptionRequired={!nameRequired}
+      descriptionRequired={nameOptional}
       onSubmit={values => window.miqAjaxButton(createUrl, values)}
       onCancel={() => window.miqAjaxButton(cancelUrl)}
       {...rest}
@@ -35,13 +35,13 @@ const VmSnapshotFormComponent = (props) => {
 };
 
 VmSnapshotFormComponent.propTypes = {
-  nameRequired: PropTypes.bool,
+  nameOptional: PropTypes.bool,
   createUrl: PropTypes.string.isRequired,
   cancelUrl: PropTypes.string.isRequired,
 };
 
 VmSnapshotFormComponent.defaultProps = {
-  nameRequired: true,
+  nameOptional: false,
 };
 
 export default VmSnapshotFormComponent;

app/javascript/miq-component/helpers.js

@@ -10,7 +10,7 @@ export function componentFactory(blueprintName, selector) {
   if (!isDefined(blueprintName)) {
     throw new Error(`Attempt to create instance of ${blueprintName}. Blueprint ${blueprintName} is not defined!`);
   }
-  const element = document.getElementById(selector);
+  const element = document.querySelector(selector);
   const props = element.dataset;
   ManageIQ.component.newInstance(blueprintName, props, element);
 }

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

@@ -1,6 +1,4 @@
 import React from 'react';
 import VmSnapshotFormComponent from '../components/vm-snapshot-form-component';
 
-ManageIQ.component.define('VmSnapshotForm', ManageIQ.component.reactBlueprint(props => (
-  <VmSnapshotFormComponent {...props} />
-)));
+ManageIQ.component.addReact('VmSnapshotForm', props => <VmSnapshotFormComponent {...props} />);

app/views/vm_common/_snap.html.haml

@@ -1,7 +1,7 @@
 = render :partial => "layouts/flash_msg"
 #snap-form{"data-create-url" => url_for_only_path(:action => "snap_vm", :id => @record.id, :button => @edit ? "create" : nil),
            "data-cancel-url" => url_for_only_path(:action => "snap_vm", :id => @record.id, :button => @edit ? "cancel" : nil),
-           "data-name-required" => !!@record.try(:snapshot_name_optional?)}
+           "data-name-optional" => @record.try(:snapshot_name_optional?)}
 
 :javascript
-  ManageIQ.component.componentFactory('VmSnapshotForm', 'snap-form');
+  ManageIQ.component.componentFactory('VmSnapshotForm', '#snap-form');

package.json

@@ -21,6 +21,7 @@
   },
   "homepage": "https://github.com/ManageIQ/manageiq#readme",
   "dependencies": {
+    "@manageiq/react-ui-components": "^0.3.0",
     "angular": "~1.6.6",
     "angular-animate": "~1.6.6",
     "angular-bootstrap-switch": "~0.5.2",