Restructure to monorepo (#6907)

* wip: restructure to monorepo Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * refactor create-release-pr to a package Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * build fixes Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * github workflow fixes Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix typo Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * add webpack-env types to core Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix github workflows Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * refactor/fix integration tests Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * lint fix Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * yarn run dev Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * eslint settings for vscode Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * move templates to right package Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * open-lens build fixes Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * integration test fix Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix nx task dependencies Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * use bash shell for unit tests in test workflow Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix test:unit for windows Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix win-ca webpack error in open-lens Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix win-ca webpack error in open-lens Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix build:app on windows Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * remove ELECTRON_BUILDER_EXTRA_ARGS Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * sync src/ from master Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * remove Makefile from core Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
2025-05-20 05:10:56 +00:00 · 2023-01-24 10:46:26 -08:00
1 parent 0066ca4ea2
commit 2657df2293
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+export * from "./notifications";
+export * from "./notifications.store";
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import { Notifications } from "./notifications";
+import { clusterFrameChildComponentInjectionToken } from "../../frames/cluster-frame/cluster-frame-child-component-injection-token";
+
+const notificationsClusterFrameChildComponentInjectable = getInjectable({
+  id: "notifications-cluster-frame-child-component",
+
+  instantiate: () => ({
+    id: "notifications",
+    shouldRender: computed(() => true),
+    Component: Notifications,
+  }),
+
+  injectionToken: clusterFrameChildComponentInjectionToken,
+});
+
+export default notificationsClusterFrameChildComponentInjectable;
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { rootFrameChildComponentInjectionToken } from "../../frames/root-frame/root-frame-child-component-injection-token";
+import { computed } from "mobx";
+import { Notifications } from "./notifications";
+
+const notificationsRootFrameChildComponentInjectable = getInjectable({
+  id: "notifications-root-frame-child-component",
+
+  instantiate: () => ({
+    id: "notifications",
+    shouldRender: computed(() => true),
+    Component: Notifications,
+  }),
+
+  injectionToken: rootFrameChildComponentInjectionToken,
+});
+
+export default notificationsRootFrameChildComponentInjectable;
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { NotificationsStore } from "./notifications.store";
+
+const notificationsStoreInjectable = getInjectable({
+  id: "notifications-store",
+  instantiate: () => new NotificationsStore(),
+});
+
+export default notificationsStoreInjectable;
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.Notifications {
+  @include hidden-scrollbar;
+
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: $padding * 2;
+  max-height: 100vh;
+  z-index: 100000;
+  height: min-content!important;
+
+  &:empty {
+    display: none;
+  }
+
+  .notification {
+    flex: 0 0;
+    padding: $padding * 1.5;
+    border-radius: 3px;
+    min-width: 350px;
+    max-width: 35vw;
+    word-break: break-word;
+
+    &:not(:last-child) {
+      margin-bottom: $margin * 2;
+    }
+
+    > .message {
+      white-space: pre-line;
+      padding-left: $padding;
+      padding-right: $padding * 2;
+      align-self: center;
+
+      a {
+        color: inherit;
+      }
+    }
+
+    @each $status, $color in (ok: var(--colorOk), error: var(--colorError), info: var(--colorInfo)) {
+      &.#{$status} {
+        background: $color;
+        color: $color-white;
+        box-shadow: 0 0 20px var(--boxShadow);
+      }
+    }
+  }
+}
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type React from "react";
+import { action, observable, makeObservable } from "mobx";
+import { autoBind } from "../../utils";
+import uniqueId from "lodash/uniqueId";
+import type { JsonApiErrorParsed } from "../../../common/k8s-api/json-api";
+import type { SetRequired } from "type-fest";
+
+export type NotificationId = string | number;
+export type NotificationMessage = string | React.ReactElement | React.ReactElement[] | JsonApiErrorParsed | Error;
+
+export enum NotificationStatus {
+  OK = "ok",
+  ERROR = "error",
+  INFO = "info",
+}
+
+export interface CreateNotificationOptions {
+  id?: NotificationId;
+  timeout?: number;
+  onClose?(): void;
+}
+
+export interface Notification {
+  id?: NotificationId;
+  message: NotificationMessage;
+  status?: NotificationStatus;
+  timeout?: number; // auto-hiding timeout in milliseconds, 0 = no hide
+  onClose?(): void; // additional logic on when the notification times out or is closed by the "x"
+}
+
+export class NotificationsStore {
+  public notifications = observable.array<SetRequired<Notification, "id">>([], { deep: false });
+
+  protected autoHideTimers = new Map<NotificationId, number>();
+
+  constructor() {
+    makeObservable(this);
+    autoBind(this);
+  }
+
+  getById(id: NotificationId) {
+    return this.notifications.find(item => item.id === id);
+  }
+
+  addAutoHideTimer(id: NotificationId) {
+    const notification = this.getById(id);
+
+    if (!notification) return;
+    this.removeAutoHideTimer(id);
+
+    if (notification?.timeout) {
+      const timer = window.setTimeout(() => this.remove(id), notification.timeout);
+
+      this.autoHideTimers.set(id, timer);
+    }
+  }
+
+  removeAutoHideTimer(id: NotificationId) {
+    if (this.autoHideTimers.has(id)) {
+      clearTimeout(this.autoHideTimers.get(id));
+      this.autoHideTimers.delete(id);
+    }
+  }
+
+  @action
+  add(rawNotification: Notification): () => void {
+    const notification = {
+      id: uniqueId("notification_"),
+      ...rawNotification,
+    };
+    const id = notification.id;
+    const index = this.notifications.findIndex(item => item.id === id);
+
+    if (index > -1) {
+      this.notifications.splice(index, 1, notification); // update existing with same id
+    } else {
+      this.notifications.push(notification); // add new
+    }
+    this.addAutoHideTimer(id);
+
+    return () => this.remove(id);
+  }
+
+  @action
+  remove(id: NotificationId) {
+    this.removeAutoHideTimer(id);
+
+    const notification = this.getById(id);
+
+    if (notification) {
+      this.notifications.remove(notification);
+    }
+  }
+}
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./notifications.scss";
+
+import React from "react";
+import { reaction } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { JsonApiErrorParsed } from "../../../common/k8s-api/json-api";
+import type { Disposer } from "../../utils";
+import { cssNames, prevDefault } from "../../utils";
+import type { CreateNotificationOptions, Notification, NotificationMessage, NotificationsStore } from "./notifications.store";
+import { Animate } from "../animate";
+import { Icon } from "../icon";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import notificationsStoreInjectable from "./notifications-store.injectable";
+
+export type ShowNotification = (message: NotificationMessage, opts?: CreateNotificationOptions) => Disposer;
+
+interface Dependencies {
+  store: NotificationsStore;
+}
+
+@observer
+class NonInjectedNotifications extends React.Component<Dependencies> {
+  public elem: HTMLDivElement | null = null;
+
+  componentDidMount() {
+    disposeOnUnmount(this, [
+      reaction(() => this.props.store.notifications.length, () => {
+        this.scrollToLastNotification();
+      }, { delay: 250 }),
+    ]);
+  }
+
+  scrollToLastNotification() {
+    if (!this.elem) {
+      return;
+    }
+    this.elem.scrollTo?.({
+      top: this.elem.scrollHeight,
+      behavior: "smooth",
+    });
+  }
+
+  getMessage(notification: Notification) {
+    let { message } = notification;
+
+    if (message instanceof JsonApiErrorParsed || message instanceof Error) {
+      message = message.toString();
+    }
+
+    return React.Children.toArray(message);
+  }
+
+  render() {
+    const { notifications, remove, addAutoHideTimer, removeAutoHideTimer } = this.props.store;
+
+    return (
+      <div className="Notifications flex column align-flex-end" ref={e => this.elem = e}>
+        {notifications.map(notification => {
+          const { id, status, onClose } = notification;
+          const msgText = this.getMessage(notification);
+
+          return (
+            <Animate key={id}>
+              <div
+                className={cssNames("notification flex", status)}
+                onMouseLeave={() => addAutoHideTimer(id)}
+                onMouseEnter={() => removeAutoHideTimer(id)}
+              >
+                <div className="box">
+                  <Icon material="info_outline" />
+                </div>
+                <div className="message box grow">{msgText}</div>
+                <div className="box">
+                  <Icon
+                    material="close"
+                    className="close"
+                    data-testid={`close-notification-for-${id}`}
+                    onClick={prevDefault(() => {
+                      remove(id);
+                      onClose?.();
+                    })}
+                  />
+                </div>
+              </div>
+            </Animate>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+export const Notifications = withInjectables<Dependencies>(NonInjectedNotifications, {
+  getProps: (di) => ({
+    store: di.inject(notificationsStoreInjectable),
+  }),
+});
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { JsonApiErrorParsed } from "../../../common/k8s-api/json-api";
+import loggerInjectable from "../../../common/logger.injectable";
+import type { Disposer } from "../../utils";
+import type { CreateNotificationOptions } from "./notifications.store";
+import showErrorNotificationInjectable from "./show-error-notification.injectable";
+
+export type ShowCheckedErrorNotification = (message: unknown, fallback: string, opts?: CreateNotificationOptions) => Disposer;
+
+const showCheckedErrorNotificationInjectable = getInjectable({
+  id: "show-checked-error-notififcation",
+  instantiate: (di): ShowCheckedErrorNotification => {
+    const showErrorNotification = di.inject(showErrorNotificationInjectable);
+    const logger = di.inject(loggerInjectable);
+
+    return (message, fallback, opts) => {
+      if (typeof message === "string" || message instanceof Error || message instanceof JsonApiErrorParsed) {
+        return showErrorNotification(message, opts);
+      }
+
+      logger.warn("[NOTIFICATIONS]: Unknown notification error message, falling back to default", message);
+
+      return showErrorNotification(fallback, opts);
+    };
+  },
+});
+
+export default showCheckedErrorNotificationInjectable;
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import type { ShowNotification } from "./notifications";
+import { NotificationStatus } from "./notifications.store";
+import notificationsStoreInjectable from "./notifications-store.injectable";
+
+const showErrorNotificationInjectable = getInjectable({
+  id: "show-error-notification",
+
+  instantiate: (di): ShowNotification => {
+    const notificationsStore = di.inject(notificationsStoreInjectable);
+
+    return (message, customOpts = {}) =>
+      notificationsStore.add({
+        status: NotificationStatus.ERROR,
+        timeout: 5000,
+        message,
+        ...customOpts,
+      });
+  },
+});
+
+export default showErrorNotificationInjectable;
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import type { ShowNotification } from "./notifications";
+import { NotificationStatus } from "./notifications.store";
+import notificationsStoreInjectable from "./notifications-store.injectable";
+
+const showInfoNotificationInjectable = getInjectable({
+  id: "show-info-notification",
+
+  instantiate: (di): ShowNotification => {
+    const notificationsStore = di.inject(notificationsStoreInjectable);
+
+    return (message, customOpts = {}) =>
+      notificationsStore.add({
+        status: NotificationStatus.INFO,
+        timeout: 5000,
+        message,
+        ...customOpts,
+      });
+  },
+});
+
+export default showInfoNotificationInjectable;
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getInjectable } from "@ogre-tools/injectable";
+import type { ShowNotification } from "./notifications";
+import showInfoNotificationInjectable from "./show-info-notification.injectable";
+
+const showShortInfoNotificationInjectable = getInjectable({
+  id: "show-short-info-notification",
+  instantiate: (di): ShowNotification => {
+    const showInfoNotification = di.inject(showInfoNotificationInjectable);
+
+    return (message, customOpts = {}) => {
+      return showInfoNotification(message, {
+        timeout: 5_000,
+        ...customOpts,
+      });
+    };
+  },
+});
+
+export default showShortInfoNotificationInjectable;
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import type { ShowNotification } from "./notifications";
+import { NotificationStatus } from "./notifications.store";
+import notificationsStoreInjectable from "./notifications-store.injectable";
+
+const showSuccessNotificationInjectable = getInjectable({
+  id: "show-success-notification",
+
+  instantiate: (di): ShowNotification => {
+    const notificationsStore = di.inject(notificationsStoreInjectable);
+
+    return (message, customOpts = {}) =>
+      notificationsStore.add({
+        status: NotificationStatus.OK,
+        timeout: 5000,
+        message,
+        ...customOpts,
+      });
+  },
+});
+
+export default showSuccessNotificationInjectable;