Release/3.18.0 (#168)

* Feature/tasklist partition (#166)

* moving tasklist into separate folder. adding partition page and navigation tabs

* alphabetizing tchannel client api. added listTaskListPartition and hooked up route. Adding front end api call. Need more context to proceed.

* finished task list partition screen

* adding metrics page. making feature flag style display inline.

* 3.18.0-beta.0

* fixing things for PR

* lint

* fixing test

* fix for event which should not be a span but a point. (#167)

* 3.18.0-beta.1

* Feature/domain metrics (#169)

* adding blank metrics page for domain.

* lint fixes

* 3.18.0-beta.2

* changing from route variables to props. Fixing props for metrics screen. (#170)

* 3.18.0-beta.3

* 3.18.0-beta.4

* Server side feature flags (#171)

* updated code to work with server side feature flags instead of using feature flags json.

* fixing tests

* abstracting common helper out of service.

* 3.18.0-beta.5

* allowing endpoint to call next middleware

* 3.18.0-beta.6

* PR comments

* fixing failing tests

* reverting change as it destabilizes test on CI

* updating fetch-mock package to latest. adding delay for fullWorkflowHistory api call mock.

* lowering fetch-mock package version to see if increases stability.

* adding release notes for cadence server go and ui. (#172)

* 3.18.0

Author: just-at-uber

babel.config.js

@@ -6,8 +6,9 @@ module.exports = {
         "alias": {
           "~constants": "./client/constants",
           "~components": "./client/components",
-          "~helpers": "./client/helpers"
-        }
+          "~helpers": "./client/helpers",
+          "~services": "./client/services",
+        },
       }
     ],
     ["@babel/plugin-transform-regenerator"]

client/App.vue

@@ -190,7 +190,7 @@ export default {
           </a>
         </flex-grid-item>
 
-        <feature-flag name="environment-select">
+        <feature-flag name="environmentSelect">
           <flex-grid-item>
             <v-select
               class="environment-select"

client/components/button-fill.vue

@@ -24,8 +24,7 @@ export default {
     color: {
       type: String,
       default: 'primary',
-      validator: value =>
-        ['primary', 'secondary', 'tertiary'].includes(value),
+      validator: value => ['primary', 'secondary', 'tertiary'].includes(value),
     },
     disabled: {
       type: Boolean,

client/components/feature-flag.vue

@@ -1,21 +1,50 @@
 <template>
-  <div class="feature-flag" v-if="isFeatureFlagEnabled">
+  <div
+    class="feature-flag"
+    :class="{ [display]: display }"
+    v-if="isFeatureFlagEnabled"
+  >
     <slot></slot>
   </div>
 </template>
 
 <script>
-import { isFeatureFlagEnabled } from '~helpers';
+import { FeatureFlagService } from '~services';
 
 export default {
   name: 'feature-flag',
-  props: ['name'],
-  computed: {
-    isFeatureFlagEnabled() {
-      const { name } = this;
-
-      return isFeatureFlagEnabled(name);
+  props: {
+    display: {
+      type: String,
+      validator: value => ['inline', 'inline-block'].includes(value),
+    },
+    name: {
+      required: true,
+      type: String,
     },
+    params: {
+      type: Object,
+    }
+  },
+  data() {
+    return {
+      isFeatureFlagEnabled: false,
+    }
+  },
+  async mounted() {
+    const { name, params } = this;
+    const featureFlagService = new FeatureFlagService();
+    this.isFeatureFlagEnabled = await featureFlagService.isFeatureFlagEnabled({ name, params });
   },
 };
 </script>
+<style lang="stylus">
+.feature-flag {
+  &.inline {
+    display: inline;
+  }
+  &.inline-block {
+    display: inline-block;
+  }
+}
+</style>

client/constants.js

@@ -11,7 +11,7 @@ export const DATE_FORMAT_OPTIONS = [
 ];
 
 export const ENVIRONMENT_LIST = [
-  // Make sure to enable "environment-select" in feature-flags.json to enable environment select.
+  // Make sure to enable "environmentSelect" in feature-flags.json to enable environment select.
   //
   // Examples:
   //

client/feature-flags.json

@@ -0,0 +1,11 @@
+const getQueryStringFromObject = (params = {}) => {
+  const paramKeys = Object.keys(params);
+  if (paramKeys.length === 0) {
+    return '';
+  }
+  return '?' + paramKeys.map((queryName) =>
+    encodeURIComponent(queryName) + '=' + encodeURIComponent(params[queryName])
+  ).join('&');
+};
+
+export default getQueryStringFromObject;

client/helpers/get-query-string-from-object.js

@@ -0,0 +1,17 @@
+import getQueryStringFromObject from './get-query-string-from-object';
+
+describe('getQueryStringFromObject', () => {
+  it('should return empty string when no params are passed.', () => {
+    const output = getQueryStringFromObject();
+    expect(output).toEqual('');
+  });
+
+  it('should return an url encoded query param string when params are passed.', () => {
+    const output = getQueryStringFromObject({
+      stringParam: 'string',
+      booleanParam: true,
+      numberParam: 20,
+    });
+    expect(output).toEqual('?stringParam=string&booleanParam=true&numberParam=20');
+  });
+});

client/helpers/get-query-string-from-object.spec.js

@@ -7,11 +7,11 @@ export { default as getErrorMessage } from './get-error-message';
 export { default as getJsonStringObject } from './get-json-string-object';
 export { default as getKeyValuePairs } from './get-key-value-pairs';
 export { default as getLatestNewsItems } from './get-latest-news-items';
+export { default as getQueryStringFromObject } from './get-query-string-from-object';
 export { default as getStartTimeIsoString } from './get-start-time-iso-string';
 export { default as getStringElipsis } from './get-string-elipsis';
 export { default as http } from './http';
 export { default as injectMomentDurationFormat } from './inject-moment-duration-format';
-export { default as isFeatureFlagEnabled } from './is-feature-flag-enabled';
 export { default as jsonTryParse } from './json-try-parse';
 export { default as mapDomainDescription } from './map-domain-description';
 export { default as shortName } from './short-name';