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