IdStory Identity Manager

I use official conversion utility for move PropTypes. I had problem with out of memory, so I had to run command for every module separately:

npx react-codemod React-PropTypes-to-prop-types

componentWillReceiveProps were renamed to UNSAFE_componentWillReceiveProps

npx react-codemod rename-unsafe-lifecycles --force

Replaces:

import TestUtils from 'react-addons-test-utils'; -> import TestUtils from 'react-dom/test-utils';

react-router-redux is death -> replace with connected-react-router

We need to upgrade the react-router to version 4.
- Migration https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md#patternutils

https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a

React-redux replace:

withRef: true -> forwardRef: true

Tests use Shallow renderer from the react-test-renderer:

Replace:

 const shallowRenderer = TestUtils.createRenderer(); -> const shallowRenderer = new ShallowRenderer();

To modified files add import ShallowRenderer from 'react-test-renderer/shallow';.

TODO: AbstractComponent-test was disabled !!!

Replace:

import { Link } from 'react-router'; -> import { Link } from 'react-router-dom';

Redux context is no longer in this.context.store. If you use the state directly (this.context.store.getState()), you have to rewrite logic for use react-redux select method in connect.

Replace:
Redux context is no longer in this.context.store. Dispatch method is in the props.

Replace is not necessary, I implemented ours IdmContext with redux store!

