@genesislcap/pbc-reporting-ui 15.19.0 → 15.19.1

package/src/new/main/edit-config/outputs-config/outputs-config.ts

@@ -1,66 +0,0 @@
-import { Connect, Message } from '@genesislcap/foundation-comms';
-import { User } from '@genesislcap/foundation-user';
-import { logger } from '@genesislcap/foundation-utils';
-import { Multiselect } from '@genesislcap/rapid-design-system';
-import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
-import { actions } from '../../../store';
-import { showNotificationToast } from '../../../utils';
-import { styles } from './outputs-config.style';
-import { OutputChoice, template } from './outputs-config.template';
-
-@customElement({
-  name: 'outputs-config',
-  template,
-  styles,
-})
-export class OutputsConfig extends GenesisElement {
-  @Connect connect: Connect;
-  @User user!: User;
-
-  @observable outputChoices: OutputChoice[] | null = null;
-
-  multiselect: Multiselect;
-
-  async connectedCallback(): Promise<void> {
-    super.connectedCallback();
-    await this.fetchOutputs();
-  }
-
-  updateOutputDestinationHandler(): void {
-    const options = this.multiselect.selectedOptions;
-    actions.baseConfig.setOutputs({
-      ids: options.map((option) => (typeof option === 'string' ? option : option.value)),
-    });
-  }
-
-  private async fetchOutputs(): Promise<void> {
-    try {
-      const notifyResponse = await this.connect.request('NOTIFY_DESTINATIONS', {
-        REQUEST: {},
-      });
-      if (!notifyResponse?.REPLY) throw new Error('NOTIFY_DESTINATIONS request');
-
-      this.outputChoices = notifyResponse.REPLY.map(
-        ({ ID, NAME, TOPIC }) =>
-          <OutputChoice>{
-            type: 'NOTIFY',
-            id: ID,
-            name: NAME,
-            topic: TOPIC,
-          },
-      );
-    } catch (err) {
-      if ((<Message>err.receivedMessage).ERROR?.some((c) => c.CODE === 'NOT_AUTHORISED')) {
-        // In the specific error case the user isn't authorized then we're gating this component
-        // via the template anyway
-        return;
-      }
-      logger.error(err);
-      showNotificationToast({
-        title: 'Reporting Config',
-        body: 'There were errors when loading the available output destinations',
-        toast: { type: 'critical' as any },
-      });
-    }
-  }
-}

package/src/new/main/edit-config/row-filters/row-filters-tutorial.styles.ts

@@ -1,16 +0,0 @@
-import { css } from '@genesislcap/web-core';
-
-export const styles = css`
-  div.centering {
-    display: flex;
-    align-items: center;
-  }
-
-  div.centering rapid-button {
-    margin-left: calc(var(--design-unit) * 2.5px);
-  }
-
-  div.centering p {
-    width: 90%;
-  }
-`;

package/src/new/main/edit-config/row-filters/row-filters-tutorial.template.ts

