Add icon and status for tf plans that are waiting for user action

ui/components/Icon.tsx

@@ -97,6 +97,7 @@ export enum IconType {
   TemplatesIcon,
   ClustersIcon,
   ExploreIcon,
+  PendingActionIcon,
 }
 
 type Props = {
@@ -179,6 +180,9 @@ function getIcon(i: IconType) {
     case IconType.ReconcileIcon:
       return () => <img src={images.reconcileSrc} />;
 
+    case IconType.PendingActionIcon:
+      return () => <img src={images.pendingAction} />;
+
     case IconType.ArrowDropDownIcon:
       return ArrowDropDownIcon;
 

ui/components/KubeStatusIndicator.tsx

@@ -18,6 +18,7 @@ export enum ReadyType {
   Ready = "Ready",
   NotReady = "Not Ready",
   Reconciling = "Reconciling",
+  PendingAction = "PendingAction",
   Suspended = "Suspended",
   None = "None",
 }
@@ -40,11 +41,10 @@ export function computeReady(conditions: Condition[]): ReadyType {
       return ReadyType.Ready;
     }
 
-    if (
-      readyCondition.status === ReadyStatusValue.Unknown &&
-      readyCondition.reason === "Progressing"
-    ) {
-      return ReadyType.Reconciling;
+    if (readyCondition.status === ReadyStatusValue.Unknown) {
+      if (readyCondition.reason === "Progressing") return ReadyType.Reconciling;
+      if (readyCondition.reason === "TerraformPlannedWithChanges")
+        return ReadyType.PendingAction;
     }
 
     if (readyCondition.status === ReadyStatusValue.None) return ReadyType.None;
@@ -107,6 +107,12 @@ export const getIndicatorInfo = (
       icon: IconType.ReconcileIcon,
       color: "primary",
     };
+  if (ready === ReadyType.PendingAction)
+    return {
+      type: ReadyType.PendingAction,
+      icon: IconType.PendingActionIcon,
+      color: "feedbackOriginal",
+    };
   if (ready === ReadyType.Ready)
     return {
       type: ReadyType.Ready,

ui/lib/images.ts

@@ -1,15 +1,16 @@
 /* eslint-disable */
 // @ts-nocheck
 
+import signInWheel from "data-url:../images/SignInWheel.svg";
+import weaveLogo from "data-url:../images/WeaveLogo.svg";
 import bg from "data-url:../images/bg-circles.png";
 import failedSrc from "data-url:../images/failed.svg";
 import logotype from "data-url:../images/logotype.svg";
+import pendingAction from "data-url:../images/pending-action.svg";
 import reconcileSrc from "data-url:../images/reconcile.svg";
-import signInWheel from "data-url:../images/SignInWheel.svg";
 import successSrc from "data-url:../images/success.svg";
 import suspendedSrc from "data-url:../images/suspended.svg";
 import weaveG from "data-url:../images/weaveG.svg";
-import weaveLogo from "data-url:../images/WeaveLogo.svg";
 
 export default {
   bg,
@@ -21,4 +22,5 @@ export default {
   suspendedSrc,
   weaveLogo,
   reconcileSrc,
+  pendingAction,
 };