Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Journeys in environment configuration #242

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Journeys in environment configuration #242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
54ed4cd
Move journey configurations to a shared library
Aug 22, 2024
2176b5f
add custom navigation
Aug 22, 2024
bfeb34f
fix format
Aug 22, 2024
d436623
fix unit test setup
Aug 22, 2024
77cef93
fix lint
Aug 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@
"sourceTag": "type:app",
"onlyDependOnLibsWithTags": ["*"]
},
{
"sourceTag": "type:bundle",
"onlyDependOnLibsWithTags": ["*"]
},
{
"sourceTag": "type:shell",
"onlyDependOnLibsWithTags": [
Expand Down
48 changes: 3 additions & 45 deletions apps/golden-sample-app/src/app/app-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EntitlementsGuard } from '@backbase/foundation-ang/entitlements';
import { AuthGuard } from './auth/guard/auth.guard';
import { ViewWrapperComponent } from './components/view-wrapper/view-wrapper.component';
import { triplets } from './services/entitlementsTriplets';
import { UserContextGuard } from './user-context/user-context.guard';
import { AuthGuard, UserContextGuard } from '@backbase-gsa/shared';
import { environment } from '../environments/environment';

const routes: Routes = [
{
Expand All @@ -26,36 +23,6 @@ const routes: Routes = [
loadChildren: () =>
import('./error-page/error-page.module').then((m) => m.ErrorPageModule),
},
{
path: 'transfer',
loadChildren: () =>
import('./transfer/transfer-journey-bundle.module').then(
(m) => m.TransferJourneyBundleModule
),
canActivate: [AuthGuard, UserContextGuard],
},
{
path: 'ach-positive-pay',
loadChildren: () =>
import('./ach-positive-pay/ach-positive-pay-journey-bundle.module').then(
(m) => m.AchPositivePayJourneyBundleModule
),
canActivate: [AuthGuard, UserContextGuard, EntitlementsGuard],
data: {
entitlements: triplets.canViewAchRule,
},
},
{
path: 'transactions',
loadChildren: () =>
import('./transactions/transactions-journey-bundle.module').then(
(m) => m.TransactionsJourneyBundleModule
),
data: {
entitlements: triplets.canViewTransactions,
},
canActivate: [AuthGuard, UserContextGuard, EntitlementsGuard],
},
{
path: 'accounts',
loadChildren: () =>
Expand All @@ -64,15 +31,7 @@ const routes: Routes = [
),
canActivate: [AuthGuard, UserContextGuard],
},
{
path: 'transfer-internal',
component: ViewWrapperComponent,
loadChildren: () =>
import('./custom-payment/initiate-payment-journey-bundle.module').then(
(m) => m.CustomPaymentJourneyBundleModule
),
canActivate: [AuthGuard, UserContextGuard],
},
...environment.journeyBundles,
{
path: '**',
pathMatch: 'full',
Expand All @@ -82,7 +41,6 @@ const routes: Routes = [
];

@NgModule({
declarations: [ViewWrapperComponent],
imports: [RouterModule.forRoot(routes), CommonModule],
exports: [RouterModule],
})
Expand Down
116 changes: 20 additions & 96 deletions apps/golden-sample-app/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,128 +47,52 @@

<!-- Navigation Items-->
<ul *ngIf="isAuthenticated" class="bb-layout__horizontal-nav">
<li class="bb-layout__horizontal-nav-item">
<a
class="bb-layout__horizontal-nav-link"
routerLink="/transfer"
routerLinkActive="bb-layout__horizontal-nav-link--active"
#makeTransferRouterLink="routerLinkActive"
[attr.aria-current]="
makeTransferRouterLink.isActive ? 'page' : undefined
"
>
<bb-icon-ui
class="bb-layout__vertical-nav-item-icon"
name="payments"
></bb-icon-ui>
<span
class="bb-layout__horizontal-nav-item-description"
i18n="make transfer link@@main.transfer.link.text"
>
Make transfer
</span>
</a>
</li>
<li
class="bb-layout__horizontal-nav-item"
*bbIfEntitlements="triplets.canViewTransactions"
>
<a
class="bb-layout__horizontal-nav-link"
routerLink="/transactions"
routerLinkActive="bb-layout__horizontal-nav-link--active"
#transactionsListRouterLink="routerLinkActive"
[attr.aria-current]="
transactionsListRouterLink.isActive ? 'page' : undefined
"
>
<bb-icon-ui
class="bb-layout__vertical-nav-item-icon"
name="transactions"
size="md"
></bb-icon-ui>
<span
class="bb-layout__horizontal-nav-item-description"
i18n="transactions list link@@main.transactions.link.text"
>
Transactions List
</span>
</a>
</li>
<li
class="bb-layout__horizontal-nav-item"
*bbIfEntitlements="triplets.canViewPositivePay"
>
<a
class="bb-layout__horizontal-nav-link"
routerLink="/positive-pay"
routerLinkActive="bb-layout__horizontal-nav-link--active"
#positivePayRouterLink="routerLinkActive"
[attr.aria-current]="
positivePayRouterLink.isActive ? 'page' : undefined
"
>
<bb-icon-ui
class="bb-layout__vertical-nav-item-icon"
name="note"
></bb-icon-ui>
<span
class="bb-layout__horizontal-nav-item-description"
i18n="Positive pay link@@main.positive-pay.link.text"
>
Positive Pay
</span>
</a>
</li>
@for (journey of journeys; track journey) { @if(journey.permissions) {
<li
*bbIfEntitlements="journey.permissions"
class="bb-layout__horizontal-nav-item"
*bbIfEntitlements="triplets.canViewAchRule"
>
<a
class="bb-layout__horizontal-nav-link"
routerLink="/ach-positive-pay"
[routerLink]="journey.route"
routerLinkActive="bb-layout__horizontal-nav-link--active"
#myAccountsRouterLink="routerLinkActive"
[attr.aria-current]="
myAccountsRouterLink.isActive ? 'page' : undefined
"
#routerLink="routerLinkActive"
[attr.aria-current]="routerLink.isActive ? 'page' : undefined"
>
@if (journey.icon) {
<bb-icon-ui
class="bb-layout__vertical-nav-item-icon"
name="verified-user"
[name]="journey.icon"
></bb-icon-ui>
}

<span
class="bb-layout__horizontal-nav-item-description"
i18n="Ach Positive pay link@@main.ach-positive-pay.link.text"
>
ACH Positive Pay
<span class="bb-layout__horizontal-nav-item-description">
{{ journey.name }}
</span>
</a>
</li>
} @else {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a lot of duplication of html structure here, just because *bbIfEntitlements will display nothing when given undefined. Maybe we can avoid this using an ng-template...

      @for (journey of journeys; track journey) {

        <ng-template #journeyLinkTemplate>
          <li class="bb-layout__horizontal-nav-item">
             <!-- ...etc -->
          </li>
        </ng-template>

        @if(journey.permissions) {
          <ng-container *bbIfEntitlements="journey.permissions">
            <ng-container *ngTemplateOutlet="journeyLinkTemplate" />
          </ng-container>
        } @else {
          <ng-container *ngTemplateOutlet="journeyLinkTemplate" />
        }

Maybe even better would be to speak with the web-foundation team to ask if they can change the *bbIfEntitlements directive so that if given a certain value, say '*', then it automatically shows the content without checking any entitlements. Then we could just do this:

      <li
        *bbIfEntitlements="journey.permissions ?? '*'"
        class="bb-layout__horizontal-nav-item"
      >
        <!-- ... etc -->
      </li>

<li class="bb-layout__horizontal-nav-item">
<a
class="bb-layout__horizontal-nav-link"
routerLink="/transfer-internal"
[routerLink]="journey.route"
routerLinkActive="bb-layout__horizontal-nav-link--active"
#makeAPaymentRouterLink="routerLinkActive"
[attr.aria-current]="
makeAPaymentRouterLink.isActive ? 'page' : undefined
"
#routerLink="routerLinkActive"
[attr.aria-current]="routerLink.isActive ? 'page' : undefined"
>
@if (journey.icon) {
<bb-icon-ui
class="bb-layout__vertical-nav-item-icon"
name="verified-user"
[name]="journey.icon"
></bb-icon-ui>
}

<span
class="bb-layout__horizontal-nav-item-description"
i18n="Make a Payment Link@@main.make-a-payment.link.text"
>
Make internal payment
<span class="bb-layout__horizontal-nav-item-description">
{{ journey.name }}
</span>
</a>
</li>
} }
</ul>

<!-- Topbar Content Area (a.k.a. Right Topbar Area) -->
Expand Down
5 changes: 4 additions & 1 deletion apps/golden-sample-app/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Component, Optional } from '@angular/core';
import { LayoutService } from '@backbase/ui-ang/layout';
import { triplets } from './services/entitlementsTriplets';
import { OAuthService } from 'angular-oauth2-oidc';
import {
LogoutTrackerEvent,
Tracker,
} from '@backbase/foundation-ang/observability';
import { environment } from '../environments/environment';
import { EnvironmentService, triplets } from '@backbase-gsa/shared';

@Component({
selector: 'app-root',
Expand All @@ -16,14 +16,17 @@ import { environment } from '../environments/environment';
export class AppComponent {
triplets = triplets;
isAuthenticated = false;
journeys = environment.journeyNavigation;

constructor(
private oAuthService: OAuthService,
private envService: EnvironmentService,
public layoutService: LayoutService,
@Optional() private readonly tracker?: Tracker
) {
this.isAuthenticated =
environment.mockEnabled ?? oAuthService.hasValidAccessToken();
this.envService.initializeEnvironment(environment);
}

logout(): void {
Expand Down
2 changes: 1 addition & 1 deletion apps/golden-sample-app/src/app/user-context/user-context.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UserContextComponent } from './user-context.component';
import { Router } from '@angular/router';
import { UserContextGuard } from './user-context.guard';
import { OAuthService } from 'angular-oauth2-oidc';
import { UserContextService } from './user-context.service';
import { UserContextGuard } from '@backbase-gsa/shared';

describe('UserContextComponent', () => {
let fixture: ComponentFixture<UserContextComponent>;
Expand Down
2 changes: 1 addition & 1 deletion apps/golden-sample-app/src/app/user-context/user-context.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { OAuthService } from 'angular-oauth2-oidc';
import { UserContextGuard } from './user-context.guard';
import { UserContextService } from './user-context.service';
import { UserContextGuard } from '@backbase-gsa/shared';

@Component({
selector: 'app-user-context',
Expand Down
24 changes: 23 additions & 1 deletion apps/golden-sample-app/src/environments/environment.mocks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import { AchPositivePayInterceptor } from '../app/interceptors/ach-positive-pay.interceptor';
import { AuthConfig } from 'angular-oauth2-oidc';
import { Environment } from './type';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { Provider } from '@angular/core';
import { Environment } from '@backbase-gsa/shared';
import {
ACH_POSITIVE_PAY_JOURNEY_BUNDLE,
ACH_POSITIVE_PAY_JOURNEY_NAVIGATION,
CUSTOM_PAYMENT_JOURNEY_BUNDLE,
CUSTOM_PAYMENT_JOURNEY_NAVIGATION,
TRANSACTIONS_JOURNEY_BUNDLE,
TRANSACTIONS_JOURNEY_NAVIGATION,
TRANSFER_JOURNEY_BUNDLE,
TRANSFER_JOURNEY_NAVIGATION,
} from '@backbase-gsa/journey-bundles';

const mockProviders: Provider[] = [
{
Expand All @@ -25,6 +35,18 @@ export const environment: Environment = {
bbApiKey: 'a554d1b4-6514-4f33-8211-3f52a03ca142',
telemetryCollectorURL: 'https://rum-collector.backbase.io/v1/traces',
env: 'mock',
journeyBundles: [
ACH_POSITIVE_PAY_JOURNEY_BUNDLE,
CUSTOM_PAYMENT_JOURNEY_BUNDLE,
TRANSACTIONS_JOURNEY_BUNDLE,
TRANSFER_JOURNEY_BUNDLE,
],
journeyNavigation: [
TRANSFER_JOURNEY_NAVIGATION,
TRANSACTIONS_JOURNEY_NAVIGATION,
ACH_POSITIVE_PAY_JOURNEY_NAVIGATION,
CUSTOM_PAYMENT_JOURNEY_NAVIGATION,
],
};

export const authConfig: AuthConfig = {
Expand Down
24 changes: 23 additions & 1 deletion apps/golden-sample-app/src/environments/environment.prod.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
import { AuthConfig } from 'angular-oauth2-oidc';
import { Environment } from './type';
import { Environment } from '@backbase-gsa/shared';
import {
ACH_POSITIVE_PAY_JOURNEY_BUNDLE,
ACH_POSITIVE_PAY_JOURNEY_NAVIGATION,
CUSTOM_PAYMENT_JOURNEY_BUNDLE,
CUSTOM_PAYMENT_JOURNEY_NAVIGATION,
TRANSACTIONS_JOURNEY_BUNDLE,
TRANSACTIONS_JOURNEY_NAVIGATION,
TRANSFER_JOURNEY_BUNDLE,
TRANSFER_JOURNEY_NAVIGATION,
} from '@backbase-gsa/journey-bundles';

export const environment: Environment = {
production: true,
Expand All @@ -12,6 +22,18 @@ export const environment: Environment = {
bbApiKey: 'a554d1b4-6514-4f33-8211-3f52a03ca142',
telemetryCollectorURL: 'https://rum-collector.backbase.io/v1/traces',
env: 'production',
journeyBundles: [
ACH_POSITIVE_PAY_JOURNEY_BUNDLE,
CUSTOM_PAYMENT_JOURNEY_BUNDLE,
TRANSACTIONS_JOURNEY_BUNDLE,
TRANSFER_JOURNEY_BUNDLE,
],
journeyNavigation: [
TRANSFER_JOURNEY_NAVIGATION,
TRANSACTIONS_JOURNEY_NAVIGATION,
ACH_POSITIVE_PAY_JOURNEY_NAVIGATION,
CUSTOM_PAYMENT_JOURNEY_NAVIGATION,
],
};

export const authConfig: AuthConfig = {
Expand Down
Loading
Loading