Making apiBase injectable (#6022)

* Making apiBase injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Convert all of Helm functions to be DI Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make PortForward's use of apiBase fully injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Convert all metric requests to be injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Replace resource applier with injectables Signed-off-by: Sebastian Malton <sebastian@malton.name> * Switch KubeJsonApi.forCluster to be injectable but do not use Signed-off-by: Sebastian Malton <sebastian@malton.name> * Convert the rest of shell sessions to be DI-ed - This is a prerequesit for using the new createKubeJsonApiForClusterInjectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Use new createKubeJsonApiForClusterInjectable for openNodeShellSession Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make KubeconfigDialog injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove jest-fetch-mock and make fetch injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix tests with new global override Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add new injectable for create KubeJsonApi and JsonApi instances Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix showing-details-for-helm-release behavioural tests - Remove HelmChartStore in favour of all injectables - Create a model for UpgradeChartDockTab Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix show details and updating helm releases tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix residual typing issues related to metrics Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix crash on load due to circular dependency Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix create resource tab not working Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove legacy apiBase global Signed-off-by: Sebastian Malton <sebastian@malton.name> * Introduce and use isDebuggingInjectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Introduce and use windowLocationInjectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove global legacy apiKube Signed-off-by: Sebastian Malton <sebastian@malton.name> * Improve injectable filenames compared to the injectables inside Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove modifying input in requestActivePortForwardInjectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Introduce and use get(Milli)SecondsFromUnixEpochInjectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Switch to non-reactive way of gettting possible helm release versions Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix typo Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix bug in KubeApi constructor Signed-off-by: Sebastian Malton <sebastian@malton.name> * Convert all KubeApi related tests to use asyncFn Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix unit tests after introducing new injectables that have side effects Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix bad rebase causing tests to fail Signed-off-by: Sebastian Malton <sebastian@malton.name> * Improve expects for multiple field values Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix crash will looking up api refs Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix breaking change on KubeApi.list Signed-off-by: Sebastian Malton <sebastian@malton.name> * Better fix for formatting urls Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove injectable for time since we should just use useMockTime Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add happy path behavioural tests for upgrade chart tab Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove debug message Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update snapshots Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix showing-details-for-helm-release tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix installing-helm-chart-from-new-tab tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix tests relating to hosted cluster id Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update snapshots to recent changes in master Co-authored-by: Janne Savolainen <janne.savolainen@live.fi> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Reupdated upgrade chart new tab test snapshots Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix flakiness in unit test when using <Animated> Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix flakiness and improve tests for DeleteClusterDialog Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix kubeconfig-sync tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix <Extensions> tests by removing mockFs and making everything injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix build issues Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix getElectronAppPathInjectable override not returning absolute paths - Also fixes the listing-active-helm-repos-in-prefs tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Replace all uses of getAbsolutePath with joinPaths as it is more correct and less confusing Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix opening application window tests by making override properly absolute Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update snapshots relating no longer using getAbsolutePath Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix and add behavioural tests for RenderDelay Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix extension discovery tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix test flakiness because of path side effects, propagate uses to as many places Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix extension-discovery tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add global override to fix some tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Rewrite and fix implementation of KubeconfigManager and its tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix tests by global override pathExists Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix unit tests failing on windows by using injectable verions of path functions Signed-off-by: Sebastian Malton <sebastian@malton.name> * Attempt to fix test timeout by using runInAction Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update snapshots after rebase Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update snapshots after rebase Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix tests after rebase Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix setupIpcMainHandlers usage Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update snapshots Signed-off-by: Sebastian Malton <sebastian@malton.name> Signed-off-by: Sebastian Malton <sebastian@malton.name> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> Co-authored-by: Iku-turso <mikko.aspiala@gmail.com>
2025-05-20 05:10:56 +00:00 · 2022-10-05 08:10:36 -04:00
1 parent ed073d6562
commit 76066c5ebf
@@ -4,12 +4,13 @@
 */

 import "./animate.scss";
-import React from "react";
-import { observable, makeObservable } from "mobx";
-import { observer } from "mobx-react";
+import React, { useEffect, useState } from "react";
 import { cssNames, noop } from "../../utils";
 import { withInjectables } from "@ogre-tools/injectable-react";
+import type { RequestAnimationFrame } from "./request-animation-frame.injectable";
 import requestAnimationFrameInjectable from "./request-animation-frame.injectable";
+import defaultEnterDurationForAnimatedInjectable from "./default-enter-duration.injectable";
+import defaultLeaveDurationForAnimatedInjectable from "./default-leave-duration.injectable";

 export type AnimateName = "opacity" | "slide-right" | "opacity-scale" | string;

@@ -24,115 +25,89 @@ export interface AnimateProps {
 }

 interface Dependencies {
-  requestAnimationFrame: (callback: () => void) => void;
+  requestAnimationFrame: RequestAnimationFrame;
+  defaultEnterDuration: number;
+  defaultLeaveDuration: number;
 }

-@observer
-class DefaultedAnimate extends React.Component<AnimateProps & Dependencies & typeof DefaultedAnimate.defaultProps> {
-  static defaultProps = {
-    name: "opacity",
-    enter: true,
-    onEnter: noop,
-    onLeave: noop,
-    enterDuration: 100,
-    leaveDuration: 100,
-  };
+const NonInjectedAnimate = (propsAndDeps: AnimateProps & Dependencies) => {
+  const {
+    requestAnimationFrame,
+    defaultEnterDuration,
+    defaultLeaveDuration,
+    ...props
+  } = propsAndDeps;
+  const {
+    children,
+    enter = true,
+    enterDuration = defaultEnterDuration,
+    leaveDuration = defaultLeaveDuration,
+    name = "opacity",
+    onEnter: onEnterHandler = noop<[]>,
+    onLeave: onLeaveHandler = noop<[]>,
+  } = props;

-  @observable isVisible = !!this.props.enter;
-  @observable statusClassName = {
-    enter: false,
-    leave: false,
-  };
+  const [isVisible, setIsVisible] = useState(false);
+  const [showClassNameEnter, setShowClassNameEnter] = useState(false);
+  const [showClassNameLeave, setShowClassNameLeave] = useState(false);

-  constructor(props: AnimateProps & Dependencies & typeof DefaultedAnimate.defaultProps) {
-    super(props);
-    makeObservable(this);
-  }
+  const contentElem = React.Children.only(children) as React.ReactElement<React.HTMLAttributes<any>>;
+  const classNames = cssNames("Animate", name, contentElem.props.className, {
+    enter: showClassNameEnter,
+    leave: showClassNameLeave,
+  });

-  get contentElem() {
-    return React.Children.only(this.props.children) as React.ReactElement<React.HTMLAttributes<any>>;
-  }
-
-  private toggle(enter: boolean) {
+  useEffect(() => {
    if (enter) {
-      this.enter();
-    } else {
-      this.leave();
-    }
-  }
+      setIsVisible(true);

-  componentDidMount() {
-    this.toggle(this.props.enter);
-  }
+      requestAnimationFrame(() => {
+        setShowClassNameEnter(true);
+        onEnterHandler();
+      });

-  componentDidUpdate(prevProps: Readonly<AnimateProps>): void {
-    const { enter } = this.props;
+      return noop;
+    } else if (isVisible) {
+      setShowClassNameLeave(true);
+      onLeaveHandler();

-    if (prevProps.enter !== enter) {
-      this.toggle(enter);
-    }
-  }
+      // Cleanup after duration
+      const handle = setTimeout(() => {
+        setIsVisible(false);
+        setShowClassNameEnter(false);
+        setShowClassNameLeave(false);
+      }, leaveDuration);

-  enter() {
-    this.isVisible = true; // triggers render() to apply css-animation in existing dom
-
-    this.props.requestAnimationFrame(() => {
-      this.statusClassName.enter = true;
-      this.props.onEnter();
-    });
-  }
-
-  leave() {
-    if (!this.isVisible) return;
-    this.statusClassName.leave = true;
-    this.props.onLeave();
-    this.resetAfterLeaveDuration();
-  }
-
-  resetAfterLeaveDuration() {
-    setTimeout(() => this.reset(), this.props.leaveDuration);
-  }
-
-  reset() {
-    this.isVisible = false;
-    this.statusClassName.enter = false;
-    this.statusClassName.leave = false;
-  }
-
-  render() {
-    if (!this.isVisible) {
-      return null;
+      return () => clearTimeout(handle);
    }

-    const { name, enterDuration, leaveDuration } = this.props;
-    const contentElem = this.contentElem;
-    const cssVarsForAnimation = {
-      "--enter-duration": `${enterDuration}ms`,
-      "--leave-duration": `${leaveDuration}ms`,
-    } as React.CSSProperties;
+    return noop;
+  }, [enter]);

-    return React.cloneElement(contentElem, {
-      className: cssNames("Animate", name, contentElem.props.className, this.statusClassName),
-      children: contentElem.props.children,
-      style: {
-        ...contentElem.props.style,
-        ...cssVarsForAnimation,
-      },
-    });
+  if (!isVisible) {
+    return null;
  }
-}

-export const NonInjectedAnimate = (props: AnimateProps & Dependencies) => <DefaultedAnimate {...props} />;
-
-export const Animate = withInjectables<Dependencies, AnimateProps>(
-  NonInjectedAnimate,
-
-  {
-    getProps: (di, props) => ({
-      requestAnimationFrame: di.inject(requestAnimationFrameInjectable),
-      ...props,
-    }),
-  },
-);
+  const cssVarsForAnimation = {
+    "--enter-duration": `${enterDuration}ms`,
+    "--leave-duration": `${leaveDuration}ms`,
+  } as React.CSSProperties;

+  return React.cloneElement(contentElem, {
+    className: classNames,
+    children: contentElem.props.children,
+    style: {
+      ...contentElem.props.style,
+      ...cssVarsForAnimation,
+    },
+  });
+};

+export const Animate = withInjectables<Dependencies, AnimateProps>(NonInjectedAnimate, {
+  getProps: (di, props) => ({
+    ...props,
+    requestAnimationFrame: di.inject(requestAnimationFrameInjectable),
+    defaultEnterDuration: di.inject(defaultEnterDurationForAnimatedInjectable),
+    defaultLeaveDuration: di.inject(defaultLeaveDurationForAnimatedInjectable),
+  }),
+});