Merge pull request #8055 from hashicorp/f-ui/remove-jquery-from-templates

UI: Remove jQuery from the rest of application code

ui/app/components/distribution-bar.js

@@ -43,11 +43,12 @@ export default Component.extend(WindowResizable, {
   }),
 
   didInsertElement() {
-    const chart = d3.select(this.$('svg')[0]);
+    const svg = this.element.querySelector('svg');
+    const chart = d3.select(svg);
     const maskId = `dist-mask-${guidFor(this)}`;
     this.setProperties({ chart, maskId });
 
-    this.$('svg clipPath').attr('id', maskId);
+    svg.querySelector('clipPath').setAttribute('id', maskId);
 
     chart.on('mouseleave', () => {
       run(() => {
@@ -75,7 +76,7 @@ export default Component.extend(WindowResizable, {
   /* eslint-disable */
   renderChart() {
     const { chart, _data, isNarrow } = this;
-    const width = this.$('svg').width();
+    const width = this.element.querySelector('svg').clientWidth;
     const filteredData = _data.filter(d => d.value > 0);
     filteredData.forEach((d, index) => {
       set(d, 'index', index);

ui/app/components/gauge-chart.js

@@ -74,9 +74,7 @@ export default Component.extend(WindowResizable, {
   },
 
   updateDimensions() {
-    const $svg = this.$('svg');
-    const width = $svg.width();
-
+    const width = this.element.querySelector('svg').clientWidth;
     this.setProperties({ width, height: width / 2 });
   },
 

ui/app/components/line-chart.js

@@ -322,9 +322,9 @@ export default Component.extend(WindowResizable, {
   },
 
   updateDimensions() {
-    const $svg = this.$('svg');
-    const width = $svg.width();
-    const height = $svg.height();
+    const $svg = this.element.querySelector('svg');
+    const width = $svg.clientWidth;
+    const height = $svg.clientHeight;
 
     this.setProperties({ width, height });
     this.renderChart();

ui/app/helpers/lazy-click.js

@@ -1,5 +1,4 @@
 import Helper from '@ember/component/helper';
-import $ from 'jquery';
 
 /**
  * Lazy Click Event
@@ -10,7 +9,7 @@ import $ from 'jquery';
  * that should be handled instead.
  */
 export function lazyClick([onClick, event]) {
-  if (!$(event.target).is('a')) {
+  if (event.target.tagName.toLowerCase() !== 'a') {
     onClick(event);
   }
 }

ui/app/initializers/app-env.js

@@ -4,15 +4,6 @@ export function initialize() {
   // Provides the app config to all templates
   application.inject('controller', 'config', 'service:config');
   application.inject('component', 'config', 'service:config');
-
-  const jQuery = window.jQuery;
-
-  jQuery.__ajax = jQuery.ajax;
-  jQuery.ajax = function() {
-    // eslint-disable-next-line
-    console.log('jQuery.ajax called:', ...arguments);
-    return jQuery.__ajax(...arguments);
-  };
 }
 
 export default {

ui/app/mixins/window-resizable.js

@@ -2,7 +2,6 @@ import Mixin from '@ember/object/mixin';
 import { run } from '@ember/runloop';
 import { assert } from '@ember/debug';
 import { on } from '@ember/object/evented';
-import $ from 'jquery';
 
 export default Mixin.create({
   windowResizeHandler() {
@@ -12,11 +11,11 @@ export default Mixin.create({
   setupWindowResize: on('didInsertElement', function() {
     run.scheduleOnce('afterRender', this, () => {
       this.set('_windowResizeHandler', this.windowResizeHandler.bind(this));
-      $(window).on('resize', this._windowResizeHandler);
+      window.addEventListener('resize', this._windowResizeHandler);
     });
   }),
 
   removeWindowResize: on('willDestroyElement', function() {
-    $(window).off('resize', this._windowResizeHandler);
+    window.removeEventListener('resize', this._windowResizeHandler);
   }),
 });