@genesislcap/pbc-reporting-ui 15.19.0 → 15.19.1

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

@@ -1,12 +0,0 @@
-import { css } from '@genesislcap/web-core';
-import { constrainedDimensions } from '../../../styles';
-
-export const styles = css`
-  :host {
-    ${constrainedDimensions({ navToContentPx: 150 })}
-  }
-
-  rapid-tabs {
-    display: contents;
-  }
-`;

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

@@ -1,29 +0,0 @@
-import { html, ref, repeat } from '@genesislcap/web-core';
-import { DatasourceConfig, DatasourceName, selectors } from '../../../store';
-import type { TabbedDatasourceContainer } from './tabbed-datasource-container';
-import { TABBED_DATASOURCE_HEADER_SLOT } from './tabbed-datasource-container.types';
-
-export const template = html<TabbedDatasourceContainer>`
-  <template>
-    <slot name="${(_) => TABBED_DATASOURCE_HEADER_SLOT}"></slot>
-    <rapid-tabs ${ref('tabs')}>
-      ${repeat(
-        (_) => Object.entries(selectors.datasourceConfig.getAllConfigSet()),
-        html<[DatasourceName, DatasourceConfig[DatasourceName]], TabbedDatasourceContainer>`
-          <rapid-tab @click=${(x, c) => c.parent.handleDatasourceChanged(x[0])}>
-            ${(x) => x[1].KEY}
-          </rapid-tab>
-        `,
-      )}
-      <!-- rapid-tab-panel unused for content, only used to make the rapid-tabs work correctly -->
-      ${repeat(
-        (_) => Object.entries(selectors.datasourceConfig.getAllConfigSet()),
-        html<[DatasourceName, DatasourceConfig[DatasourceName]], TabbedDatasourceContainer>`
-          <rapid-tab-panel></rapid-tab-panel>
-        `,
-      )}
-    </rapid-tabs>
-    <!-- real content goes into this slot -->
-    <div class="slot"><slot></slot></div>
-  </template>
-`;

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

@@ -1,69 +0,0 @@
-import { Tabs } from '@genesislcap/rapid-design-system';
-import { customElement, DOM, GenesisElement, observable } from '@genesislcap/web-core';
-import { DatasourceName, selectors } from '../../../store';
-import { styles } from './tabbed-datasource-container.styles';
-import { template } from './tabbed-datasource-container.template';
-import { MultiDatasourceHandler } from './tabbed-datasource-container.types';
-
-/**
- * This is a container which wraps up content which should
- * implement MultiDatasourceHandler interface, and this will
- * handle passing in the relevant `datasourceName` to it.
- *
- * This uses rapid-tabs just for the tabs themselves, but
- * performs virtual tabbing by just using one slotted component
- * but changing the `datasourceName` attribute as you click through tabs
- *
- * This uses the IntersectionObserver to know when the instance is visible (on the stepper steps) and if it's not then it supplies `null` as the `datasourceName` for the slotted content
- */
-@customElement({
-  name: 'tabbed-datasource-container',
-  template,
-  styles,
-})
-export class TabbedDatasourceContainer extends GenesisElement implements MultiDatasourceHandler {
-  @observable datasourceName: MultiDatasourceHandler['datasourceName'];
-  @observable isActive = false;
-
-  @observable tabs: Tabs;
-
-  isActiveChanged(_, active: boolean) {
-    const tabIndex = Math.min(
-      this.tabs?.currentTabIndex ?? 0,
-      Object.keys(selectors.datasourceConfig.getAllConfigSet()).length - 1,
-    );
-    const newVal: MultiDatasourceHandler['datasourceName'] = active
-      ? (Object.keys(selectors.datasourceConfig.getAllConfigSet())[tabIndex] as DatasourceName)
-      : null;
-    DOM.queueUpdate(() => this.handleDatasourceChanged(newVal));
-  }
-
-  private observer: IntersectionObserver;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.observer = new IntersectionObserver(
-      (entries) => (this.isActive = Boolean(entries.find((entry) => entry.isIntersecting))),
-    );
-    this.observer.observe(this);
-  }
-
-  disconnectedCallback(): void {
-    this.observer.unobserve(this);
-    super.disconnectedCallback();
-  }
-
-  handleDatasourceChanged(key: MultiDatasourceHandler['datasourceName']) {
-    this.datasourceName = key;
-    const slot = this.shadowRoot?.querySelector('div.slot slot') as HTMLSlotElement;
-    if (!slot) throw new Error(`TabbedDatasourceContainer unable to find slot content`);
-    slot.assignedElements().forEach((c) => {
-      if (!('datasourceName' in c)) {
-        throw new Error(
-          `Incompatible element used as TabbedDatasourceContainer slot content - ${c.nodeName}`,
-        );
-      }
-      (c as unknown as MultiDatasourceHandler).datasourceName = this.datasourceName;
-    });
-  }
-}

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

