Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into refactor/application-group-overview-table

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.29-beta-1",
+    "version": "0.2.30",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -17,6 +17,7 @@
 import { CustomInputProps } from './Types'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled-override.svg'
 import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-warning.svg'
+import { useEffect, useRef } from 'react'
 
 export const CustomInput = ({
     name,
@@ -39,7 +40,6 @@ export const CustomInput = ({
     handleOnBlur,
     readOnly = false,
     noTrim = false,
-    ref,
     onKeyPress,
     defaultValue,
     onKeyDown,
@@ -48,6 +48,17 @@ export const CustomInput = ({
     inputWrapClassName = '',
     inputProps = {},
 }: CustomInputProps) => {
+    const inputRef = useRef<HTMLInputElement>()
+
+    useEffect(() => {
+        setTimeout(() => {
+            // Added timeout to ensure the autofocus code is executed post the re-renders
+            if (inputRef.current && autoFocus) {
+                inputRef.current.focus()
+            }
+        }, 100)
+    }, [autoFocus])
+
     function handleError(error: any): any[] {
         if (!Array.isArray(error)) {
             return [error]
@@ -68,9 +79,9 @@ export const CustomInput = ({
     }
 
     const renderFormErrorWithIcon = (error: string) => (
-        <div className="form__error" key={error}>
-            <ErrorIcon className="form__icon form__icon--error" />
-            {error}
+        <div className="flex left mt-4 mb-4 dc__gap-4 cr-5 fs-11 lh-16 fw-4" key={error}>
+            <ErrorIcon className="icon-dim-16 p-1 form__icon--error dc__align-self-start dc__no-shrink" />
+            <span>{error}</span>
             {error && typeof additionalErrorInfo === 'function' && additionalErrorInfo()}
         </div>
     )
@@ -124,13 +135,13 @@ export const CustomInput = ({
                 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}
+                ref={inputRef}
             />
 
             {getInputError()}

src/Assets/Icon/ic-arrow-right.svg

@@ -37,7 +37,6 @@ export interface CustomInputProps {
     handleOnBlur?: (e) => void
     readOnly?: boolean
     noTrim?: boolean
-    ref?: React.LegacyRef<HTMLInputElement>
     onKeyPress?: (e) => void
     defaultValue?: string | number | ReadonlyArray<string> | undefined
     onKeyDown?: (e) => void

src/Common/CustomInput/CustomInput.tsx

@@ -0,0 +1 @@
+export { getDeploymentStageTitle } from './utils'

src/Common/CustomInput/Types.ts

@@ -0,0 +1,14 @@
+import { DeploymentStageType } from '@Shared/constants'
+
+export const getDeploymentStageTitle = (stage: DeploymentStageType) => {
+    switch (stage) {
+        case DeploymentStageType.PRE:
+            return 'pre-deployment'
+        case DeploymentStageType.POST:
+            return 'post-deployment'
+        case DeploymentStageType.DEPLOY:
+            return 'deployment'
+        default:
+            return '-'
+    }
+}

src/Pages/App/AppConfigurations/index.ts

@@ -0,0 +1 @@
+export * from './AppConfigurations'

src/Pages/App/AppConfigurations/utils.ts

@@ -17,3 +17,4 @@
 export * from './GlobalConfigurations'
 export * from './ResourceBrowser'
 export * from './CDPipeline'
+export * from './App'

src/Pages/App/index.ts

@@ -24,6 +24,8 @@ import { ImageChipCell } from '@Shared/Components/ImageChipCell'
 import { CommitChipCell } from '@Shared/Components/CommitChipCell'
 import { ReactComponent as ICLines } from '@Icons/ic-lines.svg'
 import { ReactComponent as ICPulsateStatus } from '@Icons/ic-pulsate-status.svg'
+import { ReactComponent as ICArrowRight } from '@Icons/ic-arrow-right.svg'
+import { getDeploymentStageTitle } from '@Pages/App'
 import {
     ConfirmationDialog,
     DATE_TIME_FORMATS,
@@ -284,16 +286,33 @@ const StartDetails = ({
     isJobView,
     triggerMetadata,
     renderDeploymentHistoryTriggerMetaText,
+    renderTargetConfigInfo,
+    stage,
 }: StartDetailsType): JSX.Element => {
     const { url } = useRouteMatch()
     const { pathname } = useLocation()
 
     return (
         <div className="w-100 pr-20 flex column left dc__border-bottom-n1">
             <div className="flexbox dc__gap-8 dc__align-items-center pb-12">
-                <span className="cn-9 fs-13 fw-6 lh-20" data-testid="deployment-history-start-heading">
-                    Start
-                </span>
+                <div className="flex left dc__gap-4 cn-9 fs-13 fw-6 lh-20">
+                    <div className="flex left dc__no-shrink dc__gap-4" data-testid="deployment-history-start-heading">
+                        <div>Start</div>
+                        {stage && (
+                            <>
+                                <div className="dc__bullet" />
+                                <div className="dc__first-letter-capitalize">{getDeploymentStageTitle(stage)}</div>
+                            </>
+                        )}
+                    </div>
+                    {environmentName && (
+                        <>
+                            <ICArrowRight className="icon-dim-14 scn-9 dc__no-shrink" />
+                            <span className="dc__truncate">{environmentName}</span>
+                        </>
+                    )}
+                    {renderTargetConfigInfo?.()}
+                </div>
 
                 <time className="cn-7 fs-13">
                     {moment(startedOn, 'YYYY-MM-DDTHH:mm:ssZ').format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)}
@@ -417,6 +436,7 @@ export const TriggerDetails = React.memo(
         workerPodName,
         triggerMetadata,
         renderDeploymentHistoryTriggerMetaText,
+        renderTargetConfigInfo,
     }: TriggerDetailsType): JSX.Element => (
         <div className="trigger-details flexbox-col pb-12">
             <div className="display-grid trigger-details__grid py-12">
@@ -436,6 +456,8 @@ export const TriggerDetails = React.memo(
                         isJobView={isJobView}
                         triggerMetadata={triggerMetadata}
                         renderDeploymentHistoryTriggerMetaText={renderDeploymentHistoryTriggerMetaText}
+                        renderTargetConfigInfo={renderTargetConfigInfo}
+                        stage={stage}
                     />
 
                     <CurrentStatus
@@ -657,6 +679,7 @@ const TriggerOutput = ({
     resourceId,
     scrollToTop,
     scrollToBottom,
+    renderTargetConfigInfo,
 }: TriggerOutputProps) => {
     const { appId, triggerId, envId, pipelineId } = useParams<{
         appId: string
@@ -686,12 +709,15 @@ const TriggerOutput = ({
             const appliedFiltersTimestamp = triggerHistory.get(syncTriggerId)?.appliedFiltersTimestamp
             const promotionApprovalMetadata = triggerHistory.get(syncTriggerId)?.promotionApprovalMetadata
             const runSource = triggerHistory.get(syncTriggerId)?.runSource
+            const targetConfig = triggerHistory.get(syncTriggerId)?.targetConfig
+
             // These changes are not subject to change after refresh, add data which will not change
             const additionalDataObject = {
                 ...(appliedFilters.length ? { appliedFilters } : {}),
                 ...(appliedFiltersTimestamp ? { appliedFiltersTimestamp } : {}),
                 ...(promotionApprovalMetadata ? { promotionApprovalMetadata } : {}),
                 ...(runSource ? { runSource } : {}),
+                ...(targetConfig ? { targetConfig } : {}),
             }
             setTriggerHistory((newTriggerHistory) => {
                 newTriggerHistory.set(syncTriggerId, { ...syncTriggerDetail, ...additionalDataObject })
@@ -808,6 +834,8 @@ const TriggerOutput = ({
                         artifact={triggerDetails.artifact}
                         triggerMetadata={triggerDetails.triggerMetadata}
                         renderDeploymentHistoryTriggerMetaText={renderDeploymentHistoryTriggerMetaText}
+                        environmentName={selectedEnvironmentName}
+                        renderTargetConfigInfo={renderTargetConfigInfo}
                     />
                     <ul className="pl-50 pr-20 pt-8 tab-list tab-list--nodes dc__border-bottom dc__position-sticky dc__top-0 bcn-0 dc__zi-3">
                         {triggerDetails.stage === 'DEPLOY' && deploymentAppType !== DeploymentAppTypes.HELM && (

src/Pages/index.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { CSSProperties } from 'react'
+import { CSSProperties, ReactElement } from 'react'
 import {
     OptionType,
     UserApprovalMetadataType,
@@ -82,6 +82,17 @@ export interface CICDSidebarFilterOptionType extends OptionType {
     deploymentAppDeleteRequest?: boolean
 }
 
+// The values can be undefined because of old data
+export interface TargetConfigType {
+    tenantIcon?: string
+    tenantId?: string
+    tenantName?: string
+    installationId?: string
+    installationName?: string
+    releaseChannelId?: string
+    releaseChannelName?: string
+}
+
 export interface History {
     id: number
     name: string
@@ -116,6 +127,7 @@ export interface History {
     promotionApprovalMetadata?: PromotionApprovalMetadataType
     triggerMetadata?: string
     runSource?: RunSourceType
+    targetConfig?: TargetConfigType
 }
 
 export interface DeploymentHistoryResultObject {
@@ -199,9 +211,14 @@ export interface StartDetailsType {
     isJobView?: boolean
     triggerMetadata?: string
     renderDeploymentHistoryTriggerMetaText: (triggerMetaData: string) => JSX.Element
+    /**
+     * Callback handler for showing the target config
+     */
+    renderTargetConfigInfo?: () => ReactElement
+    stage: DeploymentStageType
 }
 
-export interface TriggerDetailsType {
+export interface TriggerDetailsType extends Pick<StartDetailsType, 'renderTargetConfigInfo'> {
     status: string
     startedOn: string
     finishedOn: string
@@ -356,7 +373,7 @@ export interface VirtualHistoryArtifactProps {
         workflowId: number
     }
 }
-export interface TriggerOutputProps extends RenderRunSourceType {
+export interface TriggerOutputProps extends RenderRunSourceType, Pick<TriggerDetailsType, 'renderTargetConfigInfo'> {
     fullScreenView: boolean
     triggerHistory: Map<number, History>
     setFullScreenView: React.Dispatch<React.SetStateAction<boolean>>

src/Shared/Components/CICDHistory/TriggerOutput.tsx

@@ -49,7 +49,7 @@ const FilterChip = ({
                 {showRemoveIcon && (
                     <button
                         type="button"
-                        className="flex p-0 dc__transparent dc__hover-n50 br-4"
+                        className="flex p-0 dc__transparent dc__hover-remove-btn"
                         onClick={removeFilter}
                         aria-label="Remove filter"
                     >

src/Shared/Components/CICDHistory/types.tsx

@@ -122,6 +122,7 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
         selectProps: { isMulti },
         selectOption,
         isDisabled,
+        isSelected,
     } = props
     const { description, startIcon, endIcon } = data ?? {}
     const showDescription = !!description
@@ -141,7 +142,7 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
                     <Checkbox
                         onChange={noop}
                         onClick={handleChange}
-                        isChecked={props.isSelected || false}
+                        isChecked={isSelected || false}
                         value={CHECKBOX_VALUE.CHECKED}
                         rootClassName="mb-0 w-20 p-2 dc__align-self-start dc__no-shrink"
                         disabled={isDisabled}

src/Shared/Components/FilterChips/FilterChips.component.tsx

@@ -434,6 +434,7 @@ export enum ResourceKindType {
     cluster = 'cluster',
     release = 'release',
     releaseTrack = 'release-track',
+    releaseChannel = 'release-channel',
     tenant = 'tenant',
     installation = 'installation',
     environment = 'environment',