Add information about shared component API #307

karelhala · 2018-05-14T08:22:46Z

Shared component API guide to show how to create and use and simple list of interaction with such component.

karelhala · 2018-05-14T08:23:21Z

@miq-bot assign @himdel
@martinpovolny @Hyperkid123 take a look at this.

martinpovolny · 2018-05-14T10:28:57Z

ui/register_react_component.md

+import addReact from 'helpers';
+import { YourComponent } from 'your-components/custom-component';
+
+addReact('YourComponentName', props => <YourComponent {...props} />);


why don't just call

addReact('YourComponentName', YourComponent);

?

himdel · 2018-05-14T10:32:37Z

ui/register_react_component.md

@@ -0,0 +1,98 @@
+### Register react component
+In ManageIq project there is a way of sharing components, getting their state and control their flow by something which is called ManageIq component.


ManageIQ, the q is big ;)

martinpovolny · 2018-05-14T10:32:43Z

ui/register_react_component.md

+Instance's ID under which it's created.
+
+#### interact
+Should the component chooses it can supply object over which it's possible side channel communication.


s/chooses/choose/

which/that?

"possible side channel communication" -- verb missing?

martinpovolny · 2018-05-14T10:33:16Z

ui/register_react_component.md

+This function helps you to update component's public props. You can add new prop or update existing prop.
+
+#### destroy
+To destroy instance and remove it from DOM (no point of return) simply call this function.


no way back?

martinpovolny · 2018-05-14T10:33:30Z

ui/register_react_component.md

+```
+
+### Component instance API
+When you create new instnace or search for instance of component you will receive object over which you can interact with this instance and observe it's properties.


s/instnace/instance

"which" sounds Czenglish

himdel · 2018-05-14T10:33:33Z

ui/register_react_component.md

+### Register react component
+In ManageIq project there is a way of sharing components, getting their state and control their flow by something which is called ManageIq component.
+
+This registry and usage consists of three steps, define blueprint which holds the react component with it's props. Then you will define it inside shared components (use blueprint created in step 1). And when someone decides to use such component he will call function newInstance with custom props and element to which such component is bound to.


it's = it is
its = possessive

... in many places :)

s/which holds/that holds

martinpovolny · 2018-05-14T10:34:50Z

ui/register_react_component.md

+
+When creating new instance you have option to pass multiple parameters:
+* name - component's name under which component was defined
+* props - default props to component


default props for the component

himdel · 2018-05-14T10:35:19Z

ui/register_react_component.md

+import newInstance from 'registry';
+
+const props = {};
+const element = document.getElementById('element-id');


no getElementById, newInstance should take a normal selector

(or should this be using componentMarkup instead?)

New instance expects mount to element, because we don't know how user gets such element either trough getElement, trough react prop or whatever. @Hyperkid123 is writing helper method which will be shortcut to these commands.

What I'm saying is - the default method to instantiate a component must follow the same rules as all the other methods (like miq_bootstrap).

So.. if this documents newInstance as something you would want to use, we need to change it to take selectors.

If this documents componentMarkup as the thing to use, and mentions newInstance only for the cases where you're doing stuff manually, we don't need to change it.

But.. right now, it appears like newInstance is the preferred way, possibly not what you intended?

martinpovolny · 2018-05-14T10:36:59Z

ui/register_react_component.md

+```
+
+#### 2. New instance
+When you want to create new instance of recently created component just call newInstance function with these arguments


newInstance (backticks missing)

martinpovolny · 2018-05-14T10:37:26Z

ui/register_react_component.md

+
+#### 2. New instance
+When you want to create new instance of recently created component just call newInstance function with these arguments
+* name - name of component you wish to use.


name of the component

martinpovolny · 2018-05-14T10:37:55Z

ui/register_react_component.md

+#### 2. New instance
+When you want to create new instance of recently created component just call newInstance function with these arguments
+* name - name of component you wish to use.
+* props - object with props which will be mapped to your components (used when creating blueprint)


s/props which will/props that will/

himdel · 2018-05-14T10:53:08Z

Also this is missing any mention of ManageIQ.component.* - we probably should import & use in es6 code, but any es5 code needs to know about the functions being available on ManageIQ.component.

himdel · 2018-05-14T11:09:01Z

This should probably also include a way to get redux running...

~~Right now, using newInstance/componentMarkup, it's impossible to use redux, unless the original component is defined with <Provider...> around it.~~

~~(And I'm not really seeing a way of adding a ReduxRoot component into the component registry, as we can't really nest registry components that way.)~~

(None of that is true, but it needs to be documented ;).)

Hyperkid123 · 2018-05-14T11:13:41Z

@karelhala can you add the component factory usage?

karelhala · 2018-05-14T13:26:29Z

@himdel @martinpovolny thanks for the review 👍 . Fixed all of your comments and added section about import mapping so when we use ES5 we know where to look for.

EDIT: It's at the bottom of documentation, should I add it above component API?

Also component API is not fully covered some functions are missing, but the basic concept of defining and creating new instance, plus basic usage of component's API is covered.

himdel · 2018-05-14T14:03:35Z

ui/register_react_component.md

@@ -0,0 +1,107 @@
+### Register react component
+In ManageIQ project there is a way of sharing components, getting their state and control their flow by something which is called ManageIq component.


ManageIq component

ManageIQ

himdel · 2018-05-14T16:43:26Z

ui/register_react_component.md

+import addReact from 'helpers';
+import { YourComponent } from 'your-components/custom-component';
+
+addReact('YourComponentName', YourComponent);


