feat: improved data fetching for execution details page (#131)

* refactor: integrate react-query for execution data fetching (#123)

* refactor: using react-query to load top level Execution

* refactor: upgrading react-query and fixing execution termination

* refactor: handle 401s on queries and do auth flow

* refactor: adding conditional refresh for execution status

* refactor: cleanup broken files after context refactor

* chore: docs

* refactor: Remove ExecutionDataCache in favor of react-query (#126)

* refactor: first step of using queries for NE table

* refactor: removing data cache from first layer of NE table

* refactor: removing remaining execution data cache usage

* refactor: rename QueryKey type and remove bug workaround

* refactor: fixing remaining consumers of NEs

* test: adds setup for mock-service-worker (#127)

* test: add msw and basic handlers for a few types

* test: add mock data for a basic workflow execution

* test: fixing/removing tests after adding msw

* test: throw on unexpected requests to msw

* fix: upgrade TS to fix error and cleanup resulting errors

* Migrate from TSLint to ESLint (#128)

* ci: move from tslint->eslint

* fix: addressing eslint errors

* fix: remove passing of unused variable

* ci: remove unnecessary prettier config

* refactor: clean up mock fixtures and re-enable tests for executions (#130)

* test: adding test data for node executions

* test: mocks and refactoring to re-enable NodeExecutionDetails tests

* chore: lint error

* test: getting first test for NE table working again

* test: mocks and a couple of tests for NE table

* refactor: msw handlers to use a backing map and return 404s

* test: more tests for NE table

* test: adding fixture for dynamic external workflow

* test: using mock fixture for sub workflow tests

* test: move remaining mocks to fixtures and fix tests

* test: re-enabling more execution tests

* fix: removing global query handlers for caching entitiesq

* test: re-enable ExecutionNodeViews tests

* fix: typo in import path

* fix: show DataError by default for failed queries

* chore: documentation

* chore: pr feedback

* test: fixing storybook rendering for NE table

* refactor: queries and loading states for (Task)ExecutionDetails

* chore: cleanup unused code

* fix: adds mock support for launch plans

* test: update LoadingSpinner tests

* fix: handle error case for NE children

* chore: remove todo

* fix: typo

.eslintignore

@@ -0,0 +1,8 @@
+src/generated/
+.dist/
+dist/
+node_modules/
+.vscode/
+tsd/
+package.json
+webpack.config.ts

.eslintrc.js

@@ -1,13 +1,27 @@
-// We are using eslint with the typescript parser plugin only to validate things
-// which are not supported in tslint, such as react hooks
 module.exports = {
-    parser: '@typescript-eslint/parser',
-    parserOptions: {
-        jsx: true,
-        sourceType: 'module'
+    root: true,
+    env: {
+        browser: true,
+        es6: true,
+        node: true
     },
-    plugins: ['react-hooks'],
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint', 'react-hooks', 'jest'],
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react-hooks/recommended',
+        'plugin:jest/recommended',
+        'prettier',
+        'prettier/@typescript-eslint'
+    ],
     rules: {
-        'react-hooks/rules-of-hooks': 'error'
+        'no-case-declarations': 'warn',
+        'jest/no-mocks-import': 'off',
+        'jest/valid-title': 'off',
+        '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/ban-types': 'warn',
+        '@typescript-eslint/no-empty-function': 'warn',
+        '@typescript-eslint/explicit-module-boundary-types': 'off'
     }
 };

.storybook/StorybookContainer.tsx

@@ -2,7 +2,9 @@ import { CssBaseline } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import * as React from 'react';
+import { QueryClientProvider } from 'react-query';
 import { ErrorBoundary } from '../src/components/common';
+import { createQueryClient } from '../src/components/data/queryCache';
 import { muiTheme } from '../src/components/Theme/muiTheme';
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -12,11 +14,16 @@ const useStyles = makeStyles((theme: Theme) => ({
     }
 }));
 
-export const StorybookContainer: React.StatelessComponent = ({ children }) => (
-    <ThemeProvider theme={muiTheme}>
-        <CssBaseline />
-        <ErrorBoundary>
-            <div className={useStyles().container}>{children}</div>
-        </ErrorBoundary>
-    </ThemeProvider>
-);
+export const StorybookContainer: React.FC = ({ children }) => {
+    const [queryClient] = React.useState(() => createQueryClient());
+    return (
+        <ThemeProvider theme={muiTheme}>
+            <CssBaseline />
+            <ErrorBoundary>
+                <QueryClientProvider client={queryClient}>
+                <div className={useStyles().container}>{children}</div>
+                </QueryClientProvider>
+            </ErrorBoundary>
+        </ThemeProvider>
+    );
+};

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+    stories: ['../src/components/**/*.stories.tsx'],
+    addons: ['@storybook/addon-knobs']
+};

.storybook/preview.js

@@ -0,0 +1,22 @@
+import '../src/protobuf';
+import { withKnobs } from '@storybook/addon-knobs';
+import { addDecorator } from '@storybook/react';
+import * as React from 'react';
+import StoryRouter from 'storybook-react-router';
+import { StorybookContainer } from './StorybookContainer';
+
+addDecorator(withKnobs);
+addDecorator(StoryRouter());
+addDecorator(Story => <StorybookContainer><Story /></StorybookContainer>);
+
+// Storybook executes this module in both bootstap phase (Node)
+// and a story's runtime (browser). However, cannot call `setupWorker`
+// in Node environment, so need to check if we're in a browser.
+if (typeof global.process === 'undefined') {
+    const { worker } = require('./worker');
+
+    // Start the mocking when each story is loaded.
+    // Repetitive calls to the `.start()` method will check for an existing
+    // worker and reuse it.
+    worker.start();
+}

.storybook/public/mockServiceWorker.js

@@ -0,0 +1,241 @@
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+/* eslint-disable */
+/* tslint:disable */
+
+const INTEGRITY_CHECKSUM = '65d33ca82955e1c5928aed19d1bdf3f9'
+const bypassHeaderName = 'x-msw-bypass'
+
+let clients = {}
+
+self.addEventListener('install', function () {
+  return self.skipWaiting()
+})
+
+self.addEventListener('activate', async function (event) {
+  return self.clients.claim()
+})
+
+self.addEventListener('message', async function (event) {
+  const clientId = event.source.id
+  const client = await event.currentTarget.clients.get(clientId)
+  const allClients = await self.clients.matchAll()
+  const allClientIds = allClients.map((client) => client.id)
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: INTEGRITY_CHECKSUM,
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      clients = ensureKeys(allClientIds, clients)
+      clients[clientId] = true
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: true,
+      })
+      break
+    }
+
+    case 'MOCK_DEACTIVATE': {
+      clients = ensureKeys(allClientIds, clients)
+      clients[clientId] = false
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+self.addEventListener('fetch', function (event) {
+  const { clientId, request } = event
+  const requestClone = request.clone()
+  const getOriginalResponse = () => fetch(requestClone)
+
+  // Bypass navigation requests.
+  if (request.mode === 'navigate') {
+    return
+  }
+
+  // Bypass mocking if the current client isn't present in the internal clients map
+  // (i.e. has the mocking disabled).
+  if (!clients[clientId]) {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+    return
+  }
+
+  event.respondWith(
+    new Promise(async (resolve, reject) => {
+      const client = await event.target.clients.get(clientId)
+
+      // Bypass mocking when the request client is not active.
+      if (!client) {
+        return resolve(getOriginalResponse())
+      }
+
+      // Bypass requests with the explicit bypass header
+      if (requestClone.headers.get(bypassHeaderName) === 'true') {
+        const modifiedHeaders = serializeHeaders(requestClone.headers)
+
+        // Remove the bypass header to comply with the CORS preflight check
+        delete modifiedHeaders[bypassHeaderName]
+
+        const originalRequest = new Request(requestClone, {
+          headers: new Headers(modifiedHeaders),
+        })
+
+        return resolve(fetch(originalRequest))
+      }
+
+      const reqHeaders = serializeHeaders(request.headers)
+      const body = await request.text()
+
+      const rawClientMessage = await sendToClient(client, {
+        type: 'REQUEST',
+        payload: {
+          url: request.url,
+          method: request.method,
+          headers: reqHeaders,
+          cache: request.cache,
+          mode: request.mode,
+          credentials: request.credentials,
+          destination: request.destination,
+          integrity: request.integrity,
+          redirect: request.redirect,
+          referrer: request.referrer,
+          referrerPolicy: request.referrerPolicy,
+          body,
+          bodyUsed: request.bodyUsed,
+          keepalive: request.keepalive,
+        },
+      })
+
+      const clientMessage = rawClientMessage
+
+      switch (clientMessage.type) {
+        case 'MOCK_SUCCESS': {
+          setTimeout(
+            resolve.bind(this, createResponse(clientMessage)),
+            clientMessage.payload.delay,
+          )
+          break
+        }
+
+        case 'MOCK_NOT_FOUND': {
+          return resolve(getOriginalResponse())
+        }
+
+        case 'NETWORK_ERROR': {
+          const { name, message } = clientMessage.payload
+          const networkError = new Error(message)
+          networkError.name = name
+
+          // Rejecting a request Promise emulates a network error.
+          return reject(networkError)
+        }
+
+        case 'INTERNAL_ERROR': {
+          const parsedBody = JSON.parse(clientMessage.payload.body)
+
+          console.error(
+            `\
+[MSW] Request handler function for "%s %s" has thrown the following exception:
+
+${parsedBody.errorType}: ${parsedBody.message}
+(see more detailed error stack trace in the mocked response body)
+
+This exception has been gracefully handled as a 500 response, however, it's strongly recommended to resolve this error.
+If you wish to mock an error response, please refer to this guide: https://mswjs.io/docs/recipes/mocking-error-responses\
+  `,
+            request.method,
+            request.url,
+          )
+
+          return resolve(createResponse(clientMessage))
+        }
+      }
+    }).catch((error) => {
+      console.error(
+        '[MSW] Failed to mock a "%s" request to "%s": %s',
+        request.method,
+        request.url,
+        error,
+      )
+    }),
+  )
+})
+
+function serializeHeaders(headers) {
+  const reqHeaders = {}
+  headers.forEach((value, name) => {
+    reqHeaders[name] = reqHeaders[name]
+      ? [].concat(reqHeaders[name]).concat(value)
+      : value
+  })
+  return reqHeaders
+}
+
+function sendToClient(client, message) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        reject(event.data.error)
+      } else {
+        resolve(event.data)
+      }
+    }
+
+    client.postMessage(JSON.stringify(message), [channel.port2])
+  })
+}
+
+function createResponse(clientMessage) {
+  return new Response(clientMessage.payload.body, {
+    ...clientMessage.payload,
+    headers: clientMessage.payload.headers,
+  })
+}
+
+function ensureKeys(keys, obj) {
+  return Object.keys(obj).reduce((acc, key) => {
+    if (keys.includes(key)) {
+      acc[key] = obj[key]
+    }
+
+    return acc
+  }, {})
+}

