schweizerischebundesbahnen/scion-workbench

SCION Workbench enables the creation of Angular web applications that require a flexible layout to arrange content side-by-side or stacked, all personalizable by the user via drag & drop.

SCION Workbench	Projects Overview	Changelog	Contributing	Sponsoring

SCION Workbench

SCION Workbench enables the creation of Angular web applications that require a flexible layout to arrange content side-by-side or stacked, all personalizable by the user via drag & drop. The workbench layout is ideal for applications with non-linear workflows, enabling users to work on content in parallel. Examples include specialized business applications, scientific or development tools, as well as command & control interfaces.

Learn more about the SCION Workbench.

---

Quickstart

• Getting Started
  Follow these steps to install the SCION Workbench in your project and start with a basic introduction to the SCION Workbench.

Workbench Demo Applications

• SCION Workbench Testing App
  Visit our technical testing application to explore the workbench and experiment with its features.

• SCION Workbench Getting Started App
  Open the application developed in the Getting Started guide.

Documentation

• About SCION Workbench
  Learn more about the SCION Workbench.

• How To Guides
  Get answers to the most common questions when developing an application with the SCION Workbench.

• Workbench and Microfrontends
  Consider adopting a microfrontend architecture with SCION Workbench.

• Features
  Get an overview of existing and planned features of the SCION Workbench.

Announcements

• Announcements
  Get the latest news about the further development of the SCION Workbench.

---

Versions

• v17.0.0-beta.1 and newer are compatible with Angular version 17.x.
• v16.0.0-beta.1 and newer are compatible with Angular version 16.x.
• v15.0.0-beta.1 and newer are compatible with Angular version 15.x.
• v14.0.0-beta.1 and newer are compatible with Angular version 14.x.
• v13.0.0-beta.1 and newer are compatible with Angular version 13.x.
• v12.0.0-beta.1 and newer are compatible with Angular version 12.x.
• v11.0.0-beta.3 provides built-in microfrontend support from the [SCION Microfrontend Platform][link-scion-microfrontend-platform].
• v11.0.0-beta.1 and newer are compatible with Angular version 11.x.
• v0.0.0-beta.35 and newer are compatible with Angular version 10.x.
• v0.0.0-beta.33 and newer are compatible with Angular version 9.x.
• v0.0.0-beta.23 to v0.0.0-beta.32 is only compatible with Angular version 8.x.

scion-workbench's Issues

Activity part renders wrong actions in the activity part header

Activity part does not render the correct actions in the activity part header when toggling activities.

To Reproduce

1. Create 2 activities with an activity action each:

@Component({
  template: `
    <h1>Activity 1</h1>

    <!-- Activity action -->
    <ng-template wbActivityAction>
      Activity Action 1
    </ng-template>
  `
})
export class Activity1Component {
}

@Component({
  template: `
    <h1>Activity 2</h1>

    <!-- Activity action -->
    <ng-template wbActivityAction>
      Activity Action 2
    </ng-template>
  `
})
export class Activity2Component {
}

2. Toggle activity-1, and then activity-2
3. See that the action of activity-2 is not displayed
4. See that when toggling activity-1 again, actions of both activities are displayed

Expected behavior
Actions of activities are only shown when the associated activity is toggled.

Allow giving CSS classes to workbench elements to have stable selectors available in e2e tests

To have stable element selectors available in e2e tests, dedicated CSS classes should be added to fundamental workbench parts. They should begin with a prefix (e.g. e2e) as a hint to the developer to not remove or rename such classes because being public API and used in e2e tests.

Further, some elements like a view, popup, activity, message box and notification should allow being given some custom CSS classes to facilitate the selection of those elements.

Continue scrolling even when the cursor enters or goes past the boundary of an iframe boundary

Current behavior

If scrolling the <sci-viewport> in a remote site by having the primary mouse button pressed and moving the scroll thumb, scrolling stops if the cursor goes past the boundary of the iframe.

Expected behavior

Scrolling should be continued, similar when scrolling with the native scrollbar.

1. Open a view that integrates another application with a remote site and which is embedded inside a <sci-viewport>
2. Scroll the viewport and go past the viewport boundary while still having the primary mouse button pressed
3. See that scrolling stops

Environment

