FIX: Ember has deprecated `isVisible` in newer versions

app/assets/javascripts/admin/components/admin-report.js

@@ -1,7 +1,7 @@
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import { makeArray } from "discourse-common/lib/helpers";
-import { alias, or, and, equal, notEmpty, not } from "@ember/object/computed";
+import { alias, or, and, equal, notEmpty } from "@ember/object/computed";
 import EmberObject, { computed, action } from "@ember/object";
 import { next } from "@ember/runloop";
 import Component from "@ember/component";
@@ -43,7 +43,8 @@ function collapseWeekly(data, average) {
 
 export default Component.extend({
   classNameBindings: [
-    "isVisible",
+    "isHidden:hidden",
+    "isHidden::is-visible",
     "isEnabled",
     "isLoading",
     "dasherizedDataSourceName",
@@ -67,7 +68,6 @@ export default Component.extend({
   showDatesOptions: alias("model.dates_filtering"),
   showRefresh: or("showDatesOptions", "model.available_filters.length"),
   shouldDisplayTrend: and("showTrend", "model.prev_period"),
-  isVisible: not("isHidden"),
 
   init() {
     this._super(...arguments);

app/assets/javascripts/discourse/app/templates/components/private-message-glyph.hbs

@@ -1,11 +1,13 @@
-{{#if href}}
-  <a href={{href}} title={{i18n title}} aria-label={{i18n ariaLabel}}>
+{{#if isVisible}}
+  {{#if href}}
+    <a href={{href}} title={{i18n title}} aria-label={{i18n ariaLabel}}>
+      <span class="private-message-glyph-wrapper">
+        {{d-icon "envelope" class="private-message-glyph"}}
+      </span>
+    </a>
+  {{else}}
     <span class="private-message-glyph-wrapper">
       {{d-icon "envelope" class="private-message-glyph"}}
     </span>
-  </a>
-{{else}}
-  <span class="private-message-glyph-wrapper">
-    {{d-icon "envelope" class="private-message-glyph"}}
-  </span>
+  {{/if}}
 {{/if}}

app/assets/javascripts/select-kit/addon/components/mini-tag-chooser/selected-collection.js

@@ -1,12 +1,16 @@
 import Component from "@ember/component";
 import { computed } from "@ember/object";
-import { reads, notEmpty } from "@ember/object/computed";
+import { reads, empty } from "@ember/object/computed";
 import layout from "select-kit/templates/components/mini-tag-chooser/selected-collection";
 
 export default Component.extend({
   layout,
-  classNames: ["mini-tag-chooser-selected-collection", "selected-tags"],
-  isVisible: notEmpty("selectedTags.[]"),
+  classNames: [
+    "mini-tag-chooser-selected-collection",
+    "selected-tags",
+    "shouldHide:hidden",
+  ],
+  shouldHide: empty("selectedTags.[]"),
   selectedTags: reads("collection.content.selectedTags.[]"),
   highlightedTag: reads("collection.content.highlightedTag"),
 

app/assets/javascripts/select-kit/addon/components/period-chooser.js

@@ -3,11 +3,12 @@ import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-bo
 
 export default DropdownSelectBoxComponent.extend({
   classNames: ["period-chooser"],
+  classNameBindings: ["showPeriods::hidden"],
   content: oneWay("site.periods"),
   value: readOnly("period"),
-  isVisible: readOnly("showPeriods"),
   valueProperty: null,
   nameProperty: null,
+  showPeriods: true,
 
   modifyComponentForRow() {
     return "period-chooser/period-chooser-row";

app/assets/javascripts/select-kit/addon/components/select-kit/errors-collection.js

@@ -1,10 +1,11 @@
 import Component from "@ember/component";
-import { notEmpty } from "@ember/object/computed";
+import { empty } from "@ember/object/computed";
 import layout from "select-kit/templates/components/select-kit/errors-collection";
 
 export default Component.extend({
   layout,
   classNames: ["select-kit-errors-collection"],
+  classNameBindings: ["shouldHide:hidden"],
   tagName: "ul",
-  isVisible: notEmpty("collection.content"),
+  shouldHide: empty("collection.content"),
 });

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-collection.js

@@ -1,10 +1,11 @@
 import Component from "@ember/component";
-import { notEmpty } from "@ember/object/computed";
+import { empty } from "@ember/object/computed";
 import layout from "select-kit/templates/components/select-kit/select-kit-collection";
 
 export default Component.extend({
   layout,
   classNames: ["select-kit-collection"],
+  classNameBindings: ["shouldHide:hidden"],
   tagName: "ul",
-  isVisible: notEmpty("collection"),
+  shouldHide: empty("collection"),
 });

app/assets/javascripts/select-kit/addon/components/tag-drop.js

@@ -15,7 +15,7 @@ export const NONE_TAG_ID = "none";
 
 export default ComboBoxComponent.extend(TagsMixin, {
   pluginApiIdentifiers: ["tag-drop"],
-  classNameBindings: ["categoryStyle", "tagClass"],
+  classNameBindings: ["categoryStyle", "tagClass", "shouldHide:hidden"],
   classNames: ["tag-drop"],
   value: readOnly("tagId"),
   tagName: "li",
@@ -24,12 +24,12 @@ export default ComboBoxComponent.extend(TagsMixin, {
   categoryStyle: setting("category_style"),
   maxTagSearchResults: setting("max_tag_search_results"),
   sortTagsAlphabetically: setting("tags_sort_alphabetically"),
-  isVisible: computed("showFilterByTag", "content.[]", function () {
+  shouldHide: computed("showFilterByTag", "content.[]", function () {
     if (this.showFilterByTag && !isEmpty(this.content)) {
-      return true;
+      return false;
     }
 
-    return false;
+    return true;
   }),
 
   selectKitOptions: {