From 41feae60a27c113380f9df2bf83f449da2015d1b Mon Sep 17 00:00:00 2001
From: Chris Zhu <chriszhu@mac.lan>
Date: Sat, 19 Apr 2025 22:53:29 -0700
Subject: [PATCH] refactor telepresence guide

---
 .../controllers/services_controller.js        | 19 -------------------
 .../add_ons/endpoints/_endpoint.html.erb      |  5 +++--
 app/views/add_ons/endpoints/_index.erb        |  2 +-
 app/views/projects/services/_show.html.erb    |  8 +-------
 .../services/_telepresence_guide.html.erb     | 10 ++++++++--
 app/views/projects/services/index.html.erb    |  3 +--
 6 files changed, 14 insertions(+), 33 deletions(-)
 delete mode 100644 app/javascript/controllers/services_controller.js

diff --git a/app/javascript/controllers/services_controller.js b/app/javascript/controllers/services_controller.js
deleted file mode 100644
index ca51d162..00000000
--- a/app/javascript/controllers/services_controller.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["internalUrl"]
-
-  copyToClick(event) {
-    navigator.clipboard.writeText(this.internalUrlTarget.textContent);
-    const element = event.currentTarget;
-    element.classList.add('animate-click');
-    setTimeout(() => element.classList.remove('animate-click'), 300);
-  }
-
-  showTelepresenceGuide(event) {
-    event.preventDefault();
-    this.internalUrlTarget.setAttribute("href", event.target.dataset.internalUrl);
-    this.internalUrlTarget.querySelector("code").textContent = event.target.dataset.internalUrl;
-    telepresence_guide.showModal();
-  }
-}
\ No newline at end of file
diff --git a/app/views/add_ons/endpoints/_endpoint.html.erb b/app/views/add_ons/endpoints/_endpoint.html.erb
index 0ebea956..d1465d84 100644
--- a/app/views/add_ons/endpoints/_endpoint.html.erb
+++ b/app/views/add_ons/endpoints/_endpoint.html.erb
@@ -1,8 +1,9 @@
 <%= turbo_frame_tag endpoint.metadata.name do %>
   <h2 class="text-lg font-bold mb-4"><%= endpoint.metadata.name %></h2>
-  <div>
+  <div class="my-4">
     <h4 class="text-sm font-bold text-gray-500 uppercase">Internal URLs</h4>
-    <p>
+    <%= render "projects/services/telepresence_guide", cluster: add_on.cluster, url: "#{endpoint.metadata.name}.#{add_on.name}.svc.cluster.local:#{endpoint.spec.ports.first.port}" %>
+    <p class="my-2">
       <% endpoint.spec.ports.each do |port| %>
         <% url = "#{endpoint.metadata.name}.#{add_on.name}.svc.cluster.local:#{port.port}" %>
         <div class="cursor-pointer" data-controller="clipboard" data-clipboard-text="<%= url %>">
diff --git a/app/views/add_ons/endpoints/_index.erb b/app/views/add_ons/endpoints/_index.erb
index 9b4df1e3..b7b6964b 100644
--- a/app/views/add_ons/endpoints/_index.erb
+++ b/app/views/add_ons/endpoints/_index.erb
@@ -1,4 +1,4 @@
-<div class="grid md:grid-cols-2 gap-4">
+<div class="grid md:grid-cols-2 gap-4" data-controller="telepresence-guide">
   <% endpoints.each do |endpoint| %>
     <div class="card card-bordered shadow-lg">
       <div class="card-body">
diff --git a/app/views/projects/services/_show.html.erb b/app/views/projects/services/_show.html.erb
index 71d65b63..4152f352 100644
--- a/app/views/projects/services/_show.html.erb
+++ b/app/views/projects/services/_show.html.erb
@@ -7,13 +7,7 @@
         data-controller="clipboard"
         data-clipboard-text="<%= service.internal_url %>"><%= service.internal_url %></pre>
 
-      <a
-        class="text-sm text-gray-500 hover:text-gray-300 cursor-pointer block"
-        data-internal-url="http://<%= service.internal_url %>"
-        data-action="services#showTelepresenceGuide"
-      >
-        How do I connect to this?
-      </a>
+      <%= render "projects/services/telepresence_guide", cluster: @project.cluster, url: "http://#{service.internal_url}" %>
     </div>
   <% end %>
 
diff --git a/app/views/projects/services/_telepresence_guide.html.erb b/app/views/projects/services/_telepresence_guide.html.erb
index 7aefe091..562ff761 100644
--- a/app/views/projects/services/_telepresence_guide.html.erb
+++ b/app/views/projects/services/_telepresence_guide.html.erb
@@ -1,4 +1,10 @@
-<dialog id="telepresence_guide" class="modal">
+<% random_id = "id_#{SecureRandom.hex(8)}" %>
+<a
+  class="text-sm text-gray-500 hover:text-gray-300 cursor-pointer block"
+  onclick="<%= random_id %>.showModal()">
+  How do I connect to this?
+</a>
+<dialog id="<%= random_id %>" class="modal">
   <div class="modal-box w-11/12 max-w-5xl bg-base-300">
     <form method="dialog">
       <button aria-label="Close modal" class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2">
@@ -36,7 +42,7 @@
         </p>
       </div>
       <p class="py-4">
-        You can now access your service at <a data-services-target="internalUrl" class="text-blue-500 hover:text-blue-600" target="_blank"><code></code></a>
+        You can now access your service at <a class="text-blue-500 hover:text-blue-600" target="_blank"><code><%= url %></code></a>
       </p>
     </div>
   </div>
diff --git a/app/views/projects/services/index.html.erb b/app/views/projects/services/index.html.erb
index 944d212b..3ac4ffc2 100644
--- a/app/views/projects/services/index.html.erb
+++ b/app/views/projects/services/index.html.erb
@@ -8,8 +8,7 @@
       <% end %>
     <% end %>
   </div>
-  <div class="overflow-x-auto mt-2" data-controller="services">
-    <%= render "projects/services/telepresence_guide", cluster: @project.cluster %>
+  <div class="overflow-x-auto mt-2" data-controller="telepresence-guide">
     <% if @project.services.empty? %>
       <div>
         <p class="text-gray-500">No services yet</p>