MMT-3252: Updates to use node v18

Author: Christopher Gokey

.nvmrc

@@ -1 +1 @@
-lts/gallium
+lts/hydrogen

Dockerfile

@@ -1,23 +1,20 @@
-#This image provides the ability to run Ruby/RSpec tests against a Clojure app.
-# To build:
-# sudo docker build --rm --force-rm --tag=$(basename $(pwd)) .
-
-FROM centos:centos7
-
+FROM centos:centos8
 USER root
-# Get java, epel, whatnot
-RUN yum install -y epel-release centos-release-scl-rh llvm-toolset-7-clang \
- && yum --enablerepo=updates clean metadata \
- && yum install -y bzip2 \
-    		   chromedriver \
-                   cmake \
-                  https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm \
-		  https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm \
-                   git \
-                   gcc \
-                   gcc-c++ \
-                   ImageMagick \
-		   java-11-openjdk-headless.x86_64 \
+RUN cd /etc/yum.repos.d/
+RUN sed -i 's/mirrorlist/#mirrorlist/g' /etc/yum.repos.d/CentOS-*
+RUN sed -i 's|#baseurl=http://mirror.centos.org|baseurl=http://vault.centos.org|g' /etc/yum.repos.d/CentOS-*
+RUN yum install -y epel-release
+#RUN yum install -y centos-release-scl-rh
+#RUN yum install -y llvm-toolset-7-clang
+#&& yum --enablerepo=updates clean metadata \
+RUN yum install -y bzip2
+RUN yum install -y cmake
+RUN yum install -y https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm
+RUN yum install -y chromedriver
+RUN yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm
+RUN yum install -y git gcc gcc-c++
+RUN yum install -y ImageMagick 
+RUN yum install -y java-11-openjdk-headless.x86_64 \
                    liberation-fonts \
                    libffi-devel \
                    libicu-devel \
@@ -29,13 +26,12 @@ RUN yum install -y epel-release centos-release-scl-rh llvm-toolset-7-clang \
                    tar \
                    which \
                    xorg-x11-server-Xvfb \
-                   docker \
- && yum clean all
-# && freshclam
-
-RUN curl -sL https://rpm.nodesource.com/setup_16.x | bash -
+                   docker
+RUN curl -fsSL https://rpm.nodesource.com/setup_18.x | bash -
+RUN curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | tee /etc/yum.repos.d/yarn.repo
+RUN yum install -y gcc-c++ make
 RUN yum install -y nodejs && yum clean all
-RUN npm install --global yarn
+RUN yum install -y yarn
 
 ENV JAVA_HOME /etc/alternatives/jre
 
@@ -51,15 +47,19 @@ RUN curl -OL https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.2.tar.gz \
  && cd / \
  && rm -fr ruby-2.7.2
 
+RUN dnf -y install https://download.postgresql.org/pub/repos/yum/reporpms/EL-8-x86_64/pgdg-redhat-repo-latest.noarch.rpm
+RUN dnf -y module -y disable postgresql
+RUN dnf clean all
 ENV PATH /usr/pgsql-11/bin:$PATH
 RUN gem install bundler 
 RUN groupadd -g 500 bamboo
 RUN useradd --gid bamboo --create-home --uid 500 bamboo
-RUN yum install -y postgresql11-devel
+RUN dnf install -y perl
+RUN dnf --enablerepo=powertools install perl-IPC-Run -y
+RUN dnf install -y postgresql11-devel
 
 USER bamboo
 WORKDIR /build
 ENV HOME /home/bamboo
 ENV PATH /home/bamboo/.gem/ruby/2.7.2/bin:/opt/google/chrome/:$PATH
-RUN gem install rspec --version=3.9 --user-install
-USER root
+RUN gem install rspec --version=3.9 --user-install

app/javascript/components/editor/App.tsx

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react'
 import MetadataEditor from './MetadataEditor'
 import DetailedProgressView from './components/progress/DetailedProgressView'
 import MetadataEditorForm from './components/MetadataEditorForm'
