@devtron-labs/devtron-fe-common-lib 0.0.7 → 0.0.9-beta-1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.7",
+    "version": "0.0.9-beta-1",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -36,7 +36,7 @@
         "typescript": "^4.9.4",
         "react-toastify": "^8.2.0",
         "@tippyjs/react": "^4.2.0",
-        "react-select": "^5.2.2",
+        "react-select": "5.2.2",
         "@sentry/browser": "^7.31.1"
     },
     "peerDependencies": {

package/rollup.config.js

@@ -7,7 +7,7 @@ import del from 'rollup-plugin-delete'
 import pkg from './package.json'
 import svgr from '@svgr/rollup'
 import url from '@rollup/plugin-url'
-import commonjs from '@rollup/plugin-commonjs';
+import commonjs from '@rollup/plugin-commonjs'
 
 export default {
     input: './src/index.ts',
@@ -24,8 +24,8 @@ export default {
             exclude: 'node_modules/**',
         }),
         del({ targets: ['dist/*'] }),
-        url(),
-        svgr({ icon: true }),
+        url({limit: '100000'}),
+        svgr({ icon: true })
     ],
     external: Object.keys(pkg.peerDependencies || {}),
 }

package/src/Assets/Icon/ic-help.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#767D84" fill-rule="evenodd" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm-.205 12.868c-.615 0-1.12.505-1.12 1.12 0 .617.505 1.121 1.12 1.121.615 0 1.12-.504 1.12-1.12 0-.616-.506-1.12-1.12-1.12zM11.863 7c-1.667 0-3.197 1.187-3.196 2.527 0 .546.41.833.888.833 1.325 0 .642-1.803 2.39-1.803.82 0 1.311.438 1.311 1.175 0 1.34-2.39 1.708-2.39 3.334 0 .438.287.915.874.915.902 0 .792-.67 1.12-1.148.438-.642 2.473-1.325 2.473-3.101 0-1.927-1.721-2.732-3.47-2.732z"/>
+</svg>

package/src/Assets/Icon/ic-info-filled.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h32v32H0z"/>
+        <path fill="#06C" d="M16 2.667C8.64 2.667 2.667 8.64 2.667 16S8.64 29.333 16 29.333 29.333 23.36 29.333 16 23.36 2.667 16 2.667z"/>
+        <path fill="#FFF" d="M16 14.667c.736 0 1.333.597 1.333 1.333v5.333a1.333 1.333 0 1 1-2.666 0V16c0-.736.597-1.333 1.333-1.333zm0-5.334A1.333 1.333 0 1 1 16 12a1.333 1.333 0 0 1 0-2.667z"/>
+    </g>
+</svg>

package/src/Assets/Icon/ic-warning.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h32v32H0z"/>
+        <path fill="#FFCB5D" d="M18.315 5.052L29.72 25.01A2.667 2.667 0 0 1 27.405 29H4.595a2.667 2.667 0 0 1-2.315-3.99L13.685 5.052a2.667 2.667 0 0 1 4.63 0z"/>
+        <path fill="#FFF" d="M16 22.667a1.333 1.333 0 1 1 0 2.666 1.333 1.333 0 0 1 0-2.666zM16 12c.736 0 1.333.597 1.333 1.333v6.334a1.333 1.333 0 1 1-2.666 0v-6.334c0-.736.597-1.333 1.333-1.333z"/>
+    </g>
+</svg>

package/src/Common/Api.ts

@@ -1,5 +1,5 @@
 import { ServerErrors } from './ServerError'
-import { RequestTimeout, Host } from './Constants'
+import { RequestTimeout, Host, URLS } from './Constants'
 import { ResponseType, APIOptions } from './Types'
 
 const responseMessages = {
@@ -73,6 +73,11 @@ const responseMessages = {
     599: 'Network connect timeout error',
 }
 
+function handleLogout() {
+    const continueParam = `${window.location.pathname.replace(process.env.PUBLIC_URL, '')}${window.location.search}`
+    window.location.href = `${window.location.origin}${process.env.PUBLIC_URL}${URLS.LOGIN_SSO}?continue=${continueParam}`
+}
+
 async function handleServerError(contentType, response) {
     //Test for HTTP Status Code
     let code: number = response.status
@@ -126,6 +131,7 @@ async function fetchAPI(
                         ],
                     })
                 } else {
+                    handleLogout()
                     return { code: 401, status: 'Unauthorized', result: [] }
                 }
             } else if (response.status >= 300 && response.status <= 599) {

package/src/Common/BreadCrumb/BreadCrumb.tsx

@@ -2,32 +2,9 @@ import React, { useMemo, useEffect } from 'react'
 import { Link, useRouteMatch, useParams } from 'react-router-dom'
 import { useBreadcrumbContext } from './BreadcrumbStore'
 import { ConditionalWrap } from '../Helper'
+import { Breadcrumb, Breadcrumbs, UseBreadcrumbOptionalProps, UseBreadcrumbState } from './Types'
 export const BreadcrumbContext = React.createContext(null)
 
-interface Breadcrumb {
-    to: string
-    name: string
-    className?: string
-}
-
-interface UseBreadcrumbState {
-    breadcrumbs: Breadcrumb[]
-    setCrumb: (props: { [key: string]: any }) => void
-    resetCrumb: (props: string[]) => void
-}
-
-interface AdvancedAlias {
-    component: any
-    linked: boolean
-}
-
-interface UseBreadcrumbProps {
-    sep?: string
-    alias?: { [key: string]: AdvancedAlias | any }
-}
-
-type UseBreadcrumbOptionalProps = UseBreadcrumbProps | null
-
 export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]): UseBreadcrumbState {
     let sep = props?.sep || '/'
     deps = deps || []
@@ -91,12 +68,6 @@ export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]):
     return { breadcrumbs, setCrumb, resetCrumb }
 }
 
