Feature/babel alias (#104)

just-at-uber · web-flow · commit cf1f543db475 · 2020-03-18T09:32:33.000-07:00
* creating @components, @helpers, @Constants webpack alias * moving module resolving to babel to share config between webpack and jest. * removing global click handler anti-pattern * fixing eslint. removing unused function * small format change * switching global alias character * 3.11.0
diff --git a/.babelrc b/.babelrc
@@ -1,4 +1,16 @@
 {
+  "plugins": [
+    [
+      "module-resolver",
+      {
+        "alias": {
+          "~constants": "./client/constants",
+          "~components": "./client/components",
+          "~helpers": "./client/helpers"
+        }
+      }
+    ]
+  ],
   "presets": [
     [
       "env",
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -63,6 +63,11 @@ module.exports = {
     'space-before-blocks': 'error',
   },
   settings: {
-    'import/resolver': 'webpack',
+    'import/resolver': {
+      'babel-module': {},
+      webpack: {
+        config: 'webpack.config.js',
+      },
+    },
   },
 };
diff --git a/client/App.vue b/client/App.vue
@@ -1,8 +1,8 @@
 <script>
 import { version } from '../package.json';
 import logo from './assets/logo.svg';
-import NotificationBar from './components/notification-bar.vue';
-import { NOTIFICATION_TIMEOUT, NOTIFICATION_TYPE_SUCCESS } from './constants';
+import { NotificationBar } from '~components';
+import { NOTIFICATION_TIMEOUT, NOTIFICATION_TYPE_SUCCESS } from '~constants';
 
 export default {
   components: {
@@ -24,10 +24,7 @@ export default {
   },
   methods: {
     globalClick(e) {
-      if (this.editing && !this.$refs.domain.contains(e.target)) {
-        this.clearEdit();
-      }
-
+      // Code required for mocha tests to run correctly without infinite looping.
       if (e.target.tagName === 'A') {
         const href = e.target.getAttribute('href');
 
diff --git a/client/components/copy.vue b/client/components/copy.vue
@@ -4,6 +4,7 @@
 
 <script>
 export default {
+  name: 'copy',
   props: ['text'],
   methods: {
     copy() {
diff --git a/client/components/detail-list.vue b/client/components/detail-list.vue
@@ -1,9 +1,13 @@
 <script>
-import { preKeys } from '../constants';
+import { DataViewer } from '~components';
+import { preKeys } from '~constants';
 
 export default {
   name: 'details-list',
   props: ['compact', 'highlight', 'item', 'title'],
+  components: {
+    'data-viewer': DataViewer,
+  },
   data() {
     return {};
   },
diff --git a/client/components/domain-navigation.vue b/client/components/domain-navigation.vue
@@ -41,7 +41,7 @@
       v-if="domainDesc"
     >
       <span class="domain-name">{{ domainDescName }}</span>
-      <details-list :item="domainDesc" :title="domainDescName" />
+      <detail-list :item="domainDesc" :title="domainDescName" />
     </div>
   </div>
 </template>
@@ -50,7 +50,8 @@
 import debounce from 'lodash-es/debounce';
 import omit from 'lodash-es/omit';
 import { stringify } from 'friendly-querystring';
-import { getKeyValuePairs, mapDomainDescription } from '../helpers';
+import { getKeyValuePairs, mapDomainDescription } from '~helpers';
+import { DetailList } from '~components';
 
 const validationMessages = {
   valid: d => `${d} exists`,
@@ -72,6 +73,9 @@ export default {
       domainDescRequest: undefined,
     };
   },
+  components: {
+    'detail-list': DetailList,
+  },
   created() {
     this.domainDescCache = {};
 
diff --git a/client/components/index.js b/client/components/index.js
@@ -0,0 +1,7 @@
+export { default as BarLoader } from './bar-loader';
+export { default as Copy } from './copy';
+export { default as DataViewer } from './data-viewer';
+export { default as DetailList } from './detail-list';
+export { default as DateRangePicker } from './date-range-picker';
+export { default as DomainNavigation } from './domain-navigation';
+export { default as NotificationBar } from './notification-bar';
diff --git a/client/helpers/get-error-message.js b/client/helpers/get-error-message.js
@@ -1,4 +1,4 @@
-import { NOTIFICATION_TYPE_ERROR_MESSAGE_DEFAULT } from '../constants';
+import { NOTIFICATION_TYPE_ERROR_MESSAGE_DEFAULT } from '~constants';
 
 export default (
   error,
diff --git a/client/helpers/get-error-message.spec.js b/client/helpers/get-error-message.spec.js
@@ -1,5 +1,5 @@
-import { NOTIFICATION_TYPE_ERROR_MESSAGE_DEFAULT } from '../constants';
 import getErrorMessage from './get-error-message';
+import { NOTIFICATION_TYPE_ERROR_MESSAGE_DEFAULT } from '~constants';
 
 describe('getErrorMessage', () => {
   describe('When passing error.json.message', () => {
diff --git a/client/helpers/get-key-value-pairs.js b/client/helpers/get-key-value-pairs.js
@@ -1,6 +1,6 @@
 import moment from 'moment';
-import { jsonKeys, preKeys } from '../constants';
 import getJsonStringObject from './get-json-string-object';
+import { jsonKeys, preKeys } from '~constants';
 
 const getKeyValuePairs = event => {
   const kvps = [];
diff --git a/client/helpers/get-string-elipsis.js b/client/helpers/get-string-elipsis.js
@@ -1,7 +1,4 @@
-import {
-  MAXIMUM_JSON_CHARACTER_LIMIT,
-  MAXIMUM_JSON_MESSAGE,
-} from '../constants';
+import { MAXIMUM_JSON_CHARACTER_LIMIT, MAXIMUM_JSON_MESSAGE } from '~constants';
 
 const getStringElipsis = input =>
   input.length < MAXIMUM_JSON_CHARACTER_LIMIT
diff --git a/client/helpers/get-string-elipsis.spec.js b/client/helpers/get-string-elipsis.spec.js
@@ -1,8 +1,5 @@
-import {
-  MAXIMUM_JSON_CHARACTER_LIMIT,
-  MAXIMUM_JSON_MESSAGE,
-} from '../constants';
 import getStringElipsis from './get-string-elipsis';
+import { MAXIMUM_JSON_CHARACTER_LIMIT, MAXIMUM_JSON_MESSAGE } from '~constants';
 
 describe('getStringElipsis', () => {
   describe('when passed a string that has a length less than MAXIMUM_JSON_CHARACTER_LIMIT', () => {
diff --git a/client/main.js b/client/main.js
@@ -8,12 +8,6 @@ import qs from 'friendly-querystring';
 import moment from 'moment';
 import promiseFinally from 'promise.prototype.finally';
 
-import { http, injectMomentDurationFormat, jsonTryParse } from './helpers';
-
-import DateRangePicker from './components/date-range-picker';
-import detailList from './components/detail-list.vue';
-import barLoader from './components/bar-loader.vue';
-import dataViewer from './components/data-viewer.vue';
 import copyButton from './components/copy.vue';
 
 import snapscroll from './directives/snapscroll';
@@ -28,6 +22,7 @@ import History from './routes/execution/history.vue';
 import StackTrace from './routes/execution/stack-trace.vue';
 import Queries from './routes/execution/queries.vue';
 import TaskList from './routes/task-list.vue';
+import { http, injectMomentDurationFormat, jsonTryParse } from '~helpers';
 
 const routeOpts = {
   mode: 'history',
@@ -188,11 +183,7 @@ Vue.use(vueModal, {
 });
 Vue.use(vueSplit);
 Vue.component('v-select', vueSelect);
-Vue.component('date-range-picker', DateRangePicker);
 Vue.component('copy', copyButton);
-Vue.component('bar-loader', barLoader);
-Vue.component('data-viewer', dataViewer);
-Vue.component('details-list', detailList);
 Vue.directive('snapscroll', snapscroll);
 Vue.config.ignoredElements = ['loader'];
 
diff --git a/client/routes/Intro.vue b/client/routes/Intro.vue
@@ -30,14 +30,14 @@
 </template>
 
 <script>
-import domainNav from '../components/domain-navigate.vue';
+import { DomainNavigation } from '~components';
 
 export default {
   data() {
     return {};
   },
   components: {
-    'domain-navigation': domainNav,
+    'domain-navigation': DomainNavigation,
   },
 };
 </script>
diff --git a/client/routes/Workflows.vue b/client/routes/Workflows.vue
@@ -108,7 +108,8 @@
 <script>
 import moment from 'moment';
 import debounce from 'lodash-es/debounce';
-import pagedGrid from '../components/paged-grid';
+import pagedGrid from '~components/paged-grid';
+import { DateRangePicker } from '~components';
 
 export default pagedGrid({
   data() {
@@ -159,6 +160,9 @@ export default pagedGrid({
   beforeDestroy() {
     clearInterval(this.interval);
   },
+  components: {
+    'date-range-picker': DateRangePicker,
+  },
   computed: {
     filterBy() {
       return this.status.value === 'OPEN' ? 'StartTime' : 'CloseTime';
diff --git a/client/routes/domain-config.vue b/client/routes/domain-config.vue
@@ -3,7 +3,7 @@
     <header>
       <h3>{{ domain }}</h3>
     </header>
-    <details-list
+    <detail-list
       v-if="domainConfig"
       :item="domainConfig"
       :title="`Domain ${domain} Configuration`"
@@ -13,7 +13,8 @@
 </template>
 
 <script>
-import { getKeyValuePairs, mapDomainDescription } from '../helpers';
+import { getKeyValuePairs, mapDomainDescription } from '~helpers';
+import { DetailList } from '~components';
 
 export default {
   data() {
@@ -24,6 +25,9 @@ export default {
     };
   },
   props: ['domain'],
+  components: {
+    'detail-list': DetailList,
+  },
   created() {
     this.$http(`/api/domain/${this.domain}`)
       .then(
diff --git a/client/routes/execution/event-details.vue b/client/routes/execution/event-details.vue
@@ -1,13 +1,18 @@
 <script>
+import { DetailList } from '~components';
+
 export default {
   name: 'event-details',
   props: ['event', 'compact', 'highlight'],
+  components: {
+    'detail-list': DetailList,
+  },
   render(h) {
     if (!this.event) {
       return null;
     }
 
-    return h('details-list', {
+    return h('detail-list', {
       props: {
         item: this.event,
         highlight: this.highlight,
diff --git a/client/routes/execution/event-node.vue b/client/routes/execution/event-node.vue
@@ -1,6 +1,7 @@
 <script>
 import moment from 'moment';
-import { getKeyValuePairs, shortName } from '../../helpers';
+import { getKeyValuePairs, shortName } from '~helpers';
+import { DetailList } from '~components';
 
 const titlesForGroups = {
   ActivityTaskScheduled: n =>
@@ -73,6 +74,9 @@ function titleForNode(n) {
 export default {
   name: 'event-node',
   props: ['node'],
+  components: {
+    'detail-list': DetailList,
+  },
   render(h) {
     const activeId = this.$route.query.eventId;
     const router = this.$router;
@@ -87,7 +91,7 @@ export default {
         showDetails && findActiveGroupNode(node, activeId, true);
       const detailsList =
         activeGroupNode &&
-        h('details-list', {
+        h('detail-list', {
           props: {
             item: {
               kvps: getKeyValuePairs(activeGroupNode.details),
diff --git a/client/routes/execution/helpers/get-event-details.js b/client/routes/execution/helpers/get-event-details.js
@@ -1,4 +1,4 @@
-import { getKeyValuePairs } from '../../../helpers';
+import { getKeyValuePairs } from '~helpers';
 
 const getEventDetails = event => {
   const { details, eventId, eventType, timeStampDisplay } = event;
diff --git a/client/routes/execution/helpers/get-event-details.spec.js b/client/routes/execution/helpers/get-event-details.spec.js
@@ -1,6 +1,6 @@
 import getEventDetails from './get-event-details';
 
-jest.mock('../../../helpers');
+jest.mock('~helpers');
 
 describe('getEventDetails', () => {
   describe('When passed an event', () => {
diff --git a/client/routes/execution/helpers/get-event-full-details.js b/client/routes/execution/helpers/get-event-full-details.js
@@ -1,5 +1,5 @@
-import { getKeyValuePairs } from '../../../helpers';
 import { eventFullTransforms } from './event-full-transforms';
+import { getKeyValuePairs } from '~helpers';
 
 const getEventFullDetails = event => {
   if (!event) {
diff --git a/client/routes/execution/helpers/get-event-full-details.spec.js b/client/routes/execution/helpers/get-event-full-details.spec.js
@@ -1,6 +1,6 @@
 import getEventFullDetails from './get-event-full-details';
 
-jest.mock('../../../helpers');
+jest.mock('~helpers');
 
 describe('getEventFullDetails', () => {
   describe('When passed no event', () => {
diff --git a/client/routes/execution/helpers/get-event-summary.js b/client/routes/execution/helpers/get-event-summary.js
@@ -1,5 +1,5 @@
-import { getKeyValuePairs } from '../../../helpers';
 import { summarizeEvents } from './summarize-events';
+import { getKeyValuePairs } from '~helpers';
 
 const getEventSummary = event => {
   if (!event) {
diff --git a/client/routes/execution/helpers/get-event-summary.spec.js b/client/routes/execution/helpers/get-event-summary.spec.js
@@ -1,6 +1,6 @@
 import getEventSummary from './get-event-summary';
 
-jest.mock('../../../helpers');
+jest.mock('~helpers');
 
 describe('getEventSummary', () => {
   describe('When passed no event', () => {
diff --git a/client/routes/execution/helpers/map-timeline-events.js b/client/routes/execution/helpers/map-timeline-events.js
@@ -1,6 +1,6 @@
 import moment from 'moment';
-import { shortName } from '../../../helpers';
 import { summarizeEvents } from './summarize-events';
+import { shortName } from '~helpers';
 
 export default function(historyEvents) {
   const events = [];
diff --git a/client/routes/execution/helpers/summarize-events.js b/client/routes/execution/helpers/summarize-events.js
@@ -1,7 +1,7 @@
 import moment from 'moment';
-import { shortName } from '../../../helpers';
 import parentWorkflowLink from './parent-workflow-link';
 import workflowLink from './workflow-link';
+import { shortName } from '~helpers';
 
 export const summarizeEvents = {
   ActivityTaskCancelRequested: d => ({ ID: d.activityId }),
diff --git a/client/routes/execution/helpers/workflow-link.js b/client/routes/execution/helpers/workflow-link.js
@@ -1,4 +1,4 @@
-import { shortName } from '../../../helpers';
+import { shortName } from '~helpers';
 
 const workflowLink = (d, short) => {
   const text = [
diff --git a/client/routes/execution/history.vue b/client/routes/execution/history.vue
diff --git a/client/routes/execution/index.vue b/client/routes/execution/index.vue
diff --git a/client/routes/execution/summary.vue b/client/routes/execution/summary.vue
diff --git a/package.json b/package.json
diff --git a/test/setup.js b/test/setup.js
diff --git a/webpack.config.js b/webpack.config.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { NOTIFICATION_TYPE_ERROR_MESSAGE_DEFAULT } from '../constants';`
	`1`	`+import { NOTIFICATION_TYPE_ERROR_MESSAGE_DEFAULT } from '~constants';`
`2`	`2`
`3`	`3`	`export default (`
`4`	`4`	`error,`