AMP-2880

- package.json: upgrade dependencies to latest within the limit of compatibility with current Vue 2 version, while supported by upgraded Node version - tmp fix for css related errors (as mentioned in AMP-1811) - temporarily surppress eslint errors to allow compilation (upgraded eslint has stricter requirements that would break current code) - rename Header to AmpHeader as required by eslint - tmp removal of bbs editor related code to allow compilation
AudiovisualMetadataPlatform · Apr 17, 2024 · 3676c0a · 3676c0a
1 parent 53c1903
commit 3676c0a
Show file tree

Hide file tree

Showing 40 changed files with 21,072 additions and 17,156 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -17,13 +17,15 @@ module.exports = {
     },
     "plugins": [
         "vue",
-        "react"
+        // "react"
     ],
     "rules": {
       'no-console': 'off',
       'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
       "no-unused-vars": "off",
       "vue/no-unused-components": "off",
       "no-mixed-spaces-and-tabs": "off", 
+      'vue/multi-word-component-names': 'off',
+      "vue/no-mutating-props": 'off'
     }
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,34 +7,29 @@
     "build": "vue-cli-service build",
     "test": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
-    "postinstall": "cd node_modules/@bbc/react-transcript-editor && npm i && npm run build:component",
     "start": "vue-cli-service serve --open",
     "stop": "pkill --signal SIGINT amppd-ui"
   },
   "dependencies": {
-    "@bbc/react-transcript-editor": "https://github.com/AudiovisualMetadataPlatform/react-transcript-editor.git",
-    "@vue/cli": "^4.5.15",
+    "@vue/cli": "^5.0.8",
     "@vuejs-community/vue-filter-date-format": "^1.6.3",
-    "axios": "^0.27.2",
-    "bootstrap": "^4.6.1",
-    "bootstrap-vue": "^2.22.0",
-    "chart.js": "^3.9.1",
-    "core-js": "^3.22.5",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-loader": "^3.0.2",
-    "eslint-plugin-react": "^7.29.4",
-    "mediaelement": "^5.0.5",
-    "moment": "^2.29.4",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "sass-loader": "^8.0.2",
-    "underscore": "^1.13.3",
+    "axios": "^1.6.8",
+    "bootstrap": "^5.3.3",
+    "bootstrap-vue": "^2.23.1",
+    "chart.js": "^4.4.2",
+    "core-js": "^3.37.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-webpack-plugin": "^4.1.0",
+    "mediaelement": "^7.0.3",
+    "moment": "^2.30.1",
+    "sass-loader": "^14.2.1",
+    "underscore": "^1.13.6",
     "vue": "^2.6.14",
-    "vue-axios": "^2.1.5",
+    "vue-axios": "^3.5.2",
     "vue-bootstrap-typeahead": "^0.2.6",
     "vue-click-outside": "^1.1.0",
     "vue-mediaelement": "^1.0.0",
-    "vue-router": "^3.5.3",
+    "vue-router": "^3.6.5",
     "vuejs-datatable": "^2.0.0-alpha.7",
     "vuejs-datepicker": "^1.6.2",
     "vuera": "^0.2.7",
@@ -43,21 +38,21 @@
     "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.17",
-    "@vue/cli-plugin-eslint": "^4.5.17",
-    "@vue/cli-plugin-router": "^4.5.17",
-    "@vue/cli-plugin-unit-jest": "^4.5.15",
-    "@vue/cli-plugin-vuex": "^4.5.17",
-    "@vue/cli-service": "^4.5.17",
-    "@vue/eslint-config-prettier": "^5.1.0",
-    "@vue/test-utils": "^1.3.0",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-router": "^5.0.8",
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/cli-plugin-vuex": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/test-utils": "^2.4.5",
     "babel-eslint": "^10.1.0",
-    "eslint": "^5.16.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-vue": "^5.0.0",
-    "node-sass": "^4.14.1",
-    "prettier": "^1.18.2",
-    "vue-template-compiler": "^2.6.14"
+    "eslint": "^8.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.25.0",
+    "node-sass": "^9.0.0",
+    "prettier": "^3.2.5",
+    "vue-template-compiler": "^2.7.16"
   },
   "eslintConfig": {
     "root": true,

diff --git a/src/App.vue b/src/App.vue
@@ -59,3 +59,6 @@ export default {
   },
 };
 </script>
+<style lang="css">
+/* @import '../../styles/style.css'; */
+</style>
diff --git a/src/components/account/ApproveUser.vue b/src/components/account/ApproveUser.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="col-12">
-    <!-- <Header/> -->
+    <!-- <AmpHeader/> -->
     <main>
       <div class="container">
         <h1 class="text-center">Welcome to the Audiovisual Metadata Platform</h1>
@@ -46,12 +46,12 @@
 </template>  
 
 <script>
