Update fronts config tool with new container level tags (#1712)

* bump fapi client to v12.1

* Hide primary tag from the options in the tag selector dropdown

* Add check to ensure beta containers have the appropriate primary/secondary tag

* Account for edge case where both primary and secondary are in the list of tags

* Add comments and make code easier to read

build.sbt

@@ -74,7 +74,7 @@ libraryDependencies ++= Seq(
     "com.gu" %% "content-api-client-aws" % "0.6",
     "com.gu" %% "content-api-client-default" % capiClientVersion,
     "com.gu" %% "editorial-permissions-client" % "3.0.0",
-    "com.gu" %% "fapi-client-play30" % "12.0.0",
+    "com.gu" %% "fapi-client-play30" % "12.1.0",
     "com.gu" %% "mobile-notifications-api-models" % "3.0.0",
     "com.gu" %% "pan-domain-auth-play_3-0" % "4.0.0",
 

public/src/js/models/common-handlers.js

@@ -49,7 +49,10 @@ ko.bindingHandlers.tagSelector = {
                     });
                     return parsed;
                 }, []);
-                return parsedData;
+				// The primary tag is the default for specific containers (e.g. scrollable/small).
+				// Because of this, we don't want it as an option in the dropdown menu.
+				const parsedDataWithoutPrimaryTag = parsedData.filter(item => item.text !== 'Primary');
+				return parsedDataWithoutPrimaryTag;
             }
         });
     }

public/src/js/models/config/collection.js

@@ -157,6 +157,25 @@ export default class ConfigCollection extends DropTarget {
             return;
         }
 
+		// The BetaCollection containers need a Primary or Secondary tag indicating its level.
+		if (this.thisIsBetaCollection()) {
+			const hasPrimaryTag = this.meta.metadata().some(tag => tag.type === 'Primary');
+			const hasSecondaryTag = this.meta.metadata().some(tag => tag.type === 'Secondary');
+
+			// If no tags are set, or if neither Primary nor Secondary tags are set, we default the container to Primary.
+			if (this.meta.metadata() === undefined) {
+				this.meta.metadata([{ type: 'Primary' }]);
+			}
+			if (!hasPrimaryTag && !hasSecondaryTag) {
+				this.meta.metadata().push({ type: 'Primary' });}
+			if (hasPrimaryTag && hasSecondaryTag) {
+				// If both tags are present, we assume the intention was to set the container to Secondary
+				// So we remove the primary tag from the metadata.
+				const updatedTags = this.meta.metadata().filter(tag => tag.type !== 'Primary');
+				this.meta.metadata(updatedTags);
+			}
+		}
+
         this.meta.href(urlAbsPath(this.meta.href()));
 
         this.state.isOpen(false);