Merge branch 'main' into feat/aws-code-commit

Author: AbhishekA1509

.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.90-beta-3",
+    "version": "0.0.94",
     "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

@@ -1,3 +1,19 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 .code-editor__header {
     height: 40px;
     background: var(--N100);

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

@@ -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