Skip to content

Commit aadbefa

Browse files
AlanGreeneAlanGreene
committed
Remove tab layout feature flag and unused code
The tab layout for TaskRun and PipelineRun details has been enabled for a number of releases now with no user-facing option to revert to the previous design. Remove the remaining feature flag and the code related to the old layout. Also restore the options in the individual log containers to view the raw logs in a new tab or to download them to a file. These are only enabled in the Dashboard application and are available on an opt-in basis to consumers of the UI components.
1 parent f417394 commit aadbefa

52 files changed

Lines changed: 557 additions & 2647 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/components/src/components/DetailsHeader/_DetailsHeader.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,6 @@ header.tkn--step-details-header {
4242
.#{$prefix}--btn-set {
4343
margin-inline: 0.5rem;
4444
align-self: center;
45-
align-items: baseline;
46-
47-
.cds--btn--icon-only {
48-
inline-size: 2rem;
49-
block-size: 2rem;
50-
}
5145
}
5246

5347
.tkn--run-details-name {

‎packages/components/src/components/Log/Log.jsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,7 @@ export class LogContainer extends Component {
9797
componentDidUpdate(prevProps, prevState) {
9898
if (
9999
this.props.enableLogAutoScroll &&
100-
(prevState.logs?.length !== this.state.logs?.length ||
101-
prevProps.isLogsMaximized !== this.props.isLogsMaximized)
100+
prevState.logs?.length !== this.state.logs?.length
102101
) {
103102
if (this.shouldAutoScroll()) {
104103
this.scrollToBottomLog();

‎packages/components/src/components/Log/_Log.scss‎

Lines changed: 2 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
Copyright 2019-2025 The Tekton Authors
2+
Copyright 2019-2026 The Tekton Authors
33
Licensed under the Apache License, Version 2.0 (the "License");
44
you may not use this file except in compliance with the License.
55
You may obtain a copy of the License at
@@ -72,37 +72,7 @@ pre.tkn--log {
7272
.#{$prefix}--btn-set {
7373
position: absolute;
7474
inset-block-start: 0;
75-
inset-inline-end: var(--tkn-log-inline-padding);
76-
align-items: center;
77-
}
78-
79-
.button-container {
80-
position: absolute;
81-
clip-path: inset(0); // ensure the children with position:fixed are not shown outside this element.
82-
inset-block-start: 3.125rem; //equals the maximum between padding-block-start of pre.tkn--log and between the page header height
83-
inset-block-end: 0;
84-
inset-inline-end: 0;
85-
inline-size: var(--tkn-log-inline-padding);
86-
}
87-
88-
.#{$prefix}--btn--ghost,
89-
.#{$prefix}--copy-btn {
90-
inline-size: 2rem;
91-
block-size: 2rem;
92-
min-block-size: 2rem;
93-
background-color: $background;
94-
95-
&:hover {
96-
background-color: $layer-hover;
97-
}
98-
99-
&:focus {
100-
outline-color: white;
101-
}
102-
103-
svg {
104-
fill: $icon-primary;
105-
}
75+
inset-inline-end: 0.5rem; // var(--tkn-log-inline-padding);
10676
}
10777

10878
.tkn--log-trailer {

‎packages/components/src/components/LogsToolbar/LogsToolbar.jsx‎

Lines changed: 30 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
Copyright 2020-2025 The Tekton Authors
2+
Copyright 2020-2026 The Tekton Authors
33
Licensed under the Apache License, Version 2.0 (the "License");
44
you may not use this file except in compliance with the License.
55
You may obtain a copy of the License at
@@ -12,98 +12,51 @@ limitations under the License.
1212
*/
1313
/* istanbul ignore file */
1414
import { useIntl } from 'react-intl';
15+
import { Maximize, Minimize, Settings } from '@carbon/react/icons';
1516
import {
16-
Download,
17-
Launch,
18-
Maximize,
19-
Minimize,
20-
Settings
21-
} from '@carbon/react/icons';
22-
import {
17+
Button,
18+
ButtonSet,
2319
Checkbox,
2420
CheckboxGroup,
2521
Popover,
26-
PopoverContent,
27-
usePrefix
22+
PopoverContent
2823
} from '@carbon/react';
2924
import { useState } from 'react';
3025

3126
const LogsToolbar = ({
3227
id,
3328
isMaximized,
34-
name,
3529
logLevels,
3630
onToggleShowTimestamps,
3731
onToggleLogLevel,
3832
onToggleMaximized,
39-
showTimestamps,
40-
url
33+
showTimestamps
4134
}) => {
42-
const carbonPrefix = usePrefix();
4335
const intl = useIntl();
4436
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
4537

4638
return (
47-
<div className={`${carbonPrefix}--btn-set`}>
39+
<ButtonSet className="tkn--toolbar">
4840
{onToggleMaximized ? (
49-
<button
50-
className={`${carbonPrefix}--btn ${carbonPrefix}--btn--sm ${carbonPrefix}--layout--size-sm ${carbonPrefix}--btn--icon-only ${carbonPrefix}--copy-btn`}
51-
onClick={onToggleMaximized}
52-
type="button"
53-
>
54-
{isMaximized ? (
55-
<Minimize>
56-
<title>
57-
{intl.formatMessage({
41+
<Button
42+
autoAlign
43+
hasIconOnly
44+
iconDescription={
45+
isMaximized
46+
? intl.formatMessage({
5847
id: 'dashboard.logs.restore',
5948
defaultMessage: 'Return to default'
60-
})}
61-
</title>
62-
</Minimize>
63-
) : (
64-
<Maximize>
65-
<title>
66-
{intl.formatMessage({
49+
})
50+
: intl.formatMessage({
6751
id: 'dashboard.logs.maximize',
6852
defaultMessage: 'Maximize'
69-
})}
70-
</title>
71-
</Maximize>
72-
)}
73-
</button>
74-
) : null}
75-
{url ? (
76-
<>
77-
<a
78-
className={`${carbonPrefix}--btn ${carbonPrefix}--btn--sm ${carbonPrefix}--layout--size-sm ${carbonPrefix}--btn--icon-only ${carbonPrefix}--copy-btn`}
79-
href={url}
80-
target="_blank"
81-
rel="noopener noreferrer"
82-
>
83-
<Launch>
84-
<title>
85-
{intl.formatMessage({
86-
id: 'dashboard.logs.launchButtonTooltip',
87-
defaultMessage: 'Open logs in a new window'
88-
})}
89-
</title>
90-
</Launch>
91-
</a>
92-
<a
93-
className={`${carbonPrefix}--btn ${carbonPrefix}--btn--sm ${carbonPrefix}--layout--size-sm ${carbonPrefix}--btn--icon-only ${carbonPrefix}--copy-btn`}
94-
download={name}
95-
href={url}
96-
>
97-
<Download>
98-
<title>
99-
{intl.formatMessage({
100-
id: 'dashboard.logs.downloadButtonTooltip',
101-
defaultMessage: 'Download logs'
102-
})}
103-
</title>
104-
</Download>
105-
</a>
106-
</>
53+
})
54+
}
55+
kind="ghost"
56+
onClick={onToggleMaximized}
57+
renderIcon={isMaximized ? Minimize : Maximize}
58+
size="sm"
59+
/>
10760
) : null}
10861
<Popover
10962
align="bottom-end"
@@ -121,21 +74,18 @@ const LogsToolbar = ({
12174
}}
12275
open={isSettingsOpen}
12376
>
124-
<button
77+
<Button
12578
aria-expanded={isSettingsOpen}
126-
aria-label={intl.formatMessage({
79+
hasIconOnly
80+
iconDescription={intl.formatMessage({
12781
id: 'dashboard.settings.title',
12882
defaultMessage: 'Settings'
12983
})}
84+
kind="ghost"
13085
onClick={() => setIsSettingsOpen(open => !open)}
131-
title={intl.formatMessage({
132-
id: 'dashboard.settings.title',
133-
defaultMessage: 'Settings'
134-
})}
135-
type="button"
136-
>
137-
<Settings />
138-
</button>
86+
renderIcon={Settings}
87+
size="sm"
88+
/>
13989
<PopoverContent className="tkn--log-settings-menu-content">
14090
<Checkbox
14191
id={`${id}-timestamps-toggle`}
@@ -228,7 +178,7 @@ const LogsToolbar = ({
228178
) : null}
229179
</PopoverContent>
230180
</Popover>
231-
</div>
181+
</ButtonSet>
232182
);
233183
};
234184

‎packages/components/src/components/LogsToolbar/LogsToolbar.stories.jsx‎

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
Copyright 2019-2025 The Tekton Authors
2+
Copyright 2019-2026 The Tekton Authors
33
Licensed under the Apache License, Version 2.0 (the "License");
44
you may not use this file except in compliance with the License.
55
You may obtain a copy of the License at
@@ -97,27 +97,3 @@ export const WithMaximize = {
9797
);
9898
}
9999
};
100-
101-
export const WithURL = {
102-
args: {
103-
...WithMaximize.args,
104-
name: 'some_filename.txt',
105-
url: '/some/logs/url'
106-
},
107-
render: args => {
108-
const [, updateArgs] = useArgs();
109-
110-
return (
111-
<LogsToolbar
112-
{...args}
113-
onToggleLogLevel={logLevel =>
114-
updateArgs({ logLevels: { ...args.logLevels, ...logLevel } })
115-
}
116-
onToggleMaximized={() => updateArgs({ isMaximized: !args.isMaximized })}
117-
onToggleShowTimestamps={showTimestamps =>
118-
updateArgs({ showTimestamps })
119-
}
120-
/>
121-
);
122-
}
123-
};

0 commit comments

Comments
 (0)