feat: add concat-css-classes helper method

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/components/common/custom-branding/custom-branding.tsx

@@ -21,19 +21,16 @@ export interface BrandingProps {
 export const CustomBranding: React.FC<BrandingProps> = ({ inline = false }) => {
   const branding = useBrandingDetails()
 
+  const className = inline ? styles['inline-size'] : styles['regular-size']
+
   if (!branding) {
     return null
   } else if (branding.logo) {
     return (
       /* eslint-disable-next-line @next/next/no-img-element */
-      <img
-        src={branding.logo}
-        alt={branding.name}
-        title={branding.name}
-        className={inline ? styles['inline-size'] : styles['regular-size']}
-      />
+      <img src={branding.logo} alt={branding.name} title={branding.name} className={className} />
     )
   } else {
-    return <span className={inline ? styles['inline-size'] : styles['regular-size']}>{branding.name}</span>
+    return <span className={className}>{branding.name}</span>
   }
 }

frontend/src/components/common/highlighted-code/highlighted-code.tsx

@@ -5,13 +5,14 @@
  */
 import { AsyncLoadingBoundary } from '../../../components/common/async-loading-boundary/async-loading-boundary'
 import { CopyToClipboardButton } from '../../../components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button'
+import { concatCssClasses } from '../../../utils/concat-css-classes'
 import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute'
 import { testId } from '../../../utils/test-id'
 import styles from './highlighted-code.module.scss'
 import { useAsyncHighlightJsImport } from './hooks/use-async-highlight-js-import'
 import { useAttachLineNumbers } from './hooks/use-attach-line-numbers'
 import { useCodeDom } from './hooks/use-code-dom'
-import React from 'react'
+import React, { useMemo } from 'react'
 
 export interface HighlightedCodeProps {
   code: string
@@ -35,6 +36,13 @@ export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language
   const codeDom = useCodeDom(code, hljsApi, language)
   const wrappedDomLines = useAttachLineNumbers(codeDom, startLineNumber)
 
+  const className = useMemo(() => {
+    return concatCssClasses('hljs', {
+      [styles['showGutter']]: showGutter,
+      [styles['wrapLines']]: wrapLines
+    })
+  }, [showGutter, wrapLines])
+
   return (
     <AsyncLoadingBoundary loading={loading || !hljsApi} error={!!error} componentName={'highlight.js'}>
       <div className={styles['code-highlighter']} {...cypressId('highlighted-code-block')}>
@@ -43,7 +51,7 @@ export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language
           {...cypressId('code-highlighter')}
           {...cypressAttribute('showgutter', showGutter ? 'true' : 'false')}
           {...cypressAttribute('wraplines', wrapLines ? 'true' : 'false')}
-          className={`hljs ${showGutter ? styles['showGutter'] : ''} ${wrapLines ? styles['wrapLines'] : ''}`}>
+          className={className}>
           {wrappedDomLines}
         </code>
         <div className={'text-right button-inside'}>

frontend/src/components/common/icon-button/icon-button.tsx

@@ -3,12 +3,13 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { concatCssClasses } from '../../../utils/concat-css-classes'
 import type { PropsWithDataTestId } from '../../../utils/test-id'
 import { testId } from '../../../utils/test-id'
 import { UiIcon } from '../icons/ui-icon'
 import { ShowIf } from '../show-if/show-if'
 import styles from './icon-button.module.scss'
-import React from 'react'
+import React, { useMemo } from 'react'
 import type { ButtonProps } from 'react-bootstrap'
 import { Button } from 'react-bootstrap'
 import type { Icon } from 'react-bootstrap-icons'
@@ -38,13 +39,16 @@ export const IconButton: React.FC<IconButtonProps> = ({
   iconSize,
   ...props
 }) => {
+  const finalClassName = useMemo(
+    () =>
+      concatCssClasses(styles['btn-icon'], 'd-inline-flex align-items-stretch', className, {
+        [styles['with-border']]: border
+      }),
+    [border, className]
+  )
+
   return (
-    <Button
-      {...props}
-      className={`${styles['btn-icon']} d-inline-flex align-items-stretch ${border ? styles['with-border'] : ''} ${
-        className ?? ''
-      }`}
-      {...testId('icon-button')}>
+    <Button {...props} className={finalClassName} {...testId('icon-button')}>
       <span className={`${styles['icon-part']}`}>
         <UiIcon size={iconSize} icon={icon} className={'icon'} />
       </span>

frontend/src/components/common/icons/ui-icon.tsx

@@ -3,6 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { concatCssClasses } from '../../../utils/concat-css-classes'
 import styles from './ui-icons.module.scss'
 import React, { Fragment, useMemo } from 'react'
 import type { Icon } from 'react-bootstrap-icons'
@@ -26,9 +27,7 @@ export const UiIcon: React.FC<UiIconProps> = ({ icon, nbsp, className, size, spi
     }
   }, [size])
 
-  const finalClassName = useMemo(() => {
-    return `${spin ? styles.spin : ''} ${className ?? ''}`
-  }, [className, spin])
+  const finalClassName = useMemo(() => concatCssClasses(className, { [styles.spin]: spin }), [className, spin])
 
   if (icon) {
     return (

frontend/src/components/common/modals/common-modal.tsx

@@ -3,6 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { concatCssClasses } from '../../../utils/concat-css-classes'
 import type { PropsWithDataCypressId } from '../../../utils/cypress-attribute'
 import { cypressId } from '../../../utils/cypress-attribute'
 import { testId } from '../../../utils/test-id'
@@ -73,7 +74,7 @@ export const CommonModal: React.FC<PropsWithChildren<CommonModalProps>> = ({
         onHide={onHide}
         animation={true}
         {...testId('commonModal')}
-        dialogClassName={`text-dark ${additionalClasses ?? ''}`}
+        dialogClassName={concatCssClasses('text-dark', additionalClasses)}
         size={modalSize}>
         <Modal.Header closeButton={!!showCloseButton}>
           <Modal.Title>

frontend/src/components/common/renderer-iframe/renderer-iframe.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { DarkModePreference } from '../../../redux/dark-mode/types'
+import { concatCssClasses } from '../../../utils/concat-css-classes'
 import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute'
 import { Logger } from '../../../utils/logger'
 import { isTestMode } from '../../../utils/test-modes'
@@ -168,7 +169,7 @@ export const RendererIframe: React.FC<RendererIframeProps> = ({
         allowFullScreen={true}
         ref={frameReference}
         referrerPolicy={'no-referrer'}
-        className={`border-0 ${frameClasses ?? ''}`}
+        className={concatCssClasses('border-0', frameClasses)}
         allow={'clipboard-write'}
         {...cypressAttribute('renderer-ready', rendererReady ? 'true' : 'false')}
         {...cypressAttribute('renderer-type', rendererType)}