@devtron-labs/devtron-fe-common-lib 0.0.42-beta-4 → 0.0.42-beta-6

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/Types.ts

@@ -79,7 +79,6 @@ export interface TippyCustomizedProps {
     documentationLink?: string
     documentationLinkText?: string
     children: React.ReactElement<any>
-    followCursor?: boolean
 }
 export interface GenericEmptyStateType {
     title: ReactNode

package/src/Common/index.ts

@@ -40,3 +40,4 @@ export { default as Grid } from './Grid/Grid'
 export { default as ClipboardButton } from './ClipboardButton/ClipboardButton'
 export * from './Hooks'
 export { AppStatus } from './AppStatus'
+export * from './RJSF'