Fix/workflow advanced query (#259)

* fix bug where query string is not being cleared properly when switching from advanced to basic

* when refreshing the page it should retain the state of basic or advanced query.

* removing unused variable. only use queryString for advanced API. clear state toggling between. fixed trim input issue.

* ensure advance query uses list API

* fix lint

* updating integration test with testcase for advanced screen

* fixing lint

* added filter mode query param to keep track of screen when refreshing. No longer clearing queryString.

* fixing lint

* fixing integration test

* fixing lint

Author: just-at-uber

client/routes/domain/workflow-list.vue

@@ -36,7 +36,6 @@ export default {
       loading: false,
       results: [],
       error: undefined,
-      nextPageToken: undefined,
       npt: undefined,
       nptAlt: undefined,
       statuses: [
@@ -51,7 +50,6 @@ export default {
         { value: 'TIMED_OUT', label: 'Timed Out' },
       ],
       maxRetentionDays: undefined,
-      filterMode: 'basic',
     };
   },
   async created() {
@@ -72,9 +70,9 @@ export default {
   },
   computed: {
     fetchUrl() {
-      const { domain, queryString, state } = this;
+      const { domain, filterMode, state } = this;
 
-      if (queryString) {
+      if (filterMode === 'advanced') {
         return `/api/domains/${domain}/workflows/list`;
       }
 
@@ -90,6 +88,9 @@ export default {
         ? 'StartTime'
         : 'CloseTime';
     },
+    filterMode() {
+      return this.$route.query.filterMode || 'basic';
+    },
     formattedResults() {
       const { dateFormat, results, timeFormat, timezone } = this;
 
@@ -174,6 +175,7 @@ export default {
     criteria() {
       const {
         endTime,
+        filterMode,
         queryString,
         startTime,
         statusName: status,
@@ -185,19 +187,24 @@ export default {
         return null;
       }
 
+      if (filterMode === 'advanced') {
+        return {
+          queryString: queryString.trim(),
+        };
+      }
+
       const criteria = {
         startTime,
         endTime,
         status,
-        ...(queryString && { queryString }),
-        ...(workflowId && { workflowId }),
-        ...(workflowName && { workflowName }),
+        ...(workflowId && { workflowId: workflowId.trim() }),
+        ...(workflowName && { workflowName: workflowName.trim() }),
       };
 
       return criteria;
     },
     queryString() {
-      return this.$route.query.queryString;
+      return this.$route.query.queryString || '';
     },
     minStartDate() {
       return this.getMinStartDate();
@@ -210,6 +217,13 @@ export default {
     },
   },
   methods: {
+    clearState() {
+      this.error = undefined;
+      this.loading = false;
+      this.npt = undefined;
+      this.nptAlt = undefined;
+      this.results = [];
+    },
     async fetch(url, queryWithStatus) {
       let workflows = [];
       let nextPageToken = '';
@@ -271,9 +285,15 @@ export default {
         return;
       }
 
+      if (this.filterMode === 'advanced' && !this.criteria.queryString) {
+        this.clearState();
+
+        return;
+      }
+
       let workflows = [];
 
-      if (this.state !== 'all') {
+      if (this.state !== 'all' || this.filterMode === 'advanced') {
         const query = { ...this.criteria, nextPageToken: this.npt };
 
         if (query.queryString) {
@@ -330,9 +350,7 @@ export default {
     },
     refreshWorkflows: debounce(
       function refreshWorkflows() {
-        this.results = [];
-        this.npt = undefined;
-        this.nptAlt = undefined;
+        this.clearState();
         this.fetchWorkflows();
       },
       typeof Mocha === 'undefined' ? 200 : 60,
@@ -341,10 +359,7 @@ export default {
     setWorkflowFilter(e) {
       const target = e.target || e.testTarget; // test hook since Event.target is readOnly and unsettable
 
-      this.$router.replaceQueryParam(
-        target.getAttribute('name'),
-        target.value.trim()
-      );
+      this.$router.replaceQueryParam(target.getAttribute('name'), target.value);
     },
     setStatus(status) {
       if (status) {
@@ -428,12 +443,12 @@ export default {
       return query;
     },
     toggleFilter() {
-      if (this.filterMode === 'advanced') {
-        this.filterMode = 'basic';
-        this.$route.query.queryString = '';
-      } else {
-        this.filterMode = 'advanced';
-      }
+      const { query } = this.$route;
+
+      this.clearState();
+      const filterMode = this.filterMode === 'advanced' ? 'basic' : 'advanced';
+
+      this.$router.replace({ query: { ...query, filterMode } });
     },
     onWorkflowGridScroll(startIndex, endIndex) {
       if (!this.npt && !this.nptAlt) {

client/test/fixtures.js

@@ -76,6 +76,23 @@ export default {
           .toISOString(),
       },
     ],
+    list: [
+      {
+        execution: {
+          workflowId: 'email-daily-summaries',
+          runId: '51ccc0d1-6ffe-4a7a-a89f-6b5154df86f7',
+        },
+        type: {
+          name: 'github.com/uber/cadence-web/email-daily-summaries-1',
+        },
+        closeStatus: 'COMPLETED',
+        startTime: emailRun1Start.toISOString(),
+        closeTime: moment(timeBasis)
+          .subtract(2, 'minutes')
+          .subtract(1, 'day')
+          .toISOString(),
+      },
+    ],
   },
   history: {
     emailRun1: [

client/test/scenario.js

@@ -250,17 +250,22 @@ Scenario.prototype.withWorkflows = function withWorkflows({
   }
 
   const startTimeDays = startTimeOffset || status === 'open' ? 30 : 21;
-  const url = `/api/domains/${this.domain}/workflows/${status}?${qs.stringify({
-    startTime: moment()
-      .subtract(startTimeDays, 'day')
-      .startOf('day')
-      .toISOString(),
-    endTime: moment()
-      .endOf('day')
-      .toISOString(),
-    ...query,
-  })}`;
-
+  const baseUrl = `/api/domains/${this.domain}/workflows/${status}`;
+  const queryString = qs.stringify(
+    status === 'list'
+      ? query
+      : {
+          startTime: moment()
+            .subtract(startTimeDays, 'day')
+            .startOf('day')
+            .toISOString(),
+          endTime: moment()
+            .endOf('day')
+            .toISOString(),
+          ...query,
+        }
+  );
+  const url = `${baseUrl}?${queryString}`;
   const response = Array.isArray(workflows)
     ? { executions: workflows, nextPageToken: '' }
     : workflows;

client/test/workflow-list.test.js

@@ -357,4 +357,29 @@ describe('Workflow list', () => {
       .querySelector('header.filters .status .selected-tag')
       .should.have.trimmed.text('Failed');
   });
+
+  it('should call list API when filterMode = advanced and queryString query params are set', async function test() {
+    const [testEl] = new Scenario(this.test)
+      .withDomain('ci-test')
+      .startingAt(
+        '/domains/ci-test/workflows?status=FAILED&queryString=demo&filterMode=advanced'
+      )
+      .withNewsFeed()
+      .withWorkflows({
+        status: 'list',
+        query: {
+          queryString: 'demo',
+        },
+      })
+      .withDomainDescription('ci-test')
+      .go();
+
+    const workflowsEl = await testEl.waitUntilExists(
+      'section.workflow-list.ready'
+    );
+
+    workflowsEl
+      .querySelector('header.filters input[name="queryString"]')
+      .value.should.equal('demo');
+  });
 });