chore: move dashboard dev env + msw to separate packages for reuse

.github/workflows/validate.yml

@@ -59,7 +59,10 @@ jobs:
             core,
             core-util,
             dashboard,
+            data-mocked,
+            dev-env,
             doc-site,
+            helpers,
             react-components,
             scene-composer,
             source-iotsitewise,
@@ -110,7 +113,7 @@ jobs:
             ${{ runner.os }}-test-lint-${{ matrix.package}}-
 
       - name: Validate
-        run: npx turbo run build:cjs build:es lint test --filter=@iot-app-kit/${{ matrix.package }}
+        run: npx turbo build:cjs build:es lint test --filter=@iot-app-kit/${{ matrix.package }}
 
   playwright:
     needs: repo
@@ -121,10 +124,10 @@ jobs:
       matrix:
         package:
           [
-            { name: 'dashboard', shardIndex: 1, totalShards: 4 },
-            { name: 'dashboard', shardIndex: 2, totalShards: 4 },
-            { name: 'dashboard', shardIndex: 3, totalShards: 4 },
-            { name: 'dashboard', shardIndex: 4, totalShards: 4 },
+            { name: 'dev-env', shardIndex: 1, totalShards: 4 },
+            { name: 'dev-env', shardIndex: 2, totalShards: 4 },
+            { name: 'dev-env', shardIndex: 3, totalShards: 4 },
+            { name: 'dev-env', shardIndex: 4, totalShards: 4 },
             { name: 'react-components', totalShards: 1, shardIndex: 1 },
             { name: 'scene-composer', totalShards: 1, shardIndex: 1 },
           ]
@@ -186,7 +189,7 @@ jobs:
 
       - name: Playwright
         run: |
-          npx turbo run test:ui:ci --filter=@iot-app-kit/${{ matrix.package.name }} -- --shard=${{ matrix.package.shardIndex }}/${{ matrix.package.totalShards }}
+          npx turbo test:ui:ci --filter=@iot-app-kit/${{ matrix.package.name }} -- --shard=${{ matrix.package.shardIndex }}/${{ matrix.package.totalShards }}
 
       - name: Test report
         id: upload-test-report

apps/dev-env/.env.example

@@ -0,0 +1,16 @@
+VITE_AWS_ACCESS_KEY_ID=xxxxx
+VITE_AWS_SECRET_ACCESS_KEY=xxxxx
+VITE_AWS_SESSION_TOKEN=xxxxx
+VITE_AWS_REGION=xxxxx
+VITE_EDGE_GATEWAY_ENDPOINT=xxxxx
+
+STRING_ASSET_ID=xxxxx
+
+DEMO_TURBINE_ASSET_1=xxxxx
+DEMO_TURBINE_ASSET_1_PROPERTY_1=xxxxx
+DEMO_TURBINE_ASSET_1_PROPERTY_2=xxxxx
+DEMO_TURBINE_ASSET_1_PROPERTY_3=xxxxx
+DEMO_TURBINE_ASSET_1_PROPERTY_4=xxxxx
+
+AGGREGATED_DATA_PROPERTY=xxxxx
+AGGREGATED_DATA_PROPERTY_2=xxxxx

apps/dev-env/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+storybook-static

packages/dashboard/.storybook/main.ts → apps/dev-env/.storybook/main.ts

