[frontend] react integration (cloudera#2963)

[frontend] react integration setup

- add and configure react-testing-library
- adds react hook for huePubSub and updates tests
- move jest-dom package to devDependencies
- [frontent] fixed usePubSub removal of subscription
- Move react to TypeScript

Author: bjornalm

babel.config.js

@@ -21,7 +21,7 @@ module.exports = function (api) {
   api.cache(true);
   api.assertVersion('^7.4.5');
 
-  const presets = ['babel-preset-typescript-vue3', '@babel/typescript', '@babel/preset-env'];
+  const presets = ['babel-preset-typescript-vue3', '@babel/typescript', '@babel/preset-env', '@babel/preset-react'];
   const plugins = [
     [
       'module-resolver',

desktop/core/src/desktop/js/apps/editor/components/result/reactExample/ReactExample.scss

@@ -0,0 +1,12 @@
+// Component styling using BEM notation
+
+$my-color:   #f8f8f8;
+
+.react-example {
+  background-color: $my-color;
+}
+
+.react-example__title,
+.react-example__description {
+  color: black;
+}

desktop/core/src/desktop/js/apps/editor/components/result/reactExample/ReactExample.test.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import React from 'react';
+import ReactExample from './ReactExample';
+
+describe('ReactExample', () => {
+  test('shows a title', () => {
+    render(<ReactExample title="test title" />);
+    const title = screen.getByText('test title');
+    expect(title).toBeDefined();
+  });
+});

desktop/core/src/desktop/js/apps/editor/components/result/reactExample/ReactExample.tsx

@@ -0,0 +1,62 @@
+'use strict';
+
+import React, { FunctionComponent } from 'react';
+
+// If importing using "import { Ace } from 'ext/ace'" VSCode typescript will complain
+import { Ace } from '../../../../../ext/ace';
+
+import {CURSOR_POSITION_CHANGED_EVENT} from '../../../components/aceEditor/AceLocationHandler';
+import ReactExampleGlobal from '../../../../../reactComponents/ReactExampleGlobal/ReactExampleGlobal';
+import { useHuePubSub } from '../../../../../reactComponents/useHuePubSub';
+import SqlExecutable from '../../../execution/sqlExecutable';
+
+import './ReactExample.scss';
+
+export interface ReactExampleProps {
+  title: string;
+  // This example component recieves the "activeExecutable" used in the result page but
+  // the props in general can of course be of any type
+  activeExecutable?: SqlExecutable;
+}
+
+// When we have type definitions and Ace imported using webackpack we should
+// use those types instead of creating our own, e.g. Ace.Position
+interface EditorCursor {
+  position: Ace.Position
+}
+
+const defaultProps = { title: 'Default result title' };
+
+// Using the FunctionComponent generic is optional. Alternatively you can explicitly
+// define the children prop like in the ReactExampleGlobal component.
+const ReactExample: FunctionComponent<ReactExampleProps> = ({ title, activeExecutable }) => {
+  // Example of having the react component rerender based on changes from useHuePubSub.
+  // Use with caution and preferrably only at the top level component in your component tree.
+  const editorCursor = useHuePubSub<EditorCursor>({ topic: CURSOR_POSITION_CHANGED_EVENT });
+
+  const id = activeExecutable?.id;
+  const position =
+    editorCursor?.position !== undefined ? JSON.stringify(editorCursor.position) : 'not available';
+
+  return (
+    <div className="react-example">
+      <h1 className="react-example__title">{title}</h1>
+      <p className="react-example__description">
+        I'm an Editor specific react component containing subcomponents. The dynamic id that I'm
+        getting from a Knockout observable is {id}.
+      </p>
+      <p className="react-example__description">
+        {`I'm also geting a cursor position from hue huePubSub using the hook useHuePubSub which is
+        updated on each 'editor.cursor.position.changed'. Cursor position is
+        ${position}`}
+      </p>
+      <ReactExampleGlobal className="react-example__react-example-global-component">
+        I'm a button from the application global component set
+      </ReactExampleGlobal>
+    </div>
+  );
+};
+
+ReactExample.defaultProps = defaultProps;
+
+export default ReactExample;

desktop/core/src/desktop/js/hue.js

@@ -21,7 +21,6 @@ import _ from 'lodash';
 import $ from 'jquery/jquery.common';
 import 'ext/bootstrap.2.3.2.min';
 import 'ext/bootstrap-editable.1.5.1.min';
-
 import 'utils/d3Extensions';
 import * as d3 from 'd3';
 import d3v3 from 'd3v3';
@@ -77,6 +76,7 @@ import HueDocument from 'doc/hueDocument';
 import { getLastKnownConfig, refreshConfig } from 'config/hueConfig';
 import { simpleGet } from 'api/apiUtils'; // In analytics.mako, metrics.mako, threads.mako
 import Mustache from 'mustache'; // In hbase/templates/app.mako, jobsub.templates.js, search.ko.js, search.util.js
+import { createReactComponents } from 'reactComponents/createRootElements.js';
 
 // TODO: Migrate away
 window._ = _;
@@ -115,6 +115,7 @@ window.SqlAutocompleter = SqlAutocompleter;
 window.sqlStatementsParser = sqlStatementsParser;
 window.hplsqlStatementsParser = hplsqlStatementsParser;
 window.sqlUtils = sqlUtils;
+window.createReactComponents = createReactComponents;
 
 $(document).ready(async () => {
   await refreshConfig(); // Make sure we have config up front

desktop/core/src/desktop/js/ko/bindings/ko.reactWrapper.js

@@ -0,0 +1,73 @@
+import * as ko from 'knockout';
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { loadComponent } from '../../reactComponents/imports';
+
+/**
+ * REACT KNOCKOUT INTEGRATION
+ * This is a oneway binding from knockout to react.js. Use the data-binding called reactWrapper
+ * followed by the component name. Props are passed in as js object literal coded as a string using
+ * the props param. Any new components used must also be added to the import file
+ * desktop/core/src/desktop/js/reactComponents/imports.js.
+ *
+ * Example usage:
+ *
+ * <MyComponent data-bind="reactWrapper: 'MyComponent',
+ *    props: { title: 'Result title', activeExecutable: activeExecutable }">
+ * </MyComponent>
+ *
+ *
+ * The name of the component element tag (eg <MyComponent>) can be anything, but for consistency
+ * and to stay close to how normal react components look we use the actual component name.
+ */
+
+const getProps = allBindings => {
+  const props = allBindings.get('props');
+
+  // Functions are not valid as a React child
+  return { ...props, children: ko.toJS(props.children) };
+};
+
+ko.bindingHandlers.reactWrapper = (() => {
+  return {
+    init: function (el, valueAccessor, allBindings, viewModel, bindingContext) {
+      const componentName = ko.unwrap(valueAccessor());
+      const props = getProps(allBindings);
+
+      // The component's react root should only be created once per DOM
+      // load so we pass it along via the bindingContext to be reused in the
+      const reactRoot = createRoot(el);
+      el.__KO_React_root = reactRoot;
+      loadComponent(componentName).then(Component => {
+        reactRoot.render(createElement(Component, props));
+      });
+      // Tell Knockout that it does not need to update the children
+      // of this component, since that is now handled by React
+      return { controlsDescendantBindings: true };
+    },
+
+    update: function (el, valueAccessor, allBindings, viewModel, bindingContext) {
+      const componentName = ko.unwrap(valueAccessor());
+      const props = getProps(allBindings);
+
+      loadComponent(componentName).then(Component => {
+        el.__KO_React_root.render(createElement(Component, props));
+      });
+
+      // Handle KO observables
+      Object.entries(props).forEach(([propName, propValue]) => {
+        if (ko.isObservable(propValue)) {
+          const koSubscription = propValue.subscribe(() => {
+            loadComponent(componentName).then(Component => {
+              el.__KO_React_root.render(
+                createElement(Component, { ...props, [propName]: propValue() })
+              );
+            });
+          });
+          koSubscription.disposeWhenNodeIsRemoved(el);
+        }
+      });
+    }
+  };
+})();

desktop/core/src/desktop/js/ko/ko.all.js

@@ -101,6 +101,7 @@ import 'ko/bindings/ko.onClickOutside';
 import 'ko/bindings/ko.oneClickSelect';
 import 'ko/bindings/ko.parseArguments';
 import 'ko/bindings/ko.publish';
+import 'ko/bindings/ko.reactWrapper';
 import 'ko/bindings/ko.readOnlyAce';
 import 'ko/bindings/ko.resizable';
 import 'ko/bindings/ko.select2';

desktop/core/src/desktop/js/reactComponents/FallbackComponent.jsx

@@ -0,0 +1,15 @@
+'use strict';
+
+import * as React from 'react';
+
+
+// This component is rendered if the react loadComponent can't find
+// which react component to use 
+const FallbackComponent = () => {
+  return (
+    <div>Placeholder component
+    </div>
+  );
+};
+
+export default FallbackComponent;

desktop/core/src/desktop/js/reactComponents/ReactExampleGlobal/ReactExampleGlobal.scss

@@ -0,0 +1,3 @@
+.react-example-global {
+  background-color: lavender;
+}

desktop/core/src/desktop/js/reactComponents/ReactExampleGlobal/ReactExampleGlobal.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import React from 'react';
+import ReactExampleGlobal from './ReactExampleGlobal';
+
+describe('ReactExampleGlobal', () => {
+  // Make sure no unwanted console info are displayed during testing
+  const consoleSpy = jest.spyOn(console, 'info').mockImplementation();
+
+  afterEach(() => consoleSpy.mockClear());
+
+  test('disables after click', () => {
+    render(<ReactExampleGlobal />);
+    const btn = screen.getByRole('button', { name: 'ReactExampleGlobal - Like me' });
+    expect(btn).not.toBeDisabled();
+    fireEvent.click(btn);
+    expect(btn).toBeDisabled();
+  });
+
+  test('provides click callback', () => {
+    const clickCallback = jest.fn();
+    render(<ReactExampleGlobal onClick={clickCallback} />);
+    const btn = screen.getByRole('button', { name: 'ReactExampleGlobal - Like me' });
+    fireEvent.click(btn);
+    expect(clickCallback).toHaveBeenCalled();
+  });
+
+  test('prints to console.info on click', () => {
+    render(<ReactExampleGlobal version="1" myObj={{ id: 'a' }} />);
+    const btn = screen.getByRole('button', { name: 'ReactExampleGlobal - Like me' });
+    fireEvent.click(btn);
+    expect(consoleSpy).toHaveBeenCalledWith('ReactExampleGlobal clicked  1 a');
+  });
+});

desktop/core/src/desktop/js/reactComponents/ReactExampleGlobal/ReactExampleGlobal.tsx

@@ -0,0 +1,40 @@
+'use strict';
+
+import React, { useState } from 'react';
+
+import './ReactExampleGlobal.scss';
+
+export interface ReactExampleGlobalProps {
+  onClick(e: React.MouseEvent): any;
+  version: string;
+  myObj?: any;
+  className?: string;
+  children?: React.ReactNode | React.ReactNode[];
+}
+
+const defaultProps = {
+  onClick: () => {},
+  version: 'xxx'
+};
+
+const ReactExampleGlobal = ({ onClick, children, version, myObj }: ReactExampleGlobalProps) => {
+  const [isClicked, setIsClicked] = useState(false);
+
+  return (
+    <button
+      className="react-example-global"
+      disabled={isClicked}
+      onClick={e => {
+        onClick(e);
+        setIsClicked(true);
+        console.info(`ReactExampleGlobal clicked  ${version} ${myObj?.id}`);
+      }}
+    >
+      ReactExampleGlobal - {children ?? 'Like me'}
+    </button>
+  );
+};
+
+ReactExampleGlobal.defaultProps = defaultProps;
+
+export default ReactExampleGlobal;

desktop/core/src/desktop/js/reactComponents/createRootElements.js

@@ -0,0 +1,41 @@
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { loadComponent } from './imports';
+
+/**
+ * REACT INTEGRATION
+ * This react integration script can be used for components that are placed directly in an
+ * HTML page on load and do not need to have data passed from Knockout.js. The script is called
+ * using a globally defined function called createReactComponents. The component element
+ * tag must be present in the part of the DOM specified by the selector when this script runs.
+ * The component must also be imported and added to the file js/reactComponents/imports.js
+ * Exmple when used in the editor .mako file:
+ *
+ * <script type="text/javascript">
+ *   (function () {
+ *     window.createReactComponents('#embeddable_editor');
+ *   })();
+ * </script>
+ *
+ * <MyComponent
+ *    data-reactcomponent='MyComponent'
+ *    data-props='{"myObj": 2, "children": "mako template only", "version" : "${sys.version_info[0]}"}'>
+ * </MyComponent>
+ *
+ */
+
+async function render(name, props, root) {
+  const Component = await loadComponent(name);
+  root.render(createElement(Component, props));
+}
+
+export async function createReactComponents(selector) {
+  // Find all DOM containers
+  document.querySelectorAll(`${selector} [data-reactcomponent]`).forEach(domContainer => {
+    const componentName = domContainer.dataset['reactcomponent'];
+    const rawPropDataset = domContainer.dataset.props ? JSON.parse(domContainer.dataset.props) : {};
+    const root = createRoot(domContainer);
+    render(componentName, rawPropDataset, root);
+  });
+}

desktop/core/src/desktop/js/reactComponents/imports.js

@@ -0,0 +1,19 @@
+// ADD NEW RACT COMPONENTS HERE
+// We need a way to match an imported module with a component name
+// so we handle the imports dynamically for that reason.
+export async function loadComponent(name) {
+  switch (name) {
+    // Page specific components here
+    case 'ReactExample':
+      return (await import('../apps/editor/components/result/reactExample/ReactExample')).default;
+
+    // Application global components here
+    case 'ReactExampleGlobal':
+      return (await import('./ReactExampleGlobal/ReactExampleGlobal')).default;
+
+    default:
+      console.error(`A placeholder component is rendered because you probably forgot to include your new component in the 
+      loadComponent function of reactComponents/imports.js`);
+      return (await import('./FallbackComponent')).default;
+  }
+}