chore: update vite to v8

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.23.3-beta-3",
+    "version": "1.23.4-beta-3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -38,22 +38,21 @@
     },
     "devDependencies": {
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
-        "react": "^19.2.4",
-        "react-dom": "^19.2.4",
-        "@laynezh/vite-plugin-lib-assets": "1.1.0",
+        "@laynezh/vite-plugin-lib-assets": "2.2.0",
         "@sentry/browser": "^7.119.1",
         "@tanstack/eslint-plugin-query": "^5.91.4",
         "@tanstack/react-query-devtools": "^5.91.3",
         "@tippyjs/react": "^4.2.0",
         "@typeform/embed-react": "2.20.0",
         "@types/dompurify": "^3.0.5",
         "@types/json-schema": "^7.0.15",
+        "@types/node": "^25.5.0",
         "@types/react": "^19.2.14",
         "@types/react-csv": "^1.1.10",
         "@types/react-dom": "^19.2.3",
         "@typescript-eslint/eslint-plugin": "8.3.0",
         "@typescript-eslint/parser": "8.3.0",
-        "@vitejs/plugin-react": "4.5.2",
+        "@vitejs/plugin-react": "6.0.1",
         "eslint": "^8.57.1",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-prettier": "^9.1.0",
@@ -70,24 +69,23 @@
         "lint-staged": "^12.5.0",
         "moment": "^2.29.4",
         "prettier": "^3.1.1",
-        "react-ga4": "^1.4.1",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
         "react-toastify": "^10.0.6",
         "sharp": "^0.33.5",
         "svgo": "^3.3.2",
         "typescript": "5.5.4",
-        "vite": "6.3.5",
+        "vite": "8.0.0",
         "vite-plugin-dts": "4.5.4",
-        "vite-plugin-lib-inject-css": "2.1.1",
-        "vite-plugin-svgr": "^2.4.0",
-        "vite-tsconfig-paths": "5.0.1"
+        "vite-plugin-lib-inject-css": "2.2.2",
+        "vite-plugin-svgr": "4.5.0"
     },
     "peerDependencies": {
         "@typeform/embed-react": "2.20.0",
         "dompurify": "^3.2.4",
         "patch-package": "^8.0.0",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
-        "react-ga4": "^1.4.1",
         "react-router-dom": "^6.30.3",
         "react-select": "5.8.0",
         "rxjs": "^7.8.1",
@@ -115,7 +113,7 @@
         "@uiw/react-codemirror": "4.23.7",
         "@uiw/react-md-editor": "^4.0.11",
         "@xyflow/react": "12.4.2",
-        "ansi_up": "^5.2.1",
+        "ansi_up": "6.0.6",
         "chart.js": "4.5.0",
         "codemirror-json-schema": "0.8.0",
         "cronstrue": "^3.9.0",
@@ -127,10 +125,10 @@
         "marked": "^13.0.3",
         "nanoid": "^3.3.8",
         "qrcode.react": "^4.2.0",
-        "react-canvas-confetti": "^2.0.7",
         "react-csv": "^2.2.2",
         "react-day-picker": "^9.11.2",
         "react-draggable": "^4.4.5",
+        "react-ga4": "3.0.1",
         "react-international-phone": "^4.5.0",
         "react-virtualized-sticky-tree": "^3.0.0-beta18",
         "sass": "^1.69.7",
@@ -142,11 +140,14 @@
         "eslint-plugin-react-hooks": "^5.2.0",
         "cross-spawn": "^7.0.5",
         "vite-plugin-svgr": {
-            "vite": "6.3.5"
+            "vite": "8.0.0"
         },
         "react-virtualized-sticky-tree": {
             "react": "^19.2.4",
             "react-dom": "^19.2.4"
+        },
+        "@laynezh/vite-plugin-lib-assets": {
+            "vite": "8.0.0"
         }
     }
 }

scripts/generate-icon.cjs

@@ -44,7 +44,7 @@ const generateIconComponent = () => {
             .replace(/(^\w+)/, (match) => match.toUpperCase())
             .replace(/-./g, (match) => match[1].toUpperCase())
         // Push imports statement
-        imports.push(`import { ReactComponent as ${importName} } from '@IconsV2/${file}'`)
+        imports.push(`import ${importName} from '@IconsV2/${file}?react'`)
         // Push icons to iconMap
         iconMapEntries.push(`["${iconName}"]: ${importName},`)
     })