@@ -1,7 +0,0 @@
-import type { DatasourceName } from '../../../store';
-
-export interface MultiDatasourceHandler {
-  datasourceName: DatasourceName | null;
-}
-
-export const TABBED_DATASOURCE_HEADER_SLOT = 'before-tabs';

package/src/new/main/generated-reports/generated-reports.styles.ts

@@ -1,15 +0,0 @@
-import { css } from '@genesislcap/web-core';
-
-export const GeneratedReportsStyles = css`
-  :host {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-  }
-
-  .container {
-    padding: calc(var(--design-unit) * 4px);
-    width: 40%;
-  }
-`;

package/src/new/main/generated-reports/generated-reports.template.ts

@@ -1,29 +0,0 @@
-import { customEvent } from '@genesislcap/foundation-events';
-import { html, ref } from '@genesislcap/web-core';
-import { Permissions } from '../../types';
-import { permissionTemplateGuard } from '../../utils';
-import type { GeneratedReports } from './generated-reports';
-
-const viewTemplate = html<GeneratedReports>`
-  <!-- <div class="container">
-    <rapid-search-bar
-      :options="${(x) => x.searchBarConfig}"
-      @selectionChange=${(x, ctx) => x.searchChanged(customEvent(ctx))}
-    ></rapid-search-bar>
-  </div> -->
-  <rapid-grid-pro data-test-id="generated-reports-grid" only-template-col-defs>
-    <grid-pro-genesis-datasource
-      ${ref('generatedReportsDatasource')}
-      resource-name="GENERATED_REPORTS"
-      reverse="true"
-      criteria="${(x) => x.gridCriteria}"
-      :deferredGridOptions=${(x) => x.getGridOptions()}
-      max-rows="500"
-    ></grid-pro-genesis-datasource>
-  </rapid-grid-pro>
-`;
-
-export const GeneratedReportsTemplate = html<GeneratedReports>`
-  ${(x) =>
-    permissionTemplateGuard(x, [Permissions.ReportView, Permissions.ReportRun], viewTemplate)}
-`;

package/src/new/main/generated-reports/generated-reports.ts

