github/drone
5
0
Fork 0
mirror of https://github.com/harness/drone.git synced 2025-05-21 03:20:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tan Nhu 2023-09-19 23:27:46 +00:00 committed by Harness
parent 32a5999555
commit c00c3c0947
7 changed files with 28 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/App.tsx
View File

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

4
web/src/components/LogViewer/LogViewer.tsx
View File

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

10
web/src/pages/PullRequest/Checks/CheckPipelineSteps.tsx
View File

@ -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
color={Utils.getRealCSSColor(Color.GREY_500)}
className={cx(css.noShrink, css.chevron)}
strokeWidth="1.5"
/>
<NavArrowRight color={Utils.getRealCSSColor(Color.GREY_500)} className={cx(css.noShrink, css.chevron)} />
<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>
)

27
web/src/pages/PullRequest/Checks/Checks.module.scss
View File

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

3
web/src/pages/PullRequest/Checks/Checks.module.scss.d.ts vendored
View File

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

30
web/src/pages/PullRequest/Checks/Checks.tsx
View File

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

2
web/src/utils/Utils.ts
View File

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