From 70d3d05ffc0f72dcf71cae323339410e8dff77fa Mon Sep 17 00:00:00 2001 From: Srijan Reddy Date: Tue, 20 Dec 2022 07:01:42 +0530 Subject: [PATCH] Feature: Introduce angular cli and ahead of time compilation (#16073) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ng-cli * Successful build * Angular v14 angular.json * AOT working, old build not running * Add webpack module loader * Fix build after merge from develop * Fix prod build * Remove duplicate css and add css styleUrls * Remove repeated assets.ts code file and fix more css files * Fix ng build and add start commands * Add support for production * Fix logic * Add more fixes to wrong html files * Add a mock hashes file to satisfy angular compiler * New fixes for the template errors * Bug fixes * Fix new changes in develop * Fix new changes in develop * Review changes * Fix be tests * Fix mypy types * Fix errors * Lint and backend test fixes * Fix review comments and add tests * Merge from upstream/develop * Fix unit tests * Fix lint errors * Fix tests * Fix tests * Add a deafult lang direction when no lang dir is present in the url * Fix build errors in latest develop * Move document attribution lang setting logic outside the if case * Fix backend tests * Upgrade angular and ts version * yarn lock changes * Fix backend tests * Partially finished backend tests * Downgrade angular back to 11 and move refactored code to ignore list in ts checks * Fix develop * Add files to deny lists * Fix tests * Fix tests again * Fix lint * Fix lint errors * Fix backend tests * Fix errors in ng build prod * Review comments * Fix upstream/develop * Addressing review comments * Fix typings * Add dist to copied files in e2e tests * Fix template urls * Fix multiple browser module imports * Fix backend tests * Fix backend tests * Fix backemd tests * Fix comments * Address review comments * Fix lint and build issues * Address review comments * Add more comments and fix lint * Add comments for declare global * Re-word the comments * Fix lint issues * feconf.py changes for testing aot on backup server * Revert "feconf.py changes for testing aot on backup server" This reverts commit fbaa34dc182a5cf832ae9bce2b57e419efa309dc. * Fix review comments and infinite loop reload * fix hashes * Change import statement to be relative * Increase budgets * Optimize prev lang direction * Add hashes build step for typescript checks and run_frontend_tests and fix codewowners * Fix lint and add types * Fix lint checks * Fix unit tests and lint errors * 🫡 * 🫣 * 🫠 Co-authored-by: Vojtěch Jelínek Co-authored-by: Vojtěch Jelínek --- .github/CODEOWNERS | 9 +- .github/workflows/e2e_tests.yml | 2 +- .gitignore | 4 + ...plate-style-url-replacer.webpack-loader.js | 105 + angular.json | 133 + app_dev.yaml | 5 + core/controllers/base.py | 27 +- core/controllers/base_test.py | 6 +- core/controllers/oppia_root.py | 23 +- core/controllers/oppia_root_test.py | 86 + core/feconf.py | 4 + .../base-components/base-content.component.ts | 5 +- core/templates/base-components/base.module.ts | 2 + .../base-components/oppia-footer.component.ts | 4 +- core/templates/combined-tests.spec.ts | 4 +- .../hint-and-solution-buttons.component.ts | 3 +- .../social-buttons.component.ts | 2 +- .../checkpoint-celebration-modal.component.ts | 1 + .../ck-editor-copy-toolbar.component.ts | 2 +- .../ck-editor-copy-toolbar.module.ts | 41 + .../alert-message.component.ts | 1 - .../attribution-guide.component.ts | 2 +- .../confirm-or-cancel-modal.component.ts | 8 +- .../top-navigation-bar.component.css | 223 +- .../top-navigation-bar.component.html | 4 +- .../top-navigation-bar.component.ts | 2 +- .../image-uploader.component.html | 4 +- .../image-uploader.component.ts | 2 +- .../schema-based-editor.component.html | 10 +- .../schema-based-float-editor.component.html | 4 +- .../schema-based-int-editor.component.html | 2 +- .../schema-based-unicode-editor.component.ts | 5 +- .../oppia-angular-root.component.spec.ts | 17 +- .../oppia-angular-root.component.ts | 43 +- .../question-editor-save-modal.component.html | 8 +- .../question-editor-save-modal.component.ts | 5 +- ...question-misconception-editor.component.ts | 1 + .../skill-mastery.component.html | 2 +- .../merge-skill-modal.component.html | 1 - .../skill-selector.component.ts | 2 +- .../response-header.component.ts | 2 +- .../solution-editor.component.html | 3 +- .../solution-editor.component.ts | 2 +- .../state-content-editor.component.ts | 2 +- .../state-skill-editor.component.ts | 2 +- .../exploration-summary-tile.component.ts | 1 + .../learner-story-summary-tile.component.ts | 3 +- ...rner-topic-goals-summary-tile.component.ts | 2 +- .../learner-topic-summary-tile.component.ts | 3 +- .../story-summary-tile.component.ts | 3 +- .../summary-tile/summary-tile.module.ts | 44 + .../url-interpolation.service.spec.ts | 14 +- .../utilities/url-interpolation.service.ts | 3 +- core/templates/i18n/i18n.service.spec.ts | 164 +- core/templates/i18n/i18n.service.ts | 59 +- .../about-foundation-page.component.html | 4 +- .../pages/about-page/about-page.component.ts | 3 +- .../admin-blog-admin-common.module.ts | 43 + .../pages/admin-page/admin-page.module.ts | 5 +- .../misc-tab/admin-misc-tab.component.html | 1 - .../navbar/admin-navbar.component.html | 18 +- ...oles-and-actions-visualizer.component.html | 6 +- .../android-page/android-page.component.ts | 3 +- .../blog-admin-page/blog-admin-page.module.ts | 9 +- .../navbar/blog-admin-navbar.component.html | 12 +- .../blog-author-profile-page.module.ts | 9 +- .../blog-dashboard-page.module.ts | 31 +- .../shared-blog-components.module.ts | 80 + .../blog-home-page/blog-home-page.module.ts | 5 +- .../tag-filter/tag-filter.component.html | 3 +- .../blog-post-page/blog-post-page.module.ts | 9 +- .../create-new-classroom-modal.component.ts | 2 +- .../classroom-admin-navbar.component.html | 9 +- .../classroom-page.component.ts | 5 +- .../classroom-page/classroom-page.module.ts | 7 +- .../collection-editor-page.module.ts | 2 + ...tion-editor-pre-publish-modal.component.ts | 2 +- ...ollection-editor-save-modal.component.html | 2 +- .../collection-editor-save-modal.component.ts | 3 +- .../collection-footer.component.ts | 2 +- .../collection-player-page.component.ts | 3 +- core/templates/pages/common-imports.ts | 2 +- ...utor-dashboard-admin-navbar.component.html | 15 +- .../contributor-dashboard-page.module.ts | 9 +- .../translation-modal.component.ts | 2 +- ...ion-suggestion-review-modal.component.html | 2 +- .../opportunities-list-item.component.ts | 2 + .../creator-dashboard-page.component.html | 18 +- .../diagnostic-test-player-page.module.ts | 151 +- .../email-dashboard-result.component.html | 1 - .../error-pages/error-page.component.html | 8 +- .../editor-navbar-breadcrumb.component.ts | 3 +- .../exploration-editor-tab.component.ts | 4 +- .../state-graph-visualization.component.ts | 3 +- .../state-name-editor.component.ts | 2 +- ...customize-interaction-modal.component.html | 1 - .../customize-interaction-modal.component.ts | 2 +- .../exploration-editor-page.component.ts | 4 +- .../exploration-editor-page.module.ts | 10 +- .../exploration-objective-editor.component.ts | 2 +- .../exploration-title-editor.component.html | 2 +- .../exploration-title-editor.component.ts | 2 +- .../history-tab/history-tab.component.html | 5 - .../exploration-metadata-modal.component.ts | 3 +- .../exploration-save-modal.component.ts | 1 + .../welcome-modal.component.html | 2 +- .../param-changes-editor.component.ts | 2 +- .../services/exploration-objective.service.ts | 1 + .../services/exploration-property.service.ts | 6 +- .../services/exploration-title.service.ts | 2 +- .../settings-tab/settings-tab.component.ts | 8 +- .../statistics-tab.component.html | 2 +- .../audio-translation-bar.component.ts | 5 +- .../services/voiceover-recording.service.ts | 2 +- .../exploration-player-page.module.ts | 8 +- ...exploration-player-viewer-common.module.ts | 41 + .../exploration-footer.component.ts | 3 +- .../learner-view-info.component.ts | 3 +- .../progress-nav.component.ts | 1 + .../conversation-skin.component.ts | 5 +- .../end-chapter-check-mark.component.ts | 2 +- .../end-chapter-confetti.component.ts | 2 +- .../input-response-pair.component.ts | 3 +- .../ratings-and-recommendations.component.ts | 4 +- .../supplemental-card.component.ts | 3 +- .../tutor-card.component.html | 3 +- .../tutor-card.component.ts | 3 +- ...lesson-information-card-modal.component.ts | 3 +- .../progress-reminder-modal.component.ts | 3 +- .../facilitator-dashboard-page.component.ts | 1 + core/templates/pages/footer_js_libs.html | 3 + core/templates/pages/header_css_libs.html | 3 + core/templates/pages/header_js_libs.html | 3 + .../community-lessons-tab.component.ts | 7 +- .../goals-tab.component.ts | 7 +- .../home-tab.component.ts | 3 +- .../learner-dashboard-page.component.ts | 2 +- .../add-syllabus-items.component.html | 14 +- .../add-syllabus-items.component.ts | 4 +- .../create-learner-group-page.component.ts | 3 +- .../create-learner-group-page.module.ts | 17 +- .../invite-learners.component.html | 2 +- .../create-group/invite-learners.component.ts | 3 +- .../learner-group-details.component.ts | 3 +- .../edit-learner-group-page.component.ts | 3 +- .../edit-learner-group-page.module.ts | 25 +- ...oup-learner-specific-progress.component.ts | 3 +- ...arner-group-learners-progress.component.ts | 3 +- .../learner-group-overview.component.ts | 3 +- .../learner-group-preferences.component.ts | 3 +- .../learner-group-syllabus.component.ts | 3 +- .../shared-learner-group-component.module.ts | 55 + .../view-learner-group-page.module.ts | 8 +- .../library-page/library-page.component.ts | 3 +- .../search-bar/search-bar.component.html | 8 +- .../search-bar/search-bar.component.ts | 5 +- .../playbook.component.ts | 2 +- .../partnerships-page.component.html | 2 +- .../preferences-page.component.ts | 3 +- .../privacy-page/privacy-page.component.html | 16 +- .../profile-page-navbar.component.ts | 2 +- .../profile-page/profile-page.component.html | 1 - .../profile-page/profile-page.component.ts | 3 +- .../release-coordinator-navbar.component.html | 12 +- .../skill-description-editor.component.html | 2 +- .../delete-misconception-modal.component.ts | 2 +- .../navbar/skill-editor-navbar.component.html | 3 +- .../skill-editor-page.component.ts | 1 + .../skill-preview-tab.component.ts | 3 +- .../splash-page/splash-page.component.ts | 4 +- .../story-viewer-page-root.component.ts | 1 + .../story-viewer-page.component.ts | 3 +- .../subtopic-viewer-page.component.ts | 2 +- ...-skill-and-difficulty-modal.component.html | 5 +- ...ct-skill-and-difficulty-modal.component.ts | 6 + ...ies-select-difficulty-modal.component.html | 2 +- ...ities-select-difficulty-modal.component.ts | 6 + .../topic-editor-save-modal.component.html | 2 +- .../topic-editor-save-modal.component.ts | 1 + .../topic-editor-page.module.ts | 11 +- .../practice-tab/practice-tab.component.ts | 2 +- .../topic-viewer-stories-list.component.ts | 2 +- .../subtopics-list.component.ts | 2 +- .../topic-viewer-page.component.ts | 2 +- .../topic-viewer-page.module.ts | 10 +- .../topic-viewer-player-common.module.ts | 49 + .../skills-list/skills-list.component.html | 2 +- .../volunteer-page.component.html | 4 +- .../volunteer-page.component.ts | 31 +- core/templates/services/UpgradedServices.ts | 2 +- .../i18n-language-code.service.spec.ts | 2 + .../services/i18n-language-code.service.ts | 2 + .../tests/unit-test-utils.ajs.spec.ts | 46 - core/templates/tests/unit-test-utils.ajs.ts | 121 - .../third-party-imports/gif-frames.import.ts | 2 +- .../third-party-imports/guppy.import.ts | 3 +- core/templates/utility/hashes.ts | 33 + core/tests/karma.conf.ts | 5 +- core/tests/test_utils.py | 10 +- ...gebraic-expression-input.component.spec.ts | 11 +- .../oppia-interactive-code-repl.component.ts | 2 +- .../oppia-response-code-repl.component.ts | 5 +- ...short-response-code-repl.component.spec.ts | 2 +- ...ppia-short-response-code-repl.component.ts | 7 +- .../directives/graph-viz.component.html | 2 +- .../oppia-response-graph-input.component.ts | 2 +- ...ppia-response-interactive-map.component.ts | 5 +- ...tive-math-equation-input.component.spec.ts | 11 +- ...numeric-expression-input.component.spec.ts | 11 +- ...-code-reset-confirmation.component.spec.ts | 2 +- ...encil-code-reset-confirmation.component.ts | 4 +- ...ebraic-expression-editor.component.spec.ts | 11 +- .../allowed-variables-editor.component.ts | 6 +- .../templates/image-editor.component.ts | 26 +- .../math-equation-editor.component.spec.ts | 11 +- ...ath-expression-content-editor.component.ts | 6 +- ...umeric-expression-editor.component.spec.ts | 11 +- .../position-of-terms-editor.component.ts | 2 +- .../skill-selector-editor.component.ts | 3 +- .../subtitled-unicode-editor.component.html | 2 +- ...ia-visualization-sorted-tiles.component.ts | 1 + package.json | 13 +- proxy.conf.json | 6 + scripts/build.py | 15 + scripts/check_frontend_test_coverage.py | 4 + scripts/common.py | 23 +- scripts/common_test.py | 104 + scripts/linters/js_ts_linter.py | 2 +- scripts/run_e2e_tests.py | 1 + scripts/run_frontend_tests.py | 4 +- scripts/run_lighthouse_tests.py | 1 + scripts/run_lighthouse_tests_test.py | 16 +- scripts/servers.py | 69 +- scripts/servers_test.py | 57 +- scripts/start.py | 4 + scripts/start_test.py | 41 +- scripts/typescript_checks.py | 82 +- src/environments/environment.prod.ts | 21 + src/environments/environment.ts | 35 + src/index.html | 37 + src/index.prod.html | 37 + src/main.ts | 35 + tsconfig-lint.json | 125 + tsconfig.json | 16 +- typings/custom-window-defs.d.ts | 2 + webpack.common.config.ts | 9 +- webpack.common.macros.ts | 2 +- webpack.dev.config.ts | 2 +- webpack.dev.sourcemap.config.ts | 2 +- webpack.prod.config.ts | 10 +- webpack.prod.sourcemap.config.ts | 2 +- yarn.lock | 7126 ++++++++++++----- 252 files changed, 7283 insertions(+), 3155 deletions(-) create mode 100644 angular-template-style-url-replacer.webpack-loader.js create mode 100644 angular.json create mode 100644 core/templates/components/ck-editor-helpers/ck-editor-copy-toolbar/ck-editor-copy-toolbar.module.ts create mode 100644 core/templates/components/summary-tile/summary-tile.module.ts create mode 100644 core/templates/pages/admin-page/admin-blog-admin-common.module.ts create mode 100644 core/templates/pages/blog-dashboard-page/shared-blog-components.module.ts create mode 100644 core/templates/pages/exploration-player-page/exploration-player-viewer-common.module.ts create mode 100644 core/templates/pages/learner-group-pages/shared-learner-group-component.module.ts create mode 100644 core/templates/pages/topic-viewer-page/topic-viewer-player-common.module.ts delete mode 100644 core/templates/tests/unit-test-utils.ajs.spec.ts create mode 100644 core/templates/utility/hashes.ts create mode 100644 proxy.conf.json create mode 100644 src/environments/environment.prod.ts create mode 100644 src/environments/environment.ts create mode 100644 src/index.html create mode 100644 src/index.prod.html create mode 100644 src/main.ts create mode 100644 tsconfig-lint.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 4182b822deeb..4479935607b9 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -68,12 +68,16 @@ /core/templates/services/request-interceptor.service*.ts @oppia/angular-migration-reviewers /core/templates/services/UpgradedServices.ts @oppia/angular-migration-reviewers /core/templates/hybrid-router-module-provider*.ts @oppia/angular-migration-reviewers +/core/templates/utility/hashes.ts @oppia/angular-migration-reviewers /core/templates/utility/string-utility*.ts @oppia/angular-migration-reviewers +/proxy.conf.json @oppia/angular-migration-reviewers +/angular-template-style-url-replacer.webpack-loader.js @oppia/angular-migration-reviewers +/angular.json @oppia/angular-migration-reviewers +/src @oppia/frontend-infrastructure-reviewers # TS typing /typings/ @oppia/data-and-stability-reviewers -/tsconfig.json @oppia/data-and-stability-reviewers -/tsconfig-strict.json @oppia/data-and-stability-reviewers +/tsconfig*.json @oppia/data-and-stability-reviewers /scripts/typescript_checks*.py @oppia/data-and-stability-reviewers @@ -573,6 +577,7 @@ /core/templates/components/ck-editor-helpers/ck-editor-copy-content.service*.ts @oppia/interaction-and-rte-reviewers /core/templates/components/ck-editor-helpers/ck-editor-copy-toolbar/ck-editor-copy-toolbar.component.html @oppia/interaction-and-rte-reviewers /core/templates/components/ck-editor-helpers/ck-editor-copy-toolbar/ck-editor-copy-toolbar.component*.ts @oppia/interaction-and-rte-reviewers +/core/templates/components/ck-editor-helpers/ck-editor-copy-toolbar/ck-editor-copy-toolbar.module.ts @oppia/interaction-and-rte-reviewers /core/templates/services/autoplayed-videos.service*.ts @oppia/interaction-and-rte-reviewers /core/templates/services/external-save.service*.ts @oppia/angular-migration-reviewers /core/templates/services/external-rte-save.service*.ts @oppia/angular-migration-reviewers diff --git a/.github/workflows/e2e_tests.yml b/.github/workflows/e2e_tests.yml index 56685545f7dc..7f1d05f9bc73 100644 --- a/.github/workflows/e2e_tests.yml +++ b/.github/workflows/e2e_tests.yml @@ -59,7 +59,7 @@ jobs: # We avoid using ../ or absolute paths because unzip treats these as # security issues and will refuse to follow them. run: | - zip -rqy build_files.zip oppia/third_party oppia_tools oppia/build oppia/webpack_bundles oppia/proto_files oppia/app.yaml oppia/assets/hashes.json oppia/proto_files oppia/extensions/classifiers/proto/* oppia/backend_prod_files + zip -rqy build_files.zip oppia/third_party oppia_tools oppia/build oppia/webpack_bundles oppia/proto_files oppia/app.yaml oppia/assets/hashes.json oppia/proto_files oppia/extensions/classifiers/proto/* oppia/backend_prod_files oppia/dist working-directory: /home/runner/work/oppia - name: Upload build files artifact uses: actions/upload-artifact@v3 diff --git a/.gitignore b/.gitignore index b48eaba4f15b..9e67b269c21d 100644 --- a/.gitignore +++ b/.gitignore @@ -22,6 +22,10 @@ core/templates/prod/* webpack_bundles/* core/tests/.browserstack.env node_modules/* +# .angular is temp folder used by angular to put logs and other artefacts. +.angular/* +# dist is our angular build folder output. +dist/* .coverage* !.coveragerc coverage.xml diff --git a/angular-template-style-url-replacer.webpack-loader.js b/angular-template-style-url-replacer.webpack-loader.js new file mode 100644 index 000000000000..23ba52203417 --- /dev/null +++ b/angular-template-style-url-replacer.webpack-loader.js @@ -0,0 +1,105 @@ +// Copyright 2021 The Oppia Authors. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS-IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +/** + * @fileoverview This is a webpack loader that replaces templateUrl: './html' + * with template: require('./html'). This is needed for our webpack based + * compilation and not the angular compiler. Angular compiler parses the html + * and converts it to js instructions. For the style urls, the angular compiler + * uses styleUrls while webpack uses imports. Hence, currently we put the + * stylesheet as import and as a styleUrl in the component. Once we have moved + * away from separate rtl css files, we will remove the import statements and + * just keep styleUrls. Until then, for webpack, we need remove styleUrls for + * webpack compilation. + */ + +/** + * The regexes are trying to find the templateUrl from the component decorator + * Eg: + * @Component({ + * selector: 'oppia-base-content', + * templateUrl: './base-content.component.html', + * styleUrls: ['./base-content.component.css'] + * }) + * + * From the above we need to get './base-content.component.html' and + * ['./base-content.component.css']. + * + * After modifications, it will look like: + * @Component({ + * selector: 'oppia-base-content', + * template: require('./base-content.component.html'), + * styleUrls: [] + * }) + * Templates can be found using the regex: + * templateUrl[any number of spaces]:[any number of spaces] + * [any of '"` that starts a string in javascript] + * [match all characters between the quotes][End quotes '"`] + * [any number of spaces] + * [ + * ends with a comma or a closing curly bracket depending or wether there are + * more items in the decorator or not + * ] + */ +const TEMPLATE_URL_REGEX = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*([,}]))/gm; +const STYLES_URL_REGEX = /styleUrls *:(\s*\[[^\]]*?\])/g; +const VALUE_REGEX = /(['`"])((?:[^\\]\\\1|.)*?)\1/g; + +/** + * This function is only used for templateUrl modifications. From a string this + * function extracts the first value inside quotes ('"`). + * Example: For a string like: "templateUrl: './base-content.component.html'," + * The VALUE_REGEX will match "'./base-content.component.html'" and the first + * group is the quote ("'") and the second group is + * ""./base-content.component.html" + * @param {string} str + * @returns Relative url + */ +const replaceStringsWithRequiresStatement = (str) => { + return str.replace(VALUE_REGEX, function(_, __, url) { + return "require('" + url + "')"; + }); +}; + +// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types +const loader = (sourceString) => { + // https://webpack.js.org/api/loaders/#thiscacheable + // Cacheable is an interface provided by webpack and is used to speed up + // the build by caching results. + this.cacheable && this.cacheable(); + /** + * The templateURL regex will match something like: + * "templateUrl: './base-content.component.html'," + */ + const newSourceString = sourceString.replace( + TEMPLATE_URL_REGEX, (_, url) => { + return 'template:' + replaceStringsWithRequiresStatement(url); + } + ).replace(STYLES_URL_REGEX, () => { + /** + * For the style urls, the angular compiler + * uses styleUrls while webpack uses imports. Hence, currently we put the + * stylesheet as import and as a styleUrl in the component. Once we have + * moved away from separate rtl css files, we will remove the import + * statements and just keep styleUrls. Until then, for webpack, we need + * remove styleUrls property for webpack compilation. + */ + return 'styleUrl: []'; + }); + + return newSourceString; +}; + + +module.exports = loader; diff --git a/angular.json b/angular.json new file mode 100644 index 000000000000..f35e89db6fd4 --- /dev/null +++ b/angular.json @@ -0,0 +1,133 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "oppia-angular": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "style": "scss" + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "allowedCommonJsDependencies": ["path", "stream", "zlib"], + "outputPath": "dist/oppia-angular", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "core/templates/Polyfills.ts", + "tsConfig": "tsconfig.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "core/templates/css/oppia.css", + "core/templates/css/oppia-material.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "index": { + "input": "src/index.prod.html", + "output": "index.html" + }, + "baseHref": "/dist/oppia-angular-prod/", + "outputPath": "dist/oppia-angular-prod", + "aot": true, + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "namedChunks": false, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "2mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb", + "maximumError": "28kb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "oppia-angular:build" + }, + "configurations": { + "production": { + "browserTarget": "oppia-angular:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "oppia-angular:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "core/templates/Polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "assets": [ + "src/favicon.ico", + "assets" + ], + "styles": [ + ], + "scripts": [] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "tsconfig.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + }, + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "oppia-angular:serve" + }, + "configurations": { + "production": { + "devServerTarget": "oppia-angular:serve:production" + } + } + } + } + } + }, + "defaultProject": "oppia-angular" +} diff --git a/app_dev.yaml b/app_dev.yaml index 4db8887d5302..6acabd1322b8 100644 --- a/app_dev.yaml +++ b/app_dev.yaml @@ -47,6 +47,11 @@ handlers: static_dir: webpack_bundles secure: always expiration: "0" +# /dist is the build output folder for angular. +- url: /dist + static_dir: dist/ + secure: always + expiration: "0" - url: /assets static_dir: assets secure: always diff --git a/core/controllers/base.py b/core/controllers/base.py index 186a55fde199..3ccbe4e1794b 100755 --- a/core/controllers/base.py +++ b/core/controllers/base.py @@ -79,16 +79,26 @@ class ResponseValueDict(TypedDict): @functools.lru_cache(maxsize=128) -def load_template(filename: str) -> str: +def load_template( + filename: str, *, template_is_aot_compiled: bool +) -> str: """Return the HTML file contents at filepath. Args: filename: str. Name of the requested HTML file. + template_is_aot_compiled: bool. Used to determine which bundle to use. Returns: str. The HTML file content. """ - filepath = os.path.join(feconf.FRONTEND_TEMPLATES_DIR, filename) + filepath = os.path.join( + ( + feconf.FRONTEND_AOT_DIR + if template_is_aot_compiled + else feconf.FRONTEND_TEMPLATES_DIR + ), + filename + ) with utils.open_file(filepath, 'r') as f: html_text = f.read() return html_text @@ -647,7 +657,11 @@ def render_downloadable_file( super(webapp2.Response, self.response).write(file.getvalue()) # type: ignore[misc] # pylint: disable=bad-super-call def render_template( - self, filepath: str, iframe_restriction: Optional[str] = 'DENY' + self, + filepath: str, + iframe_restriction: Optional[str] = 'DENY', + *, + template_is_aot_compiled: bool = False ) -> None: """Prepares an HTML response to be sent to the client. @@ -659,6 +673,8 @@ def render_template( DENY: Strictly prevents the template to load in an iframe. SAMEORIGIN: The template can only be displayed in a frame on the same origin as the page itself. + template_is_aot_compiled: bool. False by default. Use + True when the template is compiled by angular AoT compiler. Raises: Exception. Invalid X-Frame-Options. @@ -683,8 +699,9 @@ def render_template( self.response.expires = 'Mon, 01 Jan 1990 00:00:00 GMT' self.response.pragma = 'no-cache' - - self.response.write(load_template(filepath)) + self.response.write(load_template( + filepath, template_is_aot_compiled=template_is_aot_compiled + )) def _render_exception_json_or_html( self, return_type: str, values: ResponseValueDict diff --git a/core/controllers/base_test.py b/core/controllers/base_test.py index 9c4c1a46b93b..cac453e6e1da 100644 --- a/core/controllers/base_test.py +++ b/core/controllers/base_test.py @@ -73,7 +73,11 @@ def test_load_template(self) -> None: with self.swap(feconf, 'FRONTEND_TEMPLATES_DIR', oppia_root_path): self.assertIn( '"Loading | Oppia"', - base.load_template('oppia-root.mainpage.html')) + base.load_template( + 'oppia-root.mainpage.html', + template_is_aot_compiled=False + ) + ) class UniqueTemplateNamesTests(test_utils.GenericTestBase): diff --git a/core/controllers/oppia_root.py b/core/controllers/oppia_root.py index b5d2dcba23c1..ff6b3572ea50 100644 --- a/core/controllers/oppia_root.py +++ b/core/controllers/oppia_root.py @@ -53,4 +53,25 @@ class OppiaLightweightRootPage( @acl_decorators.open_access def get(self, **kwargs: Dict[str, str]) -> None: """Handles GET requests.""" - self.render_template('lightweight-oppia-root.mainpage.html') + # The following logic determines which bundle to return. Currently the + # AoT bundle doesn't support rtl languages yet. So we switch between + # AoT and webpack bundle based on language direction. + # The order of preference to determine the language direction is: + # 1. Cookies + # 2. Url params + # In the case we don't find a language direction from the above two, + # we default to AoT bundle. + # TODO(#16300): Refactor the RTL css generation to add RTL CSS to the + # original CSS files instead of creating a new rtl CSS file + # NOTE: After the aforementioned issue is solved, the AoT bundle will be + # the only bundle that is returned. + if self.request.cookies.get('dir') == 'rtl': + self.render_template('lightweight-oppia-root.mainpage.html') + return + if self.request.cookies.get('dir') == 'ltr': + self.render_template('index.html', template_is_aot_compiled=True) + return + if self.request.get('dir') == 'rtl': + self.render_template('lightweight-oppia-root.mainpage.html') + return + self.render_template('index.html', template_is_aot_compiled=True) diff --git a/core/controllers/oppia_root_test.py b/core/controllers/oppia_root_test.py index 102a61501e8a..9b46c20d1bd7 100644 --- a/core/controllers/oppia_root_test.py +++ b/core/controllers/oppia_root_test.py @@ -33,3 +33,89 @@ def test_oppia_root_page(self) -> None: '') else: response.mustcontain('') + + +class OppiaLightweightRootPageTests(test_utils.GenericTestBase): + + def test_oppia_lightweight_root_page(self) -> None: + response = self.get_html_response('/', expected_status_int=200) + response.mustcontain( + '', + 'Loading | Oppia' + ) + + def test_oppia_lightweight_root_page_with_rtl_lang_param(self) -> None: + response = self.get_html_response('/?dir=rtl', expected_status_int=200) + response.mustcontain( + '', + no='Loading | Oppia' + ) + + def test_oppia_lightweight_root_page_with_ltr_lang_param(self) -> None: + response = self.get_html_response('/?dir=ltr', expected_status_int=200) + response.mustcontain( + '', + 'Loading | Oppia' + ) + + def test_oppia_lightweight_root_page_with_rtl_dir_cookie(self) -> None: + self.testapp.set_cookie('dir', 'rtl') + response = self.get_html_response('/', expected_status_int=200) + response.mustcontain( + '', + no='Loading | Oppia' + ) + + def test_oppia_lightweight_root_page_with_ltr_dir_cookie(self) -> None: + self.testapp.set_cookie('dir', 'ltr') + response = self.get_html_response('/', expected_status_int=200) + response.mustcontain( + '', + 'Loading | Oppia' + ) + + def test_return_bundle_modifier_precedence(self) -> None: + # In case of conflicting cookie and url param values for dir, cookie + # is preferred. + self.testapp.set_cookie('dir', 'ltr') + response = self.get_html_response('/?dir=rtl', expected_status_int=200) + response.mustcontain( + '', + 'Loading | Oppia' + ) + + self.testapp.set_cookie('dir', 'rtl') + response = self.get_html_response('/?dir=ltr', expected_status_int=200) + response.mustcontain( + '', + no='Loading | Oppia' + ) + + def test_invalid_bundle_modifier_values(self) -> None: + # In case of invalid values in cookie but valid query param respect the + # param value for dir. + self.testapp.set_cookie('dir', 'new_hacker_in_the_block') + response = self.get_html_response('/?dir=rtl', expected_status_int=200) + response.mustcontain( + '', + no='Loading | Oppia' + ) + + self.testapp.set_cookie('dir', 'new_hacker_in_the_block') + response = self.get_html_response('/?dir=ltr', expected_status_int=200) + response.mustcontain( + '', + 'Loading | Oppia' + ) + # The bundle modifier precedence guarantees that a valid cookie dir + # value will return the correct bundle. + + # When both modifiers are invalid, default to AoT bundle. + self.testapp.set_cookie('dir', 'new_hacker_in_the_block') + response = self.get_html_response( + '/?dir=is_trying_out', expected_status_int=200 + ) + response.mustcontain( + '', + 'Loading | Oppia' + ) diff --git a/core/feconf.py b/core/feconf.py index b47483b4b94c..ec36d072494b 100644 --- a/core/feconf.py +++ b/core/feconf.py @@ -112,6 +112,10 @@ def check_dev_mode_is_true() -> None: FRONTEND_TEMPLATES_DIR = ( os.path.join('webpack_bundles') if constants.DEV_MODE else os.path.join('build', 'webpack_bundles')) +# To know more about AOT visit https://angular.io/guide/glossary#aot +FRONTEND_AOT_DIR = ( + os.path.join('dist', 'oppia-angular') if constants.DEV_MODE else + os.path.join('dist', 'oppia-angular-prod')) DEPENDENCIES_TEMPLATES_DIR = ( os.path.join(EXTENSIONS_DIR_PREFIX, 'extensions', 'dependencies')) diff --git a/core/templates/base-components/base-content.component.ts b/core/templates/base-components/base-content.component.ts index afd1ddca9b37..be81871eccef 100644 --- a/core/templates/base-components/base-content.component.ts +++ b/core/templates/base-components/base-content.component.ts @@ -31,13 +31,12 @@ import { SidebarStatusService } from 'services/sidebar-status.service'; import { BackgroundMaskService } from 'services/stateful/background-mask.service'; import { I18nLanguageCodeService } from 'services/i18n-language-code.service'; import { NavigationEnd, Router } from '@angular/router'; - import './base-content.component.css'; - @Component({ selector: 'oppia-base-content', - templateUrl: './base-content.component.html' + templateUrl: './base-content.component.html', + styleUrls: ['./base-content.component.css'] }) export class BaseContentComponent { loadingMessage: string = ''; diff --git a/core/templates/base-components/base.module.ts b/core/templates/base-components/base.module.ts index d131e91e227a..95bd8cfb5024 100644 --- a/core/templates/base-components/base.module.ts +++ b/core/templates/base-components/base.module.ts @@ -48,6 +48,7 @@ import { // Miscellaneous. import { SmartRouterModule } from 'hybrid-router-module-provider'; import { OppiaAngularRootComponent } from 'components/oppia-angular-root.component'; +import { NgBootstrapModule } from 'modules/ng-boostrap.module'; @NgModule({ imports: [ @@ -55,6 +56,7 @@ import { OppiaAngularRootComponent } from 'components/oppia-angular-root.compone CookieModule.forChild(), DirectivesModule, I18nModule, + NgBootstrapModule, // TODO(#13443): Remove smart router module provider once all pages are // migrated to angular router. SmartRouterModule, diff --git a/core/templates/base-components/oppia-footer.component.ts b/core/templates/base-components/oppia-footer.component.ts index c453ba8ba1fa..64bc64e1a9a8 100644 --- a/core/templates/base-components/oppia-footer.component.ts +++ b/core/templates/base-components/oppia-footer.component.ts @@ -21,13 +21,13 @@ import { downgradeComponent } from '@angular/upgrade/static'; import { PlatformFeatureService } from 'services/platform-feature.service'; import { AppConstants } from 'app.constants'; - import './oppia-footer.component.css'; @Component({ selector: 'oppia-footer', - templateUrl: './oppia-footer.component.html' + templateUrl: './oppia-footer.component.html', + styleUrls: ['./oppia-footer.component.css'] }) export class OppiaFooterComponent { siteFeedbackFormUrl: string = AppConstants.SITE_FEEDBACK_FORM_URL; diff --git a/core/templates/combined-tests.spec.ts b/core/templates/combined-tests.spec.ts index d9bf586c2ddc..b7524998023a 100644 --- a/core/templates/combined-tests.spec.ts +++ b/core/templates/combined-tests.spec.ts @@ -43,8 +43,8 @@ import { // https://webpack.js.org/guides/dependency-management/#context-module-api // as a reference. interface RequireContext { - context( - directory: string, useSubdirectories: boolean, regExp: RegExp): Context; + context: ( + directory: string, useSubdirectories: boolean, regExp: RegExp) => Context; } interface Context { diff --git a/core/templates/components/button-directives/hint-and-solution-buttons.component.ts b/core/templates/components/button-directives/hint-and-solution-buttons.component.ts index 49447ddd6b2a..f2a0a10a5d8a 100644 --- a/core/templates/components/button-directives/hint-and-solution-buttons.component.ts +++ b/core/templates/components/button-directives/hint-and-solution-buttons.component.ts @@ -34,7 +34,8 @@ import './hint-and-solution-buttons.component.css'; @Component({ selector: 'oppia-hint-and-solution-buttons', - templateUrl: './hint-and-solution-buttons.component.html' + templateUrl: './hint-and-solution-buttons.component.html', + styleUrls: ['./hint-and-solution-buttons.component.css'] }) export class HintAndSolutionButtonsComponent implements OnInit, OnDestroy { directiveSubscriptions = new Subscription(); diff --git a/core/templates/components/button-directives/social-buttons.component.ts b/core/templates/components/button-directives/social-buttons.component.ts index 2a16d468246e..ed73584b452f 100644 --- a/core/templates/components/button-directives/social-buttons.component.ts +++ b/core/templates/components/button-directives/social-buttons.component.ts @@ -26,7 +26,7 @@ import './social-buttons.component.css'; @Component({ selector: 'oppia-social-buttons', templateUrl: './social-buttons.component.html', - styleUrls: [] + styleUrls: ['./social-buttons.component.css'] }) export class SocialButtonsComponent { androidAppButtonIsShown = ( diff --git a/core/templates/components/checkpoint-celebration-modal/checkpoint-celebration-modal.component.ts b/core/templates/components/checkpoint-celebration-modal/checkpoint-celebration-modal.component.ts index 699350bed95a..9514c7a83cb0 100644 --- a/core/templates/components/checkpoint-celebration-modal/checkpoint-celebration-modal.component.ts +++ b/core/templates/components/checkpoint-celebration-modal/checkpoint-celebration-modal.component.ts @@ -44,6 +44,7 @@ const SCREEN_WIDTH_FOR_STANDARD_SIZED_MESSAGE_MODAL_CUTOFF_PX = 1370; @Component({ selector: 'oppia-checkpoint-celebration-modal', templateUrl: './checkpoint-celebration-modal.component.html', + styleUrls: ['./checkpoint-celebration-modal.component.css'] }) export class CheckpointCelebrationModalComponent implements OnInit, OnDestroy { @ViewChild('checkpointCelebrationModalTimer') checkpointTimerTemplateRef!: diff --git a/core/templates/components/ck-editor-helpers/ck-editor-copy-toolbar/ck-editor-copy-toolbar.component.ts b/core/templates/components/ck-editor-helpers/ck-editor-copy-toolbar/ck-editor-copy-toolbar.component.ts index ce1d6afeff7e..f75071e777eb 100644 --- a/core/templates/components/ck-editor-helpers/ck-editor-copy-toolbar/ck-editor-copy-toolbar.component.ts +++ b/core/templates/components/ck-editor-helpers/ck-editor-copy-toolbar/ck-editor-copy-toolbar.component.ts @@ -30,7 +30,7 @@ import { CkEditorCopyContentService } from }) export class CkEditorCopyToolbarComponent { constructor( - private ckEditorCopyContentService: CkEditorCopyContentService, + public ckEditorCopyContentService: CkEditorCopyContentService, @Inject(DOCUMENT) private document: Document ) { ckEditorCopyContentService.copyModeActive = false; diff --git a/core/templates/components/ck-editor-helpers/ck-editor-copy-toolbar/ck-editor-copy-toolbar.module.ts b/core/templates/components/ck-editor-helpers/ck-editor-copy-toolbar/ck-editor-copy-toolbar.module.ts new file mode 100644 index 000000000000..0cac61265997 --- /dev/null +++ b/core/templates/components/ck-editor-helpers/ck-editor-copy-toolbar/ck-editor-copy-toolbar.module.ts @@ -0,0 +1,41 @@ +// Copyright 2021 The Oppia Authors. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS-IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +/** + * @fileoverview Module for the CkEditor4 components. + */ + +import 'core-js/es7/reflect'; +import 'zone.js'; + +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { CkEditorCopyToolbarComponent } from './ck-editor-copy-toolbar.component'; + +@NgModule({ + imports: [ + CommonModule, + ], + declarations: [ + CkEditorCopyToolbarComponent + ], + entryComponents: [ + CkEditorCopyToolbarComponent + ], + exports: [ + CkEditorCopyToolbarComponent + ], +}) + +export class OppiaCkEditorCopyToolBarModule { } diff --git a/core/templates/components/common-layout-directives/common-elements/alert-message.component.ts b/core/templates/components/common-layout-directives/common-elements/alert-message.component.ts index 8eb9da984ce2..372cdef1162a 100644 --- a/core/templates/components/common-layout-directives/common-elements/alert-message.component.ts +++ b/core/templates/components/common-layout-directives/common-elements/alert-message.component.ts @@ -20,7 +20,6 @@ import { Component, Input } from '@angular/core'; import { downgradeComponent } from '@angular/upgrade/static'; import { ToastrService } from 'ngx-toastr'; import { AlertsService } from 'services/alerts.service'; -require('ngx-toastr/toastr.css'); export interface MessageObject { type: string; diff --git a/core/templates/components/common-layout-directives/common-elements/attribution-guide.component.ts b/core/templates/components/common-layout-directives/common-elements/attribution-guide.component.ts index a6154504bf4c..34dff15cf189 100644 --- a/core/templates/components/common-layout-directives/common-elements/attribution-guide.component.ts +++ b/core/templates/components/common-layout-directives/common-elements/attribution-guide.component.ts @@ -33,7 +33,7 @@ import './attribution-guide.component.css'; @Component({ selector: 'attribution-guide', templateUrl: './attribution-guide.component.html', - styleUrls: [] + styleUrls: ['./attribution-guide.component.css'] }) export class AttributionGuideComponent implements OnInit { deviceUsedIsMobile: boolean = false; diff --git a/core/templates/components/common-layout-directives/common-elements/confirm-or-cancel-modal.component.ts b/core/templates/components/common-layout-directives/common-elements/confirm-or-cancel-modal.component.ts index f6e4a39d0313..4d1a47a54d36 100644 --- a/core/templates/components/common-layout-directives/common-elements/confirm-or-cancel-modal.component.ts +++ b/core/templates/components/common-layout-directives/common-elements/confirm-or-cancel-modal.component.ts @@ -22,7 +22,13 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; export class ConfirmOrCancelModal { constructor(protected modalInstance: NgbActiveModal) {} - confirm(value: T): void { + /** + * Function called upon an affirmative user action. + * @param value: Value with which the user confirms the action. + * Some actions don't require a value when confirming hence this arg is + * optional. + */ + confirm(value?: T): void { this.modalInstance.close(value); } diff --git a/core/templates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.css b/core/templates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.css index 41238a8dc87d..40d7954a5ad1 100644 --- a/core/templates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.css +++ b/core/templates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.css @@ -3,61 +3,61 @@ compilation, here are sme additional rules that can be added to the CSS files: https://rtlcss.com/learn/usage-guide/control-directives . */ -oppia-top-navigation-bar .oppia-navbar-tab:focus { +.oppia-top-navigation-bar .oppia-navbar-tab:focus { background-color: #fff; color: #00645c; } -oppia-top-navigation-bar .arrow-forward { +.oppia-top-navigation-bar .arrow-forward { color: #00645c; font-size: 14px; margin-left: 4px; } -oppia-top-navigation-bar .launch { +.oppia-top-navigation-bar .launch { font-size: 12px; margin-left: 90px; } -oppia-top-navigation-bar .underline:hover, -oppia-top-navigation-bar .underline:focus { +.oppia-top-navigation-bar .underline:hover, +.oppia-top-navigation-bar .underline:focus { border-bottom: 2px solid #333; transition: 50ms; } -oppia-top-navigation-bar .get-involved-dropdown a { +.oppia-top-navigation-bar .get-involved-dropdown a { text-decoration: none; } -oppia-top-navigation-bar .heading a { +.oppia-top-navigation-bar .heading a { color: #212121; } -oppia-top-navigation-bar .nav-item-links a { +.oppia-top-navigation-bar .nav-item-links a { color: #212121; text-decoration: none; } -oppia-top-navigation-bar .learn-dropdown-menu a, -oppia-top-navigation-bar .about-dropdown-menu a, -oppia-top-navigation-bar .get-involved-dropdown a { +.oppia-top-navigation-bar .learn-dropdown-menu a, +.oppia-top-navigation-bar .about-dropdown-menu a, +.oppia-top-navigation-bar .get-involved-dropdown a { text-decoration: none; } -oppia-top-navigation-bar .learn-dropdown-menu .nav-item-top-link a { +.oppia-top-navigation-bar .learn-dropdown-menu .nav-item-top-link a { color: #333; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 500; line-height: 18.75px; } -oppia-top-navigation-bar .dropdown-menu .innvolved-item:hover a { +.oppia-top-navigation-bar .dropdown-menu .innvolved-item:hover a { border-bottom: #333 solid 2px; transition: 50ms; } -oppia-top-navigation-bar .get-involved-dropdown { +.oppia-top-navigation-bar .get-involved-dropdown { min-width: 574px; padding: 0; } -oppia-top-navigation-bar .get-involved-dropdown .nav-item { +.oppia-top-navigation-bar .get-involved-dropdown .nav-item { width: 100%; } -oppia-top-navigation-bar .get-involved-dropdown .heading { +.oppia-top-navigation-bar .get-involved-dropdown .heading { color: #333; font-family: 'Roboto', sans-serif; font-size: 16px; @@ -65,23 +65,23 @@ oppia-top-navigation-bar .get-involved-dropdown .heading { line-height: 18.75px; padding: 0; } -oppia-top-navigation-bar .get-involved-dropdown .language { +.oppia-top-navigation-bar .get-involved-dropdown .language { color: #f2994a; font-size: 18px; } -oppia-top-navigation-bar .get-involved-dropdown .volunteer { +.oppia-top-navigation-bar .get-involved-dropdown .volunteer { color: #2d9cdb; font-size: 18px; } -oppia-top-navigation-bar .get-involved-dropdown .contact { +.oppia-top-navigation-bar .get-involved-dropdown .contact { color: #b4bbc3; font-size: 18px; } -oppia-top-navigation-bar .get-involved-dropdown .fav { +.oppia-top-navigation-bar .get-involved-dropdown .fav { color: #eb5757; font-size: 18px; } -oppia-top-navigation-bar .get-involved-dropdown .des { +.oppia-top-navigation-bar .get-involved-dropdown .des { color: #767676; font-family: 'Roboto', sans-serif; font-size: 14px; @@ -91,50 +91,50 @@ oppia-top-navigation-bar .get-involved-dropdown .des { padding-left: 36px; text-overflow: clip; } -oppia-top-navigation-bar .item-border { +.oppia-top-navigation-bar .item-border { border-right: 1px solid rgba(33, 33, 33, 0.102); } -oppia-top-navigation-bar .top-section { +.oppia-top-navigation-bar .top-section { border-bottom: 1px solid rgba(33, 33, 33, 0.102); } -oppia-top-navigation-bar .top-section .heading { +.oppia-top-navigation-bar .top-section .heading { align-items: center; display: flex; } -oppia-top-navigation-bar .bottom-section .heading { +.oppia-top-navigation-bar .bottom-section .heading { align-items: center; display: flex; } -oppia-top-navigation-bar .top-section .heading-text { +.oppia-top-navigation-bar .top-section .heading-text { display: inline-block; margin-left: 7px; } -oppia-top-navigation-bar .bottom-section .heading-text { +.oppia-top-navigation-bar .bottom-section .heading-text { margin-left: 9px; } -oppia-top-navigation-bar .item { +.oppia-top-navigation-bar .item { padding: 32px; width: 287px; } -oppia-top-navigation-bar .item:hover, -oppia-top-navigation-bar .item:focus { +.oppia-top-navigation-bar .item:hover, +.oppia-top-navigation-bar .item:focus { background-color: rgba(33, 33, 33, 0.027); } -oppia-top-navigation-bar .dropdown-menu .signin-dropdown { +.oppia-top-navigation-bar .dropdown-menu .signin-dropdown { border-radius: 1px; height: 41px; width: 200px; } -oppia-top-navigation-bar .top-section .item { +.oppia-top-navigation-bar .top-section .item { padding-bottom: 27px; } -oppia-top-navigation-bar .bottom-section .item { +.oppia-top-navigation-bar .bottom-section .item { padding-top: 27px; } @@ -146,33 +146,33 @@ oppia-top-navigation-bar .bottom-section .item { margin-left: 25px; } -oppia-top-navigation-bar .dropdown-toggle::after { +.oppia-top-navigation-bar .dropdown-toggle::after { margin-left: 0.255em; margin-right: 0.255em; } -oppia-top-navigation-bar .learn-dropdown-menu { +.oppia-top-navigation-bar .learn-dropdown-menu { border-radius: 3px; padding: 0; } -oppia-top-navigation-bar .classroom-enabled { +.oppia-top-navigation-bar .classroom-enabled { min-width: 688px; } -oppia-top-navigation-bar .classroom-disabled { +.oppia-top-navigation-bar .classroom-disabled { min-width: 300px; } -oppia-top-navigation-bar .language-dropdown { +.oppia-top-navigation-bar .language-dropdown { max-height: 60vh; overflow-y: auto; } -oppia-top-navigation-bar .learn { +.oppia-top-navigation-bar .learn { height: 66.5px; } -oppia-top-navigation-bar .learn-dropdown-menu .nav-item-top-link { +.oppia-top-navigation-bar .learn-dropdown-menu .nav-item-top-link { padding: 0; padding-bottom: 8px; } -oppia-top-navigation-bar .learn-dropdown-menu .nav-item-right-head { +.oppia-top-navigation-bar .learn-dropdown-menu .nav-item-right-head { color: #333; font-family: 'Roboto', sans-serif; font-size: 12px; @@ -183,7 +183,7 @@ oppia-top-navigation-bar .learn-dropdown-menu .nav-item-right-head { padding-bottom: 8px; text-transform: uppercase; } -oppia-top-navigation-bar .learn-dropdown-menu .nav-item-links { +.oppia-top-navigation-bar .learn-dropdown-menu .nav-item-links { color: #333; font-family: 'Roboto', sans-serif; font-size: 14px; @@ -194,39 +194,39 @@ oppia-top-navigation-bar .learn-dropdown-menu .nav-item-links { text-transform: capitalize; } -oppia-top-navigation-bar .learn-dropdown-menu .nav-item-left { +.oppia-top-navigation-bar .learn-dropdown-menu .nav-item-left { border-right: 1px solid rgba(0, 0, 0, 0.051); padding: 32px; width: 388px; } -oppia-top-navigation-bar .learn-dropdown-menu .nav-item-right { +.oppia-top-navigation-bar .learn-dropdown-menu .nav-item-right { min-width: 300px; padding: 32px; } -oppia-top-navigation-bar .learn-dropdown-menu .nav-item-left:hover, -oppia-top-navigation-bar .learn-dropdown-menu .nav-item-right:hover, -oppia-top-navigation-bar .learn-dropdown-menu .nav-item-left:focus, -oppia-top-navigation-bar .learn-dropdown-menu .nav-item-right:focus { +.oppia-top-navigation-bar .learn-dropdown-menu .nav-item-left:hover, +.oppia-top-navigation-bar .learn-dropdown-menu .nav-item-right:hover, +.oppia-top-navigation-bar .learn-dropdown-menu .nav-item-left:focus, +.oppia-top-navigation-bar .learn-dropdown-menu .nav-item-right:focus { background-color: rgba(33, 33, 33, 0.027); } -oppia-top-navigation-bar .about-dropdown-menu .nav-item a:hover, -oppia-top-navigation-bar .about-dropdown-menu .nav-item a:focus { +.oppia-top-navigation-bar .about-dropdown-menu .nav-item a:hover, +.oppia-top-navigation-bar .about-dropdown-menu .nav-item a:focus { background-color: rgba(33, 33, 33, 0.027); } -oppia-top-navigation-bar .about-dropdown-menu .about-link:hover, -oppia-top-navigation-bar .about-dropdown-menu .about-link:focus { +.oppia-top-navigation-bar .about-dropdown-menu .about-link:hover, +.oppia-top-navigation-bar .about-dropdown-menu .about-link:focus { color: #009688 !important; } -oppia-top-navigation-bar .nav-item-left-head { +.oppia-top-navigation-bar .nav-item-left-head { color: #333; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 500; line-height: 18.75px; } -oppia-top-navigation-bar .learn-dropdown-menu .nav-content { +.oppia-top-navigation-bar .learn-dropdown-menu .nav-content { color: #767676; font-family: 'Roboto', sans-serif; font-size: 14px; @@ -234,7 +234,7 @@ oppia-top-navigation-bar .learn-dropdown-menu .nav-content { line-height: 20px; width: 224px; } -oppia-top-navigation-bar .learn-dropdown-menu .nav-item-bottom-link { +.oppia-top-navigation-bar .learn-dropdown-menu .nav-item-bottom-link { color: #00645c; font-family: 'Inter', 'Roboto', sans-serif; font-size: 14px; @@ -243,7 +243,7 @@ oppia-top-navigation-bar .learn-dropdown-menu .nav-item-bottom-link { padding: 0; padding-top: 16px; } -oppia-top-navigation-bar .learn-dropdown-menu .nav-item-bottom-link-logged { +.oppia-top-navigation-bar .learn-dropdown-menu .nav-item-bottom-link-logged { color: #00645c; font-family: 'Inter', 'Roboto', sans-serif; font-size: 14px; @@ -251,7 +251,7 @@ oppia-top-navigation-bar .learn-dropdown-menu .nav-item-bottom-link-logged { line-height: 16.41px; padding: 0; } -oppia-top-navigation-bar .oppia-navbar-nav .dropdown-menu { +.oppia-top-navigation-bar .oppia-navbar-nav .dropdown-menu { border-radius: 3px; border-top-left-radius: 0; border-top-right-radius: 0; @@ -260,15 +260,15 @@ oppia-top-navigation-bar .oppia-navbar-nav .dropdown-menu { text-align: left; } -oppia-top-navigation-bar .language-icon { +.oppia-top-navigation-bar .language-icon { font-size: 20px; vertical-align: text-bottom; } -oppia-top-navigation-bar .language-padding-left { +.oppia-top-navigation-bar .language-padding-left { padding-left: 26px; } -oppia-top-navigation-bar .oppia-nav-right-dropdown { +.oppia-top-navigation-bar .oppia-nav-right-dropdown { background-color: #fff; border-radius: 5px; border-width: 0; @@ -284,44 +284,44 @@ oppia-top-navigation-bar .oppia-nav-right-dropdown { white-space: nowrap; } -oppia-top-navigation-bar .oppia-navbar-brand-name:focus { +.oppia-top-navigation-bar .oppia-navbar-brand-name:focus { outline: 1px dotted #fff; outline: auto 5px -webkit-focus-ring-color; } -oppia-top-navigation-bar .language-element { +.oppia-top-navigation-bar .language-element { border-radius: 0; box-shadow: 0 0; color: #34665c; padding: 10px 0; } -oppia-top-navigation-bar .language-element:hover { +.oppia-top-navigation-bar .language-element:hover { background-color: rgb(52, 102, 92, 0.1); } -oppia-top-navigation-bar .language-element-selected { +.oppia-top-navigation-bar .language-element-selected { background-color: rgb(52, 102, 92, 0.1); } -oppia-top-navigation-bar .oppia-nav-right-dropdown:focus, -oppia-top-navigation-bar .oppia-nav-right-dropdown:hover { +.oppia-top-navigation-bar .oppia-nav-right-dropdown:focus, +.oppia-top-navigation-bar .oppia-nav-right-dropdown:hover { box-shadow: 1px 4px 5px 1px rgba(0,0,0,0.1); } -oppia-top-navigation-bar .oppia-nav-right-dropdown:active { +.oppia-top-navigation-bar .oppia-nav-right-dropdown:active { background-color: #e5e5e5; box-shadow: none; transition-duration: 10ms; } -oppia-top-navigation-bar .oppia-navbar-button-container.dropdown.oppia-navbar-button-container-extra-info { +.oppia-top-navigation-bar .oppia-navbar-button-container.dropdown.oppia-navbar-button-container-extra-info { margin-left: 10px; } -oppia-top-navigation-bar .oppia-navbar-button-container .btn.oppia-navbar-button { +.oppia-top-navigation-bar .oppia-navbar-button-container .btn.oppia-navbar-button { margin-left: 5px; margin-right: 0; } -oppia-top-navigation-bar .oppia-signin-g-icon { +.oppia-top-navigation-bar .oppia-signin-g-icon { float: left; padding: 10px 15px 10px 0; } -oppia-top-navigation-bar .oppia-navbar-dashboard-indicator-text { +.oppia-top-navigation-bar .oppia-navbar-dashboard-indicator-text { bottom: 0; color: white; font-size: 1.12rem; @@ -329,7 +329,7 @@ oppia-top-navigation-bar .oppia-navbar-dashboard-indicator-text { position: absolute; right: 4px; } -oppia-top-navigation-bar .oppia-navbar-role-text { +.oppia-top-navigation-bar .oppia-navbar-role-text { bottom: 0; color: white; font-size: 11px; @@ -337,7 +337,7 @@ oppia-top-navigation-bar .oppia-navbar-role-text { position: absolute; right: 3px; } -oppia-top-navigation-bar .oppia-navbar-dashboard-indicator { +.oppia-top-navigation-bar .oppia-navbar-dashboard-indicator { background-color: #f7a541; border-radius: 20px; height: 15px; @@ -346,16 +346,16 @@ oppia-top-navigation-bar .oppia-navbar-dashboard-indicator { top: 8px; width: 15px; } -oppia-top-navigation-bar .oppia-navbar-menu { +.oppia-top-navigation-bar .oppia-navbar-menu { margin-left: 10px; opacity: 0.9; outline-color: transparent; padding-top: 20px; } -oppia-top-navigation-bar .oppia-navbar-profile { +.oppia-top-navigation-bar .oppia-navbar-profile { float: right; } -oppia-top-navigation-bar .oppia-navbar-role-indicator { +.oppia-top-navigation-bar .oppia-navbar-role-indicator { background-color: #f7a541; border-radius: 20px; bottom: 10px; @@ -364,95 +364,95 @@ oppia-top-navigation-bar .oppia-navbar-role-indicator { right: 25px; width: 15px; } -oppia-top-navigation-bar .oppia-navbar-close-icon { +.oppia-top-navigation-bar .oppia-navbar-close-icon { color: #fff; font-size: 22px; margin-right: 4px; margin-top: -5px; } -oppia-top-navigation-bar .oppia-launch-icon { +.oppia-top-navigation-bar .oppia-launch-icon { color: #009688; font-size: 22px; } -.oppia-user-avatar-icon { +.oppia-top-navigation-bar .oppia-user-avatar-icon { font-size: 36px; } -oppia-top-navigation-bar .oppia-admin-text { +.oppia-top-navigation-bar .oppia-admin-text { right: 4px; } -oppia-top-navigation-bar .oppia-navbar-button-container-extra-info { +.oppia-top-navigation-bar .oppia-navbar-button-container-extra-info { margin-right: 10px; } -oppia-top-navigation-bar .oppia-navbar-dropdown-menu { +.oppia-top-navigation-bar .oppia-navbar-dropdown-menu { margin-right: 15px; padding: 0; } -oppia-top-navigation-bar .oppia-navbar-dropdown { +.oppia-top-navigation-bar .oppia-navbar-dropdown { border: 0; border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; } -oppia-top-navigation-bar .oppia-navbar-profile-picture-container .caret { +.oppia-top-navigation-bar .oppia-navbar-profile-picture-container .caret { margin: 4px; margin-left: 10px; } -oppia-top-navigation-bar .oppia-navbar-profile-picture-container { +.oppia-top-navigation-bar .oppia-navbar-profile-picture-container { margin-left: 10px; text-align: right; } -oppia-top-navigation-bar .oppia-navbar-dropdown .nav-link { +.oppia-top-navigation-bar .oppia-navbar-dropdown .nav-link { color: #009688; } -oppia-top-navigation-bar .oppia-navbar-dropdown .nav-link:hover { +.oppia-top-navigation-bar .oppia-navbar-dropdown .nav-link:hover { color: #888; } -oppia-top-navigation-bar .oppia-signin-text { +.oppia-top-navigation-bar .oppia-signin-text { font-family: Roboto, arial, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .21px; line-height: 41px; } -oppia-top-navigation-bar .oppia-navbar-menu-icon { +.oppia-top-navigation-bar .oppia-navbar-menu-icon { color: #fff; font-size: 22px; margin-top: -5px; } -oppia-top-navigation-bar .nav-mobile-header-text-container { +.oppia-top-navigation-bar .nav-mobile-header-text-container { display: none; } -oppia-top-navigation-bar .oppia-navbar-clickable-dropdown:hover ul.dropdown-menu { +.oppia-top-navigation-bar .oppia-navbar-clickable-dropdown:hover ul.dropdown-menu { display: block; } -oppia-top-navigation-bar .oppia-navbar-menu:hover { +.oppia-top-navigation-bar .oppia-navbar-menu:hover { opacity: 1; } -oppia-top-navigation-bar .oppia-navbar-menu:focus { +.oppia-top-navigation-bar .oppia-navbar-menu:focus { outline: 1px dotted #212121; outline: 5px -webkit-focus-ring-color; } -oppia-top-navigation-bar .oppia-nav-link { +.oppia-top-navigation-bar .oppia-nav-link { padding: 0; width: 190px; } -oppia-top-navigation-bar .oppia-navbar-dropdown-item { +.oppia-top-navigation-bar .oppia-navbar-dropdown-item { display: flex; flex-direction: column; gap: 2px; padding: 30px; } -oppia-top-navigation-bar .oppia-navbar-tab-content-heading { +.oppia-top-navigation-bar .oppia-navbar-tab-content-heading { color: #212121; font-size: 16px; font-weight: 500; padding: 0; } -oppia-top-navigation-bar .oppia-navbar-tab-content-heading:after { +.oppia-top-navigation-bar .oppia-navbar-tab-content-heading:after { border-style: solid; border-width: 0 0 1.59px; bottom: 1px; @@ -462,45 +462,45 @@ oppia-top-navigation-bar .oppia-navbar-tab-content-heading:after { width: 50.5px; } -oppia-top-navigation-bar .oppia-navbar-dropdown-heart-icon { +.oppia-top-navigation-bar .oppia-navbar-dropdown-heart-icon { color: #eb5757; font-size: 22px; padding-right: 6px; } -oppia-top-navigation-bar .oppia-navbar-tab-content-desc { +.oppia-top-navigation-bar .oppia-navbar-tab-content-desc { color: #767676; line-height: 20px; margin-left: 28px; opacity: 0.9; } -oppia-top-navigation-bar .oppia-navbar-dropdown-right { +.oppia-top-navigation-bar .oppia-navbar-dropdown-right { left: 0; min-width: 285px; padding: 0; right: auto; } -oppia-top-navigation-bar .oppia-navbar-nav.oppia-navbar-profile .profile-dropdown:hover { +.oppia-top-navigation-bar .oppia-navbar-nav.oppia-navbar-profile .profile-dropdown:hover { background-color: #fff; } -oppia-top-navigation-bar .oppia-navbar-arrow-right { +.oppia-top-navigation-bar .oppia-navbar-arrow-right { font-size: 12px; padding-left: 8px; padding-top: 1.5px; } -oppia-top-navigation-bar .oppia-tick-mark { +.oppia-top-navigation-bar .oppia-tick-mark { font-size: 15px; margin-right: 5px; padding-left: 5px; } @media screen and (max-width: 880px) { - oppia-top-navigation-bar .oppia-logo-wide { + .oppia-top-navigation-bar .oppia-logo-wide { margin-left: 0; } } @media screen and (max-width: 840px) { - oppia-top-navigation-bar .desktop-view-language-code { + .oppia-top-navigation-bar .desktop-view-language-code { display: none; } } @@ -513,7 +513,7 @@ oppia-top-navigation-bar .oppia-tick-mark { } @media screen and (min-width: 300px) and (max-width: 768px) { - .nav-mobile-header-text-container { + .oppia-top-navigation-bar .nav-mobile-header-text-container { display: inline-block; font-size: 1px; margin-top: 2px; @@ -521,13 +521,13 @@ oppia-top-navigation-bar .oppia-tick-mark { text-overflow: ellipsis; width: 50%; } - oppia-top-navigation-bar .nav-mobile-header-editor { + .oppia-top-navigation-bar .nav-mobile-header-editor { color: #fff; display: block; font-family: Roboto, arial, sans-serif; font-size: 19px; } - oppia-top-navigation-bar .nav-mobile-header-text { + .oppia-top-navigation-bar .nav-mobile-header-text { color: #fff; display: inline-block; font-size: 15px; @@ -537,4 +537,11 @@ oppia-top-navigation-bar .oppia-tick-mark { white-space: nowrap; width: 100%; } + @media screen and (max-width: 600px) { + .oppia-top-navigation-bar .oppia-logo { + left: 0; + margin-left: 60px; + position: absolute; + } + } } diff --git a/core/templates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.html b/core/templates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.html index d511abd3d6ba..6167fc9028bb 100644 --- a/core/templates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.html +++ b/core/templates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.html @@ -30,7 +30,7 @@ -
+
{{ headerText }} @@ -41,7 +41,7 @@
    diff --git a/core/templates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.ts b/core/templates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.ts index 7190b794119c..ae020b423d76 100644 --- a/core/templates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.ts +++ b/core/templates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.ts @@ -44,7 +44,6 @@ import { LearnerGroupBackendApiService } from 'domain/learner_group/learner-grou import './top-navigation-bar.component.css'; - interface LanguageInfo { id: string; text: string; @@ -53,6 +52,7 @@ interface LanguageInfo { @Component({ selector: 'oppia-top-navigation-bar', templateUrl: './top-navigation-bar.component.html', + styleUrls: ['./top-navigation-bar.component.css'] }) export class TopNavigationBarComponent implements OnInit, OnDestroy { // These properties are initialized using Angular lifecycle hooks diff --git a/core/templates/components/forms/custom-forms-directives/image-uploader.component.html b/core/templates/components/forms/custom-forms-directives/image-uploader.component.html index c5c6cd553325..9bbbe0ed295c 100644 --- a/core/templates/components/forms/custom-forms-directives/image-uploader.component.html +++ b/core/templates/components/forms/custom-forms-directives/image-uploader.component.html @@ -13,8 +13,8 @@ Please do not upload watermarked images. - - + - - - - - diff --git a/core/templates/components/forms/schema-based-editors/schema-based-float-editor.component.html b/core/templates/components/forms/schema-based-editors/schema-based-float-editor.component.html index cd61548cc650..ea142881bc5c 100644 --- a/core/templates/components/forms/schema-based-editors/schema-based-float-editor.component.html +++ b/core/templates/components/forms/schema-based-editors/schema-based-float-editor.component.html @@ -1,6 +1,6 @@
    - + {{ errorStringI18nKey | translate }} - diff --git a/core/templates/components/forms/schema-based-editors/schema-based-int-editor.component.html b/core/templates/components/forms/schema-based-editors/schema-based-int-editor.component.html index 0b38c2651dfa..5752e3823625 100644 --- a/core/templates/components/forms/schema-based-editors/schema-based-int-editor.component.html +++ b/core/templates/components/forms/schema-based-editors/schema-based-int-editor.component.html @@ -1,5 +1,5 @@
    - + { expect(OppiaAngularRootComponent.rteElementsAreInitialized).toBeTrue(); - expect(TestBed.createComponent( - OppiaAngularRootComponent).componentInstance).toBeDefined(); + const componentInstance = TestBed.createComponent( + OppiaAngularRootComponent).componentInstance; + expect(componentInstance).toBeDefined(); + spyOn(customElements, 'get').and.callFake(() => WordCount); + registerCustomElements(TestBed.inject(Injector)); }); it('should emit once ngAfterViewInit is called', () => { diff --git a/core/templates/components/oppia-angular-root.component.ts b/core/templates/components/oppia-angular-root.component.ts index 09ddc611b8cd..4891704b0c19 100644 --- a/core/templates/components/oppia-angular-root.component.ts +++ b/core/templates/components/oppia-angular-root.component.ts @@ -77,7 +77,10 @@ import { ReviewTestBackendApiService } from import { StoryViewerBackendApiService } from 'domain/story_viewer/story-viewer-backend-api.service'; import { ServicesConstants } from 'services/services.constants'; -import 'third-party-imports/ckeditor.import.ts'; +// Relative path used as an work around to get the angular compiler and webpack +// build to not complain. +// TODO(#16309): Fix relative imports. +import '../third-party-imports/ckeditor.import'; import { NoninteractiveCollapsible } from 'rich_text_components/Collapsible/directives/oppia-noninteractive-collapsible.component'; import { NoninteractiveImage } from 'rich_text_components/Image/directives/oppia-noninteractive-image.component'; @@ -118,6 +121,32 @@ const componentMap = { } }; +export const registerCustomElements = (injector: Injector): void => { + for (const rteKey of Object.keys(ServicesConstants.RTE_COMPONENT_SPECS)) { + const rteElement = createCustomElement( + componentMap[rteKey].component_class, + {injector}); + // Check if the custom elements have been previously defined. We can't + // redefine custom elements with the same id. Root cause for the element + // being already defined is not yet known. Can possibly be a side effect of + // webpack and AoT bundles co-existing. + // TODO(#16718): Investigate custom element already defined error. + if ( + customElements.get( + 'oppia-noninteractive-ckeditor-' + + ServicesConstants.RTE_COMPONENT_SPECS[rteKey].frontend_id + ) !== undefined + ) { + continue; + } + customElements.define( + 'oppia-noninteractive-ckeditor-' + + ServicesConstants.RTE_COMPONENT_SPECS[rteKey].frontend_id, + rteElement + ); + } +}; + @Component({ selector: 'oppia-angular-root', templateUrl: './oppia-angular-root.component.html' @@ -159,17 +188,7 @@ export class OppiaAngularRootComponent implements AfterViewInit { if (OppiaAngularRootComponent.rteElementsAreInitialized) { return; } - - for (const rteKey of Object.keys(ServicesConstants.RTE_COMPONENT_SPECS)) { - const rteElement = createCustomElement( - componentMap[rteKey].component_class, - {injector: this.injector}); - customElements.define( - 'oppia-noninteractive-ckeditor-' + - ServicesConstants.RTE_COMPONENT_SPECS[rteKey].frontend_id, - rteElement - ); - } + registerCustomElements(this.injector); OppiaAngularRootComponent.rteElementsAreInitialized = true; } diff --git a/core/templates/components/question-directives/modal-templates/question-editor-save-modal.component.html b/core/templates/components/question-directives/modal-templates/question-editor-save-modal.component.html index 09b5c5daa5cc..cbf732682b51 100644 --- a/core/templates/components/question-directives/modal-templates/question-editor-save-modal.component.html +++ b/core/templates/components/question-directives/modal-templates/question-editor-save-modal.component.html @@ -6,7 +6,13 @@

    Please enter a brief description of what you have changed: - +

    diff --git a/core/templates/components/question-directives/modal-templates/question-editor-save-modal.component.ts b/core/templates/components/question-directives/modal-templates/question-editor-save-modal.component.ts index 08e4ccdd02a3..790057292b91 100644 --- a/core/templates/components/question-directives/modal-templates/question-editor-save-modal.component.ts +++ b/core/templates/components/question-directives/modal-templates/question-editor-save-modal.component.ts @@ -30,11 +30,10 @@ export class QuestionEditorSaveModalComponent extends ConfirmOrCancelModal // This property is initialized using Angular lifecycle hooks // and we need to do non-null assertion. For more information, see // https://github.com/oppia/oppia/wiki/Guide-on-defining-types#ts-7-1 + commitMessage: string = ''; MAX_COMMIT_MESSAGE_LENGTH!: number; - constructor( - private ngbActiveModal: NgbActiveModal, - ) { + constructor(private ngbActiveModal: NgbActiveModal) { super(ngbActiveModal); } diff --git a/core/templates/components/question-directives/question-misconception-editor/question-misconception-editor.component.ts b/core/templates/components/question-directives/question-misconception-editor/question-misconception-editor.component.ts index a41869316ac2..52bb40b38952 100644 --- a/core/templates/components/question-directives/question-misconception-editor/question-misconception-editor.component.ts +++ b/core/templates/components/question-directives/question-misconception-editor/question-misconception-editor.component.ts @@ -35,6 +35,7 @@ export interface MisconceptionUpdatedValues { interface Outcome { feedback: SubtitledHtmlBackendDict; + labelledAsCorrect: boolean; } @Component({ diff --git a/core/templates/components/skill-mastery/skill-mastery.component.html b/core/templates/components/skill-mastery/skill-mastery.component.html index d99f6cd8d120..06c39db4cfde 100644 --- a/core/templates/components/skill-mastery/skill-mastery.component.html +++ b/core/templates/components/skill-mastery/skill-mastery.component.html @@ -1,4 +1,4 @@ -
    +
    Mastery Degree:
    diff --git a/core/templates/components/skill-selector/merge-skill-modal.component.html b/core/templates/components/skill-selector/merge-skill-modal.component.html index 428873dac482..c1c1b9709554 100644 --- a/core/templates/components/skill-selector/merge-skill-modal.component.html +++ b/core/templates/components/skill-selector/merge-skill-modal.component.html @@ -7,7 +7,6 @@

    -
    diff --git a/core/templates/components/state-directives/solution-editor/solution-editor.component.ts b/core/templates/components/state-directives/solution-editor/solution-editor.component.ts index 2f29f3eaf325..85a85c993753 100644 --- a/core/templates/components/state-directives/solution-editor/solution-editor.component.ts +++ b/core/templates/components/state-directives/solution-editor/solution-editor.component.ts @@ -52,7 +52,7 @@ export class SolutionEditor implements OnInit { private explorationHtmlFormatterService: ExplorationHtmlFormatterService, private stateCustomizationArgsService: StateCustomizationArgsService, private stateInteractionIdService: StateInteractionIdService, - private stateSolutionService: StateSolutionService, + public stateSolutionService: StateSolutionService, ) {} getAnswerHtml(): string { diff --git a/core/templates/components/state-editor/state-content-editor/state-content-editor.component.ts b/core/templates/components/state-editor/state-content-editor/state-content-editor.component.ts index b7f3c9fbaac2..9869cdf15228 100644 --- a/core/templates/components/state-editor/state-content-editor/state-content-editor.component.ts +++ b/core/templates/components/state-editor/state-content-editor/state-content-editor.component.ts @@ -62,7 +62,7 @@ export class StateContentEditorComponent implements OnInit { private contextService: ContextService, private editorFirstTimeEventsService: EditorFirstTimeEventsService, private externalSaveService: ExternalSaveService, - private stateContentService: StateContentService, + public stateContentService: StateContentService, private stateEditorService: StateEditorService, private editabilityService: EditabilityService ) {} diff --git a/core/templates/components/state-editor/state-skill-editor/state-skill-editor.component.ts b/core/templates/components/state-editor/state-skill-editor/state-skill-editor.component.ts index 3103f8f5c43c..33cbfe3c1746 100644 --- a/core/templates/components/state-editor/state-skill-editor/state-skill-editor.component.ts +++ b/core/templates/components/state-editor/state-skill-editor/state-skill-editor.component.ts @@ -58,7 +58,7 @@ export class StateSkillEditorComponent implements OnInit { private storyEditorStateService: StoryEditorStateService, private alertsService: AlertsService, private windowDimensionsService: WindowDimensionsService, - private stateLinkedSkillIdService: StateLinkedSkillIdService, + public stateLinkedSkillIdService: StateLinkedSkillIdService, private urlInterpolationService: UrlInterpolationService, private ngbModal: NgbModal, private skillBackendApiService: SkillBackendApiService, diff --git a/core/templates/components/summary-tile/exploration-summary-tile.component.ts b/core/templates/components/summary-tile/exploration-summary-tile.component.ts index 748470d0ba28..139703ff925c 100644 --- a/core/templates/components/summary-tile/exploration-summary-tile.component.ts +++ b/core/templates/components/summary-tile/exploration-summary-tile.component.ts @@ -37,6 +37,7 @@ import './exploration-summary-tile.component.css'; @Component({ selector: 'oppia-exploration-summary-tile', templateUrl: './exploration-summary-tile.component.html', + styleUrls: ['./exploration-summary-tile.component.css'] }) export class ExplorationSummaryTileComponent implements OnInit, OnDestroy { // These properties are initialized using Angular lifecycle hooks diff --git a/core/templates/components/summary-tile/learner-story-summary-tile.component.ts b/core/templates/components/summary-tile/learner-story-summary-tile.component.ts index a344eadc1d41..c0192034da63 100644 --- a/core/templates/components/summary-tile/learner-story-summary-tile.component.ts +++ b/core/templates/components/summary-tile/learner-story-summary-tile.component.ts @@ -28,7 +28,7 @@ import { UrlService } from 'services/contextual/url.service'; @Component({ selector: 'oppia-learner-story-summary-tile', - templateUrl: 'learner-story-summary-tile.component.html' + templateUrl: './learner-story-summary-tile.component.html' }) export class LearnerStorySummaryTileComponent implements OnInit { // These properties are initialized using Angular lifecycle hooks @@ -48,6 +48,7 @@ export class LearnerStorySummaryTileComponent implements OnInit { starImageUrl!: string; storyCompleted: boolean = false; cardIsHovered: boolean = false; + openInNewWindow = false; constructor( private urlInterpolationService: UrlInterpolationService, diff --git a/core/templates/components/summary-tile/learner-topic-goals-summary-tile.component.ts b/core/templates/components/summary-tile/learner-topic-goals-summary-tile.component.ts index 9fb0c64640da..731caba71dea 100644 --- a/core/templates/components/summary-tile/learner-topic-goals-summary-tile.component.ts +++ b/core/templates/components/summary-tile/learner-topic-goals-summary-tile.component.ts @@ -29,7 +29,7 @@ import { StorySummary } from 'domain/story/story-summary.model'; @Component({ selector: 'oppia-learner-topic-goals-summary-tile', - templateUrl: 'learner-topic-goals-summary-tile.component.html' + templateUrl: './learner-topic-goals-summary-tile.component.html' }) export class LearnerTopicGoalsSummaryTileComponent implements OnInit { // These properties are initialized using Angular lifecycle hooks diff --git a/core/templates/components/summary-tile/learner-topic-summary-tile.component.ts b/core/templates/components/summary-tile/learner-topic-summary-tile.component.ts index 5c2687988255..9b2752bb631d 100644 --- a/core/templates/components/summary-tile/learner-topic-summary-tile.component.ts +++ b/core/templates/components/summary-tile/learner-topic-summary-tile.component.ts @@ -27,7 +27,7 @@ import { ClassroomDomainConstants } from 'domain/classroom/classroom-domain.cons @Component({ selector: 'oppia-learner-topic-summary-tile', - templateUrl: 'learner-topic-summary-tile.component.html' + templateUrl: './learner-topic-summary-tile.component.html' }) export class LearnerTopicSummaryTileComponent implements OnInit { // These properties are initialized using Angular lifecycle hooks @@ -39,6 +39,7 @@ export class LearnerTopicSummaryTileComponent implements OnInit { totalPublishedNodeCount!: number; topicTitle!: string; thumbnailBgColor!: string; + openInNewWindow = false; constructor( private urlInterpolationService: UrlInterpolationService, diff --git a/core/templates/components/summary-tile/story-summary-tile.component.ts b/core/templates/components/summary-tile/story-summary-tile.component.ts index a6a03f530da9..42dff9efdc39 100644 --- a/core/templates/components/summary-tile/story-summary-tile.component.ts +++ b/core/templates/components/summary-tile/story-summary-tile.component.ts @@ -34,7 +34,8 @@ import './story-summary-tile.component.css'; @Component({ selector: 'oppia-story-summary-tile', - templateUrl: 'story-summary-tile.component.html' + templateUrl: './story-summary-tile.component.html', + styleUrls: ['./story-summary-tile.component.css'] }) export class StorySummaryTileComponent implements OnInit { // These properties are initialized using Angular lifecycle hooks diff --git a/core/templates/components/summary-tile/summary-tile.module.ts b/core/templates/components/summary-tile/summary-tile.module.ts new file mode 100644 index 000000000000..e75b4d758eb1 --- /dev/null +++ b/core/templates/components/summary-tile/summary-tile.module.ts @@ -0,0 +1,44 @@ +// Copyright 2022 The Oppia Authors. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS-IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +/** + * @fileoverview Module for the the summary components. + */ + +import 'core-js/es7/reflect'; +import 'zone.js'; +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { TranslateModule } from '@ngx-translate/core'; +import { StringUtilityPipesModule } from 'filters/string-utility-filters/string-utility-pipes.module'; +import { TopicSummaryTileComponent } from './topic-summary-tile.component'; + +@NgModule({ + imports: [ + CommonModule, + StringUtilityPipesModule, + TranslateModule, + ], + declarations: [ + TopicSummaryTileComponent + ], + entryComponents: [ + TopicSummaryTileComponent + ], + exports: [ + TopicSummaryTileComponent + ], +}) + +export class SummaryTilesModule { } diff --git a/core/templates/domain/utilities/url-interpolation.service.spec.ts b/core/templates/domain/utilities/url-interpolation.service.spec.ts index 9c58cf6bc7ef..9cf7b2f246ca 100644 --- a/core/templates/domain/utilities/url-interpolation.service.spec.ts +++ b/core/templates/domain/utilities/url-interpolation.service.spec.ts @@ -22,14 +22,26 @@ import { UrlInterpolationService } from 'domain/utilities/url-interpolation.service'; import { UrlService } from 'services/contextual/url.service'; +import resourceHashes from 'utility/hashes'; +const hashes = { + '/hash_test.html': 'ijklmopq', + '/path_test/hash_test.html': '123456789', + '/hash_test.min.js': 'zyx12345', + '/assets_test/hash_test.json': '987654321', + '/pages_test/hash_test.html': 'abcd12345', + '/images/hash_test.png': '98765fghij', + '/videos/hash_test.mp4': '12345cxz', + '/audio/hash_test.mp3': '12345abc', + '/interactions/interTest/static/interTest.png': '123654789' +}; describe('URL Interpolation Service', () => { - let hashes = require('hashes.json'); let uis: UrlInterpolationService; let urlService: UrlService; let mockLocation: Pick; let _alertsService: AlertsService; let alertsObject: Record<'alertsService', AlertsService>; beforeEach(() => { + spyOnProperty(resourceHashes, 'hashes', 'get').and.returnValue(hashes); mockLocation = { origin: 'http://sample.com' }; diff --git a/core/templates/domain/utilities/url-interpolation.service.ts b/core/templates/domain/utilities/url-interpolation.service.ts index 69e97f80668f..4cbabe4583e6 100644 --- a/core/templates/domain/utilities/url-interpolation.service.ts +++ b/core/templates/domain/utilities/url-interpolation.service.ts @@ -25,7 +25,7 @@ import { UrlService } from 'services/contextual/url.service'; import { UtilsService } from 'services/utils.service'; import { AppConstants } from 'app.constants'; -const hashes = require('hashes.json'); +import resourceHashes from 'utility/hashes'; // This makes the InterpolationValuesType like a dict whose keys and values both // are string. @@ -69,6 +69,7 @@ export class UrlInterpolationService { * @return {string} The resource path with cache slug. */ _getUrlWithSlug(resourcePath: string): string { + const hashes = resourceHashes.hashes; if (!this.DEV_MODE) { if (hashes[resourcePath]) { let index = resourcePath.lastIndexOf('.'); diff --git a/core/templates/i18n/i18n.service.spec.ts b/core/templates/i18n/i18n.service.spec.ts index c7ef31a1379d..7bb26be38906 100644 --- a/core/templates/i18n/i18n.service.spec.ts +++ b/core/templates/i18n/i18n.service.spec.ts @@ -18,9 +18,10 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'; import { EventEmitter } from '@angular/core'; -import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; +import { fakeAsync, flushMicrotasks, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { TranslateService } from '@ngx-translate/core'; import { UserInfo } from 'domain/user/user-info.model'; +import { CookieModule, CookieService } from 'ngx-cookie'; import { TranslateCacheService } from 'ngx-translate-cache'; import { WindowRef } from 'services/contextual/window-ref.service'; import { I18nLanguageCodeService } from 'services/i18n-language-code.service'; @@ -28,6 +29,7 @@ import { UserBackendApiService } from 'services/user-backend-api.service'; import { UserService } from 'services/user.service'; import { I18nService } from './i18n.service'; + describe('I18n service', () => { let i18nService: I18nService; let windowRef: WindowRef; @@ -46,9 +48,10 @@ describe('I18n service', () => { }, location: { toString: () => { - return ''; + return 'http://localhost:8181/'; }, - reload: () => {} + reload: () => {}, + href: 'http://localhost:8181' }, history: { pushState: () => {} @@ -70,7 +73,8 @@ describe('I18n service', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - HttpClientTestingModule + HttpClientTestingModule, + CookieModule.forRoot() ], providers: [ { @@ -97,7 +101,7 @@ describe('I18n service', () => { userBackendApiService = TestBed.inject(UserBackendApiService); }); - it('should set cache language according to URL lang param', () => { + it('should set cache language according to URL lang param', fakeAsync(() => { // Setting 'en' as cache language code. if (i18nService.localStorage) { i18nService.localStorage.setItem(CACHE_KEY_LANG, 'en'); @@ -105,30 +109,28 @@ describe('I18n service', () => { } // This sets the url to 'http://localhost:8181/?lang=es' // when initialized. - spyOn(windowRef.nativeWindow.location, 'toString') - .and.returnValue('http://localhost:8181/?lang=es'); + windowRef.nativeWindow.location.href = 'http://localhost:8181/?lang=es'; expect( i18nService.localStorage ? i18nService.localStorage.getItem(CACHE_KEY_LANG) : null) .toBe('en'); - i18nService.initialize(); expect( i18nService.localStorage ? i18nService.localStorage.getItem(CACHE_KEY_LANG) : null) .toBe('es'); - }); + flushMicrotasks(); + })); - it('should remove language param from URL if it is invalid', () => { + it('should remove language param from URL if it is invalid', fakeAsync(() => { if (i18nService.localStorage) { i18nService.localStorage.setItem(CACHE_KEY_LANG, 'en'); } // This sets the url to 'http://localhost:8181/?lang=invalid' // when initialized. - spyOn(windowRef.nativeWindow.location, 'toString') - .and.returnValue('http://localhost:8181/?lang=invalid'); - + windowRef.nativeWindow.location.href = ( + 'http://localhost:8181/?lang=invalid'); i18nService.initialize(); // Translation cache should not be updated as the language param @@ -136,30 +138,28 @@ describe('I18n service', () => { expect( i18nService.localStorage ? i18nService.localStorage.getItem(CACHE_KEY_LANG) : null).toBe('en'); - }); + flushMicrotasks(); + })); it('should not update translation cache if no language param is present in' + - ' URL', () => { + ' URL', fakeAsync(() => { if (i18nService.localStorage) { i18nService.localStorage.setItem(CACHE_KEY_LANG, 'en'); i18nService.localStorage.setItem(CACHE_KEY_DIRECTION, 'ltr'); } - // This sets the url to 'http://localhost:8181/' when initialized. - spyOn(windowRef.nativeWindow.location, 'toString') - .and.returnValue('http://localhost:8181/'); - expect( i18nService.localStorage ? i18nService.localStorage.getItem(CACHE_KEY_LANG) : null).toBe('en'); - i18nService.initialize(); + tick(); expect( i18nService.localStorage ? i18nService.localStorage.getItem(CACHE_KEY_LANG) : null).toBe('en'); - }); + flushMicrotasks(); + })); - it('should remove url lang param', () => { + it('should remove url lang param', fakeAsync(() => { i18nService.url = new URL('http://localhost/about?lang=es'); spyOn(windowRef.nativeWindow.history, 'pushState'); @@ -167,7 +167,8 @@ describe('I18n service', () => { expect(windowRef.nativeWindow.history.pushState).toHaveBeenCalledWith( {}, '', 'http://localhost/about'); - }); + flushMicrotasks(); + })); it('should update user preferred language', fakeAsync(() => { let userInfo = new UserInfo( @@ -182,79 +183,47 @@ describe('I18n service', () => { spyOn(i18nService, 'removeUrlLangParam'); let newLangCode = 'en'; - i18nLanguageCodeService.setI18nLanguageCode('es'); expect(userInfo.getPreferredSiteLanguageCode()).toBe('es'); - i18nService.updateUserPreferredLanguage(newLangCode); tick(); - expect(userBackendApiService.updatePreferredSiteLanguageAsync) .toHaveBeenCalledWith(newLangCode); expect(i18nService.removeUrlLangParam).toHaveBeenCalled(); + flushMicrotasks(); })); it( - 'should update user preferred language to arabic and reload', + 'should set the new language code when language changes', fakeAsync(() => { let userInfo = new UserInfo( - [], true, true, true, true, true, 'es', '', '', true); + [], true, true, true, true, true, 'es', '', '', false); spyOn(userService, 'getUserInfoAsync').and.returnValue( Promise.resolve(userInfo)); - spyOn( - userBackendApiService, 'updatePreferredSiteLanguageAsync' - ).and.returnValue(Promise.resolve({ - site_language_code: 'es' - })); + spyOn(i18nLanguageCodeService, 'setI18nLanguageCode'); spyOn(i18nService, 'removeUrlLangParam'); - spyOn(windowRef.nativeWindow.location, 'reload'); let newLangCode = 'ar'; i18nLanguageCodeService.setI18nLanguageCode('es'); - expect(userInfo.getPreferredSiteLanguageCode()).toBe('es'); - i18nService.updateUserPreferredLanguage(newLangCode); tick(); - - expect(windowRef.nativeWindow.location.reload).toHaveBeenCalled(); - expect(userBackendApiService.updatePreferredSiteLanguageAsync) - .toHaveBeenCalledWith(newLangCode); + expect(i18nLanguageCodeService.setI18nLanguageCode).toHaveBeenCalledWith( + newLangCode); expect(i18nService.removeUrlLangParam).toHaveBeenCalled(); + flushMicrotasks(); }) ); - it('should update to arabic and refresh', fakeAsync(() => { - let userInfo = new UserInfo( - [], true, true, true, true, true, 'es', '', '', false); - spyOn(userService, 'getUserInfoAsync').and.returnValue( - Promise.resolve(userInfo)); - spyOn( - userBackendApiService, 'updatePreferredSiteLanguageAsync' - ).and.returnValue(Promise.resolve({ - site_language_code: 'es' - })); - spyOn(i18nService, 'removeUrlLangParam'); - spyOn(windowRef.nativeWindow.location, 'reload'); - - let newLangCode = 'ar'; - - i18nLanguageCodeService.setI18nLanguageCode('es'); - - i18nService.updateUserPreferredLanguage(newLangCode); - tick(); - - expect(windowRef.nativeWindow.location.reload).toHaveBeenCalled(); - expect(i18nService.removeUrlLangParam).toHaveBeenCalled(); - })); - it('should update view to user preferred site language', fakeAsync(() => { let preferredLanguage = 'es'; let userInfo = new UserInfo( [], true, true, true, true, true, preferredLanguage, '', '', false); spyOn(userService, 'getUserInfoAsync').and.returnValue( Promise.resolve(userInfo)); - spyOn(i18nLanguageCodeService, 'setI18nLanguageCode'); + spyOn( + i18nLanguageCodeService, 'setI18nLanguageCode' + ).and.callFake(() => {}); spyOn(i18nService, 'removeUrlLangParam'); i18nService.updateViewToUserPreferredSiteLanguage(); @@ -264,6 +233,7 @@ describe('I18n service', () => { expect(i18nLanguageCodeService.setI18nLanguageCode).toHaveBeenCalledWith( preferredLanguage); expect(i18nService.removeUrlLangParam).toHaveBeenCalled(); + flushMicrotasks(); })); it('should not update site language if user does not have' + @@ -283,6 +253,7 @@ describe('I18n service', () => { expect(i18nLanguageCodeService.setI18nLanguageCode).not. toHaveBeenCalledWith(preferredLanguage); expect(i18nService.removeUrlLangParam).not.toHaveBeenCalled(); + flushMicrotasks(); })); it('should update site language', fakeAsync(() => { @@ -294,8 +265,71 @@ describe('I18n service', () => { i18nService.initialize(); mockI18nLanguageCodeService.emit('en'); tick(); + flushMicrotasks(); })); + it( + 'should reload the website if language direction changes with lang param' + + ' when cookies are not acknowledged', + fakeAsync(() => { + let mockI18nLanguageCodeServiceSubject = new EventEmitter(); + spyOn(windowRef.nativeWindow.location, 'toString') + .and.returnValue('http://localhost:8181'); + spyOnProperty(i18nLanguageCodeService, 'onI18nLanguageCodeChange') + .and.returnValue(mockI18nLanguageCodeServiceSubject); + const prevLangCode = I18nLanguageCodeService.prevLangCode; + I18nLanguageCodeService.prevLangCode = 'en'; + spyOn(windowRef.nativeWindow.location, 'reload'); + i18nService.initialize(); + mockI18nLanguageCodeServiceSubject.emit('ar'); + tick(); + expect(windowRef.nativeWindow.location.href).toBe('http://localhost:8181/?dir=rtl'); + mockI18nLanguageCodeServiceSubject.emit('en'); + tick(); + expect(windowRef.nativeWindow.location.href).toBe('http://localhost:8181/?dir=ltr'); + mockI18nLanguageCodeServiceSubject.emit('es'); + tick(); + expect(windowRef.nativeWindow.location.href).toBe('http://localhost:8181/?dir=ltr'); + I18nLanguageCodeService.prevLangCode = prevLangCode; + flushMicrotasks(); + }) + ); + + it( + 'should reload the website if language direction changes when cookies ' + + 'acknowledged', + fakeAsync(() => { + let currentDateInUnixTimeMsecs = new Date().valueOf(); + spyOn(windowRef.nativeWindow.location, 'toString') + .and.returnValue('http://localhost:8181'); + let cookieOptions = { + expires: new Date(currentDateInUnixTimeMsecs + 360000), + secure: true, + sameSite: 'none' as const + }; + const cookieService = TestBed.inject(CookieService); + cookieService.put( + i18nService.COOKIE_NAME_COOKIES_ACKNOWLEDGED, + String(currentDateInUnixTimeMsecs), + cookieOptions + ); + let mockI18nLanguageCodeServiceSubject = new EventEmitter(); + spyOnProperty(i18nLanguageCodeService, 'onI18nLanguageCodeChange') + .and.returnValue(mockI18nLanguageCodeServiceSubject); + const prevLangCode = I18nLanguageCodeService.prevLangCode; + I18nLanguageCodeService.prevLangCode = 'en'; + spyOn(windowRef.nativeWindow.location, 'reload'); + i18nService.initialize(); + expect(windowRef.nativeWindow.location.href).toBe('http://localhost:8181'); + mockI18nLanguageCodeServiceSubject.emit('ar'); + I18nLanguageCodeService.prevLangCode = prevLangCode; + expect(windowRef.nativeWindow.location.reload).toHaveBeenCalled(); + expect(windowRef.nativeWindow.location.href).toBe('http://localhost:8181'); + cookieService.removeAll(); + flushMicrotasks(); + }) + ); + it('should test getters', () => { expect(i18nService.directionChangeEventEmitter).toBeDefined(); }); diff --git a/core/templates/i18n/i18n.service.ts b/core/templates/i18n/i18n.service.ts index e13d6222c15b..77c1402de704 100644 --- a/core/templates/i18n/i18n.service.ts +++ b/core/templates/i18n/i18n.service.ts @@ -25,6 +25,7 @@ import { WindowRef } from 'services/contextual/window-ref.service'; import { I18nLanguageCodeService, LanguageInfo } from 'services/i18n-language-code.service'; import { SiteAnalyticsService } from 'services/site-analytics.service'; import { UserBackendApiService } from 'services/user-backend-api.service'; +import { CookieService } from 'ngx-cookie'; import { UserService } from 'services/user.service'; @Injectable({ @@ -34,6 +35,7 @@ export class I18nService { private _directionChangeEventEmitter: EventEmitter = ( new EventEmitter()); + COOKIE_NAME_COOKIES_ACKNOWLEDGED = 'OPPIA_COOKIES_ACKNOWLEDGED'; url!: URL; // Check that local storage exists and works as expected. // If it does storage stores the localStorage object, @@ -62,6 +64,7 @@ export class I18nService { constructor( private documentAttributeCustomizationService: DocumentAttributeCustomizationService, + private cookieService: CookieService, private i18nLanguageCodeService: I18nLanguageCodeService, private userBackendApiService: UserBackendApiService, private userService: UserService, @@ -83,14 +86,49 @@ export class I18nService { initialize(): void { this.i18nLanguageCodeService.onI18nLanguageCodeChange.subscribe( (code) => { + const cookieSetDateMsecs = this.cookieService.get( + this.COOKIE_NAME_COOKIES_ACKNOWLEDGED); + const langDirection = ( + this.i18nLanguageCodeService.isLanguageRTL(code) ? 'rtl' : 'ltr'); + let prevLangDirection = ( + this.i18nLanguageCodeService.isLanguageRTL( + I18nLanguageCodeService.prevLangCode + ) ? 'rtl' : 'ltr'); this.translateService.use(code); this.documentAttributeCustomizationService.addAttribute('lang', code); + if (!!cookieSetDateMsecs && + +cookieSetDateMsecs > AppConstants.COOKIE_POLICY_LAST_UPDATED_MSECS + ) { + prevLangDirection = ( + this.cookieService.get('dir') || prevLangDirection + ); + this.cookieService.put( + 'dir', + langDirection + ); + this.cookieService.put('lang', code); + if (prevLangDirection !== langDirection) { + this.windowRef.nativeWindow.location.reload(); + } + } else { + const parser = new URL(this.windowRef.nativeWindow.location.href); + let urlParamDir = parser.searchParams.get('dir'); + if (urlParamDir === null) { + urlParamDir = 'ltr'; + } + if (urlParamDir === langDirection) { + return; + } + parser.searchParams.set('dir', langDirection); + this.windowRef.nativeWindow.location.href = ( + parser.href); + } } ); // Loads site language according to the language parameter in URL // if present. - this.url = new URL(this.windowRef.nativeWindow.location.toString()); + this.url = new URL(this.windowRef.nativeWindow.location.href); const searchParams = this.url.searchParams; if (searchParams.has('lang')) { @@ -140,17 +178,8 @@ export class I18nService { updateUserPreferredLanguage(newLangCode: string): void { this.siteAnalyticsService.registerSiteLanguageChangeEvent(newLangCode); - let oldLangDirection = ( - this.i18nLanguageCodeService.getCurrentLanguageDirection()); - let reloadPage = ( - oldLangDirection !== this.supportedSiteLanguageCodes[newLangCode]); this.setLocalStorageKeys(newLangCode); - // When we know that the page will be reloaded we don't need to switch - // the language now. - if (!reloadPage) { - this.i18nLanguageCodeService.setI18nLanguageCode(newLangCode); - } this.userService.getUserInfoAsync().then((userInfo) => { // If user is logged in first save the language and then reload, @@ -159,16 +188,10 @@ export class I18nService { this.userBackendApiService.updatePreferredSiteLanguageAsync( newLangCode ).then(() => { - if (reloadPage) { - this.windowRef.nativeWindow.location.reload(); - return; - } + this.i18nLanguageCodeService.setI18nLanguageCode(newLangCode); }); } else { - if (reloadPage) { - this.windowRef.nativeWindow.location.reload(); - return; - } + this.i18nLanguageCodeService.setI18nLanguageCode(newLangCode); } }); diff --git a/core/templates/pages/about-foundation-page/about-foundation-page.component.html b/core/templates/pages/about-foundation-page/about-foundation-page.component.html index 287cca7b7a18..a37b9236cbc6 100644 --- a/core/templates/pages/about-foundation-page/about-foundation-page.component.html +++ b/core/templates/pages/about-foundation-page/about-foundation-page.component.html @@ -105,7 +105,7 @@

    -
    -
    -

    {{ regenerationMessage }}

    diff --git a/core/templates/pages/admin-page/navbar/admin-navbar.component.html b/core/templates/pages/admin-page/navbar/admin-navbar.component.html index 49d23ffc84e6..473dd6839165 100644 --- a/core/templates/pages/admin-page/navbar/admin-navbar.component.html +++ b/core/templates/pages/admin-page/navbar/admin-navbar.component.html @@ -178,31 +178,27 @@ (mouseenter)="activateProfileDropdown()" (mouseleave)="deactivateProfileDropdown()">
  • - {{ username }}
  • - Creator Dashboard
  • - Preferences
  • - @@ -210,8 +206,7 @@
  • - @@ -220,8 +215,7 @@
  • - Logout diff --git a/core/templates/pages/admin-page/roles-tab/roles-and-actions-visualizer.component.html b/core/templates/pages/admin-page/roles-tab/roles-and-actions-visualizer.component.html index 62b82e90eb3f..72397da6a642 100644 --- a/core/templates/pages/admin-page/roles-tab/roles-and-actions-visualizer.component.html +++ b/core/templates/pages/admin-page/roles-tab/roles-and-actions-visualizer.component.html @@ -68,8 +68,8 @@
  • @@ -84,7 +84,7 @@
  • {{ action }}

-
+
diff --git a/core/templates/pages/android-page/android-page.component.ts b/core/templates/pages/android-page/android-page.component.ts index 7c455aa8b8f0..84aa7717177b 100644 --- a/core/templates/pages/android-page/android-page.component.ts +++ b/core/templates/pages/android-page/android-page.component.ts @@ -34,7 +34,7 @@ import './android-page.component.css'; @Component({ selector: 'android-page', templateUrl: './android-page.component.html', - styleUrls: [], + styleUrls: ['./android-page.component.css'], animations: [ trigger('fadeIn', [ transition(':enter', [ @@ -78,6 +78,7 @@ export class AndroidPageComponent implements OnInit, OnDestroy { featuresMainTextIsSeen = false; emailAddress: string | null = null; name: string | null = null; + userCanSubscribe: boolean = false; OPPIA_AVATAR_IMAGE_URL = ( this.urlInterpolationService .getStaticImageUrl('/avatar/oppia_avatar_large_100px.svg')); diff --git a/core/templates/pages/blog-admin-page/blog-admin-page.module.ts b/core/templates/pages/blog-admin-page/blog-admin-page.module.ts index 2a7d37a24868..e55c70b3ab2b 100644 --- a/core/templates/pages/blog-admin-page/blog-admin-page.module.ts +++ b/core/templates/pages/blog-admin-page/blog-admin-page.module.ts @@ -29,13 +29,13 @@ import { APP_BASE_HREF } from '@angular/common'; import { OppiaAngularRootComponent } from 'components/oppia-angular-root.component'; import { SharedComponentsModule } from 'components/shared-component.module'; import { BlogAdminNavbarComponent } from 'pages/blog-admin-page/navbar/blog-admin-navbar.component'; -import { RolesAndActionsVisualizerComponent } from 'pages/admin-page/roles-tab/roles-and-actions-visualizer.component'; import { BlogAdminPageComponent } from 'pages/blog-admin-page/blog-admin-page.component'; import { platformFeatureInitFactory, PlatformFeatureService } from 'services/platform-feature.service'; import { RequestInterceptor } from 'services/request-interceptor.service'; import { ToastrModule } from 'ngx-toastr'; import { MyHammerConfig, toastrConfig } from 'pages/oppia-root/app.module'; import { SmartRouterModule } from 'hybrid-router-module-provider'; +import { AdminBlogAdminCommonModule } from 'pages/admin-page/admin-blog-admin-common.module'; import { AppErrorHandlerProvider } from 'pages/oppia-root/app-error-handler'; declare var angular: ng.IAngularStatic; @@ -52,17 +52,16 @@ declare var angular: ng.IAngularStatic; MatCardModule, ReactiveFormsModule, SharedComponentsModule, + AdminBlogAdminCommonModule, ToastrModule.forRoot(toastrConfig) ], declarations: [ BlogAdminNavbarComponent, - BlogAdminPageComponent, - RolesAndActionsVisualizerComponent + BlogAdminPageComponent ], entryComponents: [ BlogAdminNavbarComponent, - BlogAdminPageComponent, - RolesAndActionsVisualizerComponent + BlogAdminPageComponent ], providers: [ { diff --git a/core/templates/pages/blog-admin-page/navbar/blog-admin-navbar.component.html b/core/templates/pages/blog-admin-page/navbar/blog-admin-navbar.component.html index 8cbcce48cb28..8750fc2c58f7 100644 --- a/core/templates/pages/blog-admin-page/navbar/blog-admin-navbar.component.html +++ b/core/templates/pages/blog-admin-page/navbar/blog-admin-navbar.component.html @@ -48,23 +48,20 @@ (mouseenter)="activateProfileDropdown()" (mouseleave)="deactivateProfileDropdown()">
  • - {{ username }}
  • - Blog Dashboard
  • - Preferences @@ -72,8 +69,7 @@
  • - Logout diff --git a/core/templates/pages/blog-author-profile-page/blog-author-profile-page.module.ts b/core/templates/pages/blog-author-profile-page/blog-author-profile-page.module.ts index 2c1351659d2b..2189e21a591d 100644 --- a/core/templates/pages/blog-author-profile-page/blog-author-profile-page.module.ts +++ b/core/templates/pages/blog-author-profile-page/blog-author-profile-page.module.ts @@ -29,9 +29,9 @@ import { BlogAuthorProfilePageComponent } from './blog-author-profile-page.compo import { CommonModule } from '@angular/common'; import { MatMenuModule } from '@angular/material/menu'; import { BlogAuthorProfilePageRoutingModule } from './blog-author-profile-page-routing.module'; -import { BlogCardComponent } from 'pages/blog-dashboard-page/blog-card/blog-card.component'; import { StringUtilityPipesModule } from 'filters/string-utility-filters/string-utility-pipes.module'; import { Error404PageModule } from 'pages/error-pages/error-404/error-404-page.module'; +import { SharedBlogComponentsModule } from 'pages/blog-dashboard-page/shared-blog-components.module'; @NgModule({ imports: [ @@ -46,16 +46,15 @@ import { Error404PageModule } from 'pages/error-pages/error-404/error-404-page.m TranslateModule, ReactiveFormsModule, Error404PageModule, + SharedBlogComponentsModule ], declarations: [ BlogAuthorProfilePageComponent, - BlogAuthorProfilePageRootComponent, - BlogCardComponent + BlogAuthorProfilePageRootComponent ], entryComponents: [ BlogAuthorProfilePageComponent, - BlogAuthorProfilePageRootComponent, - BlogCardComponent + BlogAuthorProfilePageRootComponent ] }) export class BlogAuthorProfilePageModule {} diff --git a/core/templates/pages/blog-dashboard-page/blog-dashboard-page.module.ts b/core/templates/pages/blog-dashboard-page/blog-dashboard-page.module.ts index 5826dfa94bcc..1f0179e957b0 100644 --- a/core/templates/pages/blog-dashboard-page/blog-dashboard-page.module.ts +++ b/core/templates/pages/blog-dashboard-page/blog-dashboard-page.module.ts @@ -33,27 +33,19 @@ import { APP_BASE_HREF } from '@angular/common'; import { OppiaAngularRootComponent } from 'components/oppia-angular-root.component'; import { BlogDashboardPageComponent } from 'pages/blog-dashboard-page/blog-dashboard-page.component'; -import { BlogPostActionConfirmationModalComponent } from 'pages/blog-dashboard-page/blog-post-action-confirmation/blog-post-action-confirmation.component'; -import { BlogCardComponent } from 'pages/blog-dashboard-page/blog-card/blog-card.component'; -import { BlogDashboardTileComponent } from 'pages/blog-dashboard-page/blog-dashboard-tile/blog-dashboard-tile.component'; -import { BlogDashboardNavbarBreadcrumbComponent } from 'pages/blog-dashboard-page/navbar/navbar-breadcrumb/blog-dashboard-navbar-breadcrumb.component'; import { platformFeatureInitFactory, PlatformFeatureService } from 'services/platform-feature.service'; import { ToastrModule } from 'ngx-toastr'; -import { BlogPostEditorComponent } from 'pages/blog-dashboard-page/blog-post-editor/blog-post-editor.component'; -import { UploadBlogPostThumbnailModalComponent } from 'pages/blog-dashboard-page/modal-templates/upload-blog-post-thumbnail-modal.component'; -import { BlogCardPreviewModalComponent } from 'pages/blog-dashboard-page/modal-templates/blog-card-preview-modal.component'; -import { UploadBlogPostThumbnailComponent } from 'pages/blog-dashboard-page/modal-templates/upload-blog-post-thumbnail.component'; -import { BlogAuthorDetailsEditorComponent } from './modal-templates/author-detail-editor-modal.component'; -import { BlogPostEditorNavbarPreLogoActionComponent } from 'pages/blog-dashboard-page/navbar/navbar-pre-logo-action/blog-post-editor-pre-logo-action.component'; import { MyHammerConfig, toastrConfig } from 'pages/oppia-root/app.module'; import { SmartRouterModule } from 'hybrid-router-module-provider'; import { AppErrorHandlerProvider } from 'pages/oppia-root/app-error-handler'; +import { SharedBlogComponentsModule } from 'pages/blog-dashboard-page/shared-blog-components.module'; @NgModule({ imports: [ BrowserModule, HttpClientModule, SharedComponentsModule, + SharedBlogComponentsModule, ToastrModule.forRoot(toastrConfig), MatTabsModule, MatMenuModule, @@ -66,29 +58,11 @@ import { AppErrorHandlerProvider } from 'pages/oppia-root/app-error-handler'; BrowserAnimationsModule ], declarations: [ - BlogDashboardNavbarBreadcrumbComponent, BlogDashboardPageComponent, - BlogCardComponent, - BlogDashboardTileComponent, - BlogPostEditorComponent, - BlogPostActionConfirmationModalComponent, - UploadBlogPostThumbnailModalComponent, - BlogCardPreviewModalComponent, - UploadBlogPostThumbnailComponent, - BlogPostEditorNavbarPreLogoActionComponent, BlogAuthorDetailsEditorComponent ], entryComponents: [ - BlogDashboardNavbarBreadcrumbComponent, BlogDashboardPageComponent, - BlogCardComponent, - BlogDashboardTileComponent, - BlogPostEditorComponent, - BlogPostActionConfirmationModalComponent, - UploadBlogPostThumbnailModalComponent, - BlogCardPreviewModalComponent, - UploadBlogPostThumbnailComponent, - BlogPostEditorNavbarPreLogoActionComponent, BlogAuthorDetailsEditorComponent ], providers: [ @@ -120,6 +94,7 @@ class BlogDashboardPageModule implements DoBootstrap { import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { downgradeModule } from '@angular/upgrade/static'; +import { BlogAuthorDetailsEditorComponent } from './modal-templates/author-detail-editor-modal.component'; const bootstrapFnAsync = async(extraProviders: StaticProvider[]) => { const platformRef = platformBrowserDynamic(extraProviders); diff --git a/core/templates/pages/blog-dashboard-page/shared-blog-components.module.ts b/core/templates/pages/blog-dashboard-page/shared-blog-components.module.ts new file mode 100644 index 000000000000..cde84cf9c1c9 --- /dev/null +++ b/core/templates/pages/blog-dashboard-page/shared-blog-components.module.ts @@ -0,0 +1,80 @@ +// Copyright 2021 The Oppia Authors. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS-IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +/** + * @fileoverview Module for the shared blog-dashboard components. + */ + +import { NgModule} from '@angular/core'; +import { MatTabsModule } from '@angular/material/tabs'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { HttpClientModule } from '@angular/common/http'; +import { SharedComponentsModule } from 'components/shared-component.module'; + +import { BlogPostActionConfirmationModalComponent } from 'pages/blog-dashboard-page/blog-post-action-confirmation/blog-post-action-confirmation.component'; +import { BlogCardComponent } from 'pages/blog-dashboard-page/blog-card/blog-card.component'; +import { BlogDashboardTileComponent } from 'pages/blog-dashboard-page/blog-dashboard-tile/blog-dashboard-tile.component'; +import { BlogDashboardNavbarBreadcrumbComponent } from 'pages/blog-dashboard-page/navbar/navbar-breadcrumb/blog-dashboard-navbar-breadcrumb.component'; +import { BlogPostEditorComponent } from 'pages/blog-dashboard-page/blog-post-editor/blog-post-editor.component'; +import { UploadBlogPostThumbnailModalComponent } from 'pages/blog-dashboard-page/modal-templates/upload-blog-post-thumbnail-modal.component'; +import { BlogCardPreviewModalComponent } from 'pages/blog-dashboard-page/modal-templates/blog-card-preview-modal.component'; +import { UploadBlogPostThumbnailComponent } from 'pages/blog-dashboard-page/modal-templates/upload-blog-post-thumbnail.component'; +import { BlogPostEditorNavbarPreLogoActionComponent } from 'pages/blog-dashboard-page/navbar/navbar-pre-logo-action/blog-post-editor-pre-logo-action.component'; +import { CommonModule } from '@angular/common'; + +@NgModule({ + imports: [ + CommonModule, + HttpClientModule, + SharedComponentsModule, + MatTabsModule, + MatMenuModule, + MatButtonToggleModule + ], + declarations: [ + BlogDashboardNavbarBreadcrumbComponent, + BlogCardComponent, + BlogDashboardTileComponent, + BlogPostEditorComponent, + BlogPostActionConfirmationModalComponent, + UploadBlogPostThumbnailModalComponent, + BlogCardPreviewModalComponent, + UploadBlogPostThumbnailComponent, + BlogPostEditorNavbarPreLogoActionComponent + ], + entryComponents: [ + BlogDashboardNavbarBreadcrumbComponent, + BlogCardComponent, + BlogDashboardTileComponent, + BlogPostEditorComponent, + BlogPostActionConfirmationModalComponent, + UploadBlogPostThumbnailModalComponent, + BlogCardPreviewModalComponent, + UploadBlogPostThumbnailComponent, + BlogPostEditorNavbarPreLogoActionComponent + ], + exports: [ + BlogDashboardNavbarBreadcrumbComponent, + BlogCardComponent, + BlogDashboardTileComponent, + BlogPostEditorComponent, + BlogPostActionConfirmationModalComponent, + UploadBlogPostThumbnailModalComponent, + BlogCardPreviewModalComponent, + UploadBlogPostThumbnailComponent, + BlogPostEditorNavbarPreLogoActionComponent + ], +}) +export class SharedBlogComponentsModule {} diff --git a/core/templates/pages/blog-home-page/blog-home-page.module.ts b/core/templates/pages/blog-home-page/blog-home-page.module.ts index b7b08b51842a..c0d0289061fa 100644 --- a/core/templates/pages/blog-home-page/blog-home-page.module.ts +++ b/core/templates/pages/blog-home-page/blog-home-page.module.ts @@ -28,10 +28,10 @@ import { BlogHomePageRootComponent } from './blog-home-page-root.component'; import { BlogHomePageComponent } from './blog-home-page.component'; import { CommonModule } from '@angular/common'; import { BlogHomePageRoutingModule } from './blog-home-page-routing.module'; -import { BlogCardComponent } from 'pages/blog-dashboard-page/blog-card/blog-card.component'; import { TagFilterComponent } from './tag-filter/tag-filter.component'; import { StringUtilityPipesModule } from 'filters/string-utility-filters/string-utility-pipes.module'; import { Error404PageModule } from 'pages/error-pages/error-404/error-404-page.module'; +import { SharedBlogComponentsModule } from 'pages/blog-dashboard-page/shared-blog-components.module'; @NgModule({ imports: [ @@ -44,18 +44,17 @@ import { Error404PageModule } from 'pages/error-pages/error-404/error-404-page.m StringUtilityPipesModule, TranslateModule, ReactiveFormsModule, + SharedBlogComponentsModule, Error404PageModule ], declarations: [ BlogHomePageComponent, BlogHomePageRootComponent, - BlogCardComponent, TagFilterComponent ], entryComponents: [ BlogHomePageComponent, BlogHomePageRootComponent, - BlogCardComponent, TagFilterComponent ] }) diff --git a/core/templates/pages/blog-home-page/tag-filter/tag-filter.component.html b/core/templates/pages/blog-home-page/tag-filter/tag-filter.component.html index 997f60261f1e..6375a5500800 100644 --- a/core/templates/pages/blog-home-page/tag-filter/tag-filter.component.html +++ b/core/templates/pages/blog-home-page/tag-filter/tag-filter.component.html @@ -1,7 +1,6 @@
    + class="w-100"> {{ 'I18N_BLOG_HOME_PAGE_TAG_FILTER_HOLDER_TEXT' | translate }}
  • - {{ username }}
  • - Preferences @@ -65,8 +63,7 @@
  • - Logout diff --git a/core/templates/pages/classroom-page/classroom-page.component.ts b/core/templates/pages/classroom-page/classroom-page.component.ts index 56d21ab0e22c..1c963a3f1491 100644 --- a/core/templates/pages/classroom-page/classroom-page.component.ts +++ b/core/templates/pages/classroom-page/classroom-page.component.ts @@ -34,13 +34,12 @@ import { I18nLanguageCodeService } from 'services/i18n-language-code.service'; import { LoaderService } from 'services/loader.service'; import { PageTitleService } from 'services/page-title.service'; import { SiteAnalyticsService } from 'services/site-analytics.service'; - import './classroom-page.component.css'; - @Component({ selector: 'oppia-classroom-page', - templateUrl: './classroom-page.component.html' + templateUrl: './classroom-page.component.html', + styleUrls: ['./classroom-page.component.css'] }) export class ClassroomPageComponent implements OnDestroy { directiveSubscriptions = new Subscription(); diff --git a/core/templates/pages/classroom-page/classroom-page.module.ts b/core/templates/pages/classroom-page/classroom-page.module.ts index e0b28fb2aace..edb80e76b779 100644 --- a/core/templates/pages/classroom-page/classroom-page.module.ts +++ b/core/templates/pages/classroom-page/classroom-page.module.ts @@ -29,7 +29,7 @@ import { ClassroomPageRoutingModule } from './classroom-page-routing.module'; import { RichTextComponentsModule } from 'rich_text_components/rich-text-components.module'; import { SearchBarModule } from 'pages/library-page/search-bar/search-bar.module'; import { StringUtilityPipesModule } from 'filters/string-utility-filters/string-utility-pipes.module'; -import { TopicSummaryTileComponent } from 'components/summary-tile/topic-summary-tile.component'; +import { SummaryTilesModule } from 'components/summary-tile/summary-tile.module'; @NgModule({ imports: [ @@ -41,17 +41,16 @@ import { TopicSummaryTileComponent } from 'components/summary-tile/topic-summary RichTextComponentsModule, SearchBarModule, StringUtilityPipesModule, + SummaryTilesModule, TranslateModule, ], declarations: [ ClassroomPageComponent, ClassroomPageRootComponent, - TopicSummaryTileComponent, ], entryComponents: [ ClassroomPageComponent, - ClassroomPageRootComponent, - TopicSummaryTileComponent + ClassroomPageRootComponent ] }) export class ClassroomPageModule {} diff --git a/core/templates/pages/collection-editor-page/collection-editor-page.module.ts b/core/templates/pages/collection-editor-page/collection-editor-page.module.ts index 649436904e5d..f02e37b5e872 100644 --- a/core/templates/pages/collection-editor-page/collection-editor-page.module.ts +++ b/core/templates/pages/collection-editor-page/collection-editor-page.module.ts @@ -59,6 +59,7 @@ import { AppErrorHandlerProvider } from 'pages/oppia-root/app-error-handler'; SmartRouterModule, RouterModule.forRoot([]), SharedComponentsModule, + FormsModule, ToastrModule.forRoot(toastrConfig) ], declarations: [ @@ -120,6 +121,7 @@ class CollectionEditorPageModule { import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { downgradeModule } from '@angular/upgrade/static'; +import { FormsModule } from '@angular/forms'; const bootstrapFnAsync = async(extraProviders: StaticProvider[]) => { const platformRef = platformBrowserDynamic(extraProviders); diff --git a/core/templates/pages/collection-editor-page/modals/collection-editor-pre-publish-modal.component.ts b/core/templates/pages/collection-editor-page/modals/collection-editor-pre-publish-modal.component.ts index 928334eac4fb..83c94894c531 100644 --- a/core/templates/pages/collection-editor-page/modals/collection-editor-pre-publish-modal.component.ts +++ b/core/templates/pages/collection-editor-page/modals/collection-editor-pre-publish-modal.component.ts @@ -27,7 +27,7 @@ import { CollectionEditorStateService } from '../services/collection-editor-stat @Component({ selector: 'oppia-collection-editor-pre-publish-modal', - templateUrl: 'collection-editor-pre-publish-modal.component.html' + templateUrl: './collection-editor-pre-publish-modal.component.html' }) export class CollectionEditorPrePublishModalComponent extends ConfirmOrCancelModal { diff --git a/core/templates/pages/collection-editor-page/modals/collection-editor-save-modal.component.html b/core/templates/pages/collection-editor-page/modals/collection-editor-save-modal.component.html index 1e69b5d27748..0a35ce1e9281 100644 --- a/core/templates/pages/collection-editor-page/modals/collection-editor-save-modal.component.html +++ b/core/templates/pages/collection-editor-page/modals/collection-editor-save-modal.component.html @@ -10,7 +10,7 @@

    Please enter a brief description of what you have changed:
    diff --git a/core/templates/pages/contributor-dashboard-page/opportunities-list-item/opportunities-list-item.component.ts b/core/templates/pages/contributor-dashboard-page/opportunities-list-item/opportunities-list-item.component.ts index cb9c1f8c68c5..f1c5d463db30 100644 --- a/core/templates/pages/contributor-dashboard-page/opportunities-list-item/opportunities-list-item.component.ts +++ b/core/templates/pages/contributor-dashboard-page/opportunities-list-item/opportunities-list-item.component.ts @@ -33,6 +33,8 @@ export interface ExplorationOpportunity { inReviewCount: number; totalCount: number; translationsCount: number; + heading?: string; + actionButtonTitle?: string; } @Component({ diff --git a/core/templates/pages/creator-dashboard-page/creator-dashboard-page.component.html b/core/templates/pages/creator-dashboard-page/creator-dashboard-page.component.html index 3c8fa38f9c72..c08f136be103 100644 --- a/core/templates/pages/creator-dashboard-page/creator-dashboard-page.component.html +++ b/core/templates/pages/creator-dashboard-page/creator-dashboard-page.component.html @@ -1,7 +1,7 @@
    + [ngClass]="{'oppia-dashboard-title-mobile': checkTabletView(), 'oppia-dashboard-title-desktop': !checkTabletView()}">
    @@ -64,16 +64,6 @@

    -
    - -
    -