Reduce front end bundle size

Reduce the amount of code shipped to users' browsers by ensuring we're
only loading code that's actually required and making smart use of
our dependencies and support for tree shaking where available.

This change reduces the size of the vendor JS bundle by ~1MB (~50%)
by making two relatively small changes:
- disable the import of carbon-components-react for the custom UI
  extensions which are not currently supported (~500KB savings)
- switch the `react-syntax-highlighter` from using Prism to highlight.js,
  also ensure we're only loading the language definition required

As a result of the switch to loading the highlight.js language definition
from an esmodule, we also need to update the jest config for unit tests
to exclude the react-syntax-highlighter package from some of its processing
to avoid errors related to imports used outside of modules.

Another benefit of switching from Prism to highlight.js is more consistent
syntax highlighting, particularly for the YAML which we care about. Strings
are consistently highlighted regardless of whether they're quoted or not.

jest.config.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2020 The Tekton Authors
+Copyright 2019-2021 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
@@ -39,5 +39,6 @@ module.exports = {
   testMatch: [
     '<rootDir>/src/**/*.test.js',
     '<rootDir>/packages/**/src/**/*.test.js'
-  ]
+  ],
+  transformIgnorePatterns: ['/node_modules/(?!(react-syntax-highlighter)/)']
 };

packages/components/src/components/ViewYAML/ViewYAML.js

@@ -15,18 +15,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import jsYaml from 'js-yaml';
 import classNames from 'classnames';
-import { Prism as SyntaxHighlight } from 'react-syntax-highlighter';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import yamlRules from 'react-syntax-highlighter/dist/esm/languages/hljs/yaml';
+
+SyntaxHighlighter.registerLanguage('yaml', yamlRules);
 
 function YAMLHighlighter({ children, className }) {
   return (
-    <SyntaxHighlight
+    <SyntaxHighlighter
       className={className}
+      codeTagProps={{}}
       language="yaml"
+      showLineNumbers
       useInlineStyles={false}
-      codeTagProps={{}}
     >
       {children}
-    </SyntaxHighlight>
+    </SyntaxHighlighter>
   );
 }
 

packages/components/src/components/ViewYAML/ViewYAML.test.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Tekton Authors
+Copyright 2019-2021 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
@@ -63,5 +63,5 @@ it('render syntax highlight', () => {
     enableSyntaxHighlighting: true
   };
   const { container } = render(<ViewYAML {...props} />);
-  expect(container.firstChild.className).toMatch(/prism/);
+  expect(container.firstChild.className).toMatch(/hljs/);
 });

src/containers/Extension/Extension.js

@@ -10,15 +10,16 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+/* istanbul ignore file */
 
 import React, { Suspense, useState } from 'react';
 import { injectIntl } from 'react-intl';
 import { ErrorBoundary } from '@tektoncd/dashboard-components';
 import { paths, urls, useTitleSync } from '@tektoncd/dashboard-utils';
 
-import './globals';
+// TODO: restore this when adding support for custom UI extensions
+// import './globals';
 
-/* istanbul ignore next */
 function Extension({ displayName: resourceName, intl, source }) {
   const [ExtensionComponent] = useState(() =>
     React.lazy(() => import(/* webpackIgnore: true */ source))

src/containers/Extension/globals.js

@@ -10,6 +10,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+/* istanbul ignore file */
 
 import React from 'react';
 import ReactDOM from 'react-dom';