• SCION Workbench version: release/0.0.0-beta.11
• Angular version: 7.0.0

Provide message box action texts when spawning the message box

The current version of the workbench requires texts of message box buttons/actions be registered when importing the workbench module in the root injector. Instead, action texts should be provided when spawning the message box. This can be a simple dictionary with each entry representing an action (action key and display text, respectively).

This feature will be used for the upcoming micro frontend integration to allow micro frontends (or child modules) to popup message boxes.

Breaking change:
Message box action texts are no longer specified when importing the workbench module. Instead, message box texts are provided directly when spawning the message box.

Disable vertical scrolling in workbench view-tab bar

Current behavior

If not adjusting global box-sizing property to border-box, the view-tab bar can be scrolled vertically (scrollbar is not showing, but it is scrollable with the mouse wheel). Also, the dropdown with the views contained in the view-part does not update properly, unless box-sizing is set to border-box.

Expected behavior

The view-tab bar cannot be scrolled vertically regardless of whether border-box property is globally set to border-box.

Initial navigation to a conditionally registered activity fails

An error is thrown if opening the application with an URL that refers to an activity which is not registered as activity yet.

Error: Illegal state: unknown activity in URL

Motivation
Some activities may only be registered if some condition is met, like given a specific query parameter in the URL, or if the user is authorized to see the activity. If entering an URL into the browser address bar with the query parameter set, still, initial navigation fails because query parameters are evaluated after checking the route for a valid and registered activity.

To Reproduce
Steps to reproduce the behavior:

1. Create AppModule as following:

@NgModule({
  declarations: [
   AppComponent, 
   ActivityDebugComponent
  ],
  imports: [
    ...
    WorkbenchModule.forRoot(),
    RouterModule.forRoot([
      {path: 'activity-debug', component: ActivityDebugComponent}
    ], {useHash: true})
  ]
})
export class AppModule {
}

2. Create a simple activity component:

@Component({template: 'Activity-Debug'})
class ActivityDebugComponent {
}

3. Create the AppComponent:

@Component({
  template: `
    <wb-workbench>
      <wb-activity *ngIf="debug"
                   cssClass="activity-debug"
                   label="activity-debug"
                   routerLink="activity-debug">
      </wb-activity>
    </wb-workbench>
  `
})
class AppComponent implements OnDestroy {

  private _destroy$ = new Subject<void>();
  public debug: boolean;

  constructor(route: ActivatedRoute) {
    route.queryParamMap
      .pipe(
        map((paramMap: ParamMap) => coerceBooleanProperty(paramMap.get('debug'))),
        distinctUntilChanged(),
        takeUntil(this._destroy$)
      )
      .subscribe((debug: boolean) => {
        this.debug = debug;
      });
  }

  public ngOnDestroy(): void {
    this._destroy$.next();
  }
}

4. Open a web browser and enter the following URL into your browser address bar, then press
   Enter: http://localhost:4200/#/(activity:activity-debug)?debug=true
   This assumes the application to be served on port 4200 and using hash location strategy.

Expected behavior
ActivityDebugComponent is active and displayed without an error be thrown.

Potential security vulnerability in dependency `[email protected]`

Current behavior

Potential security vulnerability found in dependency [email protected].

Expected behavior

Upgrade dependencies to be up to date.

Environment

• SCION Workbench version: 0.0.0-beta.8
• Angular version: 6.0.9

Add support for Angular 7

Automate releasing of SCION workbench and dependent artifacts

As of now, releasing to NPM registry is a manual task which should be automated.

The process is described in our Release Guidelines.

If pushing a Git release tag (e.g. 2.0.0-beta.0, 2.0.0-beta.1, 2.0.0-rc.0, 2.0.0), all SCION projects should be built and published to NPM. Pre-releases should be tagged with the distribution tag next, and stable releases with latest.

The generation of the changelog must not be automated yet.

Default Activity

Is your feature request related to a problem? Please describe.

my application always opens with a blank screen, that's very annoying.

Describe the solution you'd like

i would like to declare a fallback activity that open per default.

Responsive Design for Mobile Devices

Is your feature request related to a problem? Please describe.

iOS and Android devices fully support all Workbench and Application Platform features. Unsupported browsers issue a warning. Full gestures and touch support.