scripts/generate-illustration.cjs

@@ -47,7 +47,7 @@ const generateIllustrationComponent = () => {
             .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
             .join('')
         // Push imports statement
-        imports.push(`import { ReactComponent as ${importName} } from '@Illustrations/${file}'`)
+        imports.push(`import ${importName} from '@Illustrations/${file}?react'`)
         // Push illustrations to illustrationMap
         illustrationMapEntries.push(`["${illustrationName}"]: ${importName},`)
     })

src/Common/ClipboardButton/ClipboardButton.tsx

@@ -19,8 +19,8 @@ import { useEffect, useRef, useState } from 'react'
 import Tooltip from '@Common/Tooltip/Tooltip'
 import { Button, ButtonStyleType, ButtonVariantType } from '@Shared/Components/Button'
 
-import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
-import { ReactComponent as ICCopy } from '../../Assets/Icon/ic-copy.svg'
+import Check from '../../Assets/Icon/ic-check.svg?react'
+import ICCopy from '../../Assets/Icon/ic-copy.svg?react'
 import { copyToClipboard, noop, stopPropagation } from '../Helper'
 import { ClipboardProps } from './types'
 

src/Common/CustomTagSelector/PropagateTagInfo.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
-import { ReactComponent as ICHelpOutline } from '../../Assets/Icon/ic-help-outline.svg'
+import InjectTag from '../../Assets/Icon/inject-tag.svg?react'
+import ICHelpOutline from '../../Assets/Icon/ic-help-outline.svg?react'
 import { TippyCustomized } from '../TippyCustomized'
 import { TippyTheme } from '../Types'
 

src/Common/CustomTagSelector/TagDetails.tsx

@@ -15,8 +15,8 @@
  */
 
 import React, { useRef } from 'react'
-import { ReactComponent as DeleteCross } from '../../Assets/Icon/ic-cross.svg'
-import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
+import DeleteCross from '../../Assets/Icon/ic-cross.svg?react'
+import InjectTag from '../../Assets/Icon/inject-tag.svg?react'
 import { TagLabelValueSelector } from './TagLabelValueSelector'
 import { KEY_VALUE } from '../Constants'
 import { stopPropagation } from '../Helper'

src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -17,8 +17,8 @@
 import { useState, useEffect, type JSX } from 'react'
 import Tippy from '@tippyjs/react'
 import PopupMenu from '../PopupMenu'
-import { ReactComponent as ErrorCross } from '../../Assets/Icon/ic-cross.svg'
-import { ReactComponent as Info } from '../../Assets/Icon/ic-info-outlined.svg'
+import ErrorCross from '../../Assets/Icon/ic-cross.svg?react'
+import Info from '../../Assets/Icon/ic-info-outlined.svg?react'
 import { KEY_VALUE } from '../Constants'
 import { stopPropagation } from '../Helper'
 import { ResizableTagTextArea } from './ResizableTagTextArea'

src/Common/DebouncedSearch/DebouncedSearch.tsx

@@ -16,7 +16,7 @@
 
 import React, { useEffect, useState } from 'react'
 import { useDebouncedEffect } from './Utils'
-import { ReactComponent as ICClear } from '../../Assets/Icon/ic-error-cross.svg'
+import ICClear from '../../Assets/Icon/ic-error-cross.svg?react'
 import { DebouncedSearchProps } from './Types'
 
 /**

src/Common/DevtronProgressing/DevtronProgressing.tsx

@@ -15,7 +15,7 @@
  */
 
 import { type JSX } from 'react'
