Merge branch 'feature/application-template' of github.com:devtron-labs/devtron-fe-common-lib into feature/application-template

eshankvaish · eshankvaish · commit a14f55716b03 · 2025-03-18T15:17:36.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Assets/IconV2/ic-card-stack.svg b/src/Assets/IconV2/ic-card-stack.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 9H5m14 0a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2m14 0V7a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v2m12-3V4a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v2" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-copy.svg b/src/Assets/IconV2/ic-copy.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.25 15.749h-4.5v-12h12v4.5m4.5 0h-12v12h12v-12Z" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-new.svg b/src/Assets/IconV2/ic-new.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4m-5.765-7.662 1.639.603a2 2 0 0 1 1.185 1.186l.603 1.638a.36.36 0 0 0 .676 0l.603-1.639a2 2 0 0 1 1.186-1.185l1.638-.603a.36.36 0 0 0 0-.676l-1.639-.603a2 2 0 0 1-1.185-1.186l-.603-1.638a.36.36 0 0 0-.676 0l-.603 1.639a2 2 0 0 1-1.186 1.185l-1.638.603a.36.36 0 0 0 0 .676Z" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Common/GenericDescription/GenericDescription.tsx b/src/Common/GenericDescription/GenericDescription.tsx
@@ -18,9 +18,8 @@ import { useState, useRef, useEffect } from 'react'
 import Tippy from '@tippyjs/react'
 import ReactMde from 'react-mde'
 import 'react-mde/lib/styles/css/react-mde-all.css'
-import moment from 'moment'
 import Markdown from '../Markdown/MarkDown'
-import { DATE_TIME_FORMATS, deepEqual, showError } from '..'
+import { deepEqual, showError } from '..'
 import './genericDescription.scss'
 import { ReactComponent as Edit } from '../../Assets/Icon/ic-pencil.svg'
 import { GenericDescriptionProps, MDEditorSelectedTabType } from './types'
@@ -43,6 +42,7 @@ import { ReactComponent as OrderedListIcon } from '../../Assets/Icon/ic-ordered-
 import { ReactComponent as UnorderedListIcon } from '../../Assets/Icon/ic-unordered-list.svg'
 import { ReactComponent as CheckedListIcon } from '../../Assets/Icon/ic-checked-list.svg'
 import { DESCRIPTION_EMPTY_ERROR_MSG, DESCRIPTION_UNSAVED_CHANGES_MSG } from './constant'
