When adding a policy highlight the relevant flow only

[bhathiya]

Description:

$subject

Steps to reproduce:

Go to the policy tab of an API and drag and drop a policy to the request flow. It highlights all 3 flows.

-Publisher-Portal-WSO2-APIM.mp4

[ashera96]

@bhathiya the highlight shows all the possible dropzones. When we hover over the exact flow we wish to drop the policy on (eg: request flow), we see a + icon on the policy that we are currently dragging. You see this behaviour because you dragged the Add Header policy. Note that this policy is there for all 3 flows (request, response and fault). If you drag the Add Query Param policy, you will notice that only the Request Flow will get highlighted then. If this UX is confusing, we can modify as follows:

• When a policy is hovered over a dropzone, we show the green highlight (only if droppable to the said flow).

Please give your feedback on this. We can address the reported issue if you feel this is confusing.

[bhathiya]

My experience in other products/websites is that it highlights the relevant flow only. Therefore, in our case when it highlighted all flows, the feeling was like it was going to be applied to all flows if I dropped it.

[bhathiya]

If you wanted to show all relevant flows for a policy, I think we can show it the other way. For example, if someone drags the query param policy to the response flow, we can make the mouse pointer 🚫 or highlight the flow in red?

[tmkasun]

@bhathiya

it highlights the relevant flow only

Yes, this is exactly what we are doing here too, We are highlighting the dropzones in which they could drop the policy.

[tmkasun]

You have tried the Add Header policy which can be applied to all the 3 flows, That's why you see all the cages highlighted.

AFAIK, @ashera96 has already identified the improvements we have to / can do on the policy page, Like highlighting none dropable zones too. @ashera96 is there a GitHub issue to track these improvements? if not shall we create one?

[bhathiya]

@bhathiya

it highlights the relevant flow only

Yes, this is exactly what we are doing here too, We are highlighting the dropzones in which they could drop the policy.

Well, here that's not what I meant by "relevant". Once I start dragging the header policy, we can say all 3 flows are relevant. But once I have the mouse pointer over one flow, say request flow, then that's the relevant path because once I drop it there, it's attached to that particular flow only.

Basically, when I'm over the request path, seeing the response path highlighted didn't feel correct to me.

[tmkasun]

@bhathiya Now got it, I think we could do that as well with the new library that @ashera96 found https://docs.dndkit.com/api-documentation/droppable

[ashera96]

Hi @bhathiya @tmkasun I see a perfectly valid point made here. However, with the current library that we have integrated, we can only do one of the following:

1. When dragging Add Header policy all applicable flows will highlight in green.
2. When dragging Add Header policy none of the flows will highlight until hovered over the dropzone area itself. In this sense, when we hover over Request Flow using Add Header it will give both the green highlight and + icon. If we were to hover over Response Flow with Add Query Param we will see no highlight and no + icon.

We can switch to option [2] if that option is better than [1]. The required change is not complex if we were to get that done for the current release.

We have plans to modify this drag and drop UX upon switching libraries. We have currently used [3] for feature development efforts and have a plan to replace that with [4] (not for the current release though). With that, it will be possible to revisit the UI/UX here.

3. https://github.com/react-dnd/react-dnd/
4. https://docs.dndkit.com/api-documentation/droppable

[bhathiya]

I'm not really sure whether 2 will be better than 1 or not. So let's keep it as is for now.