@@ -1,270 +0,0 @@
-import { ColDef, RowDataUpdatedEvent } from '@ag-grid-community/core';
-import { Connect, logger } from '@genesislcap/foundation-comms';
-import { getCriteriaBuilder, INPUT_MIN_LENGTH, SelectedOption } from '@genesislcap/foundation-ui';
-import { User } from '@genesislcap/foundation-user';
-import { GridOptionsConfig, GridProGenesisDatasource } from '@genesislcap/rapid-grid-pro';
-import { customElement, GenesisElement, html, observable } from '@genesislcap/web-core';
-import { Permissions } from '../../types';
-import { permissionGuard, showNotificationToast } from '../../utils';
-import { getFilterParams } from '../../utils/date-filter-params';
-import { getEndpointUrl, tryReadFromSession } from '../../utils/endpoint';
-import { getFormattedDateTime } from '../../utils/formatters';
-import { buttonCellRenderer } from '../../utils/renderer';
-import { GeneratedReportsStyles as styles } from './generated-reports.styles';
-import { GeneratedReportsTemplate as template } from './generated-reports.template';
-
-@customElement({
-  name: 'generated-reports',
-  template,
-  styles,
-})
-export class GeneratedReports extends GenesisElement {
-  @Connect connect: Connect;
-  generatedReportsDatasource: GridProGenesisDatasource;
-  generatedReportId: string | null;
-  @observable gridCriteria: string = '';
-
-  @User user!: User;
-
-  public searchBarConfig = [
-    {
-      field: 'NAME',
-      label: (searchTerm) => `${searchTerm} as NAME`,
-      createCriteria: getCriteriaBuilder,
-      isEnabled: (searchTerm, selectedOption) => {
-        return (
-          searchTerm.length >= INPUT_MIN_LENGTH && !selectedOption.some((e) => e.field === 'NAME')
-        );
-      },
-    },
-    {
-      field: 'FILE_NAME',
-      label: (searchTerm) => `${searchTerm} as FILE_NAME`,
-      createCriteria: getCriteriaBuilder,
-      isEnabled: (searchTerm, selectedOption) => {
-        return (
-          searchTerm.length >= INPUT_MIN_LENGTH &&
-          !selectedOption.some((e) => e.field === 'FILE_NAME')
-        );
-      },
-    },
-    {
-      field: 'STATUS',
-      label: (searchTerm) => `${searchTerm} as STATUS`,
-      createCriteria: getCriteriaBuilder,
-      isEnabled: (searchTerm, selectedOption) => {
-        return (
-          searchTerm.length >= INPUT_MIN_LENGTH && !selectedOption.some((e) => e.field === 'STATUS')
-        );
-      },
-    },
-  ];
-
-  getColor = (result: string) => {
-    switch (result) {
-      case 'Generated':
-      case 'Delivered':
-        return 'var(--success-color)';
-      case 'Pending':
-        return 'var(--warning-color)';
-      case 'Failed':
-        return 'var(--error-color)';
-      default:
-        return 'yellow';
-    }
-  };
-
-  getStatusRenderer = (value) => {
-    return `<div style="color: ${this.getColor(value)};">${value}</div>`;
-  };
-
-  getColumnDefs() {
-    const columnDefs: ColDef[] = [
-      {
-        field: 'NAME',
-        headerName: 'Report Config',
-        minWidth: 180,
-        flex: 1,
-        cellStyle: { display: 'flex' },
-      },
-      {
-        field: 'FILE_NAME',
-        headerName: 'File',
-        minWidth: 150,
-        flex: 1,
-        cellStyle: { display: 'flex' },
-      },
-      {
-        field: 'STATUS',
-        headerName: 'Status',
-        minWidth: 150,
-        cellRenderer: (params) => this.getStatusRenderer(params.data.STATUS),
-        flex: 1,
-        cellStyle: { display: 'flex' },
-      },
-      {
-        field: 'CREATED_BY',
-        headerName: 'Created By',
-        minWidth: 150,
-        flex: 1,
-        cellStyle: { display: 'flex' },
-      },
-      {
-        field: 'LAST_UPDATED_AT',
-        headerName: 'Created Date',
-        minWidth: 150,
-        flex: 1,
-        sortable: true,
-        sort: 'desc',
-        cellStyle: { display: 'flex' },
-        filter: 'agDateColumnFilter',
-        filterParams: getFilterParams(),
-        valueFormatter: (rowData) => getFormattedDateTime(rowData.data.LAST_UPDATED_AT),
-      },
-      {
-        field: 'MESSAGE',
-        headerName: 'Failure Reason',
-        minWidth: 300,
-        flex: 1,
-        tooltipField: 'MESSAGE',
-        cellStyle: {
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        },
-      },
-      permissionGuard(this, Permissions.ReportDelete)
-        ? buttonCellRenderer(
-            'Delete',
-            (e) => this.deleteReport(e.GENERATED_REPORT_ID),
-            html`
-              <rapid-icon
-                style="opacity: 0.5"
-                variant="regular"
-                name="trash-alt"
-                size="lg"
-              ></rapid-icon>
-            `,
-          )
-        : null,
-      buttonCellRenderer(
-        'Download',
-        (e) => this.downloadReport(e.REPORT_FILE_STORAGE_ID),
-        html`
-          <rapid-icon style="opacity: 0.5" variant="solid" name="download" size="lg"></rapid-icon>
-        `,
-        (e) => e.STATUS === 'Failed',
-      ),
-    ].filter(Boolean) as ColDef[];
-    return columnDefs;
-  }
-
-  getGridOptions() {
-    const gridOptions: GridOptionsConfig = {
-      defaultColDef: {
-        filter: true,
-        floatingFilter: false,
-        sortable: false,
-        suppressMenu: false,
-      },
-      suppressRowClickSelection: true,
-      columnDefs: this.getColumnDefs(),
-      getRowId: (params) => params.data.GENERATED_REPORT_ID,
-      headerHeight: 30,
-      rowHeight: 32,
-      tooltipShowDelay: 0,
-    };
-    gridOptions.onRowDataUpdated = (params: RowDataUpdatedEvent) => {
-      if (this.generatedReportId) {
-        params.api.forEachNode((node) => {
-          if (node.data.GENERATED_REPORT_ID === this.generatedReportId) {
-            node.setSelected(true);
-          }
-        });
-      }
-    };
-
-    return gridOptions;
-  }
-
-  private async downloadReport(fileStorageId: string) {
-    const headers = new Headers();
-    headers.append('SESSION_AUTH_TOKEN', tryReadFromSession('authToken'));
-    const endpoint = getEndpointUrl(`file-server/download?fileStorageId=${fileStorageId}`);
-    try {
-      let filename;
-      fetch(endpoint, {
-        method: 'GET',
-        headers: headers,
-      })
-        .then((response) => {
-          const contentDispositionHeader = response.headers.get('Content-disposition');
-          filename = contentDispositionHeader
-            ?.split(';')[1]
-            .split('filename')[1]
-            .split('=')[1]
-            .trim();
-          return response.blob();
-        })
-        .then((blob) => URL.createObjectURL(blob))
-        .then((url) => {
-          const a = document.createElement('a');
-          a.style.display = 'none';
-          a.href = url;
-          a.download = filename;
-          document.body.appendChild(a);
-          a.click();
-          window.URL.revokeObjectURL(url);
-        });
-    } catch (error) {
-      logger.error(error);
-    }
-  }
-
-  private async deleteReport(generatedReportId) {
-    try {
-      const deleteResponse = await this.connect.commitEvent('EVENT_GENERATED_REPORT_DELETE', {
-        DETAILS: {
-          GENERATED_REPORT_ID: generatedReportId,
-        },
-        IGNORE_WARNINGS: true,
-        VALIDATE: false,
-      });
-      if (deleteResponse.MESSAGE_TYPE === 'EVENT_ACK') {
-        this.generatedReportsDatasource.deferredGridOptions = this.getGridOptions();
-        this.generatedReportsDatasource.restart();
-        showNotificationToast({
-          title: 'Delete Report',
-          body: `'${generatedReportId}' was deleted successfully`,
-          toast: { type: 'success' as any },
-        });
-      } else {
-        const error = deleteResponse?.ERROR?.length ? deleteResponse.ERROR[0].TEXT : '';
-        showNotificationToast({
-          title: 'Delete Report',
-          body: `'${generatedReportId}' was not deleted due to following error "${error}"`,
-          toast: { type: 'critical' as any },
-        });
-      }
-    } catch (err) {
-      logger.error(err);
-    }
-  }
-
-  searchChanged(event: CustomEvent<Array<SelectedOption>>) {
-    const options = event.detail;
-    const criteriaBuilder = options
-      .map((option) => {
-        const { field, term, createCriteria } = option;
-        if (createCriteria) {
-          return createCriteria(field, term);
-        } else {
-          logger.debug('Cannot convert search option into criteria', option);
-          return;
-        }
-      })
-      .filter((x) => x)
-      .join(' && ');
-    this.gridCriteria = criteriaBuilder;
-  }
-}

