[frontend] Migrate theme to typescript, fix all linting and unused va…

…riables
OpenBAS-Platform · Dec 6, 2023 · 9bb17b3 · 9bb17b3
1 parent 4c8020d
commit 9bb17b3
Show file tree

Hide file tree

Showing 137 changed files with 3,429 additions and 3,145 deletions.
diff --git a/.drone.yml b/.drone.yml
@@ -26,8 +26,9 @@ steps:
     commands:
       - cd openex-front
       - yarn install
-      - yarn lint
       - yarn build
+      - yarn check-ts
+      - yarn lint
       - NODE_OPTIONS=--max_old_space_size=8192 yarn test
 
 services:
@@ -70,8 +71,9 @@ steps:
     commands:
       - cd openex-front
       - yarn install
-      - yarn lint
       - yarn build
+      - yarn check-ts
+      - yarn lint
       - NODE_OPTIONS=--max_old_space_size=8192 yarn test
 
   - name: codecov

diff --git a/openex-front/package.json b/openex-front/package.json
@@ -14,6 +14,7 @@
     "@mui/lab": "5.0.0-alpha.155",
     "@mui/material": "5.14.20",
     "@mui/styles": "5.14.20",
+    "@mui/utils": "5.14.20",
     "@mui/x-date-pickers": "6.18.3",
     "@redux-devtools/extension": "3.2.6",
     "@uiw/react-md-editor": "4.0.1",
@@ -67,12 +68,14 @@
     "@eslint/eslintrc": "2.1.4",
     "@eslint/js": "8.55.0",
     "@stylistic/eslint-plugin": "1.5.0",
+    "@testing-library/react": "14.0.0",
     "@types/node": "20.10.3",
     "@types/react": "18.2.42",
     "@types/react-dom": "18.2.17",
     "@types/seamless-immutable": "7.1.19",
     "@typescript-eslint/eslint-plugin": "6.13.2",
     "@typescript-eslint/parser": "6.13.2",
+    "@vitejs/plugin-react": "4.1.0",
     "@vitejs/plugin-react-swc": "3.5.0",
     "chokidar": "3.5.3",
     "compression": "1.7.4",
@@ -96,7 +99,8 @@
     "jest-environment-jsdom": "29.7.0",
     "swagger-typescript-api": "13.0.3",
     "typescript": "5.3.2",
