Transform issues analytics labels filters

The filters used for the filters do not conform to the
same pattern as used for the API. In this MR we transform
the labels filters to match that of the API.

app/assets/javascripts/lib/utils/url_utility.js

@@ -109,9 +109,10 @@ export function mergeUrlParams(params, url) {
  *
  * @param {string[]} params - the query param names to remove
  * @param {string} [url=windowLocation().href] - url from which the query param will be removed
+ * @param {boolean} skipEncoding - set to true when the url does not require encoding
  * @returns {string} A copy of the original url but without the query param
  */
-export function removeParams(params, url = window.location.href) {
+export function removeParams(params, url = window.location.href, skipEncoding = false) {
   const [rootAndQuery, fragment] = url.split('#');
   const [root, query] = rootAndQuery.split('?');
 
@@ -119,12 +120,13 @@ export function removeParams(params, url = window.location.href) {
     return url;
   }
 
-  const encodedParams = params.map(param => encodeURIComponent(param));
+  const removableParams = skipEncoding ? params : params.map(param => encodeURIComponent(param));
+
   const updatedQuery = query
     .split('&')
     .filter(paramPair => {
       const [foundParam] = paramPair.split('=');
-      return encodedParams.indexOf(foundParam) < 0;
+      return removableParams.indexOf(foundParam) < 0;
     })
     .join('&');
 

ee/app/assets/javascripts/issues_analytics/components/issues_analytics.vue

@@ -7,6 +7,7 @@ import { s__ } from '~/locale';
 import { getMonthNames } from '~/lib/utils/datetime_utility';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import IssuesAnalyticsTable from './issues_analytics_table.vue';
+import { transformIssuesApiEndpoint } from '../utils';
 
 export default {
   components: {
@@ -111,7 +112,7 @@ export default {
     },
     issuesTableEndpoints() {
       return {
-        api: `${this.issuesApiEndpoint}${this.appliedFilters}`,
+        api: transformIssuesApiEndpoint(`${this.issuesApiEndpoint}${this.appliedFilters}`),
         issuesPage: this.issuesPageEndpoint,
       };
     },

ee/app/assets/javascripts/issues_analytics/components/issues_analytics_table.vue

@@ -103,6 +103,11 @@ export default {
       isLoading: true,
     };
   },
+  computed: {
+    shouldDisplayTable() {
+      return this.issues.length;
+    },
+  },
   created() {
     this.fetchIssues();
   },
@@ -141,7 +146,7 @@ export default {
 <template>
   <gl-loading-icon v-if="isLoading" size="md" />
   <gl-table
-    v-else
+    v-else-if="shouldDisplayTable"
     :fields="$options.tableHeaderFields"
     :items="issues"
     stacked="sm"

ee/app/assets/javascripts/issues_analytics/utils.js

+import { mergeUrlParams, getParameterValues, removeParams } from '~/lib/utils/url_utility';
+
+const LABEL_FILTER_NAME = 'label_name[]';
+const MILESTONE_FILTER_NAME = 'milestone_title';
+
+/**
+ * This util method takes the issues api endpoint with global page filters
+ * and transforms parameters which are not standardized between the internal
+ * issues analytics api and the public issues api.
+ *
+ * @param {String} endpoint the api endpoint with global filters used to fetch issues data
+ *
+ * @returns {String} The endpoint formatted for the public api
+ */
+// eslint-disable-next-line import/prefer-default-export
+export const transformIssuesApiEndpoint = endpoint => {
+  const cleanEndpoint = removeParams([LABEL_FILTER_NAME, MILESTONE_FILTER_NAME], endpoint, true);
+  const labels = getParameterValues(LABEL_FILTER_NAME, endpoint);
+  const milestone = getParameterValues(MILESTONE_FILTER_NAME, endpoint);
+
+  return mergeUrlParams({ labels, milestone }, cleanEndpoint);
+};

ee/spec/frontend/issues_analytics/utils_spec.js

+import { transformIssuesApiEndpoint } from 'ee/issues_analytics/utils';
+import { TEST_HOST } from 'helpers/test_constants';
+
+const dirtyEndpoint = `${TEST_HOST}/issues?label_name[]=cool&label_name[]=beans&milestone_title=v4.0`;
+const cleanEndpoint = `${TEST_HOST}/issues?labels=cool%2Cbeans&milestone=v4.0`;
+
+describe('issues analytics utils', () => {
+  describe('transformIssuesApiEndpoint', () => {
+    it('replaces the params as expected', () => {
+      const endpoint = transformIssuesApiEndpoint(dirtyEndpoint);
+
+      expect(endpoint).toBe(cleanEndpoint);
+    });
+  });
+});