feat: ui.panel and ui.table initial support implementation (#88)

- Move logic to display an element into DashboardPlugin, so it can open
multiple panels
- Basic ui.table `on_row_double_press` functionality added
- Wire up jest/unit testing for JS code in the deephaven-plugins repo
- Added some examples

.gitignore

@@ -10,3 +10,6 @@ tsconfig.tsbuildinfo
 
 # Ignore any local tox virtualenvs
 .tox/
+
+.eslintcache
+.stylelintcache

__mocks__/mockTheme.js

@@ -0,0 +1 @@
+module.exports = 'mock-theme';

__mocks__/spectrumThemeDarkMock.js

@@ -0,0 +1,3 @@
+module.exports = {
+  'dh-spectrum-theme--dark': 'mock.dark',
+};

__mocks__/spectrumThemeLightMock.js

@@ -0,0 +1,3 @@
+module.exports = {
+  'dh-spectrum-theme--light': 'mock.light',
+};

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = api => {
+  const isTest = api.env('test');
+  return {
+    presets: ['@deephaven/babel-preset'],
+    babelrcRoots: ['.', 'plugins/*/src/js'],
+    ignore: [
+      !isTest ? /\.test.(tsx?|jsx?)$/ : false,
+      !isTest ? '**/__mocks__/*' : false,
+      '**/*.scss',
+    ].filter(Boolean),
+  };
+};

jest-runner-eslint.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  cliOptions: {
+    maxWarnings: 0,
+    cache: true,
+    cacheStrategy: 'content',
+  },
+};

jest.config.base.cjs

@@ -0,0 +1,34 @@
+const path = require('path');
+
+module.exports = {
+  transform: {
+    '^.+\\.(ts|tsx|js|jsx)$': ['babel-jest', { rootMode: 'upward' }],
+  },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@deephaven|monaco-editor|d3-interpolate|d3-color)/)',
+  ],
+  moduleNameMapper: {
+    'theme-([^/]+?)\\.css(\\?(?:inline|raw))?$': path.join(
+      __dirname,
+      './__mocks__/mockTheme.js'
+    ),
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      path.join(__dirname, './__mocks__/fileMock.js'),
+    '^fira$': 'identity-obj-proxy',
+    '^monaco-editor$': path.join(
+      __dirname,
+      'node_modules',
+      'monaco-editor/esm/vs/editor/editor.api.js'
+    ),
+    // Handle monaco worker files
+    '\\.worker.*$': 'identity-obj-proxy',
+    // All packages use src/js/src code
+    '^@deephaven/js-plugin-(.*)$': path.join(
+      __dirname,
+      './plugins/$1/src/js/src'
+    ),
+  },
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: [path.join(__dirname, './jest.setup.ts')],
+};

jest.config.cjs

@@ -0,0 +1,16 @@
+const baseConfig = require('./jest.config.base.cjs');
+const unitConfig = require('./jest.config.unit.cjs');
+const lintConfig = require('./jest.config.lint.cjs');
+
+module.exports = {
+  ...baseConfig,
+  projects: [...lintConfig.projects, ...unitConfig.projects],
+  watchPlugins: [
+    ...lintConfig.watchPlugins,
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname',
+    'jest-watch-select-projects',
+  ],
+  collectCoverage: process.env.CI === 'true',
+  collectCoverageFrom: ['./src/**/*.{js,ts,jsx,tsx}'], // This is relative to individual project root due to how Jest handles it
+};

jest.config.lint.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  watchPlugins: ['jest-runner-eslint/watch-fix'],
+  projects: [
+    {
+      displayName: 'eslint',
+      runner: 'jest-runner-eslint',
+      testMatch: ['<rootDir>/plugins/*/src/js/src/**/*.{js,jsx,ts,tsx}'],
+      testEnvironment: 'node',
+    },
+    {
+      displayName: 'stylelint',
+      runner: 'jest-runner-stylelint',
+      testMatch: [
+        '<rootDir>/packages/*/src/js/src/**/*.scss',
+        '<rootDir>/packages/*/src/js/scss/**/*.scss',
+      ],
+      moduleFileExtensions: ['scss'],
+      testEnvironment: 'node',
+    },
+  ],
+};

jest.config.unit.cjs

@@ -0,0 +1,9 @@
+const baseConfig = require('./jest.config.base.cjs');
+
+module.exports = {
+  ...baseConfig,
+  projects: ['<rootDir>/plugins/*/src/js/jest.config.cjs'],
+  collectCoverage: process.env.CI === 'true',
+  collectCoverageFrom: ['./src/**/*.{js,ts,jsx,tsx}'], // This is relative to individual project root due to how Jest handles it
+  coverageDirectory: './coverage',
+};

jest.setup.ts

@@ -0,0 +1,26 @@
+import '@testing-library/jest-dom';
+import 'jest-canvas-mock';
+import Log from '@deephaven/log';
+
+let logLevel = parseInt(process.env.DH_LOG_LEVEL ?? '', 10);
+if (!Number.isFinite(logLevel)) {
+  logLevel = -1;
+}
+Log.setLogLevel(logLevel);
+
+// Define the matchMedia property so we can mock out monaco properly
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+// https://stackoverflow.com/questions/39830580/jest-test-fails-typeerror-window-matchmedia-is-not-a-function
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});