feat: rudimentary presence

maxneuvians · maxneuvians · commit 924548849b37 · 2025-01-15T18:22:05.000Z
diff --git a/valentine/assets/css/app.css b/valentine/assets/css/app.css
@@ -479,4 +479,25 @@ ul {
 .presence-list li {
     display: inline;
     margin-right: 0.5rem;
+}
+
+.SideNav-item .presence-list ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}
+
+.SideNav-item .presence-list li {
+    font-size: 0;
+    margin-right: 0.1rem;
+}
+
+.SideNav-item .presence-list .Counter {
+    border: 0px !important;
+    border-radius: 0.25rem;
+    font-size: .25rem;
+    line-height: 0.5rem;
+    min-width: 0.5rem;
+    padding: 0;
 }
diff --git a/valentine/lib/valentine_web/components/layouts/app.html.heex b/valentine/lib/valentine_web/components/layouts/app.html.heex
@@ -7,9 +7,10 @@
     </:item>
     <:item is_full_width />
     <:item>
-      <ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent.render presence={
-        @presence
-      } />
+      <ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent.render
+        current_user={@current_user}
+        presence={@presence}
+      />
     </:item>
     <:item>
       <.button
@@ -134,78 +135,155 @@
         <:item
           is_selected={@active_module == "Index" || @active_module == "Show"}
           navigate={"/workspaces/#{@workspace_id}"}
+          class="d-flex flex-items-center flex-justify-between"
         >
-          <.octicon name="tools-16" /> {gettext("Workspaces")}
+          <span><.octicon name="tools-16" /> {gettext("Workspaces")}</span>
+          <ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent.render
+            current_user={@current_user}
+            presence={@presence}
+            active_module={["Index", "Show"]}
+            workspace_id={@workspace_id}
+          />
         </:item>
         <:item
           :if={@workspace_id}
           is_selected={@active_module == "ApplicationInformation"}
           navigate={~p"/workspaces/#{@workspace_id}/application_information"}
+          class="d-flex flex-items-center flex-justify-between"
         >
-          <.octicon name="star-16" /> {gettext("Application Information")}
+          <span><.octicon name="star-16" /> {gettext("Application Information")}</span>
+          <ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent.render
+            current_user={@current_user}
+            presence={@presence}
+            active_module="ApplicationInformation"
+            workspace_id={@workspace_id}
+          />
         </:item>
         <:item
           :if={@workspace_id}
           is_selected={@active_module == "Architecture"}
           navigate={~p"/workspaces/#{@workspace_id}/architecture"}
+          class="d-flex flex-items-center flex-justify-between"
         >
-          <.octicon name="container-16" /> {gettext("Architecture")}
+          <span><.octicon name="container-16" /> {gettext("Architecture")}</span>
+          <ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent.render
+            current_user={@current_user}
+            presence={@presence}
+            active_module="Architecture"
+            workspace_id={@workspace_id}
+          />
         </:item>
         <:item
           :if={@workspace_id}
           is_selected={@active_module == "DataFlow"}
           navigate={~p"/workspaces/#{@workspace_id}/data_flow"}
+          class="d-flex flex-items-center flex-justify-between"
         >
-          <.octicon name="workflow-16" /> {gettext("Data Flow")}
+          <span><.octicon name="workflow-16" /> {gettext("Data Flow")}</span>
+          <ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent.render
+            current_user={@current_user}
+            presence={@presence}
+            active_module="DataFlow"
+            workspace_id={@workspace_id}
+          />
         </:item>
         <:item
           :if={@workspace_id}
           is_selected={@active_module == "Assumption"}
           navigate={~p"/workspaces/#{@workspace_id}/assumptions"}
+          class="d-flex flex-items-center flex-justify-between"
         >
-          <.octicon name="discussion-closed-16" /> {gettext("Assumptions")}
+          <span><.octicon name="discussion-closed-16" /> {gettext("Assumptions")}</span>
+          <ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent.render
+            current_user={@current_user}
+            presence={@presence}
+            active_module="Assumption"
+            workspace_id={@workspace_id}
+          />
         </:item>
         <:item
           :if={@workspace_id}
           is_selected={@active_module == "Threat"}
           navigate={~p"/workspaces/#{@workspace_id}/threats"}
+          class="d-flex flex-items-center flex-justify-between"
         >
-          <.octicon name="squirrel-16" /> {gettext("Threats")}
+          <span><.octicon name="squirrel-16" /> {gettext("Threats")}</span>
+          <ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent.render
+            current_user={@current_user}
+            presence={@presence}
+            active_module="Threat"
+            workspace_id={@workspace_id}
+          />
         </:item>
         <:item
           :if={@workspace_id}
           is_selected={@active_module == "Mitigation"}
           navigate={~p"/workspaces/#{@workspace_id}/mitigations"}
