diff --git a/web/src/App.tsx b/web/src/App.tsx index 476f57d35..21654afcb 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -73,7 +73,7 @@ const App: React.FC = React.memo(function App({ }}> diff --git a/web/src/components/LogViewer/LogViewer.tsx b/web/src/components/LogViewer/LogViewer.tsx index a8e38713f..2f5fbe634 100644 --- a/web/src/components/LogViewer/LogViewer.tsx +++ b/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 = ({ content, className }) => { const ref = useRef(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 diff --git a/web/src/pages/PullRequest/Checks/CheckPipelineSteps.tsx b/web/src/pages/PullRequest/Checks/CheckPipelineSteps.tsx index 248b24ccb..b74af002c 100644 --- a/web/src/pages/PullRequest/Checks/CheckPipelineSteps.tsx +++ b/web/src/pages/PullRequest/Checks/CheckPipelineSteps.tsx @@ -92,7 +92,7 @@ const CheckPipelineStep: React.FC 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 onClick={() => { setExpanded(!expanded) }}> - + - + ) diff --git a/web/src/pages/PullRequest/Checks/Checks.module.scss b/web/src/pages/PullRequest/Checks/Checks.module.scss index df39772ee..02c0c5626 100644 --- a/web/src/pages/PullRequest/Checks/Checks.module.scss +++ b/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 { - height: calc(100% - var(--log-content-header-height)); - - .logViewer { - padding: var(--spacing-medium) var(--spacing-large) var(--spacing-medium) var(--spacing-xxlarge); - overflow: auto; - height: 100%; - } + .logViewer { + padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-xxlarge); } } } @@ -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; diff --git a/web/src/pages/PullRequest/Checks/Checks.module.scss.d.ts b/web/src/pages/PullRequest/Checks/Checks.module.scss.d.ts index 1f3d6d780..0279ae092 100644 --- a/web/src/pages/PullRequest/Checks/Checks.module.scss.d.ts +++ b/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 diff --git a/web/src/pages/PullRequest/Checks/Checks.tsx b/web/src/pages/PullRequest/Checks/Checks.tsx index 7296d478e..bf35509ad 100644 --- a/web/src/pages/PullRequest/Checks/Checks.tsx +++ b/web/src/pages/PullRequest/Checks/Checks.tsx @@ -115,22 +115,20 @@ export const Checks: React.FC = ({ repoMetadata, pullRequestMetadat - - - - - - - - - - + + + + + + + + diff --git a/web/src/utils/Utils.ts b/web/src/utils/Utils.ts index 7d3d04858..72fbf6839 100644 --- a/web/src/utils/Utils.ts +++ b/web/src/utils/Utils.ts @@ -88,7 +88,7 @@ export interface SourceCodeEditorProps { autoHeight?: boolean wordWrap?: boolean onChange?: (value: string) => void - schema?: Record + schema?: Record } // Monaco editor has a bug where when its value is set, the value