Merge branch 'transform-issues-analytics-labels-filters' into 'master'

Transform issues analytics filter params

See merge request gitlab-org/gitlab!33709

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);
+    });
+  });
+});