+          class="d-flex flex-items-center flex-justify-between"
         >
-          <.octicon name="check-circle-16" /> {gettext("Mitigations")}
+          <span><.octicon name="check-circle-16" /> {gettext("Mitigations")}</span>
+          <ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent.render
+            current_user={@current_user}
+            presence={@presence}
+            active_module="Mitigation"
+            workspace_id={@workspace_id}
+          />
         </:item>
       </.side_nav>
       <.side_nav :if={@workspace_id} aria_label="model" class="mt-4" is_border>
         <:item
-          is_selected={@active_module == "Report"}
+          is_selected={@active_module == "ThreatModel"}
           navigate={~p"/workspaces/#{@workspace_id}/threat_model"}
+          class="d-flex flex-items-center flex-justify-between"
         >
-          <.octicon name="file-badge-16" /> {gettext("Threat Model")}
+          <span><.octicon name="file-badge-16" /> {gettext("Threat Model")}</span>
+          <ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent.render
+            current_user={@current_user}
+            presence={@presence}
+            active_module="ThreatModel"
+            workspace_id={@workspace_id}
+          />
         </:item>
       </.side_nav>
       <.side_nav :if={@workspace_id} aria_label="reference-packs" class="mt-4" is_border>
         <:item
           is_selected={@active_module == "ReferencePacks"}
           navigate={~p"/workspaces/#{@workspace_id}/reference_packs"}
+          class="d-flex flex-items-center flex-justify-between"
         >
-          <.octicon name="repo-16" /> {gettext("Reference Packs")}
+          <span><.octicon name="repo-16" /> {gettext("Reference Packs")}</span>
+          <ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent.render
+            current_user={@current_user}
+            presence={@presence}
+            active_module="ReferencePacks"
+            workspace_id={@workspace_id}
+          />
         </:item>
         <:item
           is_selected={@active_module == "SRTM"}
           navigate={~p"/workspaces/#{@workspace_id}/srtm"}
+          class="d-flex flex-items-center flex-justify-between"
         >
-          <.octicon name="tasklist-16" /> {gettext("SRTM View")}
+          <span><.octicon name="tasklist-16" /> {gettext("SRTM View")}</span>
+          <ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent.render
+            current_user={@current_user}
+            presence={@presence}
+            active_module="SRTM"
+            workspace_id={@workspace_id}
+          />
         </:item>
         <:item
           is_selected={@active_module == "Controls"}
           navigate={~p"/workspaces/#{@workspace_id}/controls"}
+          class="d-flex flex-items-center flex-justify-between"
         >
-          <.octicon name="shield-lock-16" /> {gettext("NIST Controls")}
+          <span><.octicon name="shield-lock-16" /> {gettext("NIST Controls")}</span>
+          <ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent.render
+            current_user={@current_user}
+            presence={@presence}
+            active_module="Controls"
+            workspace_id={@workspace_id}
+          />
         </:item>
       </.side_nav>
     </:sidebar>
diff --git a/valentine/lib/valentine_web/helpers/auth_helper.ex b/valentine/lib/valentine_web/helpers/auth_helper.ex
@@ -48,8 +48,6 @@ defmodule ValentineWeb.Helpers.AuthHelper do
   end
 
   defp generate_user_id() do
-    :crypto.strong_rand_bytes(16)
-    |> Base.encode64()
-    |> String.trim_trailing("=")
+    :crypto.strong_rand_bytes(8) |> Base.encode64() |> Kernel.<>("||") |> String.reverse()
   end
 end
diff --git a/valentine/lib/valentine_web/helpers/nav_helper.ex b/valentine/lib/valentine_web/helpers/nav_helper.ex
@@ -9,7 +9,11 @@ defmodule ValentineWeb.Helpers.NavHelper do
   end
 
   defp set_active_module(params, _url, socket) do
-    workspace_id = Map.get(params, "workspace_id", nil)
+    workspace_id =
+      case Map.get(params, "workspace_id") do
+        nil -> Map.get(params, "id", nil)
+        id -> id
+      end
 
     active_module =
       socket.view
diff --git a/valentine/lib/valentine_web/helpers/presence_helper.ex b/valentine/lib/valentine_web/helpers/presence_helper.ex
@@ -12,7 +12,12 @@ defmodule ValentineWeb.Helpers.PresenceHelper do
      |> attach_hook(:presence_update, :handle_info, &handle_info/2)}
   end
 
+  # Sinkhole for presence_diff events as they are handled by the presence OTP process
   defp handle_info(%{event: "presence_diff"}, socket) do
+    {:halt, socket}
+  end
+
+  defp handle_info(%{event: "change"}, socket) do
     {:halt,
      socket
      |> Phoenix.Component.assign(:presence, Valentine.Cache.get("valentine:presence") || %{})}
