@devtron-labs/devtron-fe-common-lib 0.0.55-beta-6 → 0.0.55-beta-7

package/src/Common/Constants.ts

@@ -1,245 +0,0 @@
-import { RegistryTypeDetailType } from "./Types"
-
-export const FALLBACK_REQUEST_TIMEOUT = 60000
-export const Host = process.env.REACT_APP_ORCHESTRATOR_ROOT
-
-export const DOCUMENTATION_HOME_PAGE = 'https://docs.devtron.ai'
-export const DOCUMENTATION = {
-    APP_TAGS: `${DOCUMENTATION_HOME_PAGE}/v/v0.6/usage/applications/create-application#tags`,
-    APP_OVERVIEW_TAGS: `${DOCUMENTATION_HOME_PAGE}/v/v0.6/usage/applications/overview#manage-tags`,
-}
-
-export const PATTERNS = {
-    KUBERNETES_KEY_PREFIX: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/,
-    KUBERNETES_KEY_NAME: /^(([A-Za-z0-9][-A-Za-z0-9_.]*)?[A-Za-z0-9])$/,
-    START_END_ALPHANUMERIC: /^([Az09].*[A-Za-z0-9])$|[A-Za-z0-9]$/,
-    ALPHANUMERIC_WITH_SPECIAL_CHAR: /^[A-Za-z0-9._-]+$/, // allow alphanumeric,(.) ,(-),(_)
-}
-
-export const URLS = {
-    LOGIN_SSO: '/login/sso',
-}
-
-export const ROUTES = {
-    PROJECT_LIST_MIN: 'team/autocomplete',
-    USER_CHECK_ROLE: 'user/check/roles',
-    IMAGE_TAGGING:'app/image-tagging',
-    CD_MATERIAL_GET: 'app/cd-pipeline',
-    DEPLOYMENT_TEMPLATE_LIST: 'app/template/list'
-}
-
-export enum KEY_VALUE {
-    KEY = 'key',
-    VALUE = 'value',
-}
-
-export const DEFAULT_TAG_DATA = {
-    key: '',
-    value: '',
-    propagate: false,
-    isInvalidKey: false,
-    isInvalidValue: false,
-    isSuggested: true,
-}
-
-export const TOAST_ACCESS_DENIED = {
-    TITLE: 'Access denied',
-    SUBTITLE: 'You do not have required access to perform this action',
-}
-
-// Empty state messgaes
-export const ERROR_EMPTY_SCREEN = {
-    PAGE_NOT_FOUND: 'We could not find this page',
-    PAGE_NOT_EXIST: 'This page doesn’t exist or was removed. We suggest you go back to home',
-    TAKE_BACK_HOME: 'Take me home',
-    ONLY_FOR_SUPERADMIN: 'Information on this page is available only to superadmin users.',
-    NOT_AUTHORIZED: 'Not authorized',
-    UNAUTHORIZED: 'unauthorized',
-    FORBIDDEN: 'forbidden',
-    REQUIRED_MANAGER_ACCESS:
-        'Looks like you don’t have access to information on this page. Please contact your manager to request access.',
-}
-export const TOKEN_COOKIE_NAME = 'argocd.token'
-export const TriggerTypeMap = {
-    automatic: 'Auto',
-    manual: 'Manual',
-}
-
-export const BuildStageVariable = {
-  PreBuild: 'preBuildStage',
-  Build: 'buildStage',
-  PostBuild: 'postBuildStage',
-}
-
-export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
-    ecr: {
-        value: 'ecr',
-        label: 'ECR',
-        desiredFormat: '(desired format: repo-name)',
-        placeholderText: 'Eg. repo_name',
-        gettingStartedLink: 'https://docs.aws.amazon.com/AmazonECR/latest/userguide/get-set-up-for-amazon-ecr.html',
-        defaultRegistryURL: '',
-        registryURL: {
-            label: 'Registry URL',
-            defaultValue: '',
-            placeholder: 'Eg. xxxxxxxxxxxx.dkr.ecr.region.amazonaws.com',
-        },
-        id: {
-            label: 'Access key ID',
-            defaultValue: '',
-            placeholder: '',
-        },
-        password: {
-            label: 'Secret access key',
-            defaultValue: '',
-            placeholder: '',
-        },
-    },
-    'docker-hub': {
-        value: 'docker-hub',
-        label: 'Docker',
-        desiredFormat: '(desired format: username/repo-name)',
-        placeholderText: 'Eg. username/repo_name',
-        gettingStartedLink: 'https://docs.docker.com/docker-hub/',
-        defaultRegistryURL: 'docker.io',
-        registryURL: {
-            label: 'Registry URL',
-            defaultValue: '',
-            placeholder: '',
-        },
-        id: {
-            label: 'Username',
-            defaultValue: '',
-            placeholder: '',
-        },
-        password: {
-            label: 'Password/Token (Recommended: Token)',
-            defaultValue: '',
-            placeholder: '',
-        },
-    },
-    acr: {
-        value: 'acr',
-        label: 'Azure',
-        desiredFormat: '(desired format: repo-name)',
-        placeholderText: 'Eg. repo_name',
-        gettingStartedLink:
-            'https://docs.microsoft.com/en-us/azure/container-registry/container-registry-get-started-portal',
-        defaultRegistryURL: '',
-        registryURL: {
-            label: 'Registry URL/Login Server',
-            defaultValue: '',
-            placeholder: 'Eg. xxx.azurecr.io',
-        },
-        id: {
-            label: 'Username/Registry Name',
-            defaultValue: '',
-            placeholder: '',
-        },
-        password: {
-            label: 'Password',
-            defaultValue: '',
-            placeholder: '',
-        },
-    },
-    'artifact-registry': {
-        value: 'artifact-registry',
-        label: 'Artifact Registry (GCP)',
-        desiredFormat: '(desired format: project-id/artifacts-repo/repo-name)',
-        placeholderText: 'Eg. project-id/artifacts-repo/repo-name',
-        gettingStartedLink: 'https://cloud.google.com/artifact-registry/docs/manage-repos?hl=en_US',
-        defaultRegistryURL: '',
-        registryURL: {
-            label: 'Registry URL',
-            defaultValue: '',
-            placeholder: 'Eg. region-docker.pkg.dev',
-        },
-        id: {
-            label: 'Username',
-            defaultValue: '_json_key',
-            placeholder: '',
-        },
-        password: {
-            label: 'Service Account JSON File',
-            defaultValue: '',
-            placeholder: 'Paste json file content here',
-        },
-    },
-    gcr: {
-        value: 'gcr',
-        label: 'GCR',
-        desiredFormat: '(desired format: project-id/repo-name)',
-        placeholderText: 'Eg. project-id/repo_name',
-        gettingStartedLink: 'https://cloud.google.com/container-registry/docs/quickstart',
-        defaultRegistryURL: 'gcr.io',
-        registryURL: {
-            label: 'Registry URL',
-            defaultValue: 'gcr.io',
-            placeholder: '',
-        },
-        id: {
-            label: 'Username',
-            defaultValue: '_json_key',
-            placeholder: '',
-        },
-        password: {
-            label: 'Service Account JSON File',
-            defaultValue: '',
-            placeholder: 'Paste json file content here',
-        },
-    },
-    quay: {
-        value: 'quay',
-        label: 'Quay',
-        desiredFormat: '(desired format: username/repo-name)',
-        placeholderText: 'Eg. username/repo_name',
-        gettingStartedLink: '',
-        defaultRegistryURL: 'quay.io',
-        registryURL: {
-            label: 'Registry URL',
-            defaultValue: '',
-            placeholder: '',
-        },
-        id: {
-            label: 'Username',
-            defaultValue: '',
-            placeholder: '',
-        },
-        password: {
-            label: 'Token',
-            defaultValue: '',
-            placeholder: '',
-        },
-    },
-    other: {
-        value: 'other',
-        label: 'Other',
-        desiredFormat: '',
-        placeholderText: '',
-        gettingStartedLink: '',
-        defaultRegistryURL: '',
-        registryURL: {
-            label: 'Registry URL',
-            defaultValue: '',
-            placeholder: '',
-        },
-        id: {
-            label: 'Username',
-            defaultValue: '',
-            placeholder: '',
-        },
-        password: {
-            label: 'Password/Token',
-            defaultValue: '',
-            placeholder: '',
-        },
-    },
-}
-
-export const RepositoryAction = {
-    CONTAINER: "CONTAINER",
-    CHART_PULL: "CHART_PULL",
-    CHART_PUSH: "CHART_PUSH"
-}
-
-export const MAX_Z_INDEX = 2147483647