@@ -1,229 +0,0 @@
-import { ExpressionBuilderTypes, RuleExpression } from '@genesislcap/foundation-zero';
-import { html, ref } from '@genesislcap/web-core';
-import type { RowFiltersTutorial } from './row-filters-tutorial';
-
-const rowFiltersExampleFields: ExpressionBuilderTypes.Field[] = [
-  {
-    fieldId: 'SIDE',
-    label: 'SIDE',
-    input: 'select',
-    type: 'enum',
-    values: {
-      BUY: 'BUY',
-      SELL: 'SELL',
-    },
-  },
-  {
-    fieldId: 'CURRENCY',
-    label: 'CURRENCY',
-    input: 'text',
-    type: 'string',
-  },
-  {
-    fieldId: 'PRICE',
-    label: 'PRICE',
-    input: 'number',
-    type: 'long',
-  },
-];
-
-const rowFiltersDateExampleFields: ExpressionBuilderTypes.Field[] = [
-  {
-    fieldId: 'TRADE_DATE',
-    label: 'TRADE_DATE',
-    input: 'date',
-    type: 'date',
-  },
-];
-
-const rowFiltersExampleModel: RuleExpression.Expression['PredicateExpression'] = {
-  OPERATION: 'OR',
-  TYPE: 'PREDICATE_EXPRESSION',
-  EXPRESSIONS: [
-    {
-      TYPE: 'BINARY_EXPRESSION',
-      OPERATION: 'EQUALS',
-      LEFT: {
-        TYPE: 'FIELD',
-        NAME: 'SIDE',
-      },
-      RIGHT: {
-        TYPE: 'STRING',
-        VALUE: 'BUY',
-      },
-    },
-    {
-      TYPE: 'PREDICATE_EXPRESSION',
-      OPERATION: 'AND',
-      EXPRESSIONS: [
-        {
-          TYPE: 'BINARY_EXPRESSION',
-          OPERATION: 'EQUALS',
-          LEFT: {
-            TYPE: 'FIELD',
-            NAME: 'CURRENCY',
-          },
-          RIGHT: {
-            TYPE: 'STRING',
-            VALUE: 'USD',
-          },
-        },
-        {
-          TYPE: 'BINARY_EXPRESSION',
-          OPERATION: 'GREATER_THAN',
-          LEFT: {
-            TYPE: 'FIELD',
-            NAME: 'PRICE',
-          },
-          RIGHT: {
-            TYPE: 'NUMBER',
-            VALUE: '2000',
-          },
-        },
-      ],
-    },
-  ],
-};
-
-const rowFiltersDateExampleModel: RuleExpression.Expression['PredicateExpression'] = {
-  OPERATION: 'OR',
-  TYPE: 'PREDICATE_EXPRESSION',
-  EXPRESSIONS: [
-    {
-      TYPE: 'METHOD_EXPRESSION',
-      METHOD: 'DATE_TIME_IS_IN_RANGE',
-      PARAMETERS: [
-        {
-          TYPE: 'FIELD',
-          NAME: 'TRADE_DATE',
-        },
-        {
-          TYPE: 'STRING',
-          VALUE: 'WEEK_DAY',
-        },
-        {
-          TYPE: 'STRING',
-          VALUE: 'CURRENT',
-        },
-      ],
-    },
-    {
-      TYPE: 'METHOD_EXPRESSION',
-      METHOD: 'DATE_TIME_IS_IN_RANGE',
-      PARAMETERS: [
-        {
-          TYPE: 'FIELD',
-          NAME: 'TRADE_DATE',
-        },
-        {
-          TYPE: 'STRING',
-          VALUE: 'WEEK_DAY',
-        },
-        {
-          TYPE: 'STRING',
-          VALUE: 'PREVIOUS',
-        },
-      ],
-    },
-  ],
-};
-
-const exampleConfig: ExpressionBuilderTypes.RuleConfig = {
-  fields: rowFiltersExampleFields,
-  model: rowFiltersExampleModel,
-};
-
-const exampleConfigDate: ExpressionBuilderTypes.RuleConfig = {
-  fields: rowFiltersDateExampleFields,
-  model: rowFiltersDateExampleModel,
-};
-
-const rowFiltersExampleModal = html<RowFiltersTutorial>`
-  <rapid-modal ${ref('exampleModal')}>
-    <h3 slot="top">Row filters help</h3>
-    <rapid-tabs>
-      <rapid-tab>Basic filters</rapid-tab>
-      <rapid-tab>Date filters</rapid-tab>
-      <rapid-tab-panel>
-        <p>
-          The row filters step provides you a rule builder which can create boolean logic
-          expressions to filter rows. Consider the following
-          <strong>readonly</strong>
-          example:
-        </p>
-        <rapid-rule-expression-builder
-          ${ref('exampleRuleBuilder')}
-          :ruleConfig=${(_) => exampleConfig}
-          @change=${(x) => (x.exampleRuleBuilder.ruleConfig = { ...exampleConfig })}
-        ></rapid-rule-expression-builder>
-        <p>
-          This rule expression configures that a row
-          <strong>will</strong>
-          show in the output report if the SIDE is equal to BUY, OR if the currency is USD AND the
-          PRICE is greater than 2000.
-        </p>
-        <p>
-          If you don't want any filtering for a datasource then don't add any rules to the rule
-          builder.
-        </p>
-        <p>
-          TIP: You can filter on rows in this step that you subsequently don't show in the output
-          report. E.g. you can filter on SIDE is BUY, but deselect the SIDE column in the column
-          visibility step.
-        </p>
-      </rapid-tab-panel>
-      <rapid-tab-panel>
-        <p>
-          You can also filter by date relative to the runtime of the report. Consider the following
-          <strong>readonly</strong>
-          example:
-        </p>
-        <rapid-rule-expression-builder
-          ${ref('exampleRuleBuilderDate')}
-          :ruleConfig=${(_) => exampleConfigDate}
-          @change=${(x) => (x.exampleRuleBuilderDate.ruleConfig = { ...exampleConfigDate })}
-        ></rapid-rule-expression-builder>
-        <p>
-          This rule expression configures that a row
-          <strong>will</strong>
-          show in the output report if the TRADE_DATE is today (Is current Week day), OR if the
-          TRADE_DATE was yesterday (Is previous Week day).
-        </p>
-        <p>
-          When using relative date filters, you can select from Hour, Day, Week day, Week, Month or
-          Year.
-        </p>
-        <p>
-          You can hover your mouse over the filter values (e.g.
-          <code>Hour</code>
-          ) when the select input is open to see a tooltip, or check the
-          <a
-            href="https://docs.genesis.global/docs/develop/client-capabilities/expression-builder/client-expression-rule-builder/#date-filtering"
-            target="_blank"
-          >
-            docs
-          </a>
-          to see more information.
-        </p>
-        <p>When using relative date filters, you can select from HOUR, DAY, WEEK, MONTH or YEAR.</p>
-      </rapid-tab-panel>
-    </rapid-tabs>
-  </rapid-modal>
-`;
-
-export const template = html<RowFiltersTutorial>`
-  <template>
-    ${rowFiltersExampleModal}
-    <h1>Row filters</h1>
-    <div class="centering">
-      <p>
-        In this step, configure a logical expression to filter the data source rows to include in
-        your report. Where multiple data sources are configured for this report, use the tabs to
-        select and configure each data source. Hover over the operators to see tooltips.
-      </p>
-      <rapid-button @click=${(x) => x.exampleModal.show()} appearance="primary">
-        More info
-      </rapid-button>
-    </div>
-  </template>
-`;