diff --git a/valentine/lib/valentine_web/live/workspace_live/components/presence_indicator_component.ex b/valentine/lib/valentine_web/live/workspace_live/components/presence_indicator_component.ex
@@ -2,15 +2,18 @@ defmodule ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent do
   use Phoenix.Component
   use PrimerLive
 
+  attr :active_module, :any, default: nil
+  attr :current_user, :string, default: ""
   attr :presence, :map, default: %{}
+  attr :workspace_id, :any, default: nil
 
   def render(assigns) do
     ~H"""
     <div class="presence-list">
       <ul>
-        <%= for {{key, _presence}, index} <- @presence |> Enum.with_index() do %>
-          <li title={key}>
-            <.counter style={"color: #{get_colour(index)}; background-color: #{get_colour(index)}"}>
+        <%= for {{key, %{metas: metas}}, index} <- @presence |> Enum.with_index() do %>
+          <li :if={is_active(hd(metas), @active_module, @workspace_id)} title={get_name(key, index)}>
+            <.counter style={"color: #{get_colour(index)}; background-color: #{get_colour(index)}; #{get_border(key, @current_user)}"}>
               {index}
             </.counter>
           </li>
@@ -20,7 +23,28 @@ defmodule ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent do
     """
   end
 
+  defp is_active(_, nil, nil), do: true
+
+  defp is_active(%{workspace_id: workspace_id}, nil, workspace),
+    do: workspace_id == workspace
+
+  defp is_active(%{module: module, workspace_id: workspace_id}, active_module, workspace)
+       when is_list(active_module),
+       do: module in active_module && workspace_id == workspace
+
+  defp is_active(%{module: module, workspace_id: workspace_id}, active_module, workspace),
+    do: module == active_module && workspace_id == workspace
+
+  defp get_border(key, user_id) do
+    if key == user_id do
+      "border: 2px solid #fff;"
+    else
+      ""
+    end
+  end
+
   defp get_colour(index) when index > 8, do: get_colour(index - 9)
+
   defp get_colour(index) do
     [
       "#2cbe4e",
@@ -35,4 +59,22 @@ defmodule ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent do
     ]
     |> Enum.at(index)
   end
+
+  defp get_name("||" <> _key, index) do
+    [
+      "Anonymous Vancouverite",
+      "Anonymous Ottawan",
+      "Anonymous Haligonian",
+      "Anonymous Yellowknifer",
+      "Anonymous Calgarian",
+      "Anonymous Winnipegger",
+      "Anonymous Edmontonian",
+      "Anonymous Yukoner",
+      "Anonymous Montrealer",
+      "Anonymous Banffite"
+    ]
+    |> Enum.at(index)
+  end
+
+  defp get_name(key, _index), do: key
 end
diff --git a/valentine/lib/valentine_web/live/workspace_live/components/workspace_component.ex b/valentine/lib/valentine_web/live/workspace_live/components/workspace_component.ex
@@ -30,6 +30,14 @@ defmodule ValentineWeb.WorkspaceLive.Components.WorkspaceComponent do
             <.octicon name="trash-16" />
           </.button>
         </div>
+        <div class="float-right mt-1">
+          <ValentineWeb.WorkspaceLive.Components.PresenceIndicatorComponent.render
+            current_user={@current_user}
+            presence={@presence}
+            active_module={nil}
+            workspace_id={@workspace.id}
+          />
+        </div>
       </div>
     </div>
     """
diff --git a/valentine/lib/valentine_web/live/workspace_live/index.html.heex b/valentine/lib/valentine_web/live/workspace_live/index.html.heex
@@ -45,6 +45,8 @@
     <.live_component
       module={ValentineWeb.WorkspaceLive.Components.WorkspaceComponent}
       id={"workspace-#{workspace.id}"}
+      current_user={@current_user}
+      presence={@presence}
       workspace={workspace}
     />
   </:row>
diff --git a/valentine/lib/valentine_web/presence.ex b/valentine/lib/valentine_web/presence.ex
@@ -4,7 +4,6 @@ defmodule ValentineWeb.Presence do
     pubsub_server: Valentine.PubSub
 
   def init(_opts) do
-    # user-land state
     {:ok, %{}}
   end
 
@@ -15,6 +14,7 @@ defmodule ValentineWeb.Presence do
       |> Map.drop(Map.keys(leaves))
 
     Valentine.Cache.put("valentine:presence", presence)
+    Phoenix.PubSub.broadcast(Valentine.PubSub, "valentine:presence", %{event: "change"})
     {:ok, state}
   end
 end
diff --git a/valentine/test/valentine_web/live/components/presence_indicator_component_test.exs b/valentine/test/valentine_web/live/components/presence_indicator_component_test.exs
diff --git a/valentine/test/valentine_web/live/components/workspace_component_test.exs b/valentine/test/valentine_web/live/components/workspace_component_test.exs
