@devtron-labs/devtron-fe-common-lib 0.0.59-beta-2 → 0.0.59-beta-4

package/src/Common/Common.service.ts

@@ -1,315 +0,0 @@
-import moment from 'moment';
-import {get, post} from './Api';
-import { ROUTES } from './Constants'
-import { sortCallback } from './Helper';
-import {
-    TeamList,
-    ResponseType,
-    DeploymentNodeType,
-    CDModalTab,
-    FilterStates,
-    CDMaterialServiceEnum,
-    CDMaterialServiceQueryParams,
-    CDMaterialResponseType,
-    CDMaterialsMetaInfo,
-    CDMaterialsApprovalInfo,
-    CDMaterialFilterQuery,
-} from './Types'
-
-export const getTeamListMin = (): Promise<TeamList> => {
-  // ignore active field
-  const URL = `${ROUTES.PROJECT_LIST_MIN}`;
-  return get(URL).then(response => {
-      let list = [];
-      if (response && response.result && Array.isArray(response.result)) {
-          list = response.result;
-      }
-      list = list.sort((a, b) => {
-          return sortCallback('name', a, b);
-      });
-      return {
-          code: response.code,
-          status: response.status,
-          result: list,
-      };
-  });
-};
-
-interface UserRole extends ResponseType {
-    result?: {
-        roles: string[]
-        superAdmin: boolean
-    }
-}
-
-const stageMap = {
-    PRECD: 'PRE',
-    CD: 'DEPLOY',
-    POSTCD: 'POST',
-    APPROVAL: 'APPROVAL',
-}
-
-export const SourceTypeMap = {
-    BranchFixed: 'SOURCE_TYPE_BRANCH_FIXED',
-    WEBHOOK: 'WEBHOOK',
-    BranchRegex: 'SOURCE_TYPE_BRANCH_REGEX',
-}
-
-export function getUserRole(appName?: string): Promise<UserRole> {
-    return get(`${ROUTES.USER_CHECK_ROLE}${appName ? `?appName=${appName}` : ''}`)
-}
-
-export function setImageTags(request, pipelineId: number, artifactId: number){
-    return post(`${ROUTES.IMAGE_TAGGING}/${pipelineId}/${artifactId}`,request )
-}
-
-const processURL = (url: string, params: object) => {
-    const validParams = Object.keys(params).filter((key) => {
-        return params[key] != null
-    })
-
-    if (!validParams.length) {
-        return url
-    }
-
-    const queryString = validParams
-        .map((key) => {
-            if (Array.isArray(params[key])) {
-                return `${key}=${params[key].join(',')}`  
-            }
-            return `${key}=${params[key]}`
-        })
-        .join('&')    
-
-    return `${url}?${queryString}`
-}
-
-const cdMaterialListModal = (artifacts: any[], offset: number, artifactId?: number, artifactStatus?: string) => {
-    if (!artifacts || !artifacts.length) return []
-
-    const markFirstSelected = offset === 0
-    const startIndex = offset
-    let isImageMarked = false
-
-    const materials = artifacts.map((material, index) => {
-        let artifactStatusValue = ''
-        const filterState = material.filterState ?? FilterStates.ALLOWED
-
-        if (artifactId && artifactStatus && material.id === artifactId) {
-            artifactStatusValue = artifactStatus
-        }
-
-        const selectImage =
-            !isImageMarked && markFirstSelected && filterState === FilterStates.ALLOWED ? !material.vulnerable : false
-        if (selectImage) {
-            isImageMarked = true
-        }
-
-        return {
-            index: startIndex + index,
-            id: material.id,
-            deployedTime: material.deployed_time
-                ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
-                : 'Not Deployed',
-            deployedBy: material.deployedBy,
-            wfrId: material.wfrId,
-            tab: CDModalTab.Changes,
-            image: extractImage(material.image),
-            showChanges: false,
-            vulnerabilities: [],
-            buildTime: material.build_time || '',
-            isSelected: selectImage,
-            showSourceInfo: false,
-            deployed: material.deployed || false,
-            latest: material.latest || false,
-            vulnerabilitiesLoading: true,
-            scanned: material.scanned,
-            scanEnabled: material.scanEnabled,
-            vulnerable: material.vulnerable,
-            runningOnParentCd: material.runningOnParentCd,
-            artifactStatus: artifactStatusValue,
-            userApprovalMetadata: material.userApprovalMetadata,
-            triggeredBy: material.triggeredBy,
-            isVirtualEnvironment: material.isVirtualEnvironment,
-            imageComment: material.imageComment,
-            imageReleaseTags: material.imageReleaseTags,
-            // It is going to be null but required in type so can't remove
-            lastExecution: material.lastExecution,
-            materialInfo: material.material_info
-                ? material.material_info.map((mat) => {
-                      return {
-                          modifiedTime: mat.modifiedTime
-                              ? moment(mat.modifiedTime).format('ddd, DD MMM YYYY, hh:mm A')
-                              : '',
-                          commitLink: createGitCommitUrl(mat.url, mat.revision),
-                          author: mat.author || '',
-                          message: mat.message || '',
-                          revision: mat.revision || '',
-                          tag: mat.tag || '',
-                          webhookData: mat.webhookData || '',
-                          url: mat.url || '',
-                          branch:
-                              (material.ciConfigureSourceType === SourceTypeMap.WEBHOOK
-                                  ? material.ciConfigureSourceValue
-                                  : mat.branch) || '',
-                          type: material.ciConfigureSourceType || '',
-                      }
-                  })
-                : [],
-            filterState,
-            appliedFiltersTimestamp: material.appliedFiltersTimestamp ?? '',
-            appliedFilters: material.appliedFilters ?? [],
-            appliedFiltersState: material.appliedFiltersState ?? FilterStates.ALLOWED,
-            createdTime: material.createdTime ?? '',
-            dataSource: material.data_source ?? '',
-            registryType: material.registryType ?? '',
-            imagePath: material.image ?? '',
-            registryName: material.registryName ?? '',
-        }
-    })
-    return materials
-}
-
-const processCDMaterialsApprovalInfo = (enableApproval: boolean, cdMaterialsResult): CDMaterialsApprovalInfo => {
-    if (!enableApproval) {
-        return {
-            approvalUsers: [],
-            userApprovalConfig: null,
-            requestedUserId: 0,
-        }
-    }
-
-    return {
-        approvalUsers: cdMaterialsResult.approvalUsers,
-        userApprovalConfig: cdMaterialsResult.userApprovalConfig,
-        requestedUserId: cdMaterialsResult.requestedUserId,
-    }
-}
-
-const processCDMaterialsMetaInfo = (cdMaterialsResult): CDMaterialsMetaInfo => {
-    if (!cdMaterialsResult) {
-        return {
-            tagsEditable: false,
-            appReleaseTagNames: [],
-            hideImageTaggingHardDelete: false,
-            resourceFilters: [],
-            totalCount: 0,
-            canApproverDeploy: cdMaterialsResult.canApproverDeploy ?? false,
-        }
-    }
-
-    return {
-        appReleaseTagNames: cdMaterialsResult.appReleaseTagNames,
-        tagsEditable: cdMaterialsResult.tagsEditable,
-        hideImageTaggingHardDelete: cdMaterialsResult.hideImageTaggingHardDelete,
-        resourceFilters: cdMaterialsResult.resourceFilters ?? [],
-        totalCount: cdMaterialsResult.totalCount ?? 0,
-        canApproverDeploy: cdMaterialsResult.canApproverDeploy ?? false,
-    }
-}
-
-const processCDMaterialServiceResponse = (
-    cdMaterialsResult,
-    stage: DeploymentNodeType,
-    offset: number,
-    filter: CDMaterialFilterQuery,
-): CDMaterialResponseType => {
-    if (!cdMaterialsResult) {
-        return {
-            materials: [],
-            ...processCDMaterialsMetaInfo(cdMaterialsResult),
-            ...processCDMaterialsApprovalInfo(false, cdMaterialsResult),
-        }
-    }
-
-    const materials = cdMaterialListModal(
-        cdMaterialsResult.ci_artifacts,
-        offset ?? 0,
-        cdMaterialsResult.latest_wf_artifact_id,
-        cdMaterialsResult.latest_wf_artifact_status,
-    )
-    const approvalInfo = processCDMaterialsApprovalInfo(
-        stage === DeploymentNodeType.CD || stage === DeploymentNodeType.APPROVAL,
-        cdMaterialsResult,
-    )
-    const metaInfo = processCDMaterialsMetaInfo(cdMaterialsResult)
-
-    // TODO: On update of service would remove from here
-    const filteredMaterials =
-        filter && filter === CDMaterialFilterQuery.RESOURCE
-            ? materials.filter((material) => {
-                  return material.filterState === FilterStates.ALLOWED
-              })
-            : materials
-
-    return {
-        materials: filteredMaterials,
-        ...approvalInfo,
-        ...metaInfo,
-    }
-}
-
-const getSanitizedQueryParams = (queryParams: CDMaterialServiceQueryParams): CDMaterialServiceQueryParams => {
-    const { filter, ...rest } = queryParams
-    return rest
-}
-
-export const genericCDMaterialsService = (
-    serviceType: CDMaterialServiceEnum,
-    cdMaterialID: number,
-    stage: DeploymentNodeType,
-    signal: AbortSignal,
-    queryParams: CDMaterialServiceQueryParams = {},
-): Promise<CDMaterialResponseType> => {
-    // TODO: On update of service would remove from here
-    const manipulatedParams = getSanitizedQueryParams(queryParams)
-    
-    let URL
-    switch (serviceType) {
-        case CDMaterialServiceEnum.ROLLBACK:
-            URL = processURL(`${ROUTES.CD_MATERIAL_GET}/${cdMaterialID}/material/rollback`, manipulatedParams)
-            break
-
-        // Meant for handling getCDMaterialList
-        default:
-            URL = processURL(`${ROUTES.CD_MATERIAL_GET}/${cdMaterialID}/material`, { ...manipulatedParams, stage: stageMap[stage] })
-            break
-    }
-
-    return get(URL, { signal }).then((response) => {
-        return processCDMaterialServiceResponse(response.result, stage, queryParams.offset, queryParams.filter)
-    })
-}
-
-export function extractImage(image: string): string {
-    return image ? image.split(':').pop() : ''
-}
-
-export function createGitCommitUrl(url: string, revision: string): string {
-    if (!url || !revision) {
-        return "NA"
-    }
-    if (url.indexOf("gitlab") > 0 || url.indexOf("github") > 0 || url.indexOf("azure") > 0) {
-        let urlpart = url.split("@")
-        if (urlpart.length > 1) {
-            return "https://" + urlpart[1].split(".git")[0] + "/commit/" + revision
-        }
-        if (urlpart.length == 1) {
-            return urlpart[0].split(".git")[0] + "/commit/" + revision
-        }
-    }
-    if (url.indexOf("bitbucket") > 0) {
-        let urlpart = url.split("@")
-        if (urlpart.length > 1) {
-            return "https://" + urlpart[1].split(".git")[0] + "/commits/" + revision
-        }
-        if (urlpart.length == 1) {
-            return urlpart[0].split(".git")[0] + "/commits/" + revision
-        }
-    }
-    return "NA"
-}
-
-export function fetchChartTemplateVersions() {
-    return get(`${ROUTES.DEPLOYMENT_TEMPLATE_LIST}?appId=-1&envId=-1`)
-}

