Merge pull request #1040 from OpenFn/961-workflow-name-v2

Improve workflow name editing

CHANGELOG.md

@@ -17,6 +17,8 @@ and sync projects using our latest portability spec
   [937](https://github.com/OpenFn/Lightning/issues/937)
 - Log a warning in the console when the Editor/docs component is given latest
   [#958](https://github.com/OpenFn/Lightning/issues/958)
+- Improve feedback when a Workflow name is invalid
+  [#961](https://github.com/OpenFn/Lightning/issues/961)
 
 ### Changed
 

lib/lightning_web/components/layout_components.ex

@@ -122,7 +122,7 @@ defmodule LightningWeb.LayoutComponents do
     ~H"""
     <div class="flex-none bg-white shadow-sm z-30">
       <div class="max-w-7xl mx-auto h-20 sm:px-6 lg:px-8 flex items-center">
-        <h1 class="text-3xl font-bold text-secondary-900 flex items-center">
+        <h1 class="text-3xl w-full font-bold text-secondary-900 flex items-center grow">
           <%= if assigns[:title], do: render_slot(@title) %>
         </h1>
         <div class="grow"></div>

lib/lightning_web/live/components/icon.ex

@@ -13,6 +13,10 @@ defmodule LightningWeb.Components.Icon do
 
   def runs(assigns), do: Heroicons.rectangle_stack(assigns)
 
+  def pencil(assigns), do: Heroicons.pencil(assigns)
+
+  def exclamation_circle(assigns), do: Heroicons.exclamation_circle(assigns)
+
   def settings(assigns), do: Heroicons.cog_8_tooth(assigns)
 
   def dataclips(assigns), do: Heroicons.cube(assigns)

lib/lightning_web/live/workflow_live/components.ex

@@ -368,30 +368,57 @@ defmodule LightningWeb.WorkflowLive.Components do
     <.form
       :let={f}
       for={@form}
+      class="grow"
       phx-submit="save"
       phx-change="validate"
       id="workflow_name_form"
     >
-      <div class="relative">
-        <%= text_input(
-          f,
-          :name,
-          class: "peer block w-full
-            text-2xl font-bold text-secondary-900
-            border-0 py-1.5 focus:ring-0",
-          required: true,
-          placeholder: "Untitled"
-        ) %>
-        <div
-          class="absolute inset-x-0 bottom-0
-                 peer-hover:border-t peer-hover:border-gray-300
-                 peer-focus:border-t-2 peer-focus:border-indigo-600
-                 peer-invalid:border-t-2 peer-invalid:border-rose-400"
-          aria-hidden="true"
-        >
+      <div class="relative grow">
+        <div class="flex items-center">
+          <.text_input form={f} has_errors={f.errors[:name]} />
+          <%= if f.errors[:name] do %>
+            <span class="text-sm text-red-600 font-normal mx-2 px-2 py-2 rounded whitespace-nowrap z-10">
+              <Icon.exclamation_circle class="h-5 w-5 inline-block" />
+              <%= error_to_string(f.errors[:name]) %>
+            </span>
+          <% end %>
         </div>
       </div>
     </.form>
     """
   end
+
+  defp text_input(assigns) do
+    base_classes =
+      ~w(block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1
+        ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2
+        focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 peer)
+
+    classes =
+      if assigns.has_errors,
+        do:
+          base_classes ++ ~w(bg-red-100 ring-1 ring-red-600 focus:ring-red-600),
+        else: base_classes ++ ~w(focus:ring-gray-500)
+
+    assigns = Map.put_new(assigns, :classes, classes)
+
+    ~H"""
+    <div class="relative w-full max-w-sm rounded-md shadow-sm">
+      <%= text_input(
+        @form,
+        :name,
+        class: @classes,
+        required: true,
+        placeholder: "Untitled"
+      ) %>
+      <div class="pointer-events-none absolute inset-y-0 right-0 flex
+      items-center pr-3 peer-focus:invisible">
+        <Icon.pencil solid class="h-4 w-4 text-gray-400" />
+      </div>
+    </div>
+    """
+  end
+
+  defp error_to_string({message, _}) when is_binary(message), do: message
+  defp error_to_string(errors) when is_list(errors), do: Enum.join(errors, ", ")
 end

test/lightning_web/live/workflow_live/edit_test.exs

@@ -2,6 +2,7 @@ defmodule LightningWeb.WorkflowLive.EditTest do
   use LightningWeb.ConnCase, async: true
   import Phoenix.LiveViewTest
   import Lightning.WorkflowLive.Helpers
+  import Lightning.WorkflowsFixtures
 
   alias LightningWeb.CredentialLiveHelpers
 
@@ -111,6 +112,40 @@ defmodule LightningWeb.WorkflowLive.EditTest do
   describe "edit" do
     setup :create_workflow
 
+    test "click on pencil icon activates workflow name edit mode", %{
+      conn: conn,
+      project: project,
+      workflow: workflow
+    } do
+      another_workflow =
+        workflow_fixture(name: "A random workflow", project_id: project.id)
+
+      {:ok, view, _html} =
+        live(conn, ~p"/projects/#{project.id}/w/#{workflow.id}")
+
+      assert view |> has_element?(~s(input[name="workflow[name]"]))
+
+      assert view
+             |> form("#workflow_name_form", %{"workflow" => %{"name" => ""}})
+             |> render_change() =~ "can't be blank"
+
+      html =
+        view
+        |> form("#workflow_name_form", %{
+          "workflow" => %{"name" => another_workflow.name}
+        })
+        |> render_submit()
+
+      assert html =~ "A workflow with this name already exists in this project."
+      assert html =~ "Workflow could not be saved"
+
+      assert view
+             |> form("#workflow_name_form", %{
+               "workflow" => %{"name" => "some new name"}
+             })
+             |> render_submit() =~ "Workflow saved"
+    end
+
     test "users can edit an existing workflow", %{
       conn: conn,
       project: project,