Update supportsAdvancedVisibility to check for v1.20

.github/PULL_REQUEST_TEMPLATE/pull_request_template.md → .github/pull_request_template.md

@@ -1,5 +1,3 @@
-## Description
-
 <!-- Add a brief description of your change here. -->
 
 - [] Does this change require a design review?

.github/workflows/playwright.yml

@@ -25,7 +25,6 @@ jobs:
         uses: ./.github/actions/checkout-and-setup
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps
-
       - name: Run Playwright tests
         run: pnpm run test:integration
       - uses: actions/upload-artifact@v3

.stylelintrc

@@ -32,15 +32,20 @@
     "custom-property-pattern": null,
     "declaration-block-no-redundant-longhand-properties": [
       true,
-      { "ignoreShorthands": ["border-radius"] }
+      {
+        "ignoreShorthands": ["border-radius"]
+      }
     ],
     "function-linear-gradient-no-nonstandard-direction": null,
     "keyframes-name-pattern": null,
+    "max-line-length": null,
     "no-descending-specificity": null,
     "selector-class-pattern": null,
     "selector-pseudo-class-no-unknown": [
       true,
-      { "ignorePseudoClasses": ["global"] }
+      {
+        "ignorePseudoClasses": ["global"]
+      }
     ],
     "value-keyword-case": null
   }

cypress/fixtures/cluster-with-mysql.json

@@ -0,0 +1,32 @@
+{
+  "supportedClients": {
+    "temporal-cli": "\u003c2.0.0",
+    "temporal-go": "\u003c2.0.0",
+    "temporal-java": "\u003c2.0.0",
+    "temporal-php": "\u003c2.0.0",
+    "temporal-server": "\u003c2.0.0",
+    "temporal-typescript": "\u003c2.0.0",
+    "temporal-ui": "\u003c3.0.0"
+  },
+  "serverVersion": "1.20.0",
+  "clusterId": "17235226-f862-4d2a-a809-898c52dc8ab4",
+  "versionInfo": {
+    "current": {
+      "version": "1.20.0",
+      "releaseTime": "2023-2-20T22:14:46Z",
+      "notes": ""
+    },
+    "recommended": {
+      "version": "1.20.0",
+      "releaseTime": "2023-2-20T22:14:46Z",
+      "notes": ""
+    },
+    "instructions": "",
+    "alerts": [],
+    "lastUpdateTime": "2022-11-09T22:29:04.612659335Z"
+  },
+  "clusterName": "active",
+  "historyShardCount": 4,
+  "persistenceStore": "mysql",
+  "visibilityStore": "mysql"
+}

cypress/integration/workflow-executions-with-new-search.spec.js

