Hide long warnings in the editor panel into tooltips (#2594)

* Hide long warnings in the editor panel into tooltips

---------

Co-authored-by: Stuart Corbishley <[email protected]>

CHANGELOG.md

@@ -21,6 +21,8 @@ and this project adheres to
 
 ### Fixed
 
+- Fix editor panel buttons gets out of shape on smaller screens
+  [#2278](https://github.com/OpenFn/lightning/issues/2278)
 - Do not send empty strings in credential body to the worker
   [#2585](https://github.com/OpenFn/lightning/issues/2585)
 - Refactor projects dashboard page and fix bug on last activity column

DEPLOYMENT.md

@@ -80,16 +80,16 @@ Ensure you set the following URLs:
 These envrionment variables will need to be set in order to configure the github
 app:
 
-| **Variable**               | **Description**              |
-| -------------------------- | ---------------------------- |
-| `GITHUB_APP_ID`            | the github app ID.           |
-| `GITHUB_APP_NAME`          | the github app name          |
-| `GITHUB_APP_CLIENT_ID`     | the github app Client ID     |
-| `GITHUB_APP_CLIENT_SECRET` | the github app Client Secret |
-| `GITHUB_CERT`              | the github app private key   |
+| **Variable**               | **Description**                                                                                                                    |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `GITHUB_APP_ID`            | the github app ID.                                                                                                                 |
+| `GITHUB_APP_NAME`          | the github app name. This is the name used in the public link. It is the downcased name with spaces replaced with hyphens          |
+| `GITHUB_APP_CLIENT_ID`     | the github app Client ID                                                                                                           |
+| `GITHUB_APP_CLIENT_SECRET` | the github app Client Secret                                                                                                       |
+| `GITHUB_CERT`              | the github app private key (Base 64 encoded)                                                                                       |
 
 You can access these from your github app settings menu. Also needed for the
-configurtaion is:
+configuration is:
 
 - `REPO_CONNECTION_SIGNING_SECRET` - secret used to sign access tokens. This
   access token is used to authenticate requests made from the github actions.
@@ -215,7 +215,7 @@ After a Kafka consumer group connects to a Kafka cluster, the cluster will track
 the last committed offset for a given consumer group ,to ensure that the consumer
 group receives the correct messages.
 
-This data is retained for a finite period. If an enabled Kafka trigger is 
+This data is retained for a finite period. If an enabled Kafka trigger is
 disabled for longer than the offset retention period the consumer group offset
 data will be cleared.
 

lib/lightning_web/live/workflow_live/components.ex

@@ -778,9 +778,15 @@ defmodule LightningWeb.WorkflowLive.Components do
     """
   end
 
+  attr :id, :string
+  attr :class, :string, default: ""
+  attr :presences, :list
+  attr :prior_user, :map
+  attr :current_user, :map
+
   def online_users(assigns) do
     ~H"""
-    <div id={@id} class="flex gap-0">
+    <div id={@id} class={["flex gap-0", @class]}>
       <.render_user
         :for={%{user: online_user} <- @presences}
         :if={online_user.id != @current_user.id}

lib/lightning_web/live/workflow_live/edit.ex

@@ -86,30 +86,29 @@ defmodule LightningWeb.WorkflowLive.Edit do
                     "You are viewing a snapshot of this workflow that was taken on #{Lightning.Helpers.format_date(@snapshot.inserted_at)}"
               }
             />
-            <div class="mx-2"></div>
             <LightningWeb.WorkflowLive.Components.online_users
               id="canvas-online-users"
               presences={@presences}
               current_user={@current_user}
               prior_user={@prior_user_presence.user}
+              class="mr-2"
             />
+            <div :if={@snapshot_version_tag != "latest" && @can_edit_workflow}>
+              <span
+                id="edit-disabled-warning"
+                class="cursor-pointer text-xs flex items-center"
+                phx-hook="Tooltip"
+                data-placement="bottom"
+                aria-label="You cannot edit or run an old snapshot of a workflow"
+              >
+                <.icon
+                  name="hero-information-circle-solid"
+                  class="h-4 w-4 text-primary-600 opacity-50"
+                /> Read-only
+              </span>
+            </div>
           </:title>
 
-          <div class="mx-2"></div>
-          <div
-            :if={@snapshot_version_tag != "latest" && @can_edit_workflow}
-            class="flex"
-          >
-            <div class="flex-shrink-0">
-              <Heroicons.information_circle solid class="h-5 w-5 text-indigo-500" />
-            </div>
-            <div class="mx-1 flex-1 md:flex md:justify-between">
-              <p class="text-sm font-semibold text-gray-600">
-                You cannot edit or run an old snapshot of a workflow.
-              </p>
-            </div>
-          </div>
-          <div class="mx-1"></div>
           <.button
             :if={@snapshot_version_tag != "latest"}
             id={"version-switcher-button-#{@workflow.id}"}
@@ -283,10 +282,18 @@ defmodule LightningWeb.WorkflowLive.Edit do
                   <div
                     :if={@snapshot_version_tag == "latest" && @display_banner}
                     id={"inspector-banner-#{@current_user.id}"}
-                    class="flex items-center text-sm font-medium mr-1 text-gray-700"
+                    class="flex items-center text-sm font-medium text-gray-500"
                   >
-                    <Heroicons.lock_closed solid class="h-4 w-4 mr-1" />
-                    <%= @banner_message %>
+                    <span
+                      id={"inspector-banner-#{@current_user.id}-tooltip"}
+                      class="cursor-pointer text-xs flex items-center"
+                      phx-hook="Tooltip"
+                      data-placement="top"
+                      aria-label={@banner_message}
+                    >
+                      <.icon name="hero-lock-closed-solid" class="h-4 w-4" />
+                      Read-only
+                    </span>
                   </div>
 
                   <.version_switcher_toggle

test/lightning_web/live/workflow_live/edit_test.exs

@@ -511,12 +511,8 @@ defmodule LightningWeb.WorkflowLive.EditTest do
       assert force_event(view, :rerun, nil, nil) =~
                "Cannot rerun in snapshot mode, switch to latest."
 
-      assert view
-             |> element(
-               "p",
-               "You cannot edit or run an old snapshot of a workflow."
-             )
-             |> has_element?()
+      assert view |> element("#edit-disabled-warning") |> render() =~
+               "You cannot edit or run an old snapshot of a workflow"
 
       assert view
              |> element("#version-switcher-button-#{workflow.id}")
@@ -528,12 +524,10 @@ defmodule LightningWeb.WorkflowLive.EditTest do
       |> element("#version-switcher-button-#{workflow.id}")
       |> render_click()
 
-      refute view
-             |> element(
-               "p",
-               "You cannot edit or run an old snapshot of a workflow."
-             )
-             |> has_element?()
+      refute view |> has_element?("#edit-disabled-warning")
+
+      refute render(view) =~
+               "You cannot edit or run an old snapshot of a workflow"
 
       refute view
              |> element("#version-switcher-button-#{workflow.id}")