Imrpove UI loading

.yarnrc.yml

@@ -1,3 +1,5 @@
+compressionLevel: mixed
+
 enableGlobalCache: true
 
 httpTimeout: 300000
@@ -6,8 +8,4 @@ nodeLinker: node-modules
 
 npmRegistryServer: 'https://registry.npmjs.org/'
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: '@yarnpkg/plugin-workspace-tools'
-
-yarnPath: .yarn/releases/yarn-3.2.3.cjs
+yarnPath: .yarn/releases/yarn-4.9.2.cjs

backstage.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.37.1"
+  "version": "1.40.1"
 }

package.json

@@ -31,9 +31,9 @@
     ]
   },
   "devDependencies": {
-    "@backstage/cli": "^0.31.1",
+    "@backstage/cli": "^0.33.0",
     "@backstage/e2e-test-utils": "^0.1.1",
-    "@backstage/repo-tools": "^0.13.1",
+    "@backstage/repo-tools": "^0.14.0",
     "@playwright/test": "^1.32.3",
     "@spotify/eslint-plugin": "^15.0.0",
     "@spotify/prettier-config": "^15.0.0",
@@ -70,10 +70,10 @@
     ]
   },
   "dependencies": {
-    "@backstage/catalog-model": "^1.7.3",
-    "@backstage/plugin-catalog-react": "^1.16.0",
+    "@backstage/catalog-model": "^1.7.4",
+    "@backstage/plugin-catalog-react": "^1.19.0",
     "@hookform/resolvers": "^3.3.2",
     "react-redux": "^9.1.0"
   },
-  "packageManager": "yarn@3.2.3"
+  "packageManager": "yarn@4.9.2"
 }

packages/app/package.json

