link-uuid style (#2485)

OpenFn · Sep 11, 2024 · 8fb9123 · 8fb9123
1 parent 3b86e5c
commit 8fb9123
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,8 @@ and this project adheres to
 
 ### Changed
 
+- Standardize `link-uuid` style for uuid chips
+
 ### Fixed
 
 ## [v2.9.2] - 2024-09-09

diff --git a/assets/css/app.css b/assets/css/app.css
@@ -382,10 +382,25 @@ div.line-num::before {
       hover:underline hover:underline-offset-2
       whitespace-nowrap
       inline-block
-      font-medium
       text-indigo-400 hover:text-indigo-500;
   }
 
+  .link-uuid {
+    @apply cursor-pointer
+      /* underline */
+      underline-offset-2
+      hover:underline hover:underline-offset-2
+      whitespace-nowrap
+      inline-block
+      text-xs
+      font-mono
+      p-1
+      rounded-md
+      text-gray-500
+      bg-gray-100
+      hover:bg-gray-200;
+  }
+
   .link-plain {
     @apply font-normal
      text-gray-800;

diff --git a/lib/lightning_web/live/run_live/components.ex b/lib/lightning_web/live/run_live/components.ex
@@ -55,7 +55,7 @@ defmodule LightningWeb.RunLive.Components do
             <%= render_slot(label) %>
           </dt>
         <% end %>
-        <dd class="text-gray-900 font-mono">
+        <dd class="text-gray-900">
           <%= render_slot(@value) %>
         </dd>
       </div>

diff --git a/lib/lightning_web/live/run_live/index.html.heex b/lib/lightning_web/live/run_live/index.html.heex
@@ -606,11 +606,7 @@
                           <div>
                             <p class="text-sm mb-1">Workflow Name</p>
                             <span class="text-gray-700 mt-2 font-medium">
-                              WORK ORDER ID &bull;
-                              <span class="font-normal text-xs whitespace-nowrap text-ellipsis
-                            bg-gray-200 p-1 rounded-md font-mono">
-                                INPUT
-                              </span>
+                              WORK ORDER ID &bull; INPUT
                             </span>
                           </div>
                         <% else %>

diff --git a/lib/lightning_web/live/run_live/run_viewer_live.ex b/lib/lightning_web/live/run_live/run_viewer_live.ex
@@ -3,7 +3,6 @@ defmodule LightningWeb.RunLive.RunViewerLive do
   use LightningWeb.RunLive.Streaming, chunk_size: 100
 
   import LightningWeb.RunLive.Components
-  import LightningWeb.Components.Icons
 
   alias Lightning.Accounts.User
   alias Lightning.Policies.Permissions
@@ -41,15 +40,9 @@ defmodule LightningWeb.RunLive.RunViewerLive do
                         navigate={
                           ~p"/projects/#{@project}/history?#{%{filters: %{workorder_id: run.work_order_id}}}"
                         }
-                        class="link link-plain"
+                        class="link-uuid"
                       >
-                        <span class="whitespace-nowrap text-ellipsis">
-                          <%= display_short_uuid(run.work_order_id) %>
-                        </span>
-                        <.icon
-                          name="hero-arrow-up-right"
-                          class="h-2 w-2 float-right"
-                        />
+                        <%= display_short_uuid(run.work_order_id) %>
                       </.link>
                     </:value>
                   </.list_item>
@@ -60,15 +53,9 @@ defmodule LightningWeb.RunLive.RunViewerLive do
                         patch={
                           ~p"/projects/#{@project}/runs/#{run}?step=#{@selected_step_id || ""}"
                         }
-                        class="link link-plain text-ellipsis"
+                        class="link-uuid"
                       >
-                        <span class="whitespace-nowrap text-ellipsis">
-                          <%= display_short_uuid(run.id) %>
-                        </span>
-                        <.icon
-                          name="hero-arrow-up-right"
-                          class="h-2 w-2 float-right"
-                        />
+                        <%= display_short_uuid(run.id) %>
                       </.link>
                     </:value>
                   </.list_item>

diff --git a/lib/lightning_web/live/run_live/show.ex b/lib/lightning_web/live/run_live/show.ex
@@ -93,12 +93,9 @@ defmodule LightningWeb.RunLive.Show do
                       navigate={
                         ~p"/projects/#{@project}/w/#{@workflow.id}?v=#{run.snapshot.lock_version}"
                       }
-                      class="link link-plain text-ellipsis"
+                      class="link text-ellipsis"
                     >
-                      <span class="whitespace-nowrap text-ellipsis">
-                        <%= @workflow.name %>
-                      </span>
-                      <.icon name="hero-arrow-up-right" class="h-2 w-2 float-right" />
+                      <%= @workflow.name %>
                     </.link>
                   </:value>
                 </.list_item>
@@ -109,12 +106,9 @@ defmodule LightningWeb.RunLive.Show do
                       navigate={
                         ~p"/projects/#{@project}/history?#{%{filters: %{workorder_id: run.work_order_id}}}"
                       }
-                      class="link link-plain text-ellipsis"
+                      class="link font-mono"
                     >
-                      <span class="whitespace-nowrap text-ellipsis">
-                        <%= display_short_uuid(run.work_order_id) %>
-                      </span>
-                      <.icon name="hero-arrow-up-right" class="h-2 w-2 float-right" />
+                      <%= display_short_uuid(run.work_order_id) %>
                     </.link>
                   </:value>
                 </.list_item>

diff --git a/lib/lightning_web/live/run_live/workorder_component.ex b/lib/lightning_web/live/run_live/workorder_component.ex
@@ -196,10 +196,7 @@ defmodule LightningWeb.RunLive.WorkOrderComponent do
                 <.link navigate={
                   ~p"/projects/#{@work_order.workflow.project_id}/history?filters[workorder_id]=#{@work_order.id}"
                 }>
-                  <span
-                    class="link font-normal text-xs text-ellipsis font-mono inline-block"
-                    title={@work_order.id}
-                  >
+                  <span class="link-uuid" title={@work_order.id}>
                     <%= display_short_uuid(@work_order.id) %>
                   </span>
                 </.link>
@@ -258,11 +255,7 @@ defmodule LightningWeb.RunLive.WorkOrderComponent do
                 <div role="columnheader" class="col-span-3 pl-4">
                   Run
                   <.link navigate={~p"/projects/#{@project.id}/runs/#{run.id}"}>
-                    <span
-                      title={run.id}
-                      class="link font-normal text-xs whitespace-nowrap text-ellipsis
-                            inline-block rounded-md font-mono"
-                    >
+                    <span title={run.id} class="link font-mono">
                       <%= display_short_uuid(run.id) %>
                     </span>
                   </.link>
@@ -275,7 +268,7 @@ defmodule LightningWeb.RunLive.WorkOrderComponent do
                         &bull; <a
                           id={"toggle_runs_for_#{@work_order.id}"}
                           href="#"
-                          class="text-indigo-400"
+                          class="link"
                           phx-click="toggle_runs"
                           phx-target={@myself}
                         >
@@ -339,22 +332,17 @@ defmodule LightningWeb.RunLive.WorkOrderComponent do
         navigate={
           ~p"/projects/#{@work_order.workflow.project_id}/dataclips/#{@work_order.dataclip_id}/show"
         }
+        class="link-uuid"
       >
-        <span
-          title={@work_order.dataclip_id}
-          class="link font-normal text-xs whitespace-nowrap text-ellipsis
-                rounded-md font-mono"
-        >
+        <span title={@work_order.dataclip_id}>
           <%= display_short_uuid(@work_order.dataclip_id) %>
         </span>
       </.link>
     <% else %>
       <span
         id={"view-dataclip-#{@work_order.dataclip_id}-for-#{@work_order.id}"}
         title={@work_order.dataclip_id}
-        class="font-normal text-xs whitespace-nowrap text-ellipsis
-              p-1 rounded-md font-mono text-indigo-300 cursor-pointer
-              "
+        class="link-uuid"
         phx-hook="Tooltip"
         data-placement="right"
         data-allow-html="true"