Drilldown layout, behaviour, and preview

[blanchco]

Description

• Layout & behaviour for tera-drilldown
• Preview section for tera-drilldown

This idea for this ticket is to create a generalized format for the tera-drilldown component

Defining Tabs

We can add as many tabs as we want by adding the tabName prop to a top level element under tera-drilldown
In this example we have added three tabs to the drilldown called ("Tab 1", "Tab 2", "Tab 3")

<tera-drilldown>
    <div tabName="Tab 1"></div>
    <section tabName="Tab 2"></section>
    <section tabName="Tab 3"></section>
</tera-drilldown>

Defining Tab columns

Taking this further inside each tab, every top level component will be shown in its own evenly-space columns:

In this example. Tab 1 would be split into 3 evenly spaced columns, Tab 2 into 2 evenly spaced columns, and Tab 3 in one column which takes up the entire drilldown.

<tera-drilldown>
    <div tabName="Tab 1">
        <section> section 1<section>
        <section> section 2<section>
        <section> section 3<section>
    </div>
    <section tabName="Tab 2">
        <section> section 1<section>
        <section> section 2<section>
    </section>
    <section tabName="Tab 3">
        <section> section 1<section>
    </section>
</tera-drilldown>

Video

Here's an example video:

Screen.Recording.2023-11-24.at.2.26.29.PM.mov

sample code from the video.

<tera-drilldown
	v-if="dialogIsOpened && currentActiveNode"
	@on-close-clicked="dialogIsOpened = false"
	:title="currentActiveNode.displayName"
	:tooltip="'A brief description of the operator.'"
>
	
	<section tabName="Wizard">
		<component
			:is="drilldownRegistry.get(currentActiveNode.operationType)"
			:node="currentActiveNode"
			@append-output-port="(event: any) => appendOutputPort(currentActiveNode, event)"
			@update-state="(event: any) => updateWorkflowNodeState(currentActiveNode, event)"
		>
		</component>
		<tera-drilldown-preview :options="outputs" v-model="selectedOutput">
                       <p> Lorem Ipsum ... </p>
		</tera-drilldown-preview>
	</section>

	<section tabName="Notebook">
		<section>section 1</section>
		<section>section 2</section>
		<section>section 3</section>
		<section>section 4</section>
	</section>
</tera-drilldown>

Preview

There has also been a generic preview section added which is a common component that is shared with some drilldowns called tera-drilldown-preview

This models the selected output and the developer has the ability to add their own template within the component.

For example

<tera-drilldown-preview>
    <p>Outputs</p>
    <Accordion>
       <Accordion-Tab />
       <Accordion-Tab />
       <Accordion-Tab />
    </Accordion>
</tera-drilldown-preview>

Resolves #(issue)