chore: Export demo updates

Author: michaeldowseza

jest.config.js

@@ -1,5 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: MIT-0
+
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',

package.json

@@ -1,7 +1,25 @@
 {
   "name": "@cloudscape-design/demos",
-  "private": true,
   "version": "3.0.0",
+  "scripts": {
+    "typecheck": "tsc",
+    "clean": "rm -rf lib",
+    "lint": "eslint --fix --ignore-path .gitignore --ext ts,tsx,js,jsx .",
+    "prepare": "husky install",
+    "generate-html": "cross-env THEME=$npm_config_theme node ./scripts/generate-html-files",
+    "webpack": "cross-env NODE_ENV=production webpack",
+    "build:theme": "cross-env THEME=$npm_config_theme npm run webpack && npm run generate-html",
+    "build": "npm run build:theme --theme=all",
+    "start": "npm run start:theme",
+    "start:theme": "cross-env NODE_ENV=development THEME=$npm_config_theme webpack-dev-server",
+    "serve": "node ./scripts/dev-server.js",
+    "jest": "node --experimental-vm-modules ./node_modules/.bin/jest ./test/**/*.test.ts",
+    "serve-test": "run-p -r serve jest",
+    "pretest": "npm-run-all -s clean lint typecheck build",
+    "test": "npm run test-no-build",
+    "test-no-build": "run-s test:*",
+    "test:default": "cross-env npm run serve-test"
+  },
   "devDependencies": {
     "@babel/core": "^7.18.13",
     "@babel/preset-env": "^7.18.10",
@@ -31,6 +49,7 @@
     "axe-core": "^4.4.3",
     "babel-loader": "^9.2.1",
     "copy-webpack-plugin": "^12.0.2",
+    "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
     "date-fns": "^4.1.0",
     "eslint": "^8.22.0",
@@ -59,22 +78,6 @@
     "webpack-dev-server": "^5.2.0",
     "zod": "^3.23.8"
   },
-  "scripts": {
-    "webpack": "NODE_ENV=production webpack",
-    "clean": "rm -rf lib",
-    "generate-html-files": "node ./scripts/generate-html-files",
-    "jest": "node --experimental-vm-modules ./node_modules/.bin/jest ./test/**/*.test.ts",
-    "build": "npm-run-all -s generate-html-files webpack",
-    "pretest": "npm-run-all -s clean lint typecheck build",
-    "typecheck": "tsc",
-    "start": "NODE_ENV=development webpack-dev-server",
-    "start-no-live-reload": "node ./scripts/dev-server.js",
-    "start:https": "webpack-dev-server --https --port=4443 --host=$(hostname)",
-    "test-no-build": "run-p -r start-no-live-reload jest",
-    "test": "npm run test-no-build",
-    "prepare": "husky install",
-    "lint": "eslint --fix --ignore-path .gitignore --ext ts,tsx,js,jsx ."
-  },
   "browserslist": [
     "last 3 Chrome major versions",
     "last 3 Firefox major versions",
@@ -91,5 +94,6 @@
     "package-lock.json": [
       "./scripts/clean-package-lock.js"
     ]
-  }
+  },
+  "private": true
 }

scripts/dev-server.js

@@ -1,11 +1,13 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: MIT-0
+import path from 'node:path';
 import express from 'express';
 import config from './config.js';
 
 const app = express();
+const defaultTheme = '';
 
-app.use(express.static(config.outputPath));
+app.use(express.static(`${path.join(config.outputPath, process.env.THEME ?? defaultTheme)}`));
 app.listen(config.devServerPort, () => {
-  console.log(`Local server listening at localhost:${config.devServerPort}`);
+  console.log(`Local server listening at http://localhost:${config.devServerPort}`);
 });

scripts/generate-html-files.js

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: MIT-0
 import path from 'node:path';
-import examplesList from '../examples-list.json' assert { type: 'json' };
+import examplesList from '../examples-list.json' with { type: 'json' };
 import { writeFileAsync } from './utils/fsAsync.js';
 import config from './config.js';
 

src/pages/commons/common-components.tsx

@@ -3,13 +3,16 @@
 import React, { forwardRef } from 'react';
 
 import AppLayout, { AppLayoutProps } from '@cloudscape-design/components/app-layout';
+import AppLayoutToolbar from '@cloudscape-design/components/app-layout-toolbar';
 import Badge from '@cloudscape-design/components/badge';
 import Box from '@cloudscape-design/components/box';
 import Button from '@cloudscape-design/components/button';
 import { I18nProvider } from '@cloudscape-design/components/i18n';
 import enMessages from '@cloudscape-design/components/i18n/messages/all.en.json';
 import SpaceBetween from '@cloudscape-design/components/space-between';
 
+import { isVisualRefresh } from '../../common/apply-mode';
+
 // backward compatibility
 export * from './index';
 
