Repository: oppia/oppia

Issue:
HTTPs calls in frontend should only happen through *backend-api.services
We are expecting to make all the https class from a backend-api.services (like [this question-backend-api.service.ts](https://github.com/oppia/oppia/blob/develop/[core/templates/domain/question/question-backend-api.service.ts)).](https://github.com/oppia/oppia/tree/develop/core/templates/domain/question/question-backend-api.service.ts)).) As of now there are few services (Which aren't backend-api.service) which are making https calls directly, through this issue we are trying to avoid making https calls from any general service.

**Note: While working on this issue if you are going to create a new file/service then try to add this new service following Angular structure (not angularJS). [You can check the doc "[ABC of Angular Migration](https://docs.google.com/document/d/14uUhOgkYst8qfQfSuHZZB9RDz-4DwtB8L5HMSbOBMfM/edit?usp=sharing)" for help.]**

Please contact @JeeveshGarg if you have any questions about this issue.

PR's for reference: #8407 
The listed services file below needs to be refactored such that they don't make any https call directly instead they should use any existing (or create new if required) *backend-api.service:

- [ ] [core/templates/components/entity-creation-services/story-creation.service.ts](https://github.com/oppia/oppia/tree/develop/core/templates/components/entity-creation-services/story-creation.service.ts)  
- [ ] [core/templates/services/csrf-token.service.ts](https://github.com/oppia/oppia/tree/develop/core/templates/services/csrf-token.service.ts)


Note: For a guide on how to access Oppia's webpages, see [this](https://github.com/oppia/oppia/wiki/How-to-access-Oppia-webpages).


Discussion:
Hi, can I help contribute to this? Thanks!
May I work on this issue ?
Hey, can i start working on this please!!!

@Aaryan-kapur Please pick a part of the issue you want to work on
hey @nishantwrp , 
core/templates/dev/head/services/playthrough.service.ts please
Thank you so much! 
@Aaryan-kapur Go ahead!
thank you so much @nishantwrp , can you please assign me

> thank you so much @nishantwrp , can you please assign me

I did already
Thank you

> > thank you so much @nishantwrp , can you please assign me
> 
> I did already


Hey @nishantwrp Can I get to work on `core/templates/dev/head/components/entity-creation-services/collection-creation.service.ts` ? And as all the files under `core/templates/dev/head/components/entity-creation-services` are related, maybe I will extend my work to create a common backend service for all these files? 
@Arnesh07 Sure, Go ahead! Assigned you.
Just one more doubt, should I be making one common backend service for all these files or a different backend service for each one? @nishantwrp  
Make a new one, if doesn't exist
hey @nishantwrp @DubeySandeep 

please check : https://github.com/oppia/oppia/pull/8247#issue-355826357

thanks
Hello, can I assigned to core/templates/dev/head/components/entity-creation-services/story-creation.service.ts ?
@ananthanandanan Sure, assigned you!
Hey can I work on this issue?
@shrustysingh01 Sure, Please let me know which part of the issue would you like to work on
 I want to work on core/templates/dev/head/pages/exploration-player-page/services/learner-view-rating.service.ts
Thanks
@shrustysingh01 Assigned you! :+1: 
Thanks !!
Hi,
Can I be claimed to core/templates/dev/head/components/entity-creation-services/question-creation.service.ts

@kasthuri28 Sure you got it.
Thank You :)
Hey. I'd like to work on 
core/templates/dev/head/pages/community-dashboard-page/services/translate-text.service.ts

Thanks!
Hey @dush-t , I have assigned you. 
Also, please write test for these files if they are not already present.
Thanks!
@nishantwrp  can you assign me the core/templates/dev/head/components/entity-creation-services/skill-creation.service.ts
Thanks 
@abhayraghuwanshi Done!
@nishantwrp can you assign the PrChangelog to  #8674
@nishantwrp  can you assign me the  core/templates/dev/head/components/entity-creation-services/topic-creation.service.ts
@abhayraghuwanshi You got it!
@bansalnitish can you assign changelog to #8685
@brianrodri can you assign me the core/templates/dev/head/pages/creator-dashboard-page/suggestion-modal-for-creator-view/suggestion-modal-for-creator-view.service.ts 
@Rajat012k done, thanks!
@nishantwrp can you assign me  core/templates/dev/head/pages/exploration-player-page/services/exploration-recommendations.service.ts
Hi @Rajat012k any updates here?
Hey @vikasprashar99 sorry for the late reply.
Did you still need this file to work?
@import-keshav not now
Hi, would like to take  core/templates/components/entity-creation-services/exploration-creation.service.ts. Thanks
Hey. I'd like to work on
core/templates/pages/exploration-editor-page/services/state-tutorial-first-time.service.ts
Thanks!
Hey @nishantwrp, I would like to work on core/templates/pages/community-dashboard-page/services/contribution-and-review.services.ts 
Thanks!
Assigned you @robatras!
Hello, can I get assigned to  core/templates/pages/exploration-editor-page/services/exploration-data.service.ts please?
Thanks
Hey @anirudh-g99, Assigned you!
Hey can I get assigned to exploration-editor-page.controller.ts
Hmm, I don't think exploration-editor-page.controller.ts sends any HTTP requests @DubeySandeep could you take a look? Also, could I be assigned to exploration-creation.service.ts instead
Hi @jimbyo -- assigned you, thanks! (Actually, as a collaborator, I think you can also edit the original comment and assign yourself directly -- is that right?)

I'll need to defer to @DubeySandeep to answer your other question though! 
Thank you @seanlip I'll keep that in mind for the future!
@Showtim3 @DubeySandeep please do let me knwo which files you want me to work on
Hi, I am no longer working on community-dashboard-page/services/contribution-and-review.services.ts anymore.
@nishcthulhu Hey Nishant, you can pick any file from the above list as you wish which is unassigned(doesn't have a username assigned to it). 
Working on this:  core/templates/pages/exploration-editor-page/services/state-tutorial-first-time.service.ts

Facing issues on migrating rootscope. Any idea whats the update on that?

@Showtim3 @DubeySandeep 
Hey @nishcthulhu , I'd suggest picking a service that doesn't involve $rootScope as of now. The Angular Migration team is trying to introduce a Events-Service to migrate the use of rootScope. 
+cc @srijanreddy98 @bansalnitish 
Hey, I'm having some trouble writing frontend test cases for my Pull request https://github.com/oppia/oppia/pull/9092/files

I found the problem is that my frontend tests don't recognize the empty brackets in `$http.post('/contributehandler/create_new', {})` 

The issue is very similar to the one in the reference PR and can be fixed with the suggestion by @Showtim3 
https://github.com/oppia/oppia/pull/8248#issuecomment-572721749

However although the change ` $http.post('/contributehandler/create_new', {})` to  ` $http.post('/contributehandler/create_new')` does fix the frontend tests errors, It creates a backend error where the payload sent to creator_dashboard.py is no longer empty json but just null. It also makes the e2e tests fail 

https://circleci.com/gh/oppia/oppia/45853?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link

So I was wondering if there was a way to create tests for `$http.post('/contributehandler/create_new', {})`  specifically 
@bansalnitish @nithusha21 @marianazangrossi Hey guys, do you have some idea how to tackle this issue ^^ ?

Btw @jimbyo I think you are creating a new service, right? Why don't you write that in Angular, maybe that'll help.
> So I was wondering if there was a way to create tests for $http.post('/contributehandler/create_new', {}) specifically

@jimbyo Instead of `{}` have you tried using `null`?
@Showtim3 I actually tried to use Angular in a previous commit https://github.com/oppia/oppia/pull/9092/commits/4e5dd63891bf7410f4ba5dbe16d8528551e9df92

The angular upgrade did, in fact, fix the frontend test issues, However, it has a similar problem of sending a null value to the backend, instead of an empty payload. 

I tried these two formats with the angular backend API and they would each just send null to the backend.

`this.http.post('/contributehandler/create_new', {}).toPromise()
  `
`this.http.post('/contributehandler/create_new', null).toPromise()`


and I could only get it to run by assigning a default value to the payload. 

```
        if not self.payload:
            title = feconf.DEFAULT_EXPLORATION_TITLE
        else:
            title = self.payload.get('title', feconf.DEFAULT_EXPLORATION_TITLE)
```


However that led to another series of E2E errors, so I reverted it and tried to just fix the frontend testing issues I was facing previously.  

Although I definitely would prefer to do this in angular, I couldn't find any reference on how to send null or empty parameters in angular. @srijanreddy98 Do you know how do this?

I also discovered that collection-creation-backend-api-service also only sends NULL payload to the backend as well, but the backend or E2E tests don't have an issue with it currently. 

@srijanreddy98 Technically we should be sending {} not null, right? These are semantically different and using null seems incorrect because all our POST payloads are of JSON dict form.

@jimbyo just to check, if you try sending with a non-empty dict, does it work? (If it does, then it is an issue with {} in particular and we should figure out how to do that correctly. But if not, then something else is probably going on...)
@srijanreddy98 Yea I tried this just now, and when I replaced the `{} ` with `null `and it fixes the frontend tests but creates the error sending the None value to the backend. 

@seanlip Just to clarify you mean on the angular version of the code? Because for my current version which is not angular, using {} works, it's just my frontend test cases don't recognize it. I'll look into the angular commit if so.

Edit 1*
Actually I recall trying to send a nonempty dict at one point and it was also empty. So I think it must be something else with my angular code. I did something like this I think
    `this.http.post('/contributehandler/create_new', {title: 'title'}).toPromise()`

> @srijanreddy98 Technically we should be sending {} not null, right? These are semantically different and using null seems incorrect because all our POST payloads are of JSON dict form.

That is true. It depends on our definition. Using `null` would mean that there is no payload and using `{}` would mean there is a payload but it is empty.

> I tried these two formats with the angular backend API and they would each just send null to the backend.
`this.http.post('/contributehandler/create_new', {}).toPromise()`
`this.http.post('/contributehandler/create_new', null).toPromise()`

@jimbyo  They don't. Or at least in my experience they haven't. From what I know there is a payload when you send `{}` and no payload when you send `null`.

I made a video that shows the same. The endpoint which I am trying to hit doesn't exist but since we are talking about sending the request, so I think the status of the request doesn't matter. The first case is when the body is `{}` and the second is when it is `null`. The video is of a dummy angular app I keep to test out some stuff.

Here is the link to the video https://drive.google.com/file/d/1neXavD0RlqqfB3mOINnk3z6pJyIkOHHU/view?usp=sharing

OK, thanks for confirming! My main piece of feedback here is that you should use {}, then, but it sounds like you might need to do some digging to figure out why it's not working in the frontend tests.
Hey @jimbyo,

I see in the `collection-creation-backend-api.service.ts` and `story-viewer-backend-api.service.ts` we are sending `{}` in the post request. Could you do a side by side analysis of why is it working for these two services and not for your service?

Also, as per this link: https://stackoverflow.com/questions/47441842/http-post-with-no-body-in-angular null may not solve the problem since we need to send the json somehow. 

Please let us know if you need any help. I would suggest doing a side by side as mentioned above.

Thanks!
Hi, can you remove me from core/templates/pages/community-dashboard-page/services/contribution-and-review.services.ts? I am no longer working on it.
@srijanreddy98 @bansalnitish Thanks for the information and recommendations so far!

I actually modeled my backend from the `collection-creation-backend-api.service.ts`. But a weird thing is that on my local machine, the `collection-creation-backend-api.service` also only sends None to the backend as well! 

The only reason it doesn't raise an error is because in `creator_dashboard.py`  the collection backend never tries to access the payload while the exploration backend does. 

I made a video showing this, where I make a few collections and try to send non-empty json to the backend. As you can see the logs keep showing up as None for me. Is there something wrong with the way I'm debugging? Or can you replicate this as well? 

Here is a link of the video 
https://drive.google.com/file/d/1apEvMWx072pTXiMscX3C_YNh2p0vhKfZ/view?usp=sharing

Edit* I'll take a look if story-viewer-backend-api sends a json payload. 
@robatras I updated it!
@bansalnitish @srijanreddy98 Could you please help @jimbyo?
@jimbyo could you please specify what help do you need from our end right now? I'll be happy to help you. (Apologies for the late response)
Hi @nishantwrp @bansalnitish @vojtechjelinek, can you assign me core/templates/pages/exploration-editor-page/services/user-email-preferences.service.ts? Thanks a lot!

Also, is there a link where I can find more on how to do the tests independent from setting up the whole server?
@tianqi-wu Done.
> Also, is there a link where I can find more on how to do the tests independent from setting up the whole server?

What test do you mean here?
> @tianqi-wu Done.
> 
> > Also, is there a link where I can find more on how to do the tests independent from setting up the whole server?
> 
> What test do you mean here?

Is there a test to check if I am writing the code correctly?
Hi, I would like to work on this! 

Resolving patch:
diff --git a/scripts/check_frontend_coverage.py b/scripts/check_frontend_coverage.py
--- a/scripts/check_frontend_coverage.py
+++ b/scripts/check_frontend_coverage.py
@@ -245,8 +245,8 @@
     'profile-link-image.component.ts',
     'profile-link-text.component.ts',
     'progress-nav.directive.ts',
+    'promo-bar-backend-api.service.ts',
     'promo-bar.directive.ts',
-    'promo-bar.service.ts',
     'python-program.tokenizer.ts',
     'question-difficulty-selector.directive.ts',
     'question-editor.directive.ts',


Test patch: