@genesislcap/blank-app-seed 5.22.2-prerelease.2 → 5.23.1

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

@@ -1,6 +1,3 @@
-{{#if config.permissions.viewRight~}}
-hasUserPermission('{{config.permissions.viewRight}}') ? (
-{{/if}}
 <>
   <EntityManagement
     prefix="rapid"
@@ -9,13 +6,13 @@ hasUserPermission('{{config.permissions.viewRight}}') ? (
     {{#ifAny config.snapshot config.reqrep config.eventing.listener}}
     datasourceConfig={datasourceConfig}
     {{/ifAny}}
-    {{#if config.title~}}
+    {{#if config.title}}
     title="{{ config.title }}"
     {{/if}}
     resourceName="{{ config.resourceName }}"
-    {{#if config.createEvent~}}
+    {{#if config.createEvent}}
     {{#if config.permissions.updateRight}}
-    createEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.createEvent }}' : undefined}
+    createEvent={canUpdate ? '{{ config.createEvent }}' : undefined}
     {{else}}
     createEvent="{{ config.createEvent }}"
     {{/if}}
@@ -23,9 +20,9 @@ hasUserPermission('{{config.permissions.viewRight}}') ? (
     createFormUiSchema={createFormSchema}
     {{/if}}
     {{/if}}
-    {{#if config.updateEvent~}}
+    {{#if config.updateEvent}}
     {{#if config.permissions.updateRight}}
-    updateEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.updateEvent }}' : undefined}
+    updateEvent={canUpdate ? '{{ config.updateEvent }}' : undefined}
     {{else}}
     updateEvent="{{ config.updateEvent }}"
     {{/if}}
@@ -33,15 +30,15 @@ hasUserPermission('{{config.permissions.viewRight}}') ? (
     updateFormUiSchema={updateFormSchema}
     {{/if}}
     {{/if}}
-    {{#if config.deleteEvent~}}
+    {{#if config.deleteEvent}}
     {{#if config.permissions.updateRight}}
-    deleteEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.deleteEvent }}' : undefined}
+    deleteEvent={canUpdate ? '{{ config.deleteEvent }}' : undefined}
     {{else}}
     deleteEvent="{{ config.deleteEvent }}"
     {{/if}}
     {{/if}}
     {{#if config.gridOptions}}
-    gridOptions={gridOptions}
+    gridOptions={gridOptionsTile}
     {{/if}}
     {{#if config.eventing.publishEventName}}
     onSelectionChanged={handleRowSelection}
@@ -73,8 +70,3 @@ hasUserPermission('{{config.permissions.viewRight}}') ? (
     {{/if}}
   />
 </>
-{{#if config.permissions.viewRight~}}
-) : (
-<ErrorMessage elementType="h3" message="You do not have access to view this component." />
-)
-{{/if}}

package/{client-tmp/react/src/utils/fdc3.ts → .genx/templates/react/fdc3.ts.hbs}

@@ -1,15 +1,15 @@
-{{#if FDC3.includeDependencies}}
 import { DefaultFDC3 } from '@genesislcap/foundation-fdc3';
-{{/if}}
-export const isFDC3 = (): boolean => !!((window as unknown as { fdc3?: boolean }).fdc3);
-{{#if FDC3.includeDependencies}}
+
+export const isFDC3 = (): boolean => !!(window as unknown as { fdc3?: boolean }).fdc3;
 
 export const onFDC3Ready = async (FDC3ReadyCb: () => any): Promise<void> => {
-  isFDC3()
-    ? await FDC3ReadyCb()
-    : window.addEventListener('fdc3Ready', async () => {
+  if (isFDC3()) {
+    await FDC3ReadyCb();
+  } else {
+    window.addEventListener('fdc3Ready', async () => {
       await FDC3ReadyCb();
     });
+  }
 };
 
 export const listenToChannel = async (
@@ -29,4 +29,3 @@ export const sendEventOnChannel = (channelName: string, type: string) => {
     await fdc3Service.broadcastOnChannel(channelName, type, payload);
   };
 };
-{{/if}}

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

@@ -1,15 +1 @@
-{{#if config.permissions.updateRight~}}
-hasUserPermission('{{config.permissions.updateRight}}') ? (
-{{/if}}
-<Form
-  prefix="rapid"
-  resourceName="{{config.resourceName}}"
-  {{#if config.uischema}}
-  uischema={uischema}
-  {{/if}}
-/>
-{{#if config.permissions.updateRight~}}
-) : (
-<ErrorMessage elementType="h3" message="You do not have access to view this component." />
-)
-{{/if}}
+<Form prefix="rapid" resourceName="{{config.resourceName}}"{{#if config.uischema}} uischema={uischema}{{/if}} />

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

@@ -1,14 +1,16 @@
-{{#if config.permissions.viewRight~}}
-hasUserPermission('{{config.permissions.viewRight}}') ? (
-{{/if}}
+{{#if config.useOnlyTemplateCols}}
 <RapidGridPro
   headerCaseType={GridProCaseType.capitalCase}
-  {{#if config.useOnlyTemplateCols}}
   onlyTemplateColDefs
-  {{/if}}
   enableRowFlashing
   enableCellFlashing
-  >
+>
+{{else}}
+<RapidGridPro headerCaseType={GridProCaseType.capitalCase} enableRowFlashing enableCellFlashing>
+{{/if}}
+{{#ifAny config.snapshot config.gridOptions config.eventing.publishEventName config.eventing.listener config.reqrep}}
+  {{! prettier-ignore must be bare: attribute widths are user data, keep one attribute per line }}
+  {/* prettier-ignore */}
   <GridProGenesisDatasource
     resourceName="{{config.resourceName}}"
     {{#if config.snapshot}}
@@ -25,14 +27,12 @@ hasUserPermission('{{config.permissions.viewRight}}') ? (
     pollingInterval={datasourceConfig.pollingInterval}
     {{/if}}
   />
+{{else}}
+  <GridProGenesisDatasource resourceName="{{config.resourceName}}" />
+{{/ifAny}}
   {{#if config.gridOptions}}
   {gridOptionsTile?.columnDefs?.map((columnDef, index) => (
     <GridProColumn key={index} definition={columnDef} />
   ))}
   {{/if}}
 </RapidGridPro>
-{{#if config.permissions.viewRight~}}
-) : (
-<ErrorMessage elementType="h3" message="You do not have access to view this component." />
-)
-{{/if}}

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

@@ -9,10 +9,30 @@ const defaultLayout = {
         children: [
           {{#each route.tiles}}
           {{#ifEquals @index 0}}
-          { type: 'tabset', weight: 50, children: [{ type: 'tab', name: '{{this.title}}', component: '{{camelCase this.componentName}}' }] },
+          {
+            type: 'tabset',
+            weight: 50,
+            children: [
+              {
+                type: 'tab',
+                name: {{{this.titleJs}}},
+                component: '{{pascalCase this.componentName}}',
+              },
+            ],
+          },
           {{/ifEquals}}
           {{#ifEquals @index 2}}
-          { type: 'tabset', weight: 50, children: [{ type: 'tab', name: '{{this.title}}', component: '{{camelCase this.componentName}}' }] },
+          {
+            type: 'tabset',
+            weight: 50,
+            children: [
+              {
+                type: 'tab',
+                name: {{{this.titleJs}}},
+                component: '{{pascalCase this.componentName}}',
+              },
+            ],
+          },
           {{/ifEquals}}
           {{/each}}
         ],
@@ -23,10 +43,30 @@ const defaultLayout = {
         children: [
           {{#each route.tiles}}
           {{#ifEquals @index 1}}
-          { type: 'tabset', weight: 50, children: [{ type: 'tab', name: '{{this.title}}', component: '{{camelCase this.componentName}}' }] },
+          {
+            type: 'tabset',
+            weight: 50,
+            children: [
+              {
+                type: 'tab',
+                name: {{{this.titleJs}}},
+                component: '{{pascalCase this.componentName}}',
+              },
+            ],
+          },
           {{/ifEquals}}
           {{#ifEquals @index 3}}
-          { type: 'tabset', weight: 50, children: [{ type: 'tab', name: '{{this.title}}', component: '{{camelCase this.componentName}}' }] },
+          {
+            type: 'tabset',
+            weight: 50,
+            children: [
+              {
+                type: 'tab',
+                name: {{{this.titleJs}}},
+                component: '{{pascalCase this.componentName}}',
+              },
+            ],
+          },
           {{/ifEquals}}
           {{/each}}
         ],

package/.genx/templates/react/horizontalLayout.hbs

@@ -4,7 +4,16 @@ const defaultLayout = {
     type: 'row',
     children: [
       {{#each route.tiles}}
-      { type: 'tabset', children: [{ type: 'tab', name: '{{this.title}}', component: '{{camelCase this.componentName}}' }] },
+      {
+        type: 'tabset',
+        children: [
+          {
+            type: 'tab',
+            name: {{{this.titleJs}}},
+            component: '{{pascalCase this.componentName}}',
+          },
+        ],
+      },
       {{/each}}
     ],
   },

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

@@ -1,22 +1,25 @@
 {{#if route.tiles}}
-import React, { useRef } from 'react';
 import { Layout, Model, TabNode } from 'flexlayout-react';
-import { getFlexLayoutStorageKey } from '../../utils/layout';
+import React, { useState } from 'react';
 import { TileErrorBoundary } from '../../components/error-boundary/ErrorBoundary';
+import { getFlexLayoutStorageKey } from '../../utils/layout';
+/* eslint-disable import-es/order -- generated tile imports follow tile order, not alphabetical */
 {{#each route.tiles}}
 import { {{pascalCase this.componentName}} } from './{{pascalCase this.title}}{{pascalCase this.componentType}}';
 {{/each}}
-{{/if}}
+/* eslint-enable import-es/order */
 import './{{pascalCase route.name}}.css';
 
-{{#if route.tiles}}
-const STORAGE_KEY = getFlexLayoutStorageKey('{{route.layoutKey}}');
+// Kept as its own constant so the (arbitrarily long) layout key never forces a line wrap.
+const LAYOUT_KEY = '{{route.layoutKey}}';
+const STORAGE_KEY = getFlexLayoutStorageKey(LAYOUT_KEY);
 
 {{> (lookup ./route 'layoutType') }}
 
+{{! Map keys match the imported component names so the entries stay shorthand and never wrap. }}
 const componentMap: Record<string, React.FC> = {
   {{#each route.tiles}}
-  '{{camelCase this.componentName}}': {{pascalCase this.componentName}},
+  {{pascalCase this.componentName}},
   {{/each}}
 };
 
@@ -24,16 +27,18 @@ function loadModel(): Model {
   if (STORAGE_KEY) {
     const saved = localStorage.getItem(STORAGE_KEY);
     if (saved) {
-      try { return Model.fromJson(JSON.parse(saved)); } catch {}
+      try {
+        return Model.fromJson(JSON.parse(saved));
+      } catch {
+        // Ignore a corrupt persisted layout and fall back to the default below.
+      }
     }
   }
   return Model.fromJson(defaultLayout);
 }
-{{/if}}
 
 const {{pascalCase route.name}} = () => {
-  {{#if route.tiles}}
-  const modelRef = useRef<Model>(loadModel());
+  const [model] = useState<Model>(loadModel);
 
   const factory = (node: TabNode) => {
     const Component = componentMap[node.getComponent() ?? ''];
@@ -52,17 +57,19 @@ const {{pascalCase route.name}} = () => {
       localStorage.setItem(STORAGE_KEY, JSON.stringify(model.toJson()));
     }
   };
-  {{/if}}
 
   return (
     <section className="{{kebabCase route.name}}-page">
-      {{#if route.tiles}}
-      <Layout model={modelRef.current} factory={factory} onModelChange={onModelChange} />
-      {{else}}
-      Welcome to {{sentenceCase route.name}}
-      {{/if}}
+      <Layout model={model} factory={factory} onModelChange={onModelChange} />
     </section>
   );
 };
+{{else}}
+import './{{pascalCase route.name}}.css';
+
+const {{pascalCase route.name}} = () => {
+  return <section className="{{kebabCase route.name}}-page">Welcome to {{sentenceCase route.name}}</section>;
+};
+{{/if}}
 
 export default {{pascalCase route.name}};

package/.genx/templates/react/slices/eventing.slice.hbs

@@ -5,18 +5,24 @@ import { createSlice } from '@genesislcap/foundation-redux';
 
 export const eventingSlice = createSlice({
   name: 'eventing',
+{{#if events.length}}
   initialState: {
 {{#each events}}
-    {{this}}: null{{#unless @last}},{{/unless}}
+    {{this}}: null as Record<string, any> | null,
 {{/each}}
   },
   reducers: {
 {{#each events}}
     publish{{pascalCase this}}: (state, action) => {
       state.{{this}} = action.payload;
-    }{{#unless @last}},{{/unless}}
+    },
 {{/each}}
   },
+{{else}}
+  initialState: {},
+  reducers: {},
+{{/if}}
+{{#if listeners.length}}
   selectors: {
 {{#each listeners}}
     getCriteriaFor{{pascalCase tileName}}: (state) => {
@@ -26,16 +32,21 @@ export const eventingSlice = createSlice({
 
 {{#each mappings}}
       if (data.{{sourceField}}) {
-        criteriaBuilder.And(new ExpressionBuilder()
-          .withField('{{targetField}}')
-          .withValue(data.{{sourceField}})
-          .withSerialiser(Serialisers.EQ)
-          .build());
+        criteriaBuilder.And(
+          new ExpressionBuilder()
+            .withField('{{targetField}}')
+            .withValue(data.{{sourceField}})
+            .withSerialiser(Serialisers.EQ)
+            .build(),
+        );
       }
 {{/each}}
 
       return criteriaBuilder.build();
-    }{{#unless @last}},{{/unless}}
+    },
 {{/each}}
   },
+{{else}}
+  selectors: {},
+{{/if}}
 });

package/.genx/templates/react/store.hbs

@@ -2,11 +2,7 @@ import { createStore } from '@genesislcap/foundation-redux';
 import { eventingSlice } from './slices/eventing.slice';
 
 export const { reduxStore, store, actions, selectors } = createStore([eventingSlice], {
-  eventing: {
-    {{#each events}}
-    {{this}}: null{{#unless @last}},{{/unless}}
-    {{/each}}
-  },
+  eventing: eventingSlice.getInitialState(),
 });
 
 export type Store = typeof store;

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

@@ -8,7 +8,11 @@ const defaultLayout = {
         weight: 100,
         children: [
           {{#each route.tiles}}
-          { type: 'tab', name: '{{this.title}}', component: '{{camelCase this.componentName}}' },
+          {
+            type: 'tab',
+            name: {{{this.titleJs}}},
+            component: '{{pascalCase this.componentName}}',
+          },
           {{/each}}
         ],
       },

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

@@ -1,26 +1,26 @@
 ${whenElse(
-    (x) => getViewUpdateRightComponent(x.user, '{{config.permissions.viewRight}}'),
-    html`
-      <rapid-g2plot-chart
-        type="{{ config.type }}"
-        :config="${(x) => ({
-          {{#ifEquals config.type "pie"}}
-            radius: 0.75,
-            angleField: 'value',
-            colorField: 'groupBy',
-          {{else}}
-          xField: 'groupBy',
-          yField: 'value',
-          {{/ifEquals}}
-        })}"
-      >
-        <chart-datasource
-          resourceName="{{ config.resourceName }}"
-          server-fields="{{ config.xField }} {{ config.yField }}"
-        ></chart-datasource>
-      </rapid-g2plot-chart>
-    `,
-    html`
-        <not-permitted-component></not-permitted-component>
-    `,
-)}
+  (x) => getViewUpdateRightComponent(x.user, '{{config.permissions.viewRight}}'),
+  html`
+    <rapid-g2plot-chart
+      type="{{ config.type }}"
+      :config="${(x) => ({
+        {{#ifEquals config.type "pie"}}
+        radius: 0.75,
+        angleField: 'value',
+        colorField: 'groupBy',
+        {{else}}
+        xField: 'groupBy',
+        yField: 'value',
+        {{/ifEquals}}
+      })}"
+    >
+      <chart-datasource
+        resourceName="{{ config.resourceName }}"
+        server-fields="{{ config.xField }} {{ config.yField }}"
+      ></chart-datasource>
+    </rapid-g2plot-chart>
+  `,
+  html`
+    <not-permitted-component></not-permitted-component>
+  `,
+)}

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

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

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

@@ -1,8 +1,15 @@
+{{#ifAny tile.config.createFormUiSchema tile.config.uischema}}
 import { UiSchema } from '@genesislcap/foundation-forms';
 
 {{#if tile.config.createFormUiSchema}}
-export const createFormSchema: UiSchema = {{{ tile.config.createFormUiSchema }}}
-{{/if}}
-{{#if tile.config.uischema}}
-export const createFormSchema: UiSchema = {{{ tile.config.uischema }}}
+export const createFormSchema: UiSchema = {{{ tile.config.createFormUiSchema }}};
+{{else}}
+export const createFormSchema: UiSchema = {{{ tile.config.uischema }}};
 {{/if}}
+{{else}}
+/**
+ * No `uischema` was supplied for this form, so its fields are derived from the resource metadata.
+ * Export a `createFormSchema` here and pass it to the form to take control of the layout.
+ */
+export {};
+{{/ifAny}}

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

@@ -1,11 +1,36 @@
-import { type CustomAction, CrudMenuPosition, UiSchema } from '@genesislcap/foundation-entity-management';
+{{#ifContains tile.config.customEvents '"position":'}}
+{{#ifContains tile.config.customEvents '"uischema":'}}
+import {
+  type CustomAction,
+  CrudMenuPosition,
+  UiSchema,
+} from '@genesislcap/foundation-entity-management';
+{{else}}
+import { type CustomAction, CrudMenuPosition } from '@genesislcap/foundation-entity-management';
+{{/ifContains}}
+{{else}}
+{{#ifContains tile.config.customEvents '"uischema":'}}
+import { type CustomAction, UiSchema } from '@genesislcap/foundation-entity-management';
+{{else}}
+import { type CustomAction } from '@genesislcap/foundation-entity-management';
+{{/ifContains}}
+{{/ifContains}}
 
+{{#ifContains tile.config.customEvents '"uischema":'}}
 {{#each tile.config.customEvents}}
 {{#if this.hasForm}}
 export const {{camelCase this.name}}FormSchema: UiSchema = {{{this.uischema}}};
 {{/if}}
 {{/each}}
 
+{{/ifContains}}
+{{#each tile.config.customEvents}}
+{{#if this.defaultValues}}
+{{! Hoisted so the serialised literal keeps its own indentation; `as const` keeps the record-type discriminators literal so they still satisfy `DefaultValues`. }}
+const {{camelCase this.name}}DefaultValues = {{{this.defaultValues}}} as const;
+
+{{/if}}
+{{/each}}
 export const customActions: CustomAction[] = [
   {{#each tile.config.customEvents}}
   {
@@ -17,7 +42,9 @@ export const customActions: CustomAction[] = [
       {{#if this.hasForm}}
       uiSchema: {{camelCase this.name}}FormSchema,
       {{/if}}
-      defaultValues: {{{this.defaultValues}}},
+      {{#if this.defaultValues}}
+      defaultValues: {{camelCase this.name}}DefaultValues,
+      {{/if}}
     },
     {{#if this.position}}
     position: CrudMenuPosition.{{{pascalCase this.position}}},
@@ -26,15 +53,15 @@ export const customActions: CustomAction[] = [
     icon: '{{this.icon}}',
     {{/if}}
     {{#if this.tooltip}}
-    tooltip: '{{this.tooltip}}',
+    tooltip: {{{this.tooltipJs}}},
     {{/if}}
     {{#if this.confirmSubmit}}
     confirmSubmit: {
-      state: '{{this.confirmSubmit.state}}',
-      message: '{{this.confirmSubmit.message}}'
+      state: '{{#if this.confirmSubmit.state}}{{this.confirmSubmit.state}}{{else}}enabled{{/if}}',
+      message: {{{this.confirmSubmitMessageJs}}},
     },
     {{/if}}
     requiresSelection: true,
   },
   {{/each}}
-];
+];

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

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

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

@@ -1,8 +1,17 @@
-import { GridOptions } from '@ag-grid-community/core';
-import { getNumberFormatter, getDateFormatter } from '@genesislcap/foundation-utils';
+import type { GridOptions } from '@ag-grid-community/core';
+{{#ifContains tile.config.gridOptions "getNumberFormatter"}}
+import { getNumberFormatter{{#ifContains tile.config.gridOptions "getDateFormatter"}}, getDateFormatter{{/ifContains}} } from '@genesislcap/foundation-utils';
+{{else}}
+{{#ifContains tile.config.gridOptions "getDateFormatter"}}
+import { getDateFormatter } from '@genesislcap/foundation-utils';
+{{/ifContains}}
+{{/ifContains}}
 {{#if route.FDC3EventHandlersEnabled}}
+{{#ifContains tile.config.gridOptions "sendEventOnChannel"}}
 import { sendEventOnChannel } from '../../../utils';
+{{/ifContains}}
 {{/if}}
+
 {{#if tile.config.gridOptions}}
-export const gridOptions: GridOptions = {{{ tile.config.gridOptions }}}
+export const gridOptions: GridOptions = {{{ tile.config.gridOptions }}};
 {{/if}}

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

@@ -1,31 +1,30 @@
+{{#if tile.config.columns}}
+import type { ColDef } from '@ag-grid-community/core';
+{{/if}}
 import { Connect } from '@genesislcap/foundation-comms';
 import { User } from '@genesislcap/foundation-user';
-import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
-{{#if tile.config.gridOptions}}
-import { gridOptions as baseGridOptions } from './{{kebabCase tile.title}}.gridOptions';
-{{/if}}
+import { customElement, GenesisElement{{#if tile.config.columns}}, observable{{/if}} } from '@genesislcap/web-core';
 {{#if tile.config.eventing.publishEventName}}
-import { actions } from '../../../store/store';
-{{/if}}
+import { actions{{#if tile.config.eventing.listener}}, selectors{{/if}} } from '../../../store/store';
+{{else}}
 {{#if tile.config.eventing.listener}}
 import { selectors } from '../../../store/store';
 {{/if}}
-import { {{pascalCase tile.title}}Styles as styles } from './{{kebabCase tile.title}}.styles';
-import { {{pascalCase tile.title}}Template as template } from './{{kebabCase tile.title}}.template';
+{{/if}}
 {{#if tile.config.columns}}
 import { columnDefs } from './{{kebabCase tile.title}}.column.defs';
-import { ColDef } from '@ag-grid-community/core';
 {{/if}}
+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 tile.metadata.todo}}{{#if tile.metadata.comment}}
  *{{/if}}
  * TODO: {{{ tile.metadata.todo }}}{{/if}}
  */
 {{/ifAny}}
-
 @customElement({
   name: '{{kebabCase tile.componentName}}',
   template,
@@ -34,13 +33,12 @@ import { ColDef } from '@ag-grid-community/core';
 export class {{pascalCase tile.componentName}} extends GenesisElement {
   @User user: User;
   @Connect connect!: Connect;
+{{#if tile.config.columns}}
+
+  @observable columns: ColDef[] = [...columnDefs];
+{{/if}}
+{{#if tile.config.eventing.publishEventName}}
 
-  {{#if tile.config.columns}}
-  @observable columns: ColDef[] = [
-    ...columnDefs,
-  ];
-  {{/if}}
-  {{#if tile.config.eventing.publishEventName}}
   public handleRowSelection = (e: any) => {
     const selectedRows = e.api.getSelectedRows();
     if (!selectedRows || !selectedRows.length) {
@@ -50,11 +48,12 @@ export class {{pascalCase tile.componentName}} extends GenesisElement {
     const { TIMESTAMP, RECORD_ID, ROW_REF, ...data } = selectedRows[0];
     actions.eventing.publish{{pascalCase tile.config.eventing.publishEventName}}(data);
   };
-  {{/if}}
-  {{#if tile.config.eventing.listener}}
+{{/if}}
+{{#if tile.config.eventing.listener}}
+
   getCriteria() {
     const c = selectors.eventing.getCriteriaFor{{pascalCase tile.title}}();
     return c || '';
   }
-  {{/if}}
+{{/if}}
 }