package/src/Common/CustomInput/CustomInput.tsx

@@ -1,131 +0,0 @@
-import { CustomInputProps } from './Types'
-import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
-import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-warning.svg'
-
-export function CustomInput({
-    name,
-    value,
-    error,
-    onChange,
-    onFocus = (e) => {},
-    label,
-    type = 'text',
-    disabled = false,
-    labelClassName = '',
-    placeholder = '',
-    tabIndex = 1,
-    dataTestid = '',
-    isRequiredField = false,
-    autoFocus = false,
-    rootClassName = '',
-    autoComplete = 'off',
-    helperText = '',
-    handleOnBlur,
-    readOnly = false,
-    noTrim = false,
-    ref,
-    onKeyPress,
-    defaultValue,
-    onKeyDown,
-    required,
-    additionalErrorInfo
-}: CustomInputProps) {
-
-    function handleError(error: any): any[] {
-        if (!Array.isArray(error)) {
-            return [error]
-        }
-        return error
-    }
-
-    const onBlur = (event) => {
-        //NOTE: This is to prevent the input from being trimmed when the user do not want to trim the input
-        if (!noTrim) {
-            event.stopPropagation()
-            event.target.value = event.target.value?.trim()
-            onChange(event)
-        }
-        if (typeof handleOnBlur === 'function') {
-            handleOnBlur(event)
-        }
-    }
-
-    const renderFormErrorWithIcon = (error: string) => {
-        return (
-            <div className="form__error" key={error}>
-                <ErrorIcon className="form__icon form__icon--error" />
-                {error}
-                {typeof additionalErrorInfo === 'function' && additionalErrorInfo()}
-            </div>
-        )
-    }
-
-    const getInputError = () => {
-        if (!error?.length) {
-            return null
-        } else {
-            if (typeof error === 'object') {
-                return handleError(error).map((err: string) => renderFormErrorWithIcon(err))
-            }
-            return renderFormErrorWithIcon(error)
-        }
-    }
-
-    const renderInputLabelConditionally = () => {
-        if (typeof label === 'string') {
-            return <span className={`${isRequiredField ? 'dc__required-field' : ''}`}>{label}</span>
-        } else {
-            return label
-        }
-    }
-
-    const renderInputLabel = () => {
-        if (!label) {
-            return null
-        } else {
-            return (
-                <label className={`form__label ${labelClassName}`} data-testid={`label-${dataTestid}`}>
-                    {renderInputLabelConditionally()}
-                </label>
-            )
-        }
-    }
-
-    return (
-        <div className="flex column left top">
-           {renderInputLabel()}
-            <input
-                data-testid={dataTestid}
-                type={type}
-                name={name}
-                autoComplete={autoComplete}
-                className={`form__input ${rootClassName}`}
-                onChange={(e) => {
-                    e.persist()
-                    onChange(e)
-                }}
-                onBlur={onBlur}
-                onFocus={onFocus}
-                placeholder={placeholder}
-                value={value}
-                disabled={disabled}
-                tabIndex={tabIndex}
-                autoFocus={autoFocus}
-                readOnly={readOnly}
-                ref={ref}
-                onKeyPress={onKeyPress}
-                defaultValue={defaultValue}
-                onKeyDown={onKeyDown}
-                required={required}
-            />
-
-            {getInputError()}
-            {helperText && (
-                <div className="form__text-field-info">
-                    <Info className="form__icon form__icon--info" />
-                    <p className="sentence-case">{helperText}</p>
-                </div>
-            )}
-        </div>
-    )
-}

