Merge pull request astarte-platform#406 from davidebriani/update-depe…

…ndencies Update dependencies
davidebriani · Feb 7, 2024 · b97d08a · b97d08a
2 parents 5f15321 + 8002a84
commit b97d08a
Show file tree

Hide file tree

Showing 20 changed files with 1,731 additions and 1,618 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,6 +1,5 @@
 {
   "extends": ["react-app", "plugin:cypress/recommended", "prettier"],
-  "plugins": ["prettier"],
   "settings": {
     "import/resolver": {
       "node": {
@@ -29,7 +28,6 @@
     "jsx-a11y/no-static-element-interactions": "off",
     "no-case-declarations": "off",
     "no-param-reassign": ["error", { "props": true, "ignorePropertyModificationsFor": ["state"] }],
-    "prettier/prettier": "error",
     "react/jsx-filename-extension": [
       2,
       {

diff --git a/cypress/e2e/device_page.cy.js b/cypress/e2e/device_page.cy.js
@@ -748,7 +748,7 @@ describe('Device page tests', () => {
             cy.contains(formatBytes(totalBytes));
             cy.contains(totalMessages);
           });
-          cy.get('canvas[class^="chart"]').scrollIntoView().should('be.visible');
+          cy.get('canvas[role="img"]').scrollIntoView().should('be.visible');
         });
     });
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,66 +41,66 @@
   },
   "devDependencies": {
     "cypress": "^12.16.0",
-    "prettier": "^2.7.1"
+    "prettier": "^3.2.5"
   },
   "dependencies": {
     "@emotion/core": "^11.0.0",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@fortawesome/fontawesome-free": "^5.15.2",
-    "@projectstorm/react-canvas-core": "^6.7.4",
-    "@projectstorm/react-diagrams": "^6.7.4",
-    "@reduxjs/toolkit": "^1.9.0",
-    "@rjsf/bootstrap-4": "^2.4.2",
-    "@rjsf/core": "^2.4.2",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/color": "^3.0.3",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@projectstorm/react-canvas-core": "^7.0.2",
+    "@projectstorm/react-diagrams": "^7.0.3",
+    "@reduxjs/toolkit": "^2.1.0",
+    "@rjsf/bootstrap-4": "^5.17.0",
+    "@rjsf/core": "^5.17.0",
+    "@rjsf/validator-ajv8": "^5.17.0",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/color": "^3.0.6",
     "@types/jsrsasign": "^10.5.12",
-    "@types/lodash": "^4.14.188",
-    "@types/phoenix": "^1.5.4",
-    "@types/react": "^17.0.3",
-    "@types/react-datepicker": "^3.1.2",
-    "@types/react-dom": "^17.0.2",
-    "@types/react-redux": "^7.1.24",
-    "@types/react-syntax-highlighter": "^13.5.0",
-    "@types/uuid": "^8.3.4",
+    "@types/lodash": "^4.14.202",
+    "@types/phoenix": "^1.6.4",
+    "@types/react": "^18.2.55",
+    "@types/react-datepicker": "^4.19.6",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-redux": "^7.1.33",
+    "@types/react-syntax-highlighter": "^15.5.11",
+    "@types/uuid": "^9.0.8",
     "@types/yup": "^0.29.11",
     "@vitejs/plugin-react": "^4.2.1",
-    "ajv": "^6.12.6",
-    "axios": "^0.21.1",
+    "ajv": "^8.12.0",
+    "axios": "^1.6.7",
     "bootstrap": "^4.6.0",
-    "chart.js": "^2.9.4",
+    "chart.js": "^4.4.1",
     "closest": "^0.0.1",
-    "color": "^3.1.3",
+    "color": "^4.2.3",
     "dagre": "^0.8.5",
-    "dayjs": "^1.11.6",
-    "eslint-config-prettier": "^7.2.0",
+    "dayjs": "^1.11.10",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-testing-library": "^6.2.0",
     "history": "^5.3.0",
     "jsdom": "^24.0.0",
-    "jsrsasign": "^11.0.0",
+    "jsrsasign": "^11.1.0",
     "lodash": "^4.17.21",
-    "mock-socket": "^9.1.5",
+    "mock-socket": "^9.3.1",
     "pathfinding": "^0.4.18",
     "paths-js": "^0.4.11",
-    "phoenix": "^1.6.15",
-    "react": "^17.0.1",
+    "phoenix": "^1.7.11",
+    "react": "^18.2.0",
     "react-bootstrap": "^1.5.0",
-    "react-chartjs-2": "^2.11.1",
-    "react-datepicker": "^3.4.1",
-    "react-dom": "^17.0.1",
-    "react-redux": "^7.2.2",
-    "react-router-dom": "^6.4.3",
+    "react-chartjs-2": "^5.2.0",
+    "react-datepicker": "^6.1.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^9.1.0",
+    "react-router-dom": "^6.22.0",
     "react-syntax-highlighter": "^15.5.0",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.56.1",
+    "sass": "^1.70.0",
     "typescript": "^5.3.3",
-    "uuid": "^8.3.2",
+    "uuid": "^9.0.1",
     "vite": "^5.0.12",
     "vite-plugin-eslint": "^1.8.1",
     "vite-tsconfig-paths": "^4.3.1",

diff --git a/src/AstarteManager.tsx b/src/AstarteManager.tsx
@@ -1,7 +1,7 @@
 /*
    This file is part of Astarte.
 
-   Copyright 2020-2021 Ispirata Srl
+   Copyright 2020-2024 SECO Mind Srl
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
@@ -143,10 +143,13 @@ const AstarteProvider = ({
       if (!realm || !token) {
         return false;
       }
+      if (session?.authUrl === authUrl && session.realm === realm && session.token === token) {
+        return true;
+      }
       updateSession({ realm, token, authUrl });
       return true;
     },
-    [updateSession],
+    [session, updateSession],
   );
 
   const logout = useCallback(() => updateSession(null), [updateSession]);

diff --git a/src/DeviceStatusPage/NewAttributeModal.tsx b/src/DeviceStatusPage/NewAttributeModal.tsx
@@ -1,7 +1,7 @@
 /*
    This file is part of Astarte.
 
-   Copyright 2020 Ispirata Srl
+   Copyright 2020-2024 SECO Mind Srl
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
@@ -22,12 +22,12 @@ import FormModal from '../components/modals/Form';
 
 interface AttributeKeyValue {
   key: string;
-  value?: string;
+  value: string;
 }
 
 const attributeFormSchema: JSONSchema7 = {
   type: 'object',
-  required: ['key'],
+  required: ['key', 'value'],
   properties: {
     key: {
       title: 'Key',

diff --git a/src/DeviceStatusPage/index.tsx b/src/DeviceStatusPage/index.tsx
@@ -1,7 +1,7 @@
 /*
    This file is part of Astarte.
 
-   Copyright 2020-2021 Ispirata Srl
+   Copyright 2020-2024 SECO Mind Srl
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
@@ -152,7 +152,7 @@ type PageModal =
   | ReregisterDeviceModalT
   | DeleteDeviceModalT;
 
-export default (): React.ReactElement => {
+const DeviceStatusPage = (): React.ReactElement => {
   const { deviceId = '' } = useParams();
   const astarte = useAstarte();
   const navigate = useNavigate();
@@ -176,7 +176,7 @@ export default (): React.ReactElement => {
   }, []);
 
   const inhibitDeviceCredentialsRequests = useCallback(
-    (inhibit) => {
+    (inhibit: boolean) => {
       astarte.client
         .inhibitDeviceCredentialsRequests(deviceId, inhibit)
         .then(() => {
@@ -217,7 +217,7 @@ export default (): React.ReactElement => {
   }, [astarte.client, deviceId, dismissModal, devicePageAlersController, navigate]);
 
   const addDeviceToGroup = useCallback(
-    (groupName) => {
+    (groupName: string) => {
       astarte.client
         .addDeviceToGroup({
           groupName,
@@ -236,7 +236,7 @@ export default (): React.ReactElement => {
   );
 
   const handleAliasUpdate = useCallback(
-    (key, value) => {
+    (key: string, value: string) => {
       astarte.client
         .insertDeviceAlias(deviceId, key, value)
         .then(() => {
@@ -252,7 +252,7 @@ export default (): React.ReactElement => {
   );
 
   const handleAliasDeletion = useCallback(
-    (key) => {
+    (key: string) => {
       astarte.client
         .deleteDeviceAlias(deviceId, key)
         .then(() => {
@@ -268,7 +268,7 @@ export default (): React.ReactElement => {
   );
 
   const handleAttributeUpdate = useCallback(
-    (key, value) => {
+    (key: string, value: string) => {
       astarte.client
         .insertDeviceAttribute(deviceId, key, value)
         .then(() => {
@@ -284,7 +284,7 @@ export default (): React.ReactElement => {
   );
 
   const handleAttributeDeletion = useCallback(
-    (key) => {
+    (key: string) => {
       astarte.client
         .deleteDeviceAttribute(deviceId, key)
         .then(() => {
@@ -561,3 +561,5 @@ export default (): React.ReactElement => {
     </Container>
   );
 };
+
+export default DeviceStatusPage;
diff --git a/src/HomePage.tsx b/src/HomePage.tsx
@@ -2,7 +2,7 @@
    This file is part of Astarte.
 
    Copyright 2020-2021 Ispirata Srl
-   Copyright 2022 SECO Mind Srl
+   Copyright 2022-2024 SECO Mind Srl
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
@@ -309,7 +309,7 @@ const TriggersCard = ({
   </Card>
 );
 
-export default (): React.ReactElement => {
+const HomePage = (): React.ReactElement => {
   const astarte = useAstarte();
   const config = useConfig();
   const devicesStats = useFetch(astarte.client.getDevicesStats);
@@ -318,7 +318,7 @@ export default (): React.ReactElement => {
   const appEngineHealth = useFetch(astarte.client.getAppengineHealth);
   const realmManagementHealth = useFetch(astarte.client.getRealmManagementHealth);
   const pairingHealth = useFetch(astarte.client.getPairingHealth);
-  const flowHealth = config.features.flow ? useFetch(astarte.client.getFlowHealth) : null;
+  const flowHealth = useFetch(config.features.flow ? astarte.client.getFlowHealth : async () => {});
   const navigate = useNavigate();
 
   const connectedDevicesProvider = useMemo(
@@ -333,7 +333,7 @@ export default (): React.ReactElement => {
     appEngineHealth.refresh();
     realmManagementHealth.refresh();
     pairingHealth.refresh();
-    if (config.features.flow && flowHealth) {
+    if (config.features.flow) {
       flowHealth.refresh();
     }
   };
@@ -348,7 +348,7 @@ export default (): React.ReactElement => {
     };
   }, [astarte.client]);
 
-  const redirectToLastInterface = useCallback((e, interfaceName) => {
+  const redirectToLastInterface = useCallback((e: React.SyntheticEvent, interfaceName: string) => {
     e.preventDefault();
     astarte.client.getInterfaceMajors(interfaceName).then((interfaceMajors) => {
       const latestMajor = Math.max(...interfaceMajors);
@@ -370,7 +370,7 @@ export default (): React.ReactElement => {
             realmManagement={realmManagementHealth.status}
             pairing={pairingHealth.status}
             showFlowStatus={config.features.flow}
-            flow={flowHealth ? flowHealth.status : null}
+            flow={config.features.flow ? flowHealth.status : null}
           />
         </Col>
         <WaitForData data={devicesStats.value} status={devicesStats.status}>
@@ -409,3 +409,5 @@ export default (): React.ReactElement => {
     </Container>
   );
 };
+
+export default HomePage;
diff --git a/src/NewPipelinePage.tsx b/src/NewPipelinePage.tsx
@@ -1,7 +1,7 @@
 /*
    This file is part of Astarte.
 
-   Copyright 2020-2021 Ispirata Srl
+   Copyright 2020-2024 SECO Mind Srl
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
@@ -20,7 +20,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button, Form, Spinner } from 'react-bootstrap';
 import Ajv from 'ajv';
-import metaSchemaDraft04 from 'ajv/lib/refs/json-schema-draft-04.json';
 import { AstartePipeline } from 'astarte-client';
 import type { AstarteBlock } from 'astarte-client';
 import _ from 'lodash';
@@ -32,8 +31,7 @@ import VisualFlowEditor, { getNewModel, nodeModelToSource } from './components/V
 import type NativeBlockModel from './models/NativeBlockModel';
 import SingleCardPage from './ui/SingleCardPage';
 
-const ajv = new Ajv({ schemaId: 'id' });
-ajv.addMetaSchema(metaSchemaDraft04);
+const ajv = new Ajv();
 
 interface CommandRowProps {
   className?: string;
@@ -44,7 +42,7 @@ const CommandRow = ({ className = '', children }: CommandRowProps): React.ReactE
   <div className={['d-flex flex-row-reverse', className].join(' ')}>{children}</div>
 );
 
-export default (): React.ReactElement => {
+const NewPipelinePage = (): React.ReactElement => {
   const [editorModel] = useState(getNewModel());
   const [isCreatingPipeline, setIsCreatingPipeline] = useState(false);
   const [blocks, setBlocks] = useState<AstarteBlock[]>([]);
@@ -60,9 +58,13 @@ export default (): React.ReactElement => {
   const navigate = useNavigate();
 
   useEffect(() => {
+    let mounted = true;
     astarte.client
       .getBlocks()
       .then((astarteBlocks) => {
+        if (!mounted) {
+          return;
+        }
         const containerBlock = astarteBlocks.find(
           (block) => block.name === 'container' && block.type === 'producer_consumer',
         );
@@ -80,8 +82,13 @@ export default (): React.ReactElement => {
         }
       })
       .catch((error) => {
-        formAlertsController.showError(`Couldn't retrieve block descriptions: ${error.message}`);
+        mounted &&
+          formAlertsController.showError(`Couldn't retrieve block descriptions: ${error.message}`);
       });
+
+    return () => {
+      mounted = false;
+    };
   }, [astarte.client, formAlertsController]);
 
   const schemaObject = useMemo(() => {
@@ -261,3 +268,5 @@ export default (): React.ReactElement => {
     </SingleCardPage>
   );
 };
+
+export default NewPipelinePage;