[Fast 48h] TOSCA Policies & Workflows | Fixes

Welcome to the TOSCA Policies & Workflows | Fixes challenge. In this challenge, we are looking for you to fix the issues listed in this challenge.

Let us know any question you have!

Technology stack

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

General requirements

Layout

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

Framework specific

• Follow the best practices of NgRx listed here.
• 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.

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.

Fixes Required

0 Resources & links

1. Marvel storyboard https://marvelapp.com/62b5ae5/screen/59039051
2. Storyboard source has been provided in the forum.
3. The TOSCA app has been attached in the forum.
4. NgRx docs

1. Targets (Under Policies)

• Ref: https://d.pr/free/i/7ot5Vb
• Clicking New + should allow a user to add a new target.
• The targets added by a user should be removable. Add an X button next to the user added target name.
• Refer Add New Properties in the widget above Targets for workflow reference.

2. Targets (Under Workflows)

• Ref: https://d.pr/free/i/cschcE

• The drop-down here should allow selecting modable_entity similar to what it's there for the Targets > modable_entity drop-down under the Policies tree.

• Only the selected targets should be listed after selecting a modable_entity.

• If no targets are selected for the corresponding modable_entity under the Policies > targets tree then do not show any item when that modable_entity is selected.

• The Workflows > Conditions are added corresponding to the selected target. Make sure this functionality works after the updates.

3. Conditions modal widget

• Ref: https://d.pr/free/i/UTk5bF
• Clicking the {;} button in an active state opens the Conditions modal widget.
• Remove the New & go back icons & text https://d.pr/free/i/e2pOet & move the content in this sidebar a bit upwards.
• Clicking anywhere on the page except this modal widget should close the modal widget.

4. Filter modal widget

• Ref: https://d.pr/free/i/iduZXq
• Remove the icons & update the functions in the same way as it's for 3. Conditions modal widget

5. Editable step name

• Ref: https://d.pr/free/i/Ow9z8B
• Clicking the {;} blue button next to a step name should open the Constraint editor
• Reuse the same constraint editor that appears on clicking {;} in filter widget. https://d.pr/free/i/iduZXq
• On adding/updating the values in the constraint editor, the values of steps > [selected_step] > constraints should be updated: https://d.pr/free/i/sYrnfw . If the attribute constraint doesn't appear for a step then add the constraint attribute & assign value to it.
• The user added step names are editable. For all user added steps, add blue color bottom-border to represent the editable state.

6. Properties (Under Policies)

• Ref: https://d.pr/free/i/CDo5hY
• Add the {;} blue button next to every property name.
• Clicking this blue button should open the constraint editor/value editor widget.
• Selecting a property should only select the property & constraint editor/value editor widget should NOT be displayed.
• Clicking anywhere else on the page except the modal widget should close the modal.
• The user added property names are editable. For all user added properties, add blue color bottom-border to represent the editable state.

7. Properties modal widget

• Ref: https://d.pr/free/i/CDo5hY
• The size of constraint editor / value editor widget appear too big & are not fully visible at once.