Skip to content

Commit

Permalink
Job edit modal styling (#974)
Browse files Browse the repository at this point in the history 
* initial concept

* bring save into editor modal

* move help text up for state assembly

* run mix format

* bump version in mix.exs

* undo formatting attr

* undo on_mount and slot formatting
  • Loading branch information
@taylordowns2000
taylordowns2000 authored Jul 26, 2023
1 parent 33537fb commit 20fb052
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 60 deletions.
35 changes: 18 additions & 17 deletions lib/lightning_web/live/job_live/manual_run_component.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@ defmodule LightningWeb.JobLive.ManualRunComponent do
phx-submit="run"
>
<.dataclip_selector form={f} phx-target={@myself} dataclips={@dataclips} />
<div :if={is_nil(@selected_dataclip)} class="flex-1 flex flex-col">
<Form.text_area form={f} field={:body} phx-debounce="300" />
</div>
Expand All @@ -74,27 +73,29 @@ defmodule LightningWeb.JobLive.ManualRunComponent do
<Common.dataclip_type_pill dataclip={@selected_dataclip} />
</div>
</div>
<div class="flex flex-row mt-4">
<div class="basis-1/2 font-semibold text-secondary-700">
State Assembly
</div>
<div class="text-right text-sm">
<%= if(@selected_dataclip.type == :http_request) do %>
The JSON shown here is the <em>body</em>
of an HTTP request. The state assembler will place this payload into
<code>state.data</code>
when the job is run, before adding <code>state.configuration</code>
from your selected credential.
<% else %>
The state assembler will overwrite the <code>configuration</code>
attribute below with the body of the currently selected credential.
<% end %>
</div>
</div>
</div>
<div class="grow h-32 overflow-y-auto">
<div class="h-32 overflow-y-auto">
<LightningWeb.RunLive.Components.log_view log={
format_dataclip_body(@selected_dataclip)
} />
</div>
<div class="flex-none">
<div class="font-semibold text-secondary-700">State Assembly</div>
<div class="text-right text-sm">
<%= if(@selected_dataclip.type == :http_request) do %>
The JSON shown here is the <em>body</em>
of an HTTP request. The state assembler will place this payload into
<code>state.data</code>
when the job is run, before adding <code>state.configuration</code>
from your selected credential.
<% else %>
The state assembler will overwrite the <code>configuration</code>
attribute below with the body of the currently selected credential.
<% end %>
</div>
</div>
</div>
<div class="flex-none flex place-content-end">
<Form.submit_button
Expand Down
24 changes: 22 additions & 2 deletions lib/lightning_web/live/workflow_live/edit.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,8 @@ defmodule LightningWeb.WorkflowLive.Edit do
<div class="flex-none" id="job-editor-pane">
<div
:if={@selected_job && @selection_mode == "expand"}
class="absolute hidden inset-0 z-20"
class="fixed left-0 top-0 right-0 bottom-0 m-8 hidden inset-0 z-50
bg-white fixed inset-0 z-10 overflow-y-auto rounded-lg shadow-xl"
phx-mounted={fade_in()}
phx-remove={fade_out()}
>
Expand All @@ -87,7 +88,26 @@ defmodule LightningWeb.WorkflowLive.Edit do
"#{@base_url}?s=#{@selected_job.id}"
}
form={single_inputs_for(@workflow_form, :jobs, @selected_job.id)}
/>
>
<:footer>
<.with_changes_indicator changeset={@changeset}>
<div class="flex flex-row gap-2">
<Heroicons.lock_closed
:if={!@can_edit_job}
class="w-5 h-5 place-self-center text-gray-300"
/>
<Form.submit_button
class=""
phx-disable-with="Saving..."
disabled={!@can_edit_job or [email protected]?}
form="workflow-form"
>
Save
</Form.submit_button>
</div>
</.with_changes_indicator>
</:footer>
</LightningWeb.WorkflowLive.JobView.job_edit_view>
</div>
</div>
<.form
Expand Down
21 changes: 13 additions & 8 deletions lib/lightning_web/live/workflow_live/editor_pane.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,19 @@ defmodule LightningWeb.WorkflowLive.EditorPane do
@impl true
def render(assigns) do
~H"""
<div class={@class} id={@id}>
<JobBuilderComponents.job_editor_component
adaptor={@adaptor}
source={@source}
id={"job-editor-#{@job_id}"}
disabled={@disabled}
phx-target={@myself}
/>
<div class="h-full">
<div class="text-xl text-center font-semibold text-secondary-700 mb-2">
Editor
</div>
<div class={@class} id={@id}>
<JobBuilderComponents.job_editor_component
adaptor={@adaptor}
source={@source}
id={"job-editor-#{@job_id}"}
disabled={@disabled}
phx-target={@myself}
/>
</div>
</div>
"""
end
Expand Down
79 changes: 47 additions & 32 deletions lib/lightning_web/live/workflow_live/job_view.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,19 @@ defmodule LightningWeb.WorkflowLive.JobView do
def container(assigns) do
~H"""
<div class="relative h-full flex bg-white" id={@id}>
<div class="grow flex min-h-full flex-col ">
<div class="grow flex min-h-full flex-col">
<div class="h-14 border-b relative">
<%= render_slot(@top) %>
</div>
<!-- 3 column wrapper -->
<div class="grow flex">
<div class="grow flex h-5/6">
<%= for slot <- @column do %>
<div class={"flex-1 px-4 py-6 #{Map.get(slot, :class, "")}"}>
<%= render_slot(slot) %>
</div>
<% end %>
</div>
<div class="h-14 flex border-t">
<div class="h-14 flex border-t p-2 justify-end">
<%= render_slot(@bottom) %>
</div>
</div>
Expand All @@ -43,6 +43,8 @@ defmodule LightningWeb.WorkflowLive.JobView do
attr :on_run, :any, required: true, doc: "Callback to run a job manually"
attr :follow_run_id, :any, default: nil

slot :footer

def job_edit_view(assigns) do
~H"""
<.container id={"job-edit-view-#{@job.id}"}>
Expand Down Expand Up @@ -84,24 +86,32 @@ defmodule LightningWeb.WorkflowLive.JobView do
</:column>
<:column>
<!-- Right column area -->
<%= if @follow_run_id do %>
<div class="h-full">
<%= live_render(
@socket,
LightningWeb.RunLive.RunViewerLive,
id: "run-viewer-#{@follow_run_id}",
session: %{"run_id" => @follow_run_id},
sticky: true
) %>
<div>
<div class="text-xl text-center font-semibold text-secondary-700 mb-2">
Output & Logs
</div>
<% else %>
<div class="w-1/2 h-16 text-center m-auto pt-4">
<div class="font-semibold text-gray-500 pb-2">
No Run
<%= if @follow_run_id do %>
<div class="h-full">
<%= live_render(
@socket,
LightningWeb.RunLive.RunViewerLive,
id: "run-viewer-#{@follow_run_id}",
session: %{"run_id" => @follow_run_id},
sticky: true
) %>
</div>
</div>
<% end %>
<% else %>
<div class="w-1/2 h-16 text-center m-auto pt-4">
<div class="text-gray-500 pb-2">
After you click run, the logs and output will be visible here.
</div>
</div>
<% end %>
</div>
</:column>
<:bottom>
<%= render_slot(@footer) %>
</:bottom>
</.container>
"""
end
Expand Down Expand Up @@ -129,20 +139,25 @@ defmodule LightningWeb.WorkflowLive.JobView do
end)

~H"""
<%= if @is_persisted do %>
<.live_component
module={LightningWeb.JobLive.ManualRunComponent}
id={"manual-job-#{@job.id}"}
job={@job}
dataclips={@dataclips}
project={@project}
user={@user}
on_run={@on_run}
can_run_job={@can_run_job}
/>
<% else %>
<p>Please save your Job first.</p>
<% end %>
<div>
<div class="text-xl text-center font-semibold text-secondary-700 mb-2">
Input
</div>
<%= if @is_persisted do %>
<.live_component
module={LightningWeb.JobLive.ManualRunComponent}
id={"manual-job-#{@job.id}"}
job={@job}
dataclips={@dataclips}
project={@project}
user={@user}
on_run={@on_run}
can_run_job={@can_run_job}
/>
<% else %>
<p>Please save your Job first.</p>
<% end %>
</div>
"""
end

Expand Down
2 changes: 1 addition & 1 deletion mix.exs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ defmodule Lightning.MixProject do
def project do
[
app: :lightning,
version: "0.6.7",
version: "0.7.0",
elixir: "~> 1.13",
elixirc_paths: elixirc_paths(Mix.env()),
compilers: Mix.compilers(),
Expand Down

0 comments on commit 20fb052

Please sign in to comment.