Unify Pipelines Checks / Terminal scrolling experience + bolder icons (#559)

web/src/App.tsx

@@ -73,7 +73,7 @@ const App: React.FC<AppProps> = React.memo(function App({
                   }}>
                   <IconoirProvider
                     iconProps={{
-                      strokeWidth: 1,
+                      strokeWidth: 1.5,
                       width: '16px',
                       height: '16px'
                     }}>

web/src/components/LogViewer/LogViewer.tsx

@@ -6,7 +6,7 @@ import css from './LogViewer.module.scss'
 
 export interface LogViewerProps {
   search?: string
-  content: string
+  content?: string
   className?: string
 }
 
@@ -14,7 +14,7 @@ const LogTerminal: React.FC<LogViewerProps> = ({ content, className }) => {
   const ref = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    content.split(/\r?\n/).forEach(line => ref.current?.appendChild(lineElement(line)))
+    content?.split(/\r?\n/).forEach(line => ref.current?.appendChild(lineElement(line)))
   }, [content])
 
   return <Container ref={ref} className={cx(css.main, className)} />

web/src/pages/PullRequest/Checks/CheckPipelineSteps.tsx

@@ -92,7 +92,7 @@ const CheckPipelineStep: React.FC<CheckPipelineStepsProps & { step: TypesStep }>
 
       eventSourceRef.current.onmessage = event => {
         try {
-          const scrollParent = containerRef.current?.closest(`.${css.pipelineSteps}`) as HTMLDivElement
+          const scrollParent = containerRef.current?.closest(`.${css.content}`) as HTMLDivElement
           const autoScroll =
             scrollParent && scrollParent.scrollTop === scrollParent.scrollHeight - scrollParent.offsetHeight
 
@@ -153,11 +153,7 @@ const CheckPipelineStep: React.FC<CheckPipelineStepsProps & { step: TypesStep }>
         onClick={() => {
           setExpanded(!expanded)
         }}>
-        <NavArrowRight
+        <NavArrowRight color={Utils.getRealCSSColor(Color.GREY_500)} className={cx(css.noShrink, css.chevron)} />
-          color={Utils.getRealCSSColor(Color.GREY_500)}
-          className={cx(css.noShrink, css.chevron)}
-          strokeWidth="1.5"
-        />
 
         <ExecutionStatus
           className={cx(css.status, css.noShrink)}
@@ -184,7 +180,7 @@ const CheckPipelineStep: React.FC<CheckPipelineStepsProps & { step: TypesStep }>
         </Render>
       </Layout.Horizontal>
       <Render when={expanded}>
-        <Container className={css.stepLogViewer} ref={containerRef}></Container>
+        <Container className={css.stepLogContainer} ref={containerRef}></Container>
       </Render>
     </Container>
   )

web/src/pages/PullRequest/Checks/Checks.module.scss

@@ -111,6 +111,7 @@
 
     .content {
       background-color: var(--black);
+      overflow: auto;
 
       &.markdown {
         :global {
@@ -120,22 +121,13 @@
         }
 
         padding: 0 var(--spacing-large) var(--spacing-medium);
-        overflow: auto;
       }
 
       &.terminal {
-        overflow: hidden;
-
         .header {
           padding: var(--spacing-medium) var(--spacing-large) 0;
         }
 
-        :global {
-          .terminal.xterm {
-            padding: var(--spacing-small) var(--spacing-large) 0;
-          }
-        }
-
         span[data-icon='execution-success'] svg {
           circle {
             color: transparent !important;
@@ -149,6 +141,7 @@
         top: 0;
         background-color: var(--black);
         height: var(--log-content-header-height);
+        z-index: 3;
 
         .headerLayout {
           border-bottom: 1px solid var(--grey-800);
@@ -162,14 +155,8 @@
         padding-left: var(--spacing-small);
       }
 
-      .terminalContainer {
+      .logViewer {
-        height: calc(100% - var(--log-content-header-height));
+        padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-xxlarge);
-
-        .logViewer {
-          padding: var(--spacing-medium) var(--spacing-large) var(--spacing-medium) var(--spacing-xxlarge);
-          overflow: auto;
-          height: 100%;
-        }
       }
     }
   }
@@ -204,8 +191,6 @@
 }
 
 .pipelineSteps {
-  height: 100%;
-  overflow: auto;
   padding: 10px 20px 0 !important;
   display: flex;
   flex-direction: column;
@@ -228,7 +213,7 @@
     border-radius: 6px;
     padding: 0 10px 0 6px;
     position: sticky;
-    top: 0;
+    top: 74px;
     z-index: 2;
     background-color: var(--black);
 
@@ -263,7 +248,7 @@
     }
   }
 
-  .stepLogViewer {
+  .stepLogContainer {
     padding: 15px 36px;
     flex-shrink: 0;
 

web/src/pages/PullRequest/Checks/Checks.module.scss.d.ts

@@ -25,9 +25,8 @@ export declare const selected: string
 export declare const spinner: string
 export declare const status: string
 export declare const stepHeader: string
-export declare const stepLogViewer: string
+export declare const stepLogContainer: string
 export declare const subMenu: string
 export declare const terminal: string
-export declare const terminalContainer: string
 export declare const text: string
 export declare const uid: string

web/src/pages/PullRequest/Checks/Checks.tsx

@@ -115,22 +115,20 @@ export const Checks: React.FC<ChecksProps> = ({ repoMetadata, pullRequestMetadat
                   </Container>
                 </Truthy>
                 <Falsy>
-                  <Container className={css.terminalContainer}>
+                  <Match expr={selectedStage}>
-                    <Match expr={selectedStage}>
+                    <Truthy>
-                      <Truthy>
+                      <CheckPipelineSteps
-                        <CheckPipelineSteps
+                        repoMetadata={repoMetadata}
-                          repoMetadata={repoMetadata}
+                        pullRequestMetadata={pullRequestMetadata}
-                          pullRequestMetadata={pullRequestMetadata}
+                        pipelineName={selectedItemData?.uid as string}
-                          pipelineName={selectedItemData?.uid as string}
+                        stage={selectedStage as TypesStage}
-                          stage={selectedStage as TypesStage}
+                        executionNumber={get(selectedItemData, 'payload.data.execution_number', '')}
-                          executionNumber={get(selectedItemData, 'payload.data.execution_number', '')}
+                      />
-                        />
+                    </Truthy>
-                      </Truthy>
+                    <Falsy>
-                      <Falsy>
+                      <LogViewer content={logContent} className={css.logViewer} />
-                        <LogViewer content={logContent} className={css.logViewer} />
+                    </Falsy>
-                      </Falsy>
+                  </Match>
-                    </Match>
-                  </Container>
                 </Falsy>
               </Match>
             </Container>

web/src/utils/Utils.ts

@@ -88,7 +88,7 @@ export interface SourceCodeEditorProps {
   autoHeight?: boolean
   wordWrap?: boolean
   onChange?: (value: string) => void
-  schema?: Record<string, any>
+  schema?: Record<string, unknown>
 }
 
 // Monaco editor has a bug where when its value is set, the value