chore: Extract @k8slens/spinner

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

open-lens/src/renderer/index.ts

@@ -6,6 +6,7 @@ import "@k8slens/resizing-anchor/styles";
 import "@k8slens/icon/styles";
 import "@k8slens/animate/styles";
 import "@k8slens/notifications/styles";
+import "@k8slens/spinner/styles";
 
 import { runInAction } from "mobx";
 import {

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/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";

packages/ui-components/animate/README.md

@@ -9,11 +9,11 @@ $ npm install @k8slens/animate
 ```
 
 ```typescript
-export type { AnimateName, AnimateProps } from "@k8slens/button";
-export type { Animate } from "@k8slens/button";
-export { defaultEnterDurationForAnimatedInjectable } from "@k8slens/button";
-export { defaultLeaveDurationForAnimatedInjectable } from "@k8slens/button";
-export { requestAnimationFrameInjectable } from "@k8slens/button";
+import { animateFeature } from "@k8slens/animate";
+import { animateFeature, requestAnimationFrameInjectable } from "@k8slens/animate";
+import { Animate } from "@k8slens/animate";
+import type { AnimateName } from "@k8slens/animate";
+import type { RequestAnimationFrame } from "@k8slens/animate";
 ```
 
 ## Extendability

packages/ui-components/spinner/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@k8slens/eslint-config/eslint",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  }
+}

packages/ui-components/spinner/.prettierrc

@@ -0,0 +1 @@
+"@k8slens/eslint-config/prettier"

packages/ui-components/spinner/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/ui-components/spinner/README.md

@@ -0,0 +1,15 @@
+# @k8slens/spinner
+
+This package contains stuff related to creating Lens-applications. 
+
+# Usage
+
+```bash
+$ npm install @k8slens/spinner
+```
+
+```typescript
+import { Spinner } from "@k8slens/spinner";
+```
+
+## Extendability

packages/core/src/renderer/components/spinner/index.ts → packages/ui-components/spinner/index.ts

@@ -3,4 +3,5 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-export * from "./spinner";
+export type { SpinnerProps } from "./src/spinner";
+export { Spinner } from "./src/spinner";

packages/ui-components/spinner/jest.config.js

@@ -0,0 +1,3 @@
+const { configForReact } = require("@k8slens/jest").monorepoPackageConfig(__dirname);
+
+module.exports = configForReact;