this.context.store.dispatch( -> this.props.dispatch(

React component doesn't have no longer instance of owner. I had to modified AbstractForm for use workaround (not nice, but it works).

Replace:
React router is in IdmContext only. For replace/push/goBack .. use this.context.history.

this.context.router -> this.context.history

Replace:
Method getWrappedInstance() on a redux component no longer exists, because is no necessary (if { forwardRef: true } is used).

.getWrappedInstance(). -> .

Url parameters are no longer in props.params. Use props.match.params instead.

Replace:

component.params -> component.match.params

Replace:

this.props.params -> this.props.match.params

Replace:

params={ this.props.match.params } -> match={ this.props.match }

params={this.props.match.params} -> match={ this.props.match }

Replace:

props.params -> props.match.params

nextProps.params -> nextProps.match.params

Manual replace:

ONLY for component using Advanced.TabPanel replace this.props.children -> this.getRoutes()

If you using redirect via replace or push method, then you have to ensure correct format of the path. Previouse version of react-router used absolute path only. This is not true now!

So, if you have this redirection:

this.context.history.replace(`systems`);

, then final url will be http://localhost:3000/#/currentUrl/systems!

If you want to use absolute path http://localhost:3000/#/systems, you have to use in this case:

this.context.history.replace(`/systems`);!

Suggestion is try to search (this.context.history.push(`, this.context.history.replace(`) and check if all useing of replace/push starts with slash. Replace all is not good idea, because in some cases can starts expression with call a method.

Same situation as previous occurs for <Basic.LinkCell> and <Advanced.ColumnLink> components, where attribute to is no longer absolute. So you need to add slash (if missing on the start of path).

Suggestion is try to search (to=") and check if all useing starts with slash. Replace all is not good idea, because in some cases can starts expression with call a method.

Example: <Basic.LinkCell property="key" to="workflow/definitions/:key"/> -> <Basic.LinkCell property="key" to="/workflow/definitions/:key"/>

React router since V4 doesn't parse the query parameters (.../?new=1) :-(.

I implemented parsing in AbstractContextComponent._parseUrlQuery.
Parsing is executed in constructor and result query object is sets to the this.props.location.query (for ensure back compatibility).

Beware this.props.location.query could be null, because redux calling Select method before constructor of AbstractContextComponent. So you have to prevent of throwing of the null pointer, typicaly in select mothod (for example: component.location ? component.location.query.automaticRoleId should be modified on component.location && component.location.query ? component.location.query.automaticRoleId : null;).

Method checkAccess in the SecurityManager was removed. This logic was moved to the AbstractContextComponent._getComponent(route).

Modal component from react-bootstrap contains bug! Modal dialog is show before subcomponents are rendered. So if you call setState for show a modal dialog and in callback you want to set focus on some component (this.refs.firstName.focus()), then you will obtain exception, because the ref for that component will be null.

I found ugly but working solution, it is the timeout (10ms). This timeout is implemented in AbstractTableContent.showDetail. It means, if you use this method, your modal dialog should be correctly rendered. If you showing modal dialog manually, then you have to add timeout or use method showDialog.

Here is example:

Not works:

  this.setState({
      detail: {
        show: true,
        entity
      }
    }, () => {
      this.refs.generatorType.focus();
    });

Works:

  super.showDetail(entity, () => {
      this.refs.generatorType.focus();
    });

I tried to update dependencies for backend of the frontend. It means gulp, babel, browsersync. I slolved many issues, but I ended on serviring a files by browserify. That operation never end (witout any error). I think the problem is in gulp vs babel.

I reveted my changes and only what I updated is browserify and browser-sync dependencies. It works, but only one issue remains ... automatic reload of the browsers does not work now.

I had big problem with Moda dialog. After upgrade on React 16 has bug, occurred when we need to access to the rendered components (via refs). Typicaly in the situation, when we need to set focus to the component or set data to the form.

I had to use the timeout (so now it works, but it is ugly), because Modal doesn't have rendered refs in this phase.
This problem occured after update on React 16, but primary bug is in react-bootstap.
Problem should be fixed, but still doesn't works (in 0.32.4).
https://github.com/react-bootstrap/react-bootstrap/issues/2841#issuecomment-378017284.

React router since V4 doesn't parse the query parameters (.../?new=1) :-(.

I implemented parsing in AbstractContextComponent._parseUrlQuery.
Parsing is executed in constructor and result query object is sets to the this.props.location.query (for ensure back compatibility).

I dicovered big issue. If data are set to the Form, then in setState callback aren't data correctly sets in form components!
I solved problem with no selection of the navigation.

I found solution/workaround for AbstractForm. Problem is in method setData, where are data set to every components of this form. Set state in components (setValue) are stated asynchronly, so AbstractForm, doesn't have current data after his own setState method ends.

Solution is: Before setValue for every component is called I sets same value direct to the component state (component.state.value = value). In this case has AbstractForm data immediately.

All changes are in the develop now.

https://github.com/bcvsolutions/CzechIdMng/commit/e7c12fe14750e724843f2c3e119cdac5dcb2395a

I found problem with react-boostrap Popover. Content showing in the popover is probablly rendered as new instance of React. This caused problem with Redux and Router, because that rendered content doesn't contains a Redux state and Router context.

So I had to wrapp the content to the new Redux provider and Router.

Because I need to propagate the redux store, I had to made ours Basic.Popover context able ... so extends from AbstractContextComponent now!

This workaround works correctly for now.

I found a problem in AbstractFrom, when some of form component is wrapped as Redux component, then AbstractForm doesn't found this component. Not worked for TreeNodeSelect and PasswordChangedComponent ...

I implemented additional search of Redux component to the AbstractForm. If Redux component is found, then I extracts original AbstractFromComponent.
This working correctly for now.

Migration guide for frontend is here:

https://github.com/bcvsolutions/CzechIdMng/blob/develop/MIGRATION.md#-frontend

I fixed:
- contract slice detail - empty page:
https://github.com/bcvsolutions/CzechIdMng/commit/e10ee4117ff70d243c667dd5d1dae650f1677001
- save local date (without time) in eav:
https://github.com/bcvsolutions/CzechIdMng/commit/b1eee090b553106ac20aab633afcd4d0960267a3
- link to identity profile in top navigation:
https://github.com/bcvsolutions/CzechIdMng/commit/bda6dfd2c7670834607221f3d1199df1657bb187#diff-d7847475a269682d7a97dd4dd61033a7
- identity detail - password - password informations - permission was fetched in cycle
https://github.com/bcvsolutions/CzechIdMng/commit/bda6dfd2c7670834607221f3d1199df1657bb187#diff-93f0803a787b8e3f9cd80258f1648c24
- remove redirect after username is changed:
https://github.com/bcvsolutions/CzechIdMng/commit/1aaf3eaa63acaa0b42a6ba5f4f564bf50998bf36
- revert removed tree node filter parameter (prevent to change rest api):
https://github.com/bcvsolutions/CzechIdMng/commit/7bc28b44afcd2a6405a6850273c5ca33126d70f1

I tested the whole FE and fixed some issues. Except some styles and minor issues, even fixed reports from other modules:
https://github.com/bcvsolutions/CzechIdMng/commit/22c18d9eb8435d28512d7cc6e734bddfd14bf136

Remaining issues:
- ✔️ role mapping overload - blank page (Commit: https://github.com/bcvsolutions/CzechIdMng/commit/b1eee090b553106ac20aab633afcd4d0960267a3)
- ✔️ the role of system mapping cannot be deleted from the system side (maybe it is good, but on the other hand there is a shine add button ... one or the other is ok) (Commit: https://github.com/bcvsolutions/CzechIdMng/commit/ffb22ff6cfabd37b13000fcf64d4b683055b187e)
- ✔️ virtual request approval from request detail (works on dashboard) - this.context.router is undefined (Commit: https://github.com/bcvsolutions/CzechIdMng/commit/b1eee090b553106ac20aab633afcd4d0960267a3)
- ✔️ Requests for change roles (Commit: https://github.com/bcvsolutions/CzechIdMng/commit/5ad8b5a711ac6843caeb892dd3b449dca0756633)
- ✔️ Audit - Automatic roles - Modal of rule - Is not readonly (Commit: https://github.com/bcvsolutions/CzechIdMng/commit/b1eee090b553106ac20aab633afcd4d0960267a3)
- ✔️ Notification template save - blank page (Commit: https://github.com/bcvsolutions/CzechIdMng/commit/b1eee090b553106ac20aab633afcd4d0960267a3)
- ✔️ notification template backup + redeploy (scripts to same) => file name is made from user usernam, which can contain crap (see encoding issue, but also on BE). (Commit: https://github.com/bcvsolutions/CzechIdMng/commit/841c22a9532d6b54c89f1f4a4cdfed071696a036)
- ✔️ scheduled task - add trigger not work (setTimeout is missing) (Commit: https://github.com/bcvsolutions/CzechIdMng/commit/b1eee090b553106ac20aab633afcd4d0960267a3)