Name Examination UI to reflect NR number in the URL

[bolyachevets]

Travis asked if it is possible to make name examination UI reflect NR number in URL based.

[PCC199]

@seeker25 Could you provide a little more insight

[seeker25]

EG. https://namex-test.apps.silver.devops.gov.bc.ca/names/NR3927826
or
EG. https://namex-test.apps.silver.devops.gov.bc.ca/NR3927826

Should take you directly to that name request, without needing to enter into the search, then press ok etc.

This also makes it easier for sharing Name requests via URL and makes it possible for other apps to build in links that can be navigated to easily

[severinbeauvais]

I love this idea.

@eve-git , here is how Filings UI does it.

1. get id from URL: https://github.com/bcgov/business-filings-ui/blob/461141553e3e137d298d6988e62a53cfee733398/src/utils/set-base-route-and-business-id.ts#L12

2. set base for Vue Route as URL + id: https://github.com/bcgov/business-filings-ui/blob/461141553e3e137d298d6988e62a53cfee733398/src/utils/set-base-route-and-business-id.ts#L29

3. configure Vue Route normally: https://github.com/bcgov/business-filings-ui/blob/461141553e3e137d298d6988e62a53cfee733398/src/router.ts#L12

4. do whatever you need to in the web app to switch between views (aka routes): https://github.com/bcgov/business-filings-ui/blob/461141553e3e137d298d6988e62a53cfee733398/src/App.vue#L123

[eve-git]

@severinbeauvais
name-examination defines routers https://github.com/bcgov/name-examination/blob/a469c57181310fdb785018a7c957fbf1d32f452a/client/src/router/index.js#L36
If search NR info from search input, first it goes to https://github.com/bcgov/name-examination/blob/a469c57181310fdb785018a7c957fbf1d32f452a/client/src/store/index.js#L330
and in the response, it used router.push https://github.com/bcgov/name-examination/blob/a469c57181310fdb785018a7c957fbf1d32f452a/client/src/store/index.js#L345

I added a param in the nameexamination router definition:

  {
      name: 'nameexamination',
      component: NameExamination,
      path: '/nameExamination/:param',
}

The NR number is successful put in the URL, like http://localhost:8081/nameExamination/NR3361106. I updated code in routers.beforeResolve and redirected to newNrNumber in the case, just like a normal search. However, I always have 404 error after clicking the URL having an NR number. I understand that the action is like reload a page, all the sessionStorage and state values were cleared. I wonder how business-filings pass security when reloading a new page?

[severinbeauvais]

There are different ways to do this.

1. The example I gave you has the id as part of the base route, so the router has nothing to do with it. (It is not a route on the base URL.)

2. You could use a URL parameter (eg, &restoration-id=123)... like this: https://github.com/bcgov/business-edit-ui/blob/ee8f73106a64582b5841a9c8d58230f9d8d46c5f/src/router/routes.ts#L64

3. You could do what you're doing, which I think is a route on the base path. But I think you need to do something with the param (gets passed in as prop?).

[seeker25]

As discussed with Eve:
There's a bit of added on complexity due to how the login mechanism works in name examination. That needs to be reworked a bit first to work correctly.

Already logged into KC

1. Navigate to https://namex-dev.apps.silver.devops.gov.bc.ca/nameExamination
2. Route guard takes you to https://namex-dev.apps.silver.devops.gov.bc.ca/
3. Click on https://namex-dev.apps.silver.devops.gov.bc.ca/signin
4. Signin takes you to /home

Not logged in flow:

1. Click on sign in:
   it redirects you to here:
   https://dev.loginproxy.gov.bc.ca/auth/realms/bcregistry/protocol/openid-connect/auth?client_id=NameX-Dev&redirect_uri=https%3A%2F%2Fnamex-dev.apps.silver.devops.gov.bc.ca%2Fsignin&state=xxf&response_mode=fragment&response_type=code&scope=openid&nonce=xx
2. you login, it takes you back to https%3A%2F%2Fnamex-dev.apps.silver.devops.gov.bc.ca%2Fsignin
3. When you login it takes you back to /home

Some small changes are required to add in a redirect url (careful with this, potential bad actors), or store the original URL before redirecting to /home and having the user click the signin button

This can be passed up to the keycloak login (optionally):

keycloak.init({token: token, onLoad: 'login-required', redirectUri: 'http://localhost:8081/signin?redirectUrl=http://localhost:8081/NR594594'}).

could even be saved in the session state and redirected using that after logging in (reading session storage perhaps) [if it doesn't exist, just redirect to /home like it's doing now]

Currently in App.vue, created loadSetUp is called which wipes out most of the session state variables - so some tweaks and considerations are required

[eve-git]

ready for test in DEV and TEST environment.

To test:

1. Log in and input the NR number into the search bar.
2. The NR examination page should appear identical to the previous version, with the only difference being that the NR number is now included in the URL.
3. You could either click the URL to reload the page or modify the NR number in the URL for searching another NR.
4. If you log out, accessing the URL directly will prompt you to log in, and upon successful login, it will automatically redirect you to the NR examination page.

[oanyahuru]

@eve-git , I tested, and the NR is imbedded in the URL as you described above

I also could access the NR directly with the URL

[eve-git]

I take back the ticket. After clicking "Go Next" the nr number in the URL is not changed:

[seeker25]

This will be super handy, pretty excited

[eve-git]

Deployed the new code change to DEV and TEST environment.

Ready to test

[oanyahuru]

Tested, it looks ok, the "Go Next" button causes the NR number in the URL to change to the new NR