Merge pull request #243 from devtron-labs/feat/history-ui

feat: history ui revamp

Author: AbhishekA1509

package-lock.json

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

package.json

@@ -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-aborted.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-lines.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/Assets/Icon/ic-pulsate-status.svg

@@ -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/Common/AppStatus/utils.ts

@@ -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}