feat: upgraded to node v18, added .nvmrc and updated workflows (#471)

* feat: upgraded to node v18, added .nvmrc and updated workflows

* refactor: updated packages

* refactor: resolved eslint issues

.github/workflows/ci.yml

@@ -9,18 +9,17 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [16]
     steps:
     - name: Checkout
       uses: actions/checkout@v2
       with:
         fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
       uses: actions/setup-node@v2
       with:
-        node-version: ${{ matrix.node }}
+        node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.nvmrc

@@ -1 +1 @@
-16
+18

package.json

@@ -34,9 +34,9 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "11.2.0",
-    "@edx/frontend-component-header": "3.2.0",
-    "@edx/frontend-platform": "2.6.1",
+    "@edx/frontend-component-footer": "12.0.0",
+    "@edx/frontend-component-header": "4.0.3",
+    "@edx/frontend-platform": "4.4.0",
     "@edx/paragon": "20.15.0",
     "@reduxjs/toolkit": "1.8.0",
     "@tinymce/tinymce-react": "3.13.1",
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.1.0",
-    "@edx/frontend-build": "11.0.1",
+    "@edx/frontend-build": "12.8.27",
     "@edx/reactifex": "1.0.3",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.4",

src/discussions/common/ActionsDropdown.jsx

@@ -75,7 +75,7 @@ function ActionsDropdown({
           placement="bottom-end"
         >
           <div
-            className="bg-white p-1 shadow d-flex flex-column"
+            className="bg-white shadow d-flex flex-column"
             data-testid="actions-dropdown-modal-popup"
           >
             {actions.map(action => (
@@ -91,9 +91,15 @@ function ActionsDropdown({
                     close();
                     handleActions(action.action);
                   }}
-                  className="d-flex justify-content-start py-1.5 mr-4"
+                  className="d-flex justify-content-start actions-dropdown-item"
                 >
-                  <Icon src={action.icon} className="mr-1" /> {intl.formatMessage(action.label)}
+                  <Icon
+                    src={action.icon}
+                    className="icon-size-24"
+                  />
+                  <span className="font-weight-normal font-xl ml-2">
+                    {intl.formatMessage(action.label)}
+                  </span>
                 </Dropdown.Item>
               </React.Fragment>
             ))}

src/discussions/empty-posts/EmptyPosts.jsx

@@ -8,6 +8,7 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { useIsOnDesktop } from '../data/hooks';
 import { selectAreThreadsFiltered, selectPostThreadCount } from '../data/selectors';
 import messages from '../messages';
+// eslint-disable-next-line import/no-cycle
 import { messages as postMessages, showPostEditor } from '../posts';
 import EmptyPage from './EmptyPage';
 

src/discussions/empty-posts/EmptyTopics.jsx

@@ -9,6 +9,7 @@ import { ALL_ROUTES } from '../../data/constants';
 import { useIsOnDesktop, useTotalTopicThreadCount } from '../data/hooks';
 import { selectTopicThreadCount } from '../data/selectors';
 import messages from '../messages';
+// eslint-disable-next-line import/no-cycle
 import { messages as postMessages, showPostEditor } from '../posts';
 import EmptyPage from './EmptyPage';
 

src/discussions/empty-posts/index.js

@@ -1,4 +1,5 @@
 export { default as EmptyLearners } from './EmptyLearners';
 export { default as EmptyPage } from './EmptyPage';
+// eslint-disable-next-line import/no-cycle
 export { default as EmptyPosts } from './EmptyPosts';
 export { default as EmptyTopics } from './EmptyTopics';

src/discussions/posts/index.js

@@ -2,5 +2,6 @@
 export { showPostEditor } from './data';
 export { default as Post } from './post/Post';
 export { default as messages } from './post-actions-bar/messages';
+// eslint-disable-next-line import/no-cycle
 export { default as PostEditor } from './post-editor/PostEditor';
 export { default as PostsView } from './PostsView';

src/discussions/posts/post-editor/PostEditor.jsx

@@ -34,6 +34,7 @@ import {
   selectUserIsGroupTa,
   selectUserIsStaff,
 } from '../../data/selectors';
+// eslint-disable-next-line import/no-cycle
 import { EmptyPage } from '../../empty-posts';
 import {
   selectArchivedTopics,

src/index.scss

@@ -502,3 +502,19 @@ header {
     padding-left: 1rem;
   }
 }
+
+.icon-size-24 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.actions-dropdown-item {
+  padding: 12px 16px;
+  height: 48px;
+  width: 304px;
+}
+
+.font-xl {
+  font-size: 18px;
+  line-height: 28px;
+}