@genesislcap/pbc-reporting-ui 14.396.3 → 14.397.0

package/src/new/main/edit-config/col-rename-alias/col-rename-alias-grid.helpers.test.ts

@@ -28,6 +28,8 @@ LookupColumnRename('should return original data when no rename is found', () =>
     INPUT_TYPE: 'REQ_REP' as const,
     OUTPUT_TYPE: 'TABLE' as const,
     TRANSFORMER_CONFIGURATION: { COLUMN_RENAMES: {} },
+    GROUPING_STRATEGY: 'NONE',
+    GROUP_KEY: null,
   });
 
   const result = lookupColumnRename(mockData);
@@ -56,6 +58,8 @@ LookupColumnRename('should return data with renamed display name when rename exi
         [originalColumn]: newDisplayName,
       },
     },
+    GROUPING_STRATEGY: 'NONE',
+    GROUP_KEY: null,
   });
 
   const result = lookupColumnRename(mockData);
@@ -81,6 +85,8 @@ LookupColumnRename('should handle undefined COLUMN_RENAMES', () => {
     INPUT_TYPE: 'REQ_REP' as const,
     OUTPUT_TYPE: 'TABLE' as const,
     TRANSFORMER_CONFIGURATION: {},
+    GROUPING_STRATEGY: 'NONE',
+    GROUP_KEY: null,
   });
 
   const result = lookupColumnRename(mockData);