package/src/Common/Constants.ts

@@ -1,255 +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',
-    INFRA_CONFIG_PROFILE: 'infra-config/profile',
-}
-
-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 enum APPROVAL_MODAL_TYPE {
-    CONFIG = 'CONFIG',
-    DEPLOYMENT = 'DEPLOYMENT',
-}
-export const MAX_Z_INDEX = 2147483647
-
-export const SELECTED_APPROVAL_TAB_STATE = {
-    APPROVAL: 'approval',
-    PENDING: 'pending',
-}

package/src/Common/CustomInput/CustomInput.tsx

@@ -1,135 +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'
-
-// TODO: label association with input
-export function CustomInput({
-    name,
-    value,
-    error,
-    onChange,
-    onFocus = (e) => {},
-    label,
-    type = 'text',
-    disabled = false,
-    labelClassName = '',
-    placeholder = '',
-    tabIndex = 0,
-    dataTestid = '',
-    isRequiredField = false,
-    autoFocus = false,
-    rootClassName = '',
-    autoComplete = 'off',
-    helperText = '',
-    handleOnBlur,
-    readOnly = false,
-    noTrim = false,
-    ref,
-    onKeyPress,
-    defaultValue,
-    onKeyDown,
-    required,
-    additionalErrorInfo,
-    inputWrapClassName = '',
-    inputProps = {},
-}: 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}
-                {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 ${inputWrapClassName}`}>
-            {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}
-                // Will be passing other props like other data attributes etc from inputProps
-                {...inputProps}
-            />
-
-            {getInputError()}
-            {helperText && (
-                <div className="form__text-field-info">
-                    <Info className="form__icon form__icon--info" />
-                    <p className="sentence-case">{helperText}</p>
-                </div>
-            )}
-        </div>
-    )
-}