Yarnv4

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

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,7 +117,7 @@
     "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"
@@ -138,11 +141,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 }) => ({

frontend/src/component/common/Notifications/Notification.tsx

@@ -10,7 +10,7 @@ import {
     NotificationsSchemaItem,
     NotificationsSchemaItemNotificationType,
 } from 'openapi';
-import { ReactComponent as ChangesAppliedIcon } from 'assets/icons/merge.svg';
+import ChangesAppliedIcon from 'assets/icons/merge.svg?react';
 import TimeAgo from 'react-timeago';
 import { ToggleOffOutlined } from '@mui/icons-material';
 import { flexRow } from 'themes/themeStyles';

frontend/src/component/common/PremiumFeature/PremiumFeature.tsx

@@ -1,5 +1,5 @@
-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 { Box, Button, Link, styled, Typography } from '@mui/material';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';

frontend/src/component/common/Table/PaginationBar/PaginationBar.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Box, Typography, Button, styled } from '@mui/material';
 import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender';
-import { ReactComponent as ArrowRight } from 'assets/icons/arrowRight.svg';
-import { ReactComponent as ArrowLeft } from 'assets/icons/arrowLeft.svg';
+import ArrowRight from 'assets/icons/arrowRight.svg?react';
+import ArrowLeft from 'assets/icons/arrowLeft.svg?react';
 
 const StyledPaginationButton = styled(Button)(({ theme }) => ({
     padding: `0 ${theme.spacing(0.8)}`,

frontend/src/component/demo/DemoTopics/DemoTopics.tsx

@@ -12,7 +12,7 @@ import {
 import { CheckCircle, CircleOutlined, ExpandMore } from '@mui/icons-material';
 import { ITutorialTopic } from '../demo-topics';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { ReactComponent as StarsIcon } from 'assets/img/stars.svg';
+import StarsIcon from 'assets/img/stars.svg?react';
 
 const StyledAccordion = styled(Accordion)(({ theme }) => ({
     position: 'fixed',

frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx

@@ -4,8 +4,8 @@ import { FC, ReactElement } from 'react';
 import { ILastSeenEnvironments } from 'interfaces/featureToggle';
 import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
 import { Box, styled, SxProps } from '@mui/material';
-import { ReactComponent as UsageLine } from 'assets/icons/usage-line.svg';
-import { ReactComponent as UsageRate } from 'assets/icons/usage-rate.svg';
+import UsageLine from 'assets/icons/usage-line.svg?react';
+import UsageRate from 'assets/icons/usage-rate.svg?react';
 import { useLastSeenColors } from './useLastSeenColors';
 import { getLatestLastSeenAt } from './getLatestLastSeenAt';
 

frontend/src/component/feature/FeatureView/FeatureView.tsx

@@ -46,8 +46,8 @@ import { FeatureArchiveDialog } from 'component/common/FeatureArchiveDialog/Feat
 import { FeatureArchiveNotAllowedDialog } from 'component/common/FeatureArchiveDialog/FeatureArchiveNotAllowedDialog';
 import { useFavoriteFeaturesApi } from 'hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi';
 import { FavoriteIconButton } from 'component/common/FavoriteIconButton/FavoriteIconButton';
-import { ReactComponent as ChildLinkIcon } from 'assets/icons/link-child.svg';
-import { ReactComponent as ParentLinkIcon } from 'assets/icons/link-parent.svg';
+import ChildLinkIcon from 'assets/icons/link-child.svg';
+import ParentLinkIcon from 'assets/icons/link-parent.svg';
 import { ChildrenTooltip } from './FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/ChildrenTooltip';
 import copy from 'copy-to-clipboard';
 import useToast from 'hooks/useToast';

frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx

@@ -9,8 +9,8 @@ import {
     useMediaQuery,
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
-import { ReactComponent as UnleashLogo } from 'assets/icons/logoBg.svg';
-import { ReactComponent as UnleashLogoWhite } from 'assets/icons/logoWhiteBg.svg';
+import UnleashLogo from 'assets/icons/logoBg.svg?react';
+import UnleashLogoWhite from 'assets/icons/logoWhiteBg.svg?react';
 import AnimateOnMount from 'component/common/AnimateOnMount/AnimateOnMount';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {

frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx

@@ -4,8 +4,8 @@ import { Divider, Drawer, List, styled } from '@mui/material';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
 import ExitToApp from '@mui/icons-material/ExitToApp';
-import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg';
-import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg';
+import UnleashLogo from 'assets/img/logoDarkWithText.svg?react';
+import UnleashLogoWhite from 'assets/img/logoWithWhiteText.svg?react';
 import NavigationLink from '../NavigationLink/NavigationLink';
 import { basePath } from 'utils/formatPath';
 import { INavigationMenuItem } from 'interfaces/route';

frontend/src/component/menu/Header/Header.tsx

@@ -16,10 +16,10 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import UserProfile from 'component/user/UserProfile';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import MenuBookIcon from '@mui/icons-material/MenuBook';
-import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg';
-import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg';
-import { ReactComponent as CelebatoryUnleashLogo } from 'assets/img/unleashHoliday.svg';
-import { ReactComponent as CelebatoryUnleashLogoWhite } from 'assets/img/unleashHolidayDark.svg';
+import UnleashLogo from 'assets/img/logoDarkWithText.svg?react';
+import UnleashLogoWhite from 'assets/img/logoWithWhiteText.svg?react';
+import CelebratoryUnleashLogo from 'assets/img/unleashHoliday.svg?react';
+import CelebratoryUnleashLogoWhite from 'assets/img/unleashHolidayDark.svg?react';
 
 import { DrawerMenu } from './DrawerMenu/DrawerMenu';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@@ -100,7 +100,7 @@ const StyledUnleashLogoWhite = styled(UnleashLogoWhite)({ width: '150px' });
 
 const StyledUnleashLogo = styled(UnleashLogo)({ width: '150px' });
 
-const StyledCelebatoryLogo = styled(CelebatoryUnleashLogo)({ width: '150px' });
+const StyledCelebatoryLogo = styled(CelebratoryUnleashLogo)({ width: '150px' });
 
 const StyledLinks = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -228,7 +228,7 @@ const Header: VFC = () => {
                         darkmode={
                             <ConditionallyRender
                                 condition={celebatoryUnleash}
-                                show={<CelebatoryUnleashLogoWhite />}
+                                show={<CelebratoryUnleashLogoWhite />}
                                 elseShow={
                                     <StyledUnleashLogoWhite aria-label='Unleash logo' />
                                 }

frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx

@@ -1,8 +1,8 @@
 import { VFC } from 'react';
 import { useTheme } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { ReactComponent as FeatureEnabledIcon } from 'assets/icons/isenabled-true.svg';
-import { ReactComponent as FeatureDisabledIcon } from 'assets/icons/isenabled-false.svg';
+import FeatureEnabledIcon from 'assets/icons/isenabled-true.svg?react';
+import FeatureDisabledIcon from 'assets/icons/isenabled-false.svg?react';
 import { WarningOutlined } from '@mui/icons-material';
 import { Badge } from 'component/common/Badge/Badge';
 

frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestProcessHelp/ChangeRequestProcessHelp.tsx

@@ -9,9 +9,9 @@ import {
 } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { HelpOutline } from '@mui/icons-material';
-import { ReactComponent as ChangeRequestProcessImage } from 'assets/img/changeRequestProcess.svg';
+import ChangeRequestProcessImage from 'assets/img/changeRequestProcess.svg';
 import { useUiFlag } from 'hooks/useUiFlag';
-import { ReactComponent as ChangeRequestProcessWithScheduleImage } from 'assets/img/changeRequestProcessWithSchedule.svg';
+import ChangeRequestProcessWithScheduleImage from 'assets/img/changeRequestProcessWithSchedule.svg?react';
 
 type IChangeRequestProcessHelpProps = {};
 

frontend/src/component/project/ProjectCard/ProjectCard.styles.ts

@@ -1,7 +1,7 @@
 import { styled } from '@mui/material';
 import { Card, Box } from '@mui/material';
 import { Delete, Edit } from '@mui/icons-material';
-import { ReactComponent as ProjectIcon } from 'assets/icons/projectIcon.svg';
+import ProjectIcon from 'assets/icons/projectIcon.svg?react';
 import { flexRow } from 'themes/themeStyles';
 
 export const StyledProjectCard = styled(Card)(({ theme }) => ({

frontend/src/component/project/ProjectList/ProjectList.tsx

@@ -21,8 +21,8 @@ import theme from 'themes/theme';
 import { Search } from 'component/common/Search/Search';
 import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
 import { ITooltipResolverProps } from 'component/common/TooltipResolver/TooltipResolver';
-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 { safeRegExp } from '@server/util/escape-regex';
 import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
 

frontend/src/component/user/DemoAuth/DemoAuth.tsx

@@ -1,7 +1,7 @@
 import { ChangeEventHandler, FormEventHandler, useState, VFC } from 'react';
 import { Button, TextField } from '@mui/material';
 import styles from './DemoAuth.module.scss';
-import { ReactComponent as Logo } from 'assets/img/logo.svg';
+import Logo from 'assets/img/logo.svg?react';
 import { LOGIN_BUTTON, LOGIN_EMAIL_ID } from 'utils/testIds';
 import { useNavigate } from 'react-router-dom';
 import { useAuthApi } from 'hooks/api/actions/useAuthApi/useAuthApi';

frontend/src/component/user/StandaloneBanner.tsx

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import { Typography, useTheme, useMediaQuery, styled } from '@mui/material';
 import Gradient from 'component/common/Gradient/Gradient';
-import { ReactComponent as Logo } from 'assets/icons/logoWhiteBg.svg';
-import { ReactComponent as LogoWithText } from 'assets/img/logoWhiteTransparentHorizontal.svg';
+import Logo from 'assets/icons/logoWhiteBg.svg?react';
+import LogoWithText from 'assets/img/logoWhiteTransparentHorizontal.svg?react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Theme } from '@mui/material';
 

frontend/src/component/user/common/AuthOptions/AuthOptions.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@mui/material';
 import classnames from 'classnames';
 import { useThemeStyles } from 'themes/themeStyles';
-import { ReactComponent as GoogleSvg } from 'assets/icons/google.svg';
+import GoogleSvg from 'assets/icons/google.svg?react';
 import LockRounded from '@mui/icons-material/LockRounded';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { IAuthOptions } from 'hooks/api/getters/useAuth/useAuthEndpoint';

frontend/src/utils/strategyNames.tsx

@@ -5,7 +5,7 @@ import PeopleIcon from '@mui/icons-material/People';
 import LanguageIcon from '@mui/icons-material/Language';
 import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import CodeIcon from '@mui/icons-material/Code';
-import { ReactComponent as RolloutIcon } from 'assets/icons/rollout.svg';
+import RolloutIcon from 'assets/icons/rollout.svg?react';
 
 export const formatStrategyName = (strategyName: string): string => {
     return formattedStrategyNames[strategyName] ?? strategyName;