✨ Added native comments (#15223)

no issue

- Removes the comments lab flag (bumping it to GA).
- Bumps comments-ui to v0.8

ghost/admin/app/services/feature.js

@@ -58,7 +58,6 @@ export default class FeatureService extends Service {
     // labs flags
     @feature('urlCache') urlCache;
     @feature('beforeAfterCard') beforeAfterCard;
-    @feature('comments') comments;
     @feature('newsletterPaywall') newsletterPaywall;
     @feature('freeTrial') freeTrial;
 

ghost/admin/app/templates/settings/labs.hbs

@@ -213,19 +213,6 @@
                         </div>
                     </div>
                 </div>
-                <div class="gh-expandable-block">
-                    <div class="gh-expandable-header">
-                        <div>
-                            <h4 class="gh-expandable-title">Comments</h4>
-                            <p class="gh-expandable-description">
-                               Enable comments
-                            </p>
-                        </div>
-                        <div class="for-switch">
-                           <GhFeatureFlag @flag="comments" />
-                        </div>
-                    </div>
-                </div>
                 <div class="gh-expandable-block">
                     <div class="gh-expandable-header">
                         <div>

ghost/admin/app/templates/settings/membership.hbs

@@ -24,9 +24,6 @@
             <div class="gh-setting-members-basicsform">
                 <p class="intro">Fund your work with subscription revenue. Connect your Stripe account and offer premium content to your audience. Our creators are already making over $12 million per year, while <strong>Ghost takes 0% payment fees</strong>.</p>
                 
-                {{#if (not (feature 'comments'))}}
-                    <hr>
-                {{/if}}
                 <div class="flex flex-column justify-between mt3">
                     <section class="gh-expandable gh-setting-members-portalcta">
                         <div class="gh-expandable-block">
@@ -47,9 +44,7 @@
                     <div class="gh-setting-rich-dropdown">
                         <Settings::MembersSubscriptionAccess @onChange={{this.membersSubscriptionAccessChanged}} />
                         <Settings::MembersDefaultPostAccess />
-                        {{#if (feature 'comments')}}
+                        <Settings::MembersCommentAccess />
-                            <Settings::MembersCommentAccess />
-                        {{/if}}
                     </div>
                 </div>
             </div>

ghost/admin/app/templates/settings/staff/user.hbs

@@ -297,33 +297,30 @@
                             </p>
                         </GhFormGroup>
 
-                        {{#if (feature 'comments')}}
+                        <div class="user-settings-subgroup">
-                            <div class="user-settings-subgroup">
+                            <h4 class="user-settings-heading">Email notifications</h4>
-                                <h4 class="user-settings-heading">Email notifications</h4>
+                            <GhFormGroup @errors={{this.user.errors}} @hasValidated={{this.user.hasValidated}} @property="email">
-                                <GhFormGroup @errors={{this.user.errors}} @hasValidated={{this.user.hasValidated}} @property="email">
+                                <div class="user-setting-toggle">
-                                    <div class="user-setting-toggle">
+                                    <div>
-                                        <div>
+                                        <label for="user-email">Comments</label>
-                                            <label for="user-email">Comments</label>
+                                        <p>Receive notifications when members comment on one of your posts</p>
-                                            <p>Receive notifications when members comment on one of your posts</p>
-                                        </div>
-                                        <div class="for-switch">
-                                            <label class="switch" for="comment-notifications">
-                                                <input
-                                                    id="comment-notifications"
-                                                    type="checkbox"
-                                                    checked={{this.user.commentNotifications}}
-                                                    class="gh-input"
-                                                    {{on "change" this.toggleCommentNotifications}}
-                                                    data-test-checkbox="comment-notifications"
-                                                >
-                                                <span class="input-toggle-component"></span>
-                                            </label>
-                                        </div>
                                     </div>
-                                </GhFormGroup>
+                                    <div class="for-switch">
-                            </div>
+                                        <label class="switch" for="comment-notifications">
-                        {{/if}}
+                                            <input
-
+                                                id="comment-notifications"
+                                                type="checkbox"
+                                                checked={{this.user.commentNotifications}}
+                                                class="gh-input"
+                                                {{on "change" this.toggleCommentNotifications}}
+                                                data-test-checkbox="comment-notifications"
+                                            >
+                                            <span class="input-toggle-component"></span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </GhFormGroup>
+                        </div>
                     </fieldset>
                 </div>
 

ghost/core/core/frontend/helpers/comment_count.js

@@ -1,8 +1,7 @@
 const {SafeString} = require('../services/handlebars');
-const {labs} = require('../services/proxy');
 const {html} = require('common-tags');
 
-function commentCount(options) {
+module.exports = function commentCount(options) {
     const empty = options.hash.empty === undefined ? '' : options.hash.empty;
     const singular = options.hash.singular === undefined ? 'comment' : options.hash.singular;
     const plural = options.hash.plural === undefined ? 'comments' : options.hash.plural;
@@ -21,17 +20,4 @@ function commentCount(options) {
         >
         </script>
     `);
-}
-
-module.exports = function commentsLabsWrapper() {
-    const self = this;
-    const args = arguments;
-
-    return labs.enabledHelper({
-        flagKey: 'comments',
-        flagName: 'Comments',
-        helperName: 'comment_count'
-    }, () => {
-        return commentCount.apply(self, args);
-    });
 };

ghost/core/core/frontend/helpers/comments.js

@@ -1,8 +1,8 @@
 const {SafeString} = require('../services/handlebars');
-const {urlUtils, getFrontendKey, labs, settingsCache} = require('../services/proxy');
+const {urlUtils, getFrontendKey, settingsCache} = require('../services/proxy');
 const {getFrontendAppConfig, getDataAttributes} = require('../utils/frontend-apps');
 
-async function comments(options) {
+module.exports = async function comments(options) {
     // todo: For now check on the comment id to exclude normal pages (we probably have a better way to do this)
 
     const commentId = this.comment_id;
@@ -75,19 +75,6 @@ async function comments(options) {
     return new SafeString(`
         <script defer src="${scriptUrl}" ${dataAttributes} crossorigin="anonymous"></script>
     `);
-}
-
-module.exports = async function commentsLabsWrapper() {
-    const self = this;
-    const args = arguments;
-
-    return labs.enabledHelper({
-        flagKey: 'comments',
-        flagName: 'Comments',
-        helperName: 'comments'
-    }, () => {
-        return comments.apply(self, args);
-    });
 };
 
 module.exports.async = true;

ghost/core/core/frontend/helpers/ghost_head.js

@@ -229,7 +229,7 @@ module.exports = async function ghost_head(options) { // eslint-disable-line cam
                 head.push(`<link rel="stylesheet" type="text/css" href="${getAssetUrl('public/cards.min.css')}">`);
             }
 
-            if (labs.isSet('comments') && settingsCache.get('enable_comments') !== 'off') {
+            if (settingsCache.get('enable_comments') !== 'off') {
                 head.push(`<script defer src="${getAssetUrl('public/comment-counts.min.js')}" data-ghost-comments-counts-api="${urlUtils.getSiteUrl(true)}members/api/comments/counts/"></script>`);
             }
 

ghost/core/core/shared/config/defaults.json

@@ -147,7 +147,7 @@
     "comments": {
         "url": "https://cdn.jsdelivr.net/npm/@tryghost/comments-ui@~{version}/umd/comments-ui.min.js",
         "styles": "https://cdn.jsdelivr.net/npm/@tryghost/comments-ui@~{version}/umd/main.css",
-        "version": "0.7"
+        "version": "0.8"
     },
     "editor": {
         "url": "https://unpkg.com/@tryghost/koenig-react/dist/umd/koenig-react.min.js"

ghost/core/core/shared/labs.js

@@ -27,7 +27,6 @@ const BETA_FEATURES = [
 const ALPHA_FEATURES = [
     'urlCache',
     'beforeAfterCard',
-    'comments',
     'freeTrial'
 ];
 

ghost/core/test/e2e-api/admin/__snapshots__/settings.test.js.snap

@@ -230,7 +230,7 @@ Object {
     },
     Object {
       "key": "labs",
-      "value": "{\\"activitypub\\":true,\\"urlCache\\":true,\\"beforeAfterCard\\":true,\\"comments\\":true,\\"freeTrial\\":true,\\"newsletterPaywall\\":true,\\"members\\":true}",
+      "value": "{\\"activitypub\\":true,\\"urlCache\\":true,\\"beforeAfterCard\\":true,\\"freeTrial\\":true,\\"newsletterPaywall\\":true,\\"members\\":true}",
     },
     Object {
       "key": "slack_url",
@@ -280,7 +280,7 @@ exports[`Settings API Browse Can request all settings 2: [headers] 1`] = `
 Object {
   "access-control-allow-origin": "http://127.0.0.1:2369",
   "cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
-  "content-length": "3425",
+  "content-length": "3407",
   "content-type": "application/json; charset=utf-8",
   "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
   "vary": "Origin, Accept-Encoding",

ghost/core/test/unit/frontend/helpers/comment_count.test.js

@@ -31,7 +31,6 @@ describe('{{comment_count}} helper', function () {
 
     beforeEach(function () {
         mockManager.mockMail();
-        mockManager.mockLabsEnabled('comments');
         sinon.stub(settingsCache, 'get');
     });
 

ghost/core/test/unit/frontend/helpers/comments.test.js

@@ -20,7 +20,6 @@ describe('{{comments}} helper', function () {
 
     beforeEach(function () {
         mockManager.mockMail();
-        mockManager.mockLabsEnabled('comments');
         sinon.stub(settingsCache, 'get');
         configUtils.set('comments:version', 'test.version');
     });