@devtron-labs/devtron-fe-common-lib 0.0.62-beta-7 → 0.0.62-beta-8

package/src/Common/TippyCustomized.tsx

@@ -0,0 +1,172 @@
+import React, { useRef, useState } from 'react'
+import Tippy from '@tippyjs/react'
+import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.svg'
+import { ReactComponent as QuestionFilled } from '../Assets/Icon/ic-help.svg'
+import { ReactComponent as Question } from '../Assets/Icon/ic-help-outline.svg'
+import 'tippy.js/animations/shift-toward-subtle.css'
+import { TippyCustomizedProps, TippyTheme } from './Types'
+import { not } from './Helper'
+
+// This component will handle some of the new tippy designs and interactions
+// So this can be updated to support further for new features or interactions
+export function TippyCustomized(props: TippyCustomizedProps) {
+    const tippyRef = useRef(null)
+    const [showHeadingInfo, setShowHeadingInfo] = useState(false)
+    const isWhiteTheme = props.theme === TippyTheme.white
+
+    const onTippyMount = (tippyInstance) => {
+        tippyRef.current = tippyInstance
+        document.addEventListener('keydown', closeOnEsc)
+    }
+
+    const closeTippy = () => {
+        if (tippyRef.current?.hide) {
+            tippyRef.current.hide()
+            tippyRef.current = null
+
+            if (props.onClose) {
+                props.onClose()
+            }
+        }
+        setShowHeadingInfo(false)
+    }
+
+    const closeOnEsc = (e) => {
+        if (e.keyCode === 27) {
+            closeTippy()
+        }
+    }
+
+    const toggleHeadingInfo = (e) => {
+        setShowHeadingInfo(not)
+    }
+
+    const getTippyContent = () => {
+        const {
+            Icon,
+            iconPath,
+            iconClass,
+            iconSize,
+            onImageLoadError,
+            heading,
+            headingInfo,
+            infoTextHeading,
+            hideHeading,
+            infoText,
+            showCloseButton,
+            additionalContent,
+            documentationLink,
+            documentationLinkText,
+        } = props
+        return (
+            <>
+                {!hideHeading && 
+                <div
+                    className={`dc__word-break dc__hyphens-auto flex left ${
+                        isWhiteTheme 
+                            ? `p-12 cn-9 ${props.noHeadingBorder ? '' : 'dc__border-bottom-n1'}`
+                            : 'pt-20 pb-12 pr-20 pl-20 cn-0 top'
+                    }`}
+                >
+                    {iconPath ? (
+                        <img
+                            className={`icon-dim-${iconSize || 20} mr-6 ${iconClass || ''}`}
+                            src={iconPath}
+                            alt="Heading"
+                            onError={onImageLoadError}
+                        />
+                    ) : (
+                        Icon && (
+                            <div className={`icon-dim-${iconSize || 20} mr-6`}>
+                                <Icon className={`icon-dim-${iconSize || 20} ${iconClass || ''}`} />
+                            </div>
+                        )
+                    )}
+                    {heading && <span className={`fs-14 fw-6 lh-20 ${showCloseButton ? 'mr-6' : ''}`}>{heading}</span>}
+                    {headingInfo && (
+                        <div className="icon-dim-20 cursor" onClick={toggleHeadingInfo}>
+                            <Question className="icon-dim-20" />
+                        </div>
+                    )}
+                    {showCloseButton && (
+                        <div className="icon-dim-16 ml-auto">
+                            <CloseIcon
+                                className={`icon-dim-16 cursor ${isWhiteTheme ? 'fcn-9' : 'fcn-0'}`}
+                                onClick={closeTippy}
+                            />
+                        </div>
+                    )}
+                </div>}
+                {showHeadingInfo && (
+                    <div
+                        className={`flex left top bcv-1 fs-13 fw-4 lh-20 pt-8 pb-8 ${
+                            isWhiteTheme ? 'pl-12 pr-12' : 'pl-20 pr-20'
+                        }`}
+                    >
+                        <div className="icon-dim-20 mr-8">
+                            <QuestionFilled className="icon-dim-20 fcv-5" />
+                        </div>
+                        <div className="dc__word-break dc__hyphens-auto">{headingInfo}</div>
+                    </div>
+                )}
+                {infoTextHeading && (
+                    <div
+                        className={`dc__word-break dc__hyphens-auto fs-14 fw-6 lh-20 ${
+                            isWhiteTheme ? 'pl-12 pr-12' : 'pl-20 pr-20'
+                        }`}
+                    >
+                        {infoTextHeading}
+                    </div>
+                )}
+                {infoText && (
+                    <div
+                        className={`dc__word-break dc__hyphens-auto fs-13 fw-4 lh-20 ${
+                            isWhiteTheme
+                                ? 'p-12'
+                                : `pl-20 pr-20 pt-4 ${additionalContent && documentationLink ? 'pb-12' : 'pb-20'}`
+                        }`}
+                    >
+                        {infoText}
+                    </div>
+                )}
+                {additionalContent}
+                {documentationLink && (
+                    <div className="pl-12 pb-12">
+                        <a
+                            href={documentationLink}
+                            target="_blank"
+                            rel="noreferrer noopener"
+                            className="fs-13 cb-5"
+                            onClick={closeTippy}
+                        >
+                            {documentationLinkText || 'Learn more'}
+                        </a>
+                    </div>
+                )}
+            </>
+        )
+    }
+
+    const { className, placement, arrow, interactive, showOnCreate, trigger, animation, duration, children } = props
+
+    return (
+        <Tippy
+            className={`${
+                isWhiteTheme ? 'tippy-white-container default-white' : 'tippy-black-container default-black'
+            } no-content-padding tippy-shadow ${className}`}
+            arrow={arrow || false}
+            interactive={interactive || false}
+            placement={placement || 'top'}
+            content={getTippyContent()}
+            trigger={trigger || 'mouseenter'}
+            onMount={onTippyMount}
+            onClickOutside={closeTippy}
+            showOnCreate={showOnCreate || false}
+            animation={animation || 'fade'}
+            duration={duration || 300}
+            visible={props.visible}
+        >
+            {children}
+        </Tippy>
+    )
+}

