Merge pull request #222 from devtron-labs/feat/create-plugin

feat: create plugin

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.22",
+    "version": "0.2.23",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -114,10 +114,10 @@ async function handleServerError(contentType, response) {
     throw serverError
 }
 
-async function fetchAPI(
+async function fetchAPI<K = object>(
     url: string,
     type: string,
-    data: object,
+    data: K,
     signal: AbortSignal,
     preventAutoLogout = false,
     isMultipartRequest?: boolean,
@@ -185,10 +185,10 @@ async function fetchAPI(
     )
 }
 
-function fetchInTime(
+function fetchInTime<T = object>(
     url: string,
     type: string,
-    data: object,
+    data: T,
     options?: APIOptions,
     isMultipartRequest?: boolean,
 ): Promise<ResponseType> {
@@ -227,23 +227,24 @@ function fetchInTime(
     })
 }
 
-export const post = (
+export const post = <T = any, K = object>(
     url: string,
-    data: object,
+    data: K,
     options?: APIOptions,
     isMultipartRequest?: boolean,
-): Promise<ResponseType> => fetchInTime(url, 'POST', data, options, isMultipartRequest)
+): Promise<ResponseType<T>> => fetchInTime<K>(url, 'POST', data, options, isMultipartRequest)
 
-export const put = (url: string, data: object, options?: APIOptions): Promise<ResponseType> =>
-    fetchInTime(url, 'PUT', data, options)
+export const put = <T = any, K = object>(url: string, data: K, options?: APIOptions): Promise<ResponseType<T>> =>
+    fetchInTime<K>(url, 'PUT', data, options)
 
-export const patch = (url: string, data: object, options?: APIOptions): Promise<ResponseType> =>
-    fetchInTime(url, 'PATCH', data, options)
+export const patch = <T = any, K = object>(url: string, data: K, options?: APIOptions): Promise<ResponseType<T>> =>
+    fetchInTime<K>(url, 'PATCH', data, options)
 
-export const get = (url: string, options?: APIOptions): Promise<ResponseType> => fetchInTime(url, 'GET', null, options)
+export const get = <T = any>(url: string, options?: APIOptions): Promise<ResponseType<T>> =>
+    fetchInTime(url, 'GET', null, options)
 
-export const trash = (url: string, data?: object, options?: APIOptions): Promise<ResponseType> =>
-    fetchInTime(url, 'DELETE', data, options)
+export const trash = <T = any, K = object>(url: string, data?: K, options?: APIOptions): Promise<ResponseType<T>> =>
+    fetchInTime<K>(url, 'DELETE', data, options)
 
 /**
  * Aborts the previous request before triggering next request

src/Common/Api.ts

@@ -104,6 +104,7 @@ export interface VariableType {
     format: string
     description: string
     defaultValue: string
+    allowEmptyValue: boolean
     variableType: RefVariableType
     refVariableStepIndex: number
     refVariableName: string
@@ -128,7 +129,7 @@ interface ConditionDetails {
     conditionalValue: string
 }
 
-interface InlineStepDetailType {
+export interface InlineStepDetailType {
     scriptType: ScriptType
     isMountCustomScript?: boolean
     script?: string
@@ -147,6 +148,8 @@ interface InlineStepDetailType {
     inputVariables?: VariableType[]
     outputVariables?: VariableType[]
     conditionDetails: ConditionDetails[]
+    storeScriptAt?: string
+    mountCodeToContainerPath?: string
 }
 
 interface PluginRefStepDetailType {

src/Common/CIPipeline.Types.ts

@@ -106,6 +106,7 @@ export const ROUTES = {
     PLUGIN_GLOBAL_LIST_DETAIL_V2: 'plugin/global/list/detail/v2',
     PLUGIN_GLOBAL_LIST_V2: 'plugin/global/list/v2',
     PLUGIN_GLOBAL_LIST_TAGS: 'plugin/global/list/tags',
+    PLUGIN_LIST_MIN: 'plugin/global/list/v2/min',
     DEPLOYMENT_CHARTS_LIST: 'deployment/template/fetch',
     USER_LIST_MIN: 'user/list/min',
     CONFIG_DATA: 'config/data',
@@ -530,6 +531,8 @@ export const DATE_TIME_FORMATS = {
     DD_MMM_YYYY: 'DD MMM YYYY',
 }
 
+export const SEMANTIC_VERSION_DOCUMENTATION_LINK = 'https://semver.org/'
+
 export const VULNERABILITIES_SORT_PRIORITY = {
     critical: 1,
     high: 2,

src/Common/Constants.ts

@@ -135,7 +135,7 @@ export const CustomInput = ({
 
             {getInputError()}
             {helperText && (
-                <div className="flex left top dc__gap-4 fs-11 lh-16 cn-7 mt-4">
+                <div className="flex left top dc__gap-4 fs-11 lh-16 cn-7 pt-4">
                     <Info className="icon-dim-16" />
                     <div>{helperText}</div>
                 </div>

src/Common/CustomInput/CustomInput.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react'
+import React, { HTMLInputTypeAttribute, InputHTMLAttributes, ReactNode } from 'react'
 
 export interface CustomInputProps {
     name: string
@@ -33,7 +33,7 @@ export interface CustomInputProps {
     autoFocus?: boolean
     rootClassName?: string
     error?: string[] | string
-    helperText?: string
+    helperText?: ReactNode
     handleOnBlur?: (e) => void
     readOnly?: boolean
     noTrim?: boolean

src/Common/CustomInput/Types.ts

@@ -17,6 +17,7 @@
 import React, { useEffect } from 'react'
 import ReactDOM from 'react-dom'
 import { ModalType } from '../Types'
+import { POP_UP_MENU_MODAL_ID } from '@Shared/constants'
 
 /**
  * @deprecated Use VisibleModal instead
@@ -78,7 +79,7 @@ export const Modal = ({
                 innerRef.current = el
             }}
             id="popup"
-            className={`${rootClassName} popup ${modal ? 'modal' : ''}`}
+            className={`${rootClassName} ${POP_UP_MENU_MODAL_ID} ${modal ? 'modal' : ''}`}
             style={{ ...style }}
         >
             {children}

src/Common/Modals/Modal.tsx

@@ -16,11 +16,11 @@
 
 import React, { SyntheticEvent } from 'react'
 import ReactDOM from 'react-dom'
-import { preventBodyScroll } from '../../Shared'
+import { POP_UP_MENU_MODAL_ID, preventBodyScroll } from '../../Shared'
 import { stopPropagation } from '../Helper'
 
 export class VisibleModal extends React.Component<{
-    className: string
+    className?: string
     parentClassName?: string
     noBackground?: boolean
     close?: (e) => void
@@ -46,6 +46,7 @@ export class VisibleModal extends React.Component<{
 
     componentDidMount() {
         document.addEventListener('keydown', this.escFunction)
+        // show is also being used in modal (i.e, pop up menu for case where we have noBackground as false, so it works in syc with VisibleModal with noBackground as false)
         this.modalRef.classList.add(this.props.noBackground ? 'show' : 'show-with-bg')
         preventBodyScroll(true)
 
@@ -66,6 +67,10 @@ export class VisibleModal extends React.Component<{
     }
 
     handleBodyClick = (e: SyntheticEvent) => {
+        const isPopupMenuPresent = document.getElementById(POP_UP_MENU_MODAL_ID)
+        if (isPopupMenuPresent) {
+            return
+        }
         e.stopPropagation()
 
         this.props.close?.(e)
@@ -74,7 +79,7 @@ export class VisibleModal extends React.Component<{
     render() {
         return ReactDOM.createPortal(
             <div
-                className={`visible-modal__body ${this.props.className}`}
+                className={`visible-modal__body ${this.props.className || ''}`}
                 onClick={this.handleBodyClick}
                 data-testid="visible-modal-close"
             >

src/Common/Modals/VisibleModal.tsx

@@ -19,7 +19,7 @@ import ReactDOM from 'react-dom'
 import { preventBodyScroll } from '../../Shared'
 import { stopPropagation } from '../Helper'
 
-export class VisibleModal2 extends React.Component<{ className: string; close?: (e) => void }> {
+export class VisibleModal2 extends React.Component<{ className?: string; close?: (e) => void }> {
     modalRef = document.getElementById('visible-modal-2')
 
     constructor(props) {
@@ -55,7 +55,7 @@ export class VisibleModal2 extends React.Component<{ className: string; close?:
     render() {
         return ReactDOM.createPortal(
             <div
-                className={`visible-modal__body ${this.props.className}`}
+                className={`visible-modal__body ${this.props.className || ''}`}
                 onClick={this.handleBodyClick}
                 data-testid="visible-modal2-close"
             >

src/Common/Modals/VisibleModal2.tsx

@@ -16,20 +16,23 @@
 
 import React from 'react'
 import Select, { components } from 'react-select'
+import Tippy from '@tippyjs/react'
+import { ReactComponent as ICErrorCross } from '@Icons/ic-error-cross.svg'
 import { ReactComponent as ClearIcon } from '../Assets/Icon/ic-appstatus-cancelled.svg'
 import { ReactComponent as Check } from '../Assets/Icon/ic-check.svg'
 import { ReactComponent as RedWarning } from '../Assets/Icon/ic-error-medium.svg'
 import { Checkbox } from './Checkbox'
 import { CHECKBOX_VALUE } from './Types'
+import { ConditionalWrap } from './Helper'
 
 export const Option = (props) => {
-    const { selectOption, data, isDisabled } = props
+    const { selectOption, data, isDisabled, showTippy, tippyPlacement } = props
 
     const handleChange = (e) => {
         selectOption(data)
     }
 
-    return (
+    const renderOption = () => (
         <div
             className={`flex left pl-12 cursor dc__gap-8 ${isDisabled ? 'dc__disabled' : ''}`}
             style={{ background: props.isFocused ? 'var(--N100)' : 'transparent' }}
@@ -44,6 +47,26 @@ export const Option = (props) => {
             <components.Option {...props} />
         </div>
     )
+
+    const renderTippy = (children) => {
+        const placement = tippyPlacement === 'left' || tippyPlacement === 'right' ? tippyPlacement : 'auto'
+        return (
+            <Tippy
+                content={data.label}
+                className="default-tt dc__mxw-200 dc__word-break"
+                placement={placement}
+                arrow={false}
+            >
+                {children}
+            </Tippy>
+        )
+    }
+
+    return (
+        <ConditionalWrap condition={showTippy} wrap={renderTippy}>
+            {renderOption()}
+        </ConditionalWrap>
+    )
 }
 
 export const SingleSelectOption = (props) => {
@@ -116,14 +139,14 @@ export const MultiValueRemove = (props) => {
     const {
         data,
         innerProps: { onClick, onMouseDown },
-        selectProps,
     } = props
     return (
         <components.MultiValueRemove {...props}>
-            <ClearIcon
+            <ICErrorCross
                 {...{ onClick, onMouseDown }}
                 onClick={(e) => onClick(data)}
-                style={{ height: '18px', width: '18px' }}
+                className="icon-n5"
+                style={{ height: '14px', width: '14px' }}
             />
         </components.MultiValueRemove>
     )
@@ -139,7 +162,7 @@ export const MultiValueChipContainer = ({ validator, isAllSelected = false, ...p
     return (
         <components.MultiValueContainer {...{ data, innerProps, selectProps }}>
             <div className="flex left fs-12 pl-4 pr-4 dc__ellipsis-right">
-                {!isValidEmail && <RedWarning className="mr-4 icon-dim-16" />}
+                {!isValidEmail && <RedWarning className="mr-4 icon-dim-16 dc__no-shrink" />}
                 <div className={`dc__ellipsis-right ${isValidEmail ? 'cn-9' : 'cr-5'}`}>{label}</div>
             </div>
             {children[1]}

src/Common/MultiSelectCustomization.tsx

@@ -92,3 +92,31 @@ input:checked + .toggle__slider {
 input:focus + .toggle__slider {
     box-shadow: 0 0 1px var(--color);
 }
+
+.dc__toggle-square-toggle {
+    .toggle__slider {
+        border-color: var(--color);
+        background-color: var(--color) !important;
+
+        &:before {
+            background-color: transparent;
+        }
+
+        &.with-icon svg {
+            height: 16px;
+            width: 16px;
+            margin-top: 1px;
+            background-color: var(--N0);
+            left: 0;
+            padding: 0;
+            border-radius: 3px;
+        }
+    }
+
+    input:checked + .toggle__slider {
+        &.with-icon svg {
+            left: -6px;
+            background-color: var(--N0);
+        }
+    }
+}

src/Common/Toggle/Toggle.scss

@@ -224,10 +224,10 @@ export interface RadioGroupItemProps {
 export interface RadioGroupInterface {
     name: string
     onChange: any
-    className?: string
     initialTab: string
-    disabled: boolean
     children: ReactNode
+    disabled?: boolean
+    className?: string
 }
 
 export interface RadioInterface {

src/Common/Types.ts

@@ -15,7 +15,7 @@
  */
 
 import React from 'react'
-import { GenericEmptyState } from '../../../Common'
+import { GenericEmptyState, ImageType } from '../../../Common'
 import AppNotDeployed from '../../../Assets/Img/app-not-deployed.png'
 import { EMPTY_STATE_STATUS } from '../../constants'
 
@@ -42,17 +42,16 @@ const CDEmptyState = ({
 }) => {
     const handleCDEmptyStateButton = () =>
         actionButtonText ? (
-            <div
-                className={`${
-                    actionButtonClass || 'cb-5 bcn-0 en-2'
-                } fcn-0 fw-6 fs-13 flexbox br-4 pl-16 pr-16 pt-8 pb-8 pointer`}
+            <button
+                type="button"
+                className={`${actionButtonClass || ''} cta secondary flex h-32`}
                 onClick={actionHandler}
                 data-testid={dataTestId}
             >
                 {ActionButtonIcon && !actionButtonIconRight && <ActionButtonIcon className="add-icon" />}
                 {actionButtonText}
                 {ActionButtonIcon && actionButtonIconRight && <ActionButtonIcon className="icon-dim-16 ml-8" />}
-            </div>
+            </button>
         ) : null
     return (
         <div className="dc__position-rel" style={{ backgroundColor: 'var(--window-bg)' }}>
@@ -62,6 +61,7 @@ const CDEmptyState = ({
                 title={title || EMPTY_STATE_STATUS.CD_EMPTY_STATE.TITLE}
                 subTitle={subtitle || EMPTY_STATE_STATUS.CD_EMPTY_STATE.SUBTITLE}
                 isButtonAvailable
+                imageType={ImageType.Large}
                 renderButton={handleCDEmptyStateButton}
             />
         </div>