UX: Small tweak to category delete warning (#11799)

app/assets/javascripts/discourse/app/controllers/edit-category-tabs.js

@@ -1,3 +1,4 @@
+import { and, readOnly } from "@ember/object/computed";
 import discourseComputed, { on } from "discourse-common/utils/decorators";
 import Category from "discourse/models/category";
 import Controller from "@ember/controller";
@@ -7,7 +8,6 @@ import { NotificationLevels } from "discourse/lib/notification-levels";
 import PermissionType from "discourse/models/permission-type";
 import bootbox from "bootbox";
 import { extractError } from "discourse/lib/ajax-error";
-import { readOnly } from "@ember/object/computed";
 import { underscore } from "@ember/string";
 
 export default Controller.extend({
@@ -15,11 +15,12 @@ export default Controller.extend({
   saving: false,
   deleting: false,
   panels: null,
-  hiddenTooltip: true,
+  showTooltip: false,
   createdCategory: false,
   expandedMenu: false,
   mobileView: readOnly("site.mobileView"),
   parentParams: null,
+  showDeleteReason: and("showTooltip", "model.cannot_delete_reason"),
 
   @on("init")
   _initPanels() {
@@ -143,7 +144,7 @@ export default Controller.extend({
     },
 
     toggleDeleteTooltip() {
-      this.toggleProperty("hiddenTooltip");
+      this.toggleProperty("showTooltip");
     },
 
     goBack() {

app/assets/javascripts/discourse/app/routes/edit-category-tabs.js

@@ -13,6 +13,7 @@ export default DiscourseRoute.extend({
     controller.setProperties({
       parentParams,
       selectedTab: transition.to.params.tab,
+      showTooltip: false,
     });
   },
 });

app/assets/javascripts/discourse/app/templates/edit-category-tabs.hbs

@@ -34,6 +34,12 @@
     {{/each}}
   </div>
 
+  {{#if showDeleteReason}}
+    <div class="edit-category-delete-warning">
+      <p class="warning">{{html-safe model.cannot_delete_reason}}</p>
+    </div>
+  {{/if}}
+
   <div class="edit-category-footer">
     {{d-button id="save-category" class="btn-primary" disabled=disabled action=(action "saveCategory") label=saveLabel}}
 
@@ -54,10 +60,6 @@
           icon="question-circle"
           label="category.delete"
         }}
-
-        <div class="cannot-delete-reason {{if hiddenTooltip "hidden" ""}}">
-          {{html-safe model.cannot_delete_reason}}
-        </div>
       </div>
     {{/if}}
   </div>

app/assets/stylesheets/common/base/edit-category.scss

@@ -7,7 +7,7 @@ div.edit-category {
   grid-template-rows: auto auto auto;
   grid-row-gap: 1em;
   grid-column-gap: 1.5em;
-  grid-template-areas: "header header" "sidebar content" "sidebar footer";
+  grid-template-areas: "header header" "sidebar content" "sidebar warning" "sidebar footer";
 
   .edit-category-title {
     grid-area: header;
@@ -141,37 +141,16 @@ div.edit-category {
     }
   }
 
+  .edit-category-delete-warning {
+    grid-area: warning;
+  }
+
   .edit-category-footer {
     grid-area: footer;
     display: flex;
     justify-content: space-between;
     align-self: start;
     padding: 0 1.5em 2em 0;
-
-    .disable-info {
-      position: relative;
-      .cannot-delete-reason {
-        position: absolute;
-        bottom: 125%;
-        right: 0px;
-        width: 250px;
-        background: var(--primary);
-        color: var(--secondary);
-        text-align: center;
-        border-radius: 2px;
-        padding: 12px 8px;
-
-        &::after {
-          top: 100%;
-          left: 57%;
-          border: solid transparent;
-          content: " ";
-          position: absolute;
-          border-top-color: var(--primary);
-          border-width: 8px;
-        }
-      }
-    }
   }
 }