Allow generating the changelog based on the project's commit messages

Is your feature request related to a problem? Please describe.

Changelog must be manually completed when preparing the release commit in order to publish a new NPM release.

Describe the solution you'd like

Allow generating the changelog based on the project's commit messages. The changelog should have the same format as the changelog used by the Angular project.

Generation of the changelog should still be triggered manually when preparing the release commit to publish a new NPM release.

Additional context

conventional-changelog-angular

Reduce the number of 'mousemove' events dispatched between application windows

Current behavior

Mouse events are dispatched between application windows, e.g. to allow scrolling in custom scrollbars even when the cursor goes past the boundary of an iframe.

When moving a scrollbar, a lot of mouse events are dispatched which causes many change detection cycles.

Expected behavior

• throttle the events which are dispatched
• notify outside of the Angular zone

Environment

• SCION Workbench version: 0.0.0-beta.12
• Angular version: 7.x

Remote sites cover other parts of the workbench like sashes or view dropdown menu

Current behavior

Remote sites are implemented as iframes and added to a top-level workbench DOM element so they are not reparented upon a workbench layout change which would cause the iframe to reload. Because added later in the document flow, they cover parts of the workbench (e.g. prevents sashing or covers the view list drop-down).

Expected behavior

Remote sites do not cover workbench parts.

Steps to reproduce

1. Create a view that contains a remote site
2. Open the view
3. Open the view again and position it to the right of the first view
4. See that the vertical grid sash cannot be moved

Environment

• SCION Workbench version: 0.0.0-beta.10
• Angular version: 6.0.2

Extract `sci-dimension-module` into a separate NPM library

This will be used for the upcoming micro frontend integration to allow micro frontends to use sci-dimension-module without having to manifest a dependency to @scion/workbench.

Breaking change:
Module no longer shipped with @scion/workbench but @scion/dimension NPM module.

Workbench modules should be released automatically on a tag

Workbench modules should be released automatically on a tag.

Describe the solution you'd like

Travis build should release npm artifacts.

Demo app is hosted on untrusted site

Current behavior

browser shows ssl warning when opening demo site :
https://blog.sbb.technology/scion-workbench-demo/

Expected behavior

browser shows demo without warning

Minimal reproduction of the problem with instructions

point your browser to: https://blog.sbb.technology/scion-workbench-demo/ and see error.

Injection not working for lazy-loaded views if masking injection tokens from root injector

Current behavior

If providing a service in a lazily loaded module with the same injection token as a service provided in the root module, the service of the root injector is injected into the lazily loaded view instead of the service of the child injector.

Expected behavior

The service provided in the lazily loaded module should be preferred over the service provided in the root module.

Minimal reproduction of the problem with instructions

1. Create a workbench application with two modules, let's say LazyModule and FooModule
2. Create and register the service FooService in FooModule and add a public member named origin to the service
3. Import FooModule in the app module
4. Import FooModule in LazyModule
5. Inject FooService into app component and assign the member origin the value root-injector
6. Create a component in LazyModule and inject FooService
7. Open the component of LazyModule as a view via lazy module loading
8. See that the member origin is set to root-injector instead of undefined

Environment

• SCION Workbench version: 0.0.0-beta.9
• Angular version: 6.1.4

Allow contributing actions to the viewpart action bar

Is your feature request related to a problem? Please describe.

In our application, we would like to open new views similar to opening new tabs in the browser. The opened view then acts as an entry point for further user interaction.

Describe the solution you'd like

• contribute actions globally to every opened viewpart
• contribute actions locally to the current viewpart, e.g. to provide a view specific context action

Lifecycle hook `wbBeforeDestroy` is not called for views of lazily loaded modules

Current behavior

Lifecycle hook wbBeforeDestroy is not called for views of lazily loaded modules.

Also, the title and heading are not set if they are configured on the route.

Expected behavior

Lifecycle hook is called.

Minimal reproduction of the problem with instructions

1. Create a lazily loaded module
2. Create a view in that module
3. Implement lifecycle hook wbBeforeDestroy in that view
4. Close the view

Environment

• SCION Workbench version: 0.0.0-beta.10
• Angular version: 6.0.2

View tab receiving dblclick event

Current behavior