Looks like we may need to add something like...

If your component is not a pure function but a react class, you will need to call addReact('YourComponentName', (props) => <YourComponent {...props}>); instead.

(But, maybe it would be better to fix that, let's talk tomorrow about how :))

Yes, I hit that today.

=> ManageIQ/manageiq-ui-classic#3941

Hyperkid123 · 2018-05-15T09:59:19Z

ui/register_react_component.md

+* props - object with props that will be mapped to your components (used when creating blueprint)
+* element - DOM element where this new instance of component should be rendered.
+```JS
+import componentFactory from 'helpers';


componentFactory is not a default export, should be import { componentFactory } from ...

Hyperkid123 · 2018-05-15T10:00:08Z

ui/register_react_component.md

+import componentFactory from 'helpers';
+
+const props = {};
+componentFactory('YourComponentName', props, 'selector');


Order of parameters is wrong, should be componentFactory('YourComponentName', 'selector', props). Also props is not mandatory and you can pass them via. data atribute of them DOM element

himdel · 2018-05-15T11:02:42Z

@karelhala The "New Instance" section doesn't actually show anything about using the component in manageiq.

This needs an example of a rails view using a react component with params :).

himdel · 2018-05-15T13:59:43Z

Also added a rails helper - ManageIQ/manageiq-ui-classic#3943

the short version:

= react 'Whatever', {:pro => 'ps'}

is the equivalent of

- id = unique_html_id('react')
%div{:id => id}
:javascript
  ManageIQ.component.componentFactory('Foo', '##{id}', '{"pro": "ps"}');

martinpovolny · 2018-05-15T14:56:20Z

Oh, crap, I wanted to merge ManageIQ/manageiq-ui-classic#3943 ;-)

Please, fix the documentation in a follow-up PR and don't tell anyone!

karelhala force-pushed the reactUIAPI branch 6 times, most recently from 5440bf7 to 61b6760 Compare May 14, 2018 08:53

martinpovolny reviewed May 14, 2018

View reviewed changes

himdel reviewed May 14, 2018

View reviewed changes

martinpovolny reviewed May 14, 2018

View reviewed changes

himdel reviewed May 14, 2018

View reviewed changes

martinpovolny reviewed May 14, 2018

View reviewed changes

himdel reviewed May 14, 2018

View reviewed changes

martinpovolny reviewed May 14, 2018

View reviewed changes

karelhala force-pushed the reactUIAPI branch from 61b6760 to 1f9f5bf Compare May 14, 2018 13:24

himdel reviewed May 14, 2018

View reviewed changes

karelhala force-pushed the reactUIAPI branch from 1f9f5bf to c5d215f Compare May 14, 2018 14:12

himdel reviewed May 14, 2018

View reviewed changes

Hyperkid123 reviewed May 15, 2018

View reviewed changes

Add information about shared component API

8d8d563

karelhala force-pushed the reactUIAPI branch from c5d215f to 8d8d563 Compare May 15, 2018 11:37

martinpovolny merged commit a1b6a78 into ManageIQ:master May 15, 2018

karelhala mentioned this pull request May 21, 2018

Add info about generic react component definition trough HAML #308

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add information about shared component API #307

Add information about shared component API #307

karelhala commented May 14, 2018

karelhala commented May 14, 2018 •

edited

Loading

martinpovolny May 14, 2018

himdel May 14, 2018

martinpovolny May 14, 2018

martinpovolny May 14, 2018

martinpovolny May 14, 2018 •

edited

Loading

himdel May 14, 2018

martinpovolny May 14, 2018

martinpovolny May 14, 2018

himdel May 14, 2018

karelhala May 14, 2018

himdel May 14, 2018

martinpovolny May 14, 2018

martinpovolny May 14, 2018

martinpovolny May 14, 2018

himdel commented May 14, 2018

himdel commented May 14, 2018 •

edited

Loading

Hyperkid123 commented May 14, 2018

karelhala commented May 14, 2018 •

edited

Loading

himdel May 14, 2018

himdel May 14, 2018

martinpovolny May 14, 2018

himdel May 15, 2018

Hyperkid123 May 15, 2018

Hyperkid123 May 15, 2018 •

edited

Loading

himdel commented May 15, 2018

himdel commented May 15, 2018 •

edited

Loading

martinpovolny commented May 15, 2018

		@@ -0,0 +1,98 @@
		### Register react component
		In ManageIq project there is a way of sharing components, getting their state and control their flow by something which is called ManageIq component.

		@@ -0,0 +1,107 @@
		### Register react component
		In ManageIQ project there is a way of sharing components, getting their state and control their flow by something which is called ManageIq component.

Add information about shared component API #307

Add information about shared component API #307

Conversation

karelhala commented May 14, 2018

karelhala commented May 14, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

martinpovolny May 14, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

himdel commented May 14, 2018

himdel commented May 14, 2018 • edited Loading

Hyperkid123 commented May 14, 2018

karelhala commented May 14, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hyperkid123 May 15, 2018 • edited Loading

Choose a reason for hiding this comment

himdel commented May 15, 2018

himdel commented May 15, 2018 • edited Loading

martinpovolny commented May 15, 2018

karelhala commented May 14, 2018 •

edited

Loading

martinpovolny May 14, 2018 •

edited

Loading

himdel commented May 14, 2018 •

edited

Loading

karelhala commented May 14, 2018 •

edited

Loading

Hyperkid123 May 15, 2018 •

edited

Loading

himdel commented May 15, 2018 •

edited

Loading