HUE-9266 [ui] Enable Typescript for vue components

Review Request #15263 — Created June 24, 2020 and submitted

johan
hue
hue
ranade, romain, Sreenath, yingc
commit 5e5d4ff854f0fcb2138e15dc1284f5edb2a7434b
Author: Johan Ahlen <johan@johanahlen.com>
Date:   Wed Jun 24 13:17:42 2020 +0200

    HUE-9266 [ui] Enable Typescript for vue components

:100644 100644 022c9dd9d0 cad6c102b0 M	.babelrc
:100644 100644 82e7d51809 d8acb0c854 M	desktop/core/src/desktop/js/apps/jobBrowser/components/hiveQueryPlan.vue
:000000 100644 0000000000 5cc1b9a0d6 A	desktop/core/src/desktop/js/types/web-component-wrapper/index.d.ts
:100644 100644 45d6702c09 5d140c6175 M	package-lock.json
:100644 100644 62c630b52a 6816998703 M	package.json
:100644 100644 1563f7c7ed fb17e802df M	tsconfig.json

commit d62b84980a14700b6588d185e8aaa2603cb7bf42
Author: Johan Ahlen <johan@johanahlen.com>
Date:   Wed Jun 24 12:35:05 2020 +0200

    HUE-9266 [ui] Switch the hive query plan component from ko to a vue web component

:100644 100644 e562987e6b 022c9dd9d0 M	.babelrc
:100644 100644 1a82105da8 4df7654fc6 M	apps/jobbrowser/src/jobbrowser/templates/job_browser.mako
:100644 100644 31aabbdc93 f1777739f7 M	desktop/core/src/desktop/js/apps/jobBrowser/app.js
:100644 000000 ca31fa04d7 0000000000 D	desktop/core/src/desktop/js/apps/jobBrowser/components/__snapshots__/ko.hiveQueryPlan.test.js.snap
:000000 100644 0000000000 82e7d51809 A	desktop/core/src/desktop/js/apps/jobBrowser/components/hiveQueryPlan.vue
:100644 000000 0b28f4f99d 0000000000 D	desktop/core/src/desktop/js/apps/jobBrowser/components/ko.hiveQueryPlan.js
:100644 000000 544646e9b9 0000000000 D	desktop/core/src/desktop/js/apps/jobBrowser/components/ko.hiveQueryPlan.test.js
:100644 100644 1122278160 cfb7bb6694 M	desktop/core/src/desktop/templates/hue.mako
:100644 100644 658a5b2c3c 45d6702c09 M	package-lock.json
:100644 100644 46dee6cde4 62c630b52a M	package.json

Manual on Chrome

What's interesting here is that all you'll need to use the query plan (in any webapp with any framework) is:

import 'apps/jobBrowser/components/hiveQueryPlan';

and then, in the html:

<hive-query-plan></hive-query-plan>

There's no Vue binding to a container element needed beforehand as the Vue component is wrapped as a web component.

Next up is passing data to the web component in a clean way, need to figure out the best approach for interop between ko and pure web components.

Also IE 11 is definitely out the window with this.

romain
  1. Nice!

    And I see for missing data, tests but super good progress! Edge only!

    Good to keep internal components there, we can see for a way letter to better publish the public ones

  2. 
      
johan
Review request changed

Status: Closed (submitted)

Loading...