-    "vite": "5.0.6"
+    "vite": "5.0.6",
+    "vitest": "0.34.6"
   },
   "engines": {
     "node": ">= 16.*"
@@ -107,7 +111,8 @@
     "build": "node builder/prod/prod.js",
     "lint": "cross-env DEBUG=eslint:cli-engine TIMING=1 eslint --max-warnings 0 --cache -c .eslintrc.cjs src",
     "control": "yarn audit --groups dependencies --summary",
-    "test": "jest --coverage",
+    "test": "vitest run",
+    "check-ts": "tsc --noEmit",
     "generate-types-from-api": "swagger-typescript-api --no-client -p http://localhost:8080/api-docs -o src/utils -n api-types.d.ts --sort-types"
   },
   "resolutions": {

diff --git a/openex-front/src/__tests__/App.test.tsx b/openex-front/src/__tests__/App.test.tsx
@@ -1,12 +1,19 @@
 import React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from '../app';
+import { act, cleanup, render } from '@testing-library/react';
+import { describe, afterEach, it, expect } from 'vitest';
+import { StyledEngineProvider } from '@mui/material/styles';
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  if (div) {
-    const root = createRoot(div);
-    root.render(<App />);
-    root.unmount();
-  }
+describe('App', () => {
+  afterEach(cleanup);
+  it('renders without crashing', async () => {
+    const { getByDisplayValue } = render(
+      <StyledEngineProvider injectFirst={true}>
+        <input readOnly type="text" id="lastName" value="Admin" />
+      </StyledEngineProvider>,
+    );
+    act(() => {
+      const firstname = getByDisplayValue('Admin');
+      expect(firstname).toBeDefined();
+    });
+  });
 });
diff --git a/openex-front/src/__tests__/setup-relay-for-vitest.ts b/openex-front/src/__tests__/setup-relay-for-vitest.ts
@@ -0,0 +1,5 @@
+import { vi } from 'vitest';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+global.jest = vi;
diff --git a/openex-front/src/admin/components/challenges/ChallengeAddDocuments.js b/openex-front/src/admin/components/challenges/ChallengeAddDocuments.js
@@ -115,19 +115,19 @@ class ChallengeAddDocuments extends Component {
     const { keyword, documentsIds, tags } = this.state;
     const filterByKeyword = (n) => keyword === ''
       || (n.document_name || '').toLowerCase().indexOf(keyword.toLowerCase())
-      !== -1
+        !== -1
       || (n.document_description || '')
         .toLowerCase()
         .indexOf(keyword.toLowerCase()) !== -1
-        || (n.document_type || '').toLowerCase().indexOf(keyword.toLowerCase())
+      || (n.document_type || '').toLowerCase().indexOf(keyword.toLowerCase())
         !== -1;
     const filteredDocuments = R.pipe(
       R.filter(
         (n) => tags.length === 0
-        || R.any(
-          (filter) => R.includes(filter, n.document_tags),
-          R.pluck('id', tags),
-        ),
+          || R.any(
+            (filter) => R.includes(filter, n.document_tags),
+            R.pluck('id', tags),
+          ),
       ),
       R.filter(filterByKeyword),
       R.take(10),

diff --git a/openex-front/src/admin/components/challenges/ChallengeForm.js b/openex-front/src/admin/components/challenges/ChallengeForm.js
@@ -20,10 +20,10 @@ import {
 import { makeStyles } from '@mui/styles';
 import { useDispatch } from 'react-redux';
 import IconButton from '@mui/material/IconButton';
-import { TextField } from '../../../components/TextField';
+import TextField from '../../../components/TextField';
 import { useFormatter } from '../../../components/i18n';
-import { Select } from '../../../components/Select';
-import { MarkDownField } from '../../../components/MarkDownField';
+import Select from '../../../components/Select';
+import MarkDownField from '../../../components/MarkDownField';
 import DocumentType from '../documents/DocumentType';
 import ItemTags from '../../../components/ItemTags';
 import DocumentPopover from '../documents/DocumentPopover';
@@ -34,7 +34,7 @@ import { fetchDocuments } from '../../../actions/Document';
 import ChallengeAddDocuments from './ChallengeAddDocuments';
 import TagField from '../../../components/TagField';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   itemHead: {
     paddingLeft: 10,
     textTransform: 'uppercase',

diff --git a/openex-front/src/admin/components/challenges/Challenges.js b/openex-front/src/admin/components/challenges/Challenges.js
@@ -24,7 +24,7 @@ import ItemTags from '../../../components/ItemTags';
 import { fetchDocuments } from '../../../actions/Document';
 import { fetchExercises } from '../../../actions/Exercise';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   parameters: {
     marginTop: -10,
   },

diff --git a/openex-front/src/admin/components/documents/DocumentForm.js b/openex-front/src/admin/components/documents/DocumentForm.js
@@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types';
 import { Form } from 'react-final-form';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import { TextField } from '../../../components/TextField';
+import TextField from '../../../components/TextField';
 import inject18n from '../../../components/i18n';
 import TagField from '../../../components/TagField';
 import FileField from '../../../components/FileField';

diff --git a/openex-front/src/admin/components/documents/Documents.js b/openex-front/src/admin/components/documents/Documents.js
@@ -227,22 +227,22 @@ class Documents extends Component {
     const { keyword, sortBy, orderAsc, tags } = this.state;
     const filterByKeyword = (n) => keyword === ''
       || (n.document_name || '').toLowerCase().indexOf(keyword.toLowerCase())
-      !== -1
+        !== -1
       || (n.document_description || '')
         .toLowerCase()
         .indexOf(keyword.toLowerCase()) !== -1
-        || (n.document_type || '').toLowerCase().indexOf(keyword.toLowerCase())
+      || (n.document_type || '').toLowerCase().indexOf(keyword.toLowerCase())
         !== -1;
     const sort = R.sortWith(
       orderAsc ? [R.ascend(R.prop(sortBy))] : [R.descend(R.prop(sortBy))],
     );
     const sortedDocuments = R.pipe(
       R.filter(
         (n) => tags.length === 0
-        || R.any(
-          (filter) => R.includes(filter, n.document_tags),
-          R.pluck('id', tags),
-        ),
+          || R.any(
+            (filter) => R.includes(filter, n.document_tags),
+            R.pluck('id', tags),
+          ),
       ),
       R.filter(filterByKeyword),
       sort,

diff --git a/openex-front/src/admin/components/exercises/AnimationMenu.tsx b/openex-front/src/admin/components/exercises/AnimationMenu.tsx
@@ -23,7 +23,6 @@ const useStyles = makeStyles<Theme>((theme) => ({
     position: 'fixed',
     overflow: 'auto',
     padding: 0,
-    backgroundColor: theme.palette.background.navLight,
   },
   toolbar: theme.mixins.toolbar,
   item: {

diff --git a/openex-front/src/admin/components/exercises/DefinitionMenu.tsx b/openex-front/src/admin/components/exercises/DefinitionMenu.tsx
@@ -23,7 +23,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     position: 'fixed',
     overflow: 'auto',
     padding: 0,
-    backgroundColor: theme.palette.background.navLight,
   },
   toolbar: theme.mixins.toolbar,
   item: {

diff --git a/openex-front/src/admin/components/exercises/ExerciseDateForm.js b/openex-front/src/admin/components/exercises/ExerciseDateForm.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import * as PropTypes from 'prop-types';
 import { Form } from 'react-final-form';
 import Button from '@mui/material/Button';
-import { DateTimePicker } from '../../../components/DateTimePicker';
+import DateTimePicker from '../../../components/DateTimePicker';
 import inject18n from '../../../components/i18n';
 
 class ExerciseDateForm extends Component {

diff --git a/openex-front/src/admin/components/exercises/ExerciseForm.js b/openex-front/src/admin/components/exercises/ExerciseForm.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import * as PropTypes from 'prop-types';
 import { Form } from 'react-final-form';
 import Button from '@mui/material/Button';
-import { TextField } from '../../../components/TextField';
-import { DateTimePicker } from '../../../components/DateTimePicker';
+import TextField from '../../../components/TextField';
+import DateTimePicker from '../../../components/DateTimePicker';
 import inject18n from '../../../components/i18n';
 import TagField from '../../../components/TagField';
 

diff --git a/openex-front/src/admin/components/exercises/ExerciseParametersForm.js b/openex-front/src/admin/components/exercises/ExerciseParametersForm.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import * as PropTypes from 'prop-types';
 import { Form } from 'react-final-form';
 import Button from '@mui/material/Button';
-import { TextField } from '../../../components/TextField';
+import TextField from '../../../components/TextField';
 import inject18n from '../../../components/i18n';
 
 class ExerciseParametersForm extends Component {

diff --git a/openex-front/src/admin/components/exercises/Exercises.js b/openex-front/src/admin/components/exercises/Exercises.js
@@ -27,7 +27,7 @@ import useDataLoader from '../../../utils/ServerSideEvent';
 import useSearchAnFilter from '../../../utils/SortingFiltering';
 import { exportData } from '../../../utils/Environment';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   parameters: {
     marginTop: -10,
   },

diff --git a/openex-front/src/admin/components/exercises/ResultsMenu.tsx b/openex-front/src/admin/components/exercises/ResultsMenu.tsx
@@ -22,7 +22,6 @@ const useStyles = makeStyles<Theme>((theme) => ({
     position: 'fixed',
     overflow: 'auto',
     padding: 0,
-    backgroundColor: theme.palette.background.navLight,
   },
   toolbar: theme.mixins.toolbar,
   item: {

diff --git a/openex-front/src/admin/components/exercises/articles/ArticleAddDocuments.js b/openex-front/src/admin/components/exercises/articles/ArticleAddDocuments.js
@@ -124,19 +124,19 @@ class ArticleAddDocuments extends Component {
     const { keyword, documentsIds, tags } = this.state;
     const filterByKeyword = (n) => keyword === ''
       || (n.document_name || '').toLowerCase().indexOf(keyword.toLowerCase())
-      !== -1
+        !== -1
       || (n.document_description || '')
         .toLowerCase()
         .indexOf(keyword.toLowerCase()) !== -1
-        || (n.document_type || '').toLowerCase().indexOf(keyword.toLowerCase())
+      || (n.document_type || '').toLowerCase().indexOf(keyword.toLowerCase())
         !== -1;
     const filteredDocuments = R.pipe(
       R.filter(
         (n) => tags.length === 0
-        || R.any(
-          (filter) => R.includes(filter, n.document_tags),
-          R.pluck('id', tags),
-        ),
+          || R.any(
+            (filter) => R.includes(filter, n.document_tags),
+            R.pluck('id', tags),
+          ),
       ),
       R.filter(filterByKeyword),
     )(Object.values(documents));
@@ -153,7 +153,7 @@ class ArticleAddDocuments extends Component {
         10,
         filteredDocuments.filter(
           (d) => d.document_type.includes('image/')
-          || d.document_type.includes('video/'),
+            || d.document_type.includes('video/'),
         ),
       );
       filters = ['image/', 'video/'];

diff --git a/openex-front/src/admin/components/exercises/articles/ArticleForm.js b/openex-front/src/admin/components/exercises/articles/ArticleForm.js
@@ -18,21 +18,21 @@ import {
   ArrowDropUpOutlined,
 } from '@mui/icons-material';
 import { useFormatter } from '../../../../components/i18n';
-import { TextField } from '../../../../components/TextField';
-import { Autocomplete } from '../../../../components/Autocomplete';
+import TextField from '../../../../components/TextField';
+import Autocomplete from '../../../../components/Autocomplete';
 import { useHelper } from '../../../../store';
 import useDataLoader from '../../../../utils/ServerSideEvent';
 import { fetchMedias } from '../../../../actions/Media';
 import { fetchDocuments } from '../../../../actions/Document';
 import { fetchExercises } from '../../../../actions/Exercise';
 import MediaIcon from '../../medias/MediaIcon';
-import { MarkDownField } from '../../../../components/MarkDownField';
+import MarkDownField from '../../../../components/MarkDownField';
 import DocumentType from '../../documents/DocumentType';
 import ItemTags from '../../../../components/ItemTags';
 import DocumentPopover from '../../documents/DocumentPopover';
 import ArticleAddDocuments from './ArticleAddDocuments';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   icon: {
     paddingTop: 4,
     display: 'inline-block',

diff --git a/openex-front/src/admin/components/exercises/articles/Articles.js b/openex-front/src/admin/components/exercises/articles/Articles.js
@@ -99,7 +99,7 @@ const Articles = () => {
   }));
   const sortedArticles = R.filter(
     (n) => medias.length === 0
-    || medias.map((o) => o.id).includes(n.article_fullmedia.media_id),
+      || medias.map((o) => o.id).includes(n.article_fullmedia.media_id),
     filtering.filterAndSort(fullArticles),
   );
   const mediaColor = (type) => {

diff --git a/openex-front/src/admin/components/exercises/audiences/AudienceAddPlayers.js b/openex-front/src/admin/components/exercises/audiences/AudienceAddPlayers.js
@@ -129,19 +129,19 @@ class AudienceAddPlayers extends Component {
     const { keyword, usersIds, tags } = this.state;
     const filterByKeyword = (n) => keyword === ''
       || (n.user_email || '').toLowerCase().indexOf(keyword.toLowerCase())
-      !== -1
+        !== -1
       || (n.user_firstname || '').toLowerCase().indexOf(keyword.toLowerCase())
-      !== -1
+        !== -1
       || (n.user_lastname || '').toLowerCase().indexOf(keyword.toLowerCase())
-      !== -1
+        !== -1
       || (n.user_phone || '').toLowerCase().indexOf(keyword.toLowerCase())
-      !== -1
+        !== -1
       || (n.organization_name || '')
         .toLowerCase()
         .indexOf(keyword.toLowerCase()) !== -1
-        || (n.organization_description || '')
-          .toLowerCase()
-          .indexOf(keyword.toLowerCase()) !== -1;
+      || (n.organization_description || '')
+        .toLowerCase()
+        .indexOf(keyword.toLowerCase()) !== -1;
     const filteredUsers = R.pipe(
       R.map((u) => ({
         organization_name:
@@ -153,10 +153,10 @@ class AudienceAddPlayers extends Component {
       })),
       R.filter(
         (n) => tags.length === 0
-        || R.any(
-          (filter) => R.includes(filter, n.user_tags),
-          R.pluck('id', tags),
-        ),
+          || R.any(
+            (filter) => R.includes(filter, n.user_tags),
+            R.pluck('id', tags),
+          ),
       ),
       R.filter(filterByKeyword),
       R.take(10),

diff --git a/openex-front/src/admin/components/exercises/audiences/AudienceForm.js b/openex-front/src/admin/components/exercises/audiences/AudienceForm.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import * as PropTypes from 'prop-types';
 import { Form } from 'react-final-form';
 import Button from '@mui/material/Button';
-import { TextField } from '../../../../components/TextField';
+import TextField from '../../../../components/TextField';
 import inject18n from '../../../../components/i18n';
 import TagField from '../../../../components/TagField';