@@ -66,7 +69,7 @@ export const TableEmptyState = ({ resourceName }: { resourceName: string }) => (
 export const CustomAppLayout = forwardRef<AppLayoutProps.Ref, AppLayoutProps>(function CustomAppLayout(props, ref) {
   return (
     <I18nProvider locale="en" messages={[enMessages]}>
-      <AppLayout ref={ref} {...props} />
+      {isVisualRefresh ? <AppLayoutToolbar ref={ref} {...props} /> : <AppLayout ref={ref} {...props} />}
     </I18nProvider>
   );
 });

src/pages/configurable-dashboard/app.tsx

@@ -13,7 +13,9 @@ import { DashboardSideNavigation } from '../dashboard/components/side-navigation
 import Palette from './components/palette';
 import { Content } from './content';
 import { StoredWidgetPlacement } from './interfaces';
-import { getPaletteWidgets } from './widgets';
+import { allWidgets, getPaletteWidgets } from './widgets';
+
+const supportedWidgets = new Set(Object.keys(allWidgets));
 
 export function App() {
   const appLayoutRef = useRef<AppLayoutProps.Ref>(null);
@@ -25,6 +27,8 @@ export function App() {
     'ConfigurableDashboards-widgets-layout',
   );
   const [toolsContent, setToolsContent] = useState<React.ReactNode>(() => <DashboardMainInfo />);
+  // some deleted/unavailable widgets might be dangling in localStorage, therefore we need to filter them
+  const filteredLayout = layout?.filter(item => supportedWidgets.has(item.id));
 
   const loadHelpPanelContent = (content: React.ReactNode) => {
     setToolsOpen(true);
@@ -45,15 +49,15 @@ export function App() {
         notifications={<Notifications />}
         content={
           <Content
-            layout={layout ?? null}
+            layout={filteredLayout ?? null}
             setLayout={setLayout}
             resetLayout={resetLayout}
             setSplitPanelOpen={setSplitPanelOpen}
           />
         }
         splitPanel={
           <SplitPanel header="Add widgets" closeBehavior="hide" hidePreferencesButton={true}>
-            <Palette items={getPaletteWidgets(layout ?? [])} />
+            <Palette items={getPaletteWidgets(filteredLayout ?? [])} />
           </SplitPanel>
         }
         splitPanelPreferences={{ position: 'side' }}

src/pages/configurable-dashboard/widgets.ts

@@ -3,7 +3,6 @@
 import { BoardProps } from '@cloudscape-design/board-components/board';
 
 import {
-  accountAttributes,
   alarms,
   events,
   featuresSpotlight,
@@ -22,7 +21,6 @@ export type { DashboardWidgetItem };
 export { PaletteItem } from './components/palette-item';
 
 export const allWidgets: Record<string, WidgetConfig> = {
-  accountAttributes,
   alarms,
   serviceOverview,
   featuresSpotlight,
@@ -45,7 +43,6 @@ const defaultLayout: ReadonlyArray<StoredWidgetPlacement> = [
   { id: 'events' },
   { id: 'zoneStatus' },
   { id: 'featuresSpotlight' },
-  { id: 'accountAttributes' },
 ];
 
 function merge<T extends { id: string }>(
@@ -71,7 +68,6 @@ export function getDefaultLayout(width: number) {
       { id: 'zoneStatus', columnOffset: { '6': 2 } },
       { id: 'events', columnOffset: { '6': 0 } },
       { id: 'featuresSpotlight', columnOffset: { '6': 4 }, columnSpan: 2, rowSpan: 4 },
-      { id: 'accountAttributes', columnOffset: { '6': 2 }, columnSpan: 2, rowSpan: 2 },
     ]);
   }
   if (width > 1045) {
@@ -92,7 +88,6 @@ export function getDefaultLayout(width: number) {
       { id: 'serviceHealth', columnSpan: 2 },
       { id: 'instanceHours', columnSpan: 1 },
       { id: 'networkTraffic', columnSpan: 1 },
-      { id: 'accountAttributes', rowSpan: 2 },
     ]);
   }
   if (width > 687) {

src/pages/dashboard/components/content.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 import Grid from '@cloudscape-design/components/grid';
 
 import {
-  accountAttributes,
   alarms,
   BaseStaticWidget,
   events,
@@ -44,7 +43,6 @@ export function Content() {
         events,
         zoneStatus,
         featuresSpotlight,
-        accountAttributes,
       ].map((widget, index) => (
         <BaseStaticWidget key={index} config={widget.data} />
       ))}

src/pages/dashboard/widgets/index.ts

@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: MIT-0
 export { BaseStaticWidget } from './base-static-widget';
-export { accountAttributes } from './account-attributes';
 export { alarms } from './alarms';
 export { events } from './events';
 export { featuresSpotlight } from './features-spotlight';

test/e2e/common/base-example-page.ts

@@ -13,7 +13,7 @@ export default class BaseExamplePage extends BasePageObject {
    */
   public async scrollIntoViewAndClick(selector: string) {
     const element = await this.browser.$(selector);
-    await element.scrollIntoView();
+    await element.scrollIntoView({ block: 'center' });
     await element.click();
   }
 }