@devtron-labs/devtron-fe-common-lib 0.0.51 → 0.0.52-beta-2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.51",
+    "version": "0.0.52-beta-2",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -47,7 +47,8 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router": "^5.3.0",
-        "react-router-dom": "^5.3.0"
+        "react-router-dom": "^5.3.0",
+        "react-draggable": "^4.4.5"
     },
     "dependencies": {
         "fast-json-patch": "^3.1.1",

package/src/Assets/Icon/ic-drag.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3335 9.33325C10.8858 9.33325 11.3335 8.88554 11.3335 8.33325C11.3335 7.78097 10.8858 7.33325 10.3335 7.33325C9.78121 7.33325 9.3335 7.78097 9.3335 8.33325C9.3335 8.88554 9.78121 9.33325 10.3335 9.33325Z" fill="#596168"/>
+<path d="M5.66675 9.33325C6.21903 9.33325 6.66675 8.88554 6.66675 8.33325C6.66675 7.78097 6.21903 7.33325 5.66675 7.33325C5.11446 7.33325 4.66675 7.78097 4.66675 8.33325C4.66675 8.88554 5.11446 9.33325 5.66675 9.33325Z" fill="#596168"/>
+<path d="M10.3335 5.33325C10.8858 5.33325 11.3335 4.88554 11.3335 4.33325C11.3335 3.78097 10.8858 3.33325 10.3335 3.33325C9.78121 3.33325 9.3335 3.78097 9.3335 4.33325C9.3335 4.88554 9.78121 5.33325 10.3335 5.33325Z" fill="#596168"/>
+<path d="M5.66675 5.33325C6.21903 5.33325 6.66675 4.88554 6.66675 4.33325C6.66675 3.78097 6.21903 3.33325 5.66675 3.33325C5.11446 3.33325 4.66675 3.78097 4.66675 4.33325C4.66675 4.88554 5.11446 5.33325 5.66675 5.33325Z" fill="#596168"/>
+<path d="M10.3335 13.3333C10.8858 13.3333 11.3335 12.8855 11.3335 12.3333C11.3335 11.781 10.8858 11.3333 10.3335 11.3333C9.78121 11.3333 9.3335 11.781 9.3335 12.3333C9.3335 12.8855 9.78121 13.3333 10.3335 13.3333Z" fill="#596168"/>
+<path d="M5.66675 13.3333C6.21903 13.3333 6.66675 12.8855 6.66675 12.3333C6.66675 11.781 6.21903 11.3333 5.66675 11.3333C5.11446 11.3333 4.66675 11.781 4.66675 12.3333C4.66675 12.8855 5.11446 13.3333 5.66675 13.3333Z" fill="#596168"/>
+</svg>

package/src/Common/Constants.ts

@@ -240,4 +240,10 @@ export const RepositoryAction = {
     CONTAINER: "CONTAINER",
     CHART_PULL: "CHART_PULL",
     CHART_PUSH: "CHART_PUSH"
-}
+}
+
+export enum APPROVAL_MODAL_TYPE {
+    CONFIG = 'CONFIG',
+    DEPLOYMENT = 'DEPLOYMENT',
+}
+export const MAX_Z_INDEX = 2147483647

package/src/Common/CustomInput/CustomInput.tsx