.storybook/worker.ts

@@ -0,0 +1,19 @@
+import { setupWorker, SetupWorkerApi } from 'msw';
+import { AdminServer, createAdminServer } from '../src/mocks/createAdminServer';
+import { basicPythonWorkflow } from '../src/mocks/data/fixtures/basicPythonWorkflow';
+import { dynamicExternalSubWorkflow } from '../src/mocks/data/fixtures/dynamicExternalSubworkflow';
+import { dynamicPythonNodeExecutionWorkflow } from '../src/mocks/data/fixtures/dynamicPythonWorkflow';
+import { oneFailedTaskWorkflow } from '../src/mocks/data/fixtures/oneFailedTaskWorkflow';
+import { insertFixture } from '../src/mocks/data/insertFixture';
+import { insertDefaultData } from '../src/mocks/insertDefaultData';
+
+const { handlers, server } = createAdminServer();
+export type MockServer = SetupWorkerApi & AdminServer;
+const worker: MockServer = { ...setupWorker(...handlers), ...server };
+insertDefaultData(worker);
+insertFixture(worker, basicPythonWorkflow.generate());
+insertFixture(worker, dynamicExternalSubWorkflow.generate());
+insertFixture(worker, dynamicPythonNodeExecutionWorkflow.generate());
+insertFixture(worker, oneFailedTaskWorkflow.generate());
+
+export { worker };