Fixes #30952 - Rename react-component to foreman-react-component

Author: jturel

app/helpers/reactjs_helper.rb

@@ -13,7 +13,7 @@ def mount_react_component(name, selector, data = [], opts = {})
   def react_component(name, props = {})
     props = props.to_json if props.is_a?(Hash)
 
-    content_tag('react-component', '', :name => name, :data => { props: props })
+    content_tag('foreman-react-component', '', :name => name, :data => { props: props })
   end
 
   def webpacked_plugins_js_for(*plugin_names)

webpack/assets/javascripts/react_app/common/MountingService.js

@@ -53,7 +53,7 @@ class ReactComponentElement extends HTMLElement {
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(
-        `Unable to mount react-component: ${this.componentName}`,
+        `Unable to mount foreman-react-component: ${this.componentName}`,
         error
       );
     }
@@ -65,13 +65,16 @@ class ReactComponentElement extends HTMLElement {
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(
-        `Unable to unmount react-component: ${this.componentName}`,
+        `Unable to unmount foreman-react-component: ${this.componentName}`,
         error
       );
     }
   }
 }
 
-if (!window.customElements.get('react-component')) {
-  window.customElements.define('react-component', ReactComponentElement);
+if (!window.customElements.get('foreman-react-component')) {
+  window.customElements.define(
+    'foreman-react-component',
+    ReactComponentElement
+  );
 }

webpack/stories/docs/adding-new-components.stories.mdx

@@ -120,13 +120,13 @@ react_component(component_name, props)
 will render the following HTML:
 
 ```html
-<react-component
+<foreman-react-component
   name="PowerStatus"
   data-props="<%= {
     id: host.id,
     url: power_host_path(host.id)
   }.to_json %>"
-></react-component>
+></foreman-react-component>
 ```
 
 (Note that the React component is rendered as a [web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components).)

webpack/stories/docs/plugins.stories.mdx

@@ -31,13 +31,13 @@ react_component(component_name, props)
 will render the following HTML:
 
 ```html
-<react-component
+<foreman-react-component
   name="PowerStatus"
   data-props="<%= {
     id: host.id,
     url: power_host_path(host.id)
   }.to_json %>"
-></react-component>
+></foreman-react-component>
 ```
 
 (Note that the React component is rendered as a [web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components).)