Extract top menu item for opening context menu using the new competition

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

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

src/renderer/components/layout/top-bar/top-bar-items/context-menu/context-menu-top-bar-item.injectable.ts

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

src/renderer/components/layout/top-bar/top-bar-items/context-menu/context-menu.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { withInjectables } from "@ogre-tools/injectable-react";
+import React from "react";
+import styles from "../../top-bar.module.scss";
+import openAppContextMenuInjectable from "./open-app-context-menu/open-app-context-menu.injectable";
+
+interface Dependencies {
+  openAppContextMenu: () => void;
+}
+
+const NonInjectedContextMenu = ({ openAppContextMenu }: Dependencies) => (
+  <div className={styles.winMenu}>
+    <div onClick={openAppContextMenu} data-testid="window-menu">
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        shapeRendering="crispEdges"
+      >
+        <path fill="currentColor" d="M0,8.5h12v1H0V8.5z" />
+        <path fill="currentColor" d="M0,5.5h12v1H0V5.5z" />
+        <path fill="currentColor" d="M0,2.5h12v1H0V2.5z" />
+      </svg>
+    </div>
+  </div>
+);
+
+export const ContextMenu = withInjectables<Dependencies>(
+  NonInjectedContextMenu,
+
+  {
+    getProps: (di) => ({
+      openAppContextMenu: di.inject(openAppContextMenuInjectable),
+    }),
+  },
+);

src/renderer/components/layout/top-bar/top-bar-items/context-menu/open-app-context-menu/open-app-context-menu.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 openAppContextMenuInjectable from "./open-app-context-menu.injectable";
+import { getGlobalOverrideForFunction } from "../../../../../../../common/test-utils/get-global-override-for-function";
+
+export default getGlobalOverrideForFunction(openAppContextMenuInjectable);

src/renderer/components/layout/top-bar/top-bar-items/context-menu/open-app-context-menu/open-app-context-menu.injectable.ts

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import { emitOpenAppMenuAsContextMenu } from "../../../ipc";
+import { emitOpenAppMenuAsContextMenu } from "../../../../../../ipc";
 
 const openAppContextMenuInjectable = getInjectable({
   id: "open-app-context-menu",

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

@@ -18,7 +18,7 @@ import closeWindowInjectable from "./close-window.injectable";
 import goBackInjectable from "./go-back.injectable";
 import goForwardInjectable from "./go-forward.injectable";
 import maximizeWindowInjectable from "./maximize-window.injectable";
-import openAppContextMenuInjectable from "./open-app-context-menu.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 topBarStateInjectable from "./state.injectable";
 import platformInjectable from "../../../../common/vars/platform.injectable";

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

@@ -18,7 +18,6 @@ import routeIsActiveInjectable from "../../../routes/route-is-active.injectable"
 import { UpdateButton } from "../../../../features/application-update/child-features/application-update-using-top-bar/renderer/update-button";
 import topBarPrevEnabledInjectable from "./prev-enabled.injectable";
 import topBarNextEnabledInjectable from "./next-enabled.injectable";
-import openAppContextMenuInjectable from "./open-app-context-menu.injectable";
 import goBackInjectable from "./go-back.injectable";
 import goForwardInjectable from "./go-forward.injectable";
 import closeWindowInjectable from "./close-window.injectable";
@@ -39,7 +38,6 @@ interface Dependencies {
   isLinux: boolean;
   prevEnabled: IComputedValue<Boolean>;
   nextEnabled: IComputedValue<Boolean>;
-  openAppContextMenu: () => void;
   goBack: () => void;
   goForward: () => void;
   minimizeWindow: () => void;
@@ -59,7 +57,6 @@ const NonInjectedTopBar = observer(({
   isLinux,
   prevEnabled,
   nextEnabled,
-  openAppContextMenu,
   goBack,
   goForward,
   closeWindow,
@@ -93,22 +90,6 @@ const NonInjectedTopBar = observer(({
           return <Component key={item.id} />;
         })}
 
-        {(isWindows || isLinux) && (
-          <div className={styles.winMenu}>
-            <div onClick={openAppContextMenu} data-testid="window-menu">
-              <svg
-                width="12"
-                height="12"
-                viewBox="0 0 12 12"
-                shapeRendering="crispEdges"
-              >
-                <path fill="currentColor" d="M0,8.5h12v1H0V8.5z" />
-                <path fill="currentColor" d="M0,5.5h12v1H0V5.5z" />
-                <path fill="currentColor" d="M0,2.5h12v1H0V2.5z" />
-              </svg>
-            </div>
-          </div>
-        )}
         <Icon
           data-testid="home-button"
           material="home"
@@ -199,11 +180,12 @@ export const TopBar = withInjectables<Dependencies>(NonInjectedTopBar, {
     isWindows: di.inject(isWindowsInjectable),
     prevEnabled: di.inject(topBarPrevEnabledInjectable),
     nextEnabled: di.inject(topBarNextEnabledInjectable),
+
     welcomeRouteIsActive: di.inject(
       routeIsActiveInjectable,
       di.inject(welcomeRouteInjectable),
     ),
-    openAppContextMenu: di.inject(openAppContextMenuInjectable),
+
     goBack: di.inject(goBackInjectable),
     goForward: di.inject(goForwardInjectable),
     closeWindow: di.inject(closeWindowInjectable),

src/renderer/getDiForUnitTesting.tsx

@@ -38,7 +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 openAppContextMenuInjectable from "./components/layout/top-bar/open-app-context-menu.injectable";
 import goBackInjectable from "./components/layout/top-bar/go-back.injectable";
 import goForwardInjectable from "./components/layout/top-bar/go-forward.injectable";
 import closeWindowInjectable from "./components/layout/top-bar/close-window.injectable";
@@ -149,7 +148,6 @@ export const getDiForUnitTesting = (
 
     di.override(environmentVariablesInjectable, () => ({}));
     di.override(watchHistoryStateInjectable, () => () => () => {});
-    di.override(openAppContextMenuInjectable, () => () => {});
     di.override(goBackInjectable, () => () => {});
     di.override(goForwardInjectable, () => () => {});
     di.override(closeWindowInjectable, () => () => {});