chore: Extract @k8slens/spinner

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

packages/core/package.json

@@ -236,6 +236,7 @@
     "@k8slens/resource-templates": "^1.0.0-alpha.1",
     "@k8slens/routing": "^1.0.0-alpha.5",
     "@k8slens/run-many": "^1.0.0-alpha.1",
+    "@k8slens/spinner": "^1.0.0",
     "@k8slens/startable-stoppable": "^1.0.0-alpha.1",
     "@k8slens/tooltip": "^1.0.0-alpha.5",
     "@k8slens/utilities": "^1.0.0-alpha.1",

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

@@ -92,7 +92,7 @@ export const Notifications = {
   shortInfo: asLegacyGlobalFunctionForExtensionApi(showShortInfoNotificationInjectable),
 };
 
-export * from "../../renderer/components/spinner";
+export * from "@k8slens/spinner";
 export * from "../../renderer/components/stepper";
 export * from "../../renderer/components/wizard";
 export * from "../../renderer/components/workloads-pods/pod-details-list";

packages/core/src/features/helm-charts/child-features/preferences/renderer/helm-repositories.tsx

@@ -11,7 +11,7 @@ import { observer } from "mobx-react";
 import activeHelmRepositoriesInjectable from "./active-helm-repositories.injectable";
 import type { IAsyncComputed } from "@ogre-tools/injectable-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import { Spinner } from "../../../../../renderer/components/spinner";
+import { Spinner } from "@k8slens/spinner";
 import type { HelmRepo } from "../../../../../common/helm/helm-repo";
 import { RemovableItem } from "../../../../preferences/renderer/removable-item/removable-item";
 import removeHelmRepositoryInjectable from "./remove-helm-repository.injectable";

packages/core/src/features/preferences/renderer/preference-items/kubernetes/kubeconfig-sync/kubeconfig-sync.tsx

@@ -10,7 +10,7 @@ import { Notice } from "../../../../../../renderer/components/extensions/notice"
 import { iter, tuple } from "@k8slens/utilities";
 import { SubTitle } from "../../../../../../renderer/components/layout/sub-title";
 import { PathPicker } from "../../../../../../renderer/components/path-picker/path-picker";
-import { Spinner } from "../../../../../../renderer/components/spinner";
+import { Spinner } from "@k8slens/spinner";
 import { RemovableItem } from "../../../removable-item/removable-item";
 import isWindowsInjectable from "../../../../../../common/vars/is-windows.injectable";
 import { loggerInjectionToken } from "@k8slens/logger";

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

@@ -14,7 +14,7 @@ import type { IClassName } from "@k8slens/utilities";
 import { hasTypedProperty, isObject, isString, cssNames } from "@k8slens/utilities";
 import { Button } from "@k8slens/button";
 import { Icon } from "@k8slens/icon";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import type { KubeAuthUpdate } from "../../../common/cluster-types";
 import type { CatalogEntityRegistry } from "../../api/catalog/entity/registry";
 import type { NavigateToEntitySettings } from "../../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";

packages/core/src/renderer/components/cluster-settings/local-terminal-settings.tsx