package/src/Common/ToastBody.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { toast } from 'react-toastify'
+import { TOAST_ACCESS_DENIED } from './Constants'
+
+export class ToastBody extends React.Component<{
+    title: string
+    subtitle?: string
+}> {
+    render() {
+        return (
+            <div className="toast">
+                <div className="toast__title">{this.props.title}</div>
+                {this.props.subtitle && <div className="toast__subtitle">{this.props.subtitle}</div>}
+            </div>
+        )
+    }
+}
+
+export class ToastBody3 extends React.Component<{
+    text: string
+    onClick: (...args) => void
+    buttonText: string
+}> {
+    render() {
+        return (
+            <div className="flex left column dc__app-update-toast">
+                <span className="info">{this.props.text}</span>
+                <button type="button" onClick={this.props.onClick}>
+                    {this.props.buttonText}
+                </button>
+            </div>
+        )
+    }
+}
+
+export class ToastBodyWithButton extends React.Component<{
+    title: string
+    subtitle?: string
+    onClick: (...args) => void
+    buttonText: string
+}> {
+    render() {
+        return (
+            <div className="toast dc__app-update-toast">
+                <div className="toast__title">{this.props.title}</div>
+                {this.props.subtitle && <div className="toast__subtitle">{this.props.subtitle}</div>}
+                <button type="button" onClick={this.props.onClick} style={{ float: 'right' }}>
+                    {this.props.buttonText}
+                </button>
+            </div>
+        )
+    }
+}
+
+export const toastAccessDenied = (title?: string, subtitle?: string) => {
+    return toast.info(
+        <ToastBody title={title || TOAST_ACCESS_DENIED.TITLE} subtitle={subtitle || TOAST_ACCESS_DENIED.SUBTITLE} />,
+        {
+            className: 'devtron-toast unauthorized',
+        },
+    )
+}

package/src/Common/Toggle/Toggle.scss

@@ -0,0 +1,78 @@
+.toggle__switch {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+
+    &.disabled {
+        cursor: not-allowed;
+        .toggle__slider {
+            cursor: not-allowed;
+        }
+    }
+}
+
+/* Hide default HTML checkbox */
+
+.toggle__switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* The slider */
+
+.toggle__slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: all 0.4s ease;
+    &.round {
+        border-radius: 34px;
+        &:before {
+            border-radius: 50%;
+        }
+    }
+    &:before {
+        position: absolute;
+        content: '';
+        height: calc(100% - 8px);
+        width: calc(50% - 4px);
+        left: 4px;
+        bottom: 4px;
+        background-color: white;
+        transition: all 0.4s ease;
+    }
+    &.with-icon {
+        background-color: var(--N000) !important;
+        svg {
+            position: absolute;
+            content: '';
+            top: -1px;
+            left: -1px;
+            background-color: var(--N300);
+            transition: all 0.4s ease;
+        }
+    }
+}
+
+input:checked + .toggle__slider {
+    background-color: var(--color);
+    &:before {
+        transform: translateX(calc(100%));
+    }
+    &.with-icon {
+        svg {
+            transform: translateX(calc(100%));
+            background-color: var(--color);
+        }
+    }
+}
+
+input:focus + .toggle__slider {
+    box-shadow: 0 0 1px var(--color);
+}

package/src/Common/Toggle/Toggle.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { useEffectAfterMount } from '../Helper'
+import './Toggle.scss'
+
+const Toggle = ({
+    selected = false,
+    onSelect = null,
+    color = '#36b37e',
+    rootClassName = '',
+    disabled = false,
+    dataTestId = 'handle-toggle-button',
+    Icon = null,
+    iconClass= '',
+    ...props
+}) => {
+    const [active, setActive] = React.useState(selected)
+
+    useEffectAfterMount(() => {
+        if (typeof onSelect === 'function') {
+            if (active !== selected) {
+                onSelect(active)
+            }
+        }
+    }, [active])
+
+    useEffectAfterMount(() => {
+        setActive(selected)
+    }, [selected])
+
+    function handleClick(e) {
+        if (!disabled) {
+            setActive((active) => !active)
+        }
+    }
+
+    return (
+        <label
+            {...props}
+            className={`${rootClassName} toggle__switch ${disabled ? 'disabled' : ''}`}
+            style={{ ['--color' as any]: color }}
+        >
+            <input type="checkbox" checked={!!active} onChange={handleClick} className="toggle__input" />
+            <span className={`toggle__slider ${Icon ? 'with-icon br-4 dc__border' : 'round'}`} data-testid={dataTestId}>
+                {Icon && <Icon className={`icon-dim-20 br-4 p-2 ${iconClass}`} />}
+            </span>
+        </label>
+    )
+}
+
+export default Toggle