package/src/Common/CustomInput/Types.ts

@@ -1,30 +0,0 @@
-import React, { HTMLInputTypeAttribute } from 'react'
-
-export interface CustomInputProps {
-    name: string
-    value: string | number
-    onChange: (e: any) => void
-    onFocus?: (e: any) => void
-    autoComplete?: string
-    label?: string |  React.ReactNode
-    labelClassName?: string
-    type?: HTMLInputTypeAttribute
-    disabled?: boolean
-    placeholder?: string
-    tabIndex?: number
-    dataTestid?: string
-    isRequiredField?: boolean
-    autoFocus?: boolean
-    rootClassName?: string
-    error?: string[] | string
-    helperText?: string
-    handleOnBlur?: (e) => void
-    readOnly?: boolean
-    noTrim?: boolean
-    ref?: React.LegacyRef<HTMLInputElement>
-    onKeyPress?: (e) => void
-    defaultValue?: string | number | ReadonlyArray<string> | undefined
-    onKeyDown?: (e) => void
-    required?: boolean
-    additionalErrorInfo?: React.ReactNode
-}

package/src/Common/CustomInput/index.ts

@@ -1,2 +0,0 @@
-export * from './CustomInput'
-export * from './Types'

package/src/Common/CustomTagSelector/PropagateTagInfo.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
-import { ReactComponent as Help } from '../../Assets/Icon/ic-help-outline.svg'
-import { TippyCustomized } from '../TippyCustomized'
-import { TippyTheme } from '../Types'
-import { DOCUMENTATION } from '../Constants'
-
-export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean }) {
-    const additionalInfo = () => {
-        return (
-            <div className="p-12 fs-13">
-                <div className="mb-20">
-                    <span className="flex left">
-                        Add a tag and click on the
-                        <InjectTag className="icon-dim-16 ml-4 mr-4" />
-                        icon to
-                    </span>
-                    propagate tags as labels to Kubernetes resources
-                </div>
-                <div>Use these tags to filter/identify resources via CLI or in other Kubernetes tools.</div>
-            </div>
-        )
-    }
-    return (
-        <TippyCustomized
-            theme={TippyTheme.white}
-            className="w-300"
-            placement="top"
-            Icon={InjectTag}
-            heading={'Propagate tags to K8s resources'}
-            infoText=""
-            additionalContent={additionalInfo()}
-            showCloseButton={true}
-            trigger="click"
-            interactive={true}
-            documentationLink={isCreateApp ? DOCUMENTATION.APP_TAGS : DOCUMENTATION.APP_OVERVIEW_TAGS}
-            documentationLinkText="View Documentation"
-        >
-            <div className="flexbox cursor">
-                <InjectTag className="icon-dim-16 mt-2 mr-4" />
-                <span>Propagate tags</span>
-                <Help className="icon-dim-16 mt-2 ml-4" />
-            </div>
-        </TippyCustomized>
-    )
-}