@@ -22,7 +22,7 @@ import type { OpenPathPickingDialog } from "../../../features/path-picking-dialo
 import openPathPickingDialogInjectable from "../../../features/path-picking-dialog/renderer/pick-paths.injectable";
 import type { LocalTerminalSettingPresenter } from "./local-terminal-setting-presenter.injectable";
 import localTerminalSettingPresenterInjectable from "./local-terminal-setting-presenter.injectable";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { action, runInAction } from "mobx";
 
 export interface ClusterLocalTerminalSettingProps {

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

@@ -11,7 +11,7 @@ import type { SelectOption } from "../select";
 import { Select } from "../select";
 import { Input } from "../input";
 import { observable, computed, autorun, makeObservable } from "mobx";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import type { MetricProviderInfo, RequestMetricsProviders } from "../../../common/k8s-api/endpoints/metrics.api/request-providers.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import requestMetricsProvidersInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-providers.injectable";

packages/core/src/renderer/components/cluster/cluster-issues.tsx

@@ -13,7 +13,7 @@ import { Icon } from "@k8slens/icon";
 import { SubHeader } from "../layout/sub-header";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { cssNames, prevDefault } from "@k8slens/utilities";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import type { ApiManager } from "../../../common/k8s-api/api-manager";
 import { KubeObjectAge } from "../kube-object/age";
 import { withInjectables } from "@ogre-tools/injectable-react";

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

@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import type { ChartOptions, ChartPoint } from "chart.js";
 import { BarChart } from "../chart";
 import { bytesToUnits, cssNames } from "@k8slens/utilities";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { ZebraStripesPlugin } from "../chart/zebra-stripes.plugin";
 import { ClusterNoMetrics } from "./cluster-no-metrics";
 import { ClusterMetricSwitchers } from "./cluster-metric-switchers";

packages/core/src/renderer/components/cluster/cluster-overview.tsx

@@ -12,7 +12,7 @@ import type { NodeStore } from "../nodes/store";
 import type { PodStore } from "../workloads-pods/store";
 import { byOrderNumber } from "@k8slens/utilities";
 import { TabLayout } from "../layout/tab-layout";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { ClusterIssues } from "./cluster-issues";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { EventStore } from "../events/store";

packages/core/src/renderer/components/cluster/cluster-pie-charts.tsx

@@ -7,7 +7,7 @@ import styles from "./cluster-pie-charts.module.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { Icon } from "@k8slens/icon";
 import type { PieChartData } from "../chart";
 import { PieChart } from "../chart";

packages/core/src/renderer/components/dock/create-resource/view.tsx

@@ -20,7 +20,7 @@ import { isObject, prevDefault } from "@k8slens/utilities";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import createResourceTabStoreInjectable from "./store.injectable";
 import createResourceTemplatesInjectable from "./create-resource-templates.injectable";
-import { Spinner } from "../../spinner";
+import { Spinner } from "@k8slens/spinner";
 import type { GroupBase } from "react-select";
 import type { Navigate } from "../../../navigation/navigate.injectable";
 import type { GetDetailsUrl } from "../../kube-detail-params/get-details-url.injectable";

packages/core/src/renderer/components/dock/edit-resource/view.tsx

@@ -5,7 +5,7 @@
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Spinner } from "../../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { EditResourceModel } from "./edit-resource-model/edit-resource-model.injectable";
 import editResourceModelInjectable from "./edit-resource-model/edit-resource-model.injectable";

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

@@ -12,7 +12,7 @@ import type { StrictReactNode } from "@k8slens/utilities";
 import { cssNames } from "@k8slens/utilities";
 import { Button } from "@k8slens/button";
 import { Icon } from "@k8slens/icon";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import type { DockStore, TabId } from "./dock/store";
 import type { ShowNotification, ShowCheckedErrorNotification } from "@k8slens/notifications";
 import { withInjectables } from "@ogre-tools/injectable-react";

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

@@ -20,7 +20,7 @@ import { EditorPanel } from "../editor-panel";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { InstallChartModel } from "./install-chart-model.injectable";
 import installChartModelInjectable from "./install-chart-model.injectable";
