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

package/package.json

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

package/src/Common/Constants.ts

@@ -242,4 +242,7 @@ export const RepositoryAction = {
     CHART_PUSH: "CHART_PUSH"
 }
 
-export const MAX_Z_INDEX = 2147483647
+export enum APPROVAL_MODAL_TYPE {
+    CONFIG = 'CONFIG',
+    DEPLOYMENT = 'DEPLOYMENT',
+}

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

package/src/Common/Grid/types.ts

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

package/src/Common/Hooks/index.ts

@@ -1,3 +1,2 @@
 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,4 +45,3 @@ export * from './DevtronProgressing'
 export { default as ChartVersionAndTypeSelector } from './ChartVersionAndTypeSelector'
 export * from './AddCDButton'
 export * from './CustomInput'
-export * from './DraggableWrapper'

package/dist/Common/DraggableWrapper/DraggableButton.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { DraggableButtonProps } from './types';
-export default function DraggableButton({ dragClassName }: DraggableButtonProps): JSX.Element;

package/dist/Common/DraggableWrapper/DraggableWrapper.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { DraggableWrapperProps } from './types';
-/**
- * TODO: import it as lazy, after it is supported in common
- * 1. If using react select please use menuPlacement='auto'
- * 2. dragClassName 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, positionVariant, dragClassName, parentRef, boundaryGap, childDivProps, }: DraggableWrapperProps): JSX.Element;

package/dist/Common/DraggableWrapper/index.d.ts

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

package/dist/Common/DraggableWrapper/types.d.ts

@@ -1,19 +0,0 @@
-import { HTMLAttributes } from 'react';
-export declare enum DraggablePositionVariant {
-    PARENT_BOTTOM_CENTER = "PARENT_BOTTOM_CENTER",
-    SCREEN_BOTTOM_CENTER = "SCREEN_BOTTOM_CENTER"
-}
-export interface DraggableWrapperProps {
-    children: React.ReactNode;
-    zIndex?: number;
-    positionVariant?: DraggablePositionVariant;
-    dragClassName: string;
-    parentRef?: React.RefObject<HTMLDivElement>;
-    boundaryGap?: number;
-    childDivProps?: HTMLAttributes<HTMLDivElement>;
-}
-/**
- * dragClassName is the class that we feed to Draggable to identify dragging buttons
- */
-export interface DraggableButtonProps extends Pick<DraggableWrapperProps, 'dragClassName'> {
-}

package/dist/Common/Hooks/UseWindowSize/UseWindowSize.d.ts

@@ -1,4 +0,0 @@
-export declare function useWindowSize(): {
-    width: number;
-    height: number;
-};

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

@@ -1,8 +0,0 @@
-<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/DraggableWrapper/DraggableButton.tsx

@@ -1,11 +0,0 @@
-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="dc__outline-none-imp dc__no-border p-0 dc__transparent h-20">
-            <ICDrag className={`${dragClassName} dc__grabbable icon-dim-20 fcn-6`} />
-        </button>
-    )
-}

package/src/Common/DraggableWrapper/DraggableWrapper.tsx

@@ -1,109 +0,0 @@
-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. dragClassName 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,
-    dragClassName,
-    parentRef,
-    boundaryGap = 16,
-    childDivProps = {},
-}: DraggableWrapperProps) {
-    const windowSize = useWindowSize()
-    const nodeRef = useRef<HTMLDivElement>(null)
-
-    const getDefaultPosition = (positionVariant: DraggablePositionVariant): ControlPosition => {
-        // if i 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,
-        }
-
-        switch (positionVariant) {
-            case DraggablePositionVariant.PARENT_BOTTOM_CENTER: {
-                const x = parentRect.width / 2 - nodeRef.current?.getBoundingClientRect().width / 2
-                const y =
-                    Math.min(parentRect.height, windowSize.height) -
-                    parentRect.top -
-                    nodeRef.current?.getBoundingClientRect().height -
-                    boundaryGap
-                return { x, y }
-            }
-            case DraggablePositionVariant.SCREEN_BOTTOM_CENTER: {
-                const x = windowSize.width / 2 - parentRect.left - nodeRef.current?.getBoundingClientRect().width / 2
-                const y =
-                    windowSize.height - parentRect.top - nodeRef.current?.getBoundingClientRect().height - boundaryGap
-
-                return { x, y }
-            }
-            // Add more cases for other variants if needed
-            default:
-                throw new Error('Please use DraggablePositionVariant enum')
-        }
-    }
-
-    const [position, setPosition] = useState<ControlPosition>({
-        x: 0,
-        y: 0,
-    })
-
-    // On change of windowSize we will reset the position to default
-    useEffect(() => {
-        const defaultPosition = getDefaultPosition(positionVariant)
-        setPosition(defaultPosition)
-    }, [nodeRef, positionVariant, windowSize])
-
-    function handlePositionChange(e, data: DraggableData) {
-        const offsetX = parentRef?.current?.getBoundingClientRect().left ?? 0
-        const offsetY = parentRef?.current?.getBoundingClientRect().top ?? 0
-
-        if (
-            offsetX + data.x + nodeRef.current?.getBoundingClientRect().width + boundaryGap > windowSize.width ||
-            offsetY + data.y + nodeRef.current?.getBoundingClientRect().height + boundaryGap > windowSize.height ||
-            offsetX + data.x < 0 ||
-            offsetY + data.y < 0
-        ) {
-            return
-        }
-
-        setPosition({
-            x: data.x,
-            y: data.y,
-        })
-    }
-
-    return (
-        // Check there might be a case if we need it to be absolute?
-        <div
-            className="dc__position-fixed"
-            style={{
-                zIndex,
-            }}
-        >
-            <Draggable handle={`.${dragClassName}`} nodeRef={nodeRef} position={position} onDrag={handlePositionChange}>
-                <div
-                    ref={nodeRef}
-                    {...childDivProps}
-                    style={{
-                        zIndex,
-                    }}
-                >
-                    {children}
-                </div>
-            </Draggable>
-        </div>
-    )
-}

package/src/Common/DraggableWrapper/index.ts

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

package/src/Common/DraggableWrapper/types.ts

@@ -1,22 +0,0 @@
-import { HTMLAttributes } 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: React.ReactNode
-    zIndex?: number
-    positionVariant?: DraggablePositionVariant
-    dragClassName: string
-    parentRef?: React.RefObject<HTMLDivElement>
-    boundaryGap?: number
-    childDivProps?: HTMLAttributes<HTMLDivElement>
-}
-
-/**
- * dragClassName is the class that we feed to Draggable to identify dragging buttons
- */
-export interface DraggableButtonProps extends Pick<DraggableWrapperProps, 'dragClassName'> {}

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

@@ -1,30 +0,0 @@
-import { useState, useEffect } from 'react'
-
-function getSize() {
-    return {
-        width: window.innerWidth,
-        height: window.innerHeight,
-    }
-}
-
-export function useWindowSize() {
-    let timeout
-    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
-}