perf(#391): Merge Upstream changes

README.md

@@ -4,7 +4,7 @@
 MaterialsMine App
 
 ## :high_brightness: Installation
-Make sure to install [docker](https://docs.docker.com/get-docker/) on your machine first, then `git clone` the repo and run `cmd` below to instantiate or terminate the application.
+Make sure to install [docker](https://docs.docker.com/get-docker/) on your machine first, then `git clone` the repo and run commands below to instantiate or terminate the application.
 
 Windows OS: 
 - Be sure to run the Docker installer as an administrator
@@ -15,14 +15,30 @@ Windows OS:
 # :warning: ADVISORY :warning:
 > Before running the steps below, follow the steps [here](https://github.com/Duke-MatSci/materialsmine/blob/develop/resfulservice/misc/README.md) to retrieve and deploy required environment variables
 
+> *IMPORTANT NOTICE:* Install nvm. For windows PC click [windows](https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-windows#install-nvm-windows-nodejs-and-npm), for Mac `brew install nvm`
+
 ## :high_brightness: Testing
 To avoid testing failure, install nvm & copy the command below and run in the project root directory.
 
 ```bash
 npm i && cd app && npm i && cd ../resfulservice && npm i && cd ..
 ```
 
-## :high_brightness: Starting All Application Services
+## :high_brightness: Starting All Application Services Options 1
+Make sure nvm is installed with node >= v16.20.0 or run the command below to install the right node version:
+```bash
+ nvm install 16
+```
+Run the following command from the root directory:
+```bash
+ npm run dev:install
+```
+Run the following command to start the applications:
+```bash
+ npm run dev:start
+```
+
+## :high_brightness: Starting All Application Services Options 2
 Run the following command from the root directory:
 
 ```bash

app/.nvmrc

@@ -1 +1 @@
-16.18.1
+16.20.0

app/jest.config.js

@@ -12,6 +12,7 @@ module.exports = {
   ],
   moduleNameMapper: {
     d3: '<rootDir>/node_modules/d3/dist/d3.min.js',
+    prismjs: '<rootDir>/node_modules/prismjs/prism.js',
     'style-loader!(.*)': '<rootDir>/node_modules/style-loader'
   },
   setupFilesAfterEnv: ['<rootDir>/tests/jest/script/test-setup.js'],

app/src/assets/css/modules/_pages.scss

@@ -650,4 +650,27 @@
     .md-chip.md-theme-default .md-icon.md-icon-image svg{
         fill: $primary;
     }
+}
+
+.xmlLoader {
+    .md-app-side-drawer.md-app-container {
+        height: calc(100vh - 149px) !important;
+
+        @include respond(tab-port) {
+            height: calc(100vh - 139px) !important;
+        }
+        @include respond(phone) {
+            height: calc(100vh - 107px) !important;
+        }
+    }
+    .md-right {
+        z-index: 25;
+    }
+    .md-drawer {
+        width: 414px;
+        @include respond(phone) {
+            width: 100%;
+            max-width: 100%;
+        }
+    }
 }

app/src/assets/css/modules/_resetvuematerial.scss

@@ -214,4 +214,15 @@
     right: 0;
     left: 0;
     transform: translateY(-5rem);
+}
+
+.md-snackbar {
+    &.md-position-left{
+        &.md-snackbar-adjust{
+            min-width: auto;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+
 }

app/src/components/Snackbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <md-snackbar :md-position="position" :md-active.sync="show" :md-duration="!duration ? Infinity : duration">
+    <md-snackbar :md-position="position" :md-active.sync="show" :md-duration="!duration ? Infinity : duration" class="md-snackbar-adjust">
       {{message}}
       <span>
         <md-button v-if="action && !duration" id="snackbarAction" class="md-primary" @click.native="callAction">Retry</md-button>
@@ -17,7 +17,7 @@ export default {
     position: {
       type: String,
       required: false,
-      default: 'center'
+      default: 'left'
     }
   },
   data () {

app/src/components/explorer/Comment.vue

@@ -5,16 +5,20 @@
         <h4 class="md-title">Comments</h4>
       </div>
 
-      <div v-for="(item, i) in loadComment?.comments" :key="i" :class="[isUserMessage(item?.user?.displayName) ? 'md-alignment-bottom-right u--margin-left-auto' : 'md-alignment-top-left', 'md-layout-item md-size-60 md-small-size-70 md-xsmall-size-85 md-layout u_margin-top-med']">
-        <div v-if="!isUserMessage(item.user?.displayName)" class="u--margin-right-1"><md-icon>account_circle</md-icon></div>
+      <div v-for="(item, i) in optionalChaining(() => loadComment.comments)" :key="i"
+        :class="[isUserMessage(optionalChaining(() => item.user.displayName))
+          ? 'md-alignment-bottom-right u--margin-left-auto'
+          : 'md-alignment-top-left', 'md-layout-item md-size-85 md-layout u_margin-top-med']"
+      >
+        <div v-if="!isUserMessage(optionalChaining(() => item.user.displayName))" class="u--margin-right-1"><md-icon>account_circle</md-icon></div>
 
         <div style="padding: 1.6rem;border: 1px solid #A2A5A9;" :class="[isUserMessage(item.user?.displayName) && 'u--margin-right-1', 'md-layout-item u--b-rad']" >
           <p class="u--color-primary u--default-size">{{ item.user.givenName }} {{ item.user.surName }}</p>
           <p class="md-body-1">{{ item.comment }}</p>
           <p class="utility-align--right md-caption">{{ formatDate(item.createdAt) }}</p>
         </div>
 
-        <div v-if="isUserMessage(item.user?.displayName)"><md-icon>account_circle</md-icon></div>
+        <div v-if="isUserMessage(optionalChaining(() => item.user.displayName))"><md-icon>account_circle</md-icon></div>
       </div>
     </div>
 
@@ -34,8 +38,10 @@
 <script >
 import { mapGetters } from 'vuex'
 import { LOAD_COMMENTS, POST_COMMENT } from '@/modules/gql/comment-gql'
+import optionalChainingUtil from '@/mixins/optional-chaining-util'
 export default {
   name: 'Comments',
+  mixins: [optionalChainingUtil],
   props: {
     type: {
       type: String,

app/src/mixins/optional-chaining-util.js

@@ -0,0 +1,10 @@
+
+export default {
+  methods: {
+    optionalChaining (fn) {
+      try {
+        return fn()
+      } catch (e) { console.log(e) }
+    }
+  }
+}

app/src/pages/explorer/xml/XmlLoader.vue

@@ -1,20 +1,33 @@
 <template>
-  <div>
-    <section class="u_width--max" v-if="!!Object.keys(xmlViewer).length && xmlViewer.xmlString">
-      <div>
-        <h2 class="visualize_header-h1 u_margin-top-med u_centralize_text"> {{ xmlViewer.title }} </h2>
-      </div>
-      <!-- xml viewer  -->
-      <div class="wrapper">
-        <pre class="language-xml grid">
-          <code class="inlinecode language-xml keepMarkUp">
-            {{ xmlViewer.xmlString }}
-          </code>
-        </pre>
-      </div>
-      <comment :type="type" :identifier="xmlViewer?.id"></comment>
+  <div class="xmlLoader" >
+    <section class="u_width--max viz-u-postion__rel utility-roverflow" v-if="!!Object.keys(xmlViewer).length && xmlViewer.xmlString">
+      <md-drawer class="md-right" :class="{' md-fixed': showSidepanel}" :md-active.sync="showSidepanel">
+        <comment :type="type" :identifier="optionalChaining(() => xmlViewer.id)"></comment>
+        <md-button @click="showSidepanel = false" class="md-fab md-fixed md-dense md-fab-top-right md-primary btn--primary">
+            <md-icon>close</md-icon>
+        </md-button>
+      </md-drawer>
 
+      <md-content class="u_width--max md-app-side-drawer md-app-container md-scrollbar" >
+        <div>
+          <h2 class="visualize_header-h1 u_margin-top-med u_centralize_text"> {{ optionalChaining(() => xmlViewer.title) }} </h2>
+        </div>
+        <!-- xml viewer  -->
+        <div class="wrapper">
+          <pre class="language-xml grid">
+            <code class="inlinecode language-xml keepMarkUp">
+              {{ optionalChaining(() => xmlViewer.xmlString) }}
+            </code>
+          </pre>
+        </div>
+
+      </md-content>
+
+      <md-button @click="showSidepanel = true" class="md-fab md-fixed md-dense md-fab-bottom-right md-primary btn--primary">
+          <md-icon>comment</md-icon>
+      </md-button>
     </section>
+
     <section class="section_loader u--margin-toplg" v-else-if="$apollo.loading">
       <spinner :loading="$apollo.loading" text='Loading Xml'/>
     </section>
@@ -29,30 +42,27 @@ import Prism from 'prismjs'
 import 'prismjs/components/prism-xml-doc'
 import 'prismjs/components/prism-markup'
 import 'prismjs/themes/prism-coy.min.css'
+import optionalChainingUtil from '@/mixins/optional-chaining-util'
 import Comment from '@/components/explorer/Comment'
 import spinner from '@/components/Spinner'
 import { XML_VIEWER } from '@/modules/gql/xml-gql'
 export default {
   name: 'XmlVisualizer',
+  mixins: [optionalChainingUtil],
   components: {
     Comment,
     spinner
   },
   data () {
     return {
+      showSidepanel: false,
       type: 'xml',
       xmlViewer: {}
     }
   },
   mounted () {
     window.Prism = window.Prism || {}
     window.Prism.manual = true
-    // Prism.hooks.add('before-highlight', function (env) {
-    //   env.code = env.element.innerText
-    //   // env.code = env.code.replace(/&lt;/g, '<').replace(/&gt;/g, '>')
-    //   // env.code = env.code.replace(/&amp;/g, '&')
-    // })
-    // Prism.highlightElement('code[class*="language-"]')
     Prism.highlightAll()
   },
   apollo: {

app/tests/unit/components/snackbar.spec.js

@@ -52,4 +52,10 @@ describe('@/components/Snackbar.vue', () => {
     await action.trigger('click')
     expect(mockFn).toHaveBeenCalled()
   })
+
+  it('modifies the left position with a custom class', () => {
+    expect.assertions(2)
+    expect(wrapper.find('.md-snackbar-adjust').exists()).toBe(true)
+    expect(wrapper.vm.position).toBe('left')
+  })
 })

docker-compose.yml

@@ -91,6 +91,12 @@ services:
       - MM_AUTH_EMAIL_HEADER=${MM_AUTH_EMAIL_HEADER}
       - MM_AUTH_USER_HEADER=${MM_AUTH_USER_HEADER}
       - KNOWLEDGE_ADDRESS=${WHYIS_ADDRESS}
+      - TERM_OF_SERVICE=${TERM_OF_SERVICE}
+      - SWAGGER_CONTACT_NAME=${SWAGGER_CONTACT_NAME}
+      - SWAGGER_CONTACT_EMAIL=${SWAGGER_CONTACT_EMAIL}
+      - DEV_ENDPOINT=${DEV_ENDPOINT}
+      - QA_SERVER_ENDPOINT=${QA_SERVER_ENDPOINT}
+      - PROD_SERVER_ENDPOINT=${PROD_SERVER_ENDPOINT}
     ports:
       - '3001:3001'
   client:

install

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# Check if nvm is installed
+if [ ! -d "$HOME/.nvm" ]; then echo >&2 "nvm is required, but it's not installed. Aborting."; exit 1; fi
+# command -v nvm >/dev/null 2>&1 || { echo >&2 "nvm is required, but it's not installed. Aborting."; exit 1; }
+
+# Make NVM available for script use
+export NVM_DIR=$HOME/.nvm;
+source $NVM_DIR/nvm.sh;
+
+# Recieved terminal argument
+args=$1
+
+if [ "$args" == "re-install" ] ; then
+ yes | npm i && cd app && nvm use && npm i && cd ../resfulservice && nvm use && npm i && cd .. && docker compose up
+ echo "Completed '$args' successfully!"
+ exit
+elif [ "$args" == "install" ] ; then
+#  Compose V1 is no longer supported and will be removed from Docker Desktop in an upcoming release.
+#  See https://docs.docker.com/go/compose-v1-eol/
+ yes | rm -rf node_modules && npm i && cd app && rm -rf node_modules && nvm use && npm i && cd ../resfulservice && rm -rf node_modules && nvm use && npm i && cd .. && docker system prune -a && docker compose build
+ echo "Completed '$args' successfully!"
+ exit
+fi
+
+echo 'Did not understand args', "$args"

package.json

@@ -34,6 +34,10 @@
     "prepare": "husky install",
     "lint:frontend": "(cd app && npm run lint:test)",
     "lint:server": "(cd resfulservice && npm run lint:test)",
-    "test": "npm-run-all -s lint:frontend lint:server"
+    "test": "npm-run-all -s lint:frontend lint:server",
+    "dev:re-install": "./install re-install",
+    "dev:install": "./install install",
+    "dev:start": "docker compose up",
+    "dev:stop": "docker compose down -v"
   }
 }

resfulservice/.nvmrc

@@ -1 +1 @@
-16.18.1
+16.20.0

resfulservice/package.json

@@ -23,7 +23,6 @@
         "graphql-ws": "^5.8.2",
         "helmet": "^4.6.0",
         "jsonwebtoken": "^8.5.1",
-        "luxon": "^2.2.0",
         "mongodb": "^4.2.1",
         "mongoose": "^6.1.4",
         "morgan": "^1.10.0",
@@ -33,14 +32,15 @@
         "read-excel-file": "^5.6.1",
         "sinon": "^14.0.0",
         "ssh2": "^1.11.0",
-        "swagger-ui-express": "^4.2.0",
+        "swagger-ui-express": "^4.6.3",
         "ua-parser-js": "^1.0.33",
         "unique-names-generator": "^4.7.1",
         "winston": "^3.5.1",
         "ws": "^8.7.0",
         "xlsx": "^0.18.5",
         "xml-formatter": "^3.3.2",
-        "xml-js": "^1.6.11"
+        "xml-js": "^1.6.11",
+        "yamljs": "^0.3.0"
     },
     "scripts": {
         "start": "nodemon src/server.js --inspect",