[Story] Create Connection Dialog in Vue.js Framework

[rkrishnasanka]

Description

When the user clicks on the CONNECTION button, a dialog pops up on the top-left corner of the canvas that tells the user to follow through each of the steps. The dialog will have the following features:

1. parameters sliders where the user can change the parameters
2. a small area where the mouse click instructions at each state of the connection tool
3. a small area that uses vuetify chips (https://vuetifyjs.com/en/components/chips/) that show the source and sinks of the connection in use

A different variation of this dialog should appear when the user is editing the connection.

Additional Description: This entire UI should be built only using the components available in Vuetify (https://vuetifyjs.com/) and should match the mockup. Utilise the Property Drawer.vue as a starting point and build the design to match

Acceptance Criteria:

• [x] The entire UI should match the layout shown in the mockup
• [ ] Add methods for all the button clicks and programmatically adding new sources and sink chips
• [ ] Should not have any linting errors (must be fixed before the pull request
• [ ] Should have methods for opening and closing the dialog via EventBus

[vyiu]

I'm working on this

[rkrishnasanka]

To activate Connection tool check - Line-186 componentToolBar

Check connectionTool to get the data about the connection

[rkrishnasanka]

This line should activate itRegistry.viewManager.activateTool("Connection", "Connection");

[rkrishnasanka]

@vyiu I fixed the issues with the mouseclicks not registering. Changes that need to be made:

• [x] You should update the dialog so that it opens at a fixed position on the canvas (top) as shown in the mockup. Right now it's opening wherever the button is.

• [ ] You should fix the width of the dialog window to be smaller than the canvas and potentially reduce the size of the profile panel and the sink+source panel.