package/src/new/main/index.ts

@@ -1,3 +0,0 @@
-export * from './main.template';
-export * from './main';
-export * from './main.styles';

package/src/new/main/main.styles.ts

@@ -1,31 +0,0 @@
-import { css } from '@genesislcap/web-core';
-
-export const MainStyles = css`
-  :host {
-    display: block;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-  }
-
-  rapid-design-system-provider {
-    height: 100%;
-  }
-
-  rapid-tabs {
-    --base-height-multiplier: 10;
-  }
-
-  rapid-tabs::part(tablist) {
-    place-self: flex-start;
-    border-bottom: none;
-  }
-
-  rapid-tabs::part(tabpanel) {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-    border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
-  }
-`;

package/src/new/main/main.template.ts

@@ -1,92 +0,0 @@
-import { avoidTreeShaking } from '@genesislcap/foundation-utils';
-import { html, ref, when, whenElse } from '@genesislcap/web-core';
-import { ReportingConfigurations } from '../components/reporting-configurations/reporting-configurations';
-import { ConfigJourneyOrchestrator } from './edit-config/config-journey-orchestrator';
-import { GeneratedReports } from './generated-reports/generated-reports';
-import type { Reporting } from './main';
-import { ReportDestinations } from './report-destinations/report-destinations';
-
-avoidTreeShaking(
-  ReportingConfigurations,
-  ConfigJourneyOrchestrator,
-  ReportDestinations,
-  GeneratedReports,
-);
-
-export enum ReportingTab {
-  REPORT_CONFIGURATIONS,
-  CREATE_REPORT,
-  REPORT_DESTINATIONS,
-  GENERATED_REPORTS,
-}
-export const MainTemplate = html<Reporting>`
-  ${when(
-    (x) => x.ready,
-    html<Reporting>`
-      <rapid-tabs
-        ${ref('tabs')}
-        appearance="secondary"
-        class="tabs"
-        data-test-id="tabs"
-        @change=${(x, c) => x.handleTabsChange(c.event as CustomEvent)}
-      >
-        <span part="start" class="start" slot="start" data-test-id="reporting-tab">Reporting</span>
-        <rapid-tab
-          appearance="secondary"
-          id=${ReportingTab.REPORT_CONFIGURATIONS}
-          slot="report-configurations-tab"
-          data-test-id="list-reports-tab"
-        >
-          Report Configuration
-        </rapid-tab>
-        <rapid-tab
-          appearance="secondary"
-          id=${ReportingTab.REPORT_DESTINATIONS}
-          slot="report-destinations-tab"
-          data-test-id="report-destinations-tab"
-        >
-          Report Destinations
-        </rapid-tab>
-        <rapid-tab
-          appearance="secondary"
-          id=${ReportingTab.GENERATED_REPORTS}
-          slot="generated-reports-tab"
-          data-test-id="generated-reports-tab"
-        >
-          Generated Reports
-        </rapid-tab>
-
-        <rapid-tab-panel
-          slot="report-configurations-tab"
-          class="tab-panel"
-          data-test-id="list-reports-panel"
-        >
-          ${whenElse(
-            (x) => x.reportConfigMode === 'list',
-            html`
-              <reporting-configurations></reporting-configurations>
-            `,
-            html`
-              <config-journey-orchestrator></config-journey-orchestrator>
-            `,
-          )}
-        </rapid-tab-panel>
-
-        <rapid-tab-panel
-          slot="report-destinations-tab"
-          class="tab-panel"
-          data-test-id="report-destinations-tab-panel"
-        >
-          <report-destinations></report-destinations>
-        </rapid-tab-panel>
-        <rapid-tab-panel
-          slot="generated-reports-tab"
-          class="tab-panel"
-          data-test-id="generated-reports-tab-panel"
-        >
-          <generated-reports ${ref('generatedReportsComponent')}></generated-reports>
-        </rapid-tab-panel>
-      </rapid-tabs>
-    `,
-  )}
-`;