@@ -101,13 +107,24 @@ DisplayNameOnChangeHandler('calls setColumnRename with correct parameters when v
   const callback = sinon.spy();
   const handler = displayNameOnChangeHandler(callback);
   const mockData = {
-    [GridColumnNames.Datasource]: 'testSource (Snapshot)',
+    [GridColumnNames.Datasource]: 'testAlias (Snapshot)',
     [GridColumnNames.ColumnName]: 'originalColumn',
     [GridColumnNames.DisplayName]: 'Original Display',
     [GridColumnNames.Type]: 'STRING',
   } as ColumnRenameAliasRowData;
 
   const setColumnRenameStub = sinon.stub(actions.datasourceConfig, 'setColumnRename');
+  sinon.stub(selectors.datasourceConfig, 'getAllConfigSet').returns({
+    REQ_REP_testSource_testAlias: {
+      KEY: 'testAlias',
+      NAME: 'testSource',
+      INPUT_TYPE: 'REQ_REP',
+      OUTPUT_TYPE: 'TABLE',
+      TRANSFORMER_CONFIGURATION: {},
+      GROUPING_STRATEGY: 'NONE',
+      GROUP_KEY: null,
+    },
+  });
 
   handler('newColumn', { data: mockData } as ICellRendererParams<ColumnRenameAliasRowData>);
 
@@ -115,7 +132,7 @@ DisplayNameOnChangeHandler('calls setColumnRename with correct parameters when v
 
   // Check each property individually instead of using deepEqual
   const firstCallArg = setColumnRenameStub.firstCall.args[0];
-  assert.equal(firstCallArg.key, 'REQ_REP_testSource');
+  assert.equal(firstCallArg.key, 'REQ_REP_testSource_testAlias');
   assert.equal(firstCallArg.columnFrom, 'originalColumn');
   assert.equal(firstCallArg.columnTo, 'newColumn');
 
@@ -126,13 +143,24 @@ DisplayNameOnChangeHandler('removes prohibited characters and calls callback', (
   const callback = sinon.spy();
   const handler = displayNameOnChangeHandler(callback);
   const mockData = {
-    [GridColumnNames.Datasource]: 'testSource (Snapshot)',
+    [GridColumnNames.Datasource]: 'testAlias (Snapshot)',
     [GridColumnNames.ColumnName]: 'originalColumn',
     [GridColumnNames.DisplayName]: 'Original Display',
     [GridColumnNames.Type]: 'STRING',
   } as ColumnRenameAliasRowData;
 
   const setColumnRenameStub = sinon.stub(actions.datasourceConfig, 'setColumnRename');
+  sinon.stub(selectors.datasourceConfig, 'getAllConfigSet').returns({
+    REQ_REP_testSource_testAlias: {
+      KEY: 'testAlias',
+      NAME: 'testSource',
+      INPUT_TYPE: 'REQ_REP',
+      OUTPUT_TYPE: 'TABLE',
+      TRANSFORMER_CONFIGURATION: {},
+      GROUPING_STRATEGY: 'NONE',
+      GROUP_KEY: null,
+    },
+  });
 
   handler('new@Column-=+test', { data: mockData } as ICellRendererParams<ColumnRenameAliasRowData>);
 
@@ -140,7 +168,7 @@ DisplayNameOnChangeHandler('removes prohibited characters and calls callback', (
 
   // Check each property individually instead of using deepEqual
   const firstCallArg = setColumnRenameStub.firstCall.args[0];
-  assert.equal(firstCallArg.key, 'REQ_REP_testSource');
+  assert.equal(firstCallArg.key, 'REQ_REP_testSource_testAlias');
   assert.equal(firstCallArg.columnFrom, 'originalColumn');
   assert.equal(firstCallArg.columnTo, 'newColumntest');
 

package/src/new/main/edit-config/data-transforms-derived-fields/data-transforms.helpers.test.ts

@@ -49,6 +49,8 @@ LookupColumnFormat('should return empty string when no format is found', () => {
     INPUT_TYPE: 'REQ_REP' as const,
     OUTPUT_TYPE: 'TABLE' as const,
     TRANSFORMER_CONFIGURATION: { COLUMN_FORMATS: {} },
+    GROUPING_STRATEGY: 'NONE',
+    GROUP_KEY: null,
   });
 
   const result = lookupColumnFormat(mockData);
@@ -77,6 +79,8 @@ LookupColumnFormat('should return data with format when format exists', () => {
         [originalColumn]: newFormat,
       },
     },
+    GROUPING_STRATEGY: 'NONE',
+    GROUP_KEY: null,
   });
 
   const result = lookupColumnFormat(mockData);
@@ -102,6 +106,8 @@ LookupColumnFormat('should handle undefined COLUMN_FORMATS', () => {
     INPUT_TYPE: 'REQ_REP' as const,
     OUTPUT_TYPE: 'TABLE' as const,
     TRANSFORMER_CONFIGURATION: {},
+    GROUPING_STRATEGY: 'NONE',
+    GROUP_KEY: null,
   });
 
   const result = lookupColumnFormat(mockData);
@@ -128,6 +134,8 @@ LookupColumnFormat('should return existing format when format exists', () => {
         numericColumn: '#.##',
       },
     },
+    GROUPING_STRATEGY: 'NONE',
+    GROUP_KEY: null,
   });
 
   const result = lookupColumnFormat(mockData);
@@ -468,7 +476,7 @@ ValueExprCellRendereronChange.before.each(() => {
 });
 
 ValueExprCellRendereronChange('should call setColumnTransform when model exists', () => {
-  const datasourceKey = 'REQ_REP_Test';
+  const datasourceKey = 'REQ_REP_RESOURCE_ALIAS';
   const columnName = 'testColumn';
 
   // Using type assertions to match the expected type
@@ -518,7 +526,7 @@ ValueExprCellRendereronChange('should call setColumnTransform when model exists'
 });
 
 ValueExprCellRendereronChange('should call deleteColumnTransform when model is null', () => {
-  const datasourceKey = 'REQ_REP_Test';
+  const datasourceKey = 'REQ_REP_RESOURCE_ALIAS';
   const columnName = 'testColumn';
 
   const mockParams = {

package/src/new/main/edit-config/datasource-config/datasource-config-item.styles.ts

@@ -9,6 +9,12 @@ export const styles = css`
     gap: calc(var(--design-unit) * 2px);
   }
 
+  div.split {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
   rapid-combobox.datasource {
     margin-bottom: calc(var(--design-unit) * 2px);
   }

package/src/new/main/edit-config/datasource-config/datasource-config-item.template.ts

@@ -1,6 +1,12 @@
 import { Combobox } from '@genesislcap/foundation-ui';
 import { classNames, html, repeat, when, whenElse } from '@genesislcap/web-core';
-import { datasourceOutputs, DatasourceOutputTypes, selectors } from '../../../store';
+import {
+  datasourceGroupingStrategies,
+  DatasourceGroupingStrategy,
+  datasourceOutputs,
+  DatasourceOutputTypes,
+  selectors,
+} from '../../../store';
 import { datasourceInputForDisplay, TOOLTIP, tooltip } from '../../../utils';
 import type { DatasourceConfigItem } from './datasource-config-item';
 import { DatasourceChoice } from './types';
@@ -10,11 +16,52 @@ const datasourceAlias = html<DatasourceConfigItem>`
     <p class="label">Name${tooltip(TOOLTIP.DATASOURCES_NAME)}</p>
     <rapid-text-field
       value=${(x) => selectors.datasourceConfig.getDatasource(x.datasourceName!).KEY}
-      @change=${(x, ctx) => x.updateKeyHandler((<HTMLInputElement>ctx.event.target).value)}
+      @change=${(x, ctx) =>
+        x.updateKeyHandler((<HTMLInputElement>ctx.event.target).value, ctx.event)}
     ></rapid-text-field>
   </div>
 `;
 
+const groupingType = html<DatasourceConfigItem>`
+  <div class="split">
+    <div>
+      <p class="label">Grouping Strategy${tooltip(TOOLTIP.DATASOURCES_GROUPING_STRATEGY)}</p>
+      <rapid-select
+        :value=${(x) =>
+          selectors.datasourceConfig.getDatasource(x.datasourceName!).GROUPING_STRATEGY}
+        @change=${(x, ctx) =>
+          x.updateGroupingStrategyHandler(
+            (<HTMLSelectElement>ctx.event.target).value as DatasourceGroupingStrategy,
+          )}
+      >
+        ${repeat(
+          () => datasourceGroupingStrategies,
+          html<string>`
+            <rapid-option>${(x) => x}</rapid-option>
+          `,
+        )}
+      </rapid-select>
+    </div>
+    <div>
+      <p class="label">Grouping Key${tooltip(TOOLTIP.DATASOURCES_GROUPING_KEY)}</p>
+      <rapid-select
+        :value=${(x) => selectors.datasourceConfig.getDatasource(x.datasourceName!).GROUP_KEY}
+        @change=${(x, ctx) =>
+          x.updateGroupingByHandler((<HTMLSelectElement>ctx.event.target).value)}
+        ?disabled=${(x) =>
+          selectors.datasourceConfig.getDatasource(x.datasourceName!).GROUPING_STRATEGY === 'NONE'}
+      >
+        ${repeat(
+          (x) => x.groupingByFieldsNames ?? [],
+          html<string>`
+            <rapid-option>${(x) => x}</rapid-option>
+          `,
+        )}
+      </rapid-select>
+    </div>
+  </div>
+`;
+
 const processType = html<DatasourceConfigItem>`
   <div>
     <p class="label">Type${tooltip(TOOLTIP.DATASOURCES_TYPE)}</p>
@@ -46,6 +93,9 @@ const closeButton = html<DatasourceConfigItem>`
 const component = html<DatasourceConfigItem>`
   ${when((x) => x.canRemove, closeButton)}
   <div class="container">
+<div class="${() => classNames(['split', Boolean(selectors.baseConfig.getConfig().DOCUMENT_TEMPLATE_ID)])}">
+<div>
+    <p class="label">Datasource${tooltip(TOOLTIP.DATASOURCES_DATASOURCE)}</p>
     <rapid-combobox
       class="datasource ${(x) => classNames(['error', x.error !== 'none'])}"
       autocomplete="both"
@@ -66,7 +116,16 @@ const component = html<DatasourceConfigItem>`
         `,
       )}
     </rapid-combobox>
-    ${when((_) => Boolean(selectors.baseConfig.getConfig().DOCUMENT_TEMPLATE_ID), datasourceAlias)}
+</div>
+    ${when(
+      (_) =>
+        Boolean(selectors.baseConfig.getConfig().DOCUMENT_TEMPLATE_ID) ||
+        selectors.baseConfig.getConfig().OUTPUT_FORMAT !== 'CSV',
+      datasourceAlias,
+    )}
+</div>
+</div>
+    ${when((_) => Boolean(selectors.baseConfig.getConfig().DOCUMENT_TEMPLATE_ID), groupingType)}
     <!-- ${when((_) => selectors.baseConfig.getConfig().OUTPUT_FORMAT === 'CSV', processType)} -->
   </div>
 `;

package/src/new/main/edit-config/datasource-config/datasource-config-item.ts

@@ -3,14 +3,17 @@ import { Combobox } from '@genesislcap/foundation-ui';
 import { attr, customElement, GenesisElement, observable } from '@genesislcap/web-core';
 import {
   actions,
+  DatasourceGroupingStrategy,
   DatasourceInputTypes,
   DatasourceName,
   DatasourceOutputTypes,
+  selectors,
 } from '../../../store';
 import { Display } from '../../../types';
 import {
   buildDatasourceName,
   datasourceInputFromDisplay,
+  generateUniqueAlias,
   getDatasourceSchema,
   showNotificationToast,
 } from '../../../utils';
@@ -30,11 +33,23 @@ export class DatasourceConfigItem extends GenesisElement {
 
   @observable datasourceName: DatasourceName | null = null;
   @observable datasourceChoices: DatasourceChoice[] | null = null;
+  @observable groupingByFieldsNames: string[] | null = null;
   @attr({ mode: 'boolean', attribute: 'can-remove' }) canRemove: boolean = false;
 
   @attr position: 'below' | 'above' = 'below';
   @attr error: 'none' | 'invalid-datasource' | 'unknown' = 'none';
 
+  async connectedCallback(): Promise<void> {
+    super.connectedCallback();
+    try {
+      const datasource = selectors.datasourceConfig.getDatasource(this.datasourceName);
+      const schema = await this.getSchema(datasource.NAME);
+      this.groupingByFieldsNames = Object.keys(schema.properties);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
   deleteDatasourceHandler() {
     if (!this.canRemove) throw new Error('Trying to remove final datasource!');
     if (!this.datasourceName) throw new Error('deleteDatasourceHandler - Datasource key unset!');
@@ -43,13 +58,31 @@ export class DatasourceConfigItem extends GenesisElement {
     });
   }
 
-  updateKeyHandler(newKey: string) {
+  updateKeyHandler(newName: string, event?: Event) {
     if (!this.datasourceName) {
       throw new Error('updateKeyHandler - datasourceName unset');
     }
-    actions.datasourceConfig.updateDatasourceKey({
+
+    const allDatasources = selectors.datasourceConfig.getAllConfigSet();
+    const nameExists = Object.entries(allDatasources)
+      .filter(([key]) => key !== this.datasourceName)
+      .some(([, ds]) => ds.KEY.toLowerCase() === newName.toLowerCase());
+
+    if (nameExists) {
+      showNotificationToast({
+        title: 'Reporting Config',
+        body: `Name '${newName}' is already in use by another datasource.`,
+        toast: { type: 'error' as any },
+      });
+      if (event) {
+        (event.target as HTMLInputElement).value = allDatasources[this.datasourceName].KEY;
+      }
+      return;
+    }
+
+    actions.datasourceConfig.renameDatasource({
       key: this.datasourceName,
-      newKey,
+      newName,
     });
   }
 
@@ -63,6 +96,45 @@ export class DatasourceConfigItem extends GenesisElement {
     });
   }
 
+  async updateGroupingStrategyHandler(value: DatasourceGroupingStrategy) {
+    try {
+      if (value === 'NONE') {
+        actions.datasourceConfig.deleteGrouping({ key: this.datasourceName });
+        return;
+      }
+
+      const dsResource = selectors.datasourceConfig.getDatasource(this.datasourceName).NAME;
+      const schema = await this.getSchema(dsResource);
+      if (!schema.properties) throw new Error(`schema properties for ${dsResource} undefined`);
+
+      const fields = Object.keys(schema.properties);
+      actions.datasourceConfig.setGrouping({
+        key: this.datasourceName,
+        grouping: { GROUPING_STRATEGY: value, GROUP_KEY: fields[0] },
+      });
+      this.groupingByFieldsNames = Object.keys(schema.properties);
+    } catch (e) {
+      const errorMsg = e instanceof Error ? `\n\n${e.message}` : '';
+      showNotificationToast({
+        title: 'Reporting Config',
+        body: `Error fetching field data for datasource ${this.datasourceName}.${errorMsg}`,
+        toast: { type: 'critical' as any },
+      });
+      this.error = 'unknown';
+      console.error(e);
+    }
+  }
+
+  updateGroupingByHandler(value: string) {
+    const datasource = selectors.datasourceConfig.getDatasource(this.datasourceName);
+    if (datasource.GROUPING_STRATEGY === 'NONE')
+      throw new Error('Cannot set group by field when GROUPING_STRATEGY is NONE');
+    actions.datasourceConfig.setGrouping({
+      key: this.datasourceName,
+      grouping: { GROUPING_STRATEGY: datasource.GROUPING_STRATEGY, GROUP_KEY: value },
+    });
+  }
+
   async updateDatasourceSourceHandler(selectedOption: Combobox) {
     try {
       if ((selectedOption?.selectedOptions ?? []).filter((x) => x).length === 0) {
@@ -72,7 +144,7 @@ export class DatasourceConfigItem extends GenesisElement {
         return;
       }
       const option = selectedOption.selectedOptions[0];
-      const KEY = option.value;
+      const RESOURCE_NAME = option.value;
       const dataAttr = <Display.DatasourceInputTypes | null>(
         option.getAttribute('data-bubble-content')
       );
@@ -83,22 +155,49 @@ export class DatasourceConfigItem extends GenesisElement {
         throw new Error('updateKeyHandler - datasourceName or INPUT_TYPE null');
       }
 
-      const schema = await this.getSchema(KEY);
-      if (!schema.properties) throw new Error(`schema properties for ${KEY} undefined`);
+      const schema = await this.getSchema(RESOURCE_NAME);
+      if (!schema.properties) throw new Error(`schema properties for ${RESOURCE_NAME} undefined`);
 
       const fields = Object.keys(schema.properties);
 
+      // Check for duplicate aliases
+      const allDatasources = selectors.datasourceConfig.getAllConfigSet();
+      const existingAliases = new Set(
+        Object.entries(allDatasources)
+          .filter(([key]) => key !== this.datasourceName)
+          .map(([, ds]) => ds.KEY),
+      );
+
+      const uniqueAlias = generateUniqueAlias(RESOURCE_NAME, existingAliases);
+
+      // Preserve index
+      const originalIndex = Object.keys(allDatasources).indexOf(this.datasourceName);
+
       actions.datasourceConfig.deleteDatasource({ key: this.datasourceName });
       actions.datasourceConfig.initDatasourceConfiguration({
         base: {
-          KEY,
+          KEY: uniqueAlias,
+          NAME: RESOURCE_NAME,
           INPUT_TYPE: INPUT_TYPE as DatasourceInputTypes,
         },
         fields,
       });
-      const datasourceName = buildDatasourceName(KEY, INPUT_TYPE as DatasourceInputTypes);
+      const datasourceName = buildDatasourceName(
+        uniqueAlias,
+        RESOURCE_NAME,
+        INPUT_TYPE as DatasourceInputTypes,
+      );
+
+      if (originalIndex !== -1) {
+        actions.datasourceConfig.reorderDatasource({
+          key: datasourceName,
+          newIndex: originalIndex,
+        });
+      }
+
       setDefaultFormatsForDatasource(datasourceName, schema);
       this.error = 'none';
+      this.groupingByFieldsNames = Object.keys(schema.properties);
     } catch (e: unknown) {
       const errorMsg = e instanceof Error ? `\n\n${e.message}` : '';
       showNotificationToast({

package/src/new/main/edit-config/datasource-config/datasources-config-container.helpers.test.ts

@@ -190,15 +190,17 @@ CreateNewDatasourceConfig.before.each(() => {
 });
 
 CreateNewDatasourceConfig('should exit when no valid datasources are available', async () => {
-  const mockChoices = [{ name: 'test', inputType: 'REQ_REP' as DatasourceInputTypes }];
+  const mockChoices = [{ name: 'testSource', inputType: 'REQ_REP' as DatasourceInputTypes }];
 
   const getAllConfigSetStub = sinon.stub(selectors.datasourceConfig, 'getAllConfigSet').returns({
-    REQ_REP_test: {
-      KEY: 'REQ_REP_test',
-      NAME: 'Test Datasource',
+    REQ_REP_testSource_testSource: {
+      KEY: 'testSource',
+      NAME: 'testSource',
       INPUT_TYPE: 'REQ_REP' as const,
       OUTPUT_TYPE: 'TABLE' as const,
       TRANSFORMER_CONFIGURATION: { INCLUDE_COLUMNS: [] },
+      GROUPING_STRATEGY: 'NONE',
+      GROUP_KEY: null,
     },
   });
 
@@ -215,15 +217,17 @@ CreateNewDatasourceConfig('should exit when no valid datasources are available',
 CreateNewDatasourceConfig(
   'should exit when trying to add multiple datasources with CSV format',
   async () => {
-    const mockChoices = [{ name: 'test', inputType: 'REQ_REP' as DatasourceInputTypes }];
+    const mockChoices = [{ name: 'testSource', inputType: 'REQ_REP' as DatasourceInputTypes }];
 
     const getAllConfigSetStub = sinon.stub(selectors.datasourceConfig, 'getAllConfigSet').returns({
-      REQ_REP_existing: {
-        KEY: 'REQ_REP_existing',
-        NAME: 'Existing Datasource',
+      REQ_REP_existingSource_existingAlias: {
+        KEY: 'existingAlias',
+        NAME: 'existingSource',
         INPUT_TYPE: 'REQ_REP' as const,
         OUTPUT_TYPE: 'TABLE' as const,
         TRANSFORMER_CONFIGURATION: { INCLUDE_COLUMNS: [] },
+        GROUPING_STRATEGY: 'NONE' as const,
+        GROUP_KEY: null,
       },
     });
 
@@ -238,7 +242,7 @@ CreateNewDatasourceConfig(
 
     await createNewDatasourceConfig(getSchemaStub)(mockChoices);
 
-    assert.equal(getAllConfigSetStub.callCount, 2, 'getAllConfigSetStub should be called twice');
+    assert.equal(getAllConfigSetStub.callCount, 1, 'getAllConfigSetStub should be called once');
     assert.equal(getConfigStub.callCount, 1, 'getConfigStub should be called once');
     // assert.ok(loggerStub.calledWith('Cannot add multiple datasources when using csv file without a template'));
     if (loggerStub.args.length > 0) {
@@ -256,15 +260,17 @@ CreateNewDatasourceConfig(
 CreateNewDatasourceConfig(
   'should allow adding multiple datasources with CSV format IF template is selected',
   async () => {
-    const mockChoices = [{ name: 'test', inputType: 'REQ_REP' as DatasourceInputTypes }];
+    const mockChoices = [{ name: 'testSource', inputType: 'REQ_REP' as DatasourceInputTypes }];
 
     const getAllConfigSetStub = sinon.stub(selectors.datasourceConfig, 'getAllConfigSet').returns({
-      REQ_REP_existing: {
-        KEY: 'REQ_REP_existing',
-        NAME: 'Existing Datasource',
+      REQ_REP_existingSource_existingAlias: {
+        KEY: 'existingAlias',
+        NAME: 'existingSource',
         INPUT_TYPE: 'REQ_REP' as const,
         OUTPUT_TYPE: 'TABLE' as const,
         TRANSFORMER_CONFIGURATION: { INCLUDE_COLUMNS: [] },
+        GROUPING_STRATEGY: 'NONE' as const,
+        GROUP_KEY: null,
       },
     });
 
@@ -287,14 +293,14 @@ CreateNewDatasourceConfig(
 
     await createNewDatasourceConfig(getSchemaStub)(mockChoices);
 
-    assert.ok(getAllConfigSetStub.calledTwice);
+    assert.ok(getAllConfigSetStub.calledOnce);
     assert.ok(getSchemaStub.calledOnce);
     assert.ok(initConfigStub.called);
   },
 );
 
 CreateNewDatasourceConfig('should successfully create new datasource configuration', async () => {
-  const mockChoices = [{ name: 'test', inputType: 'REQ_REP' as DatasourceInputTypes }];
+  const mockChoices = [{ name: 'testSource', inputType: 'REQ_REP' as DatasourceInputTypes }];
 
   const getAllConfigSetStub = sinon.stub(selectors.datasourceConfig, 'getAllConfigSet').returns({});
 
@@ -316,16 +322,19 @@ CreateNewDatasourceConfig('should successfully create new datasource configurati
 
   await createNewDatasourceConfig(getSchemaStub)(mockChoices);
 
-  assert.ok(getAllConfigSetStub.calledTwice);
+  assert.ok(getAllConfigSetStub.calledOnce);
   assert.ok(getSchemaStub.calledOnce);
   assert.ok(
-    initConfigStub.calledWith({
-      base: {
-        KEY: 'test',
-        INPUT_TYPE: 'REQ_REP',
-      },
-      fields: ['field1', 'field2'],
-    }),
+    initConfigStub.calledWith(
+      sinon.match({
+        base: sinon.match({
+          KEY: 'testSource',
+          NAME: 'testSource',
+          INPUT_TYPE: 'REQ_REP',
+        }),
+        fields: sinon.match.array.deepEquals(['field1', 'field2']),
+      }),
+    ),
   );
 });
 

package/src/new/main/edit-config/datasource-config/datasources-config-container.helpers.ts

@@ -1,7 +1,7 @@
 import { Connect, logger } from '@genesislcap/foundation-comms';
 import { actions, selectors } from '../../../store';
 import { Genesis } from '../../../types';
-import { buildDatasourceName } from '../../../utils';
+import { buildDatasourceName, generateUniqueAlias } from '../../../utils';
 import { setDefaultFormatsForDatasource } from '../data-transforms-derived-fields/data-transforms.helpers';
 import { DatasourceChoice } from './types';
 
@@ -10,21 +10,19 @@ export type GetGenesisSchema = (resource: string) => Promise<Genesis.JSONSchema7
 export const createNewDatasourceConfig =
   (getSchema: GetGenesisSchema) =>
   async (choices: DatasourceChoice[]): Promise<void> => {
+    const allDatasources = selectors.datasourceConfig.getAllConfigSet();
     const validDatasources =
       choices.filter(
-        (ds) =>
-          !(
-            buildDatasourceName(ds.name, ds.inputType) in
-            selectors.datasourceConfig.getAllConfigSet()
-          ),
+        (ds) => !(buildDatasourceName(ds.name, ds.name, ds.inputType) in allDatasources),
       ) ?? [];
+
     if (validDatasources?.length < 1) {
       logger.error('No datasources available to create new config from');
       return;
     }
     const baseConfig = selectors.baseConfig.getConfig();
     if (
-      Object.keys(selectors.datasourceConfig.getAllConfigSet()).length > 0 &&
+      Object.keys(allDatasources).length > 0 &&
       baseConfig.OUTPUT_FORMAT === 'CSV' &&
       !baseConfig.DOCUMENT_TEMPLATE_ID
     ) {
@@ -32,13 +30,23 @@ export const createNewDatasourceConfig =
       return;
     }
 
-    const { KEY, INPUT_TYPE, schema } = await findFirstValidDatasource(getSchema)(validDatasources);
+    const {
+      KEY: RESOURCE_NAME,
+      INPUT_TYPE,
+      schema,
+    } = await findFirstValidDatasource(getSchema)(validDatasources);
+
+    // Check for duplicate aliases
+    const existingAliases = new Set(Object.values(allDatasources).map((ds) => ds.KEY));
+
+    const uniqueAlias = generateUniqueAlias(RESOURCE_NAME, existingAliases);
 
-    const datasourceName = buildDatasourceName(KEY, INPUT_TYPE);
+    const datasourceName = buildDatasourceName(uniqueAlias, RESOURCE_NAME, INPUT_TYPE);
 
     actions.datasourceConfig.initDatasourceConfiguration({
       base: {
-        KEY,
+        KEY: uniqueAlias,
+        NAME: RESOURCE_NAME,
         INPUT_TYPE,
       },
       fields: Object.keys(schema.properties!), // Properties is valid as we check in findFirstValidDatasource

package/src/new/main/edit-config/datasource-config/datasources-config-container.template.ts

@@ -37,6 +37,12 @@ const container = html<DatasourcesConfigContainer>`
     ${repeat(
       (_) => Object.keys(selectors.datasourceConfig.getAllConfigSet()),
       html<string, DatasourcesConfigContainer>`
+        ${when(
+          (_, ctx) => !ctx.isFirst,
+          html`
+            <rapid-divider></rapid-divider>
+          `,
+        )}
         <datasource-config-item
           :datasourceName=${(x) => x}
           :datasourceChoices=${(_, c) => c.parent.datasourceChoices}