chore: merge rc-v0.40.0

.eslintignore

@@ -39,7 +39,6 @@ src/Common/PopupMenu.tsx
 src/Common/Progressing.tsx
 src/Common/RJSF/config.ts
 src/Common/RJSF/templates/ArrayFieldTemplate.tsx
-src/Common/RJSF/templates/BaseInput.tsx
 src/Common/RJSF/templates/ButtonTemplates/AddButton.tsx
 src/Common/RJSF/templates/ButtonTemplates/RemoveButton.tsx
 src/Common/RJSF/templates/ButtonTemplates/SubmitButton.tsx

.eslintrc.cjs

@@ -151,6 +151,10 @@ module.exports = {
                                 group: ['IconBase'],
                                 message: 'Please use "Icon" component instead.',
                             },
+                            {
+                                group: ['IllustrationBase'],
+                                message: 'Please use "Illustration" component instead.',
+                            },
                         ],
                     },
                 ],

.husky/pre-commit

@@ -20,9 +20,9 @@
 echo "Running pre-commit hook..."
 
 # Check for changes in the Icon folder
-CHANGED_FILES=$(git diff --cached --name-only --diff-filter=ACMR | grep -E 'IconV2/|generate-icon.cjs' || true)
+ICON_CHANGED_FILES=$(git diff --cached --name-only --diff-filter=ACMR | grep -E 'IconV2/|generate-icon.cjs' || true)
 
-if [ -n "$CHANGED_FILES" ]; then
+if [ -n "$ICON_CHANGED_FILES" ]; then
     echo "Changes detected in the Icon folder or icon generation script. Running icon generation script..."
 
     if ! npm run generate-icon; then
@@ -36,6 +36,23 @@ else
     echo "No changes in the IconsV2 folder. Skipping icon generation."
 fi
 
+# Check for changes in the Illustration folder
+ILLUSTRATION_CHANGED_FILES=$(git diff --cached --name-only --diff-filter=ACMR | grep -E 'Illustration/|generate-illustration.cjs' || true)
+
+if [ -n "$ILLUSTRATION_CHANGED_FILES" ]; then
+    echo "Changes detected in the Illustration folder or illustration generation script. Running illustration generation script..."
+
+    if ! npm run generate-illustration; then
+        echo "Error: Illustration generation script failed."
+        exit 1
+    fi
+
+    echo "Illustration.tsx updated. Adding to commit."
+    git add src/Shared/Components/Illustration/Illustration.tsx
+else
+    echo "No changes in the Illustration folder. Skipping illustration generation."
+fi
+
 # TypeScript check
 if ! npx tsc --noEmit; then
     echo "Error: TypeScript check failed."

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.17.1",
+    "version": "1.18.0",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -33,7 +33,8 @@
         "preview": "vite preview",
         "lint-staged": "lint-staged",
         "postinstall": "patch-package",
