switched for scaling replicas with Slider component instead of Buttons+Input

Signed-off-by: Roman <ixrock@gmail.com>

packages/core/src/common/k8s-api/endpoints/replication-controller.api.ts

@@ -29,7 +29,7 @@ export class ReplicationControllerApi extends KubeApi<ReplicationController> {
     return this.request.get(this.getScaleApiUrl(params));
   }
 
-  scale(params: { namespace: string; name: string }, replicas: number) {
+  scale(params: { namespace: string; name: string }, replicas: number): Promise<Scale> {
     return this.request.patch(this.getScaleApiUrl(params), {
       data: {
         metadata: params,

packages/core/src/renderer/components/+workloads-replicationcontrollers/replicationcontroller-details.module.scss

@@ -4,10 +4,13 @@
  */
 
 .ReplicationControllerDetails {
-
-  .desiredReplicas {
+  .replicas {
     display: flex;
     gap: calc(var(--margin) * 2);
     align-items: center;
+
+    > * {
+      flex-shrink: 0;
+    }
   }
 }

packages/core/src/renderer/components/+workloads-replicationcontrollers/replicationcontroller-details.tsx

@@ -5,112 +5,60 @@
 
 import styles from "./replicationcontroller-details.module.scss";
 import React from "react";
-import { makeObservable, observable } from "mobx";
+import { action, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import type { ReplicationControllerStore } from "./replicationcontroller-store";
-import replicationControllerStoreInjectable from "./replicationcontroller-store.injectable";
 import type {
   ReplicationController,
   ReplicationControllerApi,
 } from "../../../common/k8s-api/endpoints";
 import replicationControllerApiInjectable
   from "../../../common/k8s-api/endpoints/replication-controller.api.injectable";
-import { Button } from "../button";
-import { Input } from "../input";
 import showErrorNotificationInjectable from "../notifications/show-error-notification.injectable";
 import type { ShowNotification } from "../notifications";
-import hideDetailsInjectable from "../kube-detail-params/hide-details.injectable";
+import { Slider } from "../slider";
 
 export interface ReplicationControllerDetailsProps extends KubeObjectDetailsProps<ReplicationController> {
 }
 
 interface Dependencies {
-  store: ReplicationControllerStore;
   api: ReplicationControllerApi;
   showNotificationError: ShowNotification;
-
-  hideDetails(): void;
 }
 
 @observer
 class NonInjectedReplicationControllerDetails<Props extends ReplicationControllerDetailsProps & Dependencies> extends React.Component<Props> {
-  @observable showScaleDialog = false;
+  @observable sliderReplicasValue = this.props.object.getDesiredReplicas();
+  @observable sliderReplicasDisabled = false;
 
   constructor(props: Props) {
     super(props);
     makeObservable(this);
   }
 
-  inputRef = React.createRef<Input>();
+  @action
+  async scale(replicas: number) {
+    const { object: resource, api, showNotificationError } = this.props;
 
-  scale(replicas: number) {
-    const { object: resource, api } = this.props;
-
-    return api.scale({
-      name: resource.getName(),
-      namespace: resource.getNs(),
-    }, replicas);
+    try {
+      await api.scale({
+        name: resource.getName(),
+        namespace: resource.getNs(),
+      }, replicas);
+    } catch (error) {
+      this.sliderReplicasValue = resource.getDesiredReplicas(); // rollback to last valid value
+      showNotificationError(error as Error);
+    }
   }
 
-  renderReplicasAndScaleDialog() {
-    const { object: resource, showNotificationError, hideDetails } = this.props;
-
-    if (this.showScaleDialog) {
-      return (
-        <div className={styles.desiredReplicas}>
-          <Input
-            type="number"
-            min={1}
-            max={100}
-            defaultValue={resource.getDesiredReplicas().toString()}
-            ref={this.inputRef}
-          />
-          <Button
-            accent
-            label="Cancel"
-            onClick={() => this.showScaleDialog = false}
-          />
-          <Button
-            primary
-            label="Scale"
-            onClick={async () => {
-              const inputComponent = this.inputRef.current;
-              const newScaleVal = Number(inputComponent?.getValue());
-
-              if (isNaN(newScaleVal)) return;
-
-              try {
-                await this.scale(newScaleVal);
-                this.showScaleDialog = false;
-                hideDetails();
-              } catch (err) {
-                showNotificationError(String(err));
-              }
-            }}
-          />
-        </div>
-      );
-    }
-
-    return (
-      <div className={styles.desiredReplicas}>
-        <div>
-          {resource.getDesiredReplicas()}
-        </div>
-        <Button
-          primary
-          label="Scale"
-          onClick={() => {
-            this.showScaleDialog = true;
-            requestAnimationFrame(() => this.inputRef.current?.focus());
-          }}
-        />
-      </div>
-    );
+  @action
+  async onScaleSliderChangeCommitted(evt: React.FormEvent<any>, replicas: number) {
+    this.sliderReplicasDisabled = true;
+    await this.scale(replicas);
+    this.sliderReplicasDisabled = false;
   }
 
   render() {
@@ -121,8 +69,20 @@ class NonInjectedReplicationControllerDetails<Props extends ReplicationControlle
         <DrawerTitle>
           Spec
         </DrawerTitle>
-        <DrawerItem name="Desired Replicas">
-          {this.renderReplicasAndScaleDialog()}
+        <DrawerItem name="Replicas">
+          <div className={styles.replicas}>
+            <div>{resource.getDesiredReplicas()}</div>
+            <div>Scale</div>
+            <Slider
+              min={0}
+              max={100}
+              valueLabelDisplay="auto"
+              disabled={this.sliderReplicasDisabled}
+              value={this.sliderReplicasValue}
+              onChange={(evt, value) => this.sliderReplicasValue = value}
+              onChangeCommitted={(event, value) => this.onScaleSliderChangeCommitted(event, value as number)}
+            />
+          </div>
         </DrawerItem>
         <DrawerItem name="Selectors" labelsOnly>
           {
@@ -156,9 +116,7 @@ class NonInjectedReplicationControllerDetails<Props extends ReplicationControlle
 export const ReplicationControllerDetails = withInjectables<Dependencies, ReplicationControllerDetailsProps>(NonInjectedReplicationControllerDetails, {
   getProps: (di, props) => ({
     ...props,
-    store: di.inject(replicationControllerStoreInjectable),
     api: di.inject(replicationControllerApiInjectable),
     showNotificationError: di.inject(showErrorNotificationInjectable),
-    hideDetails: di.inject(hideDetailsInjectable),
   }),
 });