Yarnv4

.github/workflows/build.yaml

@@ -39,11 +39,13 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'yarn'
-      - run: yarn install --frozen-lockfile --ignore-scripts
+      - name: Enable corepack
+        run: corepack enable
+      - run: yarn install --immutable
       - run: yarn lint
       - run: yarn build:backend
       - run: yarn run test:report # This adds test results as github check to the workflow
@@ -56,4 +58,4 @@ jobs:
         if: (success() || failure()) && github.ref == 'refs/heads/main'
         with:
           name: test-results
-          path: ./reports/jest-junit.xml
+          path: ./reports/jest-junit.xml

.github/workflows/build_coverage.yaml

@@ -35,10 +35,12 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18.x
           cache: 'yarn'
+      - name: Enable corepack
+        run: corepack enable
       - run: yarn
       - run: yarn build:frontend:if-needed
       - run: yarn run test:coverage

.github/workflows/build_frontend_prs.yml

@@ -17,10 +17,13 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - run: yarn --frozen-lockfile
+          cache: 'yarn'
+      - name: Enable corepack
+        run: corepack enable
+      - run: yarn --immutable
       - run: yarn run lint:check
+      - run: yarn run ts:check # run typescript checks before tests. Tests are slower
       - run: yarn run test
-      - run: yarn run ts:check # TODO: optimize

.github/workflows/build_prs_jest_report.yaml

@@ -33,10 +33,12 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js 18.x
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18.x
           cache: 'yarn'
+      - name: Enable corepack
+        run: corepack enable
       - name: Tests on 18.x
         id: coverage
         uses: ArtiomTr/jest-coverage-report-action@v2

.github/workflows/gradual-strict-null-checks.yml

@@ -28,13 +28,15 @@ jobs:
           ref: ${{ env.MAIN_BRANCH }}
           path: main
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18.x
           cache: 'yarn'
           cache-dependency-path: |
             current/yarn.lock
             main/yarn.lock
+      - name: Enable corepack
+        run: corepack enable
       - name: Compare errors if enabling strictNullChecks
         env:
           URL: ${{ github.event.pull_request.comments_url }}
@@ -50,9 +52,9 @@ jobs:
           YARN_1="yarn --mutex network --cwd ./current"
           YARN_2="yarn --mutex network --cwd ./main"
 
-          $YARN_1 install --ignore-scripts &> /dev/null && $YARN_1 build:backend --strictNullChecks true 2> .stderr-current > .out-current &
+          $YARN_1 install  &> /dev/null && $YARN_1 build:backend --strictNullChecks true 2> .stderr-current > .out-current &
           pid1=$!
-          $YARN_2 install --ignore-scripts &> /dev/null && $YARN_2 build:backend --strictNullChecks true 2> .stderr-main > .out-main &
+          $YARN_2 install  &> /dev/null && $YARN_2 build:backend --strictNullChecks true 2> .stderr-main > .out-main &
           pid2=$!
 
           # wait for the processes that are expected to fail

.github/workflows/notify_enterprise.yaml

@@ -48,7 +48,7 @@ jobs:
       - name: Build static assets
         run: |
           cd frontend
-          yarn install --frozen-lockfile
+          yarn install --immutable
           yarn build
       - uses: aws-actions/configure-aws-credentials@v2
         with:

.github/workflows/publish-new-version.yaml

@@ -33,10 +33,12 @@ jobs:
           git config user.name "GitHub Actions Bot"
           git config user.email "<>"
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'yarn'
+      - name: Enable corepack
+        run: corepack enable
       - if: ${{ endsWith(github.event.inputs.version, '0') }}
         run: |
           PREV_COMMIT=$(git rev-list --tags --max-count=1)
@@ -51,10 +53,10 @@ jobs:
         run: |
           git-cliff ${PREV}..HEAD --tag v${{ github.event.inputs.version }} --prepend CHANGELOG.md
           git commit -am "docs: Update CHANGELOG.md"
-      - run: yarn install --frozen-lockfile --ignore-scripts
+      - run: yarn install --immutable
       - name: npm version
         run: |
-          npm version ${{ github.event.inputs.version }} --ignore-scripts
+          npm version ${{ github.event.inputs.version }}
           git push origin ${{ github.ref_name }}
           git push --tags
         env:

.github/workflows/release.yaml

@@ -15,14 +15,16 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Setup to npm
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18.x
           registry-url: 'https://registry.npmjs.org'
           cache: 'yarn'
+      - name: Enable corepack
+        run: corepack enable
       - name: Build
         run: |
-          yarn install --frozen-lockfile
+          yarn install --immutable
       - name: Publish to npm
         run: |
           LATEST=$(npm show unleash-server version)

.github/workflows/update_contributors.yaml

