Service Module Creating Service Flow Page

[SigritSiht]

AS AN Administrative User I WANT TO pick various elements previously created or predefined (query connections, final utterance, user input/output fields, TARA, SiGA etc) SO THAT I CAN assemble the service flow

This issue is to finalize a Service with the input provided by https://github.com/buerokratt/Service-Module/issues/12

~Use https://xd.adobe.com/view/cb1ca0df-2dea-4432-a05d-bb75db6e2e5f-9e4f as GUI reference instead of the images added in comments~

Acceptance Criteria

GUI

• [x] Based on Figma example
• [x] Service name and description initially displayed on screen (currently missing on GUI mock)
• [x] Blocks can be collapsed (minimize, maximize)
• [x] Service elements on the left of the GUI can be drag-and-dropped to create a Service flow
• [ ] ~Under "Settings", a generic response to provide in case of errors / exceptions (#EHA settings) can be added and updated~
• [x] Button "Continue with training the Service", takes to #11
• [x] Button "Save as Draft" created, takes to #11
• [x] Changes to Service DSLs are triggered after pressing the "Save Service" (or similar) button

DSL

• [ ] ~#50 is used to provide error / exception (#EHA) responses for End Users (use Ruuter's functionality and EHA concept)~

  ~#EHA scope within this project is to have a proper GUI and static response from back-end (JSON served by Nginx, for example)~

• [x] #21
• [ ] #13
• [ ] ~geolocation element (enabling sharing of end-users location) can be added to service flow~
• [ ] #5
• [x] #16
• [ ] A Service created can be saved as a draft Service by using #41

Comment: The return section of the Ruuter DSL of a created service has to be manipulatable via GUI by adding static text and any number of output in any order from previous steps of the same Ruuter DSL.

[SigritSiht]

[SigritSiht]

[turnerrainer]

@SigritSiht should be covered by D&D GUI developments.

I'll label it as obsolete at the moment but don't delete it yet.

[SigritSiht]

@turnerrainer this is back to ToDo because #6 and #20 are now combined and this new task should be reexamined.

[turnerrainer]

The Services on the left are created via #12 - dynamic Services with potentially any kind of endpoints.

The Services on the right are Ruuter Sticky Services (see #37 for an example)

[SigritSiht]

New and improved pictures that reflect all ACs

https://xd.adobe.com/view/cb1ca0df-2dea-4432-a05d-bb75db6e2e5f-9e4f/

[turnerrainer]

Blocked as needs further discussion regarding to training Rasa models -- input from @vmugra and @KlviG needed

[SigritSiht]

Blocked as needs further discussion regarding to training Rasa models -- input from @vmugra and @KlviG needed

Discussed with the BYK team and the AC:

• [ ] Button ("Continue with training the Service") created, takes to Training Module's functionality to train a new model

is probably going to be changed to direct user to #11 and provide a notification "Model will be automatically trained on XXXday" if agency has set an automated training process to take place or "Model needs to be trained" if agency does not have an automated process in place.

[SigritSiht]

TBD by @turnerrainer but Rasa rules should be created in this view but using the same elements etc. as are in use for the Training Module.

TBD by @turnerrainer but Service can also just be assembled URLs not only queries for Ruuter. (ex. RaRa)

[SigritSiht]

First look of UX done, still needs a bit of work.

[SigritSiht]

Automatic save trigger is missing as an AC, needed so user's done work would remain as Draft.

[trevorling]

@turnerrainer Figma link

[turnerrainer]

GUI-blocked

[allarlaaneleht]

BUG: Button "Save as Draft" created does not take to https://github.com/buerokratt/Service-Module/issues/11 . Nothing happens if the button is clicked on.

[allarlaaneleht]

BUG: Created service cannot be saved. After clicking on "continue" you will be directed to the services landing page, created service does not appear.

[allarlaaneleht]

BUG: No TARA endpoint values displayed when creating a service flow.

[1AhmedYasser]

BUG: Button "Save as Draft" created does not take to #11 . Nothing happens if the button is clicked on.

@allarlaaneleht Save as draft now creates the service as draft and the reason it does not take you to 11 is that you may need to test it first or change something before pressing on continue and moving on to 11, if would make save as draft go to #11 directly then the service admin won't be able to test the service first or test the components, what do you think ?

[1AhmedYasser]

@allarlaaneleht this behaviour is glitchy, you should always save as draft first before publishing the service, i modified the flow to prevent you from pressing continue on the last step before you have saved it as draft and the test button is shown to you

[1AhmedYasser]

BUG: No TARA endpoint values displayed when creating a service flow.

@allarlaaneleht Added Tara Secrets, but currently all secrets are defined inside the yml files, but i think there should be a panel to change the secrets values other than inside the codebase, for now the added secrets are containing mock values, and these values should be changed somehow from the GUI by the service admin, what do you think ?

[allarlaaneleht]

@1AhmedYasser @varmoh Saving the draft still does not seem to be working. The service won't appear in the services list after saving the draft. Could you please take a look at this.

[allarlaaneleht]

1. Short summary: User cannot either scroll the page or zoom in and out to have an overview of the service flow.
2. Expected result: User should be able to zoom in and out the service flow iot have and overview of the flow.
3. Real result: the page is not zoomable or scrollable.
4. How to reproduce the bug: create the service flow.
5. Pic or video: -

[allarlaaneleht]

1. Short summary: Service can be saved without naming it.
2. Expected result: Service's name and description should be obligatory fields to be filled.
3. Real result: One can save the service without filling services name and description.
4. How to reproduce the bug: create a service without naming it, save it.
5. Pic or video:-

[allarlaaneleht]

1. Short summary: User cannot add a new element in the middle of the flow.
2. Expected result: User should be able to add a new element in the middle of the flow if needed. At the moment, one should delete the existing flow to the point where the new element needs to be added.
3. Real result: User can only add new element as the last element of the flow.
4. How to reproduce the bug: Create a service flow. Try to add a new element in between already added elements.
5. Pic or video: https://drive.google.com/file/d/1nuekuIfzDq5tQKsZ0X6AUSnZENm8TY_i/view?usp=sharing (from 00:00 to 00:12)

[allarlaaneleht]

1. Short summary: The "add a new element" box in the service flow can be dragged/moved in between already added elements. When it is moved to the position where the arrows (and lines) match (cannot tell if they are merged or user just sees one line, but actually two of them exist which you cannot see). Now, when for example, "end the conversation" element is added between other elements, flow test is still successful. In conclusion, When the illogical service is created, then you get success message (or the arrows no not present the actual flow).
2. Expected result: There should not be an opportunity to have menu elements after final elements (end the conversation and forward to customer support)
3. Real result: "Ending" or "final" elements can be added between other elements, test result will be still successful.
4. How to reproduce the bug: see the video.
5. Pic or video: https://drive.google.com/file/d/14_R2OajnWHUhftuhKttmIrEcV8dFD48L/view?usp=sharing

[allarlaaneleht]

1. Short summary: When elements are moved around, flow arrows break and connective flow breaks.
2. Expected result: Lines and arrows should not break when elements are moved around.
3. Real result: Connective lines between flow elements can break.
4. How to reproduce the bug: Create a service flow, move the elements around.
5. Pic or video: https://drive.google.com/file/d/1Rt40iZiWMvq-CetZZW1eQC2yiMwXLZQX/view?usp=sharing

[allarlaaneleht]

1. Short summary: Hovering over the flow elements creates arrows and lines that lead nowhere.
2. Expected result: The connective lines between the flow elements should not break.
3. Real result: Hovering over the flow elements creates arrows and lines that lead nowhere-
4. How to reproduce the bug: create a service flow, hover over the flow elements. See the video from 00:00:12 to 00:00:30
5. Pic or video: https://drive.google.com/file/d/1nuekuIfzDq5tQKsZ0X6AUSnZENm8TY_i/view?usp=sharing

[allarlaaneleht]

1. Short summary: The flow items can be moved so they cover another flow element.
2. Expected result: The flow elements should not be able to cover other elemets.
3. Real result: The flow element can be moved so the text from other element is covered by another flow element.
4. How to reproduce the bug: See the video from 00:01:00 to 00:01:15
5. Pic or video: https://drive.google.com/file/d/1nuekuIfzDq5tQKsZ0X6AUSnZENm8TY_i/view?usp=sharing

[allarlaaneleht]

1. Short summary: Service description is not displayed on service flow page.
2. Expected result: Service name and description initially displayed on screen.
3. Real result: Only service name is displayed on the screen.
4. How to reproduce the bug: Fill in the service name and description, go to the service flow page.
5. Pic or video:-

[1AhmedYasser]

1. Short summary: Hovering over the flow elements creates arrows and lines that lead nowhere.
2. Expected result: The connective lines between the flow elements should not break.
3. Real result: Hovering over the flow elements creates arrows and lines that lead nowhere-
4. How to reproduce the bug: create a service flow, hover over the flow elements. See the video from 00:00:12 to 00:00:30
5. Pic or video: https://drive.google.com/file/d/1nuekuIfzDq5tQKsZ0X6AUSnZENm8TY_i/view?usp=sharing

Could not replicate on local side, can you recheck from dev side or provide a detailed steps to reproduce this issue

[1AhmedYasser]

1. Short summary: When elements are moved around, flow arrows break and connective flow breaks.
2. Expected result: Lines and arrows should not break when elements are moved around.
3. Real result: Connective lines between flow elements can break.
4. How to reproduce the bug: Create a service flow, move the elements around.
5. Pic or video: https://drive.google.com/file/d/1Rt40iZiWMvq-CetZZW1eQC2yiMwXLZQX/view?usp=sharing

Could not replicate on local side, can you recheck from dev side or provide a detailed steps to reproduce this issue

[1AhmedYasser]

1. Short summary: The "add a new element" box in the service flow can be dragged/moved in between already added elements. When it is moved to the position where the arrows (and lines) match (cannot tell if they are merged or user just sees one line, but actually two of them exist which you cannot see). Now, when for example, "end the conversation" element is added between other elements, flow test is still successful. In conclusion, When the illogical service is created, then you get success message (or the arrows no not present the actual flow).
2. Expected result: There should not be an opportunity to have menu elements after final elements (end the conversation and forward to customer support)
3. Real result: "Ending" or "final" elements can be added between other elements, test result will be still successful.
4. How to reproduce the bug: see the video.
5. Pic or video: https://drive.google.com/file/d/14_R2OajnWHUhftuhKttmIrEcV8dFD48L/view?usp=sharing

Could not replicate on local side, can you recheck from dev side or provide a detailed steps to reproduce this issue

[1AhmedYasser]

1. Short summary: User cannot add a new element in the middle of the flow.
2. Expected result: User should be able to add a new element in the middle of the flow if needed. At the moment, one should delete the existing flow to the point where the new element needs to be added.
3. Real result: User can only add new element as the last element of the flow.
4. How to reproduce the bug: Create a service flow. Try to add a new element in between already added elements.
5. Pic or video: https://drive.google.com/file/d/1nuekuIfzDq5tQKsZ0X6AUSnZENm8TY_i/view?usp=sharing (from 00:00 to 00:12)

@allarlaaneleht This was not mentioned in the AC, so there is not present in the codebase at the current time and will require extra development to achieve it on the GUI and DSL sides, currently the service flow is build sequentially

[1AhmedYasser]

@allarlaaneleht

Enhancements added:

1. Save Draft in 2nd step can now save endpoints for later use In service editing
2. Added Local validation to the following steps (Send Message to client, Client Input, Open new website, file generation) and the rest is still in mock state
3. After you save draft in the flow page then the test service button appears and if you now make new changes the test service button will be disabled until you save the new changes

[1AhmedYasser]

1. Short summary: User cannot either scroll the page or zoom in and out to have an overview of the service flow.
2. Expected result: User should be able to zoom in and out the service flow iot have and overview of the flow.
3. Real result: the page is not zoomable or scrollable.
4. How to reproduce the bug: create the service flow.
5. Pic or video: -

Fixed

[1AhmedYasser]

1. Short summary: Service can be saved without naming it.
2. Expected result: Service's name and description should be obligatory fields to be filled.
3. Real result: One can save the service without filling services name and description.
4. How to reproduce the bug: create a service without naming it, save it.
5. Pic or video:-

Fixed

[1AhmedYasser]

1. Short summary: The flow items can be moved so they cover another flow element.
2. Expected result: The flow elements should not be able to cover other elemets.
3. Real result: The flow element can be moved so the text from other element is covered by another flow element.
4. How to reproduce the bug: See the video from 00:01:00 to 00:01:15
5. Pic or video: https://drive.google.com/file/d/1nuekuIfzDq5tQKsZ0X6AUSnZENm8TY_i/view?usp=sharing

Fixed

[1AhmedYasser]

1. Short summary: Service description is not displayed on service flow page.
2. Expected result: Service name and description initially displayed on screen.
3. Real result: Only service name is displayed on the screen.
4. How to reproduce the bug: Fill in the service name and description, go to the service flow page.
5. Pic or video:-

Fixed

[allarlaaneleht]

Short summary: Text on blue buttons not readable. Expected result: Readable text. Real result: Text not visible. How to reproduce the bug: open page, see the buttons. Pic or video:

[allarlaaneleht]

Short summary: Cannot save the flow as a draft. Expected result: Service draft saved. Real result: Error message. How to reproduce the bug: See the video. Pic or video: https://drive.google.com/file/d/1X7J7DqV-w-uBmiVeHkJn4SYg8sdAoIkx/view?usp=sharing

[allarlaaneleht]

Short summary: Refreshing the page creates new boxes to the flow. Expected result: Refreshing the page should not do anything. Real result: New boxes for new elements appear after refreshing the page. How to reproduce the bug: See the video from 0:15 Pic or video: https://drive.google.com/file/d/1X7J7DqV-w-uBmiVeHkJn4SYg8sdAoIkx/view?usp=sharing

[turnerrainer]

AT rejected possibly due to third-party commits according to @1AhmedYasser

[1AhmedYasser]

Short summary: Text on blue buttons not readable. Expected result: Readable text. Real result: Text not visible. How to reproduce the bug: open page, see the buttons. Pic or video:

Will have a PR from @ExiRain to fix it on header styles

[allarlaaneleht]

Short summary: Cannot save the flow as a draft. Expected result: Service draft saved. Real result: Save button is unresponsive. How to reproduce the bug: Create service flow, try to save it. Pic or video: -

[1AhmedYasser]

@allarlaaneleht Added a fix to node server which is merge, which in some cases didn't allow the service to be saved, please recheck it

[ValterAro]

Short summary: When creating a service in the https://admin.dev.buerokratt.ee/services/newService and then get to the third stage https://admin.dev.buerokratt.ee/services/flow , then you can save the service by pressing "Salvesta mustandina" multiple times and every time it creates a new entry in the https://admin.dev.buerokratt.ee/services/overview list. Expected result: The old service with the same name is overwritten Real result: A new service is created in the list with the same name How to reproduce: written in the summary

Pic:

List of multiple entries

[rasmusei]

@ValterAro why is this task blocked?

[ValterAro]

@rasmusei The problem was that some of the responses were mocked and the service creation flow could not be properly tested. During the last two weeks there was a PR to fix some of it (https://github.com/buerokratt/Service-Module/pull/172), but now the main problem is that the whole service module can not really be tested as the (https://admin.dev.buerokratt.ee/services/flow) is not properly working. When trying to create a new service it throws a CORS error.

[ValterAro]

Short summary: Unable to save a service flow when pressing the "salvesta mustandina" button Expected result: The UI shows a popup of a succesful creation of a service. Real result: It shows that the creation failed How to replicate: Go to https://admin.dev.buerokratt.ee/services/flow , create a service and try to save it. Pic:

[1AhmedYasser]

Short summary: Unable to save a service flow when pressing the "salvesta mustandina" button Expected result: The UI shows a popup of a succesful creation of a service. Real result: It shows that the creation failed How to replicate: Go to https://admin.dev.buerokratt.ee/services/flow , create a service and try to save it. Pic:

@ValterAro Could not replicate it on dev environment at current state, can you please recheck, and if it still presists, then lets have a meeting about it

[ValterAro]

It worked also yesterday. Must have been fixed on the deployment side then on Monday.