package/src/new/main/edit-config/row-filters/row-filters-tutorial.ts

@@ -1,15 +0,0 @@
-import { Modal, RapidRuleExpressionBuilder } from '@genesislcap/rapid-design-system';
-import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
-import { styles } from './row-filters-tutorial.styles';
-import { template } from './row-filters-tutorial.template';
-
-@customElement({
-  name: 'row-filters-tutorial',
-  template,
-  styles,
-})
-export class RowFiltersTutorial extends GenesisElement {
-  @observable exampleModal: Modal;
-  @observable exampleRuleBuilder: RapidRuleExpressionBuilder;
-  @observable exampleRuleBuilderDate: RapidRuleExpressionBuilder;
-}

package/src/new/main/edit-config/row-filters/row-filters.helpers.test.ts

@@ -1,2 +0,0 @@
-// TODO: add tests in next PR
-export {};

package/src/new/main/edit-config/row-filters/row-filters.helpers.ts

@@ -1,53 +0,0 @@
-import { ExpressionBuilderTypes } from '@genesislcap/foundation-ui';
-import { GridColumnNames } from '../shared';
-import { RowFilterDatasourceData } from './row-filters.types';
-
-export function mapGenesisFieldTypeToFieldInputAndType(
-  partialData: Pick<ExpressionBuilderTypes.Field, 'fieldId' | 'label'>,
-  dsData: RowFilterDatasourceData,
-): ExpressionBuilderTypes.Field {
-  switch (dsData[GridColumnNames.Type]) {
-    case 'STRING':
-      return { ...partialData, type: 'string', input: 'text' };
-    case 'ENUM':
-      if (!dsData[GridColumnNames.EnumValues]) throw new Error('Enum type but without enum values');
-      return {
-        ...partialData,
-        type: 'enum',
-        input: 'select',
-        values: dsData[GridColumnNames.EnumValues]?.reduce((acum, v) => ({ ...acum, [v]: v }), {}),
-      };
-    case 'INT':
-      return { ...partialData, type: 'int', input: 'number' };
-    case 'SHORT':
-      return { ...partialData, type: 'short', input: 'number' };
-    case 'DOUBLE':
-      return { ...partialData, type: 'double', input: 'number' };
-    case 'LONG':
-      return { ...partialData, type: 'long', input: 'number' };
-    case 'BOOLEAN':
-      return { ...partialData, type: 'boolean', input: 'checkbox' };
-    case 'BIGDECIMAL':
-      return { ...partialData, type: 'bigdecimal', input: 'number' }; // TODO; I think this neeeds to be a string
-    case 'DATE':
-      return { ...partialData, type: 'date', input: 'date' };
-    case 'DATETIME':
-      return { ...partialData, type: 'date-time', input: 'datetime-local' };
-    default:
-      throw new Error(`mapGenesisFieldTypeToFieldType type not supported "${dsData}"`);
-  }
-}
-
-export function mapTableRowToRuleField(
-  data: RowFilterDatasourceData,
-): ExpressionBuilderTypes.Field | null {
-  if (data[GridColumnNames.Type] === 'RAW' || data[GridColumnNames.Type] === 'NANO_TIMESTAMP')
-    return null;
-  return mapGenesisFieldTypeToFieldInputAndType(
-    {
-      fieldId: data[GridColumnNames.ColumnName],
-      label: data[GridColumnNames.ColumnName],
-    },
-    data,
-  );
-}

