Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/multi-select-picker

Author: eshankvaish

src/Assets/Icon/ic-aborted.svg

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { TIMELINE_STATUS } from "../../Shared/constants"
+import { TIMELINE_STATUS } from '../../Shared/constants'
 
 export const triggerStatus = (triggerDetailStatus: string): string => {
     const triggerStatus = triggerDetailStatus?.toUpperCase()

src/Assets/Icon/ic-lines.svg

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react'
 import { useParams } from 'react-router'
 import { useDownload } from '@Shared/Hooks'
 import {
@@ -133,7 +132,7 @@ const Artifacts = ({
     appReleaseTagNames,
     tagsEditable,
     hideImageTaggingHardDelete,
-    jobCIClass,
+    rootClassName,
     renderCIListHeader,
 }: ArtifactType) => {
     const { isSuperAdmin } = useSuperAdmin()
@@ -143,14 +142,6 @@ const Artifacts = ({
         triggerId: string
         buildId: string
     }>()
-    const [copied, setCopied] = useState(false)
-
-    useEffect(() => {
-        if (!copied) {
-            return
-        }
-        setTimeout(() => setCopied(false), 2000)
-    }, [copied])
 
     async function handleArtifact() {
         await handleDownload({
@@ -215,7 +206,7 @@ const Artifacts = ({
         )
     }
     return (
-        <div className={`flex left column dc__gap-12 ${jobCIClass ?? ''}`}>
+        <div className={`flex left column dc__gap-12 dc__content-start ${rootClassName ?? ''}`}>
             {!isJobView && type !== HistoryComponentType.CD && (
                 <CIListItem
                     type="artifact"

src/Assets/Icon/ic-pulsate-status.svg

@@ -62,7 +62,7 @@ const DeploymentHistoryConfigList = ({
                     setFullScreenView(false)
                 }}
                 data-testid={`configuration-link-option-${index}`}
-                className="bcb-1 dc__no-decor bcn-0 cn-9 pl-16 pr-16 pt-12 pb-12 br-4 en-2 bw-1 mb-12 flex dc__content-space cursor lh-20"
+                className="bcb-1 dc__no-decor bcn-0 cn-9 pl-16 pr-16 pt-12 pb-12 br-4 en-2 bw-1 flex dc__content-space cursor lh-20"
             >
                 {childComponentName || currentComponent.DISPLAY_NAME}
                 <ICChevron className="icon-dim-20 fcn-6 dc__flip-270" />
@@ -84,10 +84,10 @@ const DeploymentHistoryConfigList = ({
                 deploymentHistoryList &&
                 deploymentHistoryList.map((historicalComponent, index) => (
                     // eslint-disable-next-line react/no-array-index-key
-                    <div className="m-20 fs-13 cn-9" key={`history-list__${index}`}>
+                    <div className="px-20 pt-20 fs-13 cn-9" key={`history-list__${index}`}>
                         {historicalComponent.childList?.length > 0 ? (
                             <>
-                                <div className="fs-14 fw-6 mb-12 ">
+                                <div className="fs-14 fw-6 mb-12">
                                     {DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP[historicalComponent.name].DISPLAY_NAME}
                                 </div>
                                 {historicalComponent.childList.map((historicalComponentName, childIndex) =>

src/Common/AppStatus/utils.ts

@@ -18,14 +18,14 @@
 import { useEffect, useState } from 'react'
 import moment from 'moment'
 import { useParams } from 'react-router-dom'
+import { ShowMoreText } from '@Shared/Components/ShowMoreText'
 import { DATE_TIME_FORMATS, showError } from '../../../Common'
 import { DEPLOYMENT_STATUS, statusIcon, TIMELINE_STATUS } from '../../constants'
 import { ErrorInfoStatusBar } from './ErrorInfoStatusBar'
 import { DeploymentStatusDetailRowType } from './types'
 import { getManualSync } from './service'
 import { MANIFEST_STATUS_HEADERS, TERMINAL_STATUS_MAP } from './constants'
 import { ReactComponent as DropDownIcon } from '../../../Assets/Icon/ic-chevron-down.svg'
-import { ShowMoreText } from '../ShowMoreText/ShowMoreText'
 import AppStatusDetailsChart from './AppStatusDetailsChart'
 import { renderIcon } from './utils'
 

src/Shared/Components/CICDHistory/Artifacts.tsx

@@ -19,6 +19,7 @@ const LogStageAccordion = ({
     handleStageOpen,
     stageIndex,
     isLoading,
+    fullScreenView,
 }: LogStageAccordionProps) => {
     const handleAccordionToggle = () => {
         if (isOpen) {
@@ -41,7 +42,7 @@ const LogStageAccordion = ({
             <button
                 className={`flexbox dc__transparent dc__content-space py-6 px-8 br-4 dc__align-items-center dc__select-text logs-renderer__stage-accordion ${
                     isOpen ? 'logs-renderer__stage-accordion--open-stage' : ''
-                } dc__position-sticky dc__zi-1 dc__top-44`}
+                } dc__position-sticky dc__zi-1 ${fullScreenView ? 'dc__top-44' : 'dc__top-82'}`}
                 type="button"
                 role="tab"
                 onClick={handleAccordionToggle}

src/Shared/Components/CICDHistory/DeploymentHistoryDiff/DeploymentHistoryConfigList.component.tsx

@@ -18,6 +18,16 @@
                     border: none !important;
                     background: transparent;
                 }
+
+                &__icon {
+                    path:nth-child(1) {
+                        fill: none !important;
+                    }
+                
+                    path:nth-child(2) {
+                        fill: var(--N400);
+                    }
+                }
             }
 
             .search-bar:focus-within {

src/Shared/Components/CICDHistory/DeploymentStatusDetailRow.tsx

@@ -86,7 +86,7 @@ const renderBlobNotConfigured = (): JSX.Element => (
 )
 
 const renderConfigurationError = (isBlobStorageConfigured: boolean): JSX.Element => (
-    <div className="flexbox dc__content-center flex-align-center dc__height-inherit">
+    <div className="flexbox dc__content-center flex-grow-1 flex-align-center dc__height-inherit dark-background">
         {!isBlobStorageConfigured ? renderBlobNotConfigured() : renderLogsNotAvailable()}
     </div>
 )
@@ -171,6 +171,7 @@ export const LogsRenderer = ({
     triggerDetails,
     isBlobStorageConfigured,
     parentType,
+    fullScreenView,
 }: LogsRendererType): JSX.Element => {
     const { pipelineId, envId, appId } = useParams<DeploymentHistoryBaseParamsType>()
     const logsURL =
@@ -400,14 +401,14 @@ export const LogsRenderer = ({
         if (areStagesAvailable) {
             return (
                 <div
-                    className="flexbox-col pb-20 logs-renderer-container"
+                    className="flexbox-col pb-20 logs-renderer-container flex-grow-1"
                     data-testid="check-logs-detail"
                     style={{
                         backgroundColor: '#0C1021',
                     }}
                 >
                     <div
-                        className="flexbox-col pb-7 dc__position-sticky dc__top-0 dc__zi-2"
+                        className={`flexbox-col pb-7 dc__position-sticky dc__zi-2 ${fullScreenView ? 'dc__top-0' : 'dc__top-38'}`}
                         style={{
                             backgroundColor: '#0C1021',
                         }}
@@ -444,6 +445,7 @@ export const LogsRenderer = ({
                                 handleStageOpen={handleStageOpen}
                                 stageIndex={index}
                                 isLoading={index === stageList.length - 1 && areEventsProgressing}
+                                fullScreenView={fullScreenView}
                             />
                         ))}
                     </div>
@@ -453,7 +455,7 @@ export const LogsRenderer = ({
 
         // Having a fallback for logs that already stored in blob storage
         return (
-            <div className="logs__body" data-testid="check-logs-detail">
+            <div className="logs__body dark-background flex-grow-1" data-testid="check-logs-detail">
                 {logsList.map((log: string, index: number) => (
                     // eslint-disable-next-line react/no-array-index-key
                     <div className="flex top left mb-10 lh-24" key={`logs-${index}`}>