package/src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -1,84 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { useThrottledEffect } from '../Helper'
-import { ResizableTagTextAreaProps } from './Types'
-
-export function ResizableTagTextArea({
-    className,
-    minHeight,
-    maxHeight,
-    value,
-    onChange,
-    onBlur,
-    onFocus,
-    placeholder,
-    tabIndex,
-    refVar,
-    dependentRef,
-    dataTestId,
-    handleKeyDown,
-}: ResizableTagTextAreaProps) {
-    const [text, setText] = useState('')
-
-    useEffect(() => {
-        setText(value)
-    }, [value])
-
-    const handleChange = (event) => {
-        setText(event.target.value)
-        onChange(event)
-    }
-
-    const reInitHeight = () => {
-        if (document.activeElement !== refVar.current) return
-        refVar.current.style.height = minHeight + 'px'
-        if (dependentRef) {
-            dependentRef.current.style.height = minHeight + 'px'
-        }
-        let nextHeight = refVar.current.scrollHeight
-        if (dependentRef && nextHeight < dependentRef.current.scrollHeight) {
-            nextHeight = dependentRef.current.scrollHeight
-        }
-        if (minHeight && nextHeight < minHeight) {
-            nextHeight = minHeight
-        }
-        if (maxHeight && nextHeight > maxHeight) {
-            nextHeight = maxHeight
-        }
-        refVar.current.style.height = nextHeight + 'px'
-        if (dependentRef) {
-            dependentRef.current.style.height = nextHeight + 'px'
-        }
-    }
-
-    useThrottledEffect(reInitHeight, 500, [text])
-
-    const handleOnBlur = (event) => {
-        refVar.current.style.height = minHeight + 'px'
-        if (dependentRef) {
-            dependentRef.current.style.height = minHeight + 'px'
-        }
-        onBlur && onBlur(event)
-    }
-
-    const handleOnFocus = (event) => {
-        reInitHeight()
-        onFocus && onFocus(event)
-    }
-
-    return (
-        <textarea
-            rows={1}
-            ref={refVar}
-            value={text}
-            placeholder={placeholder}
-            className={`${className || ''} lh-20`}
-            style={{ resize: 'none' }}
-            onChange={handleChange}
-            onBlur={handleOnBlur}
-            onFocus={handleOnFocus}
-            tabIndex={tabIndex}
-            data-testid={dataTestId}
-            onKeyDown={handleKeyDown}
-        />
-    )
-}

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -1,76 +0,0 @@
-import React, { useRef } from 'react'
-import { ReactComponent as DeleteCross } from '../../Assets/Icon/ic-cross.svg'
-import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
-import { TagLabelValueSelector } from './TagLabelValueSelector'
-import { KEY_VALUE } from '../Constants'
-import { stopPropagation } from '../Helper'
-import { TagDetailType } from './Types'
-import { ValidationRules } from './ValidationRules'
-
-export const TagDetails = ({
-    index,
-    tagData,
-    setTagData,
-    removeTag,
-    tabIndex = 1,
-    suggestedTagsOptions,
-}: TagDetailType) => {
-    const keyRef = useRef(null)
-    const valueRef = useRef(null)
-    const validationRules = new ValidationRules()
-
-    const deleteTag = (e): void => {
-        stopPropagation(e)
-        removeTag(index)
-    }
-    const propagateTagToResource = (): void => {
-        const _tagData = { ...tagData }
-        _tagData.propagate = !_tagData.propagate
-        if (_tagData.propagate) {
-            _tagData.isInvalidKey = _tagData.isInvalidKey || !_tagData.key
-            _tagData.isInvalidValue = _tagData.isInvalidValue || !_tagData.value
-        } else {
-            _tagData.isInvalidKey =
-                _tagData.key || _tagData.value ? !validationRules.propagateTagKey(_tagData.key).isValid : false
-            _tagData.isInvalidValue = _tagData.value
-                ? !validationRules.propagateTagValue(_tagData.value, _tagData.key).isValid
-                : false
-        }
-        setTagData(index, _tagData)
-    }
-    return (
-        <div className="flexbox mb-8">
-            <div
-                className={`dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''} ${tagData.key.startsWith("devtron.ai/") ? 'cursor-not-allowed bcn-1' : ''}`}
-                onClick={propagateTagToResource}
-                data-testid={`propagate-tag-${index}`}
-            >
-                <InjectTag className={`icon-dim-20 mt-4 ${tagData.propagate ? 'scn-0' : ''}`} />
-            </div>
-            <TagLabelValueSelector
-                selectedTagIndex={index}
-                tagData={tagData}
-                setTagData={setTagData}
-                tagInputType={KEY_VALUE.KEY}
-                placeholder="Enter key"
-                tabIndex={tabIndex - 1}
-                refVar={keyRef}
-                dependentRef={valueRef}
-                tagOptions={suggestedTagsOptions}
-            />
-            <TagLabelValueSelector
-                selectedTagIndex={index}
-                tagData={tagData}
-                setTagData={setTagData}
-                tagInputType={KEY_VALUE.VALUE}
-                placeholder="Enter value"
-                tabIndex={tabIndex}
-                refVar={valueRef}
-                dependentRef={keyRef}
-            />
-            <div className="dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top" onClick={deleteTag} data-testid={`delete-tag-${index}`}>
-                <DeleteCross className="icon-dim-20 mt-4" />
-            </div>
-        </div>
-    )
-}

