Merge branch 'develop' of https://github.com/devtron-labs/devtron-fe-common-lib into feat/security-modal

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.11-beta-1",
+    "version": "0.3.15",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -87,6 +87,7 @@
         "react-router": "^5.3.0",
         "react-router-dom": "^5.3.0",
         "react-select": "5.8.0",
+        "react-keybind": "^0.9.4",
         "rxjs": "^7.8.1",
         "yaml": "^2.4.1"
     },

package.json

@@ -548,3 +548,6 @@ export const VULNERABILITIES_SORT_PRIORITY = {
     low: 4,
     unknown: 5,
 }
+
+// TODO: might not work need to verify
+export const IS_PLATFORM_MAC_OS = window.navigator.userAgent.toUpperCase().includes('MAC')

src/Assets/Icon/ic-collapse-all.svg

@@ -37,7 +37,7 @@ export const CustomInput = ({
     rootClassName = '',
     autoComplete = 'off',
     helperText = '',
-    handleOnBlur,
+    onBlur,
     readOnly = false,
     noTrim = false,
     onKeyPress,
@@ -66,15 +66,15 @@ export const CustomInput = ({
         return error
     }
 
-    const onBlur = (event) => {
+    const handleOnBlur = (event) => {
         // NOTE: This is to prevent the input from being trimmed when the user do not want to trim the input
         if (!noTrim) {
             event.stopPropagation()
             event.target.value = event.target.value?.trim()
             onChange(event)
         }
-        if (typeof handleOnBlur === 'function') {
-            handleOnBlur(event)
+        if (typeof onBlur === 'function') {
+            onBlur(event)
         }
     }
 
@@ -127,7 +127,7 @@ export const CustomInput = ({
                     e.persist()
                     onChange(e)
                 }}
-                onBlur={onBlur}
+                onBlur={handleOnBlur}
                 onFocus={onFocus}
                 placeholder={placeholder}
                 value={value}

src/Assets/Icon/ic-expand-all.svg

@@ -34,7 +34,7 @@ export interface CustomInputProps {
     rootClassName?: string
     error?: string[] | string
     helperText?: ReactNode
-    handleOnBlur?: (e) => void
+    onBlur?: (e) => void
     readOnly?: boolean
     noTrim?: boolean
     onKeyPress?: (e) => void

src/Common/Constants.ts

@@ -60,7 +60,7 @@ export const TagDetails = ({
             {!hidePropagateTag && (
                 <div
                     className={`dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''} ${tagData.key.startsWith('devtron.ai/') ? 'cursor-not-allowed bcn-1' : ''}`}
-                    onClick={propagateTagToResource}
+                    onClick={!tagData?.isPropagateDisabled ? propagateTagToResource : null}
                     data-testid={`propagate-tag-${index}`}
                 >
                     <InjectTag className={`icon-dim-20 mt-4 ${tagData.propagate ? 'scn-0' : ''}`} />

src/Common/CustomInput/CustomInput.tsx

@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import info from '../../Assets/Icon/ic-info-filled.svg'
 import { ConfirmationDialog, DeleteDialog } from '../Dialogs'
 import { ServerErrors } from '../ServerError'
 import { DeleteComponentProps } from './types'
 import { ToastManager, ToastVariantType } from '@Shared/Services'
+import { showError } from '@Common/Helper'
 
 const DeleteComponent = ({
     setDeleting,
@@ -36,11 +37,13 @@ const DeleteComponent = ({
     configuration = '',
     closeCustomComponent,
 }: DeleteComponentProps) => {
+    const [isDeleting, setIsDeleting] = useState(false)
     const [showCannotDeleteDialogModal, setCannotDeleteDialogModal] = useState(false)
     const { push } = useHistory()
 
     async function handleDelete() {
-        setDeleting(true)
+        setDeleting?.(true)
+        setIsDeleting(true)
         try {
             await deleteComponent(payload)
             ToastManager.showToast({
@@ -59,9 +62,12 @@ const DeleteComponent = ({
         } catch (serverError) {
             if (serverError instanceof ServerErrors && serverError.code === 500) {
                 setCannotDeleteDialogModal(true)
+            } else {
+                showError(serverError)
             }
         } finally {
-            setDeleting(false)
+            setDeleting?.(false)
+            setIsDeleting(false)
         }
     }
 
@@ -92,6 +98,7 @@ const DeleteComponent = ({
             delete={handleDelete}
             closeDelete={() => toggleConfirmation(false)}
             dataTestId="delete-dialog"
+            apiCallInProgress={isDeleting}
         >
             <DeleteDialog.Description>
                 <p>Are you sure you want to delete this {configuration || component}? </p>

src/Common/CustomInput/Types.ts

@@ -15,7 +15,10 @@
  */
 
 export interface DeleteComponentProps {
-    setDeleting: (boolean) => void
+    /**
+     * @deprecated - Delete component internally handles loading for the `Delete Button`.
+     */
+    setDeleting?: (boolean) => void
     toggleConfirmation: any
     deleteComponent: (any) => Promise<any>
     title: string

src/Common/CustomTagSelector/TagDetails.tsx

@@ -206,110 +206,6 @@ export function getCookie(sKey) {
     )
 }
 
-export function useForm(stateSchema, validationSchema = {}, callback) {
-    const [state, setState] = useState(stateSchema)
-    const [disable, setDisable] = useState(true)
-    const [isDirty, setIsDirty] = useState(false)
-
-    // Disable button in initial render.
-    useEffect(() => {
-        setDisable(true)
-    }, [])
-
-    // For every changed in our state this will be fired
-    // To be able to disable the button
-    useEffect(() => {
-        if (isDirty) {
-            setDisable(validateState(state))
-        }
-    }, [state, isDirty])
-
-    // Used to disable submit button if there's an error in state
-    // or the required field in state has no value.
-    // Wrapped in useCallback to cached the function to avoid intensive memory leaked
-    // in every re-render in component
-    const validateState = useCallback(
-        (state) => {
-            // check errors in all fields
-            const hasErrorInState = Object.keys(validationSchema).some((key) => {
-                const isInputFieldRequired = validationSchema[key].required
-                const stateValue = state[key].value // state value
-                const stateError = state[key].error // state error
-                return (isInputFieldRequired && !stateValue) || stateError
-            })
-            return hasErrorInState
-        },
-        [state, validationSchema],
-    )
-
-    function validateField(name, value): string | string[] {
-        if (validationSchema[name].required) {
-            if (!value) {
-                return 'This is a required field.'
-            }
-        }
-
-        function _validateSingleValidator(validator, value) {
-            if (value && !validator.regex.test(value)) {
-                return false
-            }
-            return true
-        }
-
-        // single validator
-        const _validator = validationSchema[name].validator
-        if (_validator && typeof _validator === 'object') {
-            if (!_validateSingleValidator(_validator, value)) {
-                return _validator.error
-            }
-        }
-
-        // multiple validators
-        const _validators = validationSchema[name].validators
-        if (_validators && typeof _validators === 'object' && Array.isArray(_validators)) {
-            const errors = []
-            _validators.forEach((_validator) => {
-                if (!_validateSingleValidator(_validator, value)) {
-                    errors.push(_validator.error)
-                }
-            })
-            if (errors.length > 0) {
-                return errors
-            }
-        }
-
-        return ''
-    }
-
-    const handleOnChange = useCallback(
-        (event) => {
-            setIsDirty(true)
-
-            const { name, value } = event.target
-            const error = validateField(name, value)
-            setState((prevState) => ({
-                ...prevState,
-                [name]: { value, error },
-            }))
-        },
-        [validationSchema],
-    )
-
-    const handleOnSubmit = (event) => {
-        event.preventDefault()
-        const newState = Object.keys(validationSchema).reduce((agg, curr) => {
-            agg[curr] = { ...state[curr], error: validateField(curr, state[curr].value) }
-            return agg
-        }, state)
-        if (!validateState(newState)) {
-            callback(state)
-        } else {
-            setState({ ...newState })
-        }
-    }
-    return { state, disable, handleOnChange, handleOnSubmit }
-}
-
 export function handleUTCTime(ts: string, isRelativeTime = false) {
     let timestamp = ''
     try {

src/Common/DeleteComponentModal/DeleteComponent.tsx

@@ -0,0 +1,18 @@
+import { KEYBOARD_KEYS_MAP, TooltipProps } from './types'
+
+const ShortcutKeyComboTooltipContent = ({ text, combo }: TooltipProps['shortcutKeyCombo']) => (
+    <div className="flexbox dc__gap-8 px-8 py-4 flex-wrap">
+        <span className="lh-18 fs-12 fw-4 cn-0">{text}</span>
+        {!!combo?.length && (
+            <div className="flexbox dc__gap-4 dc__align-items-center flex-wrap">
+                {combo.map((key) => (
+                    <span key={key} className="shortcut-keys__chip dc__capitalize lh-16 fs-11 fw-5 flex">
+                        {KEYBOARD_KEYS_MAP[key]}
+                    </span>
+                ))}
+            </div>
+        )}
+    </div>
+)
+
+export default ShortcutKeyComboTooltipContent

src/Common/DeleteComponentModal/types.ts

@@ -1,11 +1,14 @@
 import { useState, cloneElement } from 'react'
 import TippyJS from '@tippyjs/react'
 import { TooltipProps } from './types'
+import ShortcutKeyComboTooltipContent from './ShortcutKeyComboTooltipContent'
+import './styles.scss'
 
 const Tooltip = ({
+    shortcutKeyCombo,
     alwaysShowTippyOnHover,
-    // NOTE: if alwaysShowTippyOnHover is being passed by user don't apply truncation logic at all
-    showOnTruncate = alwaysShowTippyOnHover === undefined,
+    // NOTE: if alwaysShowTippyOnHover or shortcutKeyCombo are being passed by user don't apply truncation logic at all
+    showOnTruncate = alwaysShowTippyOnHover === undefined && shortcutKeyCombo === undefined,
     wordBreak = true,
     children: child,
     ...rest
@@ -22,17 +25,24 @@ const Tooltip = ({
         }
     }
 
-    return (!isTextTruncated || !showOnTruncate) && !alwaysShowTippyOnHover ? (
-        cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })
-    ) : (
+    const showTooltipWhenShortcutKeyComboProvided =
+        !!shortcutKeyCombo && (alwaysShowTippyOnHover === undefined || alwaysShowTippyOnHover)
+    const showTooltipOnTruncate = showOnTruncate && isTextTruncated
+
+    return showTooltipOnTruncate || showTooltipWhenShortcutKeyComboProvided || alwaysShowTippyOnHover ? (
         <TippyJS
             arrow={false}
             placement="top"
+            // NOTE: setting the default maxWidth to empty string so that we can override using css
+            maxWidth=""
             {...rest}
-            className={`default-tt ${wordBreak ? 'dc__word-break-all' : ''} dc__mxw-200-imp ${rest.className}`}
+            {...(shortcutKeyCombo ? { content: <ShortcutKeyComboTooltipContent {...shortcutKeyCombo} /> } : {})}
+            className={`${shortcutKeyCombo ? 'shortcut-keys__tippy' : 'default-tt'} ${wordBreak ? 'dc__word-break-all' : ''} dc__mxw-200 ${rest.className ?? ''}`}
         >
             {cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })}
         </TippyJS>
+    ) : (
+        cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })
     )
 }
 

src/Common/Helper.tsx

@@ -1,2 +1,3 @@
 export { default as Tooltip } from './Tooltip'
+export type { SupportedKeyboardKeysType } from './types'
 export { TOOLTIP_CONTENTS } from './constants'

src/Common/Tooltip/ShortcutKeyComboTooltipContent.tsx

@@ -0,0 +1,19 @@
+.tippy-box.shortcut-keys__tippy {
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.20);
+    background: var(--N900);
+
+    & > .tippy-content {
+        padding: 0;
+    }
+
+    & .shortcut-keys__chip {
+        border-radius: 4px;
+        border: 0.5px solid rgba(255, 255, 255, 0.20);
+        background: var(--N800);
+        box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.20);
+        padding: 0 2px;
+        min-width: 16px;
+        max-width: 250px;
+    }
+}