Project

General

Profile

Actions

Task #1882

closed

Task #1846: Upgrade the frontend

Dynamic generating a <Route> from routes.js

Added by Vít Švanda over 4 years ago. Updated over 4 years ago.

Status:
Closed
Priority:
Normal
Assignee:
Vít Švanda
Category:
Frontend
Target version:
Start date:
09/30/2019
Due date:
% Done:

100%

Estimated time:
Owner:

Description

Within upgarde on React router v4 is routes.js no longer use. Every parent component must know all his children now. This broked our modularity. We need to develop mechanism for generating <Route> elements by configuration from a routes.js.

Actions #2

Updated by Vít Švanda over 4 years ago

  • Solved problem with show identity-contract. Implemented sort, where more specific routes are first.
  • Solved problem with show tree. In this case route does not have a component. Implemented mechanizm for search route with component if the parent component does not exist.
Actions #3

Updated by Vít Švanda over 4 years ago

Funny story. I found this part of react-router "react-router-config". Goal of this project is generating Routes by static routes.js. So exactly what we need. I tried to use it, but there are same problems what I already solved and some new. So on the end my work is not useless.

https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config

Actions #4

Updated by Vít Švanda over 4 years ago

  • % Done changed from 0 to 70

Solved problem with show new identity. I modified the sorting of routes, when bigger priority have routes without childRoutes (leaf is more specific route).

Actions #5

Updated by Vít Švanda over 4 years ago

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).

Actions #6

Updated by Vít Švanda over 4 years ago

I found problem with some definiton of routes. For example:

    {
      path: 'code-lists',
      component: require('./src/content/codelist/CodeLists'),
      access: [ { type: 'HAS_ANY_AUTHORITY', authorities: ['CODELIST_READ'] } ]
    },
    {
      path: 'code-lists/',
      component: require('./src/content/codelist/CodeListRoutes'),
      access: [ { type: 'HAS_ANY_AUTHORITY', authorities: ['CODELIST_READ'] } ],
      childRoutes: [
        {
          path: ':entityId/detail',
          component: require('./src/content/codelist/CodeListDetail'),
          access: [ { type: 'HAS_ANY_AUTHORITY', authorities: ['CODELIST_READ'] } ]
        },
        {
          path: ':entityId/items',
          component: require('./src/content/codelist/CodeListItems'),
          access: [ { type: 'HAS_ANY_AUTHORITY', authorities: ['CODELISTITEM_READ'] } ]
        },
        {
          path: ':entityId/attributes',
          component: require('./src/content/codelist/CodeListAttributes'),
          access: [ { type: 'HAS_ANY_AUTHORITY', authorities: ['FORMATTRIBUTE_READ'] } ]
        }
      ]
    },

I have problem with correct sorting of this routes (from others reasons I have to ignored the slash ). I need to implement some unbender. I need to the second route will be not only code-lists/, but code-lists/:entityId.

Actions #7

Updated by Vít Švanda over 4 years ago

React router since V4 doesn't have method onEnter. We used this method for check access rights for the route.

I implemented this check in the AbstractContextComponent. In the place where I generate the Route, I check access rights (and if is module enabled). If not I set to the Route error component (403, 503) or Login. So I don't make a redirect, but I only replacing a component.

Commit: https://github.com/bcvsolutions/CzechIdMng/commit/5601e0f6d77ef38cfaea9e9fc8aa251ad46e9c1b

Actions #8

Updated by Vít Švanda over 4 years ago

I implemented method fixerRoute in routes.js.

Solve problem, when route could have more specific path, but this path is defined in every children. Then is problem with correct ordering this routes (since react-router V4). This method try to find this routes and fix it.

For example path of 'code-lists/' is changed to 'code-lists/:entityId'.

Actions #9

Updated by Vít Švanda over 4 years ago

  • Status changed from In Progress to Needs feedback
  • Assignee changed from Vít Švanda to Radek Tomiška
  • % Done changed from 70 to 90
Actions #10

