Merge branch 'master' into hotbar-inner-drag-n-drop

src/common/__tests__/kube-helpers.test.ts

@@ -1,5 +1,5 @@
 import { KubeConfig } from "@kubernetes/client-node";
-import { validateKubeConfig, loadConfig } from "../kube-helpers";
+import { validateKubeConfig, loadConfig, getNodeWarningConditions } from "../kube-helpers";
 
 const kubeconfig = `
 apiVersion: v1
@@ -251,4 +251,43 @@ describe("kube helpers", () => {
       });
     });
   });
+
+  describe("getNodeWarningConditions", () => {
+    it("should return an empty array if no status or no conditions", () => {
+      expect(getNodeWarningConditions({}).length).toBe(0);
+    });
+
+    it("should return an empty array if all conditions are good", () => {
+      expect(getNodeWarningConditions({
+        status: {
+          conditions: [
+            {
+              type: "Ready",
+              status: "foobar"
+            }
+          ]
+        }
+      }).length).toBe(0);
+    });
+
+    it("should all not ready conditions", () => {
+      const conds = getNodeWarningConditions({
+        status: {
+          conditions: [
+            {
+              type: "Ready",
+              status: "foobar"
+            },
+            {
+              type: "NotReady",
+              status: "true"
+            },
+          ]
+        }
+      });
+
+      expect(conds.length).toBe(1);
+      expect(conds[0].type).toBe("NotReady");
+    });
+  });
 });

src/common/hotbar-store.ts

@@ -158,18 +158,6 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     hotbar.items[index] = null;
   }
 
-  addEmptyCell() {
-    const hotbar = this.getActive();
-
-    hotbar.items.push(null);
-  }
-
-  removeEmptyCell(index: number) {
-    const hotbar = this.getActive();
-
-    hotbar.items.splice(index, 1);
-  }
-
   switchToPrevious() {
     const hotbarStore = HotbarStore.getInstance();
     let index = hotbarStore.activeHotbarIndex - 1;

src/common/kube-helpers.ts

@@ -174,9 +174,9 @@ export function podHasIssues(pod: V1Pod) {
 }
 
 export function getNodeWarningConditions(node: V1Node) {
-  return node.status.conditions.filter(c =>
+  return node.status?.conditions?.filter(c =>
     c.status.toLowerCase() === "true" && c.type !== "Ready" && c.type !== "HostUpgrades"
-  );
+  ) ?? [];
 }
 
 /**

src/renderer/components/hotbar/hotbar-icon.scss

@@ -48,7 +48,7 @@
       margin: -8px;
       font-size: var(--font-size-small);
       background: var(--clusterMenuBackground);
-      color: white;
+      color: var(--textColorAccent);
       padding: 0px;
       border-radius: 50%;
       border: 2px solid var(--clusterMenuBackground);

src/renderer/components/hotbar/hotbar-icon.tsx

@@ -116,7 +116,7 @@ export class HotbarIcon extends React.Component<Props> {
 
   generateAvatarStyle(entity: CatalogEntity): React.CSSProperties {
     return {
-      "backgroundColor": randomColor({ seed: entity.metadata.name, luminosity: "dark" })
+      "backgroundColor": randomColor({ seed: `${entity.metadata.name}-${entity.metadata.source}`, luminosity: "dark" })
     };
   }
 
@@ -138,7 +138,7 @@ export class HotbarIcon extends React.Component<Props> {
 
     return (
       <div className={className}>
-        <Tooltip targetId={entityIconId}>{entity.metadata.name}</Tooltip>
+        <Tooltip targetId={entityIconId}>{entity.metadata.name} ({entity.metadata.source || "local"})</Tooltip>
         <Avatar
           {...elemProps}
           id={entityIconId}

src/renderer/components/hotbar/hotbar-menu.scss

@@ -12,12 +12,6 @@
     height: 4px; // extra spacing for mac-os "traffic-light" buttons
   }
 
-  &:hover {
-    .AddCellButton {
-      opacity: 1;
-    }
-  }
-
   .HotbarItems {
     --cellWidth: 40px;
     --cellHeight: 40px;
@@ -53,79 +47,23 @@
       transform: translateZ(0); // Remove flickering artifacts
 
       &:hover {
-        .cellDeleteButton {
+        &:not(:empty) {
-          opacity: 1;
-          transition: opacity 0.1s 0.2s;
-        }
-
-        &:not(.empty) {
           box-shadow: 0 0 0px 3px #ffffff1a;
         }
       }
 
       &.animating {
-        &.empty {
+        &:empty {
           animation: shake .6s cubic-bezier(.36,.07,.19,.97) both;
           transform: translate3d(0, 0, 0);
           backface-visibility: hidden;
           perspective: 1000px;
         }
 
-        &:not(.empty) {
+        &:not(:empty) {
           animation: outline 0.8s cubic-bezier(0.19, 1, 0.22, 1);
         }
       }
-
-      .cellDeleteButton {
-        width: 2rem;
-        height: 2rem;
-        border-radius: 50%;
-        background-color: var(--textColorDimmed);
-        position: absolute;
-        top: -7px;
-        right: -7px;
-        color: var(--secondaryBackground);
-        opacity: 0;
-        border: 3px solid var(--clusterMenuBackground);
-        box-sizing: border-box;
-
-        &:hover {
-          background-color: white;
-          transition: all 0.2s;
-        }
-
-        .Icon {
-          --smallest-size: 12px;
-          font-weight: bold;
-          position: relative;
-          top: -2px;
-          left: .5px;
-        }
-      }
-    }
-  }
-
-  .AddCellButton {
-    width: 40px;
-    height: 40px;
-    min-height: 40px;
-    margin: 12px auto 8px;
-    background-color: transparent;
-    color: var(--textColorDimmed);
-    border-radius: 6px;
-    transition: all 0.2s;
-    cursor: pointer;
-    z-index: 1;
-    opacity: 0;
-    transition: all 0.2s;
-
-    &:hover {
-      background-color: var(--sidebarBackground);
-    }
-
-    .Icon {
-      --size: 24px;
-      margin-left: 2px;
     }
   }
 }

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -6,9 +6,8 @@ import { observer } from "mobx-react";
 import { HotbarIcon } from "./hotbar-icon";
 import { cssNames, IClassName } from "../../utils";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
-import { defaultHotbarCells, HotbarItem, HotbarStore } from "../../../common/hotbar-store";
+import { HotbarItem, HotbarStore } from "../../../common/hotbar-store";
 import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity";
-import { Icon } from "../icon";
 import { DragDropContext, Draggable, DraggableProvided, Droppable, DroppableProvided, DropResult } from "react-beautiful-dnd";
 import { HotbarSelector } from "./hotbar-selector";
 
@@ -79,14 +78,6 @@ export class HotbarMenu extends React.Component<Props> {
     });
   }
 
-  renderAddCellButton() {
-    return (
-      <button className="AddCellButton" onClick={() => HotbarStore.getInstance().addEmptyCell()}>
-        <Icon material="add"/>
-      </button>
-    );
-  }
-
   render() {
     const { className } = this.props;
     const hotbarStore = HotbarStore.getInstance();
@@ -98,7 +89,6 @@ export class HotbarMenu extends React.Component<Props> {
           <DragDropContext onDragEnd={this.onDragEnd}>
             {this.renderGrid()}
           </DragDropContext>
-          {this.hotbar.items.length != defaultHotbarCells && this.renderAddCellButton()}
         </div>
         <HotbarSelector hotbar={hotbar}/>
       </div>
@@ -116,23 +106,14 @@ function HotbarCell(props: HotbarCellProps) {
   const [animating, setAnimating] = useState(false);
   const onAnimationEnd = () => { setAnimating(false); };
   const onClick = () => { setAnimating(true); };
-  const onDeleteClick = (evt: Event | React.SyntheticEvent) => {
-    evt.stopPropagation();
-    HotbarStore.getInstance().removeEmptyCell(props.index);
-  };
 
   return (
     <div
-      className={cssNames("HotbarCell", { animating, empty: !props.children })}
+      className={cssNames("HotbarCell", { animating })}
       onAnimationEnd={onAnimationEnd}
       onClick={onClick}
     >
       {props.children}
-      {!props.children && (
-        <div className="cellDeleteButton" onClick={onDeleteClick}>
-          <Icon material="close" smallest/>
-        </div>
-      )}
     </div>
   );
 }