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

package/src/Common/Common.service.ts

@@ -0,0 +1,315 @@
+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

@@ -0,0 +1,255 @@
+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

@@ -0,0 +1,135 @@
+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>
+    )
+}