Merge pull request #316 from neuroglia-io/fix-expandable-data-row-caret

cdavernas · web-flow · commit 587ff78dc049 · 2022-11-10T17:38:37.000+01:00
Added caret to expandable row in the UI
diff --git a/src/dashboard/Synapse.Dashboard/Features/Shared/Accordion/ExpandableDataRow.razor b/src/dashboard/Synapse.Dashboard/Features/Shared/Accordion/ExpandableDataRow.razor
@@ -21,6 +21,7 @@
 
 <tr class="cursor-pointer" @onclick="Toggle">
     @Header
+    <td class="text-end"><span class="ml-2 text-secondary bi @(IsExpanded ? "bi-caret-up" : "bi-caret-down")"></span></td>
 </tr>
 @if (IsExpanded) {
     <tr>
diff --git a/src/dashboard/Synapse.Dashboard/Features/Shared/Accordion/Expander.razor b/src/dashboard/Synapse.Dashboard/Features/Shared/Accordion/Expander.razor
@@ -19,11 +19,11 @@
 
 <div class="@Class">
     <Dynamic Tag="@HeaderContainerTagName" Class="expander" OnClick="ToggleExpandAsync">
-    @HeaderTemplate(this)
-</Dynamic>
-<Dynamic Tag="@BodyContainerTagName" Class="@GetBodyCssClass()">
-    @Body
-</Dynamic>
+        @HeaderTemplate(this)
+    </Dynamic>
+    <Dynamic Tag="@BodyContainerTagName" Class="@GetBodyCssClass()">
+        @Body
+    </Dynamic>
 </div>
 
 @code
diff --git a/src/dashboard/Synapse.Dashboard/Features/WorkflowInstances/WorkflowInstanceActivitiesList/WorkflowInstanceActivitiesList.razor b/src/dashboard/Synapse.Dashboard/Features/WorkflowInstances/WorkflowInstanceActivitiesList/WorkflowInstanceActivitiesList.razor
@@ -21,29 +21,20 @@
     <table class="table">
         <thead>
             <tr>
-                <th scope="col"></th>
                 <th scope="col">Type</th>
                 <th scope="col">Name</th>
                 <th scope="col">Status</th>
                 <th scope="col">Started At</th>
                 <th scope="col">Executed At</th>
                 <th scope="col">Duration</th>
+                <th scope="col"></th>
             </tr>
         </thead>
         <tbody>
             @foreach(var activity in Activities)
             {
                 <ExpandableDataRow @ref="rows[Activities.IndexOf(activity)]">
                     <Header>
-                        <td>
-                            @if (rows[Activities.IndexOf(activity)].IsExpanded)
-                            {
-                                <small class="bi bi-caret-up"></small>
-                            } else
-                            {
-                                <small class="bi bi-caret-down"></small>
-                            }
-                        </td>
                         <td>@activity.Type</td>
                         <td>
                             @switch(activity.Type)
diff --git a/src/dashboard/Synapse.Dashboard/Features/WorkflowInstances/WorkflowInstanceActivitiesList/WorkflowInstanceActivitiesRow.razor b/src/dashboard/Synapse.Dashboard/Features/WorkflowInstances/WorkflowInstanceActivitiesList/WorkflowInstanceActivitiesRow.razor
@@ -20,7 +20,7 @@
 @inject IMonacoEditorHelper MonacoEditorHelper
 @inject IYamlConverter YamlConverter
 
-<td colspan="7">
+<td colspan="100">
 @if(Activity != null)
 {
     <div class="row">
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/ActionCollectionEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/ActionCollectionEditor.razor
@@ -36,7 +36,7 @@
                         <td><button @onclick="async () => await OnDeleteActionAsync(action)" @onclick:stopPropagation="true" class="btn btn-outline-dark"><small class="bi bi-trash"></small></button></td>
                     </Header>
                     <Body>
-                        <td colspan="3">
+                        <td colspan="4">
                             <ActionEditor Action="action" OnChange="OnChange" />
                         </td>
                     </Body>
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/ActionEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/ActionEditor.razor
@@ -27,7 +27,7 @@
                     <td colspan="2"><h6>General</h6></td>
                 </Header>
                 <Body>
-                    <td colspan="2">
+                    <td colspan="3">
                         <table class="table table-striped">
                             <tbody>
                                 <tr>
@@ -82,7 +82,7 @@
                     <td colspan="2"><h6>Data filter</h6></td>
                 </Header>
                 <Body>
-                    <td colspan="2">
+                    <td colspan="3">
                         <ActionDataFilterEditor 
                         DataFilter="action.ActionDataFilter"
                         OnChange="async e => await OnPropertyChangedAsync(nameof(action.ActionDataFilter), a => a.ActionDataFilter = e)"/>
@@ -99,7 +99,7 @@
                             <td colspan="2"><h6>Function</h6></td>
                         </Header>
                         <Body>
-                            <td colspan="2">
+                            <td colspan="3">
                                 <table class="table table-striped">
                                     <tbody>
                                         <tr>
@@ -131,7 +131,7 @@
                             <td colspan="2"><h6>Subflow</h6></td>
                         </Header>
                         <Body>
-                            <td colspan="2">
+                            <td colspan="3">
                                 <table class="table table-striped">
                                     <tbody>
                                         <tr>
@@ -175,7 +175,7 @@
                             <td colspan="2"><h6>Trigger</h6></td>
                         </Header>
                         <Body>
-                            <td colspan="2">
+                            <td colspan="3">
                                 <table class="table table-striped">
                                     <tbody>
                                         <tr>
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/AuthenticationEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/AuthenticationEditor.razor
@@ -61,7 +61,7 @@
                 <Body>
                     @if(!useSecretBasedProperties)
                     {
-                        <td colspan="2">
+                        <td colspan="3">
                             @switch (authentication.Scheme)
                             {
                                 case AuthenticationScheme.Basic:
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/BranchEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/BranchEditor.razor
@@ -32,7 +32,7 @@
                     <td colspan="2"><h6>Actions</h6></td>
                 </Header>
                 <Body>
-                    <td colspan="2">
+                    <td colspan="3">
                         <ActionCollectionEditor 
                         Actions="branch.Actions"
                         OnChange="async _ => await OnChangeAsync(_ => {})" />
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/EventEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/EventEditor.razor
@@ -71,7 +71,7 @@
                                         <td>@correl.ContextAttributeValue</td>
                                     </Header>
                                     <Body>
-                                        <td colspan="2">
+                                        <td colspan="3">
                                             <table class="table table-striped">
                                                 <tbody>
                                                     <tr>
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/EventStateTriggerEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/EventStateTriggerEditor.razor
@@ -47,7 +47,7 @@
                     <td colspan="2"><h6>Data filter</h6></td>
                 </Header>
                 <Body>
-                    <td colspan="2">
+                    <td colspan="3">
                         <EventDataFilterEditor
                         DataFilter="trigger.DataFilter"
                         OnChange="async df => await OnChangeAsync(t => t.DataFilter = df)"/>
@@ -59,7 +59,7 @@
                     <td colspan="2"><h6>Actions</h6></td>
                 </Header>
                 <Body>
-                    <td colspan="2">
+                    <td colspan="3">
                         <ActionCollectionEditor 
                         Actions="trigger.Actions"
                         OnChange="async _ => await OnChangeAsync(_ => {})" />
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/MetadataEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/MetadataEditor.razor
@@ -33,7 +33,7 @@
                         <td class="d-flex justify-content-end"><button @onclick="async () => await OnMetadataPropertyRemovedAsync(kvp.Key)" @onclick:stopPropagation="true" class="btn btn-outline-dark"><small class="bi bi-trash"></small></button></td>
                     </Header>
                     <Body>
-                        <td colspan="3">
+                        <td colspan="4">
                             <table class="table table-striped">
                                 <tbody>
                                     <tr>
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditor.razor
@@ -28,7 +28,7 @@
                     <td colspan="2"><h6>General</h6></td>
                 </Header>
                 <Body>
-                    <td colspan="2">
+                    <td colspan="3">
                         <table class="table table-striped">
                             <tbody>
                                 <tr>
@@ -89,7 +89,7 @@
                     <td colspan="2"><h6>Data filter</h6></td>
                 </Header>
                 <Body>
-                    <td colspan="2">
+                    <td colspan="3">
                         <StateDataFilterEditor 
                             DataFilter="state.DataFilter"
                             OnChange="async e => await OnPropertyChangedAsync(nameof(state.DataFilter), s => s.DataFilter = e)"/>
@@ -103,7 +103,7 @@
                     <td colspan="2"><h6>Outcome</h6></td>
                 </Header>
                 <Body>
-                    <td colspan="2">
+                    <td colspan="3">
                         <OutcomeEditor 
                         Outcome="@(state.GetOutcome())" 
                         ControlFlow="state.UsedForCompensation ? ControlFlow.Compensation : ControlFlow.Default"
@@ -119,7 +119,7 @@
                     <td colspan="2"><h6>Metadata</h6></td>
                 </Header>
                 <Body>
-                    <td colspan="2">
+                    <td colspan="3">
                         <MetadataEditor 
                         Metadata="state.Metadata" 
                         OnChange="async metadata => await this.OnPropertyChangedAsync(nameof(state.Metadata), d => state.Metadata = metadata)" />
@@ -133,7 +133,7 @@
                     <td colspan="2"><h6>@state.Type.ToString()</h6></td>
                 </Header>
                 <Body>
-                    <td colspan="2">
+                    <td colspan="3">
                         @switch (state)
                         {
                             case CallbackStateDefinition callbackState:
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditors/CallbackStateEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditors/CallbackStateEditor.razor
@@ -23,7 +23,7 @@
             <ExpandableDataRow>
                 <Header><td colspan="2"><h6>Action</h6></td></Header>
                 <Body>
-                    <td colspan="2">
+                    <td colspan="3">
                          <ActionEditor
                         Action="state.Action"
                         OnChange="async a => await OnChangeAsync(s => s.Action = a)" />
@@ -43,7 +43,7 @@
             <ExpandableDataRow>
                 <Header><td colspan="2"><h6>Event data filter</h6></td></Header>
                 <Body>
-                    <td colspan="2">
+                    <td colspan="3">
                         <EventDataFilterEditor
                         DataFilter="state.EventDataFilter"
                         OnChange="async f => await OnChangeAsync(s => s.EventDataFilter = f)"/>
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditors/ForEachStateEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditors/ForEachStateEditor.razor
@@ -76,7 +76,7 @@
                     <td colspan="2"><h6>Actions</h6></td>
                 </Header>
                 <Body>
-                    <td colspan="2">
+                    <td colspan="3">
                         <ActionCollectionEditor 
                         Actions="state!.Actions"
                         OnChange="async e => await OnChangedAsync(_ => {})" />
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditors/OperationStateEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditors/OperationStateEditor.razor
@@ -38,7 +38,7 @@
                     <td colspan="2"><h6>Actions</h6></td>
                 </Header>
                 <Body>
-                    <td colspan="2">
+                    <td colspan="3">
                     <ActionCollectionEditor Actions="state.Actions" OnChange="OnChange" />
                 </td>
                 </Body>
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditors/ParallelStateEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditors/ParallelStateEditor.razor
@@ -48,7 +48,7 @@
                     <td colspan="2"><h6>Branches</h6></td>
                 </Header>
                 <Body>
-                    <td colspan="2">
+                    <td colspan="3">
                     <BranchCollectionEditor 
                     Branches="state.Branches" 
                     OnChange="OnChange" />
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditors/SwitchStateEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditors/SwitchStateEditor.razor
@@ -43,7 +43,7 @@
              <ExpandableDataRow>
                     <Header><td colspan="2"><h6>Cases</h6></td></Header>
                     <Body>
-                        <td colspan="2">
+                        <td colspan="3">
                             <table class="table table-striped">
                                 <thead>
                                     <tr>
@@ -117,7 +117,7 @@
                 <ExpandableDataRow>
                     <Header><td colspan="2"><h6>Default case</h6></td></Header>
                     <Body>
-                        <td colspan="2">
+                        <td colspan="3">
                             <DefaultCaseEditor
                             State="state"
                             DataCase="state.DefaultCondition"
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/WorkflowEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/WorkflowEditor.razor
@@ -120,7 +120,7 @@
                                             <td class="d-flex justify-content-end"><button @onclick="async () => await OnPropertyChangedAsync(nameof(workflow.States), d => d.States?.Remove(state))" @onclick:stopPropagation="true" class="btn btn-outline-dark"><small class="bi bi-trash"></small></button></td>
                                         </Header>
                                         <Body>
-                                            <td colspan="5">
+                                            <td colspan="6">
                                                 <StateEditor State="@state" OnChange="async () => await OnStatePropertyChangedAsync(state)" />
                                             </td>
                                         </Body>
@@ -174,7 +174,7 @@
                                             <td class="d-flex justify-content-end"><button @onclick="async () => await OnPropertyChangedAsync(nameof(Workflow.Events), d => d.Events?.Remove(e))" @onclick:stopPropagation="true" class="btn btn-outline-dark"><small class="bi bi-trash"></small></button></td>
                                         </Header>
                                         <Body>
-                                            <td colspan="6">
+                                            <td colspan="7">
                                                 <EventEditor Event="@e" OnChange="OnEventEditorChanged" />
                                             </td>
                                         </Body>
@@ -223,7 +223,7 @@
                                             <td class="d-flex justify-content-end"><button @onclick="async () => await OnPropertyChangedAsync(nameof(Workflow.Functions), d => d.Functions?.Remove(function))" @onclick:stopPropagation="true" class="btn btn-outline-dark"><small class="bi bi-trash"></small></button></td>
                                         </Header>
                                         <Body>
-                                            <td colspan="5">
+                                            <td colspan="6">
                                                 <FunctionEditor Function="@function" OnChange="OnFunctionEditorChanged" />
                                             </td>
                                         </Body>
@@ -258,7 +258,7 @@
                                             <td class="d-flex justify-content-end"><button @onclick="async () => await OnPropertyChangedAsync(nameof(Workflow.Secrets), d => d.Secrets?.Remove(secret))" @onclick:stopPropagation="true" class="btn btn-outline-dark"><small class="bi bi-trash"></small></button></td>
                                         </Header>
                                         <Body>
-                                            <td colspan="2">
+                                            <td colspan="3">
                                                 <table class="table table-striped">
                                                     <tbody>
                                                         <tr>
@@ -307,7 +307,7 @@
                                             <td class="d-flex justify-content-end"><button @onclick="async () => await OnPropertyChangedAsync(nameof(Workflow.Auth), d => d.Auth?.Remove(authentication))" @onclick:stopPropagation="true" class="btn btn-outline-dark"><small class="bi bi-trash"></small></button></td>
                                         </Header>
                                         <Body>
-                                            <td colspan="3">
+                                            <td colspan="4">
                                                 <AuthenticationEditor Authentication="authentication" OnChange="async e => await OnPropertyChangedAsync(nameof(Workflow.Auth), _ => { })" />
                                             </td>
                                         </Body>
@@ -342,7 +342,7 @@
                                             <td class="d-flex justify-content-end"><button @onclick="async () => await OnPropertyChangedAsync(nameof(Workflow.Annotations), d => d.Annotations?.Remove(annotation))" @onclick:stopPropagation="true" class="btn btn-outline-dark"><small class="bi bi-trash"></small></button></td>
                                         </Header>
                                         <Body>
-                                            <td colspan="2">
+                                            <td colspan="3">
                                                 <table class="table table-striped">
                                                     <tr>
                                                         <td>Annotation</td>
diff --git a/src/dashboard/Synapse.Dashboard/Pages/Resources/Collections/Authentications/Create.razor b/src/dashboard/Synapse.Dashboard/Pages/Resources/Collections/Authentications/Create.razor
@@ -96,7 +96,7 @@
                                             <td class="d-flex justify-content-end"><button @onclick="async () => await OnPropertyChanged(nameof(collection.Authentications), d => d.Authentications?.Remove(authentication))" @onclick:stopPropagation="true" class="btn btn-outline-dark"><small class="bi bi-trash"></small></button></td>
                                             </Header>
                                             <Body>
-                                                <td colspan="5">
+                                                <td colspan="6">
                                                     <AuthenticationEditor Authentication="@authentication" OnChange="OnAuthenticationChanged" />
                                                 </td>
                                             </Body>
diff --git a/src/dashboard/Synapse.Dashboard/Pages/Resources/Collections/Events/Create.razor b/src/dashboard/Synapse.Dashboard/Pages/Resources/Collections/Events/Create.razor
@@ -104,7 +104,7 @@
                                                 <td class="d-flex justify-content-end"><button @onclick="async () => await OnPropertyChanged(nameof(collection.Events), d => d.Events?.Remove(e))" @onclick:stopPropagation="true" class="btn btn-outline-dark"><small class="bi bi-trash"></small></button></td>
                                             </Header>
                                             <Body>
-                                                <td colspan="5">
+                                                <td colspan="6">
                                                     <EventEditor Event="@e" OnChange="OnEventChanged" />
                                                 </td>
                                             </Body>
diff --git a/src/dashboard/Synapse.Dashboard/Pages/Resources/Collections/Functions/Create.razor b/src/dashboard/Synapse.Dashboard/Pages/Resources/Collections/Functions/Create.razor
@@ -102,7 +102,7 @@
                                             <td class="d-flex justify-content-end"><button @onclick="async () => await OnPropertyChanged(nameof(collection.Functions), d => d.Functions?.Remove(function))" @onclick:stopPropagation="true" class="btn btn-outline-dark"><small class="bi bi-trash"></small></button></td>
                                             </Header>
                                             <Body>
-                                                <td colspan="5">
+                                                <td colspan="6">
                                                     <FunctionEditor Function="@function" OnChange="OnFunctionChanged" />
                                                 </td>
                                             </Body>

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@`
`20`	`20`	`@inject IMonacoEditorHelper MonacoEditorHelper`
`21`	`21`	`@inject IYamlConverter YamlConverter`
`22`	`22`
`23`		`-<td colspan="7">`
	`23`	`+<td colspan="100">`
`24`	`24`	`@if(Activity != null)`
`25`	`25`	`{`
`26`	`26`	`<div class="row">`
Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,7 @@`
`61`	`61`	`<Body>`
`62`	`62`	`@if(!useSecretBasedProperties)`
`63`	`63`	`{`
`64`		`- <td colspan="2">`
	`64`	`+ <td colspan="3">`
`65`	`65`	`@switch (authentication.Scheme)`
`66`	`66`	`{`
`67`	`67`	`case AuthenticationScheme.Basic:`