When closing two (or more) view tabs in quick succession, a dblclick event is fired and delivered to the second view tab, which toggles the maximize mode of the main content.

Expected behavior

When clicking in quick succession to close view tabs, the tabs should be closed without toggling maximize mode (or if tabs have different widths, then the next tab should be activated).

Minimal reproduction of the problem with instructions

Plunkr that demonstrates how an element receives a dblclick event, even though only clicked once:
https://plnkr.co/edit/vrUVABv25rwhtnXxrw8F?p=preview

Reproduce in SCION - Angular Workbench Demo

1. Go to https://blog.sbb.technology/scion-workbench-demo/#/(view.6:person/69//view.5:person/75//view.4:person/9//view.3:person/54//activity:person-list)?viewgrid=WyJ2aWV3cGFydC4xIiwidmlldy4zIiwidmlldy4zIiwidmlldy40Iiwidmlldy41Iiwidmlldy42Il0%3D
2. Double-click on the 'x' of the first tab
3. Tab is closed, but at the same time, the content is maximized

Environment

• SCION Workbench version: 0.0.0-beta.10

Full screen mode

Is your feature request related to a problem? Please describe.

When a lot of views are open at a given moment, especially if they are arranged in different sashes, a single view can get exceedingly small. Although the activity part can be hidden by double-clicking on the view tab, the view doesn't grow much if the grid is big enough.

Describe the solution you'd like

A full screen mode where a single view takes the whole available screen space.

Describe alternatives you've considered

None

Additional context

Not a big difference with hidden activity part

With activity part

Without activity part

Allow cross-origin communication with remote sites

The current version of workbench allows communication with remote sites via URL. The host application can change the URL or listen for URL changes. However, listening for URL changes is not allowed for a cross-origin remote site.

Instead, communication should be based on postMessage and onmessage to safely communicate cross-origin.

Also, listening for URL changes should be removed (breaking change). This is mainly because it internally uses a timer to detect URL changes as there is no change event emitted natively and MutationObserver is not applicable.

This feature will be used for the upcoming micro frontend integration to communicate with remote applications.

Drop area flickers while dragging views

SCION Workbench Application Platform

SCION Workbench Application Platform is an extension to SCION Workbench and allows for integrating content from multiple web applications in a coherent way, thus enabling a micro frontend architecture for allowing different front-end frameworks to co-exist and autonomous delivery. It provides the concept of an application manifest with every application declaring its capabilities and intents to allow for loosely coupled inter-application navigation. Integration into the platform is as lean as possible, consequently, any web application can be integrated without the need for adaptation.

SCION Workbench Application Platform consists of the following new modules:

• workbench-application-platform
• workbench-application-platform.api
• workbench-application.core
• workbench-application.angular

Use Puppeteer to run tests

Motivation: Puppeteer downloads and uses a specific version of Chromium so its API is guaranteed to work out of the box.

Support popular browsers

Is your feature request related to a problem? Please describe.

The workbench works with most modern browsers. As of now, the workbench is optimized and tested on browsers based on the Chromium rendering engine (Google Chrome, Microsoft Edge). However, the workbench should work fine on other modern browsers as well.

Allow using `sciDimension` directive in 'OnPush' change detection context

Current behavior

If not specifying a timer, the directive only works in 'default' change detection context.

Expected behavior

The directive should also work in 'OnPush' change detection context without having to use a timer.

Multiple views cannot be closed all at once if a view rejects closing

Current behavior

If closing multiple views all at once (by using control+shift+k keystroke) and if a view rejects closing, no view is closed at all.

Expected behavior

All views which did not reject closing are closed.

Minimal reproduction of the problem with instructions

1. Create 3 views
2. Implement WbBeforeDestroy lifecycle hook in view 2 to reject closing
3. Open all 3 views
4. Close all views at once by using control+shift+k keystroke
5. See that no view is closed

Environment

• SCION Workbench version: 0.0.0-beta.10
• Angular version: 6.0.2

Activity panel displays wrong activity component

If toggling an activity more than once, no other activity component can be displayed.

To Reproduce
Steps to reproduce the behavior:

1. Click an activity to open it
2. Click the same activity to close it
3. Click the same activity to open it again
4. Click the same activity to close it again
5. Click another activity to open it

