Data Table Bot Accounts: Remove PAT panel on destroy (#860)

* some cleanup, fix some tests

* fix translations

* refactor PAT tables into component

* finish refactoring translations

* rework logic to handle closing PAT panel upon destroy bot or revoke PAT

* cleanup, add tests

* cleanup translations

* remove whitespace for some styling classes

* cleanup tests

* further cleanup tests

* fix selector

* attempt to fix flakes

* run normalize

* remove commented out code

* cleanup tests, add unauthorized test cases

* change new_destroy and new_revoke to destroy_confirmation and revoke_confirmation

* run normalize

app/components/bots/table_component.html.erb

@@ -52,9 +52,7 @@
           t("bots.index.table.actions.destroy"),
           destroy_path(row),
           data: {
-            turbo_method: :delete,
-            turbo_confirm: t("bots.index.table.actions.destroy_confirmation"),
-            turbo_frame: "_top",
+            "turbo-stream": true,
           },
           aria: {
             label: t("bots.index.table.actions.destroy_aria_label"),

app/components/bots/table_component.rb

@@ -45,9 +45,9 @@ def new_token_path(bot)
 
     def destroy_path(bot)
       if @namespace.is_a?(Group)
-        group_bot_path(id: bot.id)
+        group_bot_destroy_confirmation_path(bot_id: bot.id)
       elsif @namespace.is_a?(Namespaces::ProjectNamespace)
-        namespace_project_bot_path(id: bot.id)
+        namespace_project_bot_destroy_confirmation_path(bot_id: bot.id)
       end
     end
   end

app/components/personal_access_tokens/table_component.html.erb

@@ -29,10 +29,7 @@
       <%= link_to(
         t("personal_access_tokens.table.revoke"),
         revoke_path(row),
-        data: {
-          turbo_method: :delete,
-          turbo_confirm: t("personal_access_tokens.table.revoke_confirmation"),
-        },
+        data: revoke_data_attributes,
         class:
           "font-medium text-blue-600 underline dark:text-blue-500 hover:no-underline cursor-pointer",
       ) %>

app/components/personal_access_tokens/table_component.rb

@@ -25,18 +25,29 @@ def initialize(
 
     def revoke_path(token)
       if @namespace.is_a?(Group)
-        revoke_group_bot_personal_access_token_path(
+        revoke_confirmation_group_bot_personal_access_token_path(
           bot_id: @bot_account.id,
           id: token.id
         )
       elsif @namespace.is_a?(Namespaces::ProjectNamespace)
-        revoke_namespace_project_bot_personal_access_token_path(
+        revoke_confirmation_namespace_project_bot_personal_access_token_path(
           bot_id: @bot_account.id,
           id: token.id
         )
       else
         revoke_profile_personal_access_token_path(id: token.id)
       end
     end
+
+    def revoke_data_attributes
+      if @namespace
+        { 'turbo-stream': true }
+      else
+        {
+          turbo_method: :delete,
+          turbo_confirm: t('personal_access_tokens.table.revoke_confirmation')
+        }
+      end
+    end
   end
 end

app/controllers/concerns/bot_actions.rb

@@ -7,7 +7,7 @@ module BotActions
   included do
     before_action proc { namespace }
     before_action proc { access_levels }
-    before_action proc { bot_account }, only: %i[destroy]
+    before_action proc { bot_account }, only: %i[destroy destroy_confirmation]
     before_action proc { bot_type }, only: %i[create]
     before_action proc { bot_accounts }
   end
@@ -53,6 +53,16 @@ def create # rubocop:disable Metrics/MethodLength
     end
   end
 
+  def destroy_confirmation
+    authorize! @namespace, to: :destroy_bot_accounts?
+    render turbo_stream: turbo_stream.update('bot_modal',
+                                             partial: 'destroy_confirmation_modal',
+                                             locals: {
+                                               open: true,
+                                               bot_account: @bot_account
+                                             }), status: :ok
+  end
+
   def destroy
     Bots::DestroyService.new(@bot_account, current_user).execute
     respond_to do |format|
@@ -74,7 +84,8 @@ def destroy
   private
 
   def bot_account
-    @bot_account = @namespace.namespace_bots.find_by(id: params[:id]) || not_found
+    id = params[:bot_id] || params[:id]
+    @bot_account = @namespace.namespace_bots.find_by(id:) || not_found
   end
 
   def access_levels

app/controllers/concerns/bot_personal_access_token_actions.rb

@@ -8,7 +8,7 @@ module BotPersonalAccessTokenActions
     before_action proc { namespace }
     before_action proc { bot_account }
     before_action proc { personal_access_tokens }, only: %i[index revoke]
-    before_action proc { personal_access_token }, only: %i[revoke]
+    before_action proc { personal_access_token }, only: %i[revoke revoke_confirmation]
     before_action proc { bot_accounts }
   end
 
@@ -54,9 +54,18 @@ def create # rubocop:disable Metrics/MethodLength
     end
   end
 
-  def revoke
+  def revoke_confirmation
     authorize! @namespace, to: :revoke_bot_personal_access_token?
+    render turbo_stream: turbo_stream.update('token_dialog',
+                                             partial: 'revoke_confirmation_modal',
+                                             locals: {
+                                               open: true,
+                                               personal_access_token: @personal_access_token,
+                                               bot_account: @bot_account
+                                             }), status: :ok
+  end
 
+  def revoke
     respond_to do |format|
       format.turbo_stream do
         if @personal_access_token.revoke!

app/javascript/controllers/token_controller.js

@@ -26,7 +26,7 @@ export default class extends Controller {
       this.viewTarget.classList.add("hidden");
       this.inputTarget.value = Array.prototype.join.call(
         { length: this.itemValue.length },
-        "*"
+        "*",
       );
     } else {
       this.hideTarget.classList.add("hidden");
@@ -35,4 +35,11 @@ export default class extends Controller {
     }
     this.visible = !this.visible;
   }
+
+  removeTokenPanel() {
+    let panel = document.getElementById("access-token-section");
+    if (panel) {
+      panel.remove();
+    }
+  }
 }

app/views/groups/bots/_destroy_confirmation_modal.html.erb

@@ -0,0 +1,31 @@
+<%= viral_dialog(open: open) do |dialog| %>
+  <%= dialog.with_header(title: t("bots.destroy_confirmation.title")) %>
+  <%= dialog.with_section do %>
+
+    <%= turbo_frame_tag("deletion-alert") %>
+
+    <div
+      class="
+        mb-4 font-normal text-slate-500 dark:text-slate-400 overflow-x-visible
+      "
+    >
+      <p class="mb-4">
+        <%= t("bots.destroy_confirmation.description", bot_name: bot_account.user.email) %>
+      </p>
+      <%= form_for(:deletion, url: group_bot_path(id: bot_account.id), method: :delete,
+            data: {
+              turbo_frame: "_top",
+              controller: "token",
+              action:"turbo:submit-end->viral--dialog#close"
+            }
+          ) do |form| %>
+        <%= form.submit t("bots.destroy_confirmation.submit_button"),
+                    class:
+                      "button text-sm px-5 py-2.5 text-white bg-red-700 border-red-800 focus:outline-none hover:bg-red-800 focus:ring-red-300 dark:focus:ring-red-700 dark:bg-red-600 dark:text-white dark:border-red-600 dark:hover:bg-red-700",
+                    data: {
+                      action: "click->token#removeTokenPanel",
+                    } %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

app/views/groups/bots/index.html.erb

@@ -1,4 +1,5 @@
 <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
+<%= turbo_frame_tag "token_dialog" %>
 <%= render Viral::PageHeaderComponent.new(title: t('.title'), subtitle: t('.subtitle')) do |component| %>
   <%= component.with_icon(name: "users", classes: "h-14 w-14 text-primary-700") %>
   <%= component.with_buttons do %>

app/views/groups/bots/personal_access_tokens/_revoke_confirmation_modal.html.erb

@@ -0,0 +1,38 @@
+<%= viral_dialog(open: open) do |dialog| %>
+  <%= dialog.with_header(title: t("personal_access_tokens.revoke_confirmation.title")) %>
+  <%= dialog.with_section do %>
+
+    <%= turbo_frame_tag("deletion-alert") %>
+
+    <div
+      class="
+        mb-4 font-normal text-slate-500 dark:text-slate-400 overflow-x-visible
+      "
+    >
+      <p class="mb-4">
+        <%= t(
+          "personal_access_tokens.revoke_confirmation.description",
+          token_name: personal_access_token.name,
+          bot_name: bot_account.user.email,
+        ) %>
+      </p>
+      <%= form_for(:deletion, url: revoke_group_bot_personal_access_token_path(
+          bot_id: @bot_account.id,
+          id: personal_access_token.id
+        ), method: :delete,
+            data: {
+              turbo_frame: "_top",
+              controller: "token",
+              action:"turbo:submit-end->viral--dialog#close"
+            }
+          ) do |form| %>
+        <%= form.submit t("personal_access_tokens.revoke_confirmation.submit_button"),
+                    class:
+                      "button text-sm px-5 py-2.5 text-white bg-red-700 border-red-800 focus:outline-none hover:bg-red-800 focus:ring-red-300 dark:focus:ring-red-700 dark:bg-red-600 dark:text-white dark:border-red-600 dark:hover:bg-red-700",
+                    data: {
+                      action: "click->token#removeTokenPanel",
+                    } %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

app/views/projects/bots/_destroy_confirmation_modal.html.erb

@@ -0,0 +1,31 @@
+<%= viral_dialog(open: open) do |dialog| %>
+  <%= dialog.with_header(title: t("bots.destroy_confirmation.title")) %>
+  <%= dialog.with_section do %>
+
+    <%= turbo_frame_tag("deletion-alert") %>
+
+    <div
+      class="
+        mb-4 font-normal text-slate-500 dark:text-slate-400 overflow-x-visible
+      "
+    >
+      <p class="mb-4">
+        <%= t("bots.destroy_confirmation.description", bot_name: bot_account.user.email) %>
+      </p>
+      <%= form_for(:deletion, url: namespace_project_bot_path(id: bot_account.id), method: :delete,
+            data: {
+              turbo_frame: "_top",
+              controller: "token",
+              action:"turbo:submit-end->viral--dialog#close"
+            }
+          ) do |form| %>
+        <%= form.submit t("bots.destroy_confirmation.submit_button"),
+                    class:
+                      "button text-sm px-5 py-2.5 text-white bg-red-700 border-red-800 focus:outline-none hover:bg-red-800 focus:ring-red-300 dark:focus:ring-red-700 dark:bg-red-600 dark:text-white dark:border-red-600 dark:hover:bg-red-700",
+                    data: {
+                      action: "click->token#removeTokenPanel",
+                    } %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

app/views/projects/bots/index.html.erb

@@ -1,4 +1,5 @@
 <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
+<%= turbo_frame_tag "token_dialog" %>
 <%= render Viral::PageHeaderComponent.new(title: t('.title'), subtitle: t('.subtitle')) do |component| %>
   <%= component.with_icon(name: "users", classes: "h-14 w-14 text-primary-700") %>
   <% if allowed_to?(:create_bot_accounts?, @namespace) %>

app/views/projects/bots/personal_access_tokens/_revoke_confirmation_modal.html.erb

@@ -0,0 +1,38 @@
+<%= viral_dialog(open: open) do |dialog| %>
+  <%= dialog.with_header(title: t("personal_access_tokens.revoke_confirmation.title")) %>
+  <%= dialog.with_section do %>
+
+    <%= turbo_frame_tag("deletion-alert") %>
+
+    <div
+      class="
+        mb-4 font-normal text-slate-500 dark:text-slate-400 overflow-x-visible
+      "
+    >
+      <p class="mb-4">
+        <%= t(
+          "personal_access_tokens.revoke_confirmation.description",
+          token_name: personal_access_token.name,
+          bot_name: bot_account.user.email,
+        ) %>
+      </p>
+      <%= form_for(:deletion, url: revoke_namespace_project_bot_personal_access_token_path(
+          bot_id: bot_account.id,
+          id: personal_access_token.id
+        ), method: :delete,
+            data: {
+              turbo_frame: "_top",
+              controller: "token",
+              action:"turbo:submit-end->viral--dialog#close"
+            }
+          ) do |form| %>
+        <%= form.submit t("personal_access_tokens.revoke_confirmation.submit_button"),
+                    class:
+                      "button text-sm px-5 py-2.5 text-white bg-red-700 border-red-800 focus:outline-none hover:bg-red-800 focus:ring-red-300 dark:focus:ring-red-700 dark:bg-red-600 dark:text-white dark:border-red-600 dark:hover:bg-red-700",
+                    data: {
+                      action: "click->token#removeTokenPanel",
+                    } %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

config/locales/en.yml

@@ -312,6 +312,10 @@ en:
       label: Scopes
       read_api: Grants read access to the API.
   bots:
+    destroy_confirmation:
+      description: This action will permanently delete the bot account and will remove any existing memberships for the bot account. Are you sure you want to permanently delete bot account %{bot_name}?
+      submit_button: Confirm
+      title: Delete Bot
     index:
       pagy_item: Bot Accounts
       table:
@@ -325,7 +329,6 @@ en:
         actions:
           destroy: Delete
           destroy_aria_label: Delete bot account
-          destroy_confirmation: This action will permanently delete the bot account and will remove any existing memberships for the bot account. Are you sure you want to permanently delete this bot account?
           generate_new_token: Generate new token
           generate_new_token_aria_label: Generate a new personal access token for bot account
         empty_state:
@@ -944,6 +947,10 @@ en:
       helper: A custom name will make it easier to search for this in the future.
       label: Name (Optional)
   personal_access_tokens:
+    revoke_confirmation:
+      description: Are you sure you'd like to remove access token '%{token_name}' from bot %{bot_name}?
+      submit_button: Confirm
+      title: Revoke personal access token
     table:
       header:
         action: Action

config/locales/fr.yml

@@ -312,6 +312,10 @@ fr:
       label: Scopes
       read_api: Grants read access to the API.
   bots:
+    destroy_confirmation:
+      description: This action will permanently delete the bot account and will remove any existing memberships for the bot account. Are you sure you want to permanently delete bot account %{bot_name}?
+      submit_button: Confirm
+      title: Delete Bot
     index:
       pagy_item: Bot Accounts
       table:
@@ -325,7 +329,6 @@ fr:
         actions:
           destroy: Delete
           destroy_aria_label: Delete bot account
-          destroy_confirmation: This action will permanently delete the bot account and will remove any existing memberships for the bot account. Are you sure you want to permanently delete this bot account?
           generate_new_token: Generate new token
           generate_new_token_aria_label: Generate a new personal access token for bot account
         empty_state:
@@ -944,6 +947,10 @@ fr:
       helper: A custom name will make it easier to search for this in the future.
       label: Name (Optional)
   personal_access_tokens:
+    revoke_confirmation:
+      description: Are you sure you'd like to remove access token '%{token_name}' from bot %{bot_name}?
+      submit_button: Confirm
+      title: Revoke personal access token
     table:
       header:
         action: Action

config/routes/group.rb

@@ -18,8 +18,10 @@
     resources :members, only: %i[create destroy index new update]
 
     resources :bots, only: %i[create destroy index new] do
+      get :destroy_confirmation
       resources :personal_access_tokens, module: :bots, only: %i[index new create] do
         member do
+          get :revoke_confirmation
           delete :revoke
         end
       end

config/routes/project.rb

@@ -23,9 +23,11 @@
       end
 
       resources :bots, only: %i[create destroy index new] do
+        get :destroy_confirmation
         resources :personal_access_tokens, module: :bots, only: %i[index new create] do
           member do
             delete :revoke
+            get :revoke_confirmation
           end
         end
       end