package/src/new/main/edit-config/row-filters/row-filters.styles.ts

@@ -1,23 +0,0 @@
-import { css } from '@genesislcap/web-core';
-
-export const styles = css`
-  div.grid-container {
-    height: calc(var(--constrained-height) - 100px);
-    width: 100%;
-    overflow-y: auto;
-    display: inline-block;
-  }
-
-  div.grid-container.error {
-    cursor: not-allowed;
-  }
-
-  div.error rapid-grid-pro {
-    pointer-events: none;
-    opacity: 80%;
-  }
-
-  rapid-grid-pro::part(grid) {
-    --base-height-multiplier: 9;
-  }
-`;

package/src/new/main/edit-config/row-filters/row-filters.template.ts

@@ -1,15 +0,0 @@
-import { RuleExpression } from '@genesislcap/foundation-ui';
-import { classNames, html } from '@genesislcap/web-core';
-import type { RowFilters } from './row-filters';
-
-export const template = html<RowFilters>`
-  <div class="grid-container ${(x) => classNames(['error', x.dataError])}">
-    <rapid-rule-expression-builder
-      :ruleConfig=${(x) => x.ruleExpressionConfig}
-      @change=${(x, c) =>
-        x.handleChangedRuleExpression(
-          c.event as CustomEvent<RuleExpression.Expression['PredicateExpression']>,
-        )}
-    ></rapid-rule-expression-builder>
-  </div>
-`;

package/src/new/main/edit-config/row-filters/row-filters.ts

@@ -1,58 +0,0 @@
-import { RuleExpression } from '@genesislcap/foundation-ui';
-import { ExpressionBuilderTypes } from '@genesislcap/rapid-design-system';
-import { customElement, observable } from '@genesislcap/web-core';
-import { actions, selectors } from '../../../store';
-import { DatasourceDataBaseComponent, GridRowData, pathParameters } from '../shared';
-import { mapTableRowToRuleField } from './row-filters.helpers';
-import { styles } from './row-filters.styles';
-import { template } from './row-filters.template';
-
-const blankExpression: RuleExpression.Expression['PredicateExpression'] = {
-  TYPE: 'PREDICATE_EXPRESSION',
-  OPERATION: 'AND',
-  EXPRESSIONS: [],
-};
-
-@customElement({
-  name: 'row-filters',
-  template,
-  styles,
-})
-export class RowFilters extends DatasourceDataBaseComponent {
-  @observable ruleExpressionConfig: ExpressionBuilderTypes.RuleConfig = {
-    fields: [],
-    partialRuleValidationWarning: true,
-  };
-
-  handleChangedRuleExpression(
-    event: CustomEvent<RuleExpression.Expression['PredicateExpression']>,
-  ) {
-    if (!this.datasourceName) return;
-    actions.datasourceConfig.setRowFilter({ key: this.datasourceName, expression: event.detail });
-  }
-
-  protected async updateDataFields() {
-    try {
-      if (!this.datasourceName) throw new Error('Cannot load rule expression model with no key');
-
-      this.fieldData = this.datasourceSpec.flatMap(pathParameters) as GridRowData[];
-      const maybeExistingExpression = selectors.datasourceConfig.getRowFilterExpression(
-        this.datasourceName,
-      );
-
-      this.ruleExpressionConfig = {
-        ...this.ruleExpressionConfig,
-        fields: this.fieldData
-          .map(mapTableRowToRuleField)
-          .filter(Boolean) as ExpressionBuilderTypes.Field[],
-        model: maybeExistingExpression ?? blankExpression,
-      };
-      this.dataError = false;
-    } catch (e) {
-      this.handleError(
-        e as Error,
-        'There were errors when loading the datasource fields' + (<Error>e).message,
-      );
-    }
-  }
-}

package/src/new/main/edit-config/row-filters/row-filters.types.ts

@@ -1,14 +0,0 @@
-import { GridColumnNames, GridRowData, ROW_FILTER_OPERATIONS } from '../shared';
-
-// Export the row filter operations
-export const rowFilterOpts = ROW_FILTER_OPERATIONS;
-
-// Define the specific subset of fields needed for this component
-export type RowFilterDatasourceData = Pick<
-  GridRowData,
-  | GridColumnNames.ColumnName
-  | GridColumnNames.Type
-  | GridColumnNames.Datasource
-  | GridColumnNames.Filter
-  | GridColumnNames.EnumValues
->;

