Merge branch 'main' into feat/adv-base-template-gui

Author: Elessar1802

.eslintignore

@@ -30,7 +30,6 @@ src/Common/DebouncedSearch/__tests__/DebouncedSearch.test.tsx
 src/Common/DeleteComponentModal/DeleteComponent.tsx
 src/Common/DevtronProgressing/DevtronProgressing.tsx
 src/Common/Dialogs/ConfirmationDialog.tsx
-src/Common/Dialogs/DeleteDialog.tsx
 src/Common/Dialogs/DialogForm.tsx
 src/Common/Dialogs/ForceDeleteDialog.tsx
 src/Common/DraggableWrapper/DraggableButton.tsx

.eslintrc.cjs

@@ -92,7 +92,7 @@ module.exports = {
       'react/react-in-jsx-scope': 'off',
       // additional rules:
       '@typescript-eslint/no-floating-promises': 'error',
-      "import/prefer-default-export": "off",
+      'import/prefer-default-export': 'off',
       'import/extensions': [
           'warn',
           'ignorePackages',
@@ -103,6 +103,7 @@ module.exports = {
               tsx: 'never',
           },
       ],
+      'no-restricted-exports': 'off',
   },
   overrides: [
       {
@@ -124,4 +125,4 @@ module.exports = {
       },
   },
   ignorePatterns: [".eslintrc.cjs", "vite.config.ts"],
-}
+}

.github/workflows/ci.yml

@@ -7,6 +7,7 @@ on:
       - synchronize
       - edited
       - reopened
