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 |
---|---|
![]() |
![]() |
How to set up and validate locally
- check out this branch locally in the gdk
- in the terminal, run the following in the
gitlab
directory. It will slightly edit thediff_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
- In the browser, navigate to the Changes tab on any MR in your local GDK
- 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 withFork
andCancel
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.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Chad Lavimoniere