hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Extract top menu item for window controls as OCP

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

Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>
This commit is contained in:
Iku-turso 2022-08-16 14:39:40 +03:00 committed by Janne Savolainen
parent 23aeb96679
commit d7de5ce467
No known key found for this signature in database
GPG Key ID: 8C6CFB2FFFE8F68A
14 changed files with 162 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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

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

@ -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

8
src/renderer/components/layout/top-bar/toggle-maximize-window/toggle-maximize-window.global-override-for-injectable.ts Normal file
View File

@ -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);

4
src/renderer/components/layout/top-bar/toggle-maximize-window.injectable.ts → src/renderer/components/layout/top-bar/toggle-maximize-window/toggle-maximize-window.injectable.ts
View File

@ -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 { requestWindowAction } from "../../../ipc";
import { WindowAction } from "../../../../../common/ipc/window";
import { requestWindowAction } from "../../../../ipc";
const toggleMaximizeWindowInjectable = getInjectable({
id: "toggle-maximize-window",

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

@ -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),
}),
},
);

8
src/renderer/components/layout/top-bar/top-bar-items/window-controls/close-window/close-window.global-override-for-injectable.ts Normal file
View File

@ -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);

4
src/renderer/components/layout/top-bar/close-window.injectable.ts → src/renderer/components/layout/top-bar/top-bar-items/window-controls/close-window/close-window.injectable.ts
View File

@ -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 { requestWindowAction } from "../../../ipc";
import { WindowAction } from "../../../../../../../common/ipc/window";
import { requestWindowAction } from "../../../../../../ipc";
const closeWindowInjectable = getInjectable({
id: "close-window",

8
src/renderer/components/layout/top-bar/top-bar-items/window-controls/maximize-window/maximize-window.global-override-for-injectable.ts Normal file
View File

@ -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);

4
src/renderer/components/layout/top-bar/maximize-window.injectable.ts → src/renderer/components/layout/top-bar/top-bar-items/window-controls/maximize-window/maximize-window.injectable.ts
View File

@ -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 { requestWindowAction } from "../../../ipc";
import { WindowAction } from "../../../../../../../common/ipc/window";
import { requestWindowAction } from "../../../../../../ipc";
const maximizeWindowInjectable = getInjectable({
id: "maximize-window",

30
src/renderer/components/layout/top-bar/top-bar-items/window-controls/window-controls-top-bar-item.injectable.ts Normal file
View File

@ -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;

90
src/renderer/components/layout/top-bar/top-bar-items/window-controls/window-controls.tsx Normal file
View File

@ -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),
}),
},
);

6
src/renderer/components/layout/top-bar/top-bar.test.tsx
View File

@ -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";

74
src/renderer/components/layout/top-bar/top-bar.tsx
View File

@ -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 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 toggleMaximizeWindowInjectable from "./toggle-maximize-window/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),
}),

6
src/renderer/getDiForUnitTesting.tsx
View File

@ -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,