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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.42-beta-2",
+    "version": "0.0.42-beta-3",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -41,6 +41,9 @@
         "@sentry/browser": "^7.31.1"
     },
     "peerDependencies": {
+        "@rjsf/core": "^5.13.3",
+        "@rjsf/utils": "^5.13.3",
+        "@rjsf/validator-ajv8": "^5.13.3",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router": "^5.3.0",

package/src/Assets/Icon/ic-chevron-down.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#999" class="fill-color" fill-rule="nonzero" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/>
+    </g>
+</svg>

package/src/Common/DebouncedSearch/DebouncedSearch.tsx

@@ -26,7 +26,6 @@ export default function DebouncedSearch({
     debounceTimeout = 500,
     clearSearch,
     showClearIcon = true,
-    autoFocus = true,
 }: DebouncedSearchProps) {
     const [searchText, setSearchText] = useState<string>('')
 
@@ -42,7 +41,7 @@ export default function DebouncedSearch({
         setSearchText('')
     }
 
-    useDebouncedEffect(() => onSearch(searchText), debounceTimeout, [searchText])
+    useDebouncedEffect(() => onSearch(searchText), debounceTimeout, [searchText, onSearch])
 
     return (
         <div className={containerClass}>
@@ -54,7 +53,7 @@ export default function DebouncedSearch({
                 placeholder={placeholder ?? 'Search'}
                 value={searchText}
                 onChange={handleSearchTextChange}
-                autoFocus={autoFocus}
+                autoFocus
                 data-testid="debounced-search"
             />
 

package/src/Common/DebouncedSearch/Types.ts

@@ -9,5 +9,4 @@ export interface DebouncedSearchProps {
     debounceTimeout?: number
     clearSearch?: boolean
     showClearIcon?: boolean
-    autoFocus?: boolean
 }

package/src/Common/Dialogs/DeleteDialog.tsx

@@ -5,22 +5,6 @@ import ConfirmationDialog from './ConfirmationDialog'
 import { DeleteDialogProps } from './Types'
 
 export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.FC<any> } = function (props) {
-    const handleDelete = (e: React.MouseEvent) => {
-        if (props.shouldStopPropagation) {
-            e.stopPropagation()
-        }
-
-        props.delete()
-    }
-
-    const handleModalClose = (e: React.MouseEvent) => {
-        if (props.shouldStopPropagation) {
-            e.stopPropagation()
-        }
-
-        props.closeDelete()
-    }
-
     return (
         <ConfirmationDialog className="confirmation-dialog__body--w-400">
             <ConfirmationDialog.Icon src={warn} />
@@ -35,7 +19,7 @@ export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.F
                     <button
                         type="button"
                         className="cta cancel cta-cd-delete-modal ml-16"
-                        onClick={handleModalClose}
+                        onClick={props.closeDelete}
                         disabled={props.apiCallInProgress}
                         data-testid="dialog-cancel"
                     >
@@ -44,7 +28,7 @@ export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.F
                     <button
                         type="button"
                         className="cta delete cta-cd-delete-modal ml-16"
-                        onClick={handleDelete}
+                        onClick={() => props.delete()}
                         disabled={props.apiCallInProgress}
                         data-testid="dialog-delete"
                     >

package/src/Common/Dialogs/Types.ts

@@ -10,7 +10,6 @@ export interface DeleteDialogProps {
     apiCallInProgress?: boolean
     dataTestId?: string
     buttonPrimaryText?: string
-    shouldStopPropagation?: boolean
 }
 
 export interface ForceDeleteDialogType {

package/src/Common/Helper.tsx

@@ -1,12 +1,12 @@
+import * as Sentry from '@sentry/browser'
+import moment from 'moment'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
-import moment from 'moment'
 import { toast } from 'react-toastify'
-import * as Sentry from '@sentry/browser'
+import { ReactComponent as FormError } from '../Assets/Icon/ic-warning.svg'
+import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
 import { ServerErrors } from './ServerError'
 import { toastAccessDenied } from './ToastBody'
-import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
-import { ReactComponent as FormError } from '../Assets/Icon/ic-warning.svg'
 import { AsyncOptions, AsyncState, UseSearchString } from './Types'
 
 toast.configure({
@@ -495,3 +495,25 @@ export const processDeployedTime = (lastDeployed, isArgoInstalled) => {
         return isArgoInstalled ? '' : 'Not deployed'
     }
 }
+
+/**
+ * Appends search parameters to the url as a query string
+ *
+ * @param url URL to which the search params needs to be added
+ * @param params Object for the search parameters
+ */
+export const getUrlWithSearchParams = (url: string, params: Record<string | number, any>) => {
+    const searchParams = new URLSearchParams()
+    Object.keys(params).forEach((key) => {
+        if (params[key]) {
+            searchParams.append(key, params[key])
+        }
+    })
+    const queryString = searchParams.toString()
+    return url + (queryString ? `?${queryString}` : '')
+}
+
+/**
+ * Custom exception logger function for logging errors to sentry
+ */
+export const logExceptionToSentry = Sentry.captureException.bind(window)

package/src/Common/RJSF/Form.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import RJSF from '@rjsf/core'
+import RJSFValidator from '@rjsf/validator-ajv8'
+
+import { templates, widgets } from './config'
+import { FormProps } from './types'
+import { translateString } from './utils'
+import './rjsfForm.scss'
+
+// Need to use this way because the default import was not working as expected
+// The default import resolves to an object intead of a function
+const Form = (RJSF as any).default as typeof RJSF
+const validator = (RJSFValidator as any).default as typeof RJSFValidator
+
+export const RJSFForm = (props: FormProps) => (
+    <Form
+        noHtml5Validate
+        showErrorList={false}
+        autoComplete="off"
+        {...props}
+        validator={validator}
+        templates={{
+            ...templates,
+            ...props.templates,
+        }}
+        widgets={{ ...widgets, ...props.widgets }}
+        translateString={translateString}
+    />
+)

package/src/Common/RJSF/common/FieldRow.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { FieldRowProps } from './types'
+import { DEFAULT_FIELD_TITLE, DO_NOT_SHOW_LABEL } from '../constants'
+
+export const FieldRowWithLabel = ({
+    showLabel,
+    label,
+    required,
+    children,
+    id,
+    shouldAlignCenter = true,
+}: Omit<FieldRowProps, 'label'> & {
+    label: FieldRowProps['label'] | typeof DO_NOT_SHOW_LABEL
+}) => (
+    <div
+        className={
+            showLabel
+                ? `display-grid dc__gap-12 rjsf-form-template__field ${shouldAlignCenter ? 'flex-align-center' : ''}`
+                : ''
+        }
+    >
+        {showLabel && (
+            <label className="cn-7 fs-13 lh-32 fw-4 flexbox mb-0" htmlFor={id}>
+                {/* The check is added here intentionally for proper layout for array type field */}
+                {label !== DO_NOT_SHOW_LABEL && (
+                    <>
+                        <span className="dc__ellipsis-right">{label || DEFAULT_FIELD_TITLE}</span>
+                        {required && <span className="cr-5">&nbsp;*</span>}
+                    </>
+                )}
+            </label>
+        )}
+        {children}
+    </div>
+)

package/src/Common/RJSF/common/types.ts

@@ -0,0 +1,9 @@
+import { FieldTemplateProps } from '@rjsf/utils'
+
+export interface FieldRowProps extends Pick<FieldTemplateProps, 'children' | 'label' | 'required' | 'id'> {
+    showLabel?: boolean
+    /**
+     * @default true
+     */
+    shouldAlignCenter?: boolean
+}

package/src/Common/RJSF/config.ts

@@ -0,0 +1,37 @@
+import React from 'react'
+import { RegistryWidgetsType } from '@rjsf/utils'
+
+import {
+    AddButton,
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    BaseInputTemplate,
+    DescriptionFieldTemplate,
+    FieldTemplate,
+    FieldErrorTemplate,
+    ObjectFieldTemplate,
+    RemoveButton,
+    SubmitButton,
+    TitleFieldTemplate,
+    WrapIfAdditionalTemplate,
+} from './templates'
+import { CheckboxWidget, SelectWidget } from './widgets'
+import { FormProps } from './types'
+
+export const widgets: RegistryWidgetsType = {
+    CheckboxWidget,
+    SelectWidget,
+}
+
+export const templates: FormProps['templates'] = {
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    BaseInputTemplate,
+    ButtonTemplates: { AddButton, RemoveButton, SubmitButton },
+    DescriptionFieldTemplate,
+    FieldTemplate,
+    FieldErrorTemplate,
+    ObjectFieldTemplate,
+    TitleFieldTemplate,
+    WrapIfAdditionalTemplate,
+}

package/src/Common/RJSF/constants.ts

@@ -0,0 +1,10 @@
+export const PLACEHOLDERS = {
+    SELECT: 'Please select an option',
+    INPUT: 'Please enter an input',
+    OBJECT_KEY: 'Please enter a value for the key',
+}
+
+export const DEFAULT_FIELD_TITLE = 'Key not available'
+
+// Using symbol to ensure uniqueness across the fields
+export const DO_NOT_SHOW_LABEL = Symbol('Do not show label')

package/src/Common/RJSF/index.ts

@@ -0,0 +1,3 @@
+export { RJSFForm } from './Form'
+export * from './types'
+export { getInferredTypeFromValueType, getRedirectionProps } from './utils'

package/src/Common/RJSF/rjsfForm.scss

@@ -0,0 +1,18 @@
+.rjsf-form-template {
+    &__field {
+        grid-template-columns: 250px 1fr;
+    }
+
+    &__additional-fields {
+        grid-template-columns: 1fr 1fr minmax(20px, auto);
+    }
+
+    &__array-field-item {
+        grid-template-columns: 1fr auto;
+
+        & > :first-child {
+            // This is added as the array field itself has a margin bottom
+            margin: 0;
+        }
+    }
+}

package/src/Common/RJSF/templates/ArrayFieldItemTemplate.tsx

@@ -0,0 +1,31 @@
+import React, { CSSProperties } from 'react'
+import { ArrayFieldTemplateItemType } from '@rjsf/utils'
+
+export const ArrayFieldItemTemplate = ({
+    children,
+    className,
+    disabled,
+    hasToolbar,
+    hasRemove,
+    index,
+    onDropIndexClick,
+    readonly,
+    registry,
+    uiSchema,
+}: ArrayFieldTemplateItemType) => {
+    const { RemoveButton } = registry.templates.ButtonTemplates
+
+    return (
+        <div className="display-grid rjsf-form-template__array-field-item flex-align-center dc__gap-8 mb-12">
+            {children}
+            {hasToolbar && hasRemove && (
+                <RemoveButton
+                    disabled={disabled || readonly}
+                    onClick={onDropIndexClick(index)}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                />
+            )}
+        </div>
+    )
+}

package/src/Common/RJSF/templates/ArrayFieldTemplate.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { getTemplate, getUiOptions, ArrayFieldTemplateProps, ArrayFieldTemplateItemType } from '@rjsf/utils'
+import { FieldRowWithLabel } from '../common/FieldRow'
+import { DO_NOT_SHOW_LABEL } from '../constants'
+
+const ActionButton = ({ canAdd, onAddClick, disabled, readonly, uiSchema, registry }) => {
+    const {
+        ButtonTemplates: { AddButton },
+    } = registry.templates
+
+    return (
+        canAdd && (
+            <AddButton onClick={onAddClick} disabled={disabled || readonly} uiSchema={uiSchema} registry={registry} />
+        )
+    )
+}
+
+export const ArrayFieldTemplate = ({
+    canAdd,
+    className,
+    disabled,
+    idSchema,
+    uiSchema,
+    items,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    title,
+}: ArrayFieldTemplateProps) => {
+    const uiOptions = getUiOptions(uiSchema)
+    const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate'>('ArrayFieldItemTemplate', registry, uiOptions)
+    const label = uiOptions.title || title
+
+    return (
+        <fieldset className={className} id={idSchema.$id}>
+            {/* Show the label here in case there are no items, otherwise handled by Field Template */}
+            {items.length ? (
+                <>
+                    {items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType, index) => {
+                        // Show the title as the label for the first field
+                        const children = {
+                            ...itemProps.children,
+                            props: {
+                                ...itemProps.children.props,
+                                name: index === 0 ? label : DO_NOT_SHOW_LABEL,
+                            },
+                        }
+                        return (
+                            <ArrayFieldItemTemplate key={key} {...itemProps}>
+                                {children}
+                            </ArrayFieldItemTemplate>
+                        )
+                    })}
+                    <ActionButton
+                        canAdd={canAdd}
+                        onAddClick={onAddClick}
+                        disabled={disabled}
+                        readonly={readonly}
+                        uiSchema={uiSchema}
+                        registry={registry}
+                    />
+                </>
+            ) : (
+                <FieldRowWithLabel label={label} required={required} showLabel id={idSchema.$id}>
+                    <ActionButton
+                        canAdd={canAdd}
+                        onAddClick={onAddClick}
+                        disabled={disabled}
+                        readonly={readonly}
+                        uiSchema={uiSchema}
+                        registry={registry}
+                    />
+                </FieldRowWithLabel>
+            )}
+        </fieldset>
+    )
+}

package/src/Common/RJSF/templates/BaseInput.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { getDefaultRegistry } from '@rjsf/core'
+import { BaseInputTemplateProps } from '@rjsf/utils'
+import { PLACEHOLDERS } from '../constants'
+
+const {
+    templates: { BaseInputTemplate },
+} = getDefaultRegistry()
+
+export const BaseInput = ({ placeholder, ...props }: BaseInputTemplateProps) => (
+    <BaseInputTemplate
+        placeholder={placeholder || PLACEHOLDERS.INPUT}
+        {...props}
+        className="form__input cn-9 fs-13 lh-20 fw-4"
+    />
+)

package/src/Common/RJSF/templates/ButtonTemplates/AddButton.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { IconButtonProps } from '@rjsf/utils'
+
+import { ReactComponent as PlusIcon } from '../../../../Assets/Icon/ic-add.svg'
+
+export const AddButton = ({ icon, iconType, registry, uiSchema, ...props }: IconButtonProps) => (
+    <div className="flexbox flex-justify-end">
+        <button
+            {...props}
+            type="button"
+            className="dc__outline-none-imp p-0 dc__transparent flex dc__gap-4 cursor"
+            title="Add"
+        >
+            <PlusIcon className="icon-dim-16 fcb-5" />
+            <span className="cb-5 fs-13 lh-20">Add</span>
+        </button>
+    </div>
+)

package/src/Common/RJSF/templates/ButtonTemplates/RemoveButton.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { IconButtonProps } from '@rjsf/utils'
+
+import { ReactComponent as CrossIcon } from '../../../../Assets/Icon/ic-cross.svg'
+
+export const RemoveButton = ({ icon, iconType, registry, uiSchema, ...props }: IconButtonProps) => (
+    <button {...props} type="button" className="dc__outline-none-imp p-0 dc__transparent flex cursor" title="Remove">
+        <CrossIcon className="icon-dim-16 fcr-5" />
+    </button>
+)

package/src/Common/RJSF/templates/ButtonTemplates/SubmitButton.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { getSubmitButtonOptions, SubmitButtonProps } from '@rjsf/utils'
+
+export const SubmitButton = ({ uiSchema }: SubmitButtonProps) => {
+    const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions(uiSchema)
+
+    return norender ? null : (
+        <div className="flexbox flex-justify-end">
+            <button
+                type="submit"
+                {...submitButtonProps}
+                className={`cta ${submitButtonProps.className || ''}`}
+            >
+                {submitText}
+            </button>
+        </div>
+    )
+}

package/src/Common/RJSF/templates/ButtonTemplates/index.ts

@@ -0,0 +1,3 @@
+export { AddButton } from './AddButton'
+export { RemoveButton } from './RemoveButton'
+export { SubmitButton } from './SubmitButton'

package/src/Common/RJSF/templates/Description.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { DescriptionFieldProps } from '@rjsf/utils'
+
+import { ReactComponent as Info } from '../../../Assets/Icon/ic-info-filled.svg'
+
+export const Description = ({ id, description }: DescriptionFieldProps) =>
+    description && (
+        <div id={id} className="flex left flex-align-center mt-4 dc__gap-4">
+            <Info className="icon-dim-16 mw-16 info-icon-n5" />
+            <span className="cn-7 fs-11 fw-4 dc__ellipsis-right">{description}</span>
+        </div>
+    )

package/src/Common/RJSF/templates/Field.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { FieldTemplateProps, getUiOptions, getTemplate, ADDITIONAL_PROPERTY_FLAG } from '@rjsf/utils'
+import { FieldRowWithLabel } from '../common/FieldRow'
+
+export const Field = (props: FieldTemplateProps) => {
+    const { id, label, children, errors, hidden, required, displayLabel, registry, uiSchema, classNames, schema, description } =
+        props
+    const uiOptions = getUiOptions(uiSchema)
+    const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate'>(
+        'WrapIfAdditionalTemplate',
+        registry,
+        uiOptions,
+    )
+    // Object type fields have additional properties for key/value pairs
+    const hasAdditionalProperties = ADDITIONAL_PROPERTY_FLAG in schema
+    // Label is not displayed for boolean fields by default and hide for object type fields
+    const showLabel = (displayLabel || schema.type === 'boolean') && !hasAdditionalProperties
+
+    return hidden ? (
+        <div className="hidden">{children}</div>
+    ) : (
+        <div className={`${classNames} mb-12`}>
+            <FieldRowWithLabel label={label} showLabel={showLabel} id={id} required={required}>
+                <WrapIfAdditionalTemplate {...props}>{children}</WrapIfAdditionalTemplate>
+            </FieldRowWithLabel>
+            {description}
+            {errors}
+        </div>
+    )
+}

package/src/Common/RJSF/templates/FieldErrorTemplate.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { errorId, FieldErrorProps } from '@rjsf/utils'
+
+import { ReactComponent as Error } from '../../../Assets/Icon/ic-warning.svg'
+
+export const FieldErrorTemplate = ({ errors = [], idSchema }: FieldErrorProps) => {
+    const id = errorId(idSchema)
+
+    return (
+        errors.length > 0 && (
+            <span id={id}>
+                {errors
+                    .filter((elem) => !!elem)
+                    .map((error, index: number) => {
+                        return (
+                            <span className="form__error" key={index}>
+                                <Error className="form__icon form__icon--error" />
+                                {error}
+                            </span>
+                        )
+                    })}
+            </span>
+        )
+    )
+}

package/src/Common/RJSF/templates/ObjectFieldTemplate.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import {
+    ObjectFieldTemplatePropertyType,
+    ObjectFieldTemplateProps,
+    canExpand,
+    getTemplate,
+    getUiOptions,
+    titleId,
+} from '@rjsf/utils'
+import { FieldRowWithLabel } from '../common/FieldRow'
+
+const Field = ({
+    disabled,
+    formData,
+    idSchema,
+    onAddClick,
+    properties,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+    uiSchema,
+}: ObjectFieldTemplateProps) => {
+    const {
+        ButtonTemplates: { AddButton },
+    } = registry.templates
+    const hasAdditionalProperties = !!schema.additionalProperties
+
+    const ActionButton = canExpand(schema, uiSchema, formData) && (
+        <AddButton
+            className="object-property-expand"
+            onClick={onAddClick(schema)}
+            disabled={disabled || readonly}
+            uiSchema={uiSchema}
+            registry={registry}
+        />
+    )
+
+    const Properties = properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)
+
+    if (hasAdditionalProperties) {
+        if (properties.length) {
+            return (
+                <>
+                    <FieldRowWithLabel
+                        label={title}
+                        required={required}
+                        showLabel
+                        id={idSchema.$id}
+                        shouldAlignCenter={false}
+                    >
+                        <div>{Properties}</div>
+                    </FieldRowWithLabel>
+                    {ActionButton}
+                </>
+            )
+        } else {
+            return (
+                <FieldRowWithLabel label={title} required={required} showLabel id={idSchema.$id}>
+                    {ActionButton}
+                </FieldRowWithLabel>
+            )
+        }
+    }
+    return (
+        <>
+            {Properties}
+            {ActionButton}
+        </>
+    )
+}
+
+export const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
+    const { idSchema, registry, required, schema, title, uiSchema } = props
+    const options = getUiOptions(uiSchema)
+    const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, options)
+    const hasAdditionalProperties = !!schema.additionalProperties
+    const showTitle = title && !hasAdditionalProperties
+
+    return (
+        <fieldset id={idSchema.$id}>
+            {showTitle && (
+                <TitleFieldTemplate
+                    id={titleId(idSchema)}
+                    title={title}
+                    required={required}
+                    schema={schema}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                />
+            )}
+            {/* Not adding the border and padding for non-objects and root schema */}
+            <div
+                className={
+                    schema.properties && !hasAdditionalProperties && idSchema.$id !== 'root'
+                        ? 'dc__border-left pl-5'
+                        : ''
+                }
+            >
+                <Field {...props} />
+            </div>
+        </fieldset>
+    )
+}