-import { ReactComponent as ICRotateDevtron } from '../../Assets/Icon/ic-rotate-devtron.svg'
+import ICRotateDevtron from '../../Assets/Icon/ic-rotate-devtron.svg?react'
 import { DevtronProgressingProps } from './types'
 
 export const DevtronProgressing = ({ classes, parentClasses }: DevtronProgressingProps): JSX.Element => (

src/Common/Dialogs/DialogForm.tsx

@@ -16,9 +16,9 @@
 
 import { Component, createContext, PropsWithChildren } from 'react'
 import { VisibleModal } from '../Modals/VisibleModal'
-import close from '../../Assets/Icon/ic-cross.svg'
 import { Progressing } from '../Progressing'
 import { DialogFormProps } from './Types'
+import { Icon } from '@Shared/Components'
 // TODO: may not need context
 const DialogFormContext = createContext({ title: '', isLoading: false, close: (event) => {}, onSave: (event) => {} })
 
@@ -57,7 +57,7 @@ export class DialogForm extends Component<PropsWithChildren<DialogFormProps>> {
                         <div className={`modal__header ${this.props.headerClassName || ''}`}>
                             <h1 className="modal__title">{this.props.title}</h1>
                             <button type="button" className="dc__transparent" onClick={this.props.close}>
-                                <img src={close} alt="close" />
+                                <Icon name="ic-close-small" size={24} color={null} />
                             </button>
                         </div>
                         <DialogFormContext.Consumer>

src/Common/DraggableWrapper/DraggableButton.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react'
-import { ReactComponent as ICDrag } from '../../Assets/Icon/ic-drag.svg'
+import ICDrag from '../../Assets/Icon/ic-drag.svg?react'
 import { DraggableButtonProps } from './types'
 
 export default function DraggableButton({ dragClassName }: DraggableButtonProps) {

src/Common/GenericDescription/GenericDescription.tsx

@@ -17,8 +17,8 @@
 import { useEffect, useMemo, useState } from 'react'
 import MDEditor, { commands, MDEditorProps } from '@uiw/react-md-editor'
 
-import { ReactComponent as Edit } from '@Icons/ic-pencil.svg'
-import { ReactComponent as UnorderedListIcon } from '@Icons/ic-unordered-list.svg'
+import Edit from '@Icons/ic-pencil.svg?react'
+import UnorderedListIcon from '@Icons/ic-unordered-list.svg?react'
 
 import {
     Button,

src/Common/GenericDescription/constant.tsx

@@ -16,17 +16,17 @@
 
 import { commands } from '@uiw/react-md-editor'
 
-import { ReactComponent as BoldIcon } from '@Icons/ic-bold.svg'
-import { ReactComponent as CheckedListIcon } from '@Icons/ic-checked-list.svg'
-import { ReactComponent as CodeIcon } from '@Icons/ic-code.svg'
-import { ReactComponent as HeaderIcon } from '@Icons/ic-header.svg'
-import { ReactComponent as ImageIcon } from '@Icons/ic-image.svg'
-import { ReactComponent as ItalicIcon } from '@Icons/ic-italic.svg'
-import { ReactComponent as LinkIcon } from '@Icons/ic-link.svg'
-import { ReactComponent as OrderedListIcon } from '@Icons/ic-ordered-list.svg'
-import { ReactComponent as QuoteIcon } from '@Icons/ic-quote.svg'
-import { ReactComponent as StrikethroughIcon } from '@Icons/ic-strikethrough.svg'
-import { ReactComponent as UnorderedListIcon } from '@Icons/ic-unordered-list.svg'
+import BoldIcon from '@Icons/ic-bold.svg?react'
+import CheckedListIcon from '@Icons/ic-checked-list.svg?react'
+import CodeIcon from '@Icons/ic-code.svg?react'
+import HeaderIcon from '@Icons/ic-header.svg?react'
+import ImageIcon from '@Icons/ic-image.svg?react'
+import ItalicIcon from '@Icons/ic-italic.svg?react'
+import LinkIcon from '@Icons/ic-link.svg?react'
+import OrderedListIcon from '@Icons/ic-ordered-list.svg?react'
+import QuoteIcon from '@Icons/ic-quote.svg?react'
+import StrikethroughIcon from '@Icons/ic-strikethrough.svg?react'
+import UnorderedListIcon from '@Icons/ic-unordered-list.svg?react'
 
 export const DESCRIPTION_EMPTY_ERROR_MSG = 'Readme cannot be empty. Please add some information or cancel the changes.'
 export const DESCRIPTION_UNSAVED_CHANGES_MSG = 'Are you sure you want to discard your changes?'

src/Common/Helper.tsx

@@ -45,12 +45,12 @@ import {
     WebhookEventNameType,
     AppType,
 } from '../Shared'
-import { ReactComponent as ArrowDown } from '@Icons/ic-chevron-down.svg'
-import { ReactComponent as ICWebhook } from '@Icons/ic-webhook.svg'
-import { ReactComponent as ICBranch } from '@Icons/ic-branch.svg'
-import { ReactComponent as ICRegex } from '@Icons/ic-regex.svg'
-import { ReactComponent as ICPullRequest } from '@Icons/ic-pull-request.svg'
-import { ReactComponent as ICTag } from '@Icons/ic-tag.svg'
+import ArrowDown from '@Icons/ic-chevron-down.svg?react'
+import ICWebhook from '@Icons/ic-webhook.svg?react'
+import ICBranch from '@Icons/ic-branch.svg?react'
+import ICRegex from '@Icons/ic-regex.svg?react'
+import ICPullRequest from '@Icons/ic-pull-request.svg?react'
+import ICTag from '@Icons/ic-tag.svg?react'
 import { SourceTypeMap } from '@Common/Common.service'
 import { getIsRequestAborted } from './API'
 

src/Common/ImageTags.tsx

@@ -16,15 +16,15 @@
 
 import { useEffect, useRef, useState, type JSX } from 'react'
 import Tippy from '@tippyjs/react'
-import { ReactComponent as Add } from '../Assets/Icon/ic-add.svg'
-import { ReactComponent as Close } from '../Assets/Icon/ic-cross.svg'
-import { ReactComponent as EditIcon } from '../Assets/Icon/ic-pencil.svg'
-import { ReactComponent as Redo } from '../Assets/Icon/ic-arrow-counter-clockwise.svg'
-import { ReactComponent as Minus } from '../Assets/Icon/ic-minus.svg'
-import { ReactComponent as Info } from '../Assets/Icon/ic-info-filled.svg'
-import { ReactComponent as Error } from '../Assets/Icon/ic-warning.svg'
-import { ReactComponent as Warning } from '../Assets/Icon/ic-error-exclamation.svg'
-import { ReactComponent as Enter } from '../Assets/Icon/ic-enter.svg'
+import Add from '../Assets/Icon/ic-add.svg?react'
+import Close from '../Assets/Icon/ic-cross.svg?react'
+import EditIcon from '../Assets/Icon/ic-pencil.svg?react'
+import Redo from '../Assets/Icon/ic-arrow-counter-clockwise.svg?react'
+import Minus from '../Assets/Icon/ic-minus.svg?react'
+import Info from '../Assets/Icon/ic-info-filled.svg?react'
+import Error from '../Assets/Icon/ic-warning.svg?react'
+import Warning from '../Assets/Icon/ic-error-exclamation.svg?react'
+import Enter from '../Assets/Icon/ic-enter.svg?react'
 import { ImageButtonType, ImageTaggingContainerType, ReleaseTag } from './ImageTags.Types'
 import { showError, stopPropagation } from './Helper'
 import { setImageTags } from './Common.service'

src/Common/MultiSelectCustomization.tsx

@@ -17,10 +17,10 @@
 import React from 'react'
 import Select, { components } from 'react-select'
 import Tippy from '@tippyjs/react'
-import { ReactComponent as ICErrorCross } from '@Icons/ic-error-cross.svg'
-import { ReactComponent as ClearIcon } from '../Assets/Icon/ic-appstatus-cancelled.svg'
-import { ReactComponent as Check } from '../Assets/Icon/ic-check.svg'
-import { ReactComponent as RedWarning } from '../Assets/Icon/ic-error-medium.svg'
+import ICErrorCross from '@Icons/ic-error-cross.svg?react'
+import ClearIcon from '../Assets/Icon/ic-appstatus-cancelled.svg?react'
+import Check from '../Assets/Icon/ic-check.svg?react'
+import RedWarning from '../Assets/Icon/ic-error-medium.svg?react'
 import { Checkbox } from './Checkbox'
 import { CHECKBOX_VALUE } from './Types'
 import { ConditionalWrap } from './Helper'

src/Common/RJSF/templates/ButtonTemplates/AddButton.tsx

@@ -17,7 +17,7 @@
 import { IconButtonProps } from '@rjsf/utils'
 
 import { Tooltip } from '@Common/Tooltip'
-import { ReactComponent as PlusIcon } from '../../../../Assets/Icon/ic-add.svg'
+import PlusIcon from '../../../../Assets/Icon/ic-add.svg?react'
 
 export const AddButton = ({
     label,

src/Common/RJSF/templates/ButtonTemplates/RemoveButton.tsx

@@ -17,7 +17,7 @@
 import React from 'react'
 import { IconButtonProps } from '@rjsf/utils'
 
-import { ReactComponent as CrossIcon } from '../../../../Assets/Icon/ic-cross.svg'
+import CrossIcon from '../../../../Assets/Icon/ic-cross.svg?react'
 
 export const RemoveButton = ({ icon, iconType, registry, uiSchema, ...props }: IconButtonProps) => (
     <button {...props} type="button" className="dc__outline-none-imp p-0 dc__transparent flex cursor" title="Remove">

src/Common/RJSF/templates/FieldErrorTemplate.tsx

@@ -17,7 +17,7 @@
 import React from 'react'
 import { errorId, FieldErrorProps } from '@rjsf/utils'
 
-import { ReactComponent as Error } from '../../../Assets/Icon/ic-warning.svg'
+import Error from '../../../Assets/Icon/ic-warning.svg?react'
 
 export const FieldErrorTemplate = ({ errors = [], fieldPathId }: FieldErrorProps) => {
     const id = errorId(fieldPathId)

src/Common/Select/Select.tsx

@@ -19,7 +19,7 @@
 import React, { useEffect } from 'react'
 import { SelectComposition, SelectProps, OptionGroupProps, SelectAsync } from './types'
 
-import arrowTriangle from '../../Assets/Icon/ic-chevron-down.svg' // '../../../assets/icons/ic-chevron-down.svg'
+import arrowTriangle from '../../Assets/Icon/ic-chevron-down.svg?react' // '../../../assets/icons/ic-chevron-down.svg'
 
 import './select.scss'
 import PopupMenu from '../PopupMenu'

src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -17,8 +17,8 @@
 import { useRef } from 'react'
 import Draggable, { DraggableProps } from 'react-draggable'
 
-import { ReactComponent as SortIcon } from '@Icons/ic-arrow-up-down.svg'
-import { ReactComponent as SortArrowDown } from '@Icons/ic-sort-arrow-down.svg'
+import SortIcon from '@Icons/ic-arrow-up-down.svg?react'
+import SortArrowDown from '@Icons/ic-sort-arrow-down.svg?react'
 import { Tooltip } from '@Common/Tooltip'
 import { Icon } from '@Shared/Components/Icon'
 

src/Common/TippyCustomized.tsx

@@ -16,9 +16,9 @@
 
 import { useRef, useState } from 'react'
 import Tippy from '@tippyjs/react'
-import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.svg'
-import { ReactComponent as Help } from '../Assets/Icon/ic-help.svg'
-import { ReactComponent as ICHelpOutline } from '../Assets/Icon/ic-help-outline.svg'
+import CloseIcon from '../Assets/Icon/ic-cross.svg?react'
+import Help from '../Assets/Icon/ic-help.svg?react'
+import ICHelpOutline from '../Assets/Icon/ic-help-outline.svg?react'
 import 'tippy.js/animations/shift-toward-subtle.css'
 import 'tippy.js/animations/shift-toward.css'
 import { TippyCustomizedProps, TippyTheme } from './Types'

src/Common/Types.ts

@@ -193,7 +193,7 @@ export interface InfoIconTippyProps<T extends boolean = false> extends Pick<
 export interface GenericEmptyStateType {
     title: ReactNode
     imgName?: IllustrationName
-    image?
+    image?: string
     classname?: string
     subTitle?: ReactNode
     isButtonAvailable?: boolean

src/Pages/Applications/DevtronApps/Details/AppConfigurations/DeploymentTemplate/DTApplicationMetricsFormField.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ReactComponent as ICInfoFilledOverride } from '@Icons/ic-info-filled-override.svg'
+import ICInfoFilledOverride from '@Icons/ic-info-filled-override.svg?react'
 import { Checkbox } from '@Common/Checkbox'
 import { Progressing } from '@Common/Progressing'
 import { Tooltip } from '@Common/Tooltip'

src/Pages/Applications/DevtronApps/Details/CIPipeline/components/FileConfigTippy.tsx

@@ -16,7 +16,7 @@
 
 import Tippy from '@tippyjs/react'
 
-import { ReactComponent as ICInfoOutline } from '@Icons/ic-info-outline.svg'
+import ICInfoOutline from '@Icons/ic-info-outline.svg?react'
 import { VariableType } from '@Common/CIPipeline.Types'
 
 export const FileConfigTippy = ({ fileMountDir }: Pick<VariableType, 'fileMountDir'>) => (