Skip to content

Refactor button to gl-button

What does this MR do and why?

Refactoring the Cancel button used in diff fork message to use the gl-button component from Pajamas.

Screenshots or screen recordings

Note that this is only a refactor but there is a slight visual difference between the previous version and the gl-button component

Before After
Screenshot_2023-10-13_at_14.50.26 Screenshot_2023-10-13_at_14.51.35

How to set up and validate locally

  1. check out this branch locally in the gdk
  2. in the terminal, run the following in the gitlab directory. It will slightly edit the diff_file.vue file so that the element changed in this MR actually renders (it renders conditionally normally).
cat << 'EOF' | git apply
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 21146ed5b00..e0f1637200e 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -401,7 +401,7 @@ export default {
     />
 
     <div
-      v-if="idState.forkMessageVisible"
+      data-v-if="idState.forkMessageVisible"
       class="js-file-fork-suggestion-section file-fork-suggestion"
     >
       <span v-safe-html="forkMessage" class="file-fork-suggestion-note"></span>
@@ -420,7 +420,7 @@ export default {
         {{ $options.i18n.cancel }}
       </gl-button>
     </div>
-    <template v-else>
+    <!-- <template v-else>
       <div
         :id="`diff-content-${file.file_hash}`"
         :class="hasBodyClasses.contentByHash"
@@ -543,6 +543,6 @@ export default {
           />
         </template>
       </div>
-    </template>
+    </template> -->
   </div>
 </template>
EOF
  1. In the browser, navigate to the Changes tab on any MR in your local GDK
  2. You will see the You're not allowed to edit files in this project directly. Please fork this project, make your changes there, and submit a merge request. message with Fork and Cancel buttons.

The Cancel button is the focus of the changes in this MR.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Chad Lavimoniere

Merge request reports