Design data transformation menu for notebook

[natdink]

Problem (Why)

Prereq for this is designing the notebook menu

As we begin to bring in new data transformations from the legacy UI, the list is going to grow and it may exceed what we want to display in the add menu that is between each cell in the Notebook. I'm not suggesting we get rid of the data transformations in the add cell menu necessarily but that there is another place where you can access ALL of the possible options.

We originally had a design where a Data Transformation list was displayed inside the Notebook menu, effectively splitting the menu in two. Should we proceed with setting up this menu in this way? or are there other alternatives that will yield better UX? Please evaluate and make a recommendation.

Impact (Who)

App builders

Existing

Currently, data transformations only exist in add cell menu but this list will grow:

Old design that was worked on:

Requirements (What)

What are more specific requirements that needs to take to consider this issue resolved.

[sayalibhagat-Kanini]

@bfekadu21 I have designed three variation for the Dropdown options and also created another version where I changed the position of the transformation menu Options.

[bfekadu21]

@sayalibhagat-Kanini I like the direction of the menu with the subheadings (V1). I left a comment in Figma but can you take a look at the placeholder design for container block that VV is currently working on? They look similar and it would be good to adopt some of the UI from there to make it look consistent.

[sayalibhagat-Kanini]

I have changed the UI of the popup screen.
Figma Link - https://www.figma.com/proto/Qj4tWPsniFOJ6qSLfxOaBT/Drag-And-Drop---Design?node-id=15834-183111&starting-point-node-id=15834%3A183111&show-proto-sidebar=1&t=rb7wehC9tuV1uiis-1

[bfekadu21]

@sayalibhagat-Kanini Added feedback in Figma! Can you update the wires to include the notebook left panel and think about the UI after a transformation is selected?

[sayalibhagat-Kanini]

@bfekadu21 I have designed a flow to show how it will appear when transformation options are selected.

[bfekadu21]

Added feedback in Figma! @sayalibhagat-Kanini

[sayalibhagat-Kanini]

@bfekadu21 As you mentioned, I have changed the position of Transformation Menu. Also I have created the two variation, one with Popup screen and another one with Dropdown options.

[sayalibhagat-Kanini]

Elise liked this variation and added a comment in figma. As there is no design changes are needed, I am moving this ticket to the done state.