@genesislcap/pbc-reporting-ui 14.396.4 → 14.397.0

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}

package/src/new/main/edit-config/shared/datasource-data-base-component.helpers.ts.ts

@@ -127,9 +127,22 @@ export function datasourceNameFromDisplay(input: string): DatasourceName {
     .replace(/[)]/g, '')
     .split('(')
     .map((x) => x.trim());
-  return (datasourceInputFromDisplay(parts[1] as Display.DatasourceInputTypes) +
-    '_' +
-    parts[0]) as DatasourceName;
+  const type = datasourceInputFromDisplay(parts[1] as Display.DatasourceInputTypes);
+  const name = parts[0];
+
+  const match = Object.entries(selectors.datasourceConfig.getAllConfigSet()).find(
+    ([_, ds]) => ds.KEY === name && ds.INPUT_TYPE === type,
+  );
+
+  if (!match) {
+    /**
+     * This can occur when the datasource is first being initialized and the name
+     * hasn't yet been persisted to the store.
+     */
+    return `${type}_${name}_${name}` as DatasourceName;
+  }
+
+  return match[0] as DatasourceName;
 }
 
 /**
@@ -198,14 +211,11 @@ export async function fetchDatasourceSpecs(
 
   try {
     return await Promise.all(
-      Object.values(selectors.datasourceConfig.getAllConfigSet())
-        .filter(
-          ({ NAME, INPUT_TYPE }) =>
-            INPUT_TYPE === 'REQ_REP' && `${INPUT_TYPE}_${NAME}` === datasourceName,
-        )
-        .map(async ({ NAME }) => ({
-          spec: await getSchema(NAME),
-          name: datasourceNameForDisplay(NAME, 'REQ_REP'),
+      Object.entries(selectors.datasourceConfig.getAllConfigSet())
+        .filter(([key, ds]) => ds.INPUT_TYPE === 'REQ_REP' && key === datasourceName)
+        .map(async ([_, { KEY, NAME }]) => ({
+          spec: await getSchema(NAME), // Fetch schema by Resource Name
+          name: datasourceNameForDisplay(KEY, 'REQ_REP'), // Display Alias
         })),
     );
   } catch (e) {

package/src/new/main/edit-config/shared/datasource-data-base-component.test.ts

@@ -42,11 +42,15 @@ export type SelectRendererParams = Parameters<SelectRenderer['init']>[typeof FIR
 // DatasourceNameFromDisplay tests
 const DatasourceNameFromDisplayTests = suite('datasourceNameFromDisplay()');
 
+DatasourceNameFromDisplayTests.before.each(() => {
+  sinon.restore();
+});
+
 DatasourceNameFromDisplayTests(
   'Correctly builds datasource key from Snapshot (REQ_REP) input',
   () => {
     const input = 'myService (Snapshot)';
-    const expected = 'REQ_REP_myService';
+    const expected = 'REQ_REP_myService_myService';
     assert.equal(datasourceNameFromDisplay(input), expected);
   },
 );
@@ -55,7 +59,7 @@ DatasourceNameFromDisplayTests(
   'Correctly builds datasource key from Data Pipeline (DATA_PIPELINE) input',
   () => {
     const input = 'dataFlow (Data Pipeline)';
-    const expected = 'DATA_PIPELINE_dataFlow';
+    const expected = 'DATA_PIPELINE_dataFlow_dataFlow';
     assert.equal(datasourceNameFromDisplay(input), expected);
   },
 );
@@ -101,6 +105,8 @@ LookupColumnIsIncluded('returns true when column is in included', () => {
     NAME: 'Test Datasource',
     INPUT_TYPE: 'REQ_REP' as const,
     OUTPUT_TYPE: 'TABLE' as const,
+    GROUPING_STRATEGY: 'NONE' as const,
+    GROUP_KEY: null,
     TRANSFORMER_CONFIGURATION: { INCLUDE_COLUMNS: ['testColumn', 'otherColumn'] },
   };
 
@@ -122,6 +128,8 @@ LookupColumnIsIncluded('returns false when column is not in filters', () => {
     NAME: 'Test Datasource',
     INPUT_TYPE: 'REQ_REP' as const,
     OUTPUT_TYPE: 'TABLE' as const,
+    GROUPING_STRATEGY: 'NONE' as const,
+    GROUP_KEY: null,
     TRANSFORMER_CONFIGURATION: { INCLUDE_COLUMNS: ['testColumn', 'otherColumn'] },
   };
 
@@ -143,6 +151,8 @@ LookupColumnIsIncluded('returns false when INCLUDE_COLUMNS is undefined', () =>
     NAME: 'Test Datasource',
     INPUT_TYPE: 'REQ_REP' as const,
     OUTPUT_TYPE: 'TABLE' as const,
+    GROUPING_STRATEGY: 'NONE' as const,
+    GROUP_KEY: null,
     TRANSFORMER_CONFIGURATION: { INCLUDE_COLUMNS: undefined },
   };
 
@@ -164,6 +174,8 @@ LookupColumnIsIncluded('returns false when INCLUDE_COLUMNS is empty array', () =
     NAME: 'Test Datasource',
     INPUT_TYPE: 'REQ_REP' as const,
     OUTPUT_TYPE: 'TABLE' as const,
+    GROUPING_STRATEGY: 'NONE' as const,
+    GROUP_KEY: null,
     TRANSFORMER_CONFIGURATION: { INCLUDE_COLUMNS: [] },
   };
 

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

@@ -11,7 +11,7 @@ export const template = html<TabbedDatasourceContainer>`
         (_) => Object.entries(selectors.datasourceConfig.getAllConfigSet()),
         html<[DatasourceName, DatasourceConfig[DatasourceName]], TabbedDatasourceContainer>`
           <rapid-tab @click=${(x, c) => c.parent.handleDatasourceChanged(x[0])}>
-            ${(x) => x[1].NAME}
+            ${(x) => x[1].KEY}
           </rapid-tab>
         `,
       )}

package/src/new/store/slices/datasources-config.ts

@@ -6,6 +6,7 @@ import { buildDatasourceName } from '../../utils';
 import { getDefaultFormat } from '../../utils/format-utils';
 import {
   DatasourceConfig,
+  DatasourceGrouping,
   DatasourceName,
   DatasourceOutputTypes,
   deselectedColumns,
@@ -21,18 +22,20 @@ export const datasourceSlice = createSlice({
     initDatasourceConfiguration(
       state: DatasourceConfig,
       action: PayloadAction<{
-        base: Pick<DatasourceConfig[DatasourceName], 'KEY' | 'INPUT_TYPE'>;
+        base: Pick<DatasourceConfig[DatasourceName], 'KEY' | 'NAME' | 'INPUT_TYPE'>;
         fields: string[];
       }>,
     ) {
-      const { KEY, INPUT_TYPE } = action.payload.base;
-      const key: DatasourceName = buildDatasourceName(KEY, INPUT_TYPE);
+      const { KEY, NAME, INPUT_TYPE } = action.payload.base;
+      const key: DatasourceName = buildDatasourceName(KEY, NAME, INPUT_TYPE);
       state[key] = {
         KEY: KEY,
         INPUT_TYPE: INPUT_TYPE,
-        NAME: KEY,
+        NAME: NAME,
         OUTPUT_TYPE: 'TABLE',
         TRANSFORMER_CONFIGURATION: {},
+        GROUPING_STRATEGY: 'NONE',
+        GROUP_KEY: null,
       };
       action.payload.fields.forEach((field) => {
         datasourceSlice.caseReducers.setColumnRename(state, {
@@ -54,11 +57,43 @@ export const datasourceSlice = createSlice({
         });
       });
     },
-    updateDatasourceKey(
+    reorderDatasource(
       state: DatasourceConfig,
-      action: PayloadAction<{ key: DatasourceName; newKey: string }>,
+      action: PayloadAction<{ key: DatasourceName; newIndex: number }>,
     ) {
-      state[action.payload.key].KEY = action.payload.newKey;
+      const { key, newIndex } = action.payload;
+      const entries = Object.entries(state);
+      const currentIndex = entries.findIndex(([k]) => k === key);
+
+      if (currentIndex === -1) return state;
+
+      const [item] = entries.splice(currentIndex, 1);
+      entries.splice(newIndex, 0, item);
+
+      return Object.fromEntries(entries) as DatasourceConfig;
+    },
+    renameDatasource(
+      state: DatasourceConfig,
+      action: PayloadAction<{ key: DatasourceName; newName: string }>,
+    ) {
+      const { key: oldKey, newName } = action.payload;
+      const datasource = state[oldKey];
+      if (!datasource) {
+        return;
+      }
+      const newKey = buildDatasourceName(newName, datasource.NAME, datasource.INPUT_TYPE);
+      if (state[newKey] && newKey !== oldKey) {
+        return;
+      }
+
+      return Object.fromEntries(
+        Object.entries(state).map(([k, v]) => {
+          if (k === oldKey) {
+            return [newKey, { ...v, KEY: newName }];
+          }
+          return [k, v];
+        }),
+      ) as DatasourceConfig;
     },
     updateDatasourceOutputType(
       state: DatasourceConfig,
@@ -224,6 +259,22 @@ export const datasourceSlice = createSlice({
       const { [column]: _, ...rest } = state[key].TRANSFORMER_CONFIGURATION?.COLUMN_FORMATS ?? {};
       state[key].TRANSFORMER_CONFIGURATION.COLUMN_FORMATS = rest;
     },
+    setGrouping(
+      state: DatasourceConfig,
+      action: PayloadAction<{
+        key: DatasourceName;
+        grouping: Exclude<DatasourceGrouping, { GROUPING_STRATEGY: 'NONE' }>;
+      }>,
+    ) {
+      const { key, grouping } = action.payload;
+      state[key].GROUPING_STRATEGY = grouping.GROUPING_STRATEGY;
+      state[key].GROUP_KEY = grouping.GROUP_KEY;
+    },
+    deleteGrouping(state: DatasourceConfig, action: PayloadAction<{ key: DatasourceName }>) {
+      const { key } = action.payload;
+      state[key].GROUPING_STRATEGY = 'NONE';
+      state[key].GROUP_KEY = null;
+    },
   },
   selectors: {
     getAllConfigSet(state: DatasourceConfig) {

package/src/new/store/slices/types.ts

@@ -16,9 +16,27 @@ export const datasourceOutputs = [
 ] as const;
 export type DatasourceOutputTypes = (typeof datasourceOutputs)[number];
 
-// Key to uniquely identify each data source, must be keyed on the input type as
-// the names are not unique between the different data sources
-export type DatasourceName = `${DatasourceInputTypes}_${string}`;
+export const datasourceGroupingStrategies = ['NONE', 'MULTI_SHEET', 'LOOKUP_TABLE'] as const;
+export type DatasourceGroupingStrategy = (typeof datasourceGroupingStrategies)[number];
+export type DatasourceGrouping =
+  | {
+      GROUPING_STRATEGY: Extract<DatasourceGroupingStrategy, 'NONE'>;
+      GROUP_KEY: null;
+    }
+  | {
+      GROUPING_STRATEGY: Extract<DatasourceGroupingStrategy, 'MULTI_SHEET' | 'LOOKUP_TABLE'>;
+      GROUP_KEY: string;
+    };
+
+/**
+ * Server KEY => This is an alias (this needs to be unique). This is presented as "Name" input on the UI, rapid-text-field
+ * Server NAME => The name of the datasource (matches req_rep). This is presented as rapid-select
+ * DatasoureName to uniquely identify each data source, must be keyed on the input type as
+ * the names are not unique between the different data sources
+ */
+export type AliasKey = string;
+export type ServerDatasourceName = string;
+export type DatasourceName = `${DatasourceInputTypes}_${ServerDatasourceName}_${AliasKey}`;
 
 export type TransformerConfig = {
   COLUMN_RENAMES?: { [k: string]: string };
@@ -44,7 +62,7 @@ export type DatasourceConfig = {
     INPUT_TYPE: DatasourceInputTypes;
     OUTPUT_TYPE: DatasourceOutputTypes;
     TRANSFORMER_CONFIGURATION: TransformerConfig;
-  };
+  } & DatasourceGrouping;
 };
 
 // BASE-CONFIG

package/src/new/types/misc.ts

@@ -1,5 +1,11 @@
 import type { JSONSchema7 as JSONShemaBase } from 'json-schema';
-import type { BaseConfig, DatasourceConfig, DatasourceName, Schedule } from '../store';
+import type {
+  BaseConfig,
+  DatasourceConfig,
+  DatasourceName,
+  Schedule,
+  DatasourceGrouping,
+} from '../store';
 
 export namespace Genesis {
   export const genesisFieldTypes = [
@@ -28,7 +34,8 @@ export namespace Genesis {
   };
 
   export type ServerReportConfig = Omit<BaseConfig, 'SCHEDULE'> & {
-    DATA_SOURCES: DatasourceConfig[DatasourceName][];
+    DATA_SOURCES: (Omit<DatasourceConfig[DatasourceName], 'GROUPING_STRATEGY' | 'GROUP_KEY'> &
+      (Exclude<DatasourceGrouping, { GROUPING_STRATEGY: 'NONE' }> | {}))[];
     SCHEDULES: Schedule[];
   };