Revert pluginAPI method addition

This reverts commit ecede62825.

Revert "WIP: Testing Issue"

This reverts commit 2a0bc9b1c7.

Revert "DEV: Add buttons to api array"

This reverts commit 46c95cf3fc.

Revert "DEV: Add a pluginAPI method for adding table wrapper buttons"

This reverts commit 7dae39d797.

app/assets/javascripts/discourse/app/initializers/post-decorations.js

@@ -141,7 +141,8 @@ export default {
           "open-popup-link",
           "btn-default",
           "btn",
-          "btn-icon-text"
+          "btn-icon-text",
+          "btn-expand-table"
         );
         const expandIcon = create(
           iconNode("discourse-expand", { class: "expand-table-icon" })
@@ -158,7 +159,7 @@ export default {
       }
 
       function generateModal(event) {
-        const table = event.target.nextElementSibling;
+        const table = event.target.parentElement.nextElementSibling;
         const tempTable = table.cloneNode(true);
 
         showModal("fullscreen-table").set("tableHtml", tempTable);
@@ -176,8 +177,12 @@ export default {
 
           const popupBtn = _createButton();
           table.parentNode.classList.add("fullscreen-table-wrapper");
-          table.parentNode.insertBefore(popupBtn, table);
+          // Create a button wrapper for case of multiple buttons (i.e. table builder extension)
+          const buttonWrapper = document.createElement("div");
+          buttonWrapper.classList.add("fullscreen-table-wrapper-buttons");
+          buttonWrapper.append(popupBtn);
           popupBtn.addEventListener("click", generateModal, false);
+          table.parentNode.insertBefore(buttonWrapper, table);
         });
       }
 

app/assets/javascripts/discourse/tests/acceptance/post-table-wrapper-test.js

@@ -0,0 +1,49 @@
+import { test } from "qunit";
+import { click, visit } from "@ember/test-helpers";
+import {
+  acceptance,
+  exists,
+  query,
+} from "discourse/tests/helpers/qunit-helpers";
+
+acceptance("Post Table Wrapper Test", function () {
+  test("fullscreen table wrapper appears on post with large table", async function (assert) {
+    await visit("/t/54081");
+    const postWithLargeTable = ".post-stream .topic-post:first-child";
+    assert.ok(
+      exists(`${postWithLargeTable} .fullscreen-table-wrapper`),
+      "The wrapper is present on the post with the large table"
+    );
+
+    assert.ok(
+      exists(
+        `${postWithLargeTable} .fullscreen-table-wrapper .fullscreen-table-wrapper-buttons .open-popup-link`
+      ),
+      "buttons for the table wrapper appear inside a separate div"
+    );
+
+    const fullscreenButtonWrapper = query(
+      `${postWithLargeTable} .fullscreen-table-wrapper .fullscreen-table-wrapper-buttons`
+    );
+
+    assert.strictEqual(
+      window
+        .getComputedStyle(fullscreenButtonWrapper)
+        .getPropertyValue("position"),
+      "absolute",
+      "the wrapper buttons should not be in the cooked post's flow"
+    );
+
+    await click(
+      `${postWithLargeTable} .fullscreen-table-wrapper .btn-expand-table`
+    );
+    assert.ok(
+      exists(".fullscreen-table-modal"),
+      "The fullscreen table modal appears"
+    );
+    assert.ok(
+      exists(".fullscreen-table-modal table"),
+      "The table is present inside the modal"
+    );
+  });
+});

app/assets/javascripts/discourse/tests/fixtures/topic.js

@@ -6736,4 +6736,292 @@ export default {
     ],
     tags: null,
   },
