feat: expand children in resource explorer

docs/ResourceExplorer.md

@@ -256,3 +256,9 @@ The `empty` object contains the following fields:
 
 Type: Boolean
 
+### `expanded`
+
+(Optional) If set to `true` will expand all children. Defaults to the value `false`.
+
+Type: Boolean
+

packages/components/package.json

@@ -56,6 +56,7 @@
     "@types/cypress-image-snapshot": "^3.1.6",
     "@types/react": ">=16.9.0",
     "@types/react-dom": ">=16.9.0",
+    "@types/uuid": "^8.3.4",
     "@vue/cli-plugin-typescript": "^4.5.15",
     "@vue/cli-service": "^4.5.15",
     "@vue/compiler-dom": "^3.2.26",
@@ -64,6 +65,7 @@
     "cypress-wait-until": "^1.7.2",
     "jest": "26.3.0",
     "jest-cli": "^26.5.1",
+    "uuid": "^8.3.2",
     "vue": "^3.2.26"
   },
   "license": "Apache-2.0"

packages/components/src/components.d.ts

@@ -43,6 +43,7 @@ export namespace Components {
     interface IotResourceExplorer {
         "columnDefinitions": ColumnDefinition<any>[];
         "empty"?: EmptyStateProps;
+        "expanded"?: boolean;
         "filterEnabled": boolean;
         "filterTexts"?: FilterTexts;
         "loadingText"?: string;
@@ -106,6 +107,7 @@ export namespace Components {
         "collectionOptions": UseTreeCollection<unknown>;
         "columnDefinitions": TableProps.ColumnDefinition<any>[];
         "empty": EmptyStateProps;
+        "expanded": boolean;
         "filterPlaceholder": string;
         "isItemDisabled": (item: unknown) => boolean;
         "items": unknown[];
@@ -266,6 +268,7 @@ declare namespace LocalJSX {
     interface IotResourceExplorer {
         "columnDefinitions"?: ColumnDefinition<any>[];
         "empty"?: EmptyStateProps;
+        "expanded"?: boolean;
         "filterEnabled"?: boolean;
         "filterTexts"?: FilterTexts;
         "loadingText"?: string;
@@ -329,6 +332,7 @@ declare namespace LocalJSX {
         "collectionOptions": UseTreeCollection<unknown>;
         "columnDefinitions": TableProps.ColumnDefinition<any>[];
         "empty"?: EmptyStateProps;
+        "expanded"?: boolean;
         "filterPlaceholder"?: string;
         "isItemDisabled"?: (item: unknown) => boolean;
         "items": unknown[];

packages/components/src/components/iot-bar-chart/iot-bar-chart.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop, h, Listen, State, Watch } from '@stencil/core';
-import uuid from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 import { Annotations, DataStream as SynchroChartsDataStream } from '@synchro-charts/core';
 import {
   TimeSeriesDataRequestSettings,
@@ -28,7 +28,7 @@ export class IotBarChart {
 
   @Prop() settings: TimeSeriesDataRequestSettings = {};
 
-  @Prop() widgetId: string = uuid.v4();
+  @Prop() widgetId: string = uuidv4();
 
   @Prop() isEditing: boolean | undefined;
 

packages/components/src/components/iot-kpi/iot-kpi.tsx

@@ -10,7 +10,7 @@ import {
   TimeSeriesDataRequest,
   ProviderWithViewport,
 } from '@iot-app-kit/core';
-import uuid from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 @Component({
   tag: 'iot-kpi',
@@ -25,7 +25,7 @@ export class IotKpi {
 
   @Prop() settings: TimeSeriesDataRequestSettings = {};
 
-  @Prop() widgetId: string = uuid.v4();
+  @Prop() widgetId: string = uuidv4();
 
   @Prop() isEditing: boolean | undefined;
 

packages/components/src/components/iot-line-chart/iot-line-chart.tsx

@@ -10,7 +10,7 @@ import {
   Viewport,
   ProviderWithViewport,
 } from '@iot-app-kit/core';
-import uuid from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 @Component({
   tag: 'iot-line-chart',
@@ -25,7 +25,7 @@ export class IotLineChart {
 
   @Prop() settings: TimeSeriesDataRequestSettings = {};
 
-  @Prop() widgetId: string = uuid.v4();
+  @Prop() widgetId: string = uuidv4();
 
   @Prop() isEditing: boolean | undefined;
 

packages/components/src/components/iot-resource-explorer/iot-resource-explorer.tsx

@@ -1,12 +1,12 @@
-import { Component, h, Prop, State } from '@stencil/core';
+import { Component, h, Prop, State, Watch } from '@stencil/core';
 import { ErrorDetails, TreeProvider, TreeQuery } from '@iot-app-kit/core';
 import { BranchReference, SiteWiseAssetTreeNode } from '@iot-app-kit/source-iotsitewise';
 import { SiteWiseAssetResource, FilterTexts, ColumnDefinition } from './types';
 import { EmptyStateProps, ITreeNode, UseTreeCollection } from '@iot-app-kit/related-table';
 import { parseSitewiseAssetTree } from './utils';
 import { TableProps } from '@awsui/components-react/table';
 import { NonCancelableCustomEvent } from '@awsui/components-react';
-import uuid from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 const DEFAULT_COLUMNS: ColumnDefinition<SiteWiseAssetResource>[] = [
   {
@@ -49,11 +49,13 @@ export class IotResourceExplorer {
   @Prop() sortingEnabled = true;
   @Prop() paginationEnabled = true;
   @Prop() wrapLines = false;
-  @Prop() widgetId: string = uuid.v4();
+  @Prop() widgetId: string = uuidv4();
   @Prop() onSelectionChange: (event: NonCancelableCustomEvent<TableProps.SelectionChangeDetail<unknown>>) => void;
+  @Prop() expanded?: boolean = false;
 
   @State() provider: TreeProvider<SiteWiseAssetTreeNode[], BranchReference>;
   @State() items: SiteWiseAssetResource[] = [];
+  @State() expandedItems: { [id: string]: boolean } = {};
 
   @State() errors: ErrorDetails[] = [];
 
@@ -97,6 +99,25 @@ export class IotResourceExplorer {
     });
   };
 
+  @Watch('items')
+  watchItems(newItems: ITreeNode<SiteWiseAssetResource>[]) {
+    if (this.expanded) {
+      const newExpandedItems: { [id: string]: boolean } = {};
+
+      newItems.forEach(({ id, hierarchies, hasChildren }) => {
+        if (!this.expandedItems[id] && hasChildren) {
+          hierarchies?.forEach((hierarchy) => {
+            this.provider.expand(new BranchReference(id, hierarchy.id as string));
+          });
+
+          newExpandedItems[id] = true;
+        }
+      });
+
+      this.expandedItems = { ...this.expandedItems, ...newExpandedItems };
+    }
+  }
+
   render() {
     const filtering = this.filterEnabled ? this.filterTexts || this.defaults.filterText : undefined;
     const collectionOptions: UseTreeCollection<unknown> = {
@@ -144,6 +165,7 @@ export class IotResourceExplorer {
         empty={empty}
         sortingDisabled={!this.sortingEnabled}
         wrapLines={this.wrapLines}
+        expanded={this.expanded}
       ></iot-tree-table>
     );
   }

packages/components/src/components/iot-resource-explorer/iot-tree-table.tsx

@@ -24,6 +24,7 @@ export class IotTreeTable {
   @Prop() items!: unknown[];
   @Prop() columnDefinitions!: TableProps.ColumnDefinition<any>[];
   @Prop() collectionOptions!: UseTreeCollection<unknown>;
+  @Prop() expanded: boolean;
 
   @Prop() loading: boolean;
   @Prop() loadingText: string;
@@ -51,6 +52,7 @@ export class IotTreeTable {
       items: this.items,
       columnDefinitions: this.columnDefinitions,
       collectionOptions: this.collectionOptions,
+      expanded: this.expanded,
 
       loading: this.loading,
       loadingText: this.loadingText,

packages/components/src/components/iot-scatter-chart/iot-scatter-chart.tsx

@@ -10,7 +10,7 @@ import {
   ProviderWithViewport,
   combineProviders,
 } from '@iot-app-kit/core';
-import uuid from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 @Component({
   tag: 'iot-scatter-chart',
@@ -25,7 +25,7 @@ export class IotScatterChart {
 
   @Prop() settings: TimeSeriesDataRequestSettings = {};
 
-  @Prop() widgetId: string = uuid.v4();
+  @Prop() widgetId: string = uuidv4();
 
   @Prop() isEditing: boolean | undefined;
 

packages/components/src/components/iot-status-grid/iot-status-grid.tsx

@@ -10,7 +10,7 @@ import {
   ProviderWithViewport,
   combineProviders,
 } from '@iot-app-kit/core';
-import uuid from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 @Component({
   tag: 'iot-status-grid',
@@ -25,7 +25,7 @@ export class IotStatusGrid {
 
   @Prop() settings: TimeSeriesDataRequestSettings = {};
 
-  @Prop() widgetId: string = uuid.v4();
+  @Prop() widgetId: string = uuidv4();
 
   @Prop() isEditing: boolean | undefined;
 

packages/components/src/components/iot-status-timeline/iot-status-timeline.tsx

@@ -10,7 +10,7 @@ import {
   ProviderWithViewport,
   combineProviders,
 } from '@iot-app-kit/core';
-import uuid from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 @Component({
   tag: 'iot-status-timeline',
@@ -25,7 +25,7 @@ export class IotStatusTimeline {
 
   @Prop() settings: TimeSeriesDataRequestSettings = {};
 
-  @Prop() widgetId: string = uuid.v4();
+  @Prop() widgetId: string = uuidv4();
 
   @Prop() isEditing: boolean | undefined;
 

packages/components/src/components/iot-table/iot-table.tsx

@@ -10,7 +10,7 @@ import {
   TimeSeriesDataRequest,
   ProviderWithViewport,
 } from '@iot-app-kit/core';
-import uuid from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 @Component({
   tag: 'iot-table',
@@ -27,7 +27,7 @@ export class IotTable {
 
   @Prop() settings: TimeSeriesDataRequestSettings = {};
 
-  @Prop() widgetId: string = uuid.v4();
+  @Prop() widgetId: string = uuidv4();
 
   @Prop() styleSettings: StyleSettingsMap | undefined;
 

packages/components/src/integration/iot-resource-explorer/iot-resource-explorer.spec.component.ts

@@ -54,3 +54,10 @@ it('expand row', () => {
   cy.waitUntil(() => cy.get(getTableRowsSelector()).then((rows) => rows.length === 4));
   cy.matchImageSnapshotOnCI('expand row');
 });
+
+it('expands all nodes', () => {
+  renderComponent({ propOverrides: { expanded: true } });
+
+  cy.contains('Engine 1').should('be.visible');
+  cy.contains('Engine 2').should('be.visible');
+});

packages/components/src/integration/iot-resource-explorer/setup.tsx

@@ -4,11 +4,14 @@ import { initialize } from '@iot-app-kit/source-iotsitewise';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { applyPolyfills, defineCustomElements } = require('@iot-app-kit/components/loader');
 import '../../styles/awsui.css';
+import { Components } from '../../components.d';
 
 applyPolyfills().then(() => defineCustomElements());
 
 export const testContainerClassName = 'test-container';
-export const renderComponent = () => {
+export const renderComponent = ({
+  propOverrides,
+}: { propOverrides?: Partial<Components.IotResourceExplorer> } = {}) => {
   mount({
     render: function () {
       const { query } = initialize({
@@ -19,7 +22,7 @@ export const renderComponent = () => {
         awsRegion: 'us-east-1',
       });
       const containerProps = { class: testContainerClassName };
-      const compProps: any = { query: query.assetTree.fromRoot() };
+      const compProps: any = { query: query.assetTree.fromRoot(), ...propOverrides };
       return (
         <div {...containerProps}>
           <iot-resource-explorer {...compProps} />

packages/related-table/package.json

@@ -58,6 +58,7 @@
     "@types/react": ">=17.0.2",
     "@types/react-dom": ">=17.0.2",
     "@types/styled-components": "^5.1.10",
+    "@types/uuid": "^8.3.4",
     "autoprefixer": "^10.2.6",
     "babel-loader": "^8.2.2",
     "barrelsby": "^2.2.0",
@@ -78,6 +79,7 @@
     "typescript": "^4.3.0"
   },
   "dependencies": {
-    "mutationobserver-shim": "^0.3.7"
+    "mutationobserver-shim": "^0.3.7",
+    "uuid": "^8.3.2"
   }
 }

packages/related-table/src/HOC/withUseTreeCollection.tsx

@@ -12,6 +12,7 @@ export interface RelatedTableExtendedProps<T> extends Omit<RelatedTableProps<T>,
   empty: EmptyStateProps;
   collectionOptions: UseTreeCollection<T>;
   filterPlaceholder?: string;
+  expanded?: boolean;
 }
 
 export const withUseTreeCollection = (RelatedTableComp: React.FC<any>) => {
@@ -25,17 +26,22 @@ export const withUseTreeCollection = (RelatedTableComp: React.FC<any>) => {
       filterPlaceholder,
       onSortingChange,
       onSelectionChange,
+      expanded,
     } = wrapperProps;
     const {
       expandNode,
       items: tree,
       collectionProps,
       filterProps,
       paginationProps,
-    } = useTreeCollection(items, {
-      ...collectionOptions,
-      columnDefinitions,
-    });
+    } = useTreeCollection(
+      items,
+      {
+        ...collectionOptions,
+        columnDefinitions,
+      },
+      expanded
+    );
 
     const emptyComponent = React.createElement(EmptyState, empty);
     const filterComponent = React.createElement(TextFilter, {

packages/related-table/src/Hooks/useTreeCollection.test.ts

@@ -87,4 +87,25 @@ describe('useTreeCollection', () => {
 
     expect(result.current.items[0].isExpanded()).toEqual(false);
   });
+  it('should expand all nodes', () => {
+    const { result } = renderHook(() =>
+      useTreeCollection(
+        items,
+        {
+          columnDefinitions,
+          keyPropertyName: 'id',
+          parentKeyPropertyName: 'parentId',
+          sorting: {},
+          selection: {
+            trackBy: 'entityId',
+          },
+        },
+        true
+      )
+    );
+
+    expect(result.current.items[0].isExpanded()).toEqual(true);
+    expect(result.current.items[1].isExpanded()).toEqual(true);
+    expect(result.current.items[2].isExpanded()).toEqual(true);
+  });
 });