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

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-12'
+                        : ''
+                }
+            >
+                <Field {...props} />
+            </div>
+        </fieldset>
+    )
+}

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

@@ -0,0 +1,9 @@
+import React from 'react'
+import { TitleFieldProps } from '@rjsf/utils'
+
+export const TitleField = ({ id, title, required }: TitleFieldProps) => (
+    <legend className="fs-13 fw-6 cn-9 lh-20 pb-8 dc__border-bottom en-1 mb-12" id={id}>
+        <span>{title}</span>
+        {required && <span className="cr-5">&nbsp;*</span>}
+    </legend>
+)

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

@@ -0,0 +1,51 @@
+import React from 'react'
+import { ADDITIONAL_PROPERTY_FLAG, WrapIfAdditionalTemplateProps } from '@rjsf/utils'
+
+import { PLACEHOLDERS } from '../constants'
+
+export const WrapIfAdditionalTemplate = ({
+    id,
+    disabled,
+    label,
+    onKeyChange,
+    onDropPropertyClick,
+    readonly,
+    schema,
+    children,
+    uiSchema,
+    registry,
+}: WrapIfAdditionalTemplateProps) => {
+    const { templates } = registry
+    const { RemoveButton } = templates.ButtonTemplates
+    const additional = ADDITIONAL_PROPERTY_FLAG in schema
+
+    return (
+        <>
+            {additional ? (
+                <div className="rjsf-form-template__additional-fields display-grid dc__gap-8 flex-align-center">
+                    <div>
+                        <input
+                            type="text"
+                            className="form__input cn-9 fs-13 lh-20 fw-4"
+                            id={`${id}-key`}
+                            onBlur={(event) => onKeyChange(event.target.value)}
+                            placeholder={PLACEHOLDERS.OBJECT_KEY}
+                            defaultValue={label}
+                        />
+                    </div>
+                    <div>{children}</div>
+                    <div>
+                        <RemoveButton
+                            disabled={disabled || readonly}
+                            onClick={onDropPropertyClick(label)}
+                            uiSchema={uiSchema}
+                            registry={registry}
+                        />
+                    </div>
+                </div>
+            ) : (
+                children
+            )}
+        </>
+    )
+}

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

@@ -0,0 +1,10 @@
+export { ArrayFieldTemplate } from './ArrayFieldTemplate'
+export { ArrayFieldItemTemplate } from './ArrayFieldItemTemplate'
+export { BaseInput as BaseInputTemplate } from './BaseInput'
+export * from './ButtonTemplates'
+export { Description as DescriptionFieldTemplate } from './Description'
+export { Field as FieldTemplate } from './Field'
+export { FieldErrorTemplate } from './FieldErrorTemplate'
+export { ObjectFieldTemplate } from './ObjectFieldTemplate'
+export { TitleField as TitleFieldTemplate } from './TitleField'
+export { WrapIfAdditionalTemplate } from './WrapIfAdditionalTemplate'

package/src/Common/RJSF/types.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from 'react'
+import RJSFForm from '@rjsf/core'
+
+export type FormProps = Omit<ComponentProps<typeof RJSFForm>, 'validator'>

package/src/Common/RJSF/utils.ts

