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.

packages/components/src/components/WithLineBreaks/WithLineBreaks.scss → 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;
 }

packages/components/src/components/WithLineBreaks/index.js → 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) => (
- <span
- // using index as key is safe here as the content does not change, we're just breaking it up
- key={index} // eslint-disable-line react/no-array-index-key
- className="tkn--text-line"
- >
- {line}
- </span>
- ));
+ return <ViewYAML className="tkn--param" resource={children} />;
 }

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: (
  <span title={value}>
- <WithLineBreaks>{value}</WithLineBreaks>
+ <Param>{value}</Param>
  </span>
  )
  }))}

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;
+ }
+ }
 }

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: (
  <span title={value}>
- <WithLineBreaks>{value}</WithLineBreaks>
+ <Param>{value}</Param>
  </span>
  )
  };

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;
+ }
+ }
 }

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 (
- <div className="bx--snippet--multi">
+ <div className={classNames('bx--snippet--multi', className)}>
  <code>
  <pre>{jsYaml.dump(resource)}</pre>
  </code>
@@ -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;

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