From 92a831076281e0d8e79e76ed546e26b7ab6c97b4 Mon Sep 17 00:00:00 2001 From: Kleser <68543649+lkleisa@users.noreply.github.com> Date: Thu, 20 Apr 2023 08:29:09 +0200 Subject: [PATCH] Emberjs upgrade (#526) * Upgrade ember to 3.18.0 * Upgrade ember to 3.19.0 * Upgrade ember to 3.20.0 * Upgrade ember to 3.21.0 * Upgrade ember to 3.22.0 * Upgrade ember to 3.23.0 * Remove ember-fetch * Upgrade ember to 3.24.0 * Upgrade ember-cli-string-helpers * Upgrade nodejs version to 14.19.0 * Upgrade ember-qunit * Upgrade ember to 3.28.0, ember-auto-import, ember-bootstrap, ember-source and add qunit * Upgrade ember to 3.28.6, add custom ember-cli-icon-rating, set bootstrap version to 3 and update ember-bootstrap, ember-basic-dropdown and ember-power-select-with-create * Upgrade ember-cli-sass to 10.0.1, bootstrap-sass to 3.4.1, ember-moment to 9.0.1 and add node-sass to dependencies * Upgrade ember-cli-babel to 7.26.11 * Upgrade ember-data to 3.28.13 * Upgrade ember-cli-htmlbars to 5.7.2 * Upgrade rollup to 1.12.0 * Update browser list * Update ember-modifier, ember-power-select-with-create and add @ember/string * Update multiple dependencies (@ember/render-modifiers, ember-intl, ember-validated-form, ember-changeset-validations, ember-cli-app-version, ember-collapsible-panel, ember-confirm-dialog, ember-keyboard, ember-notify, ember-simple-auth, ember-toggle) * Upgrade ember-bootstrap and use bootstrap 4 * Upgrade @ember/optional-features and remove unused config * Upgrade ember-route-action-helper * Use qunit for test method and not ember-qunit * Fix not running frontend tests * Update yarn.lock and fix dependency alert * Add qunit setup to ember test helpers * Add @service annotation for this.store * Set jquery-integration to false * Make submit button blue * Downgrade ember-keyboard to 6.0.4 * Fix jquery bug * Regenerate yarn.lock file * Make eslint happy * Upgrade jquery * Replace this.$() with $() * Change ember version in rails.yml * Add allowed versions to dependency-lint.js * Upgrade qunit-dom * Fix testing errors with qunit-dom * Fix locale error in tests * Remove import from $ jquery in tests * Replace jquery with querySelector in person-cv-export-test * Try fixing test problems with document queryselector * Replace document with this.element * Revert document querySelector to assert.dom * Set locale in new-people-skills-show-test * Add ember-fetch * Fix failing tests, remove $.text() and replace this.render with await render * Replace $ with document.querySelector * Remove dependency lint error * Update yarn.lock * Remove person form tests because they will be new in feature #351 * Add @initiallyOpened={{false}} and @renderInPlace={{true}} to Ember Power Selects * Fix daterange-edit-tests with this.$ error * Remove css bug with header menu over drop down * Remove bug with not possible to delete person * Remove bug with overlay from people search on person delete * Fix tests in frontend * Remove unused eslint disable * Move button styling to custom.scss * Adjust readme with specific ember cli version * Fix tests in frontend * Resolve bug with setting something on deleted record * Adjust eslint disabling * Fix pipeline bug with calling set on destroyed record * Remove outcommented rootElement = "ember-testing" * Revert changes in skill-search-test.js * Implement feedback from pr * Fix bug with 2 times clicking on new skill in skill set * Fix pipeline bug with calling set on destroyed record * Fix failing text * Remove bug with multiple selection of ui slider * Fix bug with first point of ui slider always dark blue marked * Resolve pr review * Fix bug when editing people skills * Remove outcommented code * Fix failing test people skill edit * Resolve pr feedback * Fix bug with resetting people skill and broken slider bubbles * Replace sleep with setTimeout * Remove bubbles bug when editing all people skills * Resolve pr feedback --- .github/workflows/rails.yml | 4 +- config/application.rb | 2 + .../app/components/core-competences-show.js | 4 +- .../components/delete-with-confirmation.js | 23 +- .../app/components/new-people-skills-show.js | 12 +- frontend/app/components/people-search.js | 1 - frontend/app/components/people-skill-edit.js | 41 +- frontend/app/components/people-skill-show.js | 35 +- frontend/app/components/people-skills-show.js | 6 +- frontend/app/components/person-actions.js | 11 +- frontend/app/components/picture-edit.js | 8 +- frontend/app/routes/people.js | 3 + frontend/app/routes/people/new.js | 3 + frontend/app/routes/person.js | 3 + frontend/app/routes/person/skills.js | 3 + frontend/app/routes/skill-search.js | 3 + frontend/app/routes/skills/index.js | 2 + frontend/app/styles/custom.scss | 18 +- .../expertise-topic-skill-value-edit.hbs | 4 +- .../templates/components/people-search.hbs | 2 +- .../components/people-skill-edit.hbs | 2 +- .../components/people-skill-show.hbs | 2 +- .../app/templates/components/skill-new.hbs | 2 +- .../components/skillset-category-filter.hbs | 2 +- frontend/app/templates/people.hbs | 2 +- frontend/app/templates/skill-search.hbs | 2 +- frontend/app/utils/sort-by-language.js | 2 + frontend/app/utils/sort-by-year.js | 2 + frontend/config/dependency-lint.js | 10 +- frontend/config/ember-intl.js | 34 - frontend/config/environment.js | 1 - frontend/config/optional-features.json | 2 +- frontend/ember-cli-build.js | 6 +- frontend/package.json | 75 +- .../tests/acceptance/create-person-test.js | 144 - frontend/tests/acceptance/edit-person-test.js | 133 - .../tests/acceptance/skill-search-test.js | 18 +- frontend/tests/helpers/destroy-app.js | 2 +- frontend/tests/helpers/start-app.js | 2 +- .../components/application-navigation-test.js | 11 +- .../components/competence-notes-show-test.js | 48 +- .../components/core-competences-show-test.js | 8 +- .../components/daterange-edit-test.js | 20 +- .../components/nav-sidebar-test.js | 8 +- .../components/new-people-skills-show-test.js | 30 +- .../components/people-skill-edit-test.js | 7 +- .../components/people-skill-show-test.js | 18 +- .../components/person-cv-export-test.js | 7 +- .../components/person-edit-test.js | 52 +- .../components/skills-list-row-show-test.js | 2 +- .../components/skills-list-test.js | 24 +- .../skillset-category-filter-test.js | 6 +- .../skillset-defaultset-filter-test.js | 11 +- .../components/skillset-rated-filter-test.js | 7 +- .../integration/components/updated-at-test.js | 6 +- .../helpers/format-country-test.js | 2 +- frontend/tests/integration/helpers/or-test.js | 42 +- .../integration/helpers/to-lowercase-test.js | 2 +- frontend/tests/test-helper.js | 4 + frontend/yarn.lock | 4390 +++++++++++------ 60 files changed, 3375 insertions(+), 1961 deletions(-) delete mode 100644 frontend/tests/acceptance/create-person-test.js delete mode 100644 frontend/tests/acceptance/edit-person-test.js diff --git a/.github/workflows/rails.yml b/.github/workflows/rails.yml index f77f31db4..72604a51c 100644 --- a/.github/workflows/rails.yml +++ b/.github/workflows/rails.yml @@ -25,10 +25,10 @@ jobs: bundler-cache: true # runs 'bundle install' and caches installed gems automatically - uses: actions/setup-node@v2 with: - node-version: '12' # TODO version should not be specified + node-version: '14' - name: Install Ember-Cli with NPM - run: npm install -g ember-cli@3.17 # TODO version should not be specified + run: npm install -g ember-cli@3.28.6 working-directory: frontend - name: Install dependencies Yarn diff --git a/config/application.rb b/config/application.rb index f543d6f75..2186a8505 100644 --- a/config/application.rb +++ b/config/application.rb @@ -28,6 +28,8 @@ class Application < Rails::Application config.autoload_paths += %W( #{config.root}/app/uploaders) # config.i18n.default_locale = :de + config.active_record.verify_foreign_keys_for_fixtures = false + # Bullet tries to add finish_at to insert statement, which does not exist anymore config.active_record.partial_inserts = true diff --git a/frontend/app/components/core-competences-show.js b/frontend/app/components/core-competences-show.js index 566a63ebc..68f752a11 100644 --- a/frontend/app/components/core-competences-show.js +++ b/frontend/app/components/core-competences-show.js @@ -40,7 +40,9 @@ export default class CoreCompetencesShow extends Component { .filter(s => s !== undefined); if (skills.length) hash[category.get("title")] = skills; }); - this.set("coreCompetencesObj", hash); + if (!this.get("isDestroyed")) { + this.set("coreCompetencesObj", hash); + } }); } diff --git a/frontend/app/components/delete-with-confirmation.js b/frontend/app/components/delete-with-confirmation.js index e2dc65310..fc2452351 100644 --- a/frontend/app/components/delete-with-confirmation.js +++ b/frontend/app/components/delete-with-confirmation.js @@ -14,22 +14,35 @@ export default class DeleteWithConfirmation extends Component { @action openConfirmation() { + if (!this.get("router.currentURL").includes("skills")) { + this.removeZIndex("z-index-thousand"); + this.addZIndex("z-index-one"); + } this.set("showConfirmation", true); } @action cancel() { + if (!this.get("router.currentURL").includes("skills")) { + this.removeZIndex("z-index-thousand"); + this.addZIndex("z-index-one"); + } this.set("showConfirmation", false); } @action delete(entry, transitionTo) { + if (!this.get("router.currentURL").includes("skills")) { + this.removeZIndex("z-index-one"); + this.addZIndex("z-index-thousand"); + } + const message = this.intl.t("delete-confirmation.success", { name: entry.instanceToString }); + this.set("showConfirmation", false); entry.destroyRecord().then(() => { - this.set("showConfirmation", false); if (isPresent(transitionTo)) { this.get("router").transitionTo(transitionTo); } @@ -37,4 +50,12 @@ export default class DeleteWithConfirmation extends Component { if (this.didDelete) this.didDelete(); }); } + + removeZIndex(index) { + document.getElementById("people-search-header").classList.remove(index); + } + + addZIndex(index) { + document.getElementById("people-search-header").classList.add(index); + } } diff --git a/frontend/app/components/new-people-skills-show.js b/frontend/app/components/new-people-skills-show.js index 1bef1c762..d9988891c 100644 --- a/frontend/app/components/new-people-skills-show.js +++ b/frontend/app/components/new-people-skills-show.js @@ -22,7 +22,9 @@ export default Component.extend({ }, refreshNewPeopleSkills(skills) { - this.set("isLoading", true); + if (!this.get("isDestroyed")) { + this.set("isLoading", false); + } let loadBegin = Date.now(); this.get("ajax") .request("/skills/unrated_by_person", { @@ -37,7 +39,9 @@ export default Component.extend({ loadEnd - loadBegin > this.get("minimumLoadTime") || ENV.environment == "test" ) { - this.set("isLoading", false); + if (!this.get("isDestroyed")) { + this.set("isLoading", false); + } } else { setTimeout(() => { this.set("isLoading", false); @@ -58,7 +62,9 @@ export default Component.extend({ if (a.get("skill.title") < b.get("skill.title")) return -1; return 0; }); - this.set("newPeopleSkills", peopleSkills); + if (!this.get("isDestroyed")) { + this.set("newPeopleSkills", peopleSkills); + } }); }, diff --git a/frontend/app/components/people-search.js b/frontend/app/components/people-search.js index 4a6946c57..6cbe72663 100644 --- a/frontend/app/components/people-search.js +++ b/frontend/app/components/people-search.js @@ -16,7 +16,6 @@ export default class PeopleSearch extends Component { return currentId ? this.store.peekRecord("person", currentId) : undefined; } - @computed("this.args.people") get peopleToSelect() { return this.args.people.toArray().sort((a, b) => { if (a.get("name") < b.get("name")) return -1; diff --git a/frontend/app/components/people-skill-edit.js b/frontend/app/components/people-skill-edit.js index 8d7f3aa47..298ac0525 100644 --- a/frontend/app/components/people-skill-edit.js +++ b/frontend/app/components/people-skill-edit.js @@ -3,30 +3,53 @@ import { observes } from "@ember-decorators/object"; import { action, computed } from "@ember/object"; import Component from "@ember/component"; import { isBlank } from "@ember/utils"; +import { inject as service } from "@ember/service"; +import config from "../config/environment"; @classic export default class PeopleSkillEdit extends Component { + @service router; + init() { super.init(...arguments); - this.set("interestLevelOptions", [0, 1, 2, 3, 4, 5]); this.set("levelValue", this.get("peopleSkill.level")); if (!this.get("peopleSkill.level")) { this.set("levelValue", 1); - /* eslint-disable ember/no-global-jquery, no-undef, ember/jquery-ember-run */ + } + } + + @action + sliderLoading(element) { + // Sorry for doing this like that, but we couldn't make it work with element.querySelector().ready(). + /* eslint-disable ember/no-global-jquery, no-undef, ember/jquery-ember-run */ + if ( + config.environment !== "test" && + (document.querySelector("#peopleSkillsHeader").contains(element) || + document.querySelector("#new-people-skills-show").contains(element)) + ) { + if ( + document.querySelector("#peopleSkillsHeader").contains(element) && + this.get("peopleSkill.level") !== 0 + ) + return; + $(".slider-handle").ready(() => { - this.sliderHandle = this.$(".slider-handle:first"); - if (!this.sliderHandle) return; - this.sliderHandle.removeClass("slider-handle"); - this.$(".in-selection").removeClass("in-selection"); + this.sliderTickContainer = element.querySelector( + ".slider-tick-container" + ).children[0]; + this.sliderTickContainer.classList.remove("in-selection"); + + this.sliderHandle = element.querySelector(".slider-handle"); + this.sliderHandle.classList.remove("slider-handle"); - this.$(".slider").on("mouseup", () => { - this.sliderHandle.addClass("slider-handle"); + element.addEventListener("mouseup", () => { + this.sliderHandle.classList.add("slider-handle"); this.notifyPropertyChange("levelValue"); }); - /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run */ }); } + /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run */ } @computed("peopleSkill.level") diff --git a/frontend/app/components/people-skill-show.js b/frontend/app/components/people-skill-show.js index c83141d30..b1a265222 100644 --- a/frontend/app/components/people-skill-show.js +++ b/frontend/app/components/people-skill-show.js @@ -13,17 +13,26 @@ export default class PeopleSkillShow extends Component { this.set("levelValue", this.get("peopleSkill.level")); if (!this.get("peopleSkill.level")) { this.set("levelValue", 1); - /* eslint-disable ember/no-global-jquery, no-undef, ember/jquery-ember-run */ - $(".slider-handle").ready(() => { - this.sliderHandle = this.$(".slider-handle:first"); - if (!this.sliderHandle) return; - this.sliderHandle.removeClass("slider-handle"); - this.$(".in-selection").removeClass("in-selection"); - /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run */ - }); } } + @action + sliderLoading(element) { + /* eslint-disable ember/no-global-jquery, no-undef, ember/jquery-ember-run */ + $(".slider-handle").ready(() => { + if (this.get("peopleSkill.level") === 0) { + this.sliderTickContainer = element.querySelector( + ".slider-tick-container" + ).children[0]; + this.sliderTickContainer.classList.remove("in-selection"); + + this.sliderHandle = element.querySelector(".slider-handle"); + this.sliderHandle.classList.remove("slider-handle"); + } + }); + /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run */ + } + didRender() { const currentURL = this.get("router.currentURL"); const skillClass = currentURL == "/skills" ? "skillset" : "member-skillset"; @@ -60,9 +69,13 @@ export default class PeopleSkillShow extends Component { @action adjustSliderStylingOnReset() { if (!this.get("peopleSkill.level")) { - this.sliderHandle = this.$(".slider-handle:first"); - this.sliderHandle.removeClass("slider-handle"); - this.$(".in-selection").removeClass("in-selection"); + this.sliderHandleFirstChild = this.element.querySelector( + ".slider-tick-container" + ).children[0]; + this.sliderHandleFirstChild.classList.remove("in-selection"); + this.element + .querySelector(".slider-handle") + .classList.remove("slider-handle"); } } } diff --git a/frontend/app/components/people-skills-show.js b/frontend/app/components/people-skills-show.js index c09c5d044..c7e414a7a 100644 --- a/frontend/app/components/people-skills-show.js +++ b/frontend/app/components/people-skills-show.js @@ -118,7 +118,7 @@ export default Component.extend({ .then(() => this.set("peopleSkillsEditing", false)) .then(() => this.get("notify").success("Successfully saved!")) .then(() => - this.$("#peopleSkillsHeader")[0].scrollIntoView({ + document.querySelectorAll("#peopleSkillsHeader")[0].scrollIntoView({ behavior: "smooth" }) ) @@ -158,7 +158,9 @@ export default Component.extend({ } }); this.set("peopleSkillsEditing", false); - this.$("#peopleSkillsHeader")[0].scrollIntoView({ behavior: "smooth" }); + document + .querySelectorAll("#peopleSkillsHeader")[0] + .scrollIntoView({ behavior: "smooth" }); }, toggleSkillShow(skill) { diff --git a/frontend/app/components/person-actions.js b/frontend/app/components/person-actions.js index 7446b8de6..dbdb71f5d 100644 --- a/frontend/app/components/person-actions.js +++ b/frontend/app/components/person-actions.js @@ -3,10 +3,6 @@ import { observes } from "@ember-decorators/object"; import { action } from "@ember/object"; import { inject as service } from "@ember/service"; import Component from "@ember/component"; -/* eslint-disable ember/new-module-imports */ -import Ember from "ember"; -const { $ } = Ember; -/* eslint-enable ember/new-module-imports */ @classic export default class PersonActions extends Component { @@ -25,6 +21,7 @@ export default class PersonActions extends Component { @observes("person.peopleSkills.@each.id") peopleSkillsChanged() { + if (!this.get("person.id")) return; this.refreshUnratedSkillsAmount(); } @@ -36,10 +33,13 @@ export default class PersonActions extends Component { } }) .then(response => { - this.set("unratedSkillsAmount", response.data.length); + if (!this.get("isDestroyed")) { + this.set("unratedSkillsAmount", response.data.length); + } }); } + /* eslint-disable ember/no-global-jquery, no-undef, ember/jquery-ember-run */ didRender() { const currentURL = this.get("router.currentURL"); if (currentURL.includes("skills")) { @@ -61,6 +61,7 @@ export default class PersonActions extends Component { $("#person-cv-export").modal("toggle"); } } + /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run */ @action exportDevFws(personId, e) { diff --git a/frontend/app/components/picture-edit.js b/frontend/app/components/picture-edit.js index ce7782c10..6c0aa4262 100644 --- a/frontend/app/components/picture-edit.js +++ b/frontend/app/components/picture-edit.js @@ -51,8 +51,10 @@ export default class PictureEdit extends Component { this.set("response", ObjectPromiseProxy.create({ promise: res })); } + /* eslint-disable ember/no-global-jquery, no-undef, ember/jquery-ember-run */ + didInsertElement() { - this.$(".img-input").on("change", e => { + $(".img-input").on("change", e => { if (e.target.files.length) { this.uploadImage(e.target.files[0]); e.target.value = null; @@ -62,6 +64,8 @@ export default class PictureEdit extends Component { @action changePicture() { - this.$(".img-input").click(); + $(".img-input").click(); } + + /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run */ } diff --git a/frontend/app/routes/people.js b/frontend/app/routes/people.js index 79c9f41b2..b508dc8fd 100644 --- a/frontend/app/routes/people.js +++ b/frontend/app/routes/people.js @@ -11,6 +11,9 @@ export default class PeopleRoute extends Route.extend( @service ajax; + @service + store; + @service selectedPerson; diff --git a/frontend/app/routes/people/new.js b/frontend/app/routes/people/new.js index fe1c71261..dc1415e11 100644 --- a/frontend/app/routes/people/new.js +++ b/frontend/app/routes/people/new.js @@ -1,9 +1,12 @@ import classic from "ember-classic-decorator"; import { action } from "@ember/object"; import Route from "@ember/routing/route"; +import { inject as service } from "@ember/service"; @classic export default class NewRoute extends Route { + @service store; + model() { return this.store.createRecord("person"); } diff --git a/frontend/app/routes/person.js b/frontend/app/routes/person.js index 3ac5792fe..0169cee44 100644 --- a/frontend/app/routes/person.js +++ b/frontend/app/routes/person.js @@ -8,6 +8,9 @@ export default class PersonRoute extends Route { @service selectedPerson; + @service + store; + model(params) { return this.store.findRecord("person", params.person_id); } diff --git a/frontend/app/routes/person/skills.js b/frontend/app/routes/person/skills.js index 3bf04f74d..37c00418e 100644 --- a/frontend/app/routes/person/skills.js +++ b/frontend/app/routes/person/skills.js @@ -15,6 +15,9 @@ export default class SkillsRoute extends Route.extend( @service router; + @service + store; + queryParams = { rated: { refreshModel: true, diff --git a/frontend/app/routes/skill-search.js b/frontend/app/routes/skill-search.js index 40c9167c9..9a9b19357 100755 --- a/frontend/app/routes/skill-search.js +++ b/frontend/app/routes/skill-search.js @@ -1,5 +1,6 @@ import classic from "ember-classic-decorator"; import Route from "@ember/routing/route"; +import { inject as service } from "@ember/service"; @classic export default class SkillSearchRoute extends Route { @@ -18,6 +19,8 @@ export default class SkillSearchRoute extends Route { } }; + @service store; + model({ skill_id, level, interest }) { if (skill_id) { return this.store.query("peopleSkill", { diff --git a/frontend/app/routes/skills/index.js b/frontend/app/routes/skills/index.js index 800a01120..b401aec66 100644 --- a/frontend/app/routes/skills/index.js +++ b/frontend/app/routes/skills/index.js @@ -1,6 +1,7 @@ import classic from "ember-classic-decorator"; import Route from "@ember/routing/route"; import KeycloakAuthenticatedRouteMixin from "ember-keycloak-auth/mixins/keycloak-authenticated-route"; +import { inject as service } from "@ember/service"; @classic export default class IndexRoute extends Route.extend( @@ -22,6 +23,7 @@ export default class IndexRoute extends Route.extend( replace: true } }; + @service store; model({ defaultSet, category, title }) { return this.store.query("skill", { defaultSet, category, title }); diff --git a/frontend/app/styles/custom.scss b/frontend/app/styles/custom.scss index 7f4c4f529..aa616ea52 100644 --- a/frontend/app/styles/custom.scss +++ b/frontend/app/styles/custom.scss @@ -862,10 +862,6 @@ a.disabled-link:hover { height: 22px; } -.ember-basic-dropdown-content-wormhole-origin { - position: absolute; -} - .nav-pills li div { background: none; color: #0088cc; @@ -1508,7 +1504,6 @@ div.content-input { top: 80px; max-width: 1290px; background-color: white; - z-index: 999 !important; } #person-actions { @@ -1652,3 +1647,16 @@ div.content-input { width: 78%; font-size: 15px; } + +button[type="submit"] { + background-color: #3268a1; + color: white; +} + +.z-index-thousand { + z-index: 1000 !important; +} + +.z-index-one { + z-index: 1 !important; +} diff --git a/frontend/app/templates/components/expertise-topic-skill-value-edit.hbs b/frontend/app/templates/components/expertise-topic-skill-value-edit.hbs index 79bc0d6cc..750ee59d7 100644 --- a/frontend/app/templates/components/expertise-topic-skill-value-edit.hbs +++ b/frontend/app/templates/components/expertise-topic-skill-value-edit.hbs @@ -1,4 +1,4 @@ -{{#with (changeset this.expertiseTopicSkillValue this.validations) as |etsvChangeset|}} +{{#let (changeset this.expertiseTopicSkillValue this.validations) as |etsvChangeset|}}
{{this.levelName}}
-{{t "people-skill-show.interest"}}
diff --git a/frontend/app/templates/components/skill-new.hbs b/frontend/app/templates/components/skill-new.hbs index 4d8053c1d..51fdf3b6a 100644 --- a/frontend/app/templates/components/skill-new.hbs +++ b/frontend/app/templates/components/skill-new.hbs @@ -15,7 +15,7 @@