package/src/new/main/main.ts

@@ -1,117 +0,0 @@
-import { Tabs } from '@genesislcap/rapid-design-system';
-import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
-import { ReportingEventDetailMap, ReportingEvents } from '../utils/event-map';
-import { GeneratedReports } from './generated-reports/generated-reports';
-import { MainStyles as styles } from './main.styles';
-import { ReportingTab, MainTemplate as template } from './main.template';
-
-/**
- * FoundationReporting.
- *
- * @remarks
- * Base MF export. It does not set up a design system or components.
- *
- * @public
- */
-@customElement({
-  name: 'foundation-reporting',
-  template,
-  styles,
-})
-export class FoundationReporting extends GenesisElement {
-  public tabs: Tabs;
-  @observable ready: boolean = false;
-  @observable
-  reportConfigMode: ReportingEventDetailMap[ReportingEvents.setReportConfigDisplayMode] = 'list';
-  generatedReportsComponent: GeneratedReports;
-
-  async connectedCallback(): Promise<void> {
-    super.connectedCallback();
-
-    this.addEventListener(ReportingEvents.highlightGridRow, this.handleRunReportEvent);
-    this.addEventListener(
-      ReportingEvents.setReportConfigDisplayMode,
-      this.handleReportConfigDisplayMode,
-    );
-
-    this.ready = true;
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener(ReportingEvents.highlightGridRow, this.handleRunReportEvent);
-    this.removeEventListener(
-      ReportingEvents.setReportConfigDisplayMode,
-      this.handleReportConfigDisplayMode,
-    );
-  }
-
-  /** @internal */
-  // oxlint-disable-next-line no-empty-pattern -- unused event payload
-  handleTabsChange({}: CustomEvent) {}
-
-  handleRunReportEvent({ detail }: CustomEvent) {
-    this.generatedReportsComponent.generatedReportId = detail;
-    this.tabs.activeid = ReportingTab.GENERATED_REPORTS.toString();
-  }
-
-  handleReportConfigDisplayMode({
-    detail,
-  }: CustomEvent<ReportingEventDetailMap[ReportingEvents.setReportConfigDisplayMode]>) {
-    this.reportConfigMode = detail;
-  }
-}
-
-/**
-* RapidReporting.
-*
-* @remarks
-* A rapid version that pre-registers rapid components and uses the rapid design system.
-*
-* @example
-* ```ts
-* import { RapidReporting } from '@genesislcap/pbc-reporting-ui';
-* ...
-* RapidReporting
-* ```
-*
-* @example Load the micro frontend on-demand
-* ```ts
-
-*   const { RapidReporting } = await import('@genesislcap/pbc-reporting-ui');
-*   return RapidReporting;
-* },
-* ```
-*
-* @public
-*/
-@customElement({
-  name: 'rapid-reporting',
-  template,
-  styles,
-})
-export class RapidReporting extends FoundationReporting {
-  /**
-   * @internal
-   */
-  async connectedCallback() {
-    await this.loadRemotes();
-    await super.connectedCallback();
-  }
-
-  /**
-   * @internal
-   */
-  protected async loadRemotes() {
-    const { registerCommonRapidComponents } = await import('../components/components');
-    await registerCommonRapidComponents();
-    // this.ready = true;
-  }
-}
-
-/**
- * @privateRemarks
- * Keeps backwards compatability with original export.
- *
- * @public
- */
-export class Reporting extends RapidReporting {}