TOSCA Workflow Steps & Migration to Redux, NgRx II

Welcome to the TOSCA Workflow Filter & Migration to Redux, NgRx II challenge. In this challenge, we are looking for you to migrate the TOCSC APP to a reactive state application and implement the Workflow Filter.

Let us know any question you have!

Technology stack

• Angular 7
• NodeJS
• HTML
• SCSS
• JavaScript
• NgRx

General requirements

Layout

• The UI should support resolutions 1920px x 1080px and above.

Framework specific

• Follow the best practices of NgRx listed here.

Code formatting

• Make sure code is well documented, all classes, methods, variables, parameters, return values must be documented in every single code file, and appropriate inline comments should be provided too where the code is not straightforward to understand.
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• Use appropriate linter to validate your code.

HTML Specific

• HTML should be valid HTML5 compliant.
• All HTML code naming should not have any conflicts or errors.
• Element and Attribute names should be in lowercase and use a '-' or camel naming to separate multiple-word classes (i.e.. 'main-content', or 'mainContent)
• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• No inline CSS styles- all styles must be placed in an external stylesheet.

CSS Specific

• Use CSS3 Media Queries to load different styles for each page. Do not build a different page for different device/layout.
• You may use SCSS in the project.

Platform

• Desktop: Chrome latest, Firefox latest (Mac & Windows), Safari latest (Mac), IE11+ (Windows), MS Edge
• IE11 is the primary browser.

App Requirement

The layout of given POC should be updated based on the new storyboard. As much as possible use the same directory structure.

0 Resources & links

1. Marvel storyboard https://marvelapp.com/62b5ae5/screen/59039057 (for refrence only)
2. NgRx docs
3. The TOSCA app attached in forum

1. Migration to state management application.

• Update the current application using Redux & NgRx.
• Package those can be used for the migration are listed here https://ngrx.io/docs#packages
• Create a state that should be accessed by many components and services.
• Follow the SHARI principle:

• • Shared: state that is accessed by many components and services.
• • Hydrated: state that is persisted and rehydrated from external storage.
• • Available: state that needs to be available when re-entering routes.
• • Retrieved: state that must be retrieved with a side-effect.
• • Impacted: state that is impacted by actions from other sources.

• Store & Store Devtools integration should be added.

3. Workflows Filter

In the given submission we have partially implemented policies & workflows, in this challenge we will be completing the last part of Workflows and policies i.e. Filters

• Makesure to use Redux & NgRx for implementing Filter.

3.1 Filter

• Ref: https://marvelapp.com/62b5ae5/screen/59039066
• YAML node to be updated: workflows > steps > <selected step> > filter
• Clicking the Steps from the right side nav should open the steps widget from there selecting a step open the Target widget.
• Selecting a Target Value for the Target drop-down should open the Filter widget.
• Read the values of workflows > steps > <selected step> > filter to show the labels98 & drop-down values in the filter widget.
• The 'Delet' label should be 'Delete'
• Clicking Delete should remove the associated filter.
• The drop-down option values of any filter drow-down depends on the values of Properties section https://d.pr/free/i/FNpC2d.
• It should list all the properties currently added.
• Every filter is unique. If a filter value is already selected in a drop-down then that value should not appear in any drop-down's options list when adding or updating any filter.
• Clicking the {;} buttons next to a filter should open the constraint & value selection widget https://marvelapp.com/62b5ae5/screen/59039037.

3.1 Activities

• Ref: https://marvelapp.com/62b5ae5/screen/59039037
• YAML node to be updated: workflows > steps > <selected step> > activities
• As soon as a values is selected in any filter widget's filter drop-down the Activities widget appears.

3.1.1 Activities > Interface, Operation & Implementation

• This Widget should list all the Interfaces of the selected target. Ref: https://d.pr/free/i/KtY09l
• Keep the height of this widget same as it's in the storyboard. Show scrollbar for longer list.
• Selecting an Interface should list its operation. The operation values comes to the immediate node of the selected Interface. Ref: https://d.pr/free/i/3JRFzd , in this case, it should be captureSchemeDetails only.
• Selecting an operation value should automatically select the Implementation values & that should appear in the implementation widget. Ref: https://d.pr/free/i/3JRFzd , if captureSchemeDetails is selected as operation then the implementation should be automatically selected as saveSchemeAttrributes

4. Fixes

• Please fix the widget overlapping issue as seen here: https://d.pr/free/i/0iIFJn .
• This widget appears on clicking the blue {;} button.

5. Existing Function

• All the existing functions implemented in this application should work as it is.