From b07cede2058d7fc7862af415113b819283d77ec8 Mon Sep 17 00:00:00 2001 From: Alan Greene Date: Mon, 29 Jun 2020 10:49:42 +0100 Subject: [PATCH] Fix display of array params Rename `WithLineBreaks` component and expand its purpose to handle rendering of all param types, not just strings. The newly named `Param` component will output params as YAML, this ensure that strings (including multiline) and arrays are formatted and displayed in a user-friendly manner. --- .../WithLineBreaks.scss => Param/Param.scss} | 4 ++-- .../{WithLineBreaks => Param}/index.js | 17 +++++------------ .../components/StepDefinition/StepDefinition.js | 4 ++-- .../src/components/StepDetails/StepDetails.scss | 6 ++++++ .../components/TaskRunDetails/TaskRunDetails.js | 4 ++-- .../TaskRunDetails/TaskRunDetails.scss | 6 ++++++ .../src/components/ViewYAML/ViewYAML.js | 13 +++++++++---- packages/components/src/components/index.js | 4 ++-- 8 files changed, 34 insertions(+), 24 deletions(-) rename packages/components/src/components/{WithLineBreaks/WithLineBreaks.scss => Param/Param.scss} (92%) rename packages/components/src/components/{WithLineBreaks => Param}/index.js (61%) diff --git a/packages/components/src/components/WithLineBreaks/WithLineBreaks.scss b/packages/components/src/components/Param/Param.scss similarity index 92% rename from packages/components/src/components/WithLineBreaks/WithLineBreaks.scss rename to packages/components/src/components/Param/Param.scss index 195e7d2a4..17c15b047 100644 --- a/packages/components/src/components/WithLineBreaks/WithLineBreaks.scss +++ b/packages/components/src/components/Param/Param.scss @@ -11,6 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -.tkn--text-line { - display: block; +.tkn--param.bx--snippet--multi { + padding: 0; } diff --git a/packages/components/src/components/WithLineBreaks/index.js b/packages/components/src/components/Param/index.js similarity index 61% rename from packages/components/src/components/WithLineBreaks/index.js rename to packages/components/src/components/Param/index.js index 2c983a16f..600326bee 100644 --- a/packages/components/src/components/WithLineBreaks/index.js +++ b/packages/components/src/components/Param/index.js @@ -13,21 +13,14 @@ limitations under the License. /* istanbul ignore file */ import React from 'react'; -import './WithLineBreaks.scss'; +import ViewYAML from '../ViewYAML'; -export default function WithLineBreaks({ children }) { +import './Param.scss'; + +export default function Param({ children }) { if (!children) { return null; } - const lines = children.split('\n'); - return lines.map((line, index) => ( - - {line} - - )); + return ; } diff --git a/packages/components/src/components/StepDefinition/StepDefinition.js b/packages/components/src/components/StepDefinition/StepDefinition.js index cfdbbb270..93720de50 100644 --- a/packages/components/src/components/StepDefinition/StepDefinition.js +++ b/packages/components/src/components/StepDefinition/StepDefinition.js @@ -18,7 +18,7 @@ import { Link } from 'react-router-dom'; import { FormattedMessage, injectIntl } from 'react-intl'; import { urls } from '@tektoncd/dashboard-utils'; -import { ResourceTable, ViewYAML, WithLineBreaks } from '..'; +import { Param, ResourceTable, ViewYAML } from '..'; import './StepDefinition.scss'; const resourceTable = (title, namespace, resources, intl) => { @@ -83,7 +83,7 @@ class StepDefinition extends Component { name, value: ( - {value} + {value} ) }))} diff --git a/packages/components/src/components/StepDetails/StepDetails.scss b/packages/components/src/components/StepDetails/StepDetails.scss index 3be64bc83..490672169 100644 --- a/packages/components/src/components/StepDetails/StepDetails.scss +++ b/packages/components/src/components/StepDetails/StepDetails.scss @@ -26,4 +26,10 @@ limitations under the License. .bx--data-table-container th{ width: 50%; } + + .bx--tab-content .tkn--table .bx--data-table.bx--data-table--short { + td.cell-value { + max-width: unset; + } + } } diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.js b/packages/components/src/components/TaskRunDetails/TaskRunDetails.js index 9b413903e..b2eeb1deb 100644 --- a/packages/components/src/components/TaskRunDetails/TaskRunDetails.js +++ b/packages/components/src/components/TaskRunDetails/TaskRunDetails.js @@ -14,7 +14,7 @@ limitations under the License. import { injectIntl } from 'react-intl'; import React from 'react'; -import { DetailsHeader, Tab, Table, Tabs, ViewYAML, WithLineBreaks } from '..'; +import { DetailsHeader, Param, Tab, Table, Tabs, ViewYAML } from '..'; import './TaskRunDetails.scss'; @@ -50,7 +50,7 @@ const TaskRunDetails = props => { name, value: ( - {value} + {value} ) }; diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.scss b/packages/components/src/components/TaskRunDetails/TaskRunDetails.scss index 1e426c646..874b46acb 100644 --- a/packages/components/src/components/TaskRunDetails/TaskRunDetails.scss +++ b/packages/components/src/components/TaskRunDetails/TaskRunDetails.scss @@ -34,4 +34,10 @@ limitations under the License. .bx--data-table-container th{ width: 50%; } + + .bx--tab-content .tkn--table .bx--data-table.bx--data-table--short { + td.cell-value { + max-width: unset; + } + } } diff --git a/packages/components/src/components/ViewYAML/ViewYAML.js b/packages/components/src/components/ViewYAML/ViewYAML.js index 1079d84fb..eab0cb7bb 100644 --- a/packages/components/src/components/ViewYAML/ViewYAML.js +++ b/packages/components/src/components/ViewYAML/ViewYAML.js @@ -1,5 +1,5 @@ /* -Copyright 2019 The Tekton Authors +Copyright 2019-2020 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -14,12 +14,13 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; import jsYaml from 'js-yaml'; +import classNames from 'classnames'; const ViewYAML = props => { - const { resource } = props; + const { className, resource } = props; return ( -
+ 
{jsYaml.dump(resource)}
 @@ -28,7 +29,11 @@ const ViewYAML = props => { }; ViewYAML.propTypes = { - resource: PropTypes.objectOf(PropTypes.any).isRequired + resource: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.shape({}), + PropTypes.string + ]).isRequired }; export default ViewYAML; diff --git a/packages/components/src/components/index.js b/packages/components/src/components/index.js index 237ca821d..60446fd78 100644 --- a/packages/components/src/components/index.js +++ b/packages/components/src/components/index.js @@ -13,6 +13,7 @@ limitations under the License. /* istanbul ignore file */ export { default as DataTableSkeleton } from './DataTableSkeleton'; +export { default as DetailsHeader } from './DetailsHeader'; export { default as ErrorBoundary } from './ErrorBoundary'; export { default as FormattedDate } from './FormattedDate'; export { default as FormattedDuration } from './FormattedDuration'; @@ -25,6 +26,7 @@ export { default as Log } from './Log'; export { default as LogoutButton } from './LogoutButton'; export { default as Modal } from './Modal'; export { default as PageErrorBoundary } from './PageErrorBoundary'; +export { default as Param } from './Param'; export { default as PipelineGraph } from './Graph/PipelineGraph'; export { default as PipelineResources } from './PipelineResources'; export { default as PipelineRun } from './PipelineRun'; @@ -39,7 +41,6 @@ export { default as StatusIcon } from './StatusIcon'; export { default as Step } from './Step'; export { default as StepDefinition } from './StepDefinition'; export { default as StepDetails } from './StepDetails'; -export { default as DetailsHeader } from './DetailsHeader'; export { default as StepStatus } from './StepStatus'; export { default as Tab } from './Tab'; export { default as Table } from './Table'; @@ -52,4 +53,3 @@ export { default as TaskTree } from './TaskTree'; export { default as TooltipDropdown } from './TooltipDropdown'; export { default as Trigger } from './Trigger'; export { default as ViewYAML } from './ViewYAML'; -export { default as WithLineBreaks } from './WithLineBreaks';