Merge pull request #4439 from mendersoftware/master

staging alignment

Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=$BUILDPLATFORM node:22.1.0-alpine AS base
+FROM --platform=$BUILDPLATFORM node:22.2.0-alpine AS base
 WORKDIR /usr/src/app
 COPY package-lock.json package.json ./
 RUN npm ci
@@ -25,7 +25,7 @@ HEALTHCHECK --interval=8s --timeout=15s --start-period=120s --retries=128 CMD wg
 CMD ["nginx"]
 
 
-FROM nginx:1.26.0-alpine AS production
+FROM nginx:1.27.0-alpine AS production
 EXPOSE 8080
 WORKDIR /var/www/mender-gui/dist
 ARG GIT_COMMIT_TAG

package.json

@@ -7,14 +7,14 @@
     "@emotion/styled": "11.11.5",
     "@mdi/js": "7.4.47",
     "@monaco-editor/react": "4.6.0",
-    "@mui/icons-material": "5.15.17",
-    "@mui/material": "5.15.17",
-    "@mui/x-date-pickers": "7.4.0",
+    "@mui/icons-material": "5.15.19",
+    "@mui/material": "5.15.19",
+    "@mui/x-date-pickers": "7.6.1",
     "@redux-devtools/extension": "3.3.0",
-    "@reduxjs/toolkit": "2.2.4",
+    "@reduxjs/toolkit": "2.2.5",
     "@stripe/react-stripe-js": "2.7.1",
-    "@stripe/stripe-js": "3.4.0",
-    "axios": "1.6.8",
+    "@stripe/stripe-js": "3.4.1",
+    "axios": "1.7.2",
     "copy-to-clipboard": "3.3.3",
     "generate-password": "1.7.1",
     "jwt-decode": "4.0.0",
@@ -31,7 +31,7 @@
     "react-dropzone": "14.2.3",
     "react-ga4": "2.1.0",
     "react-google-recaptcha": "3.1.0",
-    "react-hook-form": "7.51.4",
+    "react-hook-form": "7.51.5",
     "react-idle-timer": "5.7.2",
     "react-linkify": "1.0.0-alpha",
     "react-redux": "9.1.2",