-        "generate-icon": "node ./scripts/generate-icon.cjs"
+        "generate-icon": "node ./scripts/generate-icon.cjs",
+        "generate-illustration": "node ./scripts/generate-illustration.cjs"
     },
     "devDependencies": {
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",

scripts/generate-illustration.cjs

@@ -0,0 +1,104 @@
+const fs = require('fs')
+const path = require('path')
+const { execFile } = require('child_process')
+
+// Base path relative to the current script
+const basePath = path.resolve(__dirname, '../src')
+
+// Directory containing SVG, Webp illustrations and the output file
+const illustrationsDir = path.join(basePath, 'Assets', 'Illustration')
+const outputFile = path.join(basePath, 'Shared', 'Components', 'Illustration', 'Illustration.tsx')
+
+const runESLint = (filePath) => {
+    execFile('npx', ['eslint', filePath, '--fix'], (error, stdout, stderr) => {
+        if (error) {
+            console.error(`Error running ESLint: ${error.message}`)
+            return
+        }
+        if (stderr) {
+            console.error(`ESLint stderr: ${stderr}`)
+        }
+        if (stdout) {
+            console.log(`ESLint output:\n${stdout}`)
+        }
+        console.log('ESLint completed successfully.')
+    })
+}
+
+const generateIllustrationComponent = () => {
+    // Read all files in the illustrations directory
+    const files = fs.readdirSync(illustrationsDir)
+
+    // Filter for SVG files
+    const svgFiles = files.filter((file) => file.endsWith('.svg'))
+    // Filter for WEBP files
+    const webpFiles = files.filter((file) => file.endsWith('.webp'))
+
+    // Generate import statements and the illustration map
+    const imports = []
+    const illustrationMapEntries = []
+
+    svgFiles.forEach((file) => {
+        // Remove the .svg extension
+        const illustrationName = path.basename(file, '.svg')
+        // Convert illustration-name to IllustrationName for importName
+        const importName = illustrationName
+            .split('-')
+            .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+            .join('')
+        // Push imports statement
+        imports.push(`import { ReactComponent as ${importName} } from '@Illustrations/${file}'`)
+        // Push illustrations to illustrationMap
+        illustrationMapEntries.push(`["${illustrationName}"]: ${importName},`)
+    })
+
+    webpFiles.forEach((file) => {
+        // Remove the .webp extension
+        const illustrationName = path.basename(file, '.webp')
+        // Convert illustration-name to IllustrationName for importName
+        const importName = illustrationName.replace(/(^\w|-\w)/g, (match) => match.replace('-', '').toUpperCase())
+        // Push imports statement
+        imports.push(`import ${importName} from '@Illustrations/${file}'`)
+        // Push illustrations to illustrationMap
+        illustrationMapEntries.push(`["${illustrationName}"]: ${importName},`)
+    })
+
+    // Generate the Illustration.tsx content
+    const content = `
+    // NOTE: This file is auto-generated. Do not edit directly. Run the script \`npm run generate-illustration\` to update.
+
+    ${imports.join('\n')}
+
+    // eslint-disable-next-line no-restricted-imports
+    import { IllustrationBase } from './IllustrationBase';
+    import { IllustrationBaseProps } from './types';
+
+    export const illustrationMap = {
+        ${illustrationMapEntries.join('\n')}
+    };
+
+    export type IllustrationName = keyof typeof illustrationMap;
+
+    export interface IllustrationProps extends Omit<IllustrationBaseProps, 'name' | 'illustrationMap'> {
+        /**
+         * The name of the illustration to render.
+         * @note The component will return either an img component or an SVG component based on the type of illustration (.svg, .webp)
+         */
+        name: keyof typeof illustrationMap;
+    }
+
+    export const Illustration = (props: IllustrationProps) => {
+        return <IllustrationBase {...props} illustrationMap={illustrationMap} />;
+    };
+`
+
+    // Write the content to the Illustration.tsx file
+    fs.writeFileSync(outputFile, content.trim(), 'utf-8')
+    console.log(`Illustration component file generated at: ${outputFile}`)
+
+    // Run ESLint on the generated file
+    runESLint(outputFile)
+}
+
+// Run the script
+generateIllustrationComponent()

src/Common/EmptyState/GenericEmptyState.tsx

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { Illustration } from '@Shared/Components'
+
 import AppNotDeployed from '../../Assets/Img/app-not-deployed.svg'
 import { GenericEmptyStateType, ImageType } from '../Types'
 
@@ -35,6 +37,7 @@ const GenericEmptyState = ({
     layout = 'column',
     contentClassName = '',
     imageStyles = {},
+    imgName,
 }: GenericEmptyStateType): JSX.Element => {
     const isRowLayout = layout === 'row'
 
@@ -54,7 +57,20 @@ const GenericEmptyState = ({
             data-testid="generic-empty-state"
         >
             {!SvgImage ? (
-                !noImage && (
+                !noImage &&
+                (imgName ? (
+                    <Illustration
+                        name={imgName}
+                        imageProps={{
+                            alt: 'empty-state',
+                            style: {
+                                width: `${getImageSize().width}`,
+                                height: `${getImageSize().height}`,
+                                ...imageStyles,
+                            },
+                        }}
+                    />
+                ) : (
                     <img
                         className={imageClassName || ''}
                         src={image || AppNotDeployed}
@@ -65,7 +81,7 @@ const GenericEmptyState = ({
                         }}
                         alt="empty-state"
                     />
-                )
+                ))
             ) : (
                 <SvgImage
                     style={{

src/Common/EmptyState/GenericFilterEmptyState.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import noResult from '@Images/empty-noresult@2x.png'
 import { Button, ButtonVariantType } from '@Shared/Components'
 import { ComponentSizeType } from '@Shared/constants'
 
@@ -44,7 +43,7 @@ const GenericFilterEmptyState = ({
 
     return (
         <GenericEmptyState
-            image={noResult}
+            imgName="img-no-result"
             title="No results"
             subTitle="We couldn’t find any matching results"
             {...props}

src/Common/Hooks/UseIsTextTruncated/UseIsTextTruncated.ts

@@ -0,0 +1,26 @@
+import { useState } from 'react'
+
+import { SUB_PIXEL_ERROR } from './constants'
+
+const useIsTextTruncated = () => {
+    const [isTextTruncated, setIsTextTruncated] = useState(false)
+
+    const handleMouseEnterEvent: React.MouseEventHandler = (event) => {
+        const { currentTarget: node } = event
+        const isTextOverflowing =
+            node.scrollWidth > node.clientWidth + SUB_PIXEL_ERROR ||
+            node.scrollHeight > node.clientHeight + SUB_PIXEL_ERROR
+        if (isTextOverflowing && !isTextTruncated) {
+            setIsTextTruncated(true)
+        } else if (!isTextOverflowing && isTextTruncated) {
+            setIsTextTruncated(false)
+        }
+    }
+
+    return {
+        isTextTruncated,
+        handleMouseEnterEvent,
+    }
+}
+
+export default useIsTextTruncated

src/Common/Hooks/UseIsTextTruncated/constants.ts

@@ -0,0 +1 @@
+export const SUB_PIXEL_ERROR = 1

src/Common/Hooks/UseIsTextTruncated/index.ts

@@ -0,0 +1 @@
+export { default as useIsTextTruncated } from './UseIsTextTruncated'

src/Common/Hooks/index.ts

@@ -16,6 +16,7 @@
 
 export { useClickOutside } from './UseClickOutside/UseClickOutside'
 export { useGetUserRoles } from './UseGetUserRoles'
+export { useIsTextTruncated } from './UseIsTextTruncated'
 export * from './UseRegisterShortcut'
 export * from './useStateFilters'
 export * from './useUrlFilters'

src/Common/Modals/Modal.tsx

@@ -45,7 +45,7 @@ export const Modal = ({
 
     function disableWheel(e) {
         if (!preventWheelDisable) {
-            if (innerRef?.current.contains(e.target)) {
+            if (innerRef.current?.contains(e.target)) {
                 if (innerRef.current.clientHeight === innerRef.current.scrollHeight) {
                     e.preventDefault()
                 }

src/Common/RJSF/Form.tsx

@@ -20,6 +20,7 @@ import RJSF from '@rjsf/core'
 import { SCHEMA_07_VALIDATOR } from '@Shared/validations'
 
 import { templates, widgets } from './config'
+import { RJSF_FORM_SELECT_PORTAL_TARGET_ID } from './constants'
 import { FormProps } from './types'
 import {
     getFormStateFromFormData,
@@ -82,28 +83,32 @@ export const RJSFForm = forwardRef((props: FormProps, ref: FormProps['ref']) =>
     }
 
     return (
-        <Form
-            noHtml5Validate
-            showErrorList={false}
-            autoComplete="off"
-            {...props}
-            formData={formState}
-            {...(isUpdatePathKeywordPresent
-                ? {
-                      onChange: handleOnChange,
-                      onSubmit: handleOnSubmit,
-                  }
-                : {})}
-            className={`rjsf-form-template__container ${props.className || ''}`}
-            validator={validator}
-            templates={{
-                ...templates,
-                ...props.templates,
-            }}
-            formContext={formState}
-            widgets={{ ...widgets, ...props.widgets }}
-            translateString={translateString}
-            ref={ref}
-        />
+        <>
+            <Form
+                noHtml5Validate
+                showErrorList={false}
+                autoComplete="off"
+                {...props}
+                formData={formState}
+                {...(isUpdatePathKeywordPresent
+                    ? {
+                          onChange: handleOnChange,
+                          onSubmit: handleOnSubmit,
+                      }
+                    : {})}
+                className={`rjsf-form-template__container ${props.className || ''}`}
+                validator={validator}
+                templates={{
+                    ...templates,
+                    ...props.templates,
+                }}
+                formContext={formState}
+                widgets={{ ...widgets, ...props.widgets }}
+                translateString={translateString}
+                ref={ref}
+            />
+            {/* NOTE: due to stacking context issues, we send this id to SelectPicker menuPortalTarget prop */}
+            <div id={RJSF_FORM_SELECT_PORTAL_TARGET_ID} />
+        </>
     )
 })