Added Recommendations settings placeholder under feature flag (#17855)

refs https://github.com/TryGhost/Product/issues/3787

- Added Recommendations feature flag
- Added an empty placeholder settings section for Recommendations under the feature flag

apps/admin-x-settings/src/components/Sidebar.tsx

@@ -21,6 +21,7 @@ const Sidebar: React.FC = () => {
     };
 
     const hasTipsAndDonations = useFeatureFlag('tipsAndDonations');
+    const hasRecommendations = useFeatureFlag('recommendations');
 
     return (
         <div className="hidden md:!visible md:!block md:h-[calc(100vh-5vmin-84px)] md:w-[240px] md:overflow-y-scroll md:pt-[32px]">
@@ -45,6 +46,7 @@ const Sidebar: React.FC = () => {
                 {/* <SettingNavItem navid='theme' title="Theme" onClick={handleSectionClick} /> */}
                 <SettingNavItem navid='design' title="Branding and design" onClick={handleSectionClick} />
                 <SettingNavItem navid='navigation' title="Navigation" onClick={handleSectionClick} />
+                {hasRecommendations && <SettingNavItem navid='recommendations' title="Recommendations" onClick={handleSectionClick} />}
             </SettingNavSection>
 
             <SettingNavSection title="Membership">

apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx

@@ -55,6 +55,10 @@ const features = [{
     title: 'Tips & donations',
     description: 'Enables publishers to collect one-time payments',
     flag: 'tipsAndDonations'
+},{
+    title: 'Recommendations',
+    description: 'Enables publishers to recommend sites to their audience',
+    flag: 'recommendations'
 }];
 
 const AlphaFeatures: React.FC = () => {

apps/admin-x-settings/src/components/settings/site/Recommendations.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
+import useSettingGroup from '../../../hooks/useSettingGroup';
+
+const Recommendations: React.FC<{ keywords: string[] }> = ({keywords}) => {
+    const {
+        saveState,
+        handleSave
+    } = useSettingGroup();
+
+    return (
+        <SettingGroup
+            description="Recommend sites to your audience, and get recommended by others."
+            keywords={keywords}
+            navid='recommendations'
+            saveState={saveState}
+            testId='recommendations'
+            title="Recommendations"
+            onSave={handleSave}
+        >
+        </SettingGroup>
+    );
+};
+
+export default Recommendations;

apps/admin-x-settings/src/components/settings/site/SiteSettings.tsx

@@ -1,22 +1,27 @@
 import DesignSetting from './DesignSetting';
 import Navigation from './Navigation';
 import React from 'react';
+import Recommendations from './Recommendations';
 import SettingSection from '../../../admin-x-ds/settings/SettingSection';
+import useFeatureFlag from '../../../hooks/useFeatureFlag';
 // import Theme from './Theme';
 
 const searchKeywords = {
     theme: ['themes', 'design', 'appearance', 'style'],
     design: ['design', 'branding', 'logo', 'cover', 'colors', 'fonts', 'background'],
-    navigation: ['navigation', 'menus', 'primary', 'secondary', 'links']
+    navigation: ['navigation', 'menus', 'primary', 'secondary', 'links'],
+    recommendations: ['recommendation', 'recommend', 'blog roll', 'recommending']
 };
 
 const SiteSettings: React.FC = () => {
+    const hasRecommendations = useFeatureFlag('recommendations');
     return (
         <>
             <SettingSection keywords={Object.values(searchKeywords).flat()} title="Site">
                 {/* <Theme keywords={searchKeywords.theme} /> */}
                 <DesignSetting keywords={searchKeywords.design} />
                 <Navigation keywords={searchKeywords.navigation} />
+                {hasRecommendations && <Recommendations keywords={searchKeywords.navigation} />}
             </SettingSection>
         </>
     );

ghost/admin/app/services/feature.js

@@ -78,6 +78,7 @@ export default class FeatureService extends Service {
     @feature('importMemberTier') importMemberTier;
     @feature('tipsAndDonations') tipsAndDonations;
     @feature('convertToLexical') convertToLexical;
+    @feature('recommendations') recommendations;
 
     _user = null;
 

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

@@ -366,6 +366,20 @@
                         </div>
                     </div>
                 </div>
+
+                <div class="gh-expandable-block">
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Recommendations</h4>
+                            <p class="gh-expandable-description">
+                                Enables publishers to recommend sites to their audience
+                            </p>
+                        </div>
+                        <div class="for-switch">
+                            <GhFeatureFlag @flag="recommendations" />
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         {{/if}}

ghost/core/core/shared/labs.js

@@ -42,7 +42,8 @@ const ALPHA_FEATURES = [
     'collectionsCard',
     'tipsAndDonations',
     'importMemberTier',
-    'convertToLexical'
+    'convertToLexical',
+    'recommendations'
 ];
 
 module.exports.GA_KEYS = [...GA_FEATURES];