+import DeleteDraftView from './components/deleteView/DeleteDraftView'
 
 type AppProps = {
   editor: MetadataEditor;
@@ -23,6 +24,7 @@ class App extends React.Component<AppProps, never> {
           <Route path={`/${editor.model.documentType}/:id/edit/:sectionName/:fieldName`} element={<MetadataEditorForm editor={editor} {...this.props} />} />
           <Route path={`/${editor.model.documentType}/:id/edit/:sectionName/:fieldName/:index`} element={<MetadataEditorForm editor={editor} {...this.props} />} />
           <Route path={`/${editor.model.documentType}/new`} element={<MetadataEditorForm editor={editor} {...this.props} />} />
+          <Route path={`/${editor.model.documentType}/deleteDraftView`} element={<DeleteDraftView editor={editor} {...this.props} />} />
           <Route path="/" element={<MetadataEditorForm editor={editor} {...this.props} />} />
         </Routes>
       </BrowserRouter>

app/javascript/components/editor/MetadataEditor.tsx

@@ -200,6 +200,10 @@ export default class MetadataEditor {
     return this.service.publishDraft(draft)
   }
 
+  async deleteDraft(draft: Draft): Promise<Draft> {
+    return this.service.deleteDraft(draft)
+  }
+
   async fetchKmsKeywords(keywordScheme: string): Promise<object> {
     return this.service.fetchKmsKeywords(keywordScheme)
   }

app/javascript/components/editor/components/NavigationView.tsx

@@ -78,22 +78,21 @@ class NavigationView extends React.Component<NavigationViewProps, NavigationView
 
   saveDraftAndPreview() {
     const {
-      editor
+      editor, router
     } = this.props
+    const { navigate } = router
     const {
       draft
     } = editor
     this.setState({ saving: true }, () => {
       editor.saveDraft(draft).then((draft) => {
         editor.draft = draft
         this.setState({ saving: false })
-        // this will be needed to redirect to the preview page which is rendered by rails
-        setTimeout(() => {
+        if (editor.documentType === 'variable_drafts') {
           window.location.href = `/${editor.documentType}/${draft.apiId}`
-        }, 50)
-        // } else {
-        // navigate(`/${editor.documentType}/${draft.apiId}`, { replace: false })
-        // }
+        } else {
+          navigate(`/${editor.documentType}/${draft.apiId}`, { replace: false })
+        }
       }).catch((error) => {
         editor.status = new Status('warning', `error saving draft! ${error.message}`)
         this.setState({ saving: false })

app/javascript/components/editor/components/__tests__/NavigationView.test.js

@@ -16,16 +16,6 @@ global.fetch = require('jest-fetch-mock')
 
 global.scroll = jest.fn()
 
-// Window.location doesn't work in jest, so we need to mock its value.
-global.window = Object.create(window)
-const url = 'http://dummy.com'
-Object.defineProperty(window, 'location', {
-  value: {
-    href: url
-  },
-  writable: true
-})
-
 async function mockFetch(url) {
   switch (url) {
     case '/api/providers/MMT_1/tool_drafts': {
@@ -88,6 +78,7 @@ describe('Navigation View Component', () => {
   })
 
   beforeAll(() => jest.spyOn(window, 'fetch'))
+  Window.prototype.metadataPreview = jest.fn()
 
   test('renders the navigation view', async () => {
     const model = new UmmToolsModel()
@@ -166,11 +157,7 @@ describe('Navigation View Component', () => {
     await act(async () => {
       saveAndPreviewButton.click()
     })
-    // Need to skip this test temorary because we are redirecting to the detailed progress view
-    // in order to render the MMT tool preview along with the details progress view.
-    // The redirect does not work properly in the test.
-    // Once we build a new preview this test can be included again.
-    // expect(screen.getByText('Metadata Fields')).toBeInTheDocument()
+    expect(screen.getByText('Metadata Fields')).toBeInTheDocument()
     expect(container).toMatchSnapshot()
   })