-import { Spinner } from "../../spinner";
+import { Spinner } from "@k8slens/spinner";
 
 export interface InstallChartProps {
   tabId: string;

packages/core/src/renderer/components/dock/logs/list.tsx

@@ -20,7 +20,7 @@ import type { VirtualListRef } from "../../virtual-list";
 import { VirtualList } from "../../virtual-list";
 import { ToBottom } from "./to-bottom";
 import type { LogTabViewModel } from "../logs/logs-view-model";
-import { Spinner } from "../../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import autoBindReact from "auto-bind/react";
 import type { UserPreferencesState } from "../../../../features/user-preferences/common/state.injectable";

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

@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import { cssNames } from "@k8slens/utilities";
 import type { DockTab } from "../dock/store";
 import { InfoPanel } from "../info-panel";
-import { Spinner } from "../../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { Badge } from "../../badge";
 import { EditorPanel } from "../editor-panel";
 import type { SelectOption } from "../../select";

packages/core/src/renderer/components/extensions/installed-extensions.tsx

@@ -8,7 +8,7 @@ import React from "react";
 import { Icon } from "@k8slens/icon";
 import { List } from "../list/list";
 import { MenuActions, MenuItem } from "../menu";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { cssNames } from "@k8slens/utilities";
 import { observer } from "mobx-react";
 import type { Row } from "react-table";

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

@@ -9,7 +9,7 @@ import React from "react";
 import fse from "fs-extra";
 import path from "path";
 import { Icon } from "@k8slens/icon";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import _ from "lodash";

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

@@ -11,7 +11,7 @@ import { observer } from "mobx-react";
 import { Drawer, DrawerItem } from "../drawer";
 import { stopPropagation } from "@k8slens/utilities";
 import { MarkdownViewer } from "../markdown-viewer";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { Button } from "@k8slens/button";
 import { Select } from "../select";
 import { Badge } from "../badge";

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

@@ -21,7 +21,7 @@ import { SubTitle } from "../../layout/sub-title";
 import { Table, TableCell, TableHead, TableRow } from "../../table";
 import { Checkbox } from "../../checkbox";
 import { MonacoEditor } from "../../monaco-editor";
-import { Spinner } from "../../spinner";
+import { Spinner } from "@k8slens/spinner";
 import type { TargetHelmRelease } from "./target-helm-release.injectable";
 
 interface ReleaseDetailsContentProps {

packages/core/src/renderer/components/item-object-list/content.tsx

@@ -17,7 +17,7 @@ import { cssNames, isDefined, isReactNode, noop, prevDefault, stopPropagation }
 import type { AddRemoveButtonsProps } from "../add-remove-buttons";
 import { AddRemoveButtons } from "../add-remove-buttons";
 import { NoItems } from "../no-items";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import type { ItemObject, TableCellProps } from "@k8slens/list-layout";
 import type { Filter, PageFiltersStore } from "./page-filters/store";
 import type { LensTheme } from "../../themes/lens-theme";

packages/core/src/renderer/components/kube-object-details/kube-object-details.tsx

@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import type { IComputedValue } from "mobx";
 import { Drawer } from "../drawer";
 import type { KubeObject } from "@k8slens/kube-object";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { KubeObjectMenu } from "../kube-object-menu";
 import type { HideDetails } from "../kube-detail-params/hide-details.injectable";
 import type { IAsyncComputed } from "@ogre-tools/injectable-react";

packages/core/src/renderer/components/namespaces/namespace-details.tsx

@@ -13,7 +13,7 @@ import { cssNames } from "@k8slens/utilities";
 import { Namespace } from "@k8slens/kube-object";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { Link } from "react-router-dom";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { withInjectables } from "@ogre-tools/injectable-react";
 
 import type { SubscribeStores } from "../../kube-watch-api/kube-watch-api";

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

@@ -14,7 +14,7 @@ import type { ShowNotification } from "@k8slens/notifications";
 import { Button } from "@k8slens/button";
 import type { ForwardedPort, PortForwardStore } from "../../port-forward";
 import { predictProtocol } from "../../port-forward";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import portForwardStoreInjectable from "../../port-forward/port-forward-store/port-forward-store.injectable";
 import portForwardDialogModelInjectable from "../../port-forward/port-forward-dialog-model/port-forward-dialog-model.injectable";

packages/core/src/renderer/components/resource-metrics/resource-metrics.tsx

@@ -9,7 +9,7 @@ import React, { createContext, useState } from "react";
 import { Radio, RadioGroup } from "../radio";
 import type { KubeObject } from "@k8slens/kube-object";
 import { cssNames } from "@k8slens/utilities";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import type { MetricsTab } from "../chart/options";
 import type { MetricData } from "../../../common/k8s-api/endpoints/metrics.api";
 import type { IAsyncComputed } from "@ogre-tools/injectable-react";

packages/core/src/renderer/components/spinner/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 "./spinner";

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

@@ -1,68 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-
-.Spinner {
-  --spinner-size: 24px;
-  --spinner-border: calc(var(--spinner-size) / 6);
-
-  $duration: 1s;
-  $rotateAnimation: rotate $duration linear infinite;
-  $colorAnimation: colors $duration*4 ease-in-out infinite;
-
-  @mixin spinner-color($color) {
-    border-color: transparent $color;
-  }
-
-  width: var(--spinner-size);
-  height: var(--spinner-size);
-  border: var(--spinner-border) solid transparent;
-  border-radius: 50%;
-  display: inline-block;
-
-  &:not(.singleColor) {
-    animation: $rotateAnimation, $colorAnimation;
-  }
-
-  &.singleColor {
-    @include spinner-color(var(--textColorPrimary));
-    animation: $rotateAnimation;
-  }
-
-  &.center {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin-left: calc(var(--spinner-size) / -2);
-    margin-top: calc(var(--spinner-size) / -2);
-  }
-
-  @keyframes rotate {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes colors {
-    0% {
-      @include spinner-color(#4285F4);
-    }
-    25% {
-      @include spinner-color(#DE3E35);
-    }
-    50% {
-      @include spinner-color(#F7C223);
-    }
-    75% {
-      @include spinner-color(#1B9A59);
-    }
-    100% {
-      @include spinner-color(#4285F4);
-    }
-  }
-}

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

@@ -1,28 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import "./spinner.scss";
-
-import React from "react";
-import { cssNames } from "@k8slens/utilities";
-
-export interface SpinnerProps extends React.HTMLProps<any> {
-  singleColor?: boolean;
-  center?: boolean;
-}
-
-export class Spinner extends React.Component<SpinnerProps, {}> {
-  static defaultProps = {
-    singleColor: true,
-    center: false,
-  };
-
-  render() {
-    const { center, singleColor, className, ...props } = this.props;
-    const classNames = cssNames("Spinner", className, { singleColor, center });
-
-    return <div {...props} className={classNames} />;
-  }
-}

packages/core/src/renderer/components/storage-volumes/volume-details-list.tsx

@@ -11,7 +11,7 @@ import type { PersistentVolume } from "@k8slens/kube-object";
 import { TableRow } from "../table/table-row";
 import { cssNames, prevDefault } from "@k8slens/utilities";
 import { TableCell } from "../table/table-cell";
-import { Spinner } from "../spinner/spinner";
+import { Spinner } from "@k8slens/spinner";
 import { DrawerTitle } from "../drawer/drawer-title";
 import { Table } from "../table/table";
 import { TableHead } from "../table/table-head";

packages/core/src/renderer/components/user-management/service-accounts/details.tsx

@@ -14,7 +14,7 @@ import type { Secret, ServiceAccount } from "@k8slens/kube-object";
 import { DrawerItem, DrawerTitle } from "../../drawer";
 import { Icon } from "@k8slens/icon";
 import type { KubeObjectDetailsProps } from "../../kube-object-details";
-import { Spinner } from "../../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { ServiceAccountsSecret } from "./secret";
 import type { SecretStore } from "../../config-secrets/store";
 import type { GetDetailsUrl } from "../../kube-detail-params/get-details-url.injectable";

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

@@ -10,7 +10,7 @@ import { cssNames, prevDefault } from "@k8slens/utilities";
 import { Button } from "@k8slens/button";
 import { Stepper } from "../stepper";
 import { SubTitle } from "../layout/sub-title";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { debounce } from "lodash";
 
 export interface WizardCommonProps<D> {

packages/core/src/renderer/components/workloads-deployments/deployment-replicasets.tsx

@@ -9,7 +9,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import type { ReplicaSet } from "@k8slens/kube-object";
 import { KubeObjectMenu } from "../kube-object-menu";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { prevDefault, stopPropagation } from "@k8slens/utilities";
 import { DrawerTitle } from "../drawer";
 import { Table, TableCell, TableHead, TableRow } from "../table";

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

@@ -14,7 +14,7 @@ import type { ShowNotification } from "@k8slens/notifications";
 import { Button } from "@k8slens/button";
 import type { ForwardedPort, PortForwardStore } from "../../port-forward";
 import { predictProtocol } from "../../port-forward";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import portForwardStoreInjectable from "../../port-forward/port-forward-store/port-forward-store.injectable";
 import portForwardDialogModelInjectable from "../../port-forward/port-forward-dialog-model/port-forward-dialog-model.injectable";

packages/core/src/renderer/components/workloads-pods/pod-details-list.tsx

@@ -13,7 +13,7 @@ import type { Pod, KubeObject } from "@k8slens/kube-object";
 import { bytesToUnits, cssNames, interval, prevDefault } from "@k8slens/utilities";
 import { LineProgress } from "../line-progress";
 import { Table, TableCell, TableHead, TableRow } from "../table";
-import { Spinner } from "../spinner";
+import { Spinner } from "@k8slens/spinner";
 import { DrawerTitle } from "../drawer";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import type { PodStore } from "./store";