-import Header from "@/components/shared/Header.vue";
+import AmpHeader from "@/components/shared/AmpHeader.vue";
 import { accountService } from "@/service/account-service";
 export default {
   name: "ApproveUser",
   components: {
-    Header,
+    AmpHeader,
   },
   data: function () {
     return {
@@ -138,7 +138,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .form-errors {
   color: red;
   margin: 0% !important;

diff --git a/src/components/account/ForgotPassword.vue b/src/components/account/ForgotPassword.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="col-12">
-    <!-- <Header/> -->
+    <!-- <AmpHeader/> -->
     <main>
       <div class="container">
         <h1 class="text-center">
@@ -59,12 +59,12 @@
 </template>
 
 <script>
-import Header from "@/components/shared/Header.vue";
+import AmpHeader from "@/components/shared/AmpHeader.vue";
 import { accountService } from "@/service/account-service";
 export default {
   name: "ForgotPassword",
   components: {
-    Header,
+    AmpHeader,
   },
   data() {
     return {
@@ -135,7 +135,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .form-errors {
   color: red;
   margin: 0% !important;

diff --git a/src/components/account/Login.vue b/src/components/account/Login.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="col-12">
-    <!-- <Header/> -->
+    <!-- <AmpHeader/> -->
     <main>
       <div class="container">
         <h1 class="text-center">
@@ -75,7 +75,7 @@
 </template>
 
 <script>
-import Header from "@/components/shared/Header.vue";
+import AmpHeader from "@/components/shared/AmpHeader.vue";
 import { accountService } from "@/service/account-service";
 import { sync } from "vuex-pathify";
 import AccessControlService from "@/service/access-control-service";
@@ -84,7 +84,7 @@ import SharedService from "@/service/shared-service";
 export default {
   name: "LoginComponent",
   components: {
-    Header,
+    AmpHeader,
   },
   data() {
     return {
@@ -190,7 +190,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .form-errors {
   color: red;
   margin: 0% !important;

diff --git a/src/components/account/Register.vue b/src/components/account/Register.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="col-12">
-    <!-- <Header/> -->
+    <!-- <AmpHeader/> -->
     <main>
       <div class="container">
         <h1 class="text-center">
@@ -107,12 +107,12 @@
 </template>
 
 <script>
-import Header from "@/components/shared/Header.vue";
+import AmpHeader from "@/components/shared/AmpHeader.vue";
 import { accountService } from "@/service/account-service";
 export default {
   name: "RegisterComponent",
   components: {
-    Header,
+    AmpHeader,
   },
   data: function() {
     return {
@@ -222,7 +222,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .form-errors {
   color: red;
   margin: 0% !important;

diff --git a/src/components/account/ResetPassword.vue b/src/components/account/ResetPassword.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="col-12">
-    <!-- <Header/> -->
+    <!-- <AmpHeader/> -->
     <main>
       <div class="container">
         <h1 class="text-center">
@@ -78,12 +78,12 @@
 </template>
 
 <script>
-import Header from "@/components/shared/Header.vue";
+import AmpHeader from "@/components/shared/AmpHeader.vue";
 import { accountService } from "@/service/account-service";
 export default {
   name: "ResetPasswordForm",
   components: {
-    Header,
+    AmpHeader,
   },
   data() {
     return {
@@ -179,7 +179,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .form-errors {
   color: red;
   margin: 0% !important;

diff --git a/src/components/batch/BatchIngest.vue b/src/components/batch/BatchIngest.vue
@@ -307,7 +307,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .main-margin-min {
   margin: 0.5em !important;
 }

diff --git a/src/components/collections/CollectionDetails.vue b/src/components/collections/CollectionDetails.vue
@@ -128,5 +128,5 @@ export default {
 };
 </script>
 <style scoped>
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 </style>
diff --git a/src/components/collections/CollectionDetailsItemCard.vue b/src/components/collections/CollectionDetailsItemCard.vue
@@ -188,5 +188,5 @@ export default {
 };
 </script>
 <style scoped>
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 </style>
diff --git a/src/components/collections/Collections.vue b/src/components/collections/Collections.vue
@@ -151,5 +151,5 @@ export default {
 </script>
 
 <style scoped>
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 </style>
diff --git a/src/components/dashboard/DashboardTable.vue b/src/components/dashboard/DashboardTable.vue
@@ -716,7 +716,7 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .no-results {
   text-align: center;
   font-weight: 700;

diff --git a/src/components/deliverables/Deliverables.vue b/src/components/deliverables/Deliverables.vue
@@ -459,7 +459,7 @@ export default {
 </script>
 
 <style scoped>
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .deliverables-search {
   cursor: pointer;
 }

diff --git a/src/components/entity/EntityList.vue b/src/components/entity/EntityList.vue
@@ -8,7 +8,7 @@
       <!-- <Sidebar /> -->
       <div class="col-12 bg-light-gray-1">
         <main :class="!unitEntity.currentUnit ? 'mb-3' : 'mb-5'">
-          <!-- Header - Details page -->
+          <!-- AmpHeader - Details page -->
 
           <b-card
             class="text-center mt-5 mb-3"
@@ -515,7 +515,7 @@
             </div>
           </b-card>
 
-          <!-- Header - Details page Ends here-->
+          <!-- AmpHeader - Details page Ends here-->
           <div
             v-if="
               baseUrl === 'item' &&
@@ -1524,7 +1524,7 @@ export default {
 </script>
 
 <style scoped>
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 
 .textArea {
   width: 100%;

diff --git a/src/components/entity/ItemSearch.vue b/src/components/entity/ItemSearch.vue
@@ -113,7 +113,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .item-search {
   width: calc(100% - 64px);
 }

diff --git a/src/components/evaluation/GroundTruthModal.vue b/src/components/evaluation/GroundTruthModal.vue
@@ -385,7 +385,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .body-m {
   min-height: 32rem;
 }

diff --git a/src/components/evaluation/MGMevaluation.vue b/src/components/evaluation/MGMevaluation.vue
@@ -248,7 +248,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 main {
   margin-top: 0px;
 }

diff --git a/src/components/evaluation/NewTest.vue b/src/components/evaluation/NewTest.vue
@@ -619,7 +619,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .new-test {
   padding-left: 15px;
 }

diff --git a/src/components/evaluation/TestResults.vue b/src/components/evaluation/TestResults.vue
@@ -147,7 +147,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .select-test {
   width: 33% !important;
 }