Current behavior
The component of step 5 is not displayed, instead component of step 3.

Expected behavior
The component of the currently activated activity is displayed.

Viewports in remote applications show a native scrollbar if the view is inactive at application startup

Current behavior

When reloading the application, viewports inside a remote application show a native scrollbar, but only if the view was inactive at page reload.

Expected behavior

• the native scrollbar is not displayed
• if the scrollbar natively sits on top of the content (e.g., in OS X), the native scrollbar should be used instead

1. Open 'https://scion-workbench-application-platform.now.sh/#/(view.2:contact-app/view/a612a8b/contact%2F39//view.1:contact-app/view/a612a8b/contact%2F38)?viewgrid=WyJ2aWV3cGFydC4xIiwidmlldy4xIiwidmlldy4xIiwidmlldy4yIl0%3D'
2. Activate the second view tab (Alaster Sancto)
3. See that the native and emulated scrollbars are showing

Environment

• Browser: Chrome Canary (in Chrome only when serving the app from localhost)
• SCION Workbench Application Platform
• Angular version: 7.x

Workbench uses deprecated apis

Current behavior

WARNING: /home/travis/build/SchweizerischeBundesbahnen/scion-workbench/projects/scion/workbench/src/lib/ui/viewport/viewport.module.ts[26, 5]: ScrollDispatchModule is deprecated: ScrollDispatchModule has been renamed to ScrollingModule.

and

no-unused-variable is deprecated. Since TypeScript 2.9. Please use the built-in compiler checks instead.

Expected behavior

• Use the new ScrollingModule.
• Use the built-in compiler checks instead.

Minimal reproduction of the problem with instructions

Build the workbench without warnings.

Build the workbench.

Environment

• SCION Workbench version: release/0.0.0-beta.11
• Angular version: 7.0.0

Allow theming and styling the workbench

Is your feature request related to a problem? Please describe.

The workbench does not support theming yet. It is possible to change its appearance by specifying some CSS selectors with higher precedence. However, the DOM structure is not public API and can break in upcoming releases.

Describe the solution you'd like

Instead, the workbench should provide some standardized way to apply a custom theme.

Similar to Angular Material theming, a theme should consist of one or more color palettes and additionally allow customizing some workbench parts like for instance the view tab height.

By default, the workbench should ship with a light and dark theme.

Wrong styling in changelog entries of release `0.0.0-beta.12`

Current behavior

The full issue URL is written out to link changelog entries with their respective issues.

Expected behavior

Use the same style as in other changelog entries.

queryParams in Popup not uri-component encoded

Current behavior

queryParams containing '&' characters mess up the components path

Expected behavior

queryParams are encoded with encodeURIComponent()

Minimal reproduction of the problem with instructions

open a popup with queryParams containing '&'

const qualifier: Qualifier = { entity: 'sample' }; const popup: Popup = { position: 'east', anchor: event.target as Element, queryParams: {aVariable: 'a & b', bVariable: 'c'} }; this.popupService.open(popup, qualifier);

the receiving popup component will not receive variables values for 'aVariable' and 'bVariables' as given above. instead 'aVariable' contains 'a ', 'bVariable' is undefined

Environment

• SCION Workbench version: 0.0.0-beta.15
• Angular version: 7

Allow showing an entry point page

Is your feature request related to a problem? Please describe.

An empty screen is shown to the user when opening the application. Instead, we would like to specify an entry point page.

Describe the solution you'd like

A primary router outlet should be added by the workbench when no view is showing. This would allow to register an empty path route which then is resolved and its component shown.

Cleanup workbench for-root-guard spec

Extract `sci-viewport-module` into a separate NPM library

Extract sci-viewport-module into a separate NPM library

This will be used for the upcoming micro frontend integration to allow micro frontends to use sci-viewport-module without having to manifest a dependency to @scion/workbench.

Breaking change:
Module no longer shipped with @scion/workbench but @scion/viewport NPM module.

Allow using `sci-scrollbars` without `sci-viewport`

Is your feature request related to a problem? Please describe.

We are implementing a table control and would like to use 'sci-scrollbars'. However, because not being exported as public API, they cannot be used.

Describe the solution you'd like

Export the scrollbars as public API. Further, prepare them to also work in an 'on-push' change detection context.