@@ -28,7 +28,8 @@ export function CustomInput({
     defaultValue,
     onKeyDown,
     required,
-    additionalErrorInfo
+    additionalErrorInfo,
+    inputWrapClassName = '',
 }: CustomInputProps) {
 
     function handleError(error: any): any[] {
@@ -92,7 +93,7 @@ export function CustomInput({
     }
 
     return (
-        <div className="flex column left top">
+        <div className={`flex column left top ${inputWrapClassName}`}>
            {renderInputLabel()}
             <input
                 data-testid={dataTestid}

package/src/Common/CustomInput/Types.ts

@@ -27,4 +27,5 @@ export interface CustomInputProps {
     onKeyDown?: (e) => void
     required?: boolean
     additionalErrorInfo?: React.ReactNode
+    inputWrapClassName?: string
 }

package/src/Common/DraggableWrapper/DraggableButton.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { ReactComponent as ICDrag } from '../../Assets/Icon/ic-drag.svg'
+import { DraggableButtonProps } from './types'
+
+export default function DraggableButton({ dragClassName }: DraggableButtonProps) {
+    return (
+        <button
+            type="button"
+            className={`${dragClassName} dc__outline-none-imp dc__no-border p-0 dc__transparent h-20`}
+        >
+            <ICDrag className="dc__grabbable icon-dim-20 fcn-6" />
+        </button>
+    )
+}

package/src/Common/DraggableWrapper/DraggableWrapper.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useRef, useState } from 'react'
+import Draggable, { ControlPosition, DraggableData } from 'react-draggable'
+import { DraggableWrapperProps, DraggablePositionVariant } from './types'
+import { useWindowSize } from '../Hooks'
+import { MAX_Z_INDEX } from '../Constants'
+
+/**
+ * TODO: import it as lazy, after it is supported in common
+ * 1. If using react select please use menuPlacement='auto'
+ * 2. dragSelector will be used to identify the grabbable button that will grab the div to drag
+ * 3. parentRef is the reference point from which we will derive the base top:0 ,left: 0 position
+ */
+export default function DraggableWrapper({
+    children,
+    zIndex = MAX_Z_INDEX,
+    positionVariant,
+    dragSelector,
+    parentRef,
+    boundaryGap = 16,
+    childDivProps = {},
+}: DraggableWrapperProps) {
+    const windowSize = useWindowSize()
+    const nodeRef = useRef<HTMLDivElement>(null)
+
+    const [position, setPosition] = useState<ControlPosition>({
+        x: 0,
+        y: 0,
+    })
+
+    const getDefaultPosition = (positionVariant: DraggablePositionVariant): ControlPosition => {
+        // if this return x: 0, y: 0 then it will be top left corner of parentDiv
+        const parentRect =
+            parentRef?.current?.getBoundingClientRect() ??
+            ({
+                width: 0,
+                height: 0,
+                top: 0,
+                left: 0,
+                bottom: 0,
+            } as DOMRect)
+        const nodeRefHeight = nodeRef.current?.getBoundingClientRect().height ?? 0
+        const nodeRefWidth = nodeRef.current?.getBoundingClientRect().width ?? 0
+
+        switch (positionVariant) {
+            case DraggablePositionVariant.PARENT_BOTTOM_CENTER: {
+                // currently at parentRect.x and need to start to the center of its width and half of node should lie on left of center and other half on right
+                const x = (parentRect.width - nodeRefWidth) / 2
+                // currently at parentRect.y now parent height can be greater than windowSize.height so taking min
+                // subtracting parentRect.top since window height already contains that
+                const baseY =
+                    parentRect.height > windowSize.height ? windowSize.height - parentRect.top : parentRect.height
+                const y = baseY - nodeRefHeight - boundaryGap
+                return { x, y }
+            }
+            // Add more cases for other variants if needed
+            default: {
+                // Since need node to be in center of screen so subtracting width/2 by left of parentRect it will start the node from center but want node's midpoint at center so subtracting node's width from it.
+                const x = windowSize.width / 2 - parentRect.left - nodeRefWidth / 2
+                // subtracting top since windowSize already contains that
+                const y = windowSize.height - parentRect.top - nodeRefHeight - boundaryGap
+
+                return { x, y }
+            }
+        }
+    }
+
+    // On change of windowSize we will reset the position to default
+    useEffect(() => {
+        const defaultPosition = getDefaultPosition(positionVariant)
+        setPosition(defaultPosition)
+    }, [nodeRef, positionVariant, windowSize])
+
+    // Would be called on drag and will not update the state if the new position is out of window screen
+    function handlePositionChange(e, data: DraggableData) {
+        const offsetX = parentRef?.current?.getBoundingClientRect().left ?? 0
+        const offsetY = parentRef?.current?.getBoundingClientRect().top ?? 0
+
+        const nodeRefHeight = nodeRef.current?.getBoundingClientRect().height ?? 0
+        const nodeRefWidth = nodeRef.current?.getBoundingClientRect().width ?? 0
+
+        if (
+            offsetX + data.x + nodeRefWidth + boundaryGap > windowSize.width ||
+            offsetY + data.y + nodeRefHeight + boundaryGap > windowSize.height ||
+            offsetX + data.x < 0 ||
+            offsetY + data.y < 0
+        ) {
+            return
+        }
+
+        setPosition({
+            x: data.x,
+            y: data.y,
+        })
+    }
+
+    return (
+        <div
+            className="dc__position-fixed"
+            style={{
+                zIndex,
+            }}
+        >
+            <Draggable handle={dragSelector} nodeRef={nodeRef} position={position} onDrag={handlePositionChange}>
+                <div
+                    ref={nodeRef}
+                    {...childDivProps}
+                    style={{
+                        zIndex,
+                    }}
+                >
+                    {children}
+                </div>
+            </Draggable>
+        </div>
+    )
+}

package/src/Common/DraggableWrapper/index.ts

@@ -0,0 +1,3 @@
+export { default as DraggableWrapper } from './DraggableWrapper'
+export { default as DraggableButton } from './DraggableButton'
+export * from './types'

package/src/Common/DraggableWrapper/types.ts

@@ -0,0 +1,27 @@
+import { HTMLAttributes, ReactNode, RefObject } from 'react'
+
+export enum DraggablePositionVariant {
+    PARENT_BOTTOM_CENTER = 'PARENT_BOTTOM_CENTER',
+    SCREEN_BOTTOM_CENTER = 'SCREEN_BOTTOM_CENTER',
+    // Can add more based on requirement
+}
+
+export interface DraggableWrapperProps {
+    children: ReactNode
+    zIndex?: number
+    positionVariant?: DraggablePositionVariant
+    /**
+     * dragSelector (class - (append with .), id, etc) will be used to identify the grabbable button that will grab the div to drag
+     */
+    dragSelector: string
+    parentRef?: RefObject<HTMLDivElement>
+    boundaryGap?: number
+    childDivProps?: HTMLAttributes<HTMLDivElement>
+}
+
+/**
+ * dragClassName is the class that we feed to Draggable to identify dragging buttons
+ */
+export interface DraggableButtonProps {
+    dragClassName: string
+}

package/src/Common/EmptyState/GenericEmptyState.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 import AppNotDeployed from '../../Assets/Img/app-not-deployed.png'
 import { GenericEmptyStateType, ImageType } from '../Types'
 
@@ -19,24 +19,56 @@ function GenericEmptyState({
     SvgImage,
     noImage,
     layout = 'column',
-    contentClassName = ''
+    contentClassName = '',
+    imageStyles = {},
 }: GenericEmptyStateType): JSX.Element {
-    const isRowLayout = layout === 'row';
-    
+    const isRowLayout = layout === 'row'
+
+    const getImageSize = () => {
+        switch (imageType) {
+            case ImageType.Large:
+                return { width: '250px', height: '200px' }
+            default:
+                return { width: '200px', height: '160px' }
+        }
+    }
+
     return (
         <div
-            className={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${classname ? classname : ''}`}
+            className={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${
+                classname ? classname : ''
+            }`}
             style={styles}
             data-testid="generic-empty-state"
             {...(heightToDeduct >= 0 && { style: { ...styles, height: `calc(100vh - ${heightToDeduct}px)` } })}
-        >   
-            {!SvgImage ? !noImage && <img className={imageClassName ? imageClassName : ''}
-                src={image || AppNotDeployed}
-                width={imageType === ImageType.Medium ? '200' : '250'}
-                height={imageType === ImageType.Medium ? '160' : '200'}
-                alt="empty-state"
-            /> : <SvgImage />}
-            <div className={`flex column dc__gap-10 dc__mxw-300 ${isRowLayout ? 'dc__align-start' : ''} ${contentClassName}`}>
+        >
+            {!SvgImage ? (
+                !noImage && (
+                    <img
+                        className={imageClassName ? imageClassName : ''}
+                        src={image || AppNotDeployed}
+                        style={{
+                            ...imageStyles,
+                            width: `${getImageSize().width}`,
+                            height: `${getImageSize().height}`,
+                        }}
+                        alt="empty-state"
+                    />
+                )
+            ) : (
+                <SvgImage
+                    style={{
+                        ...imageStyles,
+                        width: `${getImageSize().width}`,
+                        height: `${getImageSize().height}`,
+                    }}
+                />
+            )}
+            <div
+                className={`flex column dc__gap-10 dc__mxw-300 ${
+                    isRowLayout ? 'dc__align-start' : ''
+                } ${contentClassName}`}
+            >
                 <h4 className="title fw-6 cn-9 mt-0 mb-0">{title}</h4>
                 {subTitle && <p className={`subtitle ${isRowLayout ? 'subtitle--text-start' : ''}`}>{subTitle}</p>}
                 {isButtonAvailable && renderButton()}

package/src/Common/Grid/Grid.tsx

@@ -10,6 +10,7 @@ export default function Grid({
     containerClass = '',
     itemClass = '',
     children,
+    ...containerDivProps
 }: GridProps) {
     const containerStyles = container ? { gap: spacing + 'px' } : {}
 
@@ -25,14 +26,18 @@ export default function Grid({
         }
 
         return (
-            <div className={`p-0 ${itemClass}`} style={itemStyles}>
+            <div className={`p-0 ${itemClass}`} style={itemStyles} {...containerDivProps}>
                 {children}
             </div>
         )
     }
 
     return (
-        <div className={`flex-wrap flexbox ${container ? containerClass : ''}`} style={containerStyles}>
+        <div
+            className={`flex-wrap flexbox ${container ? containerClass : ''}`}
+            style={containerStyles}
+            {...containerDivProps}
+        >
             {children}
         </div>
     )

package/src/Common/Grid/types.ts

@@ -1,4 +1,6 @@
-export interface GridProps {
+import { HTMLAttributes } from 'react'
+
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
     container?: boolean
     spacing?: number
     item?: boolean

package/src/Common/Hooks/UseWindowSize/UseWindowSize.tsx

@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react'
+
+let timeout
+
+const getSize = () => {
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    }
+}
+
+export const useWindowSize = () => {
+    const [windowSize, setWindowSize] = useState(getSize)
+
+    function handleResize(e) {
+        if (timeout) {
+            window.cancelAnimationFrame(timeout)
+        }
+
+        timeout = window.requestAnimationFrame(function () {
+            setWindowSize(getSize())
+        })
+    }
+
+    useEffect(() => {
+        window.addEventListener('resize', handleResize, false)
+        return () => window.removeEventListener('resize', handleResize, false)
+    }, [])
+
+    return windowSize
+}

package/src/Common/Hooks/index.ts

@@ -1,2 +1,3 @@
 export { useSuperAdmin } from './UseSuperAdmin/UseSuperAdmin'
 export { useClickOutside } from './UseClickOutside/UseClickOutside'
+export { useWindowSize } from './UseWindowSize/UseWindowSize'

package/src/Common/Types.ts

@@ -94,6 +94,7 @@ export interface GenericEmptyStateType {
     imageClassName?: string
     children?: ReactNode
     noImage?: boolean
+    imageStyles?: CSSProperties
     /**
      * @default 'column'
      */

package/src/Common/index.ts

@@ -45,3 +45,4 @@ export * from './DevtronProgressing'
 export { default as ChartVersionAndTypeSelector } from './ChartVersionAndTypeSelector'
 export * from './AddCDButton'
 export * from './CustomInput'
+export * from './DraggableWrapper'