User Story: Chartink Implementation - DEV + QA TASK

[bevanamit]

(a) For Look and Feel Refer Image:

https://drive.google.com/file/d/12EqJQtck9Ts078lHLX6oJqvHKZKtPy7h/view?usp=sharing

Notable Features:

1. Mix of White and Blue / Grey Highlight in alternate rows

2. No Column borders/separators and no row borders

3. White Background

(b) For Content / TradeBull - Alerts Actual UX Refer Image:

https://drive.google.com/file/d/1-uev04uaCGaDUoDMGmDe0MpVEhV1nLUc/view?usp=sharing

Notable Features:

1. Top left corner inside chart-ink page, an info Icon (i).

   -> On hover: WebHook URL

   -> On click: Actual WebHook URL

2. On Top of the Table, there will be three icons in the same order as in the mock-up.

   Note: {On Hover Text to be taken care} for all the icons

   -> Disable All Icon - To disable all the alerts with a confirmation dialog {Standard Confirmation Dialog}

   -> Delete All Alerts - To delete all the alerts with a confirmation dialog {Standard Confirmation Dialog}

   -> Plus Icon - To Add A New Chart Ink Alert

3. Table {Headers are : S.No | Alert Name | Transaction Type | Profit(%) | Loss(%) | Quantity | Status | Actions

   -> S.No shall be sequential 1....10 | Current product limitation is 10 alerts | Free tier only 1 alert

   -> Type - Buy / Sell

   -> Profit & Loss %age - {with 0.05 increase / decrease}

   -> Status should be a switch Green / Red - Green is enabled; Red is disabled

   -> Actions is three dots {vertical/horizontal} based on the icon availability and how each looks on the real UI

   -> The {...} should be clickable and should be noticeable on the UI and should appear as clickable

   -> On click of {...}, a small pop-up shall appear like e.g. 1 https://drive.google.com/file/d/1kFm88QI-s-oL8po3kv7eu9fWvaylpjaI/view?usp=sharing and e.g. 2 https://drive.google.com/file/d/1iE9qr5xWFSYafgvZQMAJeHsmHeSBWRPf/view?usp=sharing

   -> The options available in the above pop-up will be. {Edit & Delete}. This has room for any future Actions like {share, export, etc.}

   -> Click on Delete should send a REST API call for individual DELETE

   -> Click on Edit should open a small pop-up. The location of the pop-up can be either

       -> https://drive.google.com/file/d/1Yy-NY8PS0FzT_d9X89IdQ0PvWYec16F5/view?usp=sharing 
          On the side not hiding the main table OR in the middle of the screen over the table 
   
       ->  When the pop-up is shown | clicking outside should not have any impact.
   
       -> The pop up will be the same for Add and Edit 
   
       -> The pop up should not contain the Enable / Disable switch button.
   
       -> Refer to this image for add/delete pop-up: https://drive.google.com/file/d/11NV_fsxGyB_WlF_7-XraNDgCr4rfHjcE/view?usp=sharing
   
       -> Add / Delete popup will have save / cancel buttons. and an optional cross button to close the window
   
       ->  If the close icon is there -> it should have the same behavior as cancel
   
       ->  Cancel may or may not have a confirmation.
   
       -> Save should send a backend API call for add/update respectively.

   -> Every column should have a feature to sort on that column in the future as per the availability. As of today, sort should be provided on alert name and Type.

[bevanamit]

@kshitijbhardwaj and @anmoldeep0123 please have implementation related discussions on this before u start

[bevanamit]

Target Saturday for giving me for test

[bevanamit]

@anmoldeep0123 and @kshitijbhardwaj Please commit any changes done to this and make it live and comment here so that we can see if things are going right or we can make any changes if required

[bevanamit]

@kshitijbhardwaj @anmoldeep0123

1. One change added to the Add / Edit and actual list table of chartink : https://drive.google.com/file/d/1hqw8xG9qQhyFVRcGI7xHOeFkoyyR9kru/view?usp=sharing ---- Add/Edit Alert https://drive.google.com/file/d/1IU24Om38uZoN-pZZ51N462f15cH0I3ks/view?usp=sharing --- details pop-up https://drive.google.com/file/d/1lQ9mnHcWWowszxA00rZlaHAlWbdWEedd/view?usp=sharing --- Main list table

2. The checkbox thing which @anmoldeep0123 mentioned we can keep it for future enhancement

[bevanamit]

@kshitijbhardwaj

1. Add Description Column in main list
2. Add Description column in Add and Edit Pop-up window

[theheapdump]

@bevanamit test this strictly to the UX we have created.

[theheapdump]

QA Testing

1. UI Testing -> Add / Update / Enable / Disable / Delete / Delete All / Disable All / Test Execution
2. API Backend Testing - /tb/ui/v1/actions/cinkalert - please check code ChartInkAlertsController.java /tb/ui/v1/actions/cinkalert/run - Execute check ChartInkAlertsController.java

[theheapdump]

@bevanamit