Updated by Radek Tomiška over 4 years ago

  • Status changed from Needs feedback to Resolved
  • Assignee changed from Radek Tomiška to Vít Švanda
  • % Done changed from 90 to 100

I did test and code review. I like it, I see two big props:
- check access does not redirect - you see url, which cannot be accessed.
- unique key is added to child component (content is refreshed automaticaly, when url is changed, no custom ''componentWillReceive...'' is needed)

Actions #11

Updated by Vít Švanda over 4 years ago

  • Status changed from Resolved to In Progress
Actions #12

Updated by Vít Švanda over 4 years ago

  • Status changed from In Progress to Needs feedback
  • Assignee changed from Vít Švanda to Radek Tomiška

Fixed:

- Public pages doesn't work for unauthenticated users - fixed
Commit: https://github.com/bcvsolutions/CzechIdMng/commit/a5604add981a32aef1fe6da67129e7fc7f7f3a74

- Login page is redirected on original url after succes login - fixed
Commit: https://github.com/bcvsolutions/CzechIdMng/commit/760a018731ffc3002fe833fbfdb133eae12715e1

Actions #13

Updated by Radek Tomiška over 4 years ago

  • Assignee changed from Radek Tomiška to Vít Švanda
  • % Done changed from 100 to 90

I tested both issues above, it work, thx!

I've added another fix - url parameters was encoded twice, commit:
https://github.com/bcvsolutions/CzechIdMng/commit/b2b829685e3f5bc10161a26a82d266a99b54d853

Could you do a feedback, please?

Actions #14

Updated by Vít Švanda over 4 years ago

- Routing - Disabled module doesn't work - fixed (Commit: https://github.com/bcvsolutions/CzechIdMng/commit/eec70694bc4fd482b8dad93a7832fbb8f9d3e168)

- Routing - Automatic roles for attributes - tabs on detail doesn't work - fixed (Commit: https://github.com/bcvsolutions/CzechIdMng/commit/6bb46cde4a9862fc87e320aaf5ea74dfe5890537)

- Automatic role by attributes - new update request dosen't have prefilled current rules - fixed (Commit: https://github.com/bcvsolutions/CzechIdMng/commit/3242e7dc4453c50da3124291fc7901bc1339c5df)

Actions #15

Updated by Vít Švanda over 4 years ago

  • Assignee changed from Vít Švanda to Radek Tomiška

I tested ID instead username in URL.

I found one problem in infocard (identity-contract - garant). If I use the refs here, then redirection use username in URL.

Second and biger problem is in compatibility. Notifications use username in URL and it means they have to be modified. I have idea how maybe fix original problem with double encoding ... if decoding function will be used before using every encoding function, then result could be correct. What do you think?

Actions #16

Updated by Radek Tomiška over 4 years ago

I agree, the idea simply not use username in url is not sufficient - we need to find another solution and i like yours ... but example with input string:

%%25 - decode(%%25) = %% => encode(%%) = %25%25

doesn't work. I know, the posibility is low, but '%' is used as wildcard in filters (filters are encoded too).
The second solution is implement some wrapper above router parameters (accessed by ''this.props.match.params''), which was decoded automatically in previous router version.

Actions #17

Updated by Radek Tomiška over 4 years ago

Thx for fixes above, i tested it and it works.

Actions #18

Updated by Radek Tomiška over 4 years ago

I reverted username usage and url encoding:
https://github.com/bcvsolutions/CzechIdMng/commit/aaa72881daed59c1e80de6967984a7ca253a7cd3

Now we need to fix original issue with double encoding :)

Actions #19

Updated by Vít Švanda over 4 years ago

Actions #20

Updated by Radek Tomiška over 4 years ago

  • Status changed from Needs feedback to Resolved
  • Assignee changed from Radek Tomiška to Vít Švanda

I did test and code review, works, thx!

Actions #21

Updated by Radek Tomiška over 4 years ago

  • % Done changed from 90 to 100
Actions #22

Updated by Vít Švanda over 4 years ago

  • Status changed from Resolved to Closed
Actions

Also available in: Atom PDF