+      - ready_for_review
 
 jobs:
   ci:

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.91-beta-1",
+    "version": "0.0.91-beta-2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -23,12 +23,12 @@
     ],
     "scripts": {
         "prepare": "node -e \"try { require('husky').install() } catch (e) {}\"",
-        "lint": "tsc --noEmit && eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings 0",
+        "lint": "tsc --noEmit && NODE_OPTIONS=--max_old_space_size=8192 eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings 0",
         "lint-fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
         "test": "exit 0",
-        "dev": "vite",
-        "build": "vite build --sourcemap",
-        "build-watch": "vite build --sourcemap --watch",
+        "dev": "NODE_OPTIONS=--max_old_space_size=8192 vite",
+        "build": "NODE_OPTIONS=--max_old_space_size=8192 vite build --sourcemap",
+        "build-watch": "NODE_OPTIONS=--max_old_space_size=8192 vite build --sourcemap --watch",
         "build-lib": "vite build",
         "preview": "vite preview",
         "lint-staged": "lint-staged"

package.json

@@ -14,13 +14,30 @@
  * limitations under the License.
  */
 
-import React from 'react'
+import React, { ChangeEvent, useState } from 'react'
 import warn from '../../Assets/Img/delete-medium.svg'
 import { Progressing } from '../Progressing'
 import ConfirmationDialog from './ConfirmationDialog'
 import { DeleteDialogProps } from './Types'
+import { CustomInput } from '../CustomInput'
+
+export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.FC<any> } = ({
+    showDeleteConfirmation: _showDeleteConfirmation,
+    deleteConfirmationText = null,
+    ...props
+}: DeleteDialogProps) => {
+    const [confirmationText, setConfirmationText] = useState('')
+
+    const showDeleteConfirmation = _showDeleteConfirmation && !!deleteConfirmationText
+    const isDeleteDisabled =
+        props.apiCallInProgress ||
+        props.disabled ||
+        (showDeleteConfirmation && deleteConfirmationText !== confirmationText)
+
+    const handleConfirmationTextChange = (e: ChangeEvent<HTMLInputElement>) => {
+        setConfirmationText(e.target.value)
+    }
 
-export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.FC<any> } = (props) => {
     const handleDelete = (e: React.MouseEvent) => {
         if (props.shouldStopPropagation) {
             e.stopPropagation()
@@ -29,6 +46,18 @@ export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.F
         props.delete()
     }
 
+    const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Enter' && !isDeleteDisabled) {
+            event.preventDefault()
+
+            if (props.shouldStopPropagation) {
+                event.stopPropagation()
+            }
+
+            props.delete()
+        }
+    }
+
     const handleModalClose = (e: React.MouseEvent) => {
         if (props.shouldStopPropagation) {
             e.stopPropagation()
@@ -37,13 +66,34 @@ export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.F
         props.closeDelete()
     }
 
+    const getLabel = () => (
+        <span>
+            Type
+            <span className="fw-6 dc__word-break">&nbsp;&apos;{deleteConfirmationText}&apos;&nbsp;</span>
+            to confirm
+        </span>
+    )
+
     return (
         <ConfirmationDialog className="confirmation-dialog__body--w-400">
             <ConfirmationDialog.Icon src={warn} />
             <ConfirmationDialog.Body title={props.title}>
                 <div className="fs-13 cn-7 lh-1-54 w-100">
                     {props.description ? props.description : null}
                     {props.children}
+                    {showDeleteConfirmation && (
+                        <CustomInput
+                            name="delete-confirmation"
+                            value={confirmationText}
+                            onChange={handleConfirmationTextChange}
+                            label={getLabel()}
+                            inputWrapClassName="mt-12 w-100"
+                            placeholder={`Type ${deleteConfirmationText} to confirm`}
+                            isRequiredField
+                            onKeyDown={handleKeyDown}
+                            autoFocus
+                        />
+                    )}
                 </div>
             </ConfirmationDialog.Body>
             <ConfirmationDialog.ButtonGroup>
@@ -61,7 +111,7 @@ export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.F
                         type="button"
                         className="cta delete cta-cd-delete-modal ml-16"
                         onClick={handleDelete}
-                        disabled={props.apiCallInProgress || props.disabled}
+                        disabled={isDeleteDisabled}
                         data-testid="dialog-delete"
                     >
                         {props.apiCallInProgress ? (
@@ -78,6 +128,7 @@ export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.F
     )
 }
 
-const DeleteDialogDescription = (props) => <>{props.children}</>
+// eslint-disable-next-line react/jsx-no-useless-fragment
+const DeleteDialogDescription = ({ children }: Pick<DeleteDialogProps, 'children'>) => <>{children}</>
 
 DeleteDialog.Description = DeleteDialogDescription

src/Assets/Icon/ic-arrow-square-out.svg

@@ -16,7 +16,23 @@
 
 import { ReactNode } from 'react'
 
-export interface DeleteDialogProps {
+type WithOrWithoutDeleteConfirmationType =
+    | {
+          showDeleteConfirmation: true
+          /**
+           * If added, confirmation input is shown
+           */
+          deleteConfirmationText: string
+      }
+    | {
+          showDeleteConfirmation?: never
+          /**
+           * If added, confirmation input is shown
+           */
+          deleteConfirmationText?: never
+      }
+
+export type DeleteDialogProps = {
     title: string
     description?: string
     closeDelete: () => void
@@ -28,7 +44,8 @@ export interface DeleteDialogProps {
     buttonPrimaryText?: string
     shouldStopPropagation?: boolean
     disabled?: boolean
-}
+    children?: ReactNode
+} & WithOrWithoutDeleteConfirmationType
 
 export interface ForceDeleteDialogType {
     onClickDelete: () => void

src/Common/Dialogs/DeleteDialog.tsx

@@ -14,20 +14,37 @@
  * limitations under the License.
  */
 
-import { GenericEmptyStateType } from '../Types'
 import noResult from '../../Assets/Img/empty-noresult@2x.png'
 import GenericEmptyState from './GenericEmptyState'
+import { GenericFilterEmptyStateProps } from './types'
 
-const GenericFilterEmptyState = (
-    props: Omit<GenericEmptyStateType, 'image' | 'title' | 'subTitle'> &
-        Partial<Pick<GenericEmptyStateType, 'title' | 'subTitle'>>,
-) => (
-    <GenericEmptyState
-        image={noResult}
-        title="No results"
-        subTitle="We couldn’t find any matching results"
-        {...props}
-    />
-)
+/**
+ * Empty state when no filters are applied
+ */
+const GenericFilterEmptyState = ({
+    handleClearFilters,
+    isButtonAvailable,
+    renderButton,
+    ...props
+}: GenericFilterEmptyStateProps) => {
+    const isClearFilterButtonAvailable = !!handleClearFilters
+
+    const renderClearFilterButton = () => (
+        <button type="button" onClick={handleClearFilters} className="cta secondary flex h-32 lh-20-imp">
+            Clear Filters
+        </button>
+    )
+
+    return (
+        <GenericEmptyState
+            image={noResult}
+            title="No results"
+            subTitle="We couldn’t find any matching results"
+            {...props}
+            isButtonAvailable={isClearFilterButtonAvailable || isButtonAvailable}
+            renderButton={isClearFilterButtonAvailable ? renderClearFilterButton : renderButton}
+        />
+    )
+}
 
 export default GenericFilterEmptyState

src/Common/Dialogs/Types.ts

@@ -0,0 +1,21 @@
+import { GenericEmptyStateType } from '../Types'
+
+export type GenericFilterEmptyStateProps = Omit<
+    GenericEmptyStateType,
+    'image' | 'title' | 'subTitle' | 'isButtonAvailable' | 'renderButton'
+> &
+    Partial<Pick<GenericEmptyStateType, 'title' | 'subTitle'>> &
+    (
+        | {
+              /**
+               * If provided, it will have priority over the isButtonAvailable prop
+               * and render clear filter button
+               */
+              handleClearFilters?: () => void
+              isButtonAvailable?: never
+              renderButton?: never
+          }
+        | (Pick<GenericEmptyStateType, 'isButtonAvailable' | 'renderButton'> & {
+              handleClearFilters?: never
+          })
+    )