+import { getParsedUpdatedOnDate } from './utils'
 
 const GenericDescription = ({
     text,
@@ -65,9 +65,7 @@ const GenericDescription = ({
         setModifiedDescriptionText(text)
     }, [text])
 
-    // TODO (Arun): Replace with dayjs
-    const _moment = moment(updatedOn)
-    const _date = _moment.isValid() ? _moment.format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT) : updatedOn
+    const _date = getParsedUpdatedOnDate(updatedOn)
 
     const validateDescriptionText = (description: string): boolean => {
         let isValid = true
diff --git a/src/Common/GenericDescription/utils.ts b/src/Common/GenericDescription/utils.ts
@@ -0,0 +1,12 @@
+import moment from 'moment'
+import { DATE_TIME_FORMATS, ZERO_TIME_STRING } from '@Common/Constants'
+
+export const getParsedUpdatedOnDate = (updatedOn: string) => {
+    if (!updatedOn || updatedOn === ZERO_TIME_STRING) {
+        return ''
+    }
+
+    const _moment = moment(updatedOn)
+
+    return _moment.isValid() ? _moment.format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT) : updatedOn
+}
diff --git a/src/Common/Types.ts b/src/Common/Types.ts
@@ -909,6 +909,10 @@ export interface CiMaterial {
     id: number
     gitMaterialName: string
     isRegex?: boolean
+    /**
+     * Available only for template view
+     */
+    gitMaterialUrl: string
 }
 
 export interface Task {
@@ -1092,4 +1096,4 @@ export enum ActionTypes {
     UPDATE = 'update',
     EDIT = 'edit',
     APPROVER = 'approver',
-}
+}
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/types.ts b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/types.ts
@@ -70,9 +70,11 @@ export enum GetTemplateAPIRouteType {
     CD_DEPLOY_CONFIG = 'cd-deploy-config',
     CD_ENV_LIST = 'cd-env-list',
     CONFIG_DEPLOYMENT_TEMPLATE = 'config/deployment-template',
+    CONFIG_DEPLOYMENT_TEMPLATE_ENV = 'config/deployment-template/env',
     CONFIG_DATA = 'config-data',
     CONFIG_CM = 'config/config-map',
     CONFIG_CS = 'config/secret',
+    WORKFLOW = 'workflow',
     WORKFLOW_LIST = 'workflow/list',
     OVERVIEW = 'overview',
     README = 'readme',
@@ -83,6 +85,8 @@ export enum GetTemplateAPIRouteType {
     CD_PIPELINE = 'cd-pipeline',
     CONFIG_STRATEGY = 'config/strategy',
     CHART_REF = 'chartRef',
+    PIPELINE_SUGGEST_CI = 'pipeline/suggest/ci',
+    PIPELINE_SUGGEST_CD = 'pipeline/suggest/cd',
 }
 
 export interface GetTemplateAPIRouteProps {
diff --git a/src/Shared/Components/FloatingVariablesSuggestions/FloatingVariablesSuggestions.tsx b/src/Shared/Components/FloatingVariablesSuggestions/FloatingVariablesSuggestions.tsx
@@ -44,13 +44,14 @@ const FloatingVariablesSuggestions = ({
     bounds,
     hideObjectVariables = true,
     showValueOnHover = true,
+    isTemplateView,
 }: FloatingVariablesSuggestionsProps) => {
     const [isActive, setIsActive] = useState<boolean>(false)
     const [collapsedPosition, setCollapsedPosition] = useState<{ x: number; y: number }>({ x: 0, y: 0 })
     const [expandedPosition, setExpandedPosition] = useState<{ x: number; y: number }>({ x: 0, y: 0 })
 
     const [loadingScopedVariables, variablesData, error, reloadScopedVariables] = useAsync(
-        () => getScopedVariables(appId, envId, clusterId, hideObjectVariables),
+        () => getScopedVariables(appId, envId, clusterId, { hideObjectVariables, isTemplateView }),
         [appId, envId, clusterId],
     )
 
diff --git a/src/Shared/Components/FloatingVariablesSuggestions/service.ts b/src/Shared/Components/FloatingVariablesSuggestions/service.ts
@@ -29,14 +29,17 @@ const getScopedVariablesQuery = ({
     appId,
     envId,
     clusterId,
-}: Pick<FloatingVariablesSuggestionsProps, 'appId' | 'envId' | 'clusterId'>) => {
+    isTemplateView,
+}: Pick<FloatingVariablesSuggestionsProps, 'appId' | 'envId' | 'clusterId' | 'isTemplateView'>) => {
     if (!appId) {
         return ''
     }
 
-    let query = `?appId=${appId}&scope={`
+    let query = `?${isTemplateView ? '' : `appId=${appId}&`}scope={`
 
-    query += generateScope('appId', appId)
+    if (!isTemplateView) {
+        query += generateScope('appId', appId)
+    }
     query += generateScope('envId', envId)
     query += generateScope('clusterId', clusterId)
 
@@ -53,13 +56,17 @@ export const getScopedVariables = async (
     appId: FloatingVariablesSuggestionsProps['appId'],
     envId: FloatingVariablesSuggestionsProps['envId'],
     clusterId: FloatingVariablesSuggestionsProps['clusterId'],
-    hideObjectVariables: boolean = true,
+    {
+        hideObjectVariables,
+        isTemplateView,
+    }: Pick<FloatingVariablesSuggestionsProps, 'isTemplateView'> & { hideObjectVariables?: boolean },
 ): Promise<ScopedVariableType[]> => {
     const { result } = await get<ScopedVariableType[]>(
         `${ROUTES.SCOPED_GLOBAL_VARIABLES}${getScopedVariablesQuery({
             appId,
             envId,
             clusterId,
+            isTemplateView,
         })}`,
     )
     if (!result) {
diff --git a/src/Shared/Components/FloatingVariablesSuggestions/types.ts b/src/Shared/Components/FloatingVariablesSuggestions/types.ts
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { AppConfigProps } from '@Pages/index'
 import { DraggableBounds } from 'react-draggable'
 
 export interface ScopedVariableType {
@@ -25,7 +26,7 @@ export interface ScopedVariableType {
     isRedacted: boolean
 }
 
-export interface FloatingVariablesSuggestionsProps {
+export interface FloatingVariablesSuggestionsProps extends Required<Pick<AppConfigProps, 'isTemplateView'>> {
     zIndex: number
     appId?: string
     envId?: string
diff --git a/src/Shared/Components/GitCommitInfoGeneric/GitMaterialInfoHeader.tsx b/src/Shared/Components/GitCommitInfoGeneric/GitMaterialInfoHeader.tsx
@@ -14,25 +14,12 @@
  * limitations under the License.
  */
 
-import { GitProviderType } from '@Common/Constants'
+/* eslint-disable react/prop-types */
+
 import { CiPipelineSourceConfig } from '../CICDHistory/CiPipelineSourceConfig'
-import { Icon, IconName } from '../Icon'
+import { GitProviderIcon } from '../GitProviderIcon'
 import './gitCommitInfoGeneric.scss'
 
-/* eslint-disable react/prop-types */
-const getGitIconName = (repoUrl: string): IconName => {
-    if (repoUrl.includes(GitProviderType.GITHUB)) {
-        return 'ic-github'
-    }
-    if (repoUrl.includes(GitProviderType.GITLAB)) {
-        return 'ic-gitlab'
-    }
-    if (repoUrl.includes(GitProviderType.BITBUCKET)) {
-        return 'ic-bitbucket'
-    }
-    return 'ic-git'
-}
-
 const GitMaterialInfoHeader = ({
     index,
     repoUrl = '',
@@ -51,7 +38,7 @@ const GitMaterialInfoHeader = ({
             className="git-commit-info-generic__header px-16 py-12 dc__box-shadow fs-12 fw-6 dc__gap-4"
             style={style}
         >
-            <Icon name={getGitIconName(repoUrl)} size={20} color={null} />
+            <GitProviderIcon gitRepoUrl={repoUrl} size={20} />
             <div className="flex left left dc__gap-4 fs-13">
                 <div
                     className="repo cn-9 fw-6 dc__mxw-250 dc__ellipsis-right"
diff --git a/src/Shared/Components/GitProviderIcon/GitProviderIcon.tsx b/src/Shared/Components/GitProviderIcon/GitProviderIcon.tsx
@@ -18,6 +18,7 @@ import { GitProviderType } from '@Common/Constants'
 
 import { Icon, IconName } from '../Icon'
 import { GitProviderIconProps } from './types'
+import { getGitIconName } from './utils'
 
 const gitProviderIconMap: Record<GitProviderType, IconName> = {
     [GitProviderType.GIT]: 'ic-git',
@@ -28,6 +29,10 @@ const gitProviderIconMap: Record<GitProviderType, IconName> = {
     [GitProviderType.AZURE]: 'ic-azure',
 }
 
-export const GitProviderIcon = ({ gitProvider, size = 20 }: GitProviderIconProps) => (
-    <Icon name={gitProviderIconMap[gitProvider] || 'ic-git'} size={size} color={null} />
+export const GitProviderIcon = ({ gitProvider, size = 20, gitRepoUrl }: GitProviderIconProps) => (
+    <Icon
+        name={(gitProvider ? gitProviderIconMap[gitProvider] : getGitIconName(gitRepoUrl)) || 'ic-git'}
+        size={size}
+        color={null}
+    />
 )
diff --git a/src/Shared/Components/GitProviderIcon/types.ts b/src/Shared/Components/GitProviderIcon/types.ts
@@ -18,11 +18,19 @@ import { GitProviderType } from '@Common/Constants'
 
 import { IconsProps } from '../Icon'
 
-export interface GitProviderIconProps {
-    gitProvider: GitProviderType
+export type GitProviderIconProps = {
     /**
      * The size of the icon in pixels.
      * @default 20
      */
     size?: IconsProps['size']
-}
+} & (
+    | {
+          gitProvider: GitProviderType
+          gitRepoUrl?: never
+      }
+    | {
+          gitProvider?: never
+          gitRepoUrl: string
+      }
+)
diff --git a/src/Shared/Components/GitProviderIcon/utils.ts b/src/Shared/Components/GitProviderIcon/utils.ts
@@ -0,0 +1,15 @@
+import { GitProviderType } from '@Common/Constants'
+import { IconName } from '../Icon'
+
+export const getGitIconName = (repoUrl: string): IconName => {
+    if (repoUrl.includes(GitProviderType.GITHUB)) {
+        return 'ic-github'
+    }
+    if (repoUrl.includes(GitProviderType.GITLAB)) {
+        return 'ic-gitlab'
+    }
+    if (repoUrl.includes(GitProviderType.BITBUCKET)) {
+        return 'ic-bitbucket'
+    }
+    return 'ic-git'
+}
diff --git a/src/Shared/Components/GraphVisualizer/utils.ts b/src/Shared/Components/GraphVisualizer/utils.ts
@@ -101,7 +101,7 @@ const calculateNodePositions = (nodes: GraphVisualizerProps['nodes'], edges: Gra
 
     // Initialize adjacency list (each node starts with an empty children array)
     nodes.forEach((node) => childrenMap.set(node.id, []))
-    edges.forEach((edge) => childrenMap.get(edge.source).push(edge.target))
+    edges.forEach((edge) => (childrenMap.get(edge.source) ?? []).push(edge.target))
 
     // Identify all the root nodes (the nodes that are never a target in edges)
     const rootNodes = findRootNodes(nodes, edges)
diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx
@@ -8,6 +8,7 @@ import { ReactComponent as ICBitbucket } from '@IconsV2/ic-bitbucket.svg'
 import { ReactComponent as ICBrowser } from '@IconsV2/ic-browser.svg'
 import { ReactComponent as ICBuildColor } from '@IconsV2/ic-build-color.svg'
 import { ReactComponent as ICCancelled } from '@IconsV2/ic-cancelled.svg'
+import { ReactComponent as ICCardStack } from '@IconsV2/ic-card-stack.svg'
 import { ReactComponent as ICCd } from '@IconsV2/ic-cd.svg'
 import { ReactComponent as ICCiLinked } from '@IconsV2/ic-ci-linked.svg'
 import { ReactComponent as ICCiWebhook } from '@IconsV2/ic-ci-webhook.svg'
@@ -16,6 +17,7 @@ import { ReactComponent as ICClock } from '@IconsV2/ic-clock.svg'
 import { ReactComponent as ICCloseSmall } from '@IconsV2/ic-close-small.svg'
 import { ReactComponent as ICCode } from '@IconsV2/ic-code.svg'
 import { ReactComponent as ICContainer } from '@IconsV2/ic-container.svg'
+import { ReactComponent as ICCopy } from '@IconsV2/ic-copy.svg'
 import { ReactComponent as ICCrown } from '@IconsV2/ic-crown.svg'
 import { ReactComponent as ICCube } from '@IconsV2/ic-cube.svg'
 import { ReactComponent as ICDockerhub } from '@IconsV2/ic-dockerhub.svg'
@@ -49,6 +51,7 @@ import { ReactComponent as ICMediumPaintbucket } from '@IconsV2/ic-medium-paintb
 import { ReactComponent as ICMicrosoft } from '@IconsV2/ic-microsoft.svg'
 import { ReactComponent as ICMissing } from '@IconsV2/ic-missing.svg'
 import { ReactComponent as ICMonitoring } from '@IconsV2/ic-monitoring.svg'
+import { ReactComponent as ICNew } from '@IconsV2/ic-new.svg'
 import { ReactComponent as ICNodeScript } from '@IconsV2/ic-node-script.svg'
 import { ReactComponent as ICOidc } from '@IconsV2/ic-oidc.svg'
 import { ReactComponent as ICOpenBox } from '@IconsV2/ic-open-box.svg'
@@ -79,6 +82,7 @@ export const iconMap = {
     'ic-browser': ICBrowser,
     'ic-build-color': ICBuildColor,
     'ic-cancelled': ICCancelled,
+    'ic-card-stack': ICCardStack,
     'ic-cd': ICCd,
     'ic-ci-linked': ICCiLinked,
     'ic-ci-webhook': ICCiWebhook,
@@ -87,6 +91,7 @@ export const iconMap = {
     'ic-close-small': ICCloseSmall,
     'ic-code': ICCode,
     'ic-container': ICContainer,
+    'ic-copy': ICCopy,
     'ic-crown': ICCrown,
     'ic-cube': ICCube,
     'ic-dockerhub': ICDockerhub,
@@ -120,6 +125,7 @@ export const iconMap = {
     'ic-microsoft': ICMicrosoft,
     'ic-missing': ICMissing,
     'ic-monitoring': ICMonitoring,
+    'ic-new': ICNew,
     'ic-node-script': ICNodeScript,
     'ic-oidc': ICOidc,
     'ic-open-box': ICOpenBox,
diff --git a/src/Shared/Components/ReactSelect/constants.tsx b/src/Shared/Components/ReactSelect/constants.tsx
@@ -124,6 +124,7 @@ export const APP_SELECTOR_STYLES: StylesConfig = {
         justifyContent: state.menuIsOpen ? 'space-between' : 'flex-start',
         cursor: 'pointer',
         backgroundColor: 'var(--bg-primary)',
+        maxWidth: '350px',
     }),
     valueContainer: (base, state) => ({
         ...base,
diff --git a/src/Shared/Components/SelectPicker/SelectPicker.component.tsx b/src/Shared/Components/SelectPicker/SelectPicker.component.tsx
@@ -235,6 +235,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
         value,
         options,
         getOptionValue,
+        noOptionsMessage,
     } = props
     const {
         isGroupHeadingSelectable = false,
@@ -315,7 +316,13 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
         }
 
         if (shouldShowNoOptionsMessage) {
-            return <p className="m-0 cn-7 fs-13 fw-4 lh-20 py-6 px-8">No options</p>
+            return (
+                <p className="m-0 cn-7 fs-13 fw-4 lh-20 py-6 px-8">
+                    {noOptionsMessage?.({
+                        inputValue,
+                    }) || 'No options'}
+                </p>
+            )
         }
 
         return null
diff --git a/src/Shared/Components/SelectPicker/type.ts b/src/Shared/Components/SelectPicker/type.ts
@@ -142,6 +142,7 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
     | 'onInputChange'
     | 'inputValue'
     | 'filterOption'
+    | 'noOptionsMessage'
 > &
     Partial<
         Pick<