@@ -11,9 +11,11 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js 18.x
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18.x
+      - name: Enable corepack
+        run: corepack enable
       - uses: actions/checkout@master
         with:
           repository: sighphyre/svg-contributors

.github/workflows/validate-migrations.yaml

@@ -16,10 +16,12 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js 18.x
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
             node-version: 18.x
             cache: 'yarn'
+      - name: Enable corepack
+        run: corepack enable
       - name: Start database
         working-directory: test-migrations
         run: docker compose up db -d --wait -t 90
@@ -32,7 +34,7 @@ jobs:
             DATABASE_URL: postgres://postgres:unleash@localhost:5432/unleash
             DATABASE_SSL: false
         run: |
-          yarn install --frozen-lockfile --ignore-scripts
+          yarn install --immutable
           yarn db-migrate up
       # run ui tests against previous version of Unleash
       - name: Run Cypress

.gitignore

@@ -61,3 +61,10 @@ website/docs/reference/api/**/sidebar.js
 website/docs/reference/api/**/**.info.mdx
 website/docs/generated
 reports/jest-junit.xml
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -0,0 +1,5 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.0.2.cjs
+
+enableGlobalCache: false

frontend/.gitignore

@@ -53,3 +53,10 @@ cypress/videos/*
 cypress/downloads/*
 cypress/screenshots/*
 .env.local
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

frontend/package.json

@@ -2,7 +2,10 @@
   "name": "unleash-frontend-local",
   "version": "0.0.0",
   "private": true,
-  "files": ["index.js", "build"],
+  "files": [
+    "index.js",
+    "build"
+  ],
   "engines": {
     "node": ">=18"
   },
@@ -114,22 +117,14 @@
     "vanilla-jsoneditor": "^0.21.0",
     "vite": "5.0.10",
     "vite-plugin-env-compatible": "2.0.1",
-    "vite-plugin-svgr": "3.3.0",
+    "vite-plugin-svgr": "4.2.0",
     "vite-tsconfig-paths": "4.2.3",
     "vitest": "1.1.2",
     "whatwg-fetch": "3.6.20"
   },
   "optionalDependencies": {
     "orval": "^6.17.0"
   },
-  "resolutions": {
-    "@codemirror/state": "6.4.0",
-    "@xmldom/xmldom": "^0.8.4",
-    "json5": "^2.2.2",
-    "@types/react": "17.0.74",
-    "@types/react-dom": "17.0.25",
-    "semver": "7.5.4"
-  },
   "jest": {
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
@@ -138,11 +133,16 @@
     }
   },
   "browserslist": {
-    "production": [">0.2%", "not dead", "not op_mini all"],
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "packageManager": "yarn@4.0.2"
 }

frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 
-import { ReactComponent as EmailIcon } from 'assets/icons/email.svg';
+import EmailIcon from 'assets/icons/email.svg?react';
 import { LinkField } from '../../LinkField/LinkField';
 
 interface IConfirmUserEmailProps {

frontend/src/component/admin/users/LinkField/ConfirmUserEmail/ConfirmUserEmail.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 
-import { ReactComponent as EmailIcon } from 'assets/icons/email.svg';
+import EmailIcon from 'assets/icons/email.svg';
 import { LinkField } from '../LinkField';
 
 interface IConfirmUserEmailProps {

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx

@@ -7,7 +7,7 @@ import {
     Typography,
     useTheme,
 } from '@mui/material';
-import { ReactComponent as ChangesAppliedIcon } from 'assets/icons/merge.svg';
+import ChangesAppliedIcon from 'assets/icons/merge.svg?react';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import {
     StyledOuterContainer,

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx

@@ -1,6 +1,6 @@
 import { Tooltip, Box } from '@mui/material';
-import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg';
-import { ReactComponent as CaseSensitiveOff } from 'assets/icons/24_Text format off.svg';
+import CaseSensitive from 'assets/icons/24_Text format.svg?react';
+import CaseSensitiveOff from 'assets/icons/24_Text format off.svg?react';
 import {
     StyledToggleButtonOff,
     StyledToggleButtonOn,

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx

@@ -1,6 +1,6 @@
 import { Box, Tooltip } from '@mui/material';
-import { ReactComponent as NegatedOnIcon } from 'assets/icons/not_operator_selected.svg';
-import { ReactComponent as NegatedOffIcon } from 'assets/icons/not_operator_unselected.svg';
+import NegatedOnIcon from 'assets/icons/not_operator_selected.svg?react';
+import NegatedOffIcon from 'assets/icons/not_operator_unselected.svg?react';
 import { IConstraint } from 'interfaces/strategy';
 import {
     StyledToggleButtonOff,

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator.tsx

@@ -2,10 +2,10 @@ import { IConstraint } from 'interfaces/strategy';
 import { ConditionallyRender } from '../../../ConditionallyRender/ConditionallyRender';
 import { Tooltip, Box, styled } from '@mui/material';
 import { stringOperators } from 'constants/operators';
-import { ReactComponent as NegatedOnIcon } from 'assets/icons/not_operator_selected.svg';
+import NegatedOnIcon from 'assets/icons/not_operator_selected.svg?react';
 import { ConstraintOperator } from '../../ConstraintOperator/ConstraintOperator';
 import { StyledIconWrapper } from './StyledIconWrapper';
-import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg';
+import CaseSensitive from 'assets/icons/24_Text format.svg?react';
 import { oneOf } from 'utils/oneOf';
 import { useTheme } from '@mui/material';
 

frontend/src/component/common/EnterpriseBadge/EnterpriseBadge.tsx

@@ -1,6 +1,6 @@
 import { VFC } from 'react';
-import { ReactComponent as ProPlanIcon } from 'assets/icons/pro-enterprise-feature-badge.svg';
-import { ReactComponent as ProPlanIconLight } from 'assets/icons/pro-enterprise-feature-badge-light.svg';
+import ProPlanIcon from 'assets/icons/pro-enterprise-feature-badge.svg?react';
+import ProPlanIconLight from 'assets/icons/pro-enterprise-feature-badge-light.svg?react';
 import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
 
 type EnterpriseBadgeProps = {

frontend/src/component/common/FormTemplate/FormTemplate.tsx

@@ -14,7 +14,7 @@ import Loader from '../Loader/Loader';
 import copy from 'copy-to-clipboard';
 import useToast from 'hooks/useToast';
 import React, { ReactNode, useState } from 'react';
-import { ReactComponent as MobileGuidanceBG } from 'assets/img/mobileGuidanceBg.svg';
+import MobileGuidanceBG from 'assets/img/mobileGuidanceBg.svg?react';
 import { formTemplateSidebarWidth } from './FormTemplate.styles';
 import { relative } from 'themes/themeStyles';
 

frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx

@@ -1,6 +1,6 @@
 import { Tooltip, Box } from '@mui/material';
-import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg';
-import { ReactComponent as CaseSensitiveOff } from 'assets/icons/24_Text format off.svg';
+import CaseSensitive from 'assets/icons/24_Text format.svg?react';
+import CaseSensitiveOff from 'assets/icons/24_Text format off.svg?react';
 import {
     StyledToggleButtonOff,
     StyledToggleButtonOn,

frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx

@@ -1,6 +1,6 @@
 import { Box, Tooltip } from '@mui/material';
-import { ReactComponent as NegatedOnIcon } from 'assets/icons/not_operator_selected.svg';
-import { ReactComponent as NegatedOffIcon } from 'assets/icons/not_operator_unselected.svg';
+import NegatedOnIcon from 'assets/icons/not_operator_selected.svg?react';
+import NegatedOffIcon from 'assets/icons/not_operator_unselected.svg?react';
 import { IConstraint } from 'interfaces/strategy';
 import {
     StyledToggleButtonOff,

frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator.tsx

@@ -2,10 +2,10 @@ import { IConstraint } from 'interfaces/strategy';
 import { ConditionallyRender } from '../../../ConditionallyRender/ConditionallyRender';
 import { Tooltip, Box, styled } from '@mui/material';
 import { stringOperators } from 'constants/operators';
-import { ReactComponent as NegatedOnIcon } from 'assets/icons/not_operator_selected.svg';
+import NegatedOnIcon from 'assets/icons/not_operator_selected.svg?react';
 import { ConstraintOperator } from '../../ConstraintOperator/ConstraintOperator';
 import { StyledIconWrapper } from './StyledIconWrapper';
-import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg';
+import CaseSensitive from 'assets/icons/24_Text format.svg?react';
 import { oneOf } from 'utils/oneOf';
 import { useTheme } from '@mui/material';
 

frontend/src/component/common/NoItems/NoItems.tsx

@@ -1,4 +1,4 @@
-import { ReactComponent as NoItemsIcon } from 'assets/icons/addfiles.svg';
+import NoItemsIcon from 'assets/icons/addfiles.svg?react';
 import React from 'react';
 import { styled } from '@mui/material';
 

frontend/src/component/common/NotFound/NotFound.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { Button, styled, Typography } from '@mui/material';
 import { useNavigate } from 'react-router';
 
-import { ReactComponent as LogoIcon } from 'assets/icons/logoBg.svg';
+import LogoIcon from 'assets/icons/logoBg.svg?react';
 import { GO_BACK } from 'constants/navigate';
 
 const StyledContainer = styled('div')(({ theme }) => ({