@@ -0,0 +1,123 @@
+import { TranslatableString, englishStringTranslator } from '@rjsf/utils'
+
+/**
+ * Override for the TranslatableString from RJSF
+ */
+export const translateString = (stringToTranslate: TranslatableString, params?: string[]): string => {
+    switch (stringToTranslate) {
+        case TranslatableString.NewStringDefault:
+            // Use an empty string for the new additionalProperties string default value
+            return ''
+        default:
+            return englishStringTranslator(stringToTranslate, params)
+    }
+}
+
+export const getCommonSelectStyle = (styleOverrides = {}) => {
+    return {
+        menuList: (base) => ({
+            ...base,
+            paddingTop: 0,
+            paddingBottom: 0,
+        }),
+        control: (base, state) => ({
+            ...base,
+            minHeight: '32px',
+            boxShadow: 'none',
+            backgroundColor: 'var(--N50)',
+            border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)',
+            cursor: 'pointer',
+        }),
+        option: (base, state) => ({
+            ...base,
+            color: 'var(--N900)',
+            backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
+            padding: '10px 12px',
+        }),
+        dropdownIndicator: (base, state) => ({
+            ...base,
+            color: 'var(--N400)',
+            padding: '0 8px',
+            transition: 'all .2s ease',
+            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+        }),
+        valueContainer: (base, state) => ({
+            ...base,
+            padding: '0 8px',
+            fontWeight: '400',
+            color: state.selectProps.menuIsOpen ? 'var(--N500)' : base.color,
+        }),
+        loadingMessage: (base) => ({
+            ...base,
+            color: 'var(--N600)',
+        }),
+        noOptionsMessage: (base) => ({
+            ...base,
+            color: 'var(--N600)',
+        }),
+        multiValue: (base, state) => {
+            return {
+                ...base,
+                border: `1px solid var(--N200)`,
+                borderRadius: `4px`,
+                background: 'white',
+                height: '28px',
+                marginRight: '8px',
+                padding: '2px',
+                fontSize: '12px',
+            }
+        },
+        ...styleOverrides,
+    }
+}
+
+/**
+ * Returns the redirection props for a url
+ */
+export const getRedirectionProps = (
+    url: string,
+): React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    url: string
+} => {
+    try {
+        // The URL is validated when added using the form
+        const isInternalUrl = new URL(url).origin === window.location.origin
+        return {
+            href: url,
+            target: isInternalUrl ? '_self' : '_blank',
+            rel: isInternalUrl ? undefined : 'external noreferrer',
+            url,
+        }
+    } catch (err) {
+        return {
+            href: url,
+            target: '_blank',
+            url: `${url} (Invalid URL)`,
+        }
+    }
+}
+
+/**
+ * Infers the type for json schema from value type
+ */
+export const getInferredTypeFromValueType = (value) => {
+    const valueType = typeof value
+
+    switch (valueType) {
+        case 'boolean':
+        case 'string':
+        case 'number':
+            return valueType
+        case 'object':
+            if (Array.isArray(value)) {
+                return 'array'
+            }
+            if (value === null) {
+                return 'null'
+            }
+            return valueType
+        default:
+            // Unsupported or undefined types
+            return 'null'
+    }
+}

package/src/Common/RJSF/widgets/Checkbox.tsx

@@ -0,0 +1,44 @@
+import React, { ChangeEvent } from 'react'
+import Toggle from '../../Toggle/Toggle'
+import { WidgetProps } from '@rjsf/utils'
+
+export const Checkbox = ({
+    id,
+    onChange,
+    value,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    onBlur,
+    onFocus,
+}: WidgetProps) => {
+    const handleEvent = (e: ChangeEvent<HTMLInputElement>, type: 'blur' | 'focus') => {
+        const { id, checked } = e.target
+        if (type === 'blur') {
+            onBlur(id, checked)
+        } else if (type === 'focus') {
+            onFocus(id, checked)
+        }
+    }
+
+    const isSelected: boolean = typeof value === 'undefined' ? false : value
+
+    return (
+        <div>
+            <Toggle
+                selected={isSelected}
+                onSelect={onChange}
+                id={id}
+                name={id}
+                required={required}
+                disabled={disabled || readonly}
+                autoFocus={autofocus}
+                rootClassName="w-32 mb-0 dc__height-inherit"
+                onBlur={(e) => handleEvent(e, 'blur')}
+                onFocus={(e) => handleEvent(e, 'focus')}
+            />
+            <span className="dc__capitalize ml-8">{isSelected.toString()}</span>
+        </div>
+    )
+}