package/src/Common/CustomTagSelector/TagLabelSelect.tsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import PropagateTagInfo from './PropagateTagInfo'
-import { ReactComponent as Add } from '../../Assets/Icon/ic-add.svg'
-import { DEFAULT_TAG_DATA } from '../Constants'
-import { TagLabelSelectType } from './Types'
-import { TagDetails } from './TagDetails'
-
-export const TagLabelSelect = ({
-    isCreateApp,
-    labelTags,
-    setLabelTags,
-    tabIndex = 0
-}: TagLabelSelectType) => {
-    const setTagData = (index, tagValue): void => {
-        const _tags = [...labelTags]
-        const _tagValue = tagValue
-        if(_tagValue.key.startsWith("devtron.ai/")){
-            _tagValue.propagate = false
-        }
-        _tags[index] = _tagValue
-        setLabelTags(_tags)
-    }
-
-    const addNewTag = (): void => {
-        const _tags = [...labelTags]
-        _tags.splice(0, 0, DEFAULT_TAG_DATA)
-        setLabelTags(_tags)
-    }
-
-    const removeTag = (index: number): void => {
-        const _tags = [...labelTags]
-        _tags.splice(index, 1)
-        setLabelTags(_tags)
-    }
-
-    return (
-        <div>
-            <div className="flexbox dc__content-space mb-8">
-                <span>Tags</span>
-                <PropagateTagInfo isCreateApp={isCreateApp} />
-            </div>
-            <div>
-                <div className="dc_width-max-content cb-5 fw-6 fs-13 flexbox mr-20 mb-8 cursor" onClick={addNewTag} data-testid="add-tag-button">
-                    <Add className="icon-dim-20 fcb-5" /> Add tag
-                </div>
-                <div className="mb-8" data-testid="tag-rows-container">
-                    {labelTags?.map((tagData, index) => (
-                        <TagDetails
-                            key={`tag-${index}`}
-                            index={index}
-                            tagData={tagData}
-                            setTagData={setTagData}
-                            removeTag={removeTag}
-                            tabIndex={tabIndex + (index + 2)}
-                        />
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}