@@ -14,16 +14,16 @@
     "lint": "backstage-cli package lint"
   },
   "dependencies": {
-    "@backstage/app-defaults": "^1.6.0",
-    "@backstage/catalog-model": "^1.7.3",
-    "@backstage/cli": "^0.31.1",
-    "@backstage/core-app-api": "^1.16.0",
-    "@backstage/core-components": "^0.17.0",
-    "@backstage/core-plugin-api": "^1.10.5",
-    "@backstage/integration-react": "^1.2.5",
+    "@backstage/app-defaults": "^1.6.3",
+    "@backstage/catalog-model": "^1.7.4",
+    "@backstage/cli": "^0.33.0",
+    "@backstage/core-app-api": "^1.17.1",
+    "@backstage/core-components": "^0.17.3",
+    "@backstage/core-plugin-api": "^1.10.8",
+    "@backstage/integration-react": "^1.2.8",
     "@backstage/plugin-devtools": "^0.1.28",
-    "@backstage/plugin-permission-react": "^0.4.32",
-    "@backstage/theme": "^0.6.4",
+    "@backstage/plugin-permission-react": "^0.4.35",
+    "@backstage/theme": "^0.6.6",
     "@electrolux-oss/plugin-infrawallet": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.3",
@@ -35,7 +35,7 @@
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/test-utils": "^1.7.6",
+    "@backstage/test-utils": "^1.7.9",
     "@playwright/test": "^1.32.3",
     "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^6.0.0",

packages/app/src/App.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { render, waitFor } from '@testing-library/react';
+import { default as React } from 'react';
 import App from './App';
 
 describe('App', () => {

packages/app/src/App.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
-import { Navigate, Route } from 'react-router-dom';
-import { apis } from './apis';
-import { Root } from './components/Root';
-
 import { createApp } from '@backstage/app-defaults';
 import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
 import { AlertDisplay, OAuthRequestDialog, SignInPage } from '@backstage/core-components';
 import { DevToolsPage } from '@backstage/plugin-devtools';
 import { InfraWalletPage } from '@electrolux-oss/plugin-infrawallet';
+import { default as React } from 'react';
+import { Navigate, Route } from 'react-router-dom';
+import { apis } from './apis';
+import { Root } from './components/Root';
 
 const app = createApp({
   apis,

packages/app/src/components/Root/LogoFull.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { makeStyles } from '@material-ui/core';
+import { default as React } from 'react';
 
 const useStyles = makeStyles({
   svg: {

packages/app/src/components/Root/LogoIcon.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { makeStyles } from '@material-ui/core';
+import { default as React } from 'react';
 
 const useStyles = makeStyles({
   svg: {

packages/app/src/components/Root/Root.tsx

@@ -11,7 +11,7 @@ import {
 import { InfraWalletIcon } from '@electrolux-oss/plugin-infrawallet';
 import { makeStyles } from '@material-ui/core';
 import BuildIcon from '@material-ui/icons/Build';
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren, default as React } from 'react';
 import LogoFull from './LogoFull';
 import LogoIcon from './LogoIcon';
 

packages/app/src/index.tsx

@@ -1,5 +1,5 @@
 import '@backstage/cli/asset-types';
-import React from 'react';
+import { default as React } from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 

packages/backend/package.json

@@ -15,19 +15,19 @@
     "clean": "backstage-cli package clean"
   },
   "dependencies": {
-    "@backstage/backend-defaults": "^0.8.2",
+    "@backstage/backend-defaults": "^0.11.0",
     "@backstage/backend-tasks": "^0.6.1",
     "@backstage/config": "^1.3.2",
-    "@backstage/plugin-app-backend": "^0.5.0",
-    "@backstage/plugin-auth-backend": "^0.24.4",
-    "@backstage/plugin-auth-backend-module-github-provider": "^0.3.1",
-    "@backstage/plugin-auth-backend-module-guest-provider": "^0.2.6",
-    "@backstage/plugin-auth-node": "^0.6.1",
+    "@backstage/plugin-app-backend": "^0.5.3",
+    "@backstage/plugin-auth-backend": "^0.25.1",
+    "@backstage/plugin-auth-backend-module-github-provider": "^0.3.4",
+    "@backstage/plugin-auth-backend-module-guest-provider": "^0.2.9",
+    "@backstage/plugin-auth-node": "^0.6.4",
     "@backstage/plugin-devtools-backend": "^0.5.6",
-    "@backstage/plugin-permission-backend": "^0.5.55",
-    "@backstage/plugin-permission-backend-module-allow-all-policy": "^0.2.6",
-    "@backstage/plugin-permission-common": "^0.8.4",
-    "@backstage/plugin-permission-node": "^0.9.0",
+    "@backstage/plugin-permission-backend": "^0.7.1",
+    "@backstage/plugin-permission-backend-module-allow-all-policy": "^0.2.9",
+    "@backstage/plugin-permission-common": "^0.9.0",
+    "@backstage/plugin-permission-node": "^0.10.1",
     "@electrolux-oss/plugin-infrawallet-backend": "workspace:^",
     "app": "link:../app",
     "better-sqlite3": "^9.0.0",
@@ -36,7 +36,7 @@
     "winston": "^3.2.1"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.31.1",
+    "@backstage/cli": "^0.33.0",
     "@types/express": "^4.17.6",
     "@types/express-serve-static-core": "^4.17.5"
   },

plugins/infrawallet-backend/package.json

@@ -45,8 +45,8 @@
     "@azure/arm-costmanagement": "1.0.0-beta.1",
     "@azure/core-rest-pipeline": "1.17.0",
     "@azure/identity": "4.5.0",
-    "@backstage/backend-defaults": "^0.8.2",
-    "@backstage/backend-plugin-api": "^1.2.1",
+    "@backstage/backend-defaults": "^0.11.0",
+    "@backstage/backend-plugin-api": "^1.4.0",
     "@backstage/config": "^1.3.2",
     "@backstage/types": "^1.2.1",
     "@datadog/datadog-api-client": "^1.29.0",
@@ -65,9 +65,9 @@
     "zod": "^3.24.2"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.31.1",
-    "@backstage/plugin-auth-backend": "^0.24.4",
-    "@backstage/plugin-auth-backend-module-guest-provider": "^0.2.6",
+    "@backstage/cli": "^0.33.0",
+    "@backstage/plugin-auth-backend": "^0.25.1",
+    "@backstage/plugin-auth-backend-module-guest-provider": "^0.2.9",
     "@types/supertest": "^2.0.8",
     "knex": "^3.1.0",
     "msw": "^1.0.0",

plugins/infrawallet/dev/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { infraWalletPlugin, InfraWalletPage } from '../src/plugin';
+import { default as React } from 'react';
+import { InfraWalletPage, infraWalletPlugin } from '../src/plugin';
 
 createDevApp()
   .registerPlugin(infraWalletPlugin)

plugins/infrawallet/package.json

@@ -38,12 +38,12 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/catalog-model": "^1.7.3",
+    "@backstage/catalog-model": "^1.7.4",
     "@backstage/config": "^1.3.2",
-    "@backstage/core-components": "^0.17.0",
-    "@backstage/core-plugin-api": "^1.10.5",
-    "@backstage/plugin-catalog-react": "^1.16.0",
-    "@backstage/theme": "^0.6.4",
+    "@backstage/core-components": "^0.17.3",
+    "@backstage/core-plugin-api": "^1.10.8",
+    "@backstage/plugin-catalog-react": "^1.19.0",
+    "@backstage/theme": "^0.6.6",
     "@mui/icons-material": "6.1.1",
     "@mui/material": "^5.16.7",
     "@mui/styles": "^5.16.7",
@@ -62,10 +62,10 @@
     "uuid": "10.0.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.31.1",
-    "@backstage/core-app-api": "^1.16.0",
-    "@backstage/dev-utils": "^1.1.8",
-    "@backstage/test-utils": "^1.7.6",
+    "@backstage/cli": "^0.33.0",
+    "@backstage/core-app-api": "^1.17.1",
+    "@backstage/dev-utils": "^1.1.11",
+    "@backstage/test-utils": "^1.7.9",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",

plugins/infrawallet/src/components/Budgets/Budgets.tsx

@@ -32,13 +32,13 @@ import {
 } from '@mui/x-charts';
 import { max } from 'lodash';
 import moment from 'moment';
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import { FC, default as React, useCallback, useEffect, useState } from 'react';
 import { aggregateCostReports, formatCurrency, mergeCostReports } from '../../api/functions';
 import { infraWalletApiRef } from '../../api/InfraWalletApi';
 import { Budget, Report } from '../../api/types';
 import { colorList } from '../constants';
-import { BudgetsProps } from '../types';
 import { ProviderIcon } from '../ProviderIcon';
+import { BudgetsProps } from '../types';
 
 const enum BUDGET_VIEW {
   MONTHLY = 'Monthly',

plugins/infrawallet/src/components/ColumnsChartComponent/ColumnsChartComponent.tsx

@@ -15,7 +15,7 @@ import {
   MarkPlot,
   ResponsiveChartContainer,
 } from '@mui/x-charts';
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import { FC, default as React, useCallback, useEffect, useState } from 'react';
 import { formatCurrency } from '../../api/functions';
 import { colorList } from '../constants';
 import { ColumnsChartComponentProps } from '../types';

plugins/infrawallet/src/components/CostReportsTableComponent/CostReportsTableComponent.tsx

@@ -2,7 +2,7 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
 import { DataGrid, GridColDef, GridColumnGroupingModel, GridRenderCellParams } from '@mui/x-data-grid';
-import React, { FC } from 'react';
+import { FC, default as React } from 'react';
 import { extractAccountInfo, formatCurrency, getPreviousDay, getPreviousMonth } from '../../api/functions';
 import { ProviderIcon } from '../ProviderIcon';
 import { CostReportsTableComponentProps } from '../types';

plugins/infrawallet/src/components/CustomCostsComponent/BulkInsertButton.tsx

@@ -22,7 +22,7 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import moment from 'moment';
-import * as React from 'react';
+import { default as React } from 'react';
 import { infraWalletApiRef } from '../../api/InfraWalletApi';
 import { CustomCost } from '../../api/types';