From d015e1536cf2af78fec6873b491eeaad81419431 Mon Sep 17 00:00:00 2001
From: Sebastian Serth <Sebastian.Serth@hpi.de>
Date: Tue, 14 Mar 2023 19:19:06 +0100
Subject: [PATCH] Refactor tooltip for run button

Even though not reproducible locally, we had some errors captured through Sentry where the Tooltip was opened on the (already hidden) run button. This resulted in an error by the Bootstrap library. Most likely, the issue was caused by some race condition.

Fixes CODEOCEAN-BA
---
 app/assets/javascripts/editor/editor.js.erb | 5 +++--
 app/views/exercises/_editor.html.slim       | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/editor/editor.js.erb b/app/assets/javascripts/editor/editor.js.erb
index 2605243f..5fe1c174 100644
--- a/app/assets/javascripts/editor/editor.js.erb
+++ b/app/assets/javascripts/editor/editor.js.erb
@@ -643,7 +643,8 @@ var CodeOceanEditor = {
         $('#start-over-active-file').prop('disabled', this.active_frame.data('role') === 'user_defined_file' || this.active_frame.data('read-only') !== undefined);
         $('#dummy').toggle(!this.fileActionsAvailable());
         $('#render').toggle(this.isActiveFileRenderable());
-        $('#run').tooltip('hide').toggle(this.isActiveFileRunnable() && !this.running);
+        $('#run-stop-button-group').tooltip('hide');
+        $('#run').toggle(this.isActiveFileRunnable() && !this.running);
         $('#stop').toggle(this.isActiveFileStoppable());
         $('#test').toggle(this.isActiveFileTestable());
     },
@@ -718,7 +719,7 @@ var CodeOceanEditor = {
     },
 
     showSpinner: function (initiator) {
-        $(initiator).tooltip('hide');
+        $(initiator).closest('[data-bs-toggle="tooltip"]').tooltip('hide');
         $(initiator).find('i.fa-solid, i.fa-regular').hide();
         $(initiator).find('i.fa-spin').addClass('d-inline-block').removeClass('d-none');
     },
diff --git a/app/views/exercises/_editor.html.slim b/app/views/exercises/_editor.html.slim
index 39e46c0e..7d1a32ba 100644
--- a/app/views/exercises/_editor.html.slim
+++ b/app/views/exercises/_editor.html.slim
@@ -21,8 +21,9 @@
     #editor-buttons.btn-group.enforce-bottom-margin
       = render('editor_button', disabled: true, icon: 'fa-solid fa-ban', id: 'dummy', label: t('exercises.editor.dummy'))
       = render('editor_button', icon: 'fa-solid fa-desktop', id: 'render', label: t('exercises.editor.render')) unless @embed_options[:hide_run_button]
-      = render('editor_button', data: {:'data-message-failure' => t('exercises.editor.run_failure'), :'data-message-network' => t('exercises.editor.network'), :'data-message-success' => t('exercises.editor.run_success'), :'data-bs-placement' => 'top', :'data-bs-toggle' => 'tooltip', :'data-bs-container' => 'body'}, icon: 'fa-solid fa-play', id: 'run', label: t('exercises.editor.run'), title: t('shared.tooltips.shortcut', shortcut: 'ALT + r')) unless @embed_options[:disable_run]
-      = render('editor_button', icon: 'fa-solid fa-stop', id: 'stop', label: t('exercises.editor.stop')) unless @embed_options[:disable_run]
+      span.flex-grow-1#run-stop-button-group data-bs-placement='top' data-bs-toggle='tooltip' data-bs-container='body' title=t('shared.tooltips.shortcut', shortcut: 'ALT + r')
+        = render('editor_button', data: {:'data-message-failure' => t('exercises.editor.run_failure'), :'data-message-network' => t('exercises.editor.network'), :'data-message-success' => t('exercises.editor.run_success'),}, icon: 'fa-solid fa-play', id: 'run', label: t('exercises.editor.run'), classes: 'w-100 btn-primary') unless @embed_options[:disable_run]
+        = render('editor_button', icon: 'fa-solid fa-stop', id: 'stop', label: t('exercises.editor.stop'),  classes: 'w-100 btn-primary') unless @embed_options[:disable_run]
       = render('editor_button', data: {:'data-bs-placement' => 'top', :'data-bs-toggle' => 'tooltip', :'data-bs-container' => 'body'}, icon: 'fa-solid fa-rocket', id: 'test', label: t('exercises.editor.test'), title: t('shared.tooltips.shortcut', shortcut: 'ALT + t')) unless @embed_options[:disable_run]
       = render('editor_button', data: {:'data-bs-placement' => 'top', :'data-bs-toggle' => 'tooltip', :'data-bs-container' => 'body'}, icon: 'fa-solid fa-trophy', id: 'assess', label: t('exercises.editor.score'), title: t('shared.tooltips.shortcut', shortcut: 'ALT + s')) unless @embed_options[:disable_score]
       - unless hide_rfc_button