Include componentId in props passed to static options generator (#6453)

Up until now the static options generator was invoked with passProps while the component's props contain passProps as well as componentId. This commit eliminates this inconsistency as it's a source for confusion and from now on passProps will also contain the componentId.

Note that if the user has specified a prop named `componentId` then Navigation won't override it.

Author: guyca

lib/src/commands/LayoutTreeCrawler.test.ts

@@ -155,4 +155,57 @@ describe('LayoutTreeCrawler', () => {
     uut.crawl(node, CommandName.SetRoot);
     expect(node.data.passProps).toBeUndefined();
   });
+
+  it('componentId is included in props passed to options generator', () => {
+    let componentIdInProps: String = '';
+
+    when(mockedStore.getComponentClassForName('theComponentName')).thenReturn(
+      () =>
+        class extends React.Component {
+          static options(props: any) {
+            componentIdInProps = props.componentId;
+            return {};
+          }
+        }
+    );
+    const node = {
+      id: 'testId',
+      type: LayoutType.Component,
+      data: {
+        name: 'theComponentName',
+        passProps: { someProp: 'here' },
+      },
+      children: [],
+    };
+    uut.crawl(node, CommandName.SetRoot);
+    expect(componentIdInProps).toEqual('testId');
+  });
+
+  it('componentId does not override componentId in passProps', () => {
+    let componentIdInProps: String = '';
+
+    when(mockedStore.getComponentClassForName('theComponentName')).thenReturn(
+      () =>
+        class extends React.Component {
+          static options(props: any) {
+            componentIdInProps = props.componentId;
+            return {};
+          }
+        }
+    );
+    const node = {
+      id: 'testId',
+      type: LayoutType.Component,
+      data: {
+        name: 'theComponentName',
+        passProps: {
+          someProp: 'here',
+          componentId: 'compIdFromPassProps',
+        },
+      },
+      children: [],
+    };
+    uut.crawl(node, CommandName.SetRoot);
+    expect(componentIdInProps).toEqual('compIdFromPassProps');
+  });
 });

lib/src/commands/LayoutTreeCrawler.ts

@@ -57,7 +57,7 @@ export class LayoutTreeCrawler {
     const reactComponent = foundReactGenerator ? foundReactGenerator() : undefined;
     if (reactComponent && this.isComponentWithOptions(reactComponent)) {
       return isFunction(reactComponent.options)
-        ? reactComponent.options(node.data.passProps || {})
+        ? reactComponent.options({ componentId: node.id, ...node.data.passProps } || {})
         : reactComponent.options;
     }
     return {};