chore: extract button from core for error-boundary

Signed-off-by: Gabriel <gaccettola@mirantis.com>

packages/core/package.json

@@ -323,6 +323,7 @@
     "@k8slens/startable-stoppable": "^1.0.0-alpha.1",
     "@k8slens/test-utils": "^1.0.0-alpha.1",
     "@k8slens/tooltip": "^1.0.0-alpha.0",
+    "@k8slens/button": "^1.0.0-alpha.0",
     "@k8slens/utilities": "^1.0.0-alpha.1",
     "@ogre-tools/fp": "^15.3.1",
     "@ogre-tools/injectable": "^15.3.1",

packages/core/src/extensions/renderer-api/components.ts

@@ -36,7 +36,6 @@ export * from "../../renderer/components/layout/wizard-layout";
 export * from "../../renderer/components/layout/tab-layout";
 
 // form-controls
-export * from "../../renderer/components/button";
 export * from "../../renderer/components/checkbox";
 export * from "../../renderer/components/radio";
 export * from "../../renderer/components/select";

packages/core/src/features/application-update/child-features/force-update/renderer/force-update-modal/force-update-modal.tsx

@@ -10,7 +10,7 @@ import type { IComputedValue } from "mobx";
 import { observer } from "mobx-react";
 import installUpdateCountdownInjectable from "./install-update-countdown.injectable";
 import { Dialog } from "../../../../../../renderer/components/dialog";
