Repository: oppia/oppia

Issue:
Wrong Link for Get involved --> Partnerships on oppia.org
Bug: Wrong link for Partnerships: Partnerships link points to oppiafoundation.org. It should be pointing to oppiafoundation.org/partnerships

**To Reproduce**
Steps to reproduce the behavior:
 1. Go to 'https://www.oppia.org/'
 2. Click on 'Get Involved --> Partnerships'
 3. Observe that it points to https://www.oppiafoundation.org/


**Observed behavior**
A clear and concise description of what you have observed.

**Expected behavior**
It should point to https://www.oppiafoundation.org/partnerships

**Screenshots**
![image](https://user-images.githubusercontent.com/85778814/121786405-7ab10b00-cb74-11eb-87a1-bb9b76106aa3.png)


**Desktop (please complete the following information; delete this section if the issue does not arise on desktop):**
 - OS - Windows
 - Browser - Chrome
 - Browser-version: 91.0.4472.101 
New language button selector for the main page.
**Is your feature request related to a problem? Please describe.**
The language selector, currently located at the bottom of the page, is very difficult to find. People, like Brazilians, who need the page in another language are unlikely to be able to find it.

**Describe the solution you'd like**
I think it could be a good idea to move the selector to the top navigation bar.
In addition, it may be a good idea to have the default language that the site appears match the language of the navigator user, or maybe use the IP or geolocation through some api like  geoplugin.net . (If there is a large amount of people that don't install or set the navigator right, It could be better user the geolocation).

Here is a suggestion for the new language button:
<img width="979" alt="Captura de Tela 2021-05-21 às 09 31 10" src="https://user-images.githubusercontent.com/59513204/119140727-e5aa6e80-ba1a-11eb-97dc-92176736bc03.png">
obs: The icon in the button is the language material icon from google.

The new button should also shows in the pages:

Classroom
![classroom (1)](https://user-images.githubusercontent.com/59513204/119168061-e650fe00-ba36-11eb-9acc-c8996093ee34.png)

Libary
![libary](https://user-images.githubusercontent.com/59513204/119168096-ed780c00-ba36-11eb-9da2-c19917b215c9.png)

About
![About](https://user-images.githubusercontent.com/59513204/119168246-17313300-ba37-11eb-8ed1-ded75d1839fc.png)

Donate
![Donate (1)](https://user-images.githubusercontent.com/59513204/119168258-1c8e7d80-ba37-11eb-8438-7b0b8eeab27e.png)

Lessons detail
![lessons detail](https://user-images.githubusercontent.com/59513204/119168794-ad655900-ba37-11eb-8311-448b9b6538eb.png)

Leaner dashboard 
![learner dashboard](https://user-images.githubusercontent.com/59513204/119169667-adb22400-ba38-11eb-8083-8aaa2619f2b2.png)

Inside the lessons the navbar can stay as it it today.

Maybe for smaller screens we could put it on the sidebar or do something like this:
![mobile](https://user-images.githubusercontent.com/59513204/119170356-83ad3180-ba39-11eb-9910-09ee1e347cde.png)



**Describe alternatives you've considered**
If it's not possible to get the navigator language or location of the user, maybe we should choose a option with more highlight for the button, like the first or the second of the image below:
<img width="816" alt="Captura de Tela 2021-05-21 às 09 29 05" src="https://user-images.githubusercontent.com/59513204/119140861-04a90080-ba1b-11eb-9428-22bb01091b06.png">
 



Discussion:
Assigning @aks681, he will fix this together with #12857. 
Thanks, @intaschi! Adding @mschanteltc for feedback. 
Hi @oppia/core-maintainers, this issue is not assigned to any project. Can you please update the same? Thanks!
Thanks @intaschi. These look great so far. A few comments/questions:

- What happens when I tap on the language button? 
   - Does a dropdown or a dialog box appear?
- For mobile screens, is it possible we can add the language name next to the icon? If it is too long, what about using a language abbreviation? 
- I would prefer that the language selection is to the right of the navbar with the other options. In mobile, it would be to the right with the profile picture. I do like the third alternative solution you added because the formatting looks more cohesive. 
   - On the other hand, if we ever have a Lesson Name that has many characters, the selection would be pushed to the right. This would cause the language selection to be placed at different x-axis values, making it visually inconsistent. 
Thanks @mschanteltc! @intaschi, reassigning this to you for a reply.  
Thanks you for the feedback @mschanteltc! 

- When the button is tapped, can we use a dropdown similar to the others in the navigation bar(image below)? listing all the languages available and maybe use a vertical scroll to limit the height of the box to a maximum of 150px if there are a large number of options.

<img width="657" alt="Captura de Tela 2021-05-26 às 11 40 03" src="https://user-images.githubusercontent.com/59513204/119680070-3e14ae00-be17-11eb-8128-ca14878ee4e6.png">

- I do like the ideia of using language abbreviation, maybe we could do something like that?
![mobile (3)](https://user-images.githubusercontent.com/59513204/119682833-9482ec00-be19-11eb-98b0-a6c90cdadd98.png)



- I see no problem for us to use the third option. In fact looking back, I do agree that it looks more cohesive. The reason I've previously chosen the button on the the left, was to differ from the rest (give it more highlight). But I don't think people will have difficulty to find the button in the right, and anyway we could monitor that.
Thanks!
> Thanks you for the feedback @mschanteltc!
> 
> * When the button is tapped, can we use a dropdown similar to the others in the navigation bar(image below)? listing all the languages available and maybe use a vertical scroll to limit the height of the box to a maximum of 150px if there are a large number of options.
> 
I would be fine with that option as long as we keep the UI (especially background and font) the same. Would it be possible to? Also we need to make sure that the selected language is visually represented in the list. Maybe having a checkmark next to it, make the font bold, and/or change the background color of the selection would work. Can we do that?
> <img alt="Captura de Tela 2021-05-26 às 11 40 03" width="657" src="https://user-images.githubusercontent.com/59513204/119680070-3e14ae00-be17-11eb-8128-ca14878ee4e6.png">
> 
> * I do like the ideia of using language abbreviation, maybe we could do something like that?

LGTM!
>   ![mobile (3)](https://user-images.githubusercontent.com/59513204/119682833-9482ec00-be19-11eb-98b0-a6c90cdadd98.png)
> * I see no problem for us to use the third option. In fact looking back, I do agree that it looks more cohesive. The reason I've previously chosen the button on the the left, was to differ from the rest (give it more highlight). But I don't think people will have difficulty to find the button in the right, and anyway we could monitor that.

I agree, these look good to me as well. 


Thanks @mschanteltc! @intaschi, passing this back for you for a design of the dropdown, but I think once that's done we can try implementing it!  
Thanks @mschanteltc!

I agree that we should keep the same UI, and add a checkmark and a background color different for the selected item. If I follow the current dropdown UI, I think it would be something like this:

<img width="751" alt="Captura de Tela 2021-05-29 às 12 59 50" src="https://user-images.githubusercontent.com/59513204/120077004-9b5e6880-c07e-11eb-8277-f06a6671e97f.png">

What do you think?

Just a question ... I think this sort of checkmark is usually used to indicate multi-select (at least I think that's how it works with the category and language options in the library page). Is there a way to have this more clearly indicate that only one option can be selected?
Hi Sean,

Some options I could of is remove the checkmark and just let the background and bolding, or replace the checkmark for a ratio input like in this example below:
![ex](https://user-images.githubusercontent.com/59513204/120366011-83d4e900-c2e5-11eb-83b6-6c307a9d2e59.png)

What do you think? Have any other ideias?

Hi @intaschi -- let me pass this to @mschanteltc. She has better familiarity with our design patterns, and might have some ideas!
I actually like the checkmark with the colored background for the selected language. I don't think users would see it as a multiple selection, especially if they are familiar with selecting a different language. 

I would say space out the languages more so that it is easier for users to select their desired language, especially on mobile where users are more prone to mistapping. The [W3](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html) recommends a minimum tap size of 44px by 44px.
@mschanteltc Just to check, the library dropdowns for language/category are multi-select (see https://www.oppia.org/community-library, make sure the window is wide, and select some stuff from the top dropdowns). 

Is the idea for the same (or similar) style of dropdown to be used in both the single-select and multi-select cases? It's fine if so, I just wanted to make sure you've taken the existing multi-select dropdown explicitly into account when making this decision.
I was doing a little research, It seems that the dropdown with check is used frequently for selecting language (just one):

![Group 106](https://user-images.githubusercontent.com/59513204/120473528-7e2ae200-c37d-11eb-81a9-e65b07cc53bb.png)

So is possible that people are used to it and won’t be confused with this button. However, for selecting multiples options  the **checkbox** is normally used, that is the check inside a box. So if we are looking for patterns that people are used to, they might be confused using the library dropdown. I am not sure a suggestion for changing the library dropdown is too effort consuming to worth it or would run out of scope of this issue...


Aha! Got it -- this makes sense, thanks. Let's keep the checkmarks for this then, and change the existing multiselect dropdowns to checkboxes. I think we have enough to start implementation, thanks!

/cc @aks681 @kevintab95 would it be possible to place this on the LaCE team's priority list?
Just following up -- @aks681 plans to submit a PR for this during the weekend (by June 13). Thanks @aks681!


Resolving patch:
diff --git a/core/domain/exp_services.py b/core/domain/exp_services.py
--- a/core/domain/exp_services.py
+++ b/core/domain/exp_services.py
@@ -251,8 +251,8 @@ def get_story_id_linked_to_exploration(exp_id):
         str|None. The ID of the story if the exploration is linked to some
         story, otherwise None.
     """
-    exploration_context_model = exp_models.ExplorationContextModel.get_by_id(
-        exp_id)
+    exploration_context_model = exp_models.ExplorationContextModel.get(
+        exp_id, strict=False)
     if exploration_context_model is not None:
         return exploration_context_model.story_id
     return None


Test patch:
diff --git a/core/tests/protractor_desktop/userJourneys.js b/core/tests/protractor_desktop/userJourneys.js
--- a/core/tests/protractor_desktop/userJourneys.js
+++ b/core/tests/protractor_desktop/userJourneys.js
@@ -34,10 +34,11 @@ var waitFor = require('../protractor_utils/waitFor.js');
 var workflow = require('../protractor_utils/workflow.js');
 
 var _selectLanguage = async function(language) {
-  await action.select(
-    'Language Selector',
-    element(by.css('.protractor-test-i18n-language-selector')),
-    language);
+  var languageDropdown = element(by.css('.protractor-test-language-dropdown'));
+  var languageOption = element(
+    by.css('.protractor-test-i18n-language-' + language));
+  await action.click('Language Dropdown', languageDropdown);
+  await action.click('Language Option', languageOption);
   // Wait for the language-change request to reach the backend.
   await waitFor.pageToFullyLoad();
 };
@@ -180,7 +181,7 @@ describe('Site language', function() {
     // Starting language is English.
     await browser.get('/about');
     await waitFor.pageToFullyLoad();
-    await _selectLanguage('English');
+    await _selectLanguage('en');
     await libraryPage.get();
     await libraryPage.expectMainHeaderTextToBe(
       'Imagine what you could learn today...');
@@ -189,7 +190,7 @@ describe('Site language', function() {
   it('should change after selecting a different language', async function() {
     await browser.get('/about');
     await waitFor.pageToFullyLoad();
-    await _selectLanguage('Español');
+    await _selectLanguage('es');
 
     await libraryPage.get();
     await libraryPage.expectMainHeaderTextToBe(
@@ -228,7 +229,7 @@ describe('Site language', function() {
       await users.login('feanor@example.com');
       await browser.get('/about');
       await waitFor.pageToFullyLoad();
-      await _selectLanguage('Español');
+      await _selectLanguage('es');
       await libraryPage.get();
       await libraryPage.expectMainHeaderTextToBe(
         'Imagina lo que podrías aprender hoy...');
@@ -245,7 +246,7 @@ describe('Site language', function() {
     await users.login('langCreator@explorations.com');
     await browser.get('/about');
     await waitFor.pageToFullyLoad();
-    await _selectLanguage('Español');
+    await _selectLanguage('es');
     await general.openEditor(firstExplorationId, false);
 
     // Spanish is still selected.
@@ -260,7 +261,7 @@ describe('Site language', function() {
     async function() {
       await browser.get('/about');
       await waitFor.pageToFullyLoad();
-      await _selectLanguage('Español');
+      await _selectLanguage('es');
 
       // Checking collection player page.
       await browser.get('/collection/' + collectionId);
@@ -284,7 +285,7 @@ describe('Site language', function() {
     // Reset language back to English.
     await browser.get('/about');
     await waitFor.pageToFullyLoad();
-    await _selectLanguage('English');
+    await _selectLanguage('en');
     await general.checkForConsoleErrors([]);
   });
 });
diff --git a/core/tests/protractor_utils/ExplorationPlayerPage.js b/core/tests/protractor_utils/ExplorationPlayerPage.js
--- a/core/tests/protractor_utils/ExplorationPlayerPage.js
+++ b/core/tests/protractor_utils/ExplorationPlayerPage.js
@@ -133,7 +133,7 @@ var ExplorationPlayerPage = function() {
     await action.click('Radio Button', radioButton);
     let textArea = element(by.tagName('textarea'));
     await action.sendKeys('Text Area', textArea, 'Reporting this exploration');
-    let submitButton = element.all(by.tagName('button')).get(1);
+    let submitButton = element(by.css('.protractor-test-submit-report-button'));
     await action.click('Submit Button', submitButton);
     let afterSubmitText = await element(
       by.css('.protractor-test-exploration-flagged-success-message')).getText();
diff --git a/scripts/check_frontend_test_coverage.py b/scripts/check_frontend_test_coverage.py
--- a/scripts/check_frontend_test_coverage.py
+++ b/scripts/check_frontend_test_coverage.py
@@ -100,7 +100,6 @@
     'hint-editor.directive.ts',
     'html-editor.component.ts',
     'html-select.directive.ts',
-    'i18n-language-selector.component.ts',
     'input-response-pair.component.ts',
     'int-editor.component.ts',
     'item-selection-input-validation.service.ts',