Add "hidden" field to tag settings form

refs TryGhost#6165
- adds a checkbox field to the tag settings form to mark a tag as hidden
- fixes error in tag controller's `saveTagProperty` method when a non-string value is saved

core/client/app/components/gh-tag-settings-form.js

@@ -13,6 +13,7 @@ export default Component.extend({
     scratchDescription: boundOneWay('tag.description'),
     scratchMetaTitle: boundOneWay('tag.meta_title'),
     scratchMetaDescription: boundOneWay('tag.meta_description'),
+    scratchHidden: boundOneWay('tag.hidden'),
 
     isViewingSubview: false,
 
@@ -112,6 +113,10 @@ export default Component.extend({
             this.attrs.setProperty('image', '');
         },
 
+        setHidden(event) {
+            this.attrs.setProperty('hidden', event.target.checked);
+        },
+
         setUploaderReference() {
             // noop
         },

core/client/app/controllers/settings/tags/tag.js

@@ -8,14 +8,17 @@ export default Controller.extend({
     tag: alias('model'),
     isMobile: alias('tagsController.isMobile'),
 
+    feature: inject.controller(),
     tagsController: inject.controller('settings.tags'),
     notifications: inject.service(),
 
     saveTagProperty(propKey, newValue) {
         let tag = this.get('tag');
         let currentValue = tag.get(propKey);
 
-        newValue = newValue.trim();
+        if (newValue && newValue.trim) {
+            newValue = newValue.trim();
+        }
 
         // Quit if there was no change
         if (newValue === currentValue) {

core/client/app/templates/components/gh-tag-settings-form.hbs

@@ -31,6 +31,19 @@
                 <p>Maximum: <b>200</b> characters. You’ve used {{gh-count-down-characters scratchDescription 200}}</p>
             {{/gh-form-group}}
 
+            {{#if hiddenTags}}
+                {{#gh-form-group}}
+                    <label>Hidden Tag</label>
+                    <div class="for-checkbox">
+                        <label class="checkbox" for="tag-hidden">
+                            {{input id="tag-hidden" name="hidden" type="checkbox" checked=scratchHidden change=(action 'setHidden')}}
+                            <span class="input-toggle-component"></span>
+                            <p>Tag is hidden for internal use</p>
+                        </label>
+                    </div>
+                {{/gh-form-group}}
+            {{/if}}
+
             <ul class="nav-list nav-list-block">
                 <li class="nav-list-item" {{action 'openMeta'}}>
                     <button type="button" class="meta-data-button">

core/client/app/templates/settings/tags/tag.hbs

@@ -1 +1,4 @@
-{{gh-tag-settings-form tag=tag setProperty=(action "setProperty") openModal="openModal"}}
+{{gh-tag-settings-form tag=tag
+                       setProperty=(action "setProperty")
+                       openModal="openModal"
+                       hiddenTags=feature.hiddenTags}}

core/client/tests/acceptance/settings/tags-test.js

@@ -183,6 +183,12 @@ describe('Acceptance: Settings - Tags', function () {
                     .to.equal('New Name');
             });
 
+            // trigger save of boolean value, will error if not handled correctly
+            // TODO: it may be possible to use Pretender's request tracking to
+            // verify that the correct value was sent to the API
+            // TODO: re-enable once out of labs or test with hiddenTags enabled
+            // click('input[name="hidden"]');
+
             // start new tag
             click('.view-actions .btn-green');
 

core/client/tests/integration/components/gh-tag-settings-form-test.js

@@ -167,6 +167,30 @@ describeComponent(
             });
         });
 
+        it('triggers setProperty action on hidden tag checkbox change', function () {
+            let expectedProperty = 'hidden';
+            let expectedValue;
+
+            this.set('actions.setProperty', function (property, value) {
+                expect(property, 'property').to.equal(expectedProperty);
+                expect(value, 'value').to.equal(expectedValue);
+            });
+
+            this.render(hbs`
+                {{gh-tag-settings-form tag=tag setProperty=(action 'setProperty') openModal='openModal' hiddenTags=true}}
+            `);
+
+            expectedValue = true;
+            run(() => {
+                this.$('input[name="hidden"]').click();
+            });
+
+            expectedValue = false;
+            run(() => {
+                this.$('input[name="hidden"]').click();
+            });
+        });
+
         it('displays error messages for validated fields', function () {
             let errors = this.get('tag.errors');
             let hasValidated = this.get('tag.hasValidated');