Turn on strict mode in tsconfig.json, some helpful lints, and required cleanup where strictness necessitates it (#5195)

* Turn on strict mode in tsconfig.json - Add route, clusterRoute, and payloadValidatedClusterRoute helper functions to improve types with backend routes - Turn on the following new lints: - react/jsx-first-prop-new-line - react/jsx-wrap-multilines - react/jsx-one-expression-per-line - react/jsx-max-props-per-line - react/jsx-indent - react/jsx-indent-props Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix build Signed-off-by: Sebastian Malton <sebastian@malton.name> * Replace KubeObject scope strings with enum Signed-off-by: Sebastian Malton <sebastian@malton.name> * Revert package.json version changes Signed-off-by: Sebastian Malton <sebastian@malton.name> * revert move hostedCluster(Id) Signed-off-by: Sebastian Malton <sebastian@malton.name> * change some type param names to be not single letters Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove copy-extension-themes Signed-off-by: Sebastian Malton <sebastian@malton.name> * add new make clean action Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix build to not use webpack for generating types Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube-object-menu.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix select.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * revert move fileNameMigration to index Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix ref logic error Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix log-resource-selector.test.tsx tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-store.test.ts test by overriding createStorage to not touch file system Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cluster.test.ts tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube=api.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fixed hotbar-store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kubeconfig-manager.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cluster-role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix pods.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix delete-cluster-dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix daemonset.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix replicaset.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix statefulsets/dialog/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix replicasets/scale-dialog/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix deployments.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix deployments/scale/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cronjob.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix stateful-set.api.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix deployment.api.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix api-manager.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix statefulset.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix job.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix pods.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix scroll-spy.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix hotbar-remove-command.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog-entity-registry.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix welcome.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix verify-that-all-routes-have-route-component.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix pod-tolerations.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * better fix for previous 3 fixes, plus also select.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube-object-menu.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix app-paths.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-tabs.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix isReactNode typing Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix sub-title.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix drawer.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix list-layout.tsx and header.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix error-boundary.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix upgrade-chart/store.ts and dock-tab.store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix install-chart/store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix edit-resource/store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix create-resource/store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix namespace-select.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix namespace-select-filter.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix crd-list.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix wrong types for extensions Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix circular dependency Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix circular dependency on catalogCategoryRegistry Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix api-kube Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix type errors, most <Select /> errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * fixing more type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * some more fixing type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * convert all KubeApis to injectable with legacy global backups Signed-off-by: Sebastian Malton <sebastian@malton.name> * factor out into a common file all the exports Signed-off-by: Sebastian Malton <sebastian@malton.name> * convert all KubeObjectStores to injectable with legacy global backups Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix lint Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove unused legacy KubeApi globals Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix bad previous commit Signed-off-by: Sebastian Malton <sebastian@malton.name> * more crash fixing Signed-off-by: Sebastian Malton <sebastian@malton.name> * try and fix behavioural tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix sidebar-and-tab-navigation-for-core.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix sidebar-and-tab-navigation-for-extensions.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-using-application-menu.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make ThemeStore non-singleton and fix navigation-to-terminal-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * extensions.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog-entity-registry.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-using-application-menu.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix log-resource-selector.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-tabs.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix delete-cluster-dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-kubernetes-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-editor-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-proxy-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-using-application-menu.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-application-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix select.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix hotbar-remove-command.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cluster-role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-extension-specific-preferences.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-telemetry-preferences.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix closing-preferences.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-editor-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-proxy-preferences.test.ts - Fix other type errors too Signed-off-by: Sebastian Malton <sebastian@malton.name> * final tweaks Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add more tsconfig files, fix bug in <Catalog> - Make all of history, navigation injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * Convert all of kube-details-params/ and navigate/ to injectable - This fixes a runtime error that was encountered during testing Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix runtime errors on renderer - remove all static uses of `createPageParam` (and then removed the legacy global) - Made LensRendererExtension and LensMainExtension just used dependencies and not the getLegacyDi - Fixed circular dep in extension-loader Signed-off-by: Sebastian Malton <sebastian@malton.name> * Move registerStore calls to after injectMany Signed-off-by: Sebastian Malton <sebastian@malton.name> * replace all the rest of the legacy uses of apiManager Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix stack overflow and cycles in DI Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix NamespaceSelectFilter not opening Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix WizardStep and AddNamespaceDialog Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix KubeApi's not being registered Signed-off-by: Sebastian Malton <sebastian@malton.name> * cleanup WindowManager Signed-off-by: Sebastian Malton <sebastian@malton.name> * Proper fix for Wizard, fix NamespaceStore.subscribe Signed-off-by: Sebastian Malton <sebastian@malton.name> * Rewrite withTooltip to be more type correct - Fixes mobx related "too many recursive actions" error - Change all the uses of withTooltips to be functional components Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add e2e test to cover kube api registration Signed-off-by: Sebastian Malton <sebastian@malton.name> * cleanup internal-commands Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove cast in <Animate> Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix command-palette e2e test Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix type error after rebase Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix test name Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix lint Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix code to help CodeQL scanner Signed-off-by: Sebastian Malton <sebastian@malton.name> * update intree extension lock files Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix build-extensions picking wrong @types/react Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix tests from rebase Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix type error Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make KubeconfigSyncManager more injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix crash in test mode for Dialog Signed-off-by: Sebastian Malton <sebastian@malton.name> * make Select snapshots deterministic Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix new type error Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube-object.store.test.ts typing Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix merge build issues Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix snapshots after merge Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix lint after merge Signed-off-by: Sebastian Malton <sebastian@malton.name> * reexport BaseKubeJsonApiObjectMetadata Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix typo in terminalSpawningPool Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove duplicate license header Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix typo to waitUntilDefined Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove iter use from getLegacyGlobalDiForExtensionApi Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove complex createStorage override Signed-off-by: Sebastian Malton <sebastian@malton.name> * override logger with mocks only when needed for tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove specialized overrideStore flags for getDiForUnitTesting Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove unnecessary | undefined types from the exactOptionalFieldTypes experiment Signed-off-by: Sebastian Malton <sebastian@malton.name> * use more descriptive name for local test mocks Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove unnecessary addition to 'make clean' target Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove oddity of KubeObjectStore.getById(undefined) being allowed Signed-off-by: Sebastian Malton <sebastian@malton.name> * rename KubeObject.getDescriptor in favour of name without fundemental JS meaning Signed-off-by: Sebastian Malton <sebastian@malton.name> * Simplify legacyRegisterApi when working in behaviour unit tests - Don't emit within main environment as there should be no auto registering there Signed-off-by: Sebastian Malton <sebastian@malton.name> * change confusing variable name in ReactiveDuration Signed-off-by: Sebastian Malton <sebastian@malton.name> * make visitor pattern more explicit for Entity contextMenuOpen Signed-off-by: Sebastian Malton <sebastian@malton.name> * toggleDetails -> toggleKubeDetailsPane is more specific Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove outdated comment Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix bug where LensExtension dependencies are not set Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix tests from the revert of react 18 Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix more tests from merge Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix typings with new is-compatible-extension tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * more type fixing Signed-off-by: Sebastian Malton <sebastian@malton.name> * Revert in-tree extension versions Signed-off-by: Sebastian Malton <sebastian@malton.name> * Improve name of guarding injectable for stores and apis - New name better implies that it is just a guard state and does not do anything Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add helper for <Select>.isMulti for storing in a Set<Value> Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix is-compatible-extension.test.ts types Signed-off-by: Sebastian Malton <sebastian@malton.name>
2025-05-20 05:10:56 +00:00 · 2022-05-16 07:17:57 -04:00
1 parent 381d77c633
commit dfcb7c3330
@@ -0,0 +1,15 @@
+/**
+ * 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 { observable } from "mobx";
+import type { StatefulSet } from "../../../../common/k8s-api/endpoints";
+
+const statefulSetDialogStateInjectable = getInjectable({
+  id: "stateful-set-dialog-state",
+  instantiate: () => observable.box<StatefulSet | undefined>(),
+});
+
+export default statefulSetDialogStateInjectable;
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.StatefulSetScaleDialog {
+  .Wizard {
+    .header {
+      span {
+        color: #a0a0a0;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .WizardStep {
+      .step-content {
+        min-height: 90px;
+        overflow: hidden;
+      }
+    }
+
+    .current-scale {
+      font-weight: bold
+    }
+
+    .desired-scale {
+      flex: 1.1 0;
+    }
+
+    .slider-container {
+      flex: 1 0;
+    }
+
+    .plus-minus-container {
+      margin-left: $margin * 2;
+      .Icon {
+        --color-active: black;
+      }
+    }
+
+    .warning {
+      color: var(--colorSoftError);
+      font-size: small;
+      display: flex;
+      align-items: center;
+
+      .Icon {
+        margin: 0;
+        margin-right: $margin;
+      }
+    }
+  }
+}
@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "@testing-library/jest-dom/extend-expect";
+
+import type { StatefulSetApi } from "../../../../common/k8s-api/endpoints";
+import { StatefulSet } from "../../../../common/k8s-api/endpoints";
+import { StatefulSetScaleDialog } from "./dialog";
+import { waitFor, fireEvent } from "@testing-library/react";
+import React from "react";
+import type { OpenStatefulSetScaleDialog } from "./open-dialog.injectable";
+import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
+import statefulSetApiInjectable from "../../../../common/k8s-api/endpoints/stateful-set.api.injectable";
+import storesAndApisCanBeCreatedInjectable from "../../../stores-apis-can-be-created.injectable";
+import openStatefulSetScaleDialogInjectable from "./open-dialog.injectable";
+import { type DiRender, renderFor } from "../../test-utils/renderFor";
+
+const dummyStatefulSet = new StatefulSet({
+  apiVersion: "v1",
+  kind: "dummy",
+  metadata: {
+    uid: "dummy",
+    name: "dummy",
+    creationTimestamp: "dummy",
+    resourceVersion: "dummy",
+    namespace: "default",
+    selfLink: "/apis/apps/v1/statefulsets/default/dummy",
+  },
+  spec: {
+    serviceName: "dummy",
+    replicas: 1,
+    selector: {
+      matchLabels: { "label": "label" },
+    },
+    template: {
+      metadata: {
+        labels: {
+          app: "app",
+        },
+      },
+      spec: {
+        containers: [{
+          name: "dummy",
+          image: "dummy",
+          ports: [{
+            containerPort: 1234,
+            name: "dummy",
+          }],
+          volumeMounts: [{
+            name: "dummy",
+            mountPath: "dummy",
+          }],
+        }],
+        tolerations: [{
+          key: "dummy",
+          operator: "dummy",
+          effect: "dummy",
+          tolerationSeconds: 1,
+        }],
+      },
+    },
+    volumeClaimTemplates: [{
+      metadata: {
+        name: "dummy",
+      },
+      spec: {
+        accessModes: ["dummy"],
+        resources: {
+          requests: {
+            storage: "dummy",
+          },
+        },
+      },
+    }],
+  },
+  status: {
+    observedGeneration: 1,
+    replicas: 1,
+    currentReplicas: 1,
+    readyReplicas: 1,
+    currentRevision: "dummy",
+    updateRevision: "dummy",
+    collisionCount: 1,
+  },
+});
+
+describe("<StatefulSetScaleDialog />", () => {
+  let statefulSetApi: StatefulSetApi;
+  let openStatefulSetDialog: OpenStatefulSetScaleDialog;
+  let render: DiRender;
+
+  beforeEach(() => {
+    const di = getDiForUnitTesting({ doGeneralOverrides: true });
+
+    di.override(storesAndApisCanBeCreatedInjectable, () => true);
+
+    render = renderFor(di);
+    statefulSetApi = di.inject(statefulSetApiInjectable);
+    openStatefulSetDialog = di.inject(openStatefulSetScaleDialogInjectable);
+  });
+
+  it("renders w/o errors", () => {
+    const { container } = render(<StatefulSetScaleDialog />);
+
+    expect(container).toBeInstanceOf(HTMLElement);
+  });
+
+  it("init with a dummy stateful set and mocked current/desired scale", async () => {
+    // mock statefulSetApi.getReplicas() which will be called
+    // when <StatefulSetScaleDialog /> rendered.
+    const initReplicas = 1;
+
+    statefulSetApi.getReplicas = jest.fn().mockImplementationOnce(async () => initReplicas);
+    const { getByTestId } = render(<StatefulSetScaleDialog />);
+
+    openStatefulSetDialog(dummyStatefulSet);
+    // we need to wait for the StatefulSetScaleDialog to show up
+    // because there is an <Animate /> in <Dialog /> which renders null at start.
+    await waitFor(async () => {
+      const [currentScale, desiredScale] = await Promise.all([
+        getByTestId("current-scale"),
+        getByTestId("desired-scale"),
+      ]);
+
+      expect(currentScale).toHaveTextContent(`${initReplicas}`);
+      expect(desiredScale).toHaveTextContent(`${initReplicas}`);
+    });
+  });
+
+  it("changes the desired scale when clicking the icon buttons +/-", async () => {
+    const initReplicas = 1;
+
+    statefulSetApi.getReplicas = jest.fn().mockImplementationOnce(async () => initReplicas);
+    const component = render(<StatefulSetScaleDialog />);
+
+    openStatefulSetDialog(dummyStatefulSet);
+    await waitFor(async () => {
+      expect(await component.findByTestId("desired-scale")).toHaveTextContent(`${initReplicas}`);
+      expect(await component.findByTestId("current-scale")).toHaveTextContent(`${initReplicas}`);
+      expect((component.baseElement.querySelector("input")?.value)).toBe(`${initReplicas}`);
+    });
+
+    const up = await component.findByTestId("desired-replicas-up");
+    const down = await component.findByTestId("desired-replicas-down");
+
+    fireEvent.click(up);
+    expect(await component.findByTestId("desired-scale")).toHaveTextContent(`${initReplicas + 1}`);
+    expect(await component.findByTestId("current-scale")).toHaveTextContent(`${initReplicas}`);
+    expect((component.baseElement.querySelector("input")?.value)).toBe(`${initReplicas + 1}`);
+
+    fireEvent.click(down);
+    expect(await component.findByTestId("desired-scale")).toHaveTextContent(`${initReplicas}`);
+    expect(await component.findByTestId("current-scale")).toHaveTextContent(`${initReplicas}`);
+    expect((component.baseElement.querySelector("input")?.value)).toBe(`${initReplicas}`);
+
+    // edge case, desiredScale must >= 0
+    let times = 10;
+
+    for (let i = 0; i < times; i++) {
+      fireEvent.click(down);
+    }
+    expect(await component.findByTestId("desired-scale")).toHaveTextContent("0");
+    expect((component.baseElement.querySelector("input")?.value)).toBe("0");
+
+    // edge case, desiredScale must <= scaleMax (100)
+    times = 120;
+
+    for (let i = 0; i < times; i++) {
+      fireEvent.click(up);
+    }
+    expect(await component.findByTestId("desired-scale")).toHaveTextContent("100");
+    expect((component.baseElement.querySelector("input")?.value)).toBe("100");
+    expect(await component.findByTestId("warning"))
+      .toHaveTextContent("High number of replicas may cause cluster performance issues");
+  });
+});
@@ -0,0 +1,182 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./dialog.scss";
+
+import type { StatefulSet, StatefulSetApi } from "../../../../common/k8s-api/endpoints";
+import React, { Component } from "react";
+import type { IObservableValue } from "mobx";
+import { computed, makeObservable, observable } from "mobx";
+import { observer } from "mobx-react";
+import type { DialogProps } from "../../dialog";
+import { Dialog } from "../../dialog";
+import { Wizard, WizardStep } from "../../wizard";
+import { Icon } from "../../icon";
+import { Slider } from "../../slider";
+import { Notifications } from "../../notifications";
+import { cssNames } from "../../../utils";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import statefulSetApiInjectable from "../../../../common/k8s-api/endpoints/stateful-set.api.injectable";
+import statefulSetDialogStateInjectable from "./dialog-state.injectable";
+
+export interface StatefulSetScaleDialogProps extends Partial<DialogProps> {
+}
+
+interface Dependencies {
+  statefulSetApi: StatefulSetApi;
+  state: IObservableValue<StatefulSet | undefined>;
+}
+
+@observer
+class NonInjectedStatefulSetScaleDialog extends Component<StatefulSetScaleDialogProps & Dependencies> {
+  @observable ready = false;
+  @observable currentReplicas = 0;
+  @observable desiredReplicas = 0;
+
+  constructor(props: StatefulSetScaleDialogProps & Dependencies) {
+    super(props);
+    makeObservable(this);
+  }
+
+  close = () => {
+    this.props.state.set(undefined);
+  };
+
+  onOpen = async (statefulSet: StatefulSet) => {
+    this.currentReplicas = await this.props.statefulSetApi.getReplicas({
+      namespace: statefulSet.getNs(),
+      name: statefulSet.getName(),
+    });
+    this.desiredReplicas = this.currentReplicas;
+    this.ready = true;
+  };
+
+  onClose = () => {
+    this.ready = false;
+  };
+
+  onChange = (evt: React.ChangeEvent, value: number) => {
+    this.desiredReplicas = value;
+  };
+
+  @computed get scaleMax() {
+    const { currentReplicas } = this;
+    const defaultMax = 50;
+
+    return currentReplicas <= defaultMax
+      ? defaultMax * 2
+      : currentReplicas * 2;
+  }
+
+  scale = async (statefulSet: StatefulSet) => {
+    const { currentReplicas, desiredReplicas, close } = this;
+
+    try {
+      if (currentReplicas !== desiredReplicas) {
+        await this.props.statefulSetApi.scale({
+          name: statefulSet.getName(),
+          namespace: statefulSet.getNs(),
+        }, desiredReplicas);
+      }
+      close();
+    } catch (error) {
+      Notifications.checkedError(error, "Unknown error occured while scaling StatefulSet");
+    }
+  };
+
+  private readonly scaleMin = 0;
+
+  desiredReplicasUp = () => {
+    this.desiredReplicas = Math.min(this.scaleMax, this.desiredReplicas + 1);
+  };
+
+  desiredReplicasDown = () => {
+    this.desiredReplicas = Math.max(this.scaleMin, this.desiredReplicas - 1);
+  };
+
+  renderContents(statefulSet: StatefulSet) {
+    const { currentReplicas, desiredReplicas, onChange, scaleMax } = this;
+    const warning = currentReplicas < 10 && desiredReplicas > 90;
+
+    return (
+      <Wizard
+        header={(
+          <h5>
+            Scale Stateful Set
+            <span>{statefulSet.getName()}</span>
+          </h5>
+        )}
+        done={this.close}
+      >
+        <WizardStep
+          contentClass="flex gaps column"
+          next={() => this.scale(statefulSet)}
+          nextLabel="Scale"
+          disabledNext={!this.ready}
+        >
+          <div className="current-scale" data-testid="current-scale">
+            {`Current replica scale: ${currentReplicas}`}
+          </div>
+          <div className="flex gaps align-center">
+            <div className="desired-scale" data-testid="desired-scale">
+              {`Desired number of replicas: ${desiredReplicas}`}
+            </div>
+            <div className="slider-container flex align-center" data-testid="slider">
+              <Slider
+                value={desiredReplicas}
+                max={scaleMax}
+                onChange={onChange}
+              />
+            </div>
+            <div className="plus-minus-container flex gaps">
+              <Icon
+                material="add_circle_outline"
+                onClick={this.desiredReplicasUp}
+                data-testid="desired-replicas-up"
+              />
+              <Icon
+                material="remove_circle_outline"
+                onClick={this.desiredReplicasDown}
+                data-testid="desired-replicas-down"
+              />
+            </div>
+          </div>
+          {warning && (
+            <div className="warning" data-testid="warning">
+              <Icon material="warning"/>
+              High number of replicas may cause cluster performance issues
+            </div>
+          )}
+        </WizardStep>
+      </Wizard>
+    );
+  }
+
+  render() {
+    const { className, state, ...dialogProps } = this.props;
+    const statefulSet = state.get();
+
+    return (
+      <Dialog
+        {...dialogProps}
+        isOpen={Boolean(statefulSet)}
+        className={cssNames("StatefulSetScaleDialog", className)}
+        onOpen={statefulSet && (() => this.onOpen(statefulSet))}
+        onClose={this.onClose}
+        close={this.close}
+      >
+        {statefulSet && this.renderContents(statefulSet)}
+      </Dialog>
+    );
+  }
+}
+
+export const StatefulSetScaleDialog = withInjectables<Dependencies, StatefulSetScaleDialogProps>(NonInjectedStatefulSetScaleDialog, {
+  getProps: (di, props) => ({
+    ...props,
+    statefulSetApi: di.inject(statefulSetApiInjectable),
+    state: di.inject(statefulSetDialogStateInjectable),
+  }),
+});
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { StatefulSet } from "../../../../common/k8s-api/endpoints";
+import { getInjectable } from "@ogre-tools/injectable";
+import statefulSetDialogStateInjectable from "./dialog-state.injectable";
+
+export type OpenStatefulSetScaleDialog = (obj: StatefulSet) => void;
+
+const openStatefulSetScaleDialogInjectable = getInjectable({
+  id: "open-stateful-set-scale-dialog",
+  instantiate: (di): OpenStatefulSetScaleDialog => {
+    const state = di.inject(statefulSetDialogStateInjectable);
+
+    return (obj) => state.set(obj);
+  },
+});
+
+export default openStatefulSetScaleDialogInjectable;