Add beta label to new container layouts and enable flexible container…

…s in production (#1683)
guardian · Oct 9, 2024 · cb2609a · cb2609a
1 parent 7eb334d
commit cb2609a
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 26 deletions.
diff --git a/public/src/css/style.css b/public/src/css/style.css
@@ -2017,6 +2017,14 @@ ol.search_list > li::before {
     flex-wrap: wrap;
 }
 
+.cnf-form .beta-warning-text {
+    color: #f68d12;
+    background: #fffaed;
+    padding: 0 2px;
+    border: 1px solid;
+    border-radius: 4px;
+}
+
 .cnf-form .type-option-chosen {
     color: #2ea3eb;
     position: absolute;

diff --git a/public/src/js/constants/defaults.js b/public/src/js/constants/defaults.js
@@ -56,12 +56,26 @@ export default {
             'big'
           ]
         },
-        { name: 'nav/list' },
-        { name: 'nav/media-list' },
-        { name: 'news/most-popular' },
-        { name: 'breaking-news/not-for-other-fronts', groups: ['minor', 'major'] },
-        { name: 'fixed/showcase' },
-        { name: 'scrollable/highlights' }
+        { 'name': 'nav/list' },
+        { 'name': 'nav/media-list' },
+        { 'name': 'news/most-popular' },
+        { 'name': 'breaking-news/not-for-other-fronts', groups: ['minor', 'major'] },
+        { 'name': 'fixed/showcase' },
+        { 'name': 'scrollable/highlights' },
+        {
+            'name': 'flexible/general',
+            'groups': [
+                'standard',
+                'splash'
+            ]
+        },
+        {
+            'name': 'flexible/special',
+            'groups': [
+                'standard',
+                'snap'
+            ]
+        }
     ],
 
     emailTypes: [
@@ -237,7 +251,6 @@ export default {
         configCollection: 'config-collection'
     },
 
-
     frontendApiBase:       '/frontend',
 
     reauthPath:            '/login/status',
@@ -267,5 +280,16 @@ export default {
         any: 'Any'
     },
 
-    userVisibilities: ['all', 'subscriber', 'non-subscriber']
+    userVisibilities: ['all', 'subscriber', 'non-subscriber'],
+
+    betaCollectionTypes: [
+        'flexible/special',
+        'flexible/general',
+        'scrollable/highlights',
+        'scrollable/small',
+        'scrollable/medium',
+        'scrollable/feature',
+        'static/medium/4',
+        'static/feature/2'
+    ]
 };
diff --git a/public/src/js/models/config/collection.js b/public/src/js/models/config/collection.js
@@ -73,7 +73,7 @@ export default class ConfigCollection extends DropTarget {
         this.containerThumbnail = ko.pureComputed(() => {
             var containerId = this.meta.type();
 
-            if (/^(fixed|dynamic)\//.test(containerId)) {
+            if (/^(fixed|dynamic|flexible|scrollable|static)\//.test(containerId)) {
                 return '/thumbnails/' + containerId + '.svg';
             } else {
                 return null;
@@ -87,8 +87,13 @@ export default class ConfigCollection extends DropTarget {
         this.typePicker = this._typePicker.bind(this);
 
         this.thisIsPlatformSpecificCollection = isPlatformSpecificCollection(this.meta.platform());
+
+        this.thisIsBetaCollection = ko.pureComputed(() => {
+            return isBetaCollection(this.meta.type());
+        });
     }
 
+
     getPlatform() {
         switch (this.meta.platform()) {
             case vars.CONST.platforms.app: return 'app only';
@@ -182,3 +187,7 @@ function findParents (collectionId) {
         .filter(Boolean)
         .value();
 }
+
+function isBetaCollection (collectionId) {
+    return vars.CONST.betaCollectionTypes.includes(collectionId);
+}
diff --git a/public/src/js/modules/vars.js b/public/src/js/modules/vars.js
@@ -12,23 +12,9 @@ export function init (res) {
         CONST.types.push({ 'name': 'all-items/not-for-production' });
     }
     // These containers are under development and are not yet ready for production.
-    // They will need to be added to the types list in default.js when ready.
+    // They will need to be added to the types list in ../constants/default.js when ready.
     if (res.defaults.env.toLowerCase() !== 'prod') {
         CONST.types.push(
-             {
-              'name': 'flexible/general',
-              'groups': [
-                'standard',
-                'splash'
-              ]
-            },
-            {
-              'name': 'flexible/special',
-              'groups': [
-                'standard',
-                'snap'
-              ]
-            },
             {'name': 'scrollable/small'},
             {'name': 'scrollable/medium'},
             {'name': 'scrollable/feature'},

diff --git a/public/src/js/widgets/columns/fronts-config.html b/public/src/js/widgets/columns/fronts-config.html
@@ -199,6 +199,9 @@
                 <!-- ko if: containerThumbnail -->
                 <img onerror="this.style.display='none'" data-bind="attr: {src: containerThumbnail}" />
                 <!-- /ko -->
+                <!-- ko if: thisIsBetaCollection -->
+                <span class="beta-warning-text">Beta</span>
+                <!-- /ko -->
             </div>
 
             <!-- ko if: state.isOpenTypePicker -->
@@ -209,6 +212,18 @@
                         click: $parent.typePicker">
                     <div class="type-option-value" data-bind="text: $data"></div>
                     <img onerror="this.style.display='none'" data-bind="attr: {src: '/thumbnails/' + $data + '.svg'}" />
+                    <!-- ko if: (
+                        $data === 'flexible/general' ||
+                        $data === 'flexible/special' ||
+                        $data === 'scrollable/highlights' ||
+                        $data === 'scrollable/small' ||
+                        $data === 'scrollable/medium' ||
+                        $data === 'scrollable/feature' ||
+                        $data === 'static/medium/4' ||
+                        $data === 'static/feature/2' )
+                        -->
+                    <span class="beta-warning-text">Beta</span>
+                    <!-- /ko -->
                 </div>
             </div>
             <!-- /ko -->
@@ -284,8 +299,8 @@
             <input type="checkbox" data-bind="
                 checked: meta.uneditable" />
 
-            <label for="frontsToolSettings.displayEditWarning">Display edit warning</label>
-            <input id="hideShowMore" type="checkbox" data-bind="checked: meta.frontsToolSettings.displayEditWarning" />
+            <label for="displayEditWarning">Display edit warning</label>
+            <input id="displayEditWarning" type="checkbox" data-bind="checked: meta.frontsToolSettings.displayEditWarning" />
 
             <!-- ko if: meta.type() === 'scrollable/small' -->
             <label for="suppressImages">Suppress images</label>