Cleanup

Author: markus-moser

assets/studio/js/src/modules/data-importer/components/tabs/data-setup-tab.tsx

@@ -9,6 +9,7 @@
  */
 
 import React, { useState } from 'react'
+import cn from 'classnames'
 import { Steps, type StepItem, Flex } from '@pimcore/studio-ui-bundle/components'
 import { useTranslation } from '@pimcore/studio-ui-bundle/app'
 import { DataSourceStep } from './steps/data-source-step'
@@ -65,32 +66,32 @@ export const DataSetupTab = ({ configName }: DataSetupTabProps): React.JSX.Eleme
         />
       </Box>
 
-      <div className={ `${styles.stepContentMapping}${isMappingStep ? '' : ` ${styles.stepContentMappingHidden}`}` }>
+      <div className={ cn(styles.stepContentMapping, !isMappingStep && styles.stepContentMappingHidden) }>
         <MappingStep
           configName={ configName }
           isActive={ isMappingStep }
         />
       </div>
 
-      <div className={ `${styles.stepContent}${currentStep === 0 ? '' : ` ${styles.stepContentHidden}`}` }>
+      <div className={ cn(styles.stepContent, currentStep !== 0 && styles.stepContentHidden) }>
         <DataSourceStep configName={ configName } />
       </div>
 
-      <div className={ `${styles.stepContent}${currentStep === 1 ? '' : ` ${styles.stepContentHidden}`}` }>
+      <div className={ cn(styles.stepContent, currentStep !== 1 && styles.stepContentHidden) }>
         <PreviewImportStep
           configName={ configName }
           isActive={ currentStep === 1 }
         />
       </div>
 
-      <div className={ `${styles.stepContent}${currentStep === 2 ? '' : ` ${styles.stepContentHidden}`}` }>
+      <div className={ cn(styles.stepContent, currentStep !== 2 && styles.stepContentHidden) }>
         <ResolverStep
           columnHeaderOptions={ columnHeaderOptions }
           configName={ configName }
         />
       </div>
 
-      <div className={ `${styles.stepContent}${currentStep === 4 ? '' : ` ${styles.stepContentHidden}`}` }>
+      <div className={ cn(styles.stepContent, currentStep !== 4 && styles.stepContentHidden) }>
         <ProcessingSettingsStep configName={ configName } />
       </div>
     </Flex>

assets/studio/js/src/modules/data-importer/components/tabs/steps/mapping-step/dnd-class-div/dnd-class-div.tsx

@@ -9,6 +9,7 @@
  */
 
 import React from 'react'
+import cn from 'classnames'
 import { useDroppable } from '@pimcore/studio-ui-bundle/components'
 
 // Generic div that reads the nearest Droppable context and applies the
@@ -22,10 +23,9 @@ export interface DndClassDivProps {
 
 export const DndClassDiv = ({ children, className }: DndClassDivProps): React.JSX.Element => {
   const { getStateClasses } = useDroppable()
-  const combinedClass = [className, ...getStateClasses()].filter(Boolean).join(' ')
 
   return (
-    <div className={ combinedClass }>
+    <div className={ cn(className, ...getStateClasses()) }>
       { children }
     </div>
   )

assets/studio/js/src/modules/data-importer/components/tabs/steps/mapping-step/mapping-item/arrow-column/arrow-column.tsx

@@ -9,6 +9,7 @@
  */
 
 import React from 'react'
+import cn from 'classnames'
 import { theme } from 'antd'
 import { Flex, Icon } from '@pimcore/studio-ui-bundle/components'
 import { useStyles } from '../../mapping-step.styles'
@@ -48,7 +49,7 @@ export const ArrowColumn = (props: ArrowColumnProps): React.JSX.Element => {
   if (isComplex) {
     return (
       <Flex
-        className={ [styles.arrowCol, styles.arrowColAdvanced].join(' ') }
+        className={ cn(styles.arrowCol, styles.arrowColAdvanced) }
         gap={ 10 }
         justify="center"
         vertical
@@ -70,7 +71,7 @@ export const ArrowColumn = (props: ArrowColumnProps): React.JSX.Element => {
 
   return (
     <Flex
-      className={ [styles.arrowCol, styles.arrowColSimple].join(' ') }
+      className={ cn(styles.arrowCol, styles.arrowColSimple) }
       justify="flex-start"
       vertical
     >

assets/studio/js/src/modules/data-importer/components/tabs/steps/mapping-step/sources-panel/sources-panel.tsx

@@ -9,6 +9,7 @@
  */
 
 import React, { useMemo } from 'react'
+import cn from 'classnames'
 import {
   Badge,
   Button,
@@ -128,7 +129,7 @@ export const SourcesPanel = ({
 
               return (
                 <div
-                  className={ `${styles.sourceRowOuter}${isMapped ? ` ${styles.sourceRowOuterMapped}` : ''}${isFaded ? ` ${styles.sourceRowOuterFaded}` : ''}` }
+                  className={ cn(styles.sourceRowOuter, { [styles.sourceRowOuterMapped]: isMapped, [styles.sourceRowOuterFaded]: isFaded }) }
                   key={ row.dataIndex }
                 >
                   <Draggable
@@ -141,7 +142,7 @@ export const SourcesPanel = ({
                   >
                     <Flex
                       align="center"
-                      className={ `${styles.sourceRowInner}${isMapped ? ` ${styles.sourceRowInnerMapped}` : ` ${styles.sourceRowInnerUnmapped}`}` }
+                      className={ cn(styles.sourceRowInner, isMapped ? styles.sourceRowInnerMapped : styles.sourceRowInnerUnmapped) }
                       onClick={ handleRowClick }
                     >
                       <Flex

assets/studio/package-lock.json

@@ -65,6 +65,7 @@
     "@reduxjs/toolkit": "^2.3.0",
     "@tanstack/react-table": "^8.20.5",
     "antd-style": "3.7.x",
+    "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "quill": "^2.0.3",
     "quill-table-better": "^1.1.6",