Use new DataTypes module in angular front end #80

seehamrun · 2018-01-24T19:23:39Z

This switches over to using angulars http client for the submission of the configure form (instead of htmls form submit).

Switching over the angulars http submit means that the redirects are no longer blindly followed by the browser so as a workaround, I modified the type returned by the configure handler to be a DataTransfer and let the app redirect explicitly to it. This is similar to the way we redirect for the import auth flow and for copy setup.

Note: I manually generated the interface files. I'll look to see if there are tools that will create these for us.

#71

Note: This requires a static content deployment and a new image deploy (#67)

Angular XHR doesnt follow redirects from POST without an intial preflight task. To get around this, we dont redirect from configure and instead return a url in the response to follow. (Similar to the way we display a page for import setup and redirect to the auth flow).

holachuy

Very nice integration!

holachuy · 2018-01-24T20:07:48Z

client/proxy.conf.json

@@ -1,4 +1,9 @@
 {
+  "/configure/*":{


Can we just change the endpoint name to /_/configure where it is used on the client and where it is mapped in the server then we dont' need this block?

holachuy · 2018-01-24T20:10:00Z

client/src/app/backend.service.ts

@@ -55,6 +58,14 @@ export class BackendService {
      .catch(err => this.handleError(err));
  }

+  configure(formData: DataTransferRequest) {
+    let url = '/configure';


Can we use /_/configure ?

holachuy · 2018-01-24T20:13:17Z

client/src/app/backend.service.ts

+    // Redirect to the export authorization flow after configure.
+    // this should be returned from the configure request and is checked
+    // upon creation of the DataTransfer object.
+    window.location.href=res.nextURL;


Actually, I just checked and Angular has a location object you can import and use that is a bit more angular-ly
location.go("the url");

https://angular.io/api/common/Location
https://alligator.io/angular/location-service/

So looking at this more, I think the location object is meant to control within the app. When I try location.go("https://external/oauth/url"); it prefixes it with the app domain (localhost/https://external/oauth/url). It also doesnt trigger a page reload to the new path (so having something valid like location.go("/next") only changes the address bar)

The JS guide says to use the window.location instead for this: https://docs.angularjs.org/guide/$location

holachuy · 2018-01-24T20:26:36Z

...ypes-client/src/main/java/org/dataportabilityproject/types/client/transfer/DataTransfer.java


    @JsonCreator
    public DataTransfer(
            @JsonProperty(value = "source", required = true) String source,
            @JsonProperty(value = "destination", required = true) String destination,
            @JsonProperty(value = "transferDataType", required = true) String transferDataType,
-            @JsonProperty(value = "status", required = true) Status status) {
+            @JsonProperty(value = "status", required = true) Status status,
+            @JsonProperty(value = "nextURL", required = true) String nextURL) {


Will this be a property only on certain types of requests or all? My guess was that this might not be required.

Can we add documentation as well.

Done - I added the comment on the class member since adding it at the constructor looked awkward.

I was thinking the DataTransfer entity would be (eventually) POSTed to a URL when the user wanted to transfer data, but before they have supplied credentials. For my own understanding, what does nextURL do?

My intention was that nextURL would tell the front end client which urls to redirect to after handling the response.

There are three main points where the api server needs to inform the front end where to redirect to:

in ConfigureHandler (which is wrongly named, should be something like CreateJobHandler), after the front end client creates the job, it should redirect to oauth flow for the source service.

in ImportSetupHandler, the client should be redirected to the oauth flow for the destination service

in CopySetup, the client should redirect to the CopyHandler which will start the Copy.

I imagine if this is meant to be a sort of status page, it could be used to redirect the user to the correct page to go to. Example: if the user hasn't supplied creds yet, we could use it to redirect to the oauth flows. Or if theyre checking on the status of the copy, we could redirect them back to the in-status page (or a successful page if the copy is complete)?

Does that make sense?

holachuy · 2018-01-24T20:34:29Z

...-client/src/test/java/org/dataportabilityproject/types/client/transfer/DataTransferTest.java

@@ -13,11 +13,12 @@
    public void verifySerializeDeserialize() throws Exception {
        ObjectMapper objectMapper = new ObjectMapper();

-        DataTransfer transfer = new DataTransfer("testSource", "testDestination", "application/json", DataTransfer.Status.INPROCESS);
+        DataTransfer transfer = new DataTransfer("testSource", "testDestination", "application/json", DataTransfer.Status.INPROCESS,"nexturltofollow");


space after INPROCESS,

Done - reformatted the file with intellij autoformatter.

- Rename DataTransfer type to DataTransferResponse - Rename ConfigureHandler to DataTransferHandler - Use interface for DataTransferResponse instead of class on angular frontend. This is so that the response of the POST request isnt bound to a type but rather to the interface.

…ular

some changes: - Rename DataTransfer type to DataTransferResponse - Rename ConfigureHandler to DataTransferHandler - Use interface for DataTransferResponse instead of class on angular frontend. This is so that the response of the POST request isnt bound to a type but rather to the interface.

holachuy

Very nice!

…tly turn off encryptedFlow in qa (#94) * update qa index.html to reflect new content, turn on encryptedFlow in qa * turn encryptedFlow back off for qa

This updates the prod binary and static content with changes from #80 and #89 Front end changes tracked in: #67

seehamrun added 3 commits January 24, 2018 11:40

Merge

71fb7ef

seehamrun requested review from jimmarino and holachuy January 24, 2018 19:25

holachuy requested changes Jan 24, 2018

View reviewed changes

seehamrun and others added 8 commits January 24, 2018 14:47

rename /configure endpoint to /_/configure

9205ee4

Code review changes

b219832

Merge branch 'master' into angular

4eb03cd

Merge branch 'angular' of github.com:google/data-portability into ang…

9232ee5

…ular

formatting fixes, new lines, license headers

4e1de78

Merge branch 'master' into angular

5750f48

holachuy approved these changes Jan 25, 2018

View reviewed changes

seehamrun added 2 commits January 25, 2018 12:29

Merge branch 'master' into angular

d1706d5

Merge branch 'master' into angular

ac66d56

seehamrun merged commit 95f3763 into master Jan 25, 2018

seehamrun deleted the angular branch January 25, 2018 18:41

seehamrun mentioned this pull request Jan 26, 2018

update qa index.html to reflect new content from #80 and #89, explicitly turn off encryptedFlow in qa #94

Merged

seehamrun mentioned this pull request Jan 26, 2018

Update index.html for prod and explicity turn off encryptedFlow #95

Merged

seehamrun added a commit that referenced this pull request Jan 26, 2018

Update index.html for prod and explicity turn off encryptedFlow (#95)

8f88837

This updates the prod binary and static content with changes from #80 and #89 Front end changes tracked in: #67

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use new DataTypes module in angular front end #80

Use new DataTypes module in angular front end #80

seehamrun commented Jan 24, 2018 •

edited

holachuy left a comment

holachuy Jan 24, 2018

seehamrun Jan 24, 2018

holachuy Jan 24, 2018

seehamrun Jan 24, 2018

holachuy Jan 24, 2018

seehamrun Jan 24, 2018

holachuy Jan 24, 2018

seehamrun Jan 24, 2018

jimmarino Jan 24, 2018

seehamrun Jan 25, 2018

holachuy Jan 24, 2018

seehamrun Jan 24, 2018

holachuy left a comment

Use new DataTypes module in angular front end #80

Use new DataTypes module in angular front end #80

Conversation

seehamrun commented Jan 24, 2018 • edited

holachuy left a 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

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

holachuy left a comment

Choose a reason for hiding this comment

seehamrun commented Jan 24, 2018 •

edited