Minor modifications to wiki "delete page" modal

- make button "secondary" style
- make button text "delete page"
- make modal smaller
- add cancel button to modal

app/assets/javascripts/pages/shared/wikis/components/delete_wiki_modal.vue

 <script>
 import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import { escape } from 'lodash';
-import { s__, sprintf } from '~/locale';
+import { s__, __, sprintf } from '~/locale';
 
 export default {
   components: {
@@ -29,12 +29,6 @@ export default {
     },
   },
   computed: {
-    modalId() {
-      return 'delete-wiki-modal';
-    },
-    message() {
-      return s__('WikiPageConfirmDelete|Are you sure you want to delete this page?');
-    },
     title() {
       return sprintf(
         s__('WikiPageConfirmDelete|Delete page %{pageTitle}?'),
@@ -44,6 +38,17 @@ export default {
         false,
       );
     },
+    primaryProps() {
+      return {
+        text: this.$options.i18n.deletePageText,
+        attributes: { variant: 'danger', 'data-qa-selector': 'confirm_deletion_button' },
+      };
+    },
+    cancelProps() {
+      return {
+        text: this.$options.i18n.cancelButtonText,
+      };
+    },
   },
   methods: {
     onSubmit() {
@@ -51,30 +56,36 @@ export default {
       this.$refs.form.submit();
     },
   },
+  i18n: {
+    deletePageText: s__('WikiPageConfirmDelete|Delete page'),
+    modalBody: s__('WikiPageConfirmDelete|Are you sure you want to delete this page?'),
+    cancelButtonText: __('Cancel'),
+  },
+  modal: {
+    modalId: 'delete-wiki-modal',
+  },
 };
 </script>
 
 <template>
   <div class="d-inline-block">
     <gl-button
-      v-gl-modal="modalId"
-      category="primary"
+      v-gl-modal="$options.modal.modalId"
+      category="secondary"
       variant="danger"
       data-qa-selector="delete_button"
     >
-      {{ __('Delete') }}
+      {{ $options.i18n.deletePageText }}
     </gl-button>
     <gl-modal
       :title="title"
-      :action-primary="{
-        text: s__('WikiPageConfirmDelete|Delete page'),
-        attributes: { variant: 'danger', 'data-qa-selector': 'confirm_deletion_button' },
-      }"
-      :modal-id="modalId"
-      title-tag="h4"
+      :action-primary="primaryProps"
+      :action-cancel="cancelProps"
+      :modal-id="$options.modal.modalId"
+      size="sm"
       @ok="onSubmit"
     >
-      {{ message }}
+      {{ $options.i18n.modalBody }}
       <form ref="form" :action="deleteWikiUrl" method="post" class="js-requires-input">
         <input ref="method" type="hidden" name="_method" value="delete" />
         <input :value="csrfToken" type="hidden" name="authenticity_token" />

changelogs/unreleased/wiki-delete.yml

+---
+title: Minor UI improvements to Wiki Delete Page button and modal
+merge_request: 45740
+author:
+type: changed

doc/user/project/wiki/index.md

@@ -96,12 +96,12 @@ Please note that:
 
 ## Editing a wiki page
 
-NOTE: **Note:**
-Requires Developer [permissions](../../permissions.md).
+You need Developer [permissions](../../permissions.md) or higher to edit a wiki page.
+To do so:
 
-To edit a page, simply click on the **Edit** button. From there on, you can
-change its content. When done, click **Save changes** for the changes to take
-effect.
+1. Click the edit icon (**{pencil}**).
+1. Edit the content.
+1. Click **Save changes**.
 
 ### Adding a table of contents
 
@@ -110,23 +110,34 @@ For an example, see [Table of contents](../../markdown.md#table-of-contents).
 
 ## Deleting a wiki page
 
-NOTE: **Note:**
-Requires Maintainer [permissions](../../permissions.md).
+You need Maintainer [permissions](../../permissions.md) or higher to delete a wiki page.
+To do so:
 
-You can find the **Delete** button only when editing a page. Click on it and
-confirm you want the page to be deleted.
+1. Open the page you want to delete.
+1. Click the **Delete page** button.
+1. Confirm the deletion.
 
 ## Moving a wiki page
 
-You can move a wiki page from one directory to another by specifying the full
-path in the wiki page title in the [edit](#editing-a-wiki-page) form.
+You need Developer [permissions](../../permissions.md) or higher to move a wiki page.
+To do so:
+
+1. Click the edit icon (**{pencil}**).
+1. Add the new path to the **Title** field.
+1. Click **Save changes**.
+
+For example, if you have a wiki page called `about` under `company` and you want to
+move it to the wiki's root:
 
-![Moving a page](img/wiki_move_page_1.png)
+1. Click the edit icon (**{pencil}**).
+1. Change the **Title** from `about` to `/about`.
+1. Click **Save changes**.
 
-![After moving a page](img/wiki_move_page_2.png)
+If you want to do the opposite:
 
-In order to move a wiki page to the root directory, the wiki page title must
-be preceded by the slash (`/`) character.
+1. Click the edit icon (**{pencil}**).
+1. Change the **Title** from `about` to `company/about`.
+1. Click **Save changes**.
 
 ## Viewing a list of all created wiki pages