+  "/t/54081.json": {
+    pending_posts: [],
+    post_stream: {
+      posts: [
+      {
+        id: 18,
+        username: "eviltrout",
+        avatar_template: "/images/avatar.png",
+        name: "Evil Trout",
+        uploaded_avatar_id: 9,
+        created_at: "2015-08-13T14:49:11.840Z",
+        cooked:
+          '<div class=\"md-table\">\n<table>\n<thead>\n<tr>\n<th>Make</th>\n<th>Model</th>\n<th>Year</th>\n<th>Price</th>\n<th>Drivetrain</th>\n<th>Engine</th>\n<th>Power</th>\n<th>Type</th>\n<th>Seats</th>\n<th>Wheels</th>\n<th>Mileage</th>\n<th>Induction</th>\n<th>Intake</th>\n<th>Ranking</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Toyota</td>\n<td>Supra</td>\n<td>1998</td>\n<td>50k</td>\n<td>RWD</td>\n<td>I6</td>\n<td>400HP</td>\n<td>Coupe</td>\n<td>4</td>\n<td>Enkei PF01</td>\n<td>100,000</td>\n<td>Twin Turbo</td>\n<td>Yes</td>\n<td>1</td>\n</tr>\n<tr>\n<td>Nissan</td>\n<td>Skyline</td>\n<td>1999</td>\n<td>100k</td>\n<td>4WD</td>\n<td>I6</td>\n<td>350HP</td>\n<td>Coupe</td>\n<td>4</td>\n<td>TE37</td>\n<td>80,000</td>\n<td>Single Turbo</td>\n<td>No</td>\n<td>2</td>\n</tr>\n<tr>\n<td>Honda</td>\n<td>S2000</td>\n<td>2001</td>\n<td>30k</td>\n<td>RWD</td>\n<td>I4</td>\n<td>230HP</td>\n<td>Roadster</td>\n<td>2</td>\n<td>RPF1</td>\n<td>110,000</td>\n<td>Naturally Aspirated</td>\n<td>No</td>\n<td>3</td>\n</tr>\n</tbody>\n</table>\n',
+        post_number: 1,
+        post_type: 1,
+        updated_at: "2015-08-13T14:49:11.840Z",
+        reply_count: 0,
+        reply_to_post_number: null,
+        quote_count: 0,
+        incoming_link_count: 0,
+        reads: 1,
+        score: 0,
+        yours: true,
+        topic_id: 9,
+        topic_slug: "this-is-a-test-topic",
+        display_username: "",
+        primary_group_name: null,
+        version: 1,
+        can_edit: true,
+        can_delete: false,
+        can_recover: true,
+        read: true,
+        user_title: null,
+        actions_summary: [
+          { id: 3, can_act: true },
+          { id: 4, can_act: true },
+          { id: 5, hidden: true, can_act: true },
+          { id: 7, can_act: true },
+          { id: 8, can_act: true },
+        ],
+        moderator: false,
+        admin: true,
+        staff: true,
+        user_id: 1,
+        hidden: false,
+        hidden_reason_id: null,
+        trust_level: 4,
+        deleted_at: null,
+        user_deleted: false,
+        edit_reason: null,
+        can_view_edit_history: true,
+        wiki: false,
+      },
+      {
+        id: 19,
+        username: "eviltrout",
+        avatar_template: "/images/avatar.png",
+        name: "Evil Trout",
+        uploaded_avatar_id: 9,
+        created_at: "2015-08-13T14:49:18.231Z",
+        cooked:
+          '<p>These are my favourite JDM cars:</p>\n<div class="md-table">\n<table>\n<thead>\n<tr>\n<th>Make</th>\n<th>Model</th>\n<th>Year</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Toyota</td>\n<td>Supra</td>\n<td>1998</td>\n</tr>\n<tr>\n<td>Nissan</td>\n<td>Skyline</td>\n<td>1999</td>\n</tr>\n<tr>\n<td>Honda</td>\n<td>S2000</td>\n<td>2001</td>\n</tr>\n</tbody>\n</table>\n</div><p>These are my favourite Euro cars:</p>\n<div class="md-table">\n<table>\n<thead>\n<tr>\n<th>Make</th>\n<th>Model</th>\n<th>Year</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Porsche</td>\n<td>964</td>\n<td>1998</td>\n</tr>\n<tr>\n<td>BMW</td>\n<td>M3</td>\n<td>2005</td>\n</tr>\n<tr>\n<td>Alfa Romeo</td>\n<td>Giulia</td>\n<td>2018</td>\n</tr>\n</tbody>\n</table>\n</div>',
+        post_number: 2,
+        post_type: 1,
+        updated_at: "2015-08-13T14:49:18.231Z",
+        reply_count: 0,
+        reply_to_post_number: null,
+        quote_count: 0,
+        incoming_link_count: 0,
+        reads: 1,
+        score: 0,
+        yours: true,
+        topic_id: 9,
+        topic_slug: "this-is-a-test-topic",
+        display_username: "",
+        primary_group_name: null,
+        version: 1,
+        can_edit: true,
+        can_delete: true,
+        can_recover: true,
+        read: true,
+        user_title: null,
+        actions_summary: [
+          { id: 3, can_act: true },
+          { id: 4, can_act: true },
+          { id: 5, hidden: true, can_act: true },
+          { id: 7, can_act: true },
+          { id: 8, can_act: true },
+        ],
+        moderator: false,
+        admin: true,
+        staff: true,
+        user_id: 1,
+        hidden: false,
+        hidden_reason_id: null,
+        trust_level: 4,
+        deleted_at: null,
+        user_deleted: false,
+        edit_reason: null,
+        can_view_edit_history: true,
+        wiki: false,
+      },
+      {
+        id: 20,
+        username: "eviltrout",
+        avatar_template: "/images/avatar.png",
+        name: "Evil Trout",
+        uploaded_avatar_id: 9,
+        created_at: "2015-08-13T14:49:23.927Z",
+        cooked:
+          '<div class="md-table">\n<table>\n<thead>\n<tr>\n<th>Make</th>\n<th>Model</th>\n<th>Price</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Toyota</td>\n<td>Supra</td>\n<td>$50,000</td>\n</tr>\n<tr>\n<td></td>\n<td>Celica</td>\n<td>$20,000</td>\n</tr>\n<tr>\n<td>Nissan</td>\n<td>GTR</td>\n<td>$80,000</td>\n</tr>\n</tbody>\n</table>\n</div>',
+        post_number: 3,
+        post_type: 1,
+        updated_at: "2015-08-13T14:49:23.927Z",
+        reply_count: 0,
+        reply_to_post_number: null,
+        quote_count: 0,
+        incoming_link_count: 0,
+        reads: 1,
+        score: 0,
+        yours: true,
+        topic_id: 9,
+        topic_slug: "this-is-a-test-topic",
+        display_username: "",
+        primary_group_name: null,
+        version: 1,
+        can_edit: true,
+        can_delete: true,
+        can_recover: true,
+        read: true,
+        user_title: null,
+        actions_summary: [
+          { id: 3, can_act: true },
+          { id: 4, can_act: true },
+          { id: 5, hidden: true, can_act: true },
+          { id: 7, can_act: true },
+          { id: 8, can_act: true },
+        ],
+        moderator: false,
+        admin: true,
+        staff: true,
+        user_id: 1,
+        hidden: false,
+        hidden_reason_id: null,
+        trust_level: 4,
+        deleted_at: null,
+        user_deleted: false,
+        edit_reason: null,
+        can_view_edit_history: true,
+        wiki: false,
+      },
+      ],
+      stream: [398, 419],
+      gaps: { before: {}, after: { 398: [419] } },
+    },
+    id: 54081,
+    title: "This is a topic with tables!",
+    fancy_title: "This is a topic with tables!",
+    posts_count: 2,
+    created_at: "2013-02-05T21:29:00.174Z",
+    views: 5211,
+    reply_count: 1,
+    participant_count: 2,
+    like_count: 135,
+    last_posted_at: "2015-03-04T15:07:10.487Z",
+    visible: true,
+    closed: false,
+    archived: false,
+    has_summary: false,
+    archetype: "regular",
+    slug: "short-topic-with-two-posts",
+    category_id: 2,
+    word_count: 300,
+    deleted_at: null,
+    draft: null,
+    draft_key: "topic_54079",
+    draft_sequence: 3,
+    posted: true,
+    unpinned: null,
+    pinned_globally: false,
+    pinned: false,
+    pinned_at: null,
+    details: {
+      can_publish_page: true,
+      can_invite_via_email: true,
+      can_toggle_topic_visibility: true,
+      can_pin_unpin_topic: true,
+      auto_close_at: null,
+      auto_close_hours: null,
+      auto_close_based_on_last_post: false,
+      created_by: {
+        id: 255,
+        username: "james_john",
+        uploaded_avatar_id: 5697,
+        avatar_template: "/images/avatar.png",
+      },
+      last_poster: {
+        id: 9,
+        username: "Tim Stone",
+        uploaded_avatar_id: 40181,
+        avatar_template: "/images/avatar.png",
+      },
+      participants: [
+        {
+          id: 9,
+          username: "tms",
+          uploaded_avatar_id: 40181,
+          avatar_template: "/images/avatar.png",
+          post_count: 2,
+        },
+        {
+          id: 255,
+          username: "james_john",
+          uploaded_avatar_id: 5697,
+          avatar_template: "/images/avatar.png",
+          post_count: 1,
+        },
+      ],
+      links: [],
+      notification_level: 2,
+      notifications_reason_id: 4,
+      can_move_posts: true,
+      can_edit: true,
+      can_delete: true,
+      can_recover: true,
+      can_remove_allowed_users: true,
+      can_invite_to: true,
+      can_create_post: true,
+      can_reply_as_new_topic: true,
+      can_flag_topic: true,
+    },
+    highest_post_number: 2,
+    last_read_post_number: 2,
+    deleted_by: null,
+    has_deleted: true,
+    actions_summary: [
+      { id: 4, count: 0, hidden: false, can_act: true },
+      { id: 7, count: 0, hidden: false, can_act: true },
+      { id: 8, count: 0, hidden: false, can_act: true },
+    ],
+    chunk_size: 20,
+    bookmarked: false,
+    bookmarks: [],
+    suggested_topics: [
+      {
+        id: 27331,
+        title: "Polls are still very buggy",
+        fancy_title: "Polls are still very buggy",
+        slug: "polls-are-still-very-buggy",
+        posts_count: 4,
+        reply_count: 1,
+        highest_post_number: 4,
+        image_url: "/uploads/default/_optimized/cd1/b8c/c162528887_690x401.png",
+        created_at: "2015-04-08T09:51:00.357Z",
+        last_posted_at: "2015-04-08T15:59:16.258Z",
+        bumped: true,
+        bumped_at: "2015-04-08T16:05:09.842Z",
+        unseen: false,
+        last_read_post_number: 3,
+        unread_posts: 1,
+        pinned: false,
+        unpinned: null,
+        visible: true,
+        closed: false,
+        archived: false,
+        notification_level: 2,
+        bookmarked: false,
+        bookmarks: [],
+        liked: false,
+        archetype: "regular",
+        like_count: 11,
+        views: 55,
+        category_id: 1,
+        posters: [
+          {
+            extras: "latest single",
+            description: "Original Poster, Most Recent Poster",
+            user: {
+              id: 1,
+              username: "test",
+              avatar_template: "/images/avatar.png",
+            },
+          },
+        ],
+      },
+    ],
+    tags: null,
+  },
 };

app/assets/stylesheets/common/base/topic-post.scss

@@ -1652,20 +1652,21 @@ a.mention-group {
 
 .open-popup-link {
   position: sticky;
-  left: 0.5rem;
+  left: 1rem;
-  top: 0.5rem;
   opacity: 0%;
   white-space: nowrap;
-  display: block;
 }
 
 .fullscreen-table-wrapper {
   transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
   display: block;
-}
+  position: relative;
 
-.expand-table-icon {
+  &-buttons {
-  margin-right: 4px;
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+  }
 }
 
 .fullscreen-table-modal .modal-inner-container,