Remove .wiki and @md-typography mixin in favor of .md and .md-file

Before, the styling for `img:not(.emoji)`` was repeated between
`.md:not(.use-csslab):not(.wiki)` (for comments and the Markdown
preview), `.documentation.wiki` (for help pages), and
`.issuable-details .description .wiki` (for MR and issue descriptions).

In these places, we now simply use `.md`. Wherever we use `.md` but
don't want this image styling (like wikis and blobs), `.md-file` is
added.

app/assets/javascripts/behaviors/markdown/copy_as_gfm.js

@@ -10,7 +10,7 @@ export class CopyAsGFM {
     const isIOS = /\b(iPad|iPhone|iPod)(?=;)/.test(userAgent);
     if (isIOS) return;
 
-    $(document).on('copy', '.md, .wiki', e => {
+    $(document).on('copy', '.md', e => {
       CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection);
     });
     $(document).on('copy', 'pre.code.highlight, .diff-content .line_content', e => {
@@ -99,7 +99,7 @@ export class CopyAsGFM {
   }
 
   static transformGFMSelection(documentFragment) {
-    const gfmElements = documentFragment.querySelectorAll('.md, .wiki');
+    const gfmElements = documentFragment.querySelectorAll('.md');
     switch (gfmElements.length) {
       case 0: {
         return documentFragment;

app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js

@@ -37,7 +37,7 @@ export default class ShortcutsIssuable extends Shortcuts {
     }
 
     // Sanity check: Make sure the selected text comes from a discussion : it can either contain a message...
-    let foundMessage = !!documentFragment.querySelector('.md, .wiki');
+    let foundMessage = !!documentFragment.querySelector('.md');
 
     // ... Or come from a message
     if (!foundMessage) {
@@ -46,7 +46,7 @@ export default class ShortcutsIssuable extends Shortcuts {
           let node = e;
           do {
             // Text nodes don't define the `matches` method
-            if (node.matches && node.matches('.md, .wiki')) {
+            if (node.matches && node.matches('.md')) {
               foundMessage = true;
             }
             node = node.parentNode;

app/assets/javascripts/issue_show/components/description.vue

@@ -140,7 +140,7 @@ export default {
         'issue-realtime-pre-pulse': preAnimation,
         'issue-realtime-trigger-pulse': pulseAnimation,
       }"
-      class="wiki"
+      class="md"
       v-html="descriptionHtml"
     ></div>
     <textarea

app/assets/stylesheets/framework/files.scss

@@ -123,7 +123,7 @@
       }
     }
 
-    &.wiki {
+    &.md {
       padding: $gl-padding;
 
       @include media-breakpoint-up(md) {

app/assets/stylesheets/framework/typography.scss

-@mixin md-typography {
+/**
+ * Apply Markdown typography
+ *
+ */
+.md:not(.use-csslab) {
   color: $gl-text-color;
   word-wrap: break-word;
 
@@ -28,6 +32,14 @@
     max-width: 100%;
   }
 
+  &:not(.md-file) img:not(.emoji) {
+    border: 1px solid $white-normal;
+    padding: 5px;
+    margin: 5px 0;
+    // Ensure that image does not exceed viewport
+    max-height: calc(100vh - 100px);
+  }
+
   p a:not(.no-attachment-icon) img {
     // Remove bottom padding because
     // <p> already has $gl-padding bottom
@@ -367,28 +379,6 @@ code {
   @extend .ref-name;
 }
 
-/**
- * Apply Markdown typography
- *
- */
-.wiki:not(.use-csslab) {
-  @include md-typography;
-}
-
-.md:not(.use-csslab) {
-  @include md-typography;
-
-  &:not(.wiki) {
-    img:not(.emoji) {
-      border: 1px solid $white-normal;
-      padding: 5px;
-      margin: 5px 0;
-      // Ensure that image does not exceed viewport
-      max-height: calc(100vh - 100px);
-    }
-  }
-}
-
 /**
  * Textareas intended for GFM
  *

app/assets/stylesheets/pages/help.scss

@@ -37,12 +37,4 @@
 
 .documentation {
   padding: 7px;
-
-  // Border around images in the help pages.
-  img:not(.emoji) {
-    border: 1px solid $white-normal;
-    padding: 5px;
-    margin: 5px;
-    max-height: calc(100vh - 100px);
-  }
 }

app/assets/stylesheets/pages/issuable.scss

@@ -72,14 +72,6 @@
     height: $gl-padding * 2;
   }
 
-  // Border around images in issue and MR descriptions.
-  .description img:not(.emoji) {
-    border: 1px solid $white-normal;
-    padding: 5px;
-    max-height: calc(100vh - 100px);
-    max-width: 100%;
-  }
-
   .emoji-block {
     padding: 10px 0;
   }

app/assets/stylesheets/pages/wiki.scss

@@ -179,9 +179,3 @@ ul.wiki-pages-list.content-list {
     }
   }
 }
-
-.wiki:not(.use-csslab) {
-  table {
-    @include markdown-table;
-  }
-}

app/assets/stylesheets/print.scss

-.wiki h1,
-.wiki h2,
-.wiki h3,
-.wiki h4,
-.wiki h5,
-.wiki h6 {
+.md h1,
+.md h2,
+.md h3,
+.md h4,
+.md h5,
+.md h6 {
   margin-top: 17px;
 }
 
-.wiki h1 {
+.md h1 {
   font-size: 30px;
 }
 
-.wiki h2 {
+.md h2 {
   font-size: 22px;
 }
 
-.wiki h3 {
+.md h3 {
   font-size: 18px;
   font-weight: 600;
 }

app/views/help/index.html.haml

@@ -29,7 +29,7 @@
 
 .row.prepend-top-default
   .col-md-8
-    .documentation-index.wiki
+    .documentation-index.md
       = markdown(@help_index)
   .col-md-4
     .card

app/views/help/instance_configuration.html.haml

 - page_title 'Instance Configuration'
-.wiki.documentation
+.documentation.md
   %h1 Instance Configuration
 
   %p

app/views/help/show.html.haml

 - page_title @path.split("/").reverse.map(&:humanize)
-.documentation.wiki.prepend-top-default
+.documentation.md.prepend-top-default
   = markdown @markdown

app/views/help/ui.html.haml

@@ -513,7 +513,7 @@
 
   %h2#markdown Markdown
   %h4
-    %code .md or .wiki and others
+    %code .md
 
   Markdown rendering has a bit different css and presented in next UI elements:
 

app/views/projects/_wiki.html.haml

 - if @wiki_home.present?
   %div{ class: container_class }
-    .prepend-top-default.append-bottom-default
-      .wiki
-        = render_wiki_content(@wiki_home)
+    .md.md-file.prepend-top-default.append-bottom-default
+      = render_wiki_content(@wiki_home)
 - else
   - can_create_wiki = can?(current_user, :create_wiki, @project)
   .landing{ class: [('row-content-block row p-0 align-items-center' if can_create_wiki), ('content-block' unless can_create_wiki)] }

app/views/projects/blob/preview.html.haml

 .diff-file.file-holder
   .diff-content
     - if markup?(@blob.name)
-      .file-content.wiki.md{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
+      .file-content.md.md-file{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
         = markup(@blob.name, @content)
     - else
       .file-content.code.js-syntax-highlight

app/views/projects/blob/viewers/_markup.html.haml

 - blob = viewer.blob
 - context = blob.respond_to?(:rendered_markup) ? { rendered: blob.rendered_markup } : {}
-.file-content.wiki.md{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
+.file-content.md.md-file{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
   = markup(blob.name, blob.data, context)

app/views/projects/issues/show.html.haml

@@ -72,7 +72,7 @@
       %h2.title= markdown_field(@issue, :title)
       - if @issue.description.present?
         .description{ class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : '' }
-          .wiki= markdown_field(@issue, :description)
+          .md= markdown_field(@issue, :description)
           %textarea.hidden.js-task-list-field= @issue.description
 
       = edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue-edited-ago js-issue-edited-ago')

app/views/projects/merge_requests/_mr_box.html.haml

@@ -5,7 +5,7 @@
   %div
     - if @merge_request.description.present?
       .description{ class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : '' }
-        .wiki
+        .md
           = markdown_field(@merge_request, :description)
         %textarea.hidden.js-task-list-field
           = @merge_request.description

app/views/projects/milestones/show.html.haml

@@ -54,9 +54,8 @@
 
     %div
       - if @milestone.description.present?
-        .description
-          .wiki
-            = markdown_field(@milestone, :description)
+        .description.md
+          = markdown_field(@milestone, :description)
 
   = render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
 

app/views/projects/tags/_tag.html.haml

@@ -20,9 +20,8 @@
       %p
         = s_("TagsPage|Can't find HEAD commit for this tag")
     - if release && release.description.present?
-      .description.prepend-top-default
-        .wiki
-          = markdown_field(release, :description)
+      .description.md.prepend-top-default
+        = markdown_field(release, :description)
 
   .row-fixed-content.controls.flex-row
     = render 'projects/buttons/download', project: @project, ref: tag.name, pipeline: @tags_pipelines[tag.name]

app/views/projects/tags/show.html.haml

@@ -39,8 +39,7 @@
 
   .append-bottom-default.prepend-top-default
     - if @release.description.present?
-      .description
-        .wiki
-          = markdown_field(@release, :description)
+      .description.md
+        = markdown_field(@release, :description)
     - else
       = s_('TagsPage|This tag has no release notes.')

app/views/projects/wikis/show.html.haml

@@ -26,7 +26,7 @@
     = (s_("WikiHistoricalPage|You can view the %{most_recent_link} or browse the %{history_link}.") % { most_recent_link: most_recent_link, history_link: history_link }).html_safe
 
 .prepend-top-default.append-bottom-default
-  .wiki.md{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
+  .md.md-file{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
     = render_wiki_content(@page)
 
 = render 'sidebar'

app/views/search/results/_snippet_blob.html.haml

@@ -18,7 +18,7 @@
         %i.fa.fa-file
         %strong= snippet.file_name
     - if markup?(snippet.file_name)
-      .file-content.wiki
+      .file-content.md.md-file
         - snippet_chunks.each do |chunk|
           - unless chunk[:data].empty?
             = markup(snippet.file_name, chunk[:data])

app/views/shared/milestones/_top.html.haml

@@ -42,9 +42,8 @@
     = markdown_field(milestone, :title)
   - if milestone.group_milestone? && milestone.description.present?
     %div
-      .description
-        .wiki
-          = markdown_field(milestone, :description)
+      .description.md
+        = markdown_field(milestone, :description)
 
 - if milestone.complete?(current_user) && milestone.active?
   .alert.alert-success.prepend-top-default

app/views/shared/snippets/_header.html.haml

@@ -22,7 +22,7 @@
 
   - if @snippet.description.present?
     .description.qa-snippet-description
-      .wiki
+      .md
         = markdown_field(@snippet, :description)
       %textarea.hidden.js-task-list-field
         = @snippet.description

spec/features/merge_request/user_views_open_merge_request_spec.rb

@@ -13,7 +13,7 @@ describe 'User views an open merge request' do
     end
 
     it 'renders both the title and the description' do
-      node = find('.wiki h1 a#user-content-description-header')
+      node = find('.md h1 a#user-content-description-header')
       expect(node[:href]).to end_with('#description-header')
 
       # Work around a weird Capybara behavior where calling `parent` on a node

spec/features/projects/wiki/user_creates_wiki_page_spec.rb

@@ -136,7 +136,7 @@ describe "User creates wiki page" do
           click_button("Create page")
         end
 
-        page.within ".wiki" do
+        page.within ".md" do
           expect(page).to have_selector(".katex", count: 3).and have_content("2+2 is 4")
         end
       end

spec/features/task_lists_spec.rb

@@ -79,7 +79,7 @@ describe 'Task Lists' do
         visit_issue(project, issue)
         wait_for_requests
 
-        expect(page).to have_selector(".wiki .task-list .task-list-item .task-list-item-checkbox")
+        expect(page).to have_selector(".md .task-list .task-list-item .task-list-item-checkbox")
         expect(page).to have_selector('a.btn-close')
       end
 
@@ -87,14 +87,14 @@ describe 'Task Lists' do
         visit_issue(project, issue)
         wait_for_requests
 
-        expect(page).to have_selector(".wiki .task-list .task-list-item .task-list-item-checkbox")
+        expect(page).to have_selector(".md .task-list .task-list-item .task-list-item-checkbox")
 
         logout(:user)
         login_as(user2)
         visit current_path
         wait_for_requests
 
-        expect(page).to have_selector(".wiki .task-list .task-list-item .task-list-item-checkbox")
+        expect(page).to have_selector(".md .task-list .task-list-item .task-list-item-checkbox")
       end
 
       it 'provides a summary on Issues#index' do
@@ -231,7 +231,7 @@ describe 'Task Lists' do
         container = '.detail-page-description .description.js-task-list-container'
 
         expect(page).to have_selector(container)
-        expect(page).to have_selector("#{container} .wiki .task-list .task-list-item .task-list-item-checkbox")
+        expect(page).to have_selector("#{container} .md .task-list .task-list-item .task-list-item-checkbox")
         expect(page).to have_selector("#{container} .js-task-list-field")
         expect(page).to have_selector('form.js-issuable-update')
         expect(page).to have_selector('a.btn-close')

spec/javascripts/fixtures/static/merge_requests_show.html.raw

 <a class="btn-close"></a>
 <div class="detail-page-description">
 <div class="description js-task-list-container">
-<div class="wiki">
+<div class="md">
 <ul class="task-list">
 <li class="task-list-item">
 <input class="task-list-item-checkbox" type="checkbox">

spec/javascripts/issue_show/components/app_spec.js

@@ -75,7 +75,7 @@ describe('Issuable output', () => {
       .then(() => {
         expect(document.querySelector('title').innerText).toContain('this is a title (#1)');
         expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>this is a title</p>');
-        expect(vm.$el.querySelector('.wiki').innerHTML).toContain('<p>this is a description!</p>');
+        expect(vm.$el.querySelector('.md').innerHTML).toContain('<p>this is a description!</p>');
         expect(vm.$el.querySelector('.js-task-list-field').value).toContain(
           'this is a description',
         );
@@ -92,7 +92,7 @@ describe('Issuable output', () => {
       .then(() => {
         expect(document.querySelector('title').innerText).toContain('2 (#1)');
         expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>2</p>');
-        expect(vm.$el.querySelector('.wiki').innerHTML).toContain('<p>42</p>');
+        expect(vm.$el.querySelector('.md').innerHTML).toContain('<p>42</p>');
         expect(vm.$el.querySelector('.js-task-list-field').value).toContain('42');
         expect(vm.$el.querySelector('.edited-text')).toBeTruthy();
         expect(formatText(vm.$el.querySelector('.edited-text').innerText)).toMatch(

spec/javascripts/issue_show/components/description_spec.js

@@ -43,12 +43,12 @@ describe('Description component', () => {
 
     Vue.nextTick(() => {
       expect(
-        vm.$el.querySelector('.wiki').classList.contains('issue-realtime-pre-pulse'),
+        vm.$el.querySelector('.md').classList.contains('issue-realtime-pre-pulse'),
       ).toBeTruthy();
 
       setTimeout(() => {
         expect(
-          vm.$el.querySelector('.wiki').classList.contains('issue-realtime-trigger-pulse'),
+          vm.$el.querySelector('.md').classList.contains('issue-realtime-trigger-pulse'),
         ).toBeTruthy();
 
         done();

spec/support/matchers/issuable_matchers.rb

-RSpec::Matchers.define :have_header_with_correct_id_and_link do |level, text, id, parent = ".wiki"|
+RSpec::Matchers.define :have_header_with_correct_id_and_link do |level, text, id, parent = ".md"|
   match do |actual|
     node = find("#{parent} h#{level} a#user-content-#{id}")