-import { Button } from "../../../../../../renderer/components/button";
+import { Button } from "@k8slens/button";
 import styles from "./force-update-modal.module.scss";
 
 interface Dependencies {

packages/core/src/features/helm-charts/child-features/preferences/renderer/adding-of-custom-helm-repository/adding-of-custom-helm-repository-dialog-content.tsx

@@ -17,7 +17,7 @@ import type { IObservableValue } from "mobx";
 import { action } from "mobx";
 import submitCustomHelmRepositoryInjectable from "./submit-custom-helm-repository.injectable";
 import hideDialogForAddingCustomHelmRepositoryInjectable from "./dialog-visibility/hide-dialog-for-adding-custom-helm-repository.injectable";
-import { Button } from "../../../../../../renderer/components/button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../../../../../../renderer/components/icon";
 import maximalCustomHelmRepoOptionsAreShownInjectable from "./maximal-custom-helm-repo-options-are-shown.injectable";
 import { SubTitle } from "../../../../../../renderer/components/layout/sub-title";

packages/core/src/features/helm-charts/child-features/preferences/renderer/adding-of-custom-helm-repository/adding-of-custom-helm-repository-open-button.tsx

@@ -4,7 +4,7 @@
  */
 import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
-import { Button } from "../../../../../../renderer/components/button";
+import { Button } from "@k8slens/button";
 import showDialogForAddingCustomHelmRepositoryInjectable from "./dialog-visibility/show-dialog-for-adding-custom-helm-repository.injectable";
 
 interface Dependencies {

packages/core/src/renderer/components/+add-cluster/add-cluster.tsx

@@ -15,7 +15,7 @@ import * as uuid from "uuid";
 import { loadConfigFromString, splitConfig } from "../../../common/kube-helpers";
 import { docsUrl } from "../../../common/vars";
 import { isDefined, iter } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { ShowNotification } from "../notifications";
 import { SettingLayout } from "../layout/setting-layout";
 import { MonacoEditor } from "../monaco-editor";

packages/core/src/renderer/components/+config-maps/config-map-details.tsx

@@ -10,7 +10,7 @@ import { autorun, makeObservable, observable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerTitle } from "../drawer";
 import type { ShowNotification } from "../notifications";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { ConfigMap } from "../../../common/k8s-api/endpoints";
 import type { Logger } from "../../../common/logger";

packages/core/src/renderer/components/+config-resource-quotas/add-dialog/view.tsx

@@ -17,7 +17,7 @@ import { systemName } from "../../input/input_validators";
 import type { IResourceQuotaValues, ResourceQuotaApi } from "../../../../common/k8s-api/endpoints";
 import { Select } from "../../select";
 import { Icon } from "../../icon";
-import { Button } from "../../button";
+import { Button } from "@k8slens/button";
 import { NamespaceSelect } from "../../+namespaces/namespace-select";
 import { SubTitle } from "../../layout/sub-title";
 import { withInjectables } from "@ogre-tools/injectable-react";

packages/core/src/renderer/components/+config-secrets/secret-details.tsx

@@ -10,7 +10,7 @@ import { autorun, observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Input } from "../input";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { ShowNotification } from "../notifications";
 import { base64, toggle } from "@k8slens/utilities";
 import { Icon } from "../icon";

packages/core/src/renderer/components/+extensions/attempt-install/attempt-install.injectable.tsx

@@ -15,7 +15,7 @@ import extensionInstallationStateStoreInjectable from "../../../../extensions/ex
 import type { Disposer } from "@k8slens/utilities";
 import { disposer } from "@k8slens/utilities";
 import type { ShowNotification } from "../../notifications";
-import { Button } from "../../button";
+import { Button } from "@k8slens/button";
 import type { ExtensionLoader } from "../../../../extensions/extension-loader";
 import React from "react";
 import { remove as removeDir } from "fs-extra";

packages/core/src/renderer/components/+extensions/install.tsx

@@ -6,7 +6,7 @@
 import styles from "./install.module.scss";
 import React, { useEffect, useRef, useState } from "react";
 import { prevDefault } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../icon";
 import { observer } from "mobx-react";
 import { Input, InputValidators } from "../input";

packages/core/src/renderer/components/+helm-charts/helm-chart-details.tsx

@@ -12,7 +12,7 @@ import { Drawer, DrawerItem } from "../drawer";
 import { stopPropagation } from "@k8slens/utilities";
 import { MarkdownViewer } from "../markdown-viewer";
 import { Spinner } from "../spinner";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Select } from "../select";
 import { Badge } from "../badge";
 import { Tooltip, withStyles } from "@material-ui/core";

packages/core/src/renderer/components/+helm-releases/release-details/release-details-content.tsx

@@ -14,7 +14,7 @@ import { observer } from "mobx-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { ConfigurationInput, MinimalResourceGroup, OnlyUserSuppliedValuesAreShownToggle, ReleaseDetailsModel } from "./release-details-model/release-details-model.injectable";
 import releaseDetailsModelInjectable from "./release-details-model/release-details-model.injectable";
-import { Button } from "../../button";
+import { Button } from "@k8slens/button";
 import { kebabCase } from "lodash/fp";
 import { Badge } from "../../badge";
 import { SubTitle } from "../../layout/sub-title";

packages/core/src/renderer/components/+network-services/service-port-component.tsx

@@ -11,7 +11,7 @@ import type { Service, ServicePort } from "../../../common/k8s-api/endpoints";
 import { action, makeObservable, observable, reaction } from "mobx";
 import { cssNames } from "@k8slens/utilities";
 import type { ShowNotification } from "../notifications";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { ForwardedPort, PortForwardStore } from "../../port-forward";
 import { predictProtocol } from "../../port-forward";
 import { Spinner } from "../spinner";

packages/core/src/renderer/components/+workloads-pods/pod-container-port.tsx

@@ -11,7 +11,7 @@ import type { ContainerPort, Pod } from "../../../common/k8s-api/endpoints";
 import { action, makeObservable, observable, reaction } from "mobx";
 import { cssNames } from "@k8slens/utilities";
 import type { ShowNotification } from "../notifications";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { ForwardedPort, PortForwardStore } from "../../port-forward";
 import { predictProtocol } from "../../port-forward";
 import { Spinner } from "../spinner";

packages/core/src/renderer/components/add-remove-buttons/add-remove-buttons.tsx

@@ -7,7 +7,7 @@ import "./add-remove-buttons.scss";
 
 import React from "react";
 import { cssNames } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../icon";
 
 export interface AddRemoveButtonsProps extends React.HTMLAttributes<any> {

packages/core/src/renderer/components/button/button.scss

@@ -1,142 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-
-.Button {
-  position: relative;
-  overflow: hidden; // required for transition effect on hover
-  color: white;
-  font-family: var(--font-main);
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  border-radius: $radius;
-  background: var(--buttonDefaultBackground);
-  padding: round($padding * .9) $padding * 1.5;
-  flex-shrink: 0;
-  line-height: 1;
-  font-size: $font-size;
-  user-select: none;
-
-  &[href] {
-    display: inline-block;
-  }
-
-  &.primary {
-    background: var(--buttonPrimaryBackground);
-  }
-
-  &.accent {
-    background: var(--buttonAccentBackground);
-  }
-
-  &.light {
-    background-color: var(--buttonLightBackground);
-    color: #505050;
-  }
-
-  &.plain {
-    color: inherit;
-    background: transparent;
-    box-shadow: none;
-
-    &:disabled {
-      background: none;
-      opacity: .5;
-    }
-
-    &.active,
-    &:focus:not(:active) {
-      color: var(--buttonPrimaryBackground);
-      box-shadow: 0 0 0 1px inset;
-    }
-  }
-
-  &.outlined {
-    color: inherit;
-    background: transparent;
-
-    &.active,
-    &:focus {
-      color: inherit;
-      box-shadow: 0 0 0 1px inset;
-    }
-  }
-
-  &.big {
-    font-size: 2.2 * $unit;
-    border-radius: 50px;
-    padding: .75em 1em;
-  }
-
-  &.round {
-    border-radius: 50%;
-    padding: .7em;
-  }
-
-  form:not([novalidate]):invalid &[type=submit]:not(.active),
-  &:disabled {
-    opacity: 50%;
-    pointer-events: none;
-  }
-
-  &.waiting {
-    pointer-events: none;
-    &:after {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 0;
-      height: 100%;
-      background: transparentize(white, .85);
-      animation: waiting 1.5s infinite linear;
-    }
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus:not(:active) {
-    transition: box-shadow 350ms;
-    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
-  }
-
-  &:active:before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    background: transparentize(white, .85);
-    transform-origin: left top;
-    transition: transform 150ms;
-    transform: rotate(0deg);
-    // hackfix: safari prevents clicks on button when click-target is a child element nor button itself
-    pointer-events: none;
-  }
-
-  &:before {
-    content: "";
-    transform: rotate(-90deg);
-  }
-}
-
-@keyframes waiting {
-  0% {
-    left: 0;
-    width: 0;
-  }
-  50% {
-    left: 25%;
-    width: 75%;
-  }
-  75% {
-    left: 100%;
-    width: 0;
-  }
-}

packages/core/src/renderer/components/button/button.tsx

@@ -1,61 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import "./button.scss";
-import type { ButtonHTMLAttributes } from "react";
-import React from "react";
-import { cssNames } from "@k8slens/utilities";
-import { withTooltip } from "@k8slens/tooltip";
-
-export interface ButtonProps extends ButtonHTMLAttributes<any> {
-  label?: React.ReactNode;
-  waiting?: boolean;
-  primary?: boolean;
-  accent?: boolean;
-  light?: boolean;
-  plain?: boolean;
-  outlined?: boolean;
-  hidden?: boolean;
-  active?: boolean;
-  big?: boolean;
-  round?: boolean;
-  href?: string; // render as hyperlink
-  target?: "_blank"; // in case of using @href
-}
-
-export const Button = withTooltip((props: ButtonProps) => {
-  const {
-    waiting, label, primary, accent, plain, hidden, active, big,
-    round, outlined, light, children, ...btnProps
-  } = props;
-
-  if (hidden) return null;
-
-  btnProps.className = cssNames("Button", btnProps.className, {
-    waiting, primary, accent, plain, active, big, round, outlined, light,
-  });
-
-  // render as link
-  if (props.href) {
-    return (
-      <a {...btnProps}>
-        {label}
-        {children}
-      </a>
-    );
-  }
-
-  // render as button
-  return (
-    <button
-      type="button"
-      {...btnProps}
-      data-waiting={typeof waiting === "boolean" ? String(waiting) : undefined}
-    >
-      {label}
-      {children}
-    </button>
-  );
-});

packages/core/src/renderer/components/button/index.ts

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-export * from "./button";

packages/core/src/renderer/components/cluster-manager/cluster-status.tsx

@@ -12,7 +12,7 @@ import { ipcRendererOn } from "../../../common/ipc";
 import type { Cluster } from "../../../common/cluster/cluster";
 import type { IClassName } from "@k8slens/utilities";
 import { hasTypedProperty, isObject, isString, cssNames } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../icon";
 import { Spinner } from "../spinner";
 import type { KubeAuthUpdate } from "../../../common/cluster-types";

packages/core/src/renderer/components/cluster-settings/metrics-setting.tsx

@@ -7,7 +7,7 @@ import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { onMultiSelectFor, Select } from "../select/select";
 import { Icon } from "../icon/icon";
-import { Button } from "../button/button";
+import { Button } from "@k8slens/button";
 import { SubTitle } from "../layout/sub-title";
 import type { Cluster } from "../../../common/cluster/cluster";
 import { observable, reaction, makeObservable } from "mobx";

packages/core/src/renderer/components/confirm-dialog/confirm-dialog.tsx

@@ -11,8 +11,8 @@ import type { IObservableValue } from "mobx";
 import { observable, makeObservable, computed } from "mobx";
 import { observer } from "mobx-react";
 import { cssNames, noop, prevDefault } from "@k8slens/utilities";
-import type { ButtonProps } from "../button";
-import { Button } from "../button";
+import type { ButtonProps } from "@k8slens/button";
+import { Button } from "@k8slens/button";
 import type { DialogProps } from "../dialog";
 import { Dialog } from "../dialog";
 import { Icon } from "../icon";

packages/core/src/renderer/components/delete-cluster-dialog/view.tsx

@@ -9,7 +9,7 @@ import { runInAction } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { ShowNotification } from "../notifications";
 import { Dialog } from "../dialog";
 import { Icon } from "../icon";

packages/core/src/renderer/components/dialog/logs-dialog.tsx

@@ -10,7 +10,7 @@ import type { DialogProps } from "../dialog";
 import { Dialog } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import type { ShowNotification } from "../notifications";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../icon";
 import { clipboard } from "electron";
 import { kebabCase } from "lodash/fp";

packages/core/src/renderer/components/dock/info-panel.tsx

@@ -10,7 +10,7 @@ import React, { Component } from "react";
 import { computed, observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../icon";
 import { Spinner } from "../spinner";
 import type { DockStore, TabId } from "./dock/store";

packages/core/src/renderer/components/dock/install-chart/view.tsx

@@ -12,7 +12,7 @@ import { Badge } from "../../badge";
 import { NamespaceSelect } from "../../+namespaces/namespace-select";
 import { prevDefault } from "@k8slens/utilities";
 import { Icon } from "../../icon";
-import { Button } from "../../button";
+import { Button } from "@k8slens/button";
 import { LogsDialog } from "../../dialog/logs-dialog";
 import { Select } from "../../select";
 import { Input } from "../../input";

packages/core/src/renderer/components/error-boundary/error-boundary.tsx

@@ -8,7 +8,7 @@ import "./error-boundary.scss";
 import type { ErrorInfo } from "react";
 import React from "react";
 import { observer } from "mobx-react";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { issuesTrackerUrl, forumsUrl } from "../../../common/vars";
 import type { SingleOrMany } from "@k8slens/utilities";
 import type { ObservableHistory } from "mobx-observable-history";

packages/core/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx

@@ -8,7 +8,7 @@ import React from "react";
 import type { IObservableValue } from "mobx";
 import { observer } from "mobx-react";
 import { cssNames } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { DialogProps } from "../dialog";
 import { Dialog } from "../dialog";
 import { Icon } from "../icon";

packages/core/src/renderer/components/path-picker/path-picker.tsx

@@ -10,7 +10,7 @@ import React from "react";
 import type { OpenPathPickingDialog } from "../../../features/path-picking-dialog/renderer/pick-paths.injectable";
 import openPathPickingDialogInjectable from "../../../features/path-picking-dialog/renderer/pick-paths.injectable";
 import { cssNames } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 
 export interface PathPickOpts {
   message: string;

packages/core/src/renderer/components/wizard/wizard.tsx

@@ -6,7 +6,7 @@
 import "./wizard.scss";
 import React from "react";
 import { cssNames, prevDefault } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Stepper } from "../stepper";
 import { SubTitle } from "../layout/sub-title";
 import { Spinner } from "../spinner";

packages/core/src/renderer/ipc/list-namespaces-forbidden-handler.injectable.tsx

@@ -5,7 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import navigateToEntitySettingsInjectable from "../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
 import type { ListNamespaceForbiddenArgs } from "../../common/ipc/cluster";
-import { Button } from "../components/button";
+import { Button } from "@k8slens/button";
 import type { IpcRendererEvent } from "electron";
 import React from "react";
 import notificationsStoreInjectable from "../components/notifications/notifications-store.injectable";

packages/core/src/renderer/port-forward/about-port-forwarding.injectable.tsx

@@ -5,7 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import React from "react";
 import navigateToPortForwardsInjectable from "../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";
-import { Button } from "../components/button";
+import { Button } from "@k8slens/button";
 import showSuccessNotificationInjectable from "../components/notifications/show-success-notification.injectable";
 
 const aboutPortForwardingInjectable = getInjectable({

packages/core/src/renderer/port-forward/notify-error-port-forwarding.injectable.tsx

@@ -6,7 +6,7 @@ import { getInjectable } from "@ogre-tools/injectable";
 import navigateToPortForwardsInjectable from "../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";
 import showErrorNotificationInjectable from "../components/notifications/show-error-notification.injectable";
 import React from "react";
-import { Button } from "../components/button";
+import { Button } from from "@k8slens/button";
 
 const notifyErrorPortForwardingInjectable = getInjectable({
   id: "notify-error-port-forwarding",