package/src/Common/RJSF/widgets/Select.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import isEqual from 'lodash/isEqual'
+import { WidgetProps } from '@rjsf/utils'
+import ReactSelect, { MenuListProps, components } from 'react-select'
+import { PLACEHOLDERS } from '../constants'
+import { getCommonSelectStyle } from '../utils'
+
+import { ReactComponent as ArrowDown } from '../../../Assets/Icon/ic-chevron-down.svg'
+
+const commonStyles = getCommonSelectStyle()
+
+const MenuList = ({ children, ...props }: MenuListProps) => (
+    <components.MenuList {...props}>{Array.isArray(children) ? children.slice(0, 20) : children}</components.MenuList>
+)
+
+const DropdownIndicator = (props) => (
+    <components.DropdownIndicator {...props}>
+        <ArrowDown className="icon-dim-20 icon-n5" data-testid="overview-project-edit-dropdown" />
+    </components.DropdownIndicator>
+)
+
+export const Select = (props: WidgetProps) => {
+    const {
+        id,
+        multiple = false,
+        options,
+        value,
+        disabled,
+        readonly,
+        autofocus = false,
+        onChange,
+        onBlur,
+        onFocus,
+        placeholder,
+    } = props
+    const { enumOptions: selectOptions = [] } = options
+    const emptyValue = multiple ? [] : ''
+
+    const handleChange = (option) => {
+        onChange(multiple ? option.map((o) => o.value) : option.value)
+    }
+
+    const getOption = (value) =>
+        multiple
+            ? selectOptions.filter((option) => value.some((val) => isEqual(val, option.value)))
+            : selectOptions.find((option) => isEqual(value, option.value))
+
+    return (
+        <ReactSelect
+            id={id}
+            name={id}
+            isMulti={multiple}
+            value={typeof value === 'undefined' ? emptyValue : getOption(value)}
+            autoFocus={autofocus}
+            onChange={handleChange}
+            options={selectOptions}
+            onBlur={() => onBlur(id, value)}
+            onFocus={() => onFocus(id, value)}
+            placeholder={placeholder || PLACEHOLDERS.SELECT}
+            isDisabled={disabled || readonly}
+            styles={{
+                ...commonStyles,
+                control: (base) => ({
+                    ...base,
+                    ...commonStyles.control,
+                    backgroundColor: 'var(--N50)',
+                }),
+            }}
+            components={{
+                IndicatorSeparator: null,
+                DropdownIndicator,
+                MenuList,
+            }}
+            menuPlacement="auto"
+        />
+    )
+}

package/src/Common/RJSF/widgets/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox as CheckboxWidget } from './Checkbox'
+export { Select as SelectWidget } from './Select'

package/src/Common/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,105 @@
+import Tippy from '@tippyjs/react'
+import React, { useState, useEffect } from 'react'
+import { ConditionalWrap } from '../Helper'
+import './radioGroup.scss'
+
+const RadioContext = React.createContext(null)
+
+function useRadioContext() {
+    const context = React.useContext(RadioContext)
+    if (!context) {
+        throw new Error(`Radio compound components cannot be rendered outside the Toggle component`)
+    }
+    return context
+}
+
+interface RadioGroupInterface {
+    name: string
+    onChange: any
+    className?: string
+    initialTab: string
+    disabled: boolean
+    showTippy?: boolean
+    tippyContent?: any
+    dataTestId?: string
+}
+
+interface RadioGroupComposition {
+    Radio?: React.FC<any>
+}
+
+const RadioGroup: React.FC<RadioGroupInterface> & RadioGroupComposition = React.memo(function RadioGroup({
+    name,
+    onChange,
+    children,
+    className = '',
+    initialTab,
+    disabled = false,
+    dataTestId,
+}) {
+    const [selected, select] = useState(null)
+
+    useEffect(() => {
+        if (initialTab === selected) return
+        select(initialTab)
+    }, [initialTab])
+
+    return (
+        <RadioContext.Provider value={{ name, selected, select, disabled, onChange }}>
+            <div className={`${className} radio-group`}>{children}</div>
+        </RadioContext.Provider>
+    )
+})
+
+function Radio({
+    value,
+    children,
+    className = '',
+    showTippy = false,
+    tippyContent = '',
+    tippyPlacement = 'bottom',
+    canSelect = true,
+    isDisabled = false,
+    tippyClass = '',
+    dataTestId,
+}) {
+    const { name, selected, select, disabled, onChange } = useRadioContext()
+    return (
+        <ConditionalWrap
+            condition={showTippy}
+            wrap={(children) => (
+                <Tippy
+                    className={`default-tt w-250 ${tippyClass}`}
+                    arrow={false}
+                    placement={tippyPlacement as any}
+                    content={tippyContent}
+                >
+                    {children}
+                </Tippy>
+            )}
+        >
+            <label className={`${className} radio ${isDisabled || disabled ? 'disabled' : ''}`}>
+                <input
+                    type="checkbox"
+                    value={value}
+                    name={name}
+                    checked={value === selected}
+                    onChange={(e) => {
+                        e.persist()
+                        if (canSelect) {
+                            select(e.target.value)
+                        }
+                        onChange(e)
+                    }}
+                    disabled={isDisabled || disabled}
+                />
+                <span className="radio__item-label" data-testid={dataTestId}>
+                    {children}
+                </span>
+            </label>
+        </ConditionalWrap>
+    )
+}
+
+RadioGroup.Radio = Radio
+export default RadioGroup