From 828f7e70834bd9417a448d2e9d8a604094de9cde Mon Sep 17 00:00:00 2001
From: Alan Quach <aquach@netflix.com>
Date: Mon, 21 Oct 2019 21:19:31 -0700
Subject: [PATCH] fix(awslb): Preventing edits against orphaned load balancers
 (#7547)

---
 .../details/LoadBalancerActions.tsx           | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/app/scripts/modules/amazon/src/loadBalancer/details/LoadBalancerActions.tsx b/app/scripts/modules/amazon/src/loadBalancer/details/LoadBalancerActions.tsx
index 8b48156a328..02fc9a5ad44 100644
--- a/app/scripts/modules/amazon/src/loadBalancer/details/LoadBalancerActions.tsx
+++ b/app/scripts/modules/amazon/src/loadBalancer/details/LoadBalancerActions.tsx
@@ -46,8 +46,10 @@ export class LoadBalancerActions extends React.Component<ILoadBalancerActionsPro
           this.setState({ application: loadBalancerApp });
         })
         .catch(() => {
-          // If the application can't be found, just use the old one
-          this.setState({ application: this.props.app });
+          // We should not "just use the current app" in place of the (missing) app
+          // that the load balancer actually belongs.
+          // Instead, the user should be forced to create the application of the orphaned load balancer.
+          // Otherwise, there will be unexpected behavior.
         });
     }
 
@@ -107,6 +109,8 @@ export class LoadBalancerActions extends React.Component<ILoadBalancerActionsPro
     const { AddEntityTagLinks } = NgReact;
 
     const { loadBalancerType, instances, instanceCounts } = loadBalancer;
+    const loadBalancerAppName = loadBalancer.name.split('-')[0];
+
     const clbInstances =
       loadBalancerType === 'classic' && values(instanceCounts).filter((v: number | undefined) => v).length;
     const allowDeletion = !clbInstances && !instances.length;
@@ -118,11 +122,23 @@ export class LoadBalancerActions extends React.Component<ILoadBalancerActionsPro
             <span>Load Balancer Actions</span>
           </Dropdown.Toggle>
           <Dropdown.Menu className="dropdown-menu">
-            <li className={!application ? 'disabled' : ''}>
-              <a className="clickable" onClick={this.editLoadBalancer}>
-                Edit Load Balancer
-              </a>
-            </li>
+            {application && (
+              <li>
+                <a className="clickable" onClick={this.editLoadBalancer}>
+                  Edit Load Balancer
+                </a>
+              </li>
+            )}
+            {!application && (
+              <li className="disabled">
+                <a className="clickable" onClick={this.editLoadBalancer}>
+                  Edit Load Balancer{' '}
+                  <HelpField
+                    content={`The application <b>${loadBalancerAppName}</b> must be configured before this load balancer can be edited.`}
+                  />
+                </a>
+              </li>
+            )}
             {allowDeletion && (
               <li>
                 <a className="clickable" onClick={this.deleteLoadBalancer}>