Allow using the application platform standalone

Is your feature request related to a problem? Please describe.

The Application Platform with custom capabilites/intents can be used without the Workbench.

Viewport scrolling does not behave natively

Current behavior

The viewport does not allow to pan the viewport client with touch gestures or to move it while dragging near viewport edges during drag and drop operations and lacks built-in scrolling behavior like acceleration and deceleration.

Expected behavior

Use native overflow scroll functionality.

Minimal reproduction of the problem with instructions

https://blog.sbb.technology/scion-workbench-demo/#/(activity:person-list)

Environment

• SCION Workbench version: 0.0.0-beta.7
• Angular version: 6.x

Allow programmatic registration of activities

This feature will be used for the upcoming micro frontend integration to register activities of micro frontends.

Enhance L&F of the hidden view-list dropdown

This issue enhances the hidden view-list dropdown as following:

• use CDK overlay to show drop-down overlay (to not be caught in the view part boundary)
• rework the design of hidden view tabs drop-down (remove filtering, show hidden view tabs only, use flat design)
• emit viewport change event upon viewport-client dimension change (e.g. due to content change)

Environment

• SCION Workbench version: release/0.0.0-beta.11
• Angular version: 7.0.0

View tab activation history

Is your feature request related to a problem? Please describe.

When closing an active view tab, the tab next to it is activated by default. This can be confusing to the user, especially if the newly activated tab hasn't been used for a while.

Describe the solution you'd like

Keep track of the order the tabs have been activated. When an active tab is closed, the tab which was active before will be activated again, and so on when that tab is closed.

Describe alternatives you've considered

None

Additional context

None

Expose API to register auxiliary routes for views

This feature will be used for the upcoming micro frontend integration to register views of micro frontends

Navigation to views or activities of lazy loaded feature feature modules

Navigation to views or activities of lazy loaded feature feature modules does not work.

Steps to reproduce the behavior:

1. Generate feature module with an activity and a view component.

ng generate module feature --routing
ng generate component feature/activity
ng generate component feature/view

2. Register routes in feature module

const routes: Routes = [
  {
    path: 'activity',
    component: ActivityComponent
  },
  {
    path: 'view',
    component: ViewComponent
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FeatureRoutingModule {
}

3. Register a route in AppRoutingModule pointing to the feature module

const routes: Routes = [
  {
   path: 'feature', 
   loadChildren: './feature/feature.module#FeatureModule'
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

4. Open the activity and view via router link in workbench activities

    <wb-workbench>
      <wb-activity title="Activity of feature module"
                   label="dashboard"
                   cssClass="material-icons"
                   routerLink="feature/activity">
      </wb-activity>
      <wb-activity title="View of feature module"
                   label="view_module"
                   cssClass="material-icons"
                   routerLink="feature/view"
                   target="view">
      </wb-activity>
    </wb-workbench>

Expected behavior
Views and activities aare be opened.

Hide activity bar if no activity is registered

Is your feature request related to a problem? Please describe.

In our project, we do not use activities at all.

Describe the solution you'd like

The activity bar should only be showing if some activities are registered.

Viewport content does not stretch if it overflows the viewport boundaries horizontally

If some content inside a <sci-viewport> horizontally overflows the viewport boundaries, the viewport correctly shows a horizontal scrollbar. However, when scrolling to the right, background color does not extend to the right and flex items do not stretch.

For that reason, the display of the viewport should be changed from 'flex' to 'grid'. By default, this creates a single column layout which by default stretches its content as expected. If using a flex layout, stretching the flex item has not the desired effect.

Add a generic way to issue generic intents to the WAP client API

https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/resources/site/how-to/workbench-application-platform/how-to-install-a-programmatic-intent-handler.md describes how a custom intent handler can be registered in the host application. But currently there is no way to call the host application from a child application for those generic intents.

Describe the solution you'd like

The client API should provide a service to issue generic intents, which are then handled by the custom intent handlers.

Describe alternatives you've considered

Using the message-bus directly in the client app.

Allow to display a component in a popup

The Workbench should provide a mechanism to show a component in a popup, similar to show a component in a view or activity.

The motivation for this feature request is the upcoming micro-frontend integration to allow micro-frontends to show content past the boundary of the view boundary.