@genesislcap/pbc-reporting-ui 15.19.0 → 15.19.1

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

@@ -1,76 +0,0 @@
-import { css } from '@genesislcap/web-core';
-import { formLabel, optionMessageBubble } from '../../../styles';
-
-export const styles = css`
-  ${optionMessageBubble()}
-  ${formLabel}
-
-  div.container {
-    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);
-  }
-
-  rapid-combobox.datasource.error {
-    border-color: var(--error-color);
-  }
-
-  div.configs {
-    display: grid;
-    grid-template-columns: 5fr 2fr;
-    gap: calc(var(--design-unit) * 3px);
-  }
-
-  rapid-text-field::part(root) {
-    height: calc((var(--base-height-multiplier) * (var(--design-unit) - 1)) * 1.35px);
-  }
-
-  rapid-select,
-  rapid-combobox,
-  rapid-text-field {
-    width: 100%;
-    min-width: unset;
-    height: 41px;
-  }
-
-  div.configs rapid-select,
-  div.configs rapid-combobox {
-    min-width: 20%;
-  }
-
-  rapid-select::part(listbox),
-  rapid-combobox::part(listbox) {
-    max-height: 20vh;
-  }
-
-  div.header {
-    display: grid;
-    grid-template-columns: 4fr 1fr;
-    margin-bottom: calc(var(--design-unit) * 1.2px);
-  }
-
-  div.close-button {
-    display: flex;
-    flex-direction: row-reverse;
-  }
-
-  rapid-button.close {
-    margin: 5px;
-    background-color: var(--error-color);
-    min-width: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px);
-    width: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px);
-    height: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px);
-  }
-
-  rapid-button.close::part(control) {
-    padding: 0;
-  }
-`;

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

@@ -1,141 +0,0 @@
-import { Combobox } from '@genesislcap/foundation-ui';
-import { classNames, html, repeat, when, whenElse } from '@genesislcap/web-core';
-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';
-
-const datasourceAlias = html<DatasourceConfigItem>`
-  <div>
-    <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, 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>
-    <rapid-select
-      :value=${(x) => selectors.datasourceConfig.getDatasource(x.datasourceName!).OUTPUT_TYPE}
-      @change=${(x, ctx) =>
-        x.updateOutputTypeHandler(
-          (<HTMLSelectElement>ctx.event.target).value as DatasourceOutputTypes,
-        )}
-    >
-      ${repeat(
-        () => datasourceOutputs,
-        html<string>`
-          <rapid-option>${(x) => x}</rapid-option>
-        `,
-      )}
-    </rapid-select>
-  </div>
-`;
-
-const closeButton = html<DatasourceConfigItem>`
-  <div class="close-button">
-    <rapid-button class="close" @click=${(x) => x.deleteDatasourceHandler()}>
-      <rapid-icon name="minus" size="md"></rapid-icon>
-    </rapid-button>
-  </div>
-`;
-
-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"
-      :value=${(x) => selectors.datasourceConfig.getDatasource(x.datasourceName!).NAME}
-      @change=${(x, ctx) => x.updateDatasourceSourceHandler(<Combobox>ctx.event.target)}
-      position="${(x) => x.position}"
-    >
-      ${repeat(
-        (x) => x.datasourceChoices!,
-        html<DatasourceChoice>`
-          <rapid-option
-            class="message-bubble"
-            data-color="${(x) => (x.inputType === 'REQ_REP' ? 'red' : 'blue')}"
-            data-bubble-content="${(x) => datasourceInputForDisplay(x.inputType)}"
-          >
-            ${(x) => x.name}
-          </rapid-option>
-        `,
-      )}
-    </rapid-combobox>
-</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>
-`;
-
-export const template = html<DatasourceConfigItem>`
-  ${whenElse(
-    (x) => x.datasourceName && x.datasourceChoices,
-    component,
-    html`
-      Missing attributes
-    `,
-  )}
-`;

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

@@ -1,212 +0,0 @@
-import { Connect } from '@genesislcap/foundation-comms';
-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';
-import { setDefaultFormatsForDatasource } from '../data-transforms-derived-fields/data-transforms.helpers';
-import { styles } from './datasource-config-item.styles';
-import { template } from './datasource-config-item.template';
-import { DatasourceChoice } from './types';
-
-@customElement({
-  name: 'datasource-config-item',
-  template,
-  styles,
-})
-export class DatasourceConfigItem extends GenesisElement {
-  @Connect connect!: Connect;
-  private getSchema = getDatasourceSchema(this.connect);
-
-  @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!');
-    actions.datasourceConfig.deleteDatasource({
-      key: this.datasourceName,
-    });
-  }
-
-  updateKeyHandler(newName: string, event?: Event) {
-    if (!this.datasourceName) {
-      throw new Error('updateKeyHandler - datasourceName unset');
-    }
-
-    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,
-      newName,
-    });
-  }
-
-  updateOutputTypeHandler(newType: DatasourceOutputTypes) {
-    if (!this.datasourceName) {
-      throw new Error('updateKeyHandler - datasourceName unset');
-    }
-    actions.datasourceConfig.updateDatasourceOutputType({
-      key: this.datasourceName,
-      newType,
-    });
-  }
-
-  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) {
-        // This occurs when the user types arbitrary input into the combo box which doesn't
-        // match any of the options
-        this.error = 'invalid-datasource';
-        return;
-      }
-      const option = selectedOption.selectedOptions[0];
-      const RESOURCE_NAME = option.value;
-      const dataAttr = <Display.DatasourceInputTypes | null>(
-        option.getAttribute('data-bubble-content')
-      );
-      if (!dataAttr) throw new Error(`Unable to read datasource from attribute ${dataAttr}`);
-      const INPUT_TYPE = datasourceInputFromDisplay(dataAttr);
-
-      if (!this.datasourceName || !INPUT_TYPE) {
-        throw new Error('updateKeyHandler - datasourceName or INPUT_TYPE null');
-      }
-
-      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: uniqueAlias,
-          NAME: RESOURCE_NAME,
-          INPUT_TYPE: INPUT_TYPE as DatasourceInputTypes,
-        },
-        fields,
-      });
-      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({
-        title: 'Reporting Config',
-        body: `Error fetching field data for datasource ${selectedOption.selectedOptions[0].value}.${errorMsg}`,
-        toast: { type: 'critical' as any },
-      });
-      this.error = 'unknown';
-      console.error(e);
-    }
-  }
-}