Extract top menu item for window controls as OCP

Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>

Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>

src/features/application-update/child-features/application-update-using-top-bar/__snapshots__/installing-update-using-topbar-button.test.tsx.snap

@@ -64,9 +64,6 @@ exports[`encourage user to update when sufficient time passed since update was d
             </i>
           </button>
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -266,9 +263,6 @@ exports[`encourage user to update when sufficient time passed since update was d
             </span>
           </i>
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div

src/features/top-bar/extension-api/__snapshots__/extendability-using-extension-api.test.tsx.snap

@@ -47,9 +47,6 @@ exports[`extendability-using-extension-api given an extension with a weakly type
             </span>
           </i>
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -254,9 +251,6 @@ exports[`extendability-using-extension-api given an extension with top-bar items
             Some-content
           </div>
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -456,9 +450,6 @@ exports[`extendability-using-extension-api given an extension with top-bar items
             </span>
           </i>
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -658,9 +649,6 @@ exports[`extendability-using-extension-api renders 1`] = `
             </span>
           </i>
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div

src/renderer/components/layout/top-bar/toggle-maximize-window/toggle-maximize-window.global-override-for-injectable.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import toggleMaximizeWindowInjectable from "./toggle-maximize-window.injectable";
+import { getGlobalOverrideForFunction } from "../../../../../common/test-utils/get-global-override-for-function";
+
+export default getGlobalOverrideForFunction(toggleMaximizeWindowInjectable);

src/renderer/components/layout/top-bar/toggle-maximize-window/toggle-maximize-window.injectable.ts

@@ -3,8 +3,8 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import { WindowAction } from "../../../../common/ipc/window";
+import { WindowAction } from "../../../../../common/ipc/window";
-import { requestWindowAction } from "../../../ipc";
+import { requestWindowAction } from "../../../../ipc";
 
 const toggleMaximizeWindowInjectable = getInjectable({
   id: "toggle-maximize-window",

src/renderer/components/layout/top-bar/top-bar-items/navigation-to-home/navigation-to-home.tsx

@@ -6,25 +6,25 @@ import React from "react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { IComputedValue } from "mobx";
 import { Icon } from "../../../../icon";
-import navigateToCatalogInjectable from "../../../../../../common/front-end-routing/routes/catalog/navigate-to-catalog.injectable";
 import routeIsActiveInjectable from "../../../../../routes/route-is-active.injectable";
-import catalogRouteInjectable from "../../../../../../common/front-end-routing/routes/catalog/catalog-route.injectable";
 import { observer } from "mobx-react";
+import welcomeRouteInjectable from "../../../../../../common/front-end-routing/routes/welcome/welcome-route.injectable";
+import navigateToWelcomeInjectable from "../../../../../../common/front-end-routing/routes/welcome/navigate-to-welcome.injectable";
 
 interface Dependencies {
-  catalogRouteIsActive: IComputedValue<boolean>;
+  disabled: IComputedValue<boolean>;
   goHome: () => void;
 }
 
 const NonInjectedNavigationToHome = observer(({
-  catalogRouteIsActive,
+  disabled,
   goHome,
 }: Dependencies) => (
   <Icon
     data-testid="home-button"
     material="home"
     onClick={goHome}
-    disabled={catalogRouteIsActive.get()}
+    disabled={disabled.get()}
   />
 ));
 
@@ -33,12 +33,12 @@ export const NavigationToHome = withInjectables<Dependencies>(
 
   {
     getProps: (di) => ({
-      catalogRouteIsActive: di.inject(
+      disabled: di.inject(
         routeIsActiveInjectable,
-        di.inject(catalogRouteInjectable),
+        di.inject(welcomeRouteInjectable),
       ),
 
-      goHome: di.inject(navigateToCatalogInjectable),
+      goHome: di.inject(navigateToWelcomeInjectable),
     }),
   },
 );

src/renderer/components/layout/top-bar/top-bar-items/window-controls/close-window/close-window.global-override-for-injectable.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import closeWindowInjectable from "./close-window.injectable";
+import { getGlobalOverrideForFunction } from "../../../../../../../common/test-utils/get-global-override-for-function";
+
+export default getGlobalOverrideForFunction(closeWindowInjectable);

src/renderer/components/layout/top-bar/top-bar-items/window-controls/close-window/close-window.injectable.ts

@@ -3,8 +3,8 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import { WindowAction } from "../../../../common/ipc/window";
+import { WindowAction } from "../../../../../../../common/ipc/window";
-import { requestWindowAction } from "../../../ipc";
+import { requestWindowAction } from "../../../../../../ipc";
 
 const closeWindowInjectable = getInjectable({
   id: "close-window",

src/renderer/components/layout/top-bar/top-bar-items/window-controls/maximize-window/maximize-window.global-override-for-injectable.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import maximizeWindowInjectable from "./maximize-window.injectable";
+import { getGlobalOverrideForFunction } from "../../../../../../../common/test-utils/get-global-override-for-function";
+
+export default getGlobalOverrideForFunction(maximizeWindowInjectable);

src/renderer/components/layout/top-bar/top-bar-items/window-controls/maximize-window/maximize-window.injectable.ts

@@ -3,8 +3,8 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import { WindowAction } from "../../../../common/ipc/window";
+import { WindowAction } from "../../../../../../../common/ipc/window";
-import { requestWindowAction } from "../../../ipc";
+import { requestWindowAction } from "../../../../../../ipc";
 
 const maximizeWindowInjectable = getInjectable({
   id: "maximize-window",

src/renderer/components/layout/top-bar/top-bar-items/window-controls/window-controls-top-bar-item.injectable.ts

@@ -0,0 +1,30 @@
+/**
+ * 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 { computed } from "mobx";
+import topBarItemInjectionToken from "../top-bar-item-injection-token";
+import { WindowControls } from "./window-controls";
+import isWindowsInjectable from "../../../../../../common/vars/is-windows.injectable";
+import isLinuxInjectable from "../../../../../../common/vars/is-linux.injectable";
+
+const windowControlsTopBarItemInjectable = getInjectable({
+  id: "window-controls-top-bar-item",
+
+  instantiate: (di) => {
+    const isWindows = di.inject(isWindowsInjectable);
+    const isLinux = di.inject(isLinuxInjectable);
+
+    return ({
+      id: "window-controls",
+      orderNumber: 110,
+      isShown: computed(() => (isWindows || isLinux)),
+      Component: WindowControls,
+    });
+  },
+
+  injectionToken: topBarItemInjectionToken,
+});
+
+export default windowControlsTopBarItemInjectable;

src/renderer/components/layout/top-bar/top-bar-items/window-controls/window-controls.tsx

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import { cssNames } from "../../../../../utils";
+import styles from "../../top-bar.module.scss";
+import isLinuxInjectable from "../../../../../../common/vars/is-linux.injectable";
+import toggleMaximizeWindowInjectable from "../../toggle-maximize-window/toggle-maximize-window.injectable";
+import closeWindowInjectable from "./close-window/close-window.injectable";
+import maximizeWindowInjectable from "./maximize-window/maximize-window.injectable";
+
+interface Dependencies {
+  isLinux: boolean;
+  toggleMaximizeWindow: () => void;
+  closeWindow: () => void;
+  minimizeWindow: () => void;
+}
+
+const NonInjectedWindowControls = ({
+  isLinux,
+  toggleMaximizeWindow,
+  closeWindow,
+  minimizeWindow,
+}: Dependencies) => (
+  <div
+    className={cssNames(styles.windowButtons, {
+      [styles.linuxButtons]: isLinux,
+    })}
+  >
+    <div
+      className={styles.minimize}
+      data-testid="window-minimize"
+      onClick={minimizeWindow}
+    >
+      <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
+        <rect
+          fill="currentColor"
+          width="10"
+          height="1"
+          x="1"
+          y="9" />
+      </svg>
+    </div>
+
+    <div
+      className={styles.maximize}
+      data-testid="window-maximize"
+      onClick={toggleMaximizeWindow}
+    >
+      <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
+        <rect
+          width="9"
+          height="9"
+          x="1.5"
+          y="1.5"
+          fill="none"
+          stroke="currentColor"
+        />
+      </svg>
+    </div>
+
+    <div
+      className={styles.close}
+      data-testid="window-close"
+      onClick={closeWindow}
+    >
+      <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
+        <polygon
+          fill="currentColor"
+          points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
+        />
+      </svg>
+    </div>
+  </div>
+);
+
+export const WindowControls = withInjectables<Dependencies>(
+  NonInjectedWindowControls,
+
+  {
+    getProps: (di) => ({
+      isLinux: di.inject(isLinuxInjectable),
+      toggleMaximizeWindow: di.inject(toggleMaximizeWindowInjectable),
+      closeWindow: di.inject(closeWindowInjectable),
+      minimizeWindow: di.inject(maximizeWindowInjectable),
+    }),
+  },
+);

src/renderer/components/layout/top-bar/top-bar.test.tsx

@@ -13,11 +13,11 @@ import type { DiRender } from "../../test-utils/renderFor";
 import { renderFor } from "../../test-utils/renderFor";
 import { computed, observable } from "mobx";
 import rendererExtensionsInjectable from "../../../../extensions/renderer-extensions.injectable";
-import closeWindowInjectable from "./close-window.injectable";
+import closeWindowInjectable from "./top-bar-items/window-controls/close-window/close-window.injectable";
 import goBackInjectable from "./top-bar-items/navigation-to-back/go-back/go-back.injectable";
-import maximizeWindowInjectable from "./maximize-window.injectable";
+import maximizeWindowInjectable from "./top-bar-items/window-controls/maximize-window/maximize-window.injectable";
 import openAppContextMenuInjectable from "./top-bar-items/context-menu/open-app-context-menu/open-app-context-menu.injectable";
-import toggleMaximizeWindowInjectable from "./toggle-maximize-window.injectable";
+import toggleMaximizeWindowInjectable from "./toggle-maximize-window/toggle-maximize-window.injectable";
 import topBarStateInjectable from "./state.injectable";
 import platformInjectable from "../../../../common/vars/platform.injectable";
 import goForwardInjectable from "./top-bar-items/navigation-to-forward/go-forward/go-forward.injectable";

src/renderer/components/layout/top-bar/top-bar.tsx

@@ -7,13 +7,8 @@ import styles from "./top-bar.module.scss";
 import React, { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import type { IComputedValue } from "mobx";
-import { cssNames } from "../../../utils";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import isLinuxInjectable from "../../../../common/vars/is-linux.injectable";
+import toggleMaximizeWindowInjectable from "./toggle-maximize-window/toggle-maximize-window.injectable";
-import isWindowsInjectable from "../../../../common/vars/is-windows.injectable";
-import closeWindowInjectable from "./close-window.injectable";
-import maximizeWindowInjectable from "./maximize-window.injectable";
-import toggleMaximizeWindowInjectable from "./toggle-maximize-window.injectable";
 import watchHistoryStateInjectable from "../../../remote-helpers/watch-history-state.injectable";
 import topBarItemsInjectable from "./top-bar-items/top-bar-items.injectable";
 import type { TopBarItem } from "./top-bar-items/top-bar-item-injection-token";
@@ -22,21 +17,13 @@ import navigateToWelcomeInjectable from "../../../../common/front-end-routing/ro
 
 interface Dependencies {
   items: IComputedValue<TopBarItem[]>;
-  isWindows: boolean;
-  isLinux: boolean;
-  minimizeWindow: () => void;
   toggleMaximizeWindow: () => void;
-  closeWindow: () => void;
   watchHistoryState: () => () => void;
 }
 
 const NonInjectedTopBar = observer(
   ({
     items,
-    isWindows,
-    isLinux,
-    closeWindow,
-    minimizeWindow,
     toggleMaximizeWindow,
     watchHistoryState,
   }: Dependencies) => {
@@ -63,61 +50,6 @@ const NonInjectedTopBar = observer(
             return <Component key={item.id} />;
           })}
         </div>
-
-        <div className={styles.items}>
-          {(isWindows || isLinux) && (
-            <div
-              className={cssNames(styles.windowButtons, {
-                [styles.linuxButtons]: isLinux,
-              })}
-            >
-              <div
-                className={styles.minimize}
-                data-testid="window-minimize"
-                onClick={minimizeWindow}
-              >
-                <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
-                  <rect
-                    fill="currentColor"
-                    width="10"
-                    height="1"
-                    x="1"
-                    y="9" />
-                </svg>
-              </div>
-
-              <div
-                className={styles.maximize}
-                data-testid="window-maximize"
-                onClick={toggleMaximizeWindow}
-              >
-                <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
-                  <rect
-                    width="9"
-                    height="9"
-                    x="1.5"
-                    y="1.5"
-                    fill="none"
-                    stroke="currentColor"
-                  />
-                </svg>
-              </div>
-
-              <div
-                className={styles.close}
-                data-testid="window-close"
-                onClick={closeWindow}
-              >
-                <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
-                  <polygon
-                    fill="currentColor"
-                    points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
-                  />
-                </svg>
-              </div>
-            </div>
-          )}
-        </div>
       </div>
     );
   },
@@ -126,10 +58,6 @@ const NonInjectedTopBar = observer(
 export const TopBar = withInjectables<Dependencies>(NonInjectedTopBar, {
   getProps: (di) => ({
     items: di.inject(topBarItemsInjectable),
-    isLinux: di.inject(isLinuxInjectable),
-    isWindows: di.inject(isWindowsInjectable),
-    closeWindow: di.inject(closeWindowInjectable),
-    minimizeWindow: di.inject(maximizeWindowInjectable),
     toggleMaximizeWindow: di.inject(toggleMaximizeWindowInjectable),
     watchHistoryState: di.inject(watchHistoryStateInjectable),
   }),

src/renderer/getDiForUnitTesting.tsx

@@ -38,9 +38,6 @@ import platformInjectable from "../common/vars/platform.injectable";
 import startTopbarStateSyncInjectable from "./components/layout/top-bar/start-state-sync.injectable";
 import { registerMobX } from "@ogre-tools/injectable-extension-for-mobx";
 import watchHistoryStateInjectable from "./remote-helpers/watch-history-state.injectable";
-import closeWindowInjectable from "./components/layout/top-bar/close-window.injectable";
-import maximizeWindowInjectable from "./components/layout/top-bar/maximize-window.injectable";
-import toggleMaximizeWindowInjectable from "./components/layout/top-bar/toggle-maximize-window.injectable";
 import type { HotbarStore } from "../common/hotbars/store";
 import cronJobTriggerDialogClusterFrameChildComponentInjectable from "./components/+workloads-cronjobs/cron-job-trigger-dialog-cluster-frame-child-component.injectable";
 import deploymentScaleDialogClusterFrameChildComponentInjectable from "./components/+workloads-deployments/scale/deployment-scale-dialog-cluster-frame-child-component.injectable";
@@ -146,9 +143,6 @@ export const getDiForUnitTesting = (
 
     di.override(environmentVariablesInjectable, () => ({}));
     di.override(watchHistoryStateInjectable, () => () => () => {});
-    di.override(closeWindowInjectable, () => () => {});
-    di.override(maximizeWindowInjectable, () => () => {});
-    di.override(toggleMaximizeWindowInjectable, () => () => {});
 
     overrideFunctionalInjectables(di, [
       broadcastMessageInjectable,