@@ -49,21 +49,21 @@
     "zxcvbn": "4.4.2"
   },
   "devDependencies": {
-    "@babel/core": "7.24.5",
-    "@babel/eslint-parser": "7.24.5",
+    "@babel/core": "7.24.6",
+    "@babel/eslint-parser": "7.24.6",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-runtime": "7.24.3",
-    "@babel/preset-env": "7.24.5",
-    "@babel/preset-react": "7.24.1",
+    "@babel/plugin-transform-runtime": "7.24.6",
+    "@babel/preset-env": "7.24.6",
+    "@babel/preset-react": "7.24.6",
     "@emotion/jest": "11.11.0",
     "@svgr/webpack": "8.1.0",
     "@testing-library/dom": "10.1.0",
     "@testing-library/jest-dom": "6.4.5",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "14.5.2",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
-    "@typescript-eslint/eslint-plugin": "7.9.0",
-    "@typescript-eslint/parser": "7.9.0",
+    "@typescript-eslint/eslint-plugin": "7.11.0",
+    "@typescript-eslint/parser": "7.11.0",
     "assert": "2.1.0",
     "autoprefixer": "10.4.19",
     "babel-jest": "~29.7.0",
@@ -73,15 +73,15 @@
     "copy-webpack-plugin": "12.0.2",
     "core-js": "3.37.1",
     "crypto-browserify": "3.12.0",
-    "css-loader": "7.1.1",
+    "css-loader": "7.1.2",
     "esbuild-loader": "4.1.0",
     "eslint": "8.57.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-react": "7.34.1",
+    "eslint-plugin-react": "7.34.2",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-sonarjs": "1.0.3",
-    "eslint-webpack-plugin": "4.1.0",
+    "eslint-webpack-plugin": "4.2.0",
     "file-loader": "6.2.0",
     "html-webpack-plugin": "5.6.0",
     "husky": "9.0.11",
@@ -93,7 +93,7 @@
     "jsdom-worker": "0.3.0",
     "less": "4.2.0",
     "less-loader": "12.2.0",
-    "lint-staged": "15.2.2",
+    "lint-staged": "15.2.5",
     "mini-css-extract-plugin": "2.9.0",
     "msw": "2.3.0",
     "postcss": "8.4.38",

src/js/actions/organizationActions.js

@@ -26,9 +26,10 @@ import {
   RECEIVE_SSO_CONFIGS,
   RECEIVE_WEBHOOK_EVENTS,
   SET_AUDITLOG_STATE,
-  SET_ORGANIZATION
+  SET_ORGANIZATION,
+  SSO_TYPES
 } from '../constants/organizationConstants';
-import { deepCompare, getSsoByContentType } from '../helpers';
+import { deepCompare } from '../helpers';
 import { getCurrentSession, getTenantCapabilities } from '../selectors';
 import { commonErrorFallback, commonErrorHandler, setFirstLoginAfterSignup, setSnackbar } from './appActions';
 import { deviceAuthV2, iotManagerBaseURL } from './deviceActions';
@@ -319,17 +320,15 @@ const getSsoConfigById = config => dispatch =>
   Api.get(`${ssoIdpApiUrlv1}/${config.id}`)
     .catch(err => dispatch(ssoConfigActionErrorHandler(err, 'read')))
     .then(({ data, headers }) => {
-      const sso = getSsoByContentType(headers['content-type']);
-      return sso ? Promise.resolve({ ...config, config: data, type: sso.id }) : Promise.reject('Not supported SSO config content type.');
+      const sso = Object.values(SSO_TYPES).find(({ contentType }) => contentType === headers['content-type']);
+      return sso ? Promise.resolve({ ...config, config: data, type: sso.id }) : Promise.reject('Unsupported SSO config content type.');
     });
 
 export const getSsoConfigs = () => dispatch =>
   Api.get(ssoIdpApiUrlv1)
     .catch(err => commonErrorHandler(err, 'There was an error retrieving SSO configurations', dispatch, commonErrorFallback))
     .then(({ data }) =>
       Promise.all(data.map(config => Promise.resolve(dispatch(getSsoConfigById(config)))))
-        .then(configs => {
-          return dispatch({ type: RECEIVE_SSO_CONFIGS, value: configs });
-        })
+        .then(configs => dispatch({ type: RECEIVE_SSO_CONFIGS, value: configs }))
         .catch(err => commonErrorHandler(err, err, dispatch, ''))
     );

src/js/actions/userActions.js

@@ -20,9 +20,9 @@ import GeneralApi, { apiRoot } from '../api/general-api';
 import UsersApi from '../api/users-api';
 import { cleanUp, maxSessionAge, setSessionInfo } from '../auth';
 import { HELPTOOLTIPS } from '../components/helptips/helptooltips';
-import { getSsoStartUrlById } from '../components/settings/organization/ssoconfig.js';
 import * as AppConstants from '../constants/appConstants';
 import { APPLICATION_JSON_CONTENT_TYPE, APPLICATION_JWT_CONTENT_TYPE } from '../constants/appConstants';
+import { SSO_TYPES } from '../constants/organizationConstants.js';
 import { ALL_RELEASES } from '../constants/releaseConstants.js';
 import * as UserConstants from '../constants/userConstants';
 import { duplicateFilter, extractErrorMessage, isEmpty, preformatWithRequestID } from '../helpers';
@@ -81,8 +81,9 @@ export const loginUser = (userData, stayLoggedIn) => dispatch =>
       // If the content type is application/json then backend returned SSO configuration.
       // user should be redirected to the start sso url to finish login process.
       if (contentType.includes(APPLICATION_JSON_CONTENT_TYPE)) {
-        const { id } = response;
-        const ssoLoginUrl = getSsoStartUrlById(id);
+        const { id, kind } = response;
+        const type = kind.split('/')[1];
+        const ssoLoginUrl = SSO_TYPES[type].getStartUrl(id);
         window.location.replace(ssoLoginUrl);
         return;
       }

src/js/actions/userActions.test.js

@@ -19,7 +19,6 @@ import Cookies from 'universal-cookie';
 import { inventoryDevice } from '../../../tests/__mocks__/deviceHandlers';
 import { accessTokens, defaultPassword, defaultState, receivedPermissionSets, receivedRoles, testSsoId, token, userId } from '../../../tests/mockData';
 import { HELPTOOLTIPS } from '../components/helptips/helptooltips';
-import { getSsoStartUrlById } from '../components/settings/organization/ssoconfig.js';
 import {
   SET_ANNOUNCEMENT,
   SET_ENVIRONMENT_DATA,
@@ -54,7 +53,7 @@ import {
   UNGROUPED_GROUP
 } from '../constants/deviceConstants';
 import { SET_DEMO_ARTIFACT_PORT, SET_ONBOARDING_COMPLETE } from '../constants/onboardingConstants';
-import { RECEIVE_EXTERNAL_DEVICE_INTEGRATIONS } from '../constants/organizationConstants';
+import { RECEIVE_EXTERNAL_DEVICE_INTEGRATIONS, getSamlStartUrl } from '../constants/organizationConstants';
 import { RECEIVE_RELEASES, SET_RELEASES_LIST_STATE } from '../constants/releaseConstants';
 import {
   CREATED_ROLE,
@@ -507,7 +506,7 @@ describe('user actions', () => {
       jest.runOnlyPendingTimers();
       jest.runAllTicks();
     });
-    expect(replaceSpy).toHaveBeenCalledWith(getSsoStartUrlById(testSsoId));
+    expect(replaceSpy).toHaveBeenCalledWith(getSamlStartUrl(testSsoId));
   });
   it('should prevent logging in with a limited user', async () => {
     jest.clearAllMocks();

src/js/components/auditlogs/__snapshots__/auditlogs.test.js.snap

@@ -49,7 +49,7 @@ exports[`Auditlogs Component renders correctly 1`] = `
             By user
           </h5>
           <div
-            class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon css-clttge-MuiAutocomplete-root"
+            class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon css-1j0qgw8-MuiAutocomplete-root"
             name="user"
           >
             <div
@@ -111,7 +111,7 @@ exports[`Auditlogs Component renders correctly 1`] = `
             Change type
           </h5>
           <div
-            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
+            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1j0qgw8-MuiAutocomplete-root"
             name="type"
           >
             <div
@@ -171,7 +171,7 @@ exports[`Auditlogs Component renders correctly 1`] = `
             class="margin-top-small margin-bottom-none muted"
           />
           <div
-            class="MuiAutocomplete-root css-clttge-MuiAutocomplete-root"
+            class="MuiAutocomplete-root css-1j0qgw8-MuiAutocomplete-root"
             name="detail"
           >
             <div

src/js/components/common/dialogs/__snapshots__/log.test.js.snap

@@ -80,7 +80,7 @@ exports[`LogDialog Component renders correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   max-height: calc(100% - 64px);
-  max-width: 600px;
+  max-width: 1200px;
 }
 
 @media print {
@@ -90,7 +90,7 @@ exports[`LogDialog Component renders correctly 1`] = `
   }
 }
 
-@media (max-width:663.95px) {
+@media (max-width:1263.95px) {
   .emotion-3.MuiDialog-paperScrollBody {
     max-width: calc(100% - 64px);
   }
@@ -375,7 +375,7 @@ exports[`LogDialog Component renders correctly 1`] = `
   >
     <div
       aria-labelledby=":r0:"
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm emotion-3"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthLg emotion-3"
       role="dialog"
     >
       <h2

src/js/components/common/dialogs/__snapshots__/physicaldeviceonboarding.test.js.snap

@@ -1,28 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PhysicalDeviceOnboarding Component renders correctly 1`] = `
-.emotion-0.Mui-focused .MuiAutocomplete-clearIndicator {
-  visibility: visible;
-}
-
-@media (pointer: fine) {
-  .emotion-0:hover .MuiAutocomplete-clearIndicator {
-    visibility: visible;
-  }
-}
-
 .emotion-0 .MuiAutocomplete-tag {
   margin: 3px;
   max-width: calc(100% - 6px);
 }
 
-.emotion-0 .MuiAutocomplete-inputRoot {
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
 .MuiAutocomplete-hasPopupIcon.emotion-0 .MuiAutocomplete-inputRoot,
 .MuiAutocomplete-hasClearIcon.emotion-0 .MuiAutocomplete-inputRoot {
   padding-right: 30px;
@@ -37,6 +20,24 @@ exports[`PhysicalDeviceOnboarding Component renders correctly 1`] = `
   min-width: 30px;
 }
 
+.emotion-0.Mui-focused .MuiAutocomplete-clearIndicator {
+  visibility: visible;
+}
+
+.emotion-0.Mui-focused .MuiAutocomplete-input {
+  min-width: 0;
+}
+
+@media (pointer: fine) {
+  .emotion-0:hover .MuiAutocomplete-clearIndicator {
+    visibility: visible;
+  }
+
+  .emotion-0:hover .MuiAutocomplete-input {
+    min-width: 0;
+  }
+}
+
 .emotion-0 .MuiInput-root {
   padding-bottom: 1px;
 }
@@ -662,28 +663,11 @@ exports[`PhysicalDeviceOnboarding Component tiny onboarding tips renders Convert
 `;
 
 exports[`PhysicalDeviceOnboarding Component tiny onboarding tips renders DeviceTypeSelectionStep correctly 1`] = `
-.emotion-0.Mui-focused .MuiAutocomplete-clearIndicator {
-  visibility: visible;
-}
-
-@media (pointer: fine) {
-  .emotion-0:hover .MuiAutocomplete-clearIndicator {
-    visibility: visible;
-  }
-}
-
 .emotion-0 .MuiAutocomplete-tag {
   margin: 3px;
   max-width: calc(100% - 6px);
 }
 
-.emotion-0 .MuiAutocomplete-inputRoot {
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
 .MuiAutocomplete-hasPopupIcon.emotion-0 .MuiAutocomplete-inputRoot,
 .MuiAutocomplete-hasClearIcon.emotion-0 .MuiAutocomplete-inputRoot {
   padding-right: 30px;
@@ -698,6 +682,24 @@ exports[`PhysicalDeviceOnboarding Component tiny onboarding tips renders DeviceT
   min-width: 30px;
 }
 
+.emotion-0.Mui-focused .MuiAutocomplete-clearIndicator {
+  visibility: visible;
+}
+
+.emotion-0.Mui-focused .MuiAutocomplete-input {
+  min-width: 0;
+}
+
+@media (pointer: fine) {
+  .emotion-0:hover .MuiAutocomplete-clearIndicator {
+    visibility: visible;
+  }
+
+  .emotion-0:hover .MuiAutocomplete-input {
+    min-width: 0;
+  }
+}
+
 .emotion-0 .MuiInput-root {
   padding-bottom: 1px;
 }

src/js/components/common/dialogs/log.js

@@ -16,35 +16,29 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
 
+import { createFileDownload } from '../../../helpers';
 import { Code } from '../copy-code';
 
 const wrapperStyle = { marginRight: 10, display: 'inline-block' };
 
 const dialogTypes = {
   'deviceLog': {
     title: 'Deployment log for device',
-    filename: 'deviceLog'
+    filename: ({ device, releaseName, date }) => `deployment-log-${device}-${releaseName}-${date}.log`
   },
   'configUpdateLog': {
     title: 'Config update log for device',
-    filename: 'updateLog'
-  },
-  'monitorLog': {
-    title: 'Alert log for device',
-    filename: 'monitorLog'
+    filename: () => 'configuration-update.log'
   }
 };
 
-export const LogDialog = ({ logData = '', onClose, type = 'deviceLog' }) => {
+export const LogDialog = ({ context = {}, logData = '', onClose, type = 'deviceLog' }) => {
   const [copied, setCopied] = useState(false);
 
-  const exportLog = () => {
-    const uriContent = `data:application/octet-stream,${encodeURIComponent(logData)}`;
-    window.open(uriContent, dialogTypes[type].filename);
-  };
+  const exportLog = () => createFileDownload(logData, dialogTypes[type].filename(context), '');
 
   return (
-    <Dialog open={true}>
+    <Dialog open={true} maxWidth="lg">
       <DialogTitle>{dialogTypes[type].title}</DialogTitle>
       <DialogContent>
         <Code className="log">{logData}</Code>