@@ -3,6 +3,8 @@ import type { StorybookConfig } from '@storybook/react-vite';
 const config = {
   stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
 
+  staticDirs: ['../public'],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

apps/dev-env/.storybook/preview.ts

@@ -0,0 +1,19 @@
+import { handlers } from '@iot-app-kit/data-mocked/handers';
+import { initialize, mswLoader } from 'msw-storybook-addon';
+
+initialize();
+
+export const parameters = {
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  msw: {
+    handlers,
+  },
+};
+
+export const loaders = [mswLoader];
+export const tags = ['autodocs'];

packages/dashboard/e2e/tests/configPanel/ConfigPanel.ts → apps/dev-env/e2e/dashboard/configPanel/ConfigPanel.ts

@@ -1,6 +1,8 @@
 import { type Locator, type Page } from '@playwright/test';
+
 const Y_LABEL_PLACEHOLDER_TEXT = 'Input Y-axis label';
 const CHECKBOX_LOCATOR = 'input[type=checkbox]';
+
 export class ConfigPanel {
   readonly page: Page;
   readonly container: Locator;

packages/dashboard/e2e/tests/resourceExplorer/resourceExplorer.spec.ts → apps/dev-env/e2e/dashboard/resourceExplorer/resourceExplorer.spec.ts

@@ -1,14 +1,13 @@
-import { test, expect } from '@playwright/test';
-import { gridUtil } from '../utils/grid';
+import { expect, test } from '@playwright/test';
 import {
   ASSET_MODEL_TAB,
   MODELED_TAB,
   TEST_PAGE,
   UNMODELED_TAB,
   WIDGET_EMPTY_STATE_TEXT,
 } from '../constants';
+import { gridUtil } from '../utils/grid';
 import { resourceExplorerUtil } from '../utils/resourceExplorer';
-import { componentAssetModelName } from '../../../src/msw/iot-sitewise/resources/assetModels';
 
 test('can load resource explorer', async ({ page }) => {
   await page.goto(TEST_PAGE);
@@ -317,8 +316,8 @@ test('filters COMPONENT_MODEL from asset model results', async ({ page }) => {
   await page.getByLabel('Asset model', { exact: true }).click();
   const searchBox = await page.getByPlaceholder('Filter asset models');
   await searchBox.click();
-  await searchBox.fill(componentAssetModelName);
+  await searchBox.fill('Component Asset Model');
 
   // check that composite model does not show up
-  await expect(page.getByText(componentAssetModelName)).not.toBeVisible();
+  await expect(page.getByText('Component Asset Model')).not.toBeVisible();
 });

packages/dashboard/e2e/tests/utils/dragAndDrop.ts → apps/dev-env/e2e/dashboard/utils/dragAndDrop.ts

@@ -1,6 +1,5 @@
 import { type Locator, type Page } from '@playwright/test';
 import zip from 'lodash/zip.js';
-import { isDefined } from '../../../src/util/isDefined';
 import { type BoundingBox, getBoundingBox } from './locator';
 import { center } from './mousePosition';
 
@@ -70,7 +69,9 @@ const subdivide = (points: Point[]) => {
   const midPointsOfPairs = pairPoints(points).map(midPointFromPair);
   // Interleave the original list with the mid points of the pair
   // Remove any undefined entries as the result of interleaving
-  return zip(points, midPointsOfPairs).flat().filter(isDefined);
+  return zip(points, midPointsOfPairs)
+    .flat()
+    .filter((p) => p != null);
 };
 
 /**

packages/dashboard/e2e/tests/utils/grid.ts → apps/dev-env/e2e/dashboard/utils/grid.ts

@@ -1,8 +1,7 @@
 import { type Locator, type Page } from '@playwright/test';
-
 import { type DragPosition, dragAndDrop } from './dragAndDrop';
-import { center } from './mousePosition';
 import { type BoundingBox, getBoundingBox } from './locator';
+import { center } from './mousePosition';
 
 export const GRID_SIZE = 10;
 

apps/dev-env/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@iot-app-kit/dev-env",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "npm run dev",
+    "clean": "rimraf storybook-static .turbo .cache test-results playwright-report",
+    "clean:nuke": "npm run clean && rimraf node_modules",
+    "dev": "storybook dev -p 6006",
+    "lint": "eslint . --max-warnings=0 --cache --cache-location .cache/eslint/ & tsc --noEmit",
+    "fix": "eslint --fix . --cache --cache-location ./cache/eslint/",
+    "test:ui": "npx playwright test",
+    "test:ui:ci": "npx playwright test",
+    "test:ui:watch": "npx playwright test --ui"
+  },
+  "dependencies": {
+    "@aws-sdk/client-iot-events": "^3.354.0",
+    "@aws-sdk/client-iotsitewise": "^3.696.0",
+    "@aws-sdk/client-iottwinmaker": "^3.354.0",
+    "@cloudscape-design/components": "3.0.693",
+    "@iot-app-kit/core": "*",
+    "@iot-app-kit/core-util": "*",
+    "@iot-app-kit/dashboard": "*",
+    "@iot-app-kit/data-mocked": "*",
+    "@iot-app-kit/helpers": "*",
+    "@iot-app-kit/ts-config": "*",
+    "@playwright/test": "^1.48.2",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/test": "^8.4.5",
+    "@types/node": "^18.16.18",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint-config-iot-app-kit": "*",
+    "lodash": "^4.17.21",
+    "msw-storybook-addon": "^2.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.46.1",
+    "rimraf": "^5.0.1",
+    "storybook": "^8.4.5",
+    "typescript": "^5.5.4",
+    "uuid": "^9.0.0",
+    "vite": "^5.4.11"
+  },
+  "msw": {
+    "workerDirectory": "public"
+  }
+}

packages/dashboard/playwright.config.ts → apps/dev-env/playwright.config.ts

@@ -1,8 +1,9 @@
+import {
+  MINUTE_IN_MS,
+  SECOND_IN_MS,
+} from '@iot-app-kit/helpers/constants/time';
 import { defineConfig, devices } from '@playwright/test';
 
-const SECOND_IN_MS = 1000;
-const MINUTE_IN_MS = 60 * SECOND_IN_MS;
-
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -18,7 +19,7 @@ export default defineConfig({
     toHaveScreenshot: { maxDiffPixels: 200, maxDiffPixelRatio: 0.05 },
   },
   timeout: 100 * SECOND_IN_MS,
-  globalTimeout: 15 * MINUTE_IN_MS,
+  globalTimeout: 10 * MINUTE_IN_MS,
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */