chore: Export demo updates (#186)

src/common/apply-mode.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT-0
 import { applyDensity, Density, disableMotion } from '@cloudscape-design/global-styles';
 
-import * as localStorage from './localStorage';
+import * as localStorage from './local-storage';
 
 import '@cloudscape-design/global-styles/index.css';
 

src/pages/chat/messages.tsx

@@ -61,7 +61,9 @@ export default function Messages({ messages = [] }: { messages: Array<Message> }
                     readOnly
                     items={message.files.map(file => ({ file }))}
                     limit={3}
-                    onDismiss={() => {}}
+                    onDismiss={() => {
+                      /* empty function for read only token */
+                    }}
                     alignment="horizontal"
                     showFileThumbnail={true}
                     i18nStrings={fileTokenGroupI18nStrings}

src/pages/commons/use-column-widths.ts

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 
 import { TableProps } from '@cloudscape-design/components/table';
 
-import { addToColumnDefinitions, mapWithColumnDefinitionIds } from '../../common/columnDefinitionsHelper';
+import { addToColumnDefinitions, mapWithColumnDefinitionIds } from '../../common/column-definitions-helper';
 import { useLocalStorage } from './use-local-storage';
 
 export function useColumnWidths<T>(storageKey: string, columnDefinitions: TableProps.ColumnDefinition<T>[]) {

src/pages/commons/use-local-storage.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT-0
 import { useCallback, useState } from 'react';
 
-import { load, remove, save } from '../../common/localStorage';
+import { load, remove, save } from '../../common/local-storage';
 
 export function useLocalStorage<T>(key: string, defaultValue?: T) {
   const [value, setValue] = useState<T | undefined>(() => load<T>(key) ?? defaultValue);

src/pages/configurable-dashboard/components/page-banner.tsx

@@ -1,5 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: MIT-0
+
 export function PageBanner() {
+  // noop in this design
   return null;
 }

src/pages/form/components/distribution-panel.tsx

@@ -130,7 +130,7 @@ export default function DistributionPanel({
       return;
     }
 
-    setErrors({ [attribute]: [errorText] });
+    setErrors({ [attribute]: errorText });
   };
 
   return (

src/pages/table-editable/root.tsx

@@ -104,7 +104,10 @@ function TableContent({ loadHelpPanelContent, distributions }: TableContentProps
 
   useEffect(() => {
     // Demonstrates an initial fetching of the data from the backend.
-    setTimeout(() => setLoading(false), 500);
+    setTimeout(() => {
+      setLoading(false);
+      setLastRefresh(new Date());
+    }, 500);
   }, []);
 
   const handleSubmit = async (
@@ -188,7 +191,7 @@ function TableContent({ loadHelpPanelContent, distributions }: TableContentProps
         />
       }
       pagination={<Pagination {...tablePaginationProps} disabled={submitting} />}
-      preferences={<Preferences preferences={preferences} setPreferences={setPreferences} />}
+      preferences={<Preferences preferences={preferences} setPreferences={setPreferences} disabled={submitting} />}
     />
   );
 }

src/pages/table-expandable/table-configs.tsx

@@ -202,7 +202,7 @@ export function TablePreferences({
       preferences={preferences}
       contentDisplayPreference={{
         title: 'Column preferences',
-        description: 'Customize the columns visibility and order.',
+        description: 'Customize the visibility and order of the columns.',
         options: [
           {
             id: 'name',

src/styles/chat.scss

@@ -18,7 +18,7 @@
 
   &.classic {
     inline-size: 100%;
-    block-size: 1100px;
+    block-size: 1000px;
   }
 }
 

test/e2e/form-validation.test.ts

@@ -244,4 +244,25 @@ describe('Form validation example', () => {
       await expect(page.isRootInputFocused()).resolves.toBe(true);
     })
   );
+
+  test(
+    'Shows error message on blur',
+    setupTest(async page => {
+      // Blur when empty
+      await page.enterAndBlurRootObject();
+      await expect(page.getDistributionPanelErrorMessages()).resolves.toEqual(
+        expect.arrayContaining(['Root object is required.'])
+      );
+
+      // Blur with invalid input
+      await page.enterAndBlurRootObject('https://example');
+      await expect(page.getDistributionPanelErrorMessages()).resolves.toEqual(
+        expect.arrayContaining(['Enter a valid root object URL. Example: https://example.com'])
+      );
+
+      // Blur with valid input
+      await page.enterAndBlurRootObject('.com');
+      await expect(page.getDistributionPanelErrorMessages()).resolves.toEqual([]);
+    })
+  );
 });

test/e2e/page/form-template-page-object.ts

@@ -69,4 +69,14 @@ export default class Page extends FormPage {
   isExpandableSectionVisible(index: number) {
     return this.isDisplayed(expandableSectionItems(index));
   }
+  async enterAndBlurRootObject(text?: string) {
+    await this.waitForVisible(rootInput);
+    if (text) {
+      await this.setValue(rootInput, text);
+    } else {
+      await this.click(rootInput);
+    }
+    // click somewhere to blur the input and trigger validation
+    await this.click(createWrapper().findHeader().toSelector());
+  }
 }

test/e2e/page/table-page-object.ts

@@ -82,10 +82,11 @@ export default class TablePageObject extends AppLayoutPage {
   }
 
   async waitUntilLoaded() {
-    // wait out onDelayedInput handler
-    await this.pause(200);
-    // wait for table content to be loaded
-    await this.waitForVisible(this.tableWrapper.findLoadingText().toSelector(), false);
+    await this.pause(1000);
+
+    if (await this.isDisplayed(this.tableWrapper.findLoadingText().toSelector())) {
+      throw new Error('Loading text is still displayed');
+    }
   }
 
   async reload() {

test/e2e/table-editable.test.ts

@@ -54,9 +54,11 @@ describe('Table - Inline Editing', () => {
   test(
     'Can manually refresh table data',
     setupTest(async page => {
+      await page.waitForVisible(page.lastRefresh());
+      await expect(page.getText(page.lastRefresh())).resolves.toContain('Last updated');
       await page.click(page.refreshButton());
       await page.waitForVisible(page.lastRefresh());
-      await page.waitForAssertion(() => expect(page.getText(page.lastRefresh())).resolves.toContain('Last updated'));
+      await expect(page.getText(page.lastRefresh())).resolves.toContain('Last updated');
     })
   );
 });