-interface Breadcrumbs {
-    breadcrumbs: Breadcrumb[]
-    sep?: string
-    className?: string
-}
-
 export const BreadCrumb: React.FC<Breadcrumbs> = ({
     breadcrumbs,
     sep = '/',

package/src/Common/BreadCrumb/Types.ts

@@ -0,0 +1,30 @@
+
+export interface Breadcrumb {
+  to: string
+  name: string
+  className?: string
+}
+
+export interface UseBreadcrumbState {
+  breadcrumbs: Breadcrumb[]
+  setCrumb: (props: { [key: string]: any }) => void
+  resetCrumb: (props: string[]) => void
+}
+
+export interface AdvancedAlias {
+  component: any
+  linked: boolean
+}
+
+export interface UseBreadcrumbProps {
+  sep?: string
+  alias?: { [key: string]: AdvancedAlias | any }
+}
+
+export interface Breadcrumbs {
+    breadcrumbs: Breadcrumb[]
+    sep?: string
+    className?: string
+}
+
+export type UseBreadcrumbOptionalProps = UseBreadcrumbProps | null

package/src/Common/CIPipeline.Types.ts

@@ -0,0 +1,275 @@
+export interface MaterialType {
+    name: string
+    type: string
+    value: string
+    gitMaterialId: number
+    id: number
+    isSelected: boolean
+    gitHostId: number
+    gitProviderId: number
+    regex?: string
+    isRegex: boolean
+}
+
+export interface Githost {
+    id: number
+    name: string
+    active: boolean
+    webhookSecret: string
+    webhookUrl: string
+}
+
+export interface WebhookEvent {
+    id: number
+    gitHostId: number
+    name: string
+    isActive: boolean
+    selectors: WebhookEventSelectors[]
+}
+
+interface WebhookEventSelectors {
+    id: number
+    eventId: number
+    name: string
+    selector: string
+    toShowInCiFilter: boolean
+    fixValue: string
+    toShow: boolean
+    possibleValues: string
+    isActive: boolean
+}
+
+export interface CiPipelineSourceTypeOption {
+    label: string
+    value: string
+    isDisabled: boolean
+    isSelected: boolean
+    isWebhook: boolean
+}
+
+export enum RefVariableType {
+    GLOBAL = 'GLOBAL',
+    FROM_PREVIOUS_STEP = 'FROM_PREVIOUS_STEP',
+    NEW = 'NEW',
+}
+
+export enum PluginType {
+    INLINE = 'INLINE',
+    PLUGIN_REF = 'REF_PLUGIN',
+}
+
+export enum ScriptType {
+    SHELL = 'SHELL',
+    DOCKERFILE = 'DOCKERFILE',
+    CONTAINERIMAGE = 'CONTAINER_IMAGE',
+}
+
+export enum MountPath {
+    TRUE = 'Yes',
+    FALSE = 'No',
+}
+
+export enum ConditionType {
+    SKIP = 'SKIP',
+    TRIGGER = 'TRIGGER',
+    PASS = 'PASS',
+    FAIL = 'FAIL',
+}
+
+export enum RefVariableStageType {
+    PRE_CI = 'PRE_CI',
+    POST_CI = 'POST_CI',
+}
+
+export interface VariableType {
+    id: number
+    name: string
+    value: string
+    format: string
+    description: string
+    defaultValue: string
+    variableType: RefVariableType
+    refVariableStepIndex: number
+    refVariableName: string
+    refVariableStage?: RefVariableStageType
+    variableStepIndexInPlugin?: number
+}
+
+interface CommandArgsMap {
+    command: string
+    args: string[]
+}
+
+export interface PortMapType {
+    portOnLocal: number
+    portOnContainer: number
+}
+interface ConditionDetails {
+    id: number
+    conditionOnVariable: string
+    conditionOperator: string
+    conditionType: ConditionType
+    conditionalValue: string
+}
+
+interface InlineStepDetailType {
+    scriptType: ScriptType
+    isMountCustomScript?: boolean
+    script?: string
+    dockerFileExists?: boolean
+    mountPath?: string
+    mountCodeToContainer?: boolean
+    mountDirectoryFromHost?: boolean
+    containerImagePath?: string
+    imagePullSecret?: string
+    commandArgsMap?: CommandArgsMap[]
+    portMap?: PortMapType[]
+    mountPathMap?: {
+        filePathOnDisk: string
+        filePathOnContainer: string
+    }[]
+    inputVariables?: VariableType[]
+    outputVariables?: VariableType[]
+    conditionDetails: ConditionDetails[]
+}
+
+interface PluginRefStepDetailType {
+    id: number
+    pluginId: number
+    inputVariables?: VariableType[]
+    outputVariables?: VariableType[]
+    conditionDetails?: ConditionDetails[]
+}
+
+export interface StepType {
+    id: number
+    index: number
+    name: string
+    description: string
+    stepType: PluginType
+    outputDirectoryPath: string[]
+    inlineStepDetail?: InlineStepDetailType
+    pluginRefStepDetail?: PluginRefStepDetailType
+    triggerIfParentStageFail: boolean
+    isMandatory?: boolean
+}
+
+export interface BuildStageType {
+    id: number
+    steps: StepType[]
+}
+
+export enum CIBuildType {
+    SELF_DOCKERFILE_BUILD_TYPE = 'self-dockerfile-build',
+    MANAGED_DOCKERFILE_BUILD_TYPE = 'managed-dockerfile-build',
+    BUILDPACK_BUILD_TYPE = 'buildpack-build',
+}
+
+export interface BuildPackConfigType {
+    builderId: string
+    language: string
+    languageVersion: string
+    projectPath: string
+    builderLangEnvParam?: string
+    currentBuilderLangEnvParam?: string
+    buildPacks?: any
+    args?: Record<string, string>
+}
+
+export interface DockerBuildConfigType {
+    dockerfileContent: string
+    dockerfileRelativePath: string
+    buildContext: string
+    dockerfilePath?: string
+    dockerfileRepository?: string
+    args?: Record<string, string>
+    targetPlatform?: any
+    language?: string
+    languageFramework?: string
+}
+
+export interface CIBuildConfigType {
+    buildPackConfig: BuildPackConfigType
+    ciBuildType: CIBuildType
+    dockerBuildConfig: DockerBuildConfigType
+    gitMaterialId: number
+    buildContextGitMaterialId: number
+    id?: number
+}
+
+export interface DockerConfigOverrideType {
+    dockerRegistry: string
+    dockerRepository: string
+    ciBuildConfig: CIBuildConfigType
+}
+
+export interface FormType {
+    name: string
+    args: { key: string; value: string }[]
+    materials: MaterialType[]
+    gitHost: Githost
+    webhookEvents: WebhookEvent[]
+    ciPipelineSourceTypeOptions: CiPipelineSourceTypeOption[]
+    webhookConditionList: { selectorId: number; value: string }[]
+    triggerType: string
+    scanEnabled?: boolean
+    beforeDockerBuildScripts?: {
+        id: number
+        name: string
+        outputLocation: string
+        script: string
+        isCollapsed: boolean
+        index: number
+    }[]
+    afterDockerBuildScripts?: {
+        id: number
+        name: string
+        outputLocation: string
+        script: string
+        isCollapsed: boolean
+        index: number
+    }[]
+    ciPipelineEditable: true
+    preBuildStage?: BuildStageType
+    postBuildStage?: BuildStageType
+    isDockerConfigOverridden?: boolean
+    dockerConfigOverride?: DockerConfigOverrideType
+}
+
+export interface ErrorObj {
+    isValid: boolean
+    message: string | null
+}
+export interface TaskErrorObj {
+    isValid: boolean
+    name: ErrorObj
+    inlineStepDetail?: { inputVariables?: ErrorObj[]; outputVariables?: ErrorObj[] }
+    pluginRefStepDetail?: { inputVariables?: ErrorObj[]; outputVariables?: ErrorObj[] }
+}
+export interface FormErrorObjectType {
+    name: ErrorObj
+    materials?: MaterialType[]
+    preBuildStage?: {
+        isValid: boolean
+        steps: TaskErrorObj[]
+    }
+    buildStage?: {
+        isValid: boolean
+        name: ErrorObj
+    }
+    postBuildStage?: {
+        isValid: boolean
+        steps: TaskErrorObj[]
+    }
+}
+
+export interface PluginDetailType {
+  id: number
+  name: string
+  type: string
+  description: string
+  icon: string
+  tags: string[]
+  inputVariables?: VariableType[]
+  outputVariables?: VariableType[]
+}

package/src/Common/Checkbox.tsx

@@ -1,19 +1,5 @@
 import React, { Component } from 'react'
-
-export enum CHECKBOX_VALUE {
-    CHECKED = 'CHECKED',
-    INTERMEDIATE = 'INTERMEDIATE',
-}
-export interface CheckboxProps {
-    onChange: (event) => void
-    isChecked: boolean
-    value: 'CHECKED' | 'INTERMEDIATE'
-    disabled?: boolean
-    tabIndex?: number
-    rootClassName?: string
-    onClick?: (event) => void
-    id?: string
-}
+import { CheckboxProps } from './Types'
 
 /*
 Valid States of Checkbox:
@@ -39,8 +25,9 @@ export class Checkbox extends Component<CheckboxProps> {
                         tabIndex={this.props.tabIndex}
                         checked={this.props.isChecked}
                         id={this.props.id}
+                        data-testid={this.props.dataTestId}
                     />
-                    <span className="form__checkbox-container"></span>
+                    <span className="form__checkbox-container" data-testid={`${this.props.dataTestId}-chk-span`}></span>
                     <span className={`form__checkbox-label`}>{this.props.children}</span>
                 </label>
             </>

package/src/Common/Constants.ts

@@ -14,6 +14,10 @@ export const PATTERNS = {
     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',
 }
@@ -42,4 +46,21 @@ 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',
+}

package/src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -14,6 +14,7 @@ export function ResizableTagTextArea({
     tabIndex,
     refVar,
     dependentRef,
+    dataTestId,
 }: ResizableTagTextAreaProps) {
     const [text, setText] = useState('')
 
@@ -28,8 +29,8 @@ export function ResizableTagTextArea({
 
     const reInitHeight = () => {
         if (document.activeElement !== refVar.current) return
-        refVar.current.style.height = 'auto'
-        dependentRef.current.style.height = 'auto'
+        refVar.current.style.height = minHeight+ 'px'
+        dependentRef.current.style.height = minHeight+ 'px'
         let nextHeight = refVar.current.scrollHeight
         if (nextHeight < dependentRef.current.scrollHeight) {
             nextHeight = dependentRef.current.scrollHeight
@@ -47,8 +48,8 @@ export function ResizableTagTextArea({
     useThrottledEffect(reInitHeight, 500, [text])
 
     const handleOnBlur = (event) => {
-        refVar.current.style.height = 'auto'
-        dependentRef.current.style.height = 'auto'
+        refVar.current.style.height = minHeight+ 'px'
+        dependentRef.current.style.height = minHeight+ 'px'
         onBlur && onBlur(event)
     }
 
@@ -69,6 +70,7 @@ export function ResizableTagTextArea({
             onBlur={handleOnBlur}
             onFocus={handleOnFocus}
             tabIndex={tabIndex}
+            data-testid={dataTestId}
         />
     )
 }

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -5,6 +5,7 @@ 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,
@@ -16,6 +17,7 @@ export const TagDetails = ({
 }: TagDetailType) => {
     const keyRef = useRef(null)
     const valueRef = useRef(null)
+    const validationRules = new ValidationRules()
 
     const deleteTag = (e): void => {
         stopPropagation(e)
@@ -24,13 +26,24 @@ export const TagDetails = ({
     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' : ''}`}
+                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>
@@ -55,7 +68,7 @@ export const TagDetails = ({
                 refVar={valueRef}
                 dependentRef={keyRef}
             />
-            <div className="dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top" onClick={deleteTag}>
+            <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

@@ -13,7 +13,11 @@ export const TagLabelSelect = ({
 }: TagLabelSelectType) => {
     const setTagData = (index, tagValue): void => {
         const _tags = [...labelTags]
-        _tags[index] = tagValue
+        const _tagValue = tagValue
+        if(_tagValue.key.startsWith("devtron.ai/")){
+            _tagValue.propagate = false
+        }
+        _tags[index] = _tagValue
         setLabelTags(_tags)
     }
 
@@ -36,10 +40,10 @@ export const TagLabelSelect = ({
                 <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}>
+                <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">
+                <div className="mb-8" data-testid="tag-rows-container">
                     {labelTags?.map((tagData, index) => (
                         <TagDetails
                             key={`tag-${index}`}