refactor: Update LogStageAccordion and LogsRenderer to support full screen view

Author: AbhishekA1509

src/Shared/Components/CICDHistory/LogStageAccordion.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-82`}
+                } dc__position-sticky dc__zi-1 ${fullScreenView ? 'dc__top-44' : 'dc__top-82'}`}
                 type="button"
                 role="tab"
                 onClick={handleAccordionToggle}

src/Shared/Components/CICDHistory/LogsRenderer.tsx

@@ -171,6 +171,7 @@ export const LogsRenderer = ({
     triggerDetails,
     isBlobStorageConfigured,
     parentType,
+    fullScreenView,
 }: LogsRendererType): JSX.Element => {
     const { pipelineId, envId, appId } = useParams<DeploymentHistoryBaseParamsType>()
     const logsURL =
@@ -407,7 +408,7 @@ export const LogsRenderer = ({
                     }}
                 >
                     <div
-                        className="flexbox-col pb-7 dc__position-sticky dc__top-38 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>

src/Shared/Components/CICDHistory/TriggerOutput.tsx

@@ -483,6 +483,7 @@ const HistoryLogs: React.FC<HistoryLogsProps> = ({
     renderVirtualHistoryArtifacts,
     scrollToTop,
     scrollToBottom,
+    fullScreenView,
 }) => {
     const { path } = useRouteMatch()
     const { appId, pipelineId, triggerId, envId } = useParams<{
@@ -514,6 +515,7 @@ const HistoryLogs: React.FC<HistoryLogsProps> = ({
                                     triggerDetails={triggerDetails}
                                     isBlobStorageConfigured={isBlobStorageConfigured}
                                     parentType={HistoryComponentType.CD}
+                                    fullScreenView={fullScreenView}
                                 />
 
                                 {(scrollToTop || scrollToBottom) && (
@@ -898,6 +900,7 @@ const TriggerOutput = ({
                 renderVirtualHistoryArtifacts={renderVirtualHistoryArtifacts}
                 scrollToTop={scrollToTop}
                 scrollToBottom={scrollToBottom}
+                fullScreenView={fullScreenView}
             />
         </>
     )

src/Shared/Components/CICDHistory/types.tsx

@@ -245,11 +245,6 @@ export interface TriggerDetailsStatusIconType {
     status: string
 }
 
-export interface LogsRendererType {
-    triggerDetails: History
-    isBlobStorageConfigured: boolean
-    parentType: HistoryComponentType
-}
 export interface SyncStageResourceDetail {
     id: number
     cdWorkflowRunnerId: number
@@ -406,6 +401,7 @@ export interface HistoryLogsProps
         | 'renderDeploymentApprovalInfo'
         | 'renderCIListHeader'
         | 'renderVirtualHistoryArtifacts'
+        | 'fullScreenView'
     > {
     triggerDetails: History
     loading: boolean
@@ -417,6 +413,11 @@ export interface HistoryLogsProps
     renderRunSource: (runSource: RunSourceType, isDeployedInThisResource: boolean) => JSX.Element
 }
 
+export interface LogsRendererType
+    extends Pick<HistoryLogsProps, 'fullScreenView' | 'triggerDetails' | 'isBlobStorageConfigured'> {
+    parentType: HistoryComponentType
+}
+
 export interface DeploymentStatusDetailBreakdownType {
     deploymentStatusDetailsBreakdownData: DeploymentStatusDetailsBreakdownDataType
     isVirtualEnvironment?: boolean
@@ -717,7 +718,7 @@ export interface StageDetailType extends Pick<StageInfoDTO, 'stage' | 'startTime
     isOpen: boolean
 }
 
-export interface LogStageAccordionProps extends StageDetailType {
+export interface LogStageAccordionProps extends StageDetailType, Pick<LogsRendererType, 'fullScreenView'> {
     handleStageClose: (index: number) => void
     handleStageOpen: (index: number) => void
     stageIndex: number

src/Shared/constants.tsx

@@ -380,7 +380,7 @@ export const statusIcon = {
 }
 
 export const statusColor = {
-    suspended: '#ffaa00',
+    suspended: 'var(--Y500)',
     unknown: 'var(--N700)',
     queued: 'var(--N700)',
     degraded: 'var(--R500)',