package/src/new/main/edit-config/scheduling/scheduling.styles.ts

@@ -1,59 +0,0 @@
-import { css } from '@genesislcap/web-core';
-import { formLabel } from '../../../styles';
-
-export const styles = css`
-  ${formLabel}
-  :host {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--design-unit) * 2px);
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
-  .heading-padding {
-    padding-left: calc(var(--design-unit) * 4px);
-  }
-
-  .row-container {
-    display: flex;
-    justify-content: center;
-  }
-
-  .container {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--design-unit) * 2px);
-  }
-
-  .timezone-container {
-    display: flex;
-    flex-direction: column;
-    padding: 0 calc(var(--design-unit) * 4px);
-  }
-
-  .enable-schedules {
-    padding: calc(var(--design-unit) * 4px);
-    display: flex;
-    align-items: center;
-    gap: calc(var(--design-unit) * 3px);
-  }
-
-  .parent-container.disabled {
-    cursor: not-allowed;
-    opacity: 50%;
-  }
-
-  .container.disabled,
-  .container.disabled * {
-    pointer-events: none;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .timezone-combobox::part(listbox) {
-    max-height: 20vh;
-  }
-`;

package/src/new/main/edit-config/scheduling/scheduling.template.ts

@@ -1,80 +0,0 @@
-import { html, repeat, sync } from '@genesislcap/web-core';
-import { actions, selectors } from '../../../store';
-import { TOOLTIP, tooltip } from '../../../utils';
-import { OutputsConfig } from '../outputs-config/outputs-config';
-import type { Scheduling } from './scheduling';
-
-OutputsConfig;
-
-export const template = html<Scheduling>`
-  <div class="container">
-    <h1 class="heading-padding">Scheduling</h1>
-    <p class="heading-padding">
-      Here you can set up a schedule to generate and send reports automatically at your preferred
-      time.
-    </p>
-    <div class="enable-schedules">
-      <rapid-button
-        data-test-id="config-enable-schedules"
-        appearance=${(x) => (x.enableSchedules ? 'neutral' : 'primary')}
-        @click=${(x, c) => x.toggleSchedule()}
-      >
-        ${(x) => (x.enableSchedules ? 'Disable Schedule' : 'Enable Schedule')}
-      </rapid-button>
-    </div>
-    <div class="parent-container ${(x) => x.disabledClassNames}">
-      <div class="container ${(x) => x.disabledClassNames}">
-        <div class="timezone-container">
-          <label class="label">Time Zone ${tooltip(TOOLTIP.DELIVERY_TIMEZONE)}</label>
-          <rapid-combobox
-            data-test-id="config-report-timezone"
-            class="timezone-combobox"
-            autocomplete="both"
-            value="${() => selectors.baseConfig.getConfig().SCHEDULE?.TIME_ZONE || ''}"
-            @change="${(x, ctx) =>
-              actions.baseConfig.updateState({
-                key: 'SCHEDULE',
-                value: {
-                  CRON_EXPRESSION: selectors.baseConfig.getConfig().SCHEDULE?.CRON_EXPRESSION || '',
-                  TIME_ZONE: x.timeZones.find(
-                    (tz) => tz === (ctx.event.target as HTMLInputElement).value,
-                  )
-                    ? (ctx.event.target as HTMLInputElement).value
-                    : '',
-                },
-              })}"
-          >
-            ${repeat(
-              (x) => x.timeZones,
-              html`
-                <rapid-option value="${(x) => x}">${(x) => x}</rapid-option>
-              `,
-            )}
-          </rapid-combobox>
-        </div>
-        <rapid-scheduler-cron-builder
-          :cron=${sync(
-            () => selectors.baseConfig.getConfig().SCHEDULE?.CRON_EXPRESSION || '0 0 0 * * ?',
-          )}
-          @change="${(_, ctx) =>
-            actions.baseConfig.updateState({
-              key: 'SCHEDULE',
-              value: {
-                TIME_ZONE: selectors.baseConfig.getConfig().SCHEDULE?.TIME_ZONE || '',
-                CRON_EXPRESSION: (ctx.event.target as HTMLInputElement).value,
-              },
-            })}"
-          min-minute-interval="15"
-        ></rapid-scheduler-cron-builder>
-      </div>
-    </div>
-  </div>
-  <h1 class="heading-padding">Report Destinations</h1>
-  <p class="heading-padding">
-    You can optionally select one or more destinations to deliver the report to. You may only select
-    destinations configured under "Report Destinations".
-  </p>
-  <div class="heading-padding container">
-    <outputs-config></outputs-config>
-  </div>
-`;