LinkTo Transition Bug (#16983)

* removes on click modifier from LinkTo elements

* adds changelog

* reverts button changes and closes dropdown in next tick of runloop

* removes comment

changelog/16983.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fixes secret version and status menu links transitioning to auth screen
+```

ui/app/components/secret-version-menu.js

@@ -1,5 +1,17 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { next } from '@ember/runloop';
 
 export default class SecretVersionMenu extends Component {
+  @service router;
+
   onRefresh() {}
+
+  @action
+  closeDropdown(dropdown) {
+    // strange issue where closing dropdown triggers full transition which redirects to auth screen in production builds
+    // closing dropdown in next tick of run loop fixes it
+    next(() => dropdown.actions.close());
+  }
 }

ui/app/components/status-menu.js

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { next } from '@ember/runloop';
 
 /**
  * @module StatusMenu
@@ -21,6 +22,7 @@ export default class StatusMenu extends Component {
   @service currentCluster;
   @service auth;
   @service media;
+  @service router;
 
   get type() {
     return this.args.type || 'cluster';
@@ -31,8 +33,12 @@ export default class StatusMenu extends Component {
   }
 
   @action
-  handleClick(d) {
-    this.args.onLinkClick;
-    d.actions.close();
+  onLinkClick(dropdown) {
+    if (dropdown) {
+      // strange issue where closing dropdown triggers full transition which redirects to auth screen in production builds
+      // closing dropdown in next tick of run loop fixes it
+      next(() => dropdown.actions.close());
+    }
+    this.args.onLinkClick();
   }
 }

ui/app/styles/core/generic.scss

@@ -45,6 +45,11 @@ input::-webkit-inner-spin-button {
   -moz-user-select: text; /* Firefox all */
   -ms-user-select: text; /* IE 10+ */
   user-select: text;
+
+  &[disabled] {
+    opacity: 0.5;
+    cursor: default;
+  }
 }
 
 .link-plain {

ui/app/styles/core/navbar.scss

@@ -146,7 +146,7 @@
     z-index: 201;
   }
 
-  &.active {
+  &.is-active {
     @include until($mobile) {
       box-shadow: 5px 0 10px rgba($black, 0.36);
       transform: translateX(0);

ui/app/templates/components/secret-link.hbs

@@ -1,10 +1,3 @@
-<LinkTo
-  @route={{this.link.route}}
-  @models={{this.link.models}}
-  @query={{this.query}}
-  @disabled={{@disabled}}
-  {{on "click" this.onLinkClick}}
-  ...attributes
->
+<LinkTo @route={{this.link.route}} @models={{this.link.models}} @query={{this.query}} @disabled={{@disabled}} ...attributes>
   {{yield}}
 </LinkTo>

ui/app/templates/components/secret-version-menu.hbs

@@ -16,8 +16,7 @@
         {{/if}}
         {{#each (reverse @model.versions) as |secretVersion|}}
           <li class="action">
-            {{! invokeAction is provided by ember-link-action addon -- should consider removing in favor of on modifier }}
-            <LinkTo class="link" @query={{hash version=secretVersion.version}} {{on "click" D.actions.close}}>
+            <LinkTo class="link" @query={{hash version=secretVersion.version}} {{on "click" (fn this.closeDropdown D)}}>
               Version
               {{secretVersion.version}}
               {{#if
@@ -40,7 +39,6 @@
             @mode="versions"
             @secret={{@model.id}}
             class="has-text-black has-text-weight-semibold has-bottom-shadow"
-            @onLinkClick={{D.actions.close}}
           >
             View version history
           </SecretLink>

ui/app/templates/components/status-menu.hbs

@@ -14,10 +14,10 @@
   <d.Content @defaultClass={{concat "status-menu-content status-menu-content-" this.type}}>
     {{#if (eq this.type "user")}}
       {{#if (and this.currentCluster.cluster.name this.auth.currentToken)}}
-        <AuthInfo @activeClusterName={{this.currentCluster.cluster.name}} @onLinkClick={{@onLinkClick}} />
+        <AuthInfo @activeClusterName={{this.currentCluster.cluster.name}} @onLinkClick={{fn this.onLinkClick null}} />
       {{/if}}
     {{else}}
-      <ClusterInfo @cluster={{this.currentCluster.cluster}} @onLinkClick={{fn this.handleClick d}} />
+      <ClusterInfo @cluster={{this.currentCluster.cluster}} @onLinkClick={{fn this.onLinkClick d}} />
     {{/if}}
   </d.Content>
 </BasicDropdown>

ui/package.json

@@ -113,7 +113,6 @@
     "ember-export-application-global": "^2.0.1",
     "ember-fetch": "^8.1.1",
     "ember-inflector": "4.0.2",
-    "ember-link-action": "^1.0.0",
     "ember-load-initializers": "^2.1.2",
     "ember-maybe-in-element": "^2.0.3",
     "ember-modal-dialog": "4.0.0",

ui/scripts/codemods/linkto-with-on-modifier.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+/* eslint-env node */
+
+// print to console all files that include LinkTo elements using the {{on modifier}}
+module.exports = (env) => {
+  let fileAlerted;
+  return {
+    ElementNode(node) {
+      if (node.tag === 'LinkTo') {
+        if (!fileAlerted) {
+          const usesModifier = node.modifiers.find((modifier) => modifier.path.original === 'on');
+          if (usesModifier) {
+            console.log(env.filePath); // eslint-disable-line
+            fileAlerted = true;
+          }
+        }
+      }
+    },
+  };
+};

ui/yarn.lock

@@ -9081,13 +9081,6 @@ ember-inflector@4.0.2, "ember-inflector@^2.0.0 || ^3.0.0 || ^4.0.2", ember-infle
   dependencies:
     ember-cli-babel "^7.26.5"
 
-ember-link-action@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/ember-link-action/-/ember-link-action-1.0.0.tgz#54894ec3debe3fdd9db96786f96c19b00ddbbd28"
-  integrity sha512-S6ZiD+P4sb+NqNqbx2iAbNMjmcibdaXL9Fu0Gp/RmMJUBgk/9ejYbCzPaJbUD7QrkQkwVLYaBdDulmdEwXhTSA==
-  dependencies:
-    ember-cli-babel "^7.7.3"
-
 ember-load-initializers@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ember-load-initializers/-/ember-load-initializers-2.1.2.tgz#8a47a656c1f64f9b10cecdb4e22a9d52ad9c7efa"