Create integration editor state diagram

[gashcrumb]

We need to document the current state diagram for the integration editor so it's clear what currently happens when you click where, what pages the user is taken to etc.

And then we need to document what the desired state diagram should be for the integration editor so we can come up with a plan to iron out the many kinks that a user can currently run into.

[gashcrumb]

@kcbabo it's tech debt but like, it's kinda important don't you think? :-)

[kcbabo]

I would say it's tech credit! :-)

[dongniwang]

Would love to learn more about this and offer UX help!

@amysueg @sjcox-rh @michael-coker @seanforyou23

[gashcrumb]

@dongniwang sure thing! Actually any particular diagram tool you'd prefer in UXD? Ideally I'd like to document it in a format such that it can live in the repo and theoretically be updated :-)

The general thing is in the editor we have all kinds of flows through pages, sometimes you can back out of a flow of pages, sometimes you can't, sometimes you cancel all the way back to the detail page etc. I think it'd make sense to diagram this out and then start improving it.

[dongniwang]

@gashcrumb - we had used Lucidchart a few times in the past and we like it a lot! Lucidchart is a connected app you can get for Google drive and you can invite collaborators for your projects.

Maybe we can set up a meeting to brainstorm and capture our thoughts? I can definitely help with creating these workflows once I have a good understanding of this.

[kcbabo]

Adding @gaughan for input.

[gaughan]

This would be great to capture. As a side note implementing autosave by default would remove some of these kinks the user can encounter.

[gashcrumb]

There's a high level flow diagram that @kcbabo didn't tell me about:

Fuse Ignite IA (1).pdf

Let's make sure this is up to date and contains the detail we need. Also Amy is going to reach out to QE to see what tests are in place that check page flows specifically in the editor which could help build up this diagram a bit, and also ensure that we're all on the same page in terms of the design and how it's implemented in the application.

As a side note implementing autosave by default would remove some of these kinks the user can encounter.

@gaughan absolutely agree here, and this is definitely something I'd like but we also need to coordinate this with the backend a bit, at the moment there's some requirements in the model that make it so the UI can't save whenever, the integration needs to be named, the fact that configuration for steps/connections need to be complete are 2 things off the top of my head that I can see causing problems. Mostly just technical issues but it kinda feels like implementing better save functionality needs to be worked out end to end as an epic for a sprint.

[gashcrumb]

@kcbabo totally joking btw :-)

[kcbabo]

No, I totally did that on purpose.

[amysueg]

@gashcrumb - I sent email to @paoloantinori asking for some feedback and input on this process and a QE contact. @paoloantinori - I'll be on PTO for the next 2 days so if you have someone to recommend, please update this issue related to the email I sent. thx.

fyi @dongniwang @sjcox-rh

[amysueg]

@TovaCohen - do you have details in your files or pointers to user documentation that describe the main pathways through the integration editor? That is, the possible options for creating, editing, publishing, unpublishing, republishing, but spelled out as a series of steps? With this story, we are attempting to 'map out' a diagram showing all the pathways. Any help appreciated.

[TovaCohen]

I don't think I have anything that would help here. Sorry!

[gashcrumb]

@amysueg I guess we should maybe consider the current UXD diagram to be the state diagram we're talking about. Wonder if it's worth closing this one once we've identified some tasks for updating the current diagram?

[dongniwang]

@gashcrumb - I thought we're creating a workflow diagram which is going to capture the current and desired workflows of creating an integration. This includes documenting the screens, possible actions, and user flows of creating an integration from scratch or based on existing integrations.

The diagram we have only reflect the information architecture (IA), in other words, the screen relationships, but does not capture any users interactions. I think @sjcox-rh is going to start working on this issue this week.

cc: @amysueg

[gashcrumb]

Ah okay perfect, then we need to leave this open :-)

[sjcox-rh]

State diagram for the integration workflow has been reviewed by @gaughan @gashcrumb @dongniwang @michael-coker @paoloantinori. This diagram shows the current state and the proposed state. For the proposed state, please note that this was done with the consideration that Autosave is implemented.

Please feel free to look over and leave comments if you have any concerns/feedback, @amysueg @seanforyou23 @kcbabo @TovaCohen @heiko-braun.

https://www.lucidchart.com/invitations/accept/d9d991da-1b97-4320-86ca-0bc00e171344

Next step is to create a diagram for the create a connection flow and how these two flows would intertwine.

[kcbabo]

Proposed state appears to have the same dead end as current state when a user selects "Create a connection" when they are prompted for a start connection in the integration editor. Seems like we need a dotted line from that create connection state in the flow to the selection action state, no?

[sjcox-rh]

@kcbabo yes agreed! We talked about that in the review that we need to connect this flow with the create connection flow. We also discussed that once the user is done with the new connection, it would take them back to the integration workflow on the page they left from.

Just created an issue for the create connection flow: #3356

[kcbabo]

Perfect!

[amysueg]

I think it looks great @sjcox-rh - thanks for pulling it all together!

I think we'll need to keep this item open in order to update the state diagram, once the API provider flow is nailed.

I'm wondering how to keep this (and the IA) as 'evergreen' documents that evolve to reflect any number of updates and changes over time. Thoughts?

[amysueg]

Closing this for now and will open new issues per quarterly releases to capture new features and pathways.