@@ -155,7 +155,7 @@ describe('Workflow Executions List With Search', () => {
       cy.get('#time-range-filter').click();
       cy.contains('15 minutes').click();
 
-      cy.url().should('contain', 'StartTime+BETWEEN');
+      cy.url().should('contain', 'StartTime+%3E');
       cy.get('[data-testid="workflow-count"]').should(
         'have.text',
         'Results 15 of 15 workflows',
@@ -167,7 +167,223 @@ describe('Workflow Executions List With Search', () => {
       cy.contains('3 hours').click();
       cy.contains('End Time').click();
 
-      cy.url().should('contain', 'CloseTime+BETWEEN');
+      cy.url().should('contain', 'CloseTime+%3E');
+      cy.get('[data-testid="workflow-count"]').should(
+        'have.text',
+        'Results 15 of 15 workflows',
+      );
+    });
+
+    describe('Workflow Filters with Navigation ', () => {
+      beforeEach(() => {
+        cy.interceptApi();
+
+        cy.intercept(
+          Cypress.env('VITE_API_HOST') +
+            `/api/v1/namespaces/default/workflows/*/runs/*/events/reverse*`,
+          { fixture: 'event-history-completed.json' },
+        ).as('event-history-api');
+
+        cy.intercept(
+          Cypress.env('VITE_API_HOST') +
+            `/api/v1/namespaces/default/workflows/${workflowId}/runs/${runId}?`,
+          { fixture: 'workflow-completed.json' },
+        ).as('workflow-api');
+      });
+
+      it('should keep single workflow filter after navigating away and back to workflow list', () => {
+        cy.get('[data-testid="execution-status-filter-button"]').click();
+        cy.get('[data-testid="Running"]').click();
+
+        cy.url().should(
+          'contain',
+          encodeURIComponent(`ExecutionStatus="Running"`),
+        );
+
+        cy.get('.workflow-summary-row').first().click();
+
+        cy.wait('@workflow-api');
+        cy.wait('@event-history-api');
+
+        cy.url().should('contain', '/history');
+        cy.get('[data-testid="back-to-workflows"]').click();
+
+        cy.url().should(
+          'contain',
+          encodeURIComponent(`ExecutionStatus="Running"`),
+        );
+        cy.get('[data-testid="workflow-count"]').should(
+          'have.text',
+          'Results 15 of 15 workflows',
+        );
+      });
+    });
+  });
+});
+
+describe('Workflow Executions List With Search using only MySql on 1.20', () => {
+  beforeEach(() => {
+    cy.interceptApi();
+    cy.intercept(Cypress.env('VITE_API_HOST') + '/api/v1/cluster*', {
+      fixture: 'cluster-with-mysql.json',
+    }).as('cluster-api-elasticsearch');
+
+    cy.visit('/namespaces/default/workflows');
+
+    cy.wait('@cluster-api-elasticsearch');
+    cy.wait('@namespaces-api');
+    cy.wait('@workflows-api');
+  });
+
+  it('should default to All for the time range', () => {
+    cy.get('#time-range-filter').should('have.value', '');
+  });
+
+  describe('Workflow Manual Search', () => {
+    it('should change url on manual search and update filters and show results count', () => {
+      cy.get('#manual-search').type('WorkflowType="ImportantWorkflowType"');
+      cy.get('[data-testid="manual-search-button"]').click();
+
+      const result = encodeURIComponent('WorkflowType="ImportantWorkflowType"');
+      cy.url().should('contain', result);
+
+      cy.get('[data-testid="workflow-type-filter-button"]').click();
+      cy.get('#workflowType').should('have.value', 'ImportantWorkflowType');
+
+      cy.get('[data-testid="workflow-count"]').should(
+        'have.text',
+        'Results 15 of 15 workflows',
+      );
+    });
+  });
+
+  describe('Workflow Filters', () => {
+    it('should send the correct query for Workflow Type, autocomplete manual search and be clearable', () => {
+      cy.get('[data-testid="workflow-type-filter-button"]').click();
+
+      cy.get('#workflowType').type('ImportantWorkflowType');
+
+      const result = encodeURIComponent('WorkflowType="ImportantWorkflowType"');
+      cy.url().should('contain', result);
+      cy.get('#manual-search').should(
+        'have.value',
+        'WorkflowType="ImportantWorkflowType"',
+      );
+
+      cy.get('[data-testid="workflow-count"]').should(
+        'have.text',
+        'Results 15 of 15 workflows',
+      );
+
+      cy.get(
+        '.px-2 > .input-container > [data-testid="clear-input"] > .icon-button',
+      ).click();
+
+      cy.url().should('not.contain', result);
+    });
+
+    it('should send the correct query for Workflow ID, autocomplete manual search and be clearable', () => {
+      cy.get('[data-testid="workflow-id-filter-button"]').click();
+
+      cy.get('#workflowId').type('002c98_Running');
+
+      const result = encodeURIComponent('WorkflowId="002c98_Running"');
+      cy.url().should('contain', result);
+      cy.get('#manual-search').should(
+        'have.value',
+        'WorkflowId="002c98_Running"',
+      );
+      cy.get('[data-testid="workflow-count"]').should(
+        'have.text',
+        'Results 15 of 15 workflows',
+      );
+
+      cy.get(
+        '.px-2 > .input-container > [data-testid="clear-input"] > .icon-button',
+      ).click();
+
+      cy.url().should('not.contain', result);
+    });
+
+    it('should change url on single Execution Status change', () => {
+      cy.get('[data-testid="execution-status-filter-button"]').click();
+      cy.get('[data-testid="Running"]').click();
+
+      const result = encodeURIComponent('ExecutionStatus="Running"');
+      cy.url().should('contain', result);
+      cy.get('#manual-search').should(
+        'have.value',
+        'ExecutionStatus="Running"',
+      );
+      cy.get('[data-testid="workflow-count"]').should(
+        'have.text',
+        'Results 15 of 15 workflows',
+      );
+    });
+
+    it('should change url on multiple Execution Status change', () => {
+      cy.get('[data-testid="execution-status-filter-button"]').click();
+      cy.get('[data-testid="Running"]').click();
+      cy.get('[data-testid="Failed"]').click();
+
+      const result =
+        '%28ExecutionStatus%3D%22Running%22+OR+ExecutionStatus%3D%22Failed%22%29';
+      cy.url().should('contain', result);
+      cy.get('#manual-search').should(
+        'have.value',
+        '(ExecutionStatus="Running" OR ExecutionStatus="Failed")',
+      );
+    });
+
+    it('should clear Execution Status on All', () => {
+      cy.get('[data-testid="execution-status-filter-button"]').click();
+      cy.get('[data-testid="Running"]').click();
+      cy.get('[data-testid="Failed"]').click();
+
+      const result =
+        '%28ExecutionStatus%3D%22Running%22+OR+ExecutionStatus%3D%22Failed%22%29';
+      cy.url().should('contain', result);
+
+      cy.get('[data-testid="All"]').click();
+      cy.url().should('contain.not', result);
+    });
+
+    it('should combine all three filters', () => {
+      cy.get('[data-testid="execution-status-filter-button"]').click();
+      cy.get('[data-testid="Running"]').click();
+
+      cy.get('[data-testid="workflow-id-filter-button"]').click();
+      cy.get('#workflowId').type('002c98_Running');
+
+      cy.get('[data-testid="workflow-type-filter-button"]').click();
+      cy.get('#workflowType').type('ImportantWorkflowType');
+
+      const result =
+        'ExecutionStatus%3D%22Running%22+AND+WorkflowId%3D%22002c98_Running%22+AND+WorkflowType%3D%22ImportantWorkflowType%22';
+      cy.url().should('contain', result);
+      cy.get('#manual-search').should(
+        'have.value',
+        'ExecutionStatus="Running" AND WorkflowId="002c98_Running" AND WorkflowType="ImportantWorkflowType"',
+      );
+    });
+
+    it('should send the correct query for StartTime', () => {
+      cy.get('#time-range-filter').click();
+      cy.contains('15 minutes').click();
+
+      cy.url().should('contain', 'StartTime+%3E');
+      cy.get('[data-testid="workflow-count"]').should(
+        'have.text',
+        'Results 15 of 15 workflows',
+      );
+    });
+
+    it('should send the correct query for CloseTime', () => {
+      cy.get('#time-range-filter').click();
+      cy.contains('3 hours').click();
+      cy.contains('End Time').click();
+
+      cy.url().should('contain', 'CloseTime+%3E');
       cy.get('[data-testid="workflow-count"]').should(
         'have.text',
         'Results 15 of 15 workflows',

playwright.config.ts

@@ -2,13 +2,13 @@ import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
   testDir: './tests',
-  timeout: 30 * 1000,
+  timeout: 5 * 1000,
   expect: {
     timeout: 5000,
   },
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 1 : 0,
   workers: process.env.CI ? 1 : undefined,
   reporter: [
     ['html'],
@@ -26,16 +26,6 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
-
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
   ],
   webServer: [
     {

src/lib/components/dropdown-menu.svelte

@@ -94,7 +94,7 @@
 <style lang="postcss">
   .dropdown-menu {
     @apply absolute z-50 mt-1 w-auto
-        rounded border border-gray-900 bg-white py-2 text-gray-900 shadow-md;
+      rounded border border-gray-900 bg-white py-2 text-gray-900 shadow-md;
   }
 
   .dropdown-menu.left {

src/lib/components/event/event-history-group-timeline.svelte

@@ -102,8 +102,9 @@
     <div
       bind:this={canvas}
       class="relative"
-      style="height: {blockHeight * eventGroups.length +
-        yBuffer}px; width: {width}px;"
+      style="height:
+            {blockHeight * eventGroups.length +
+            yBuffer}px; width: {width}px;"
     >
       <VirtualList
         items={eventGroups}
@@ -123,10 +124,12 @@
         } = getGroupProperties(item)}
         <div
           class="event-group"
-          style="top: {top +
-            blockHeight /
-              4}px; left: {left}px; width: {width}px; height: {height -
-            1}px; background: {color};"
+          style="top:
+                {top +
+                blockHeight /
+                4}px; left: {left}px; width: {width}px; height:
+                {height -
+                1}px; background: {color};"
         />
         <button
           class="absolute truncate border-r border-gray-900 pl-2 text-left text-sm font-medium hover:bg-blueGray-200"
@@ -153,8 +156,9 @@
       </VirtualList>
       <div
         class="absolute top-0 bg-blueGray-400"
-        style="height: {blockHeight * eventGroups.length +
-          yBuffer}px;left: {mouseX}px; width: 1px"
+        style="height:
+              {blockHeight * eventGroups.length +
+              yBuffer}px;left: {mouseX}px; width: 1px;"
       />
     </div>
   </div>

src/lib/components/event/event-history-timeline-container.svelte

@@ -102,7 +102,7 @@
           >
             <div
               class="mx-2 flex h-6 w-6 items-center rounded-full"
-              style="background: {type.color}"
+              style="background: {type.color};"
             >
               {#if eventGroupFilters.includes(type.option)}
                 <Icon name="checkmark" class="text-white" />