Change root cause analysis button position

What does this MR do and why?

Change root cause analysis button position

Use a sticky positioning for the AI troubleshoot button in jobs.

This change in positioning strategy helps the compatibility of the job details layout with a panel layout.

Why now?

Using a fixed positioning causes misalignment issues when Project Studio is enabled. I propose a "boring solution" that works as an alternative (and it looks good).

Changelog: changed

References

Screenshots or screen recordings

Before After
image image

How to set up and validate locally

  1. Setting AI troubleshooting can be a bit difficult. Instead, we can change the code to force the bottom to appear:
diff --git a/app/assets/javascripts/ci/job_details/job_app.vue b/app/assets/javascripts/ci/job_details/job_app.vue
index a8daf27babfb..811aafb60ab8 100644
--- a/app/assets/javascripts/ci/job_details/job_app.vue
+++ b/app/assets/javascripts/ci/job_details/job_app.vue
@@ -328,7 +328,7 @@ export default {
           <log :search-results="searchResults" />
 
           <nav
-            v-if="displayStickyFooter"
+            v-if="true || displayStickyFooter"
             :class="[
               'rca-bar-component gl-fixed gl-px-5 gl-py-2',
               { 'rca-bar-component-fullscreen': fullScreenEnabled },
diff --git a/ee/app/assets/javascripts/ci/job_details/components/root_cause_analysis_button.vue b/ee/app/assets/javascripts/ci/job_details/components/root_cause_analysis_button.vue
index 865dae9a29ec..96fbaadc1347 100644
--- a/ee/app/assets/javascripts/ci/job_details/components/root_cause_analysis_button.vue
+++ b/ee/app/assets/javascripts/ci/job_details/components/root_cause_analysis_button.vue
@@ -67,7 +67,7 @@ export default {
 </script>
 <template>
   <gl-button
-    v-if="shouldDisplayButton"
+    v-if="true || shouldDisplayButton"
     icon="duo-chat"
     variant="confirm"
     data-testid="rca-duo-button"
  1. Visit a job page, and check the troubleshooting button's position.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #566240

Edited by Miguel Rincon

Merge request reports

Loading