@genesislcap/blank-app-seed 3.30.0-prerelease.5 → 3.30.0-prerelease.51

package/.genx/configure.js

@@ -7,6 +7,7 @@ const {
   getCombinedCsvData,
   registerPartials,
   validateRoute,
+  deleteGradleWrappers,
 } = require('./utils');
 
 /**
@@ -48,4 +49,8 @@ module.exports = async (data, utils) => {
     .forEach((entity) => {
       generateCsv(entity, utils);
     });
+
+  if (data.excludeGradleWrapper) {
+    deleteGradleWrappers();
+  }
 };

package/.genx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed-config",
   "description": "Genesis Blank App Seed Configuration",
-  "version": "3.30.0-prerelease.5",
+  "version": "3.30.0-prerelease.51",
   "license": "Apache-2.0",
   "scripts": {
     "lint": "eslint .",

package/.genx/prompts/api.js

@@ -7,19 +7,12 @@ const ssoIntro = () => console.log(TEXTS.INTRO_API_SSO);
 module.exports = async (inquirer, prevAns = {}) => {
   apiHostIntro();
   const { apiHost = prevAns.apiHost } = await inquirer.prompt([
-    {
-      name: 'setApiHost',
-      type: 'confirm',
-      message: TEXTS.MESSAGE_API_SET_HOST,
-      when: !prevAns.apiHost,
-      default: true,
-    },
     {
       name: 'apiHost',
       type: 'input',
       message: TEXTS.MESSAGE_API_HOST,
-      when: ({ setApiHost }) => setApiHost,
-      default: prevAns.apiHost || 'ws://localhost/gwf/',
+      when: !prevAns.apiHost,
+      default: 'ws://localhost:9064',
       validate: websocketValidator,
     },
   ]);

package/.genx/prompts/server.js

@@ -11,6 +11,7 @@ module.exports = async (inquirer, prevAns = {}) => {
     applicationVersion = prevAns.applicationVersion,
     enableDeployPlugin = prevAns.enableDeployPlugin,
     csv = prevAns.csv,
+    excludeGradleWrapper = prevAns.excludeGradleWrapper,
   } = await inquirer.prompt([
     {
       name: 'description',
@@ -41,6 +42,13 @@ module.exports = async (inquirer, prevAns = {}) => {
       when: prevAns.enableDeployPlugin === undefined,
       default: prevAns.enableDeployPlugin || false,
     },
+    {
+      name: 'excludeGradleWrapper',
+      type: 'confirm',
+      message: TEXTS.MESSAGE_EXCLUDE_GRADLE_WRAPPER,
+      when: prevAns.excludeGradleWrapper === undefined,
+      default: prevAns.excludeGradleWrapper || false,
+    },
     {
       name: 'csv',
       type: 'input',
@@ -56,5 +64,6 @@ module.exports = async (inquirer, prevAns = {}) => {
     applicationVersion,
     enableDeployPlugin,
     csv: parsecsv(csv),
+    excludeGradleWrapper,
   };
 };

package/.genx/prompts.js

@@ -17,8 +17,14 @@ module.exports = async (inquirer, prevAns = {}) => {
   License: ${license}`);
 
   const { apiHost, enableSSO } = await apiPrompts(inquirer, prevAns);
-  const { description, groupId, applicationVersion, enableDeployPlugin, csv } =
-    await genesisServerPrompts(inquirer, prevAns);
+  const {
+    description,
+    groupId,
+    applicationVersion,
+    enableDeployPlugin,
+    csv,
+    excludeGradleWrapper,
+  } = await genesisServerPrompts(inquirer, prevAns);
   const { routes, ui, framework } = await uiPrompts(inquirer, prevAns);
 
   return {
@@ -32,5 +38,6 @@ module.exports = async (inquirer, prevAns = {}) => {
     csv,
     ui,
     framework,
+    excludeGradleWrapper,
   };
 };

package/.genx/static.js

@@ -67,13 +67,13 @@ const TEXTS = {
     'You can override the default Genesis server URL used during local developent.',
   INTRO_API_SSO:
     'Optionally, you can enable the SSO function, which will redirect to identity provider before starting the application (given we only have one identity provider).',
-  MESSAGE_API_SET_HOST: 'Set API Host',
   MESSAGE_API_HOST: 'API Host (with WebSocket prefix and suffix if any)',
   MESSAGE_API_SSO: 'Init SSO connection before loading application',
   MESSAGE_SERVER_DESCRIPTION: 'Project Description',
   MESSAGE_SERVER_GROUP_ID: 'Group Id',
   MESSAGE_SERVER_APPLICATION_VERSION: 'Application Version',
   MESSAGE_SERVER_DEPLOY_PLUGIN: 'Enable deploy plugin?',
+  MESSAGE_EXCLUDE_GRADLE_WRAPPER: 'Exclude Gradle wrapper?',
   MESSAGE_SERVER_CSV:
     'Generate empty CSV for entities? (config in JSON format)',
   MESSAGE_UI_ROTUES: 'Pages config in JSON format',

package/.genx/templates/angular/component/component.hbs

@@ -22,6 +22,15 @@ import { columnDefs } from './{{kebabCase tile.title}}.column.defs';
 import { gridOptions } from './{{kebabCase tile.title}}.gridOptions';
 {{/if}}
 
+{{#ifAny tile.metadata.comment tile.metadata.todo}}
+/**
+{{~#if tile.metadata.comment}}{{{ tile.metadata.comment }}}{{/if}}
+{{~#if tile.metadata.todo}}{{#if tile.metadata.comment}} 
+ *{{/if}}
+ * TODO: {{{ tile.metadata.todo }}}{{/if}}
+ */
+{{/ifAny}}
+
 @Component({
   selector: 'app-{{kebabCase tile.componentName}}',
   templateUrl: './{{kebabCase tile.title}}.component.html',

package/.genx/templates/angular/gridLayout.hbs

@@ -2,13 +2,13 @@
     <rapid-layout-region type="vertical">
     {{#each route.tiles}}
         {{#ifEquals @index 0}}
-        <rapid-layout-item title="{{../title}}">
-            <app-{{kebabCase ../componentName}}></app-{{kebabCase ../componentName}}>
+        <rapid-layout-item title="{{this.title}}">
+            <app-{{kebabCase this.componentName}}></app-{{kebabCase this.componentName}}>
         </rapid-layout-item>
         {{/ifEquals}}
         {{#ifEquals @index 1}}
-        <rapid-layout-item title="{{../title}}">
-            <app-{{kebabCase ../componentName}}></app-{{kebabCase ../componentName}}>
+        <rapid-layout-item title="{{this.title}}">
+            <app-{{kebabCase this.componentName}}></app-{{kebabCase this.componentName}}>
         </rapid-layout-item>
         {{/ifEquals}}
     {{/each}}
@@ -16,13 +16,13 @@
     <rapid-layout-region type="vertical">
     {{#each route.tiles}}
         {{#ifEquals @index 2}}
-        <rapid-layout-item title="{{../title}}">
-            <app-{{kebabCase ../componentName}}></app-{{kebabCase ../componentName}}>
+        <rapid-layout-item title="{{this.title}}">
+            <app-{{kebabCase this.componentName}}></app-{{kebabCase this.componentName}}>
         </rapid-layout-item>
         {{/ifEquals}}
         {{#ifEquals @index 3}}
-        <rapid-layout-item title="{{../title}}">
-            <app-{{kebabCase ../componentName}}></app-{{kebabCase ../componentName}}>
+        <rapid-layout-item title="{{this.title}}">
+            <app-{{kebabCase this.componentName}}></app-{{kebabCase this.componentName}}>
         </rapid-layout-item>
         {{/ifEquals}}
     {{/each}}

package/.genx/templates/react/chart.hbs

@@ -1,4 +1,6 @@
-{{#if config.permissions.viewRight}}hasUserPermission('{{config.permissions.viewRight}}') ? ({{/if}}
+{{#if config.permissions.viewRight~}}
+hasUserPermission('{{config.permissions.viewRight}}') ? (
+{{/if}}
 <rapid-g2plot-chart
   type="{{ config.type }}"
   config={chartConfig}
@@ -7,7 +9,9 @@
     resourceName="{{ config.resourceName }}"
     server-fields="{{ config.xField }} {{ config.yField }}"
   ></chart-datasource>
-</rapid-g2plot-chart>{{#if config.permissions.viewRight}} 
+</rapid-g2plot-chart>
+{{#if config.permissions.viewRight~}} 
 ) : (
 <ErrorMessage elementType="h3" message="You do not have access to view this component." />
-){{/if}}
+)
+{{/if}}

package/.genx/templates/react/component/component.column.defs.hbs

@@ -1,9 +1,11 @@
+{{#if tile.config.columns~}}
 import { ColDef } from '@ag-grid-community/core';
+{{/if}}
 import { getNumberFormatter, getDateFormatter } from '@genesislcap/foundation-utils';
-{{#if route.FDC3EventHandlersEnabled}}
+{{#if route.FDC3EventHandlersEnabled~}}
 import { sendEventOnChannel } from '../../../utils';
 {{/if}}
 
-{{#if tile.config.columns}}
+{{#if tile.config.columns~}}
 export const columnDefs: ColDef[] = {{{ tile.config.columns }}}
 {{/if}}

package/.genx/templates/react/component/component.create.form.hbs

@@ -1,8 +1,8 @@
 import { UiSchema } from '@genesislcap/foundation-forms';
 
-{{#if tile.config.createFormUiSchema}}
+{{#if tile.config.createFormUiSchema~}}
 export const createFormSchema: UiSchema = {{{ tile.config.createFormUiSchema }}}
 {{/if}}
-{{#if tile.config.uischema}}
+{{#if tile.config.uischema~}}
 export const createFormSchema: UiSchema = {{{ tile.config.uischema }}}
 {{/if}}

package/.genx/templates/react/component/component.gridOptions.hbs

@@ -1,9 +1,11 @@
+{{#if tile.config.gridOptions~}}
 import { GridOptionsConfig } from '@genesislcap/rapid-grid-pro';
+{{/if}}
 import { getNumberFormatter, getDateFormatter } from '@genesislcap/foundation-utils';
-{{#if route.FDC3EventHandlersEnabled}}
+{{#if route.FDC3EventHandlersEnabled~}}
 import { sendEventOnChannel } from '../../../utils';
 {{/if}}
 
-{{#if tile.config.gridOptions}}
+{{#if tile.config.gridOptions~}}
 export const gridOptions: GridOptionsConfig = {{{ tile.config.gridOptions }}}
 {{/if}}

package/.genx/templates/react/component/component.hbs

@@ -1,40 +1,86 @@
+{{#if tile.config.permissions.viewRight~}}
 import { getUser } from '@genesislcap/foundation-user';
 import { getViewUpdateRightComponent } from '../../../utils';
 import ErrorMessage from '../../../components/ErrorMessage/ErrorMessage';
-{{#if tile.config.createFormUiSchema}}
+{{else if tile.config.permissions.updateRight~}}
+import { getUser } from '@genesislcap/foundation-user';
+import { getViewUpdateRightComponent } from '../../../utils';
+import ErrorMessage from '../../../components/ErrorMessage/ErrorMessage';
+{{/if}}
+{{#if tile.config.createFormUiSchema~}}
 import { createFormSchema as createFormSchemaTile } from './{{pascalCase tile.title}}CreateFormSchema';
 {{/if}}
-{{#if tile.config.uischema}}
+{{#if tile.config.uischema~}}
 import { createFormSchema as createFormSchemaTile } from './{{pascalCase tile.title}}CreateFormSchema';
 {{/if}}
-{{#if tile.config.updateFormUiSchema}}
+{{#if tile.config.updateFormUiSchema~}}
 import { updateFormSchema as updateFormSchemaTile } from './{{pascalCase tile.title}}UpdateFormSchema';
 {{/if}}
-{{#if tile.config.columns}}
+{{#if tile.config.columns~}}
 import { columnDefs as columnDefsTile } from './{{pascalCase tile.title}}ColumnDefs';
 {{/if}}
-{{#if tile.config.gridOptions}}
+{{#if tile.config.gridOptions~}}
+import { GridOptionsConfig } from '@genesislcap/rapid-grid-pro';
 import { gridOptions as gridOptionsTile } from './{{pascalCase tile.title}}GridOptions';
 {{/if}}
 import './{{pascalCase tile.title}}Component.css';
 
-export const {{pascalCase tile.componentName}} = () => {
-  const hasUserPermission = (permissionCode) => getViewUpdateRightComponent(getUser(), permissionCode);{{#if tile.config.createFormUiSchema}}
-  const createFormSchema = createFormSchemaTile;{{/if}}{{#if tile.config.uischema}}
-  const uischema = createFormSchemaTile;{{/if}}{{#if tile.config.updateFormUiSchema}}
-  const updateFormSchema = updateFormSchemaTile;{{/if}}{{#if tile.config.columns}}
-  const columnDefs = columnDefsTile;{{/if}}{{#if tile.config.gridOptions}}
-  const gridOptions = gridOptionsTile;{{/if}}{{#if tile.config.reqrep}}
-  const reqrep = { pollingInterval: 5000 };{{/if}}{{#if tile.config.type}}
-  const chartConfig = { {{#ifEquals tile.config.type 'pie'}}
-      "radius": 0.75,
-      "angleField": "value",
-      "colorField": "groupBy",{{else}}
-      "xField": "groupBy",
-      "yField": "value",{{/ifEquals}}
-  };{{/if}}
+{{#ifAny tile.metadata.comment tile.metadata.todo}}
+/**
+{{~#if tile.metadata.comment}}{{{ tile.metadata.comment }}}{{/if}}
+{{~#if tile.metadata.todo}}{{#if tile.metadata.comment}} 
+ *{{/if}}
+ * TODO: {{{ tile.metadata.todo }}}{{/if}}
+ */
+{{/ifAny}}
+
+export const {{pascalCase tile.componentName}}: React.FC = () => {
+  {{#if tile.config.permissions.viewRight~}}
+  const hasUserPermission = (permissionCode: string): boolean => getViewUpdateRightComponent(getUser(), permissionCode);
+  {{else if tile.config.permissions.updateRight~}}
+  const hasUserPermission = (permissionCode: string): boolean => getViewUpdateRightComponent(getUser(), permissionCode);
+  {{/if}}
+  {{#if tile.config.createFormUiSchema~}}
+  const createFormSchema: typeof createFormSchemaTile = createFormSchemaTile;
+  {{/if}}
+  {{#if tile.config.uischema~}}
+  const uischema: typeof createFormSchemaTile = createFormSchemaTile;
+  {{/if}}
+  {{#if tile.config.updateFormUiSchema~}}
+  const updateFormSchema: typeof updateFormSchemaTile = updateFormSchemaTile;
+  {{/if}}
+  {{#if tile.config.columns~}}
+  const columnDefs: typeof columnDefsTile = columnDefsTile;
+  {{/if}}
+  {{#if tile.config.gridOptions~}}
+  const deferredGridOptions: { onRowClicked: GridOptionsConfig.onRowClicked } = { onRowClicked: gridOptionsTile?.onRowClicked  }
+  {{/if}}
+  {{#if tile.config.reqrep~}}
+  const reqrep: { pollingInterval: number } = { pollingInterval: 5000 };
+  {{/if}}
+  {{#if tile.config.type~}}
+  const chartConfig: {
+    {{#ifEquals tile.config.type 'pie'~}}
+    radius: number;
+    angleField: string;
+    colorField: string;
+    {{else~}}
+    xField: string;
+    yField: string;
+    {{/ifEquals}}
+  } = {
+    {{#ifEquals tile.config.type 'pie'~}}
+    radius: 0.75,
+    angleField: 'value',
+    colorField: 'groupBy',
+    {{else~}}
+    xField: 'groupBy',
+    yField: 'value',
+    {{/ifEquals}}
+  };
+  {{/if}}
 
   return (
     {{> (lookup tile 'type') tile}}
   );
-};
+};

package/.genx/templates/react/component/component.index.hbs

@@ -1 +1 @@
-export * from './{{pascalCase tile.title}}Component.jsx';
+export * from './{{pascalCase tile.title}}Component.tsx';

package/.genx/templates/react/component/component.update.form.hbs

@@ -1,5 +1,5 @@
 import { UiSchema } from '@genesislcap/foundation-forms';
 
-{{#if tile.config.updateFormUiSchema}}
+{{#if tile.config.updateFormUiSchema~}}
 export const updateFormSchema: UiSchema = {{{ tile.config.updateFormUiSchema }}}
 {{/if}}

package/.genx/templates/react/entityManager.hbs

@@ -1,52 +1,65 @@
-{{#if config.permissions.viewRight}}hasUserPermission('{{config.permissions.viewRight}}') ? ({{/if}}
+{{#if config.permissions.viewRight~}}
+hasUserPermission('{{config.permissions.viewRight}}') ? (
+{{/if}}
 <entity-management
-    design-system-prefix="rapid"
-    enable-row-flashing
-    enable-cell-flashing
-    {{#if config.title}}
-    title="{{ config.title }}"
-    {{/if}}
-    resourceName="{{ config.resourceName }}"
-    {{#if config.createEvent}}
-    createEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.createEvent }}' : undefined}
-    {{#if config.createFormUiSchema}}
-    createFormUiSchema={createFormSchema}
-    {{/if}}
-    {{/if}}
-    {{#if config.updateEvent}}
-    updateEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.updateEvent }}' : undefined}
-    {{#if config.updateFormUiSchema}}
-    updateFormUiSchema={updateFormSchema}
-    {{/if}}
-    {{/if}}
-    {{#if config.deleteEvent}}
-    deleteEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.deleteEvent }}' : undefined}
-    {{/if}}
-    {{#if config.gridOptions}}
-    gridOptions={gridOptions}
-    {{/if}}
-    {{#if config.snapshot}}
-    datasourceConfig={ isSnapshot: {{ config.snapshot }} }
-    {{/if}}
-    {{#if config.reqrep}}
-    datasourceConfig={reqrep}
-    {{/if}}
-    {{#if config.entityName}}
-    entityLabel="{{ config.entityName }}"
-    {{/if}}
-    {{#if config.columns}}
-    columns={columnDefs}
-    {{/if}}
-    {{#if config.modalPosition}}
-    modal-position="{{ config.modalPosition }}"
-    {{/if}}
-    {{#if config.sizeColumnsToFit}}
-    size-columns-to-fit
-    {{/if}}
-    {{#if config.enableSearchBar}}
-    enable-search-bar
-    {{/if}}
-></entity-management>{{#if config.permissions.viewRight}} 
+  design-system-prefix="rapid"
+  enable-row-flashing
+  enable-cell-flashing
+  {{#if config.title~}}
+  title="{{ config.title }}"
+  {{/if}}
+  resourceName="{{ config.resourceName }}"
+  {{#if config.createEvent~}}
+  {{#if config.permissions.updateRight~}}
+  createEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.createEvent }}' : undefined}
+  {{else~}}
+  createEvent="{{ config.updateEvent }}"
+  {{/if}}
+  {{#if config.createFormUiSchema~}}
+  createFormUiSchema={createFormSchema}
+  {{/if}}
+  {{/if}}
+  {{#if config.updateEvent~}}
+  {{#if config.permissions.updateRight~}}
+  updateEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.updateEvent }}' : undefined}
+  {{else~}}
+  updateEvent="{{ config.updateEvent }}"
+  {{/if}}
+  {{#if config.updateFormUiSchema~}}
+  updateFormUiSchema={updateFormSchema}
+  {{/if}}
+  {{/if}}
+  {{#if config.deleteEvent~}}
+  {{#if config.permissions.updateRight~}}
+  deleteEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.deleteEvent }}' : undefined}
+  {{else~}}
+  deleteEvent="{{ config.deleteEvent }}"
+  {{/if}}
+  {{/if}}
+  {{#if config.gridOptions~}}
+  gridOptions={gridOptions}
+  {{/if}}
+  {{#if config.snapshot~}}
+  datasourceConfig={ isSnapshot: {{ config.snapshot }} }
+  {{/if}}
+  {{#if config.reqrep~}}
+  datasourceConfig={reqrep}
+  {{/if}}
+  {{#if config.columns~}}
+  columns={columnDefs}
+  {{/if}}
+  {{#if config.modalPosition~}}
+  modal-position="{{ config.modalPosition }}"
+  {{/if}}
+  {{#if config.sizeColumnsToFit~}}
+  size-columns-to-fit
+  {{/if}}
+  {{#if config.enableSearchBar~}}
+  enable-search-bar
+  {{/if}}
+></entity-management>
+{{#if config.permissions.viewRight~}}
 ) : (
 <ErrorMessage elementType="h3" message="You do not have access to view this component." />
-){{/if}}
+)
+{{/if}}

package/.genx/templates/react/form.hbs

@@ -1,4 +1,6 @@
-{{#if config.permissions.updateRight}}hasUserPermission('{{config.permissions.updateRight}}') ? ({{/if}}
+{{#if config.permissions.updateRight~}}
+hasUserPermission('{{config.permissions.updateRight}}') ? (
+{{/if}}
 <foundation-form
   design-system-prefix="rapid"
   resourceName="{{config.resourceName}}"
@@ -6,7 +8,9 @@
   uischema={uischema}
   {{/if}}
 >
-</foundation-form>{{#if config.permissions.updateRight}} 
+</foundation-form>
+{{#if config.permissions.updateRight~}} 
 ) : (
 <ErrorMessage elementType="h3" message="You do not have access to view this component." />
-){{/if}}
+)
+{{/if}}

package/.genx/templates/react/grid.hbs

@@ -1,28 +1,34 @@
-{{#if config.permissions.viewRight}}hasUserPermission('{{config.permissions.viewRight}}') ? ({{/if}}
+{{#if config.permissions.viewRight~}}
+hasUserPermission('{{config.permissions.viewRight}}') ? (
+{{/if}}
 <rapid-grid-pro
-  header-case-type="capitalCase"{{#if config.useOnlyTemplateCols}}
-  only-template-col-defs{{/if}}
+  header-case-type="capitalCase"
+  {{#if config.useOnlyTemplateCols~}}
+  only-template-col-defs
+  {{/if}}
   enable-row-flashing
   enable-cell-flashing
   >
   <grid-pro-genesis-datasource
     resource-name="{{config.resourceName}}"
-    {{#if config.snapshot}}
+    {{#if config.snapshot~}}
     isSnapshot="{{config.snapshot}}"
     {{/if}}
-    {{#if config.reqrep}}
+    {{#if config.reqrep~}}
     datasourceConfig="reqrep"
     {{/if}}
-    {{#if config.gridOptions}}
-    deferredGridOptions=\{{ onRowClicked: gridOptions?.onRowClicked }}
+    {{#if config.gridOptions~}}
+    deferredGridOptions={deferredGridOptions}
     {{/if}}
   ></grid-pro-genesis-datasource>
   {{#if config.gridOptions}}
-  {gridOptions?.columnDefs?.map((columnDef, index) => (
+  {gridOptionsTile?.columnDefs?.map((columnDef, index) => (
     <grid-pro-column key={index} definition={columnDef}></grid-pro-column>
   ))}
   {{/if}}
-</rapid-grid-pro>{{#if config.permissions.viewRight}} 
+</rapid-grid-pro>
+{{#if config.permissions.viewRight~}} 
 ) : (
 <ErrorMessage elementType="h3" message="You do not have access to view this component." />
-){{/if}}
+)
+{{/if}}

package/.genx/templates/react/gridLayout.hbs

@@ -2,13 +2,13 @@
   <rapid-layout-region type="vertical">
   {{#each route.tiles}}
     {{#ifEquals @index 0}}
-    <rapid-layout-item title="{{../title}}">
-      <{{pascalCase ../componentName}}></{{pascalCase ../componentName}}>
+    <rapid-layout-item title="{{this.title}}">
+      <{{pascalCase this.componentName}}></{{pascalCase this.componentName}}>
     </rapid-layout-item>
     {{/ifEquals}}
     {{#ifEquals @index 1}}
-    <rapid-layout-item title="{{../title}}">
-      <{{pascalCase ../componentName}}></{{pascalCase ../componentName}}>
+    <rapid-layout-item title="{{this.title}}">
+      <{{pascalCase this.componentName}}></{{pascalCase this.componentName}}>
     </rapid-layout-item>
     {{/ifEquals}}
   {{/each}}
@@ -16,13 +16,13 @@
   <rapid-layout-region type="vertical">
   {{#each route.tiles}}
     {{#ifEquals @index 2}}
-    <rapid-layout-item title="{{../title}}">
-      <{{pascalCase ../componentName}}></{{pascalCase ../componentName}}>
+    <rapid-layout-item title="{{this.title}}">
+      <{{pascalCase this.componentName}}></{{pascalCase this.componentName}}>
     </rapid-layout-item>
     {{/ifEquals}}
     {{#ifEquals @index 3}}
-    <rapid-layout-item title="{{../title}}">
-      <{{pascalCase ../componentName}}></{{pascalCase ../componentName}}>
+    <rapid-layout-item title="{{this.title}}">
+      <{{pascalCase this.componentName}}></{{pascalCase this.componentName}}>
     </rapid-layout-item>
     {{/ifEquals}}
   {{/each}}

package/.genx/templates/react/route.hbs

@@ -1,14 +1,14 @@
 import './{{pascalCase route.name}}.css';
+import { persistLayout } from '../../utils';
 {{#each route.tiles}}
 import { {{pascalCase this.componentName}} } from './{{pascalCase this.title}}{{pascalCase this.componentType}}';
 {{/each}}
 
 const {{pascalCase route.name}} = () => {
-
   return (
     <section className="{{kebabCase route.name}}-page">
       {{#if route.tiles}}
-      <rapid-layout auto-save-key={process.env.NODE_ENV === 'production' ? "{{route.layoutKey}}" : null}>
+      <rapid-layout auto-save-key={persistLayout('{{route.layoutKey}}')}>
         {{> (lookup ./route 'layoutType') }}
       </rapid-layout>
       {{else}}

package/.genx/templates/react/tabsLayout.hbs

@@ -1,7 +1,7 @@
 <rapid-layout-region type="tabs">
-    {{#each route.tiles}}
-    <rapid-layout-item title="{{this.title}}">
-        {{> (lookup . 'type') }}
-    </rapid-layout-item>
-    {{/each}}
+  {{#each route.tiles}}
+  <rapid-layout-item title="{{this.title}}">
+    {{> (lookup . 'type') }}
+  </rapid-layout-item>
+  {{/each}}
 </rapid-layout-region>

package/.genx/templates/web-components/component/component.hbs

@@ -3,6 +3,15 @@ import { customElement, GenesisElement } from '@genesislcap/web-core';
 import { {{pascalCase tile.title}}Styles as styles } from './{{kebabCase tile.title}}.styles';
 import { {{pascalCase tile.title}}Template as template } from './{{kebabCase tile.title}}.template';
 
+{{#ifAny tile.metadata.comment tile.metadata.todo}}
+/**
+{{~#if tile.metadata.comment}}{{{ tile.metadata.comment }}}{{/if}}
+{{~#if tile.metadata.todo}}{{#if tile.metadata.comment}} 
+ *{{/if}}
+ * TODO: {{{ tile.metadata.todo }}}{{/if}}
+ */
+{{/ifAny}}
+
 @customElement({
   name: '{{kebabCase tile.componentName}}',
   template,