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

Refactor <PreferencesNavigation>

Browse Source 
- Moving logic out of react component
- Remove 'fromExtension' prop from navigaion items

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-06-21 10:04:16 +03:00
parent 2a5c7317bf
commit 48ddfbc749
9 changed files with 182 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/renderer/components/+preferences/preferences-navigation/__tests__/preferences-navigation.test.tsx
View File

@ -10,10 +10,11 @@ import { getDiForUnitTesting } from "../../../../getDiForUnitTesting";
import { type DiRender, renderFor } from "../../../test-utils/renderFor";
import { PreferencesNavigation } from "../preferences-navigation";
import type { PreferenceNavigationItem } from "../preference-navigation-items.injectable";
import preferenceNavigationItemsInjectable from "../preference-navigation-items.injectable";
import { computed } from "mobx";
import { noop } from "../../../../utils";
import type { IComputedValue } from "mobx/dist/internal";
import generalPreferenceNavigationItemsInjectable from "../general-preference-navigation-items.injectable";
import extensionsPreferenceNavigationItemsInjectable from "../extension-preference-navigation-items.injectable";
describe("<PreferencesNavigation />", () => {
let di: DiContainer;
@ -40,6 +41,7 @@ describe("<PreferencesNavigation />", () => {
isVisible: computed(() => true),
navigate: () => noop,
orderNumber: 0,
parent: "",
},
{
id: "proxy",
@ -48,10 +50,11 @@ describe("<PreferencesNavigation />", () => {
isVisible: computed(() => true),
navigate: () => noop,
orderNumber: 1,
parent: "",
},
]);
di.override(preferenceNavigationItemsInjectable, () => generalNavItems);
di.override(generalPreferenceNavigationItemsInjectable, () => generalNavItems);
});
it("renders them", () => {
@ -91,7 +94,9 @@ describe("<PreferencesNavigation />", () => {
navigate: () => noop,
orderNumber: 1,
},
// Extension navigation items
]);
const extensionNavItems: IComputedValue<PreferenceNavigationItem[]> = computed(() => [
{
id: "extension-preferences-navigation-item-lensapp-node-menu",
label: "lensapp-node-menu",
@ -99,7 +104,7 @@ describe("<PreferencesNavigation />", () => {
isVisible: computed(() => true),
navigate: () => noop,
orderNumber: 0,
fromExtension: true,
parent: "extensions",
},
{
id: "extension-preferences-navigation-item-lensapp-pod-menu",
@ -108,7 +113,7 @@ describe("<PreferencesNavigation />", () => {
isVisible: computed(() => true),
navigate: () => noop,
orderNumber: 0,
fromExtension: true,
parent: "extensions",
},
{
id: "extension-preferences-navigation-item-metrics-plugin",
@ -117,11 +122,12 @@ describe("<PreferencesNavigation />", () => {
isVisible: computed(() => false),
navigate: () => noop,
orderNumber: 0,
fromExtension: true,
parent: "extensions",
},
]);
di.override(preferenceNavigationItemsInjectable, () => generalNavItems);
di.override(generalPreferenceNavigationItemsInjectable, () => generalNavItems);
di.override(extensionsPreferenceNavigationItemsInjectable, () => extensionNavItems);
});
it("renders general navigation items", () => {

26
src/renderer/components/+preferences/preferences-navigation/extension-preference-navigation-items.injectable.ts Normal file
View File

@ -0,0 +1,26 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { pipeline } from "@ogre-tools/fp";
import { getInjectable } from "@ogre-tools/injectable";
import { filter, orderBy } from "lodash/fp";
import { computed } from "mobx";
import { PreferenceNavigationItem, preferenceNavigationItemInjectionToken } from "./preference-navigation-items.injectable";
const extensionsPreferenceNavigationItemsInjectable = getInjectable({
id: "extension-preference-navigation-items",
instantiate: (di) =>
computed((): PreferenceNavigationItem[] =>
pipeline(
di.injectMany(preferenceNavigationItemInjectionToken),
filter((item) => !!item.isVisible.get()),
filter((item) => item.parent == "extensions"),
(items) => orderBy([(item) => item.orderNumber], ["asc"], items),
),
),
});
export default extensionsPreferenceNavigationItemsInjectable;

51
src/renderer/components/+preferences/preferences-navigation/extensions-nav-group.tsx Normal file
View File

@ -0,0 +1,51 @@
import React from "react";
import { withInjectables } from "@ogre-tools/injectable-react";
import type { IComputedValue } from "mobx";
import type { PreferenceNavigationItem } from "./preference-navigation-items.injectable";
import { Icon } from "../../icon";
import { PreferencesNavigationTab } from "./preference-navigation-tab";
import extensionsPreferenceNavigationItemsInjectable from "./extension-preference-navigation-items.injectable";
interface Dependencies {
navigationItems: IComputedValue<PreferenceNavigationItem[]>
}
function NonInjectedExtensionsNavGroup(props: Dependencies) {
if (!props.navigationItems.get().length) {
return null;
}
return (
<div data-testid="extension-settings">
<hr/>
<div className="header flex items-center">
<Icon
material="extension"
smallest
className="mr-3"
/>
{" "}
Extensions
</div>
<div>
{props.navigationItems.get().map(item => (
<PreferencesNavigationTab
key={item.id}
item={item}
data-testid={`tab-link-for-${item.id}`}
/>
))}
</div>
</div>
)
}
export const ExtensionsNavGroup = withInjectables<Dependencies>(
NonInjectedExtensionsNavGroup,
{
getProps: (di) => ({
navigationItems: di.inject(extensionsPreferenceNavigationItemsInjectable)
})
}
)

2
src/renderer/components/+preferences/preferences-navigation/extensions-preferences-navigation-item-registrator.injectable.ts
View File

@ -43,7 +43,7 @@ const extensionPreferencesNavigationItemRegistratorInjectable = getInjectable({
isActive,
isVisible,
orderNumber: 20,
fromExtension: true,
parent: "extensions",
}),
});

40
src/renderer/components/+preferences/preferences-navigation/general-nav-group.tsx Normal file
View File

@ -0,0 +1,40 @@
import React from "react";
import { withInjectables } from "@ogre-tools/injectable-react";
import type { IComputedValue } from "mobx";
import type { PreferenceNavigationItem } from "./preference-navigation-items.injectable";
import { PreferencesNavigationTab } from "./preference-navigation-tab";
import generalPreferenceNavigationItemsInjectable from "./general-preference-navigation-items.injectable";
interface Dependencies {
navigationItems: IComputedValue<PreferenceNavigationItem[]>;
}
function NonInjectedGeneralNavGroup(props: Dependencies) {
if (!props.navigationItems.get().length) {
return null;
}
return (
<React.Fragment>
<div className="header">Preferences</div>
{props.navigationItems.get().map(item => (
<PreferencesNavigationTab
key={item.id}
item={item}
data-testid={`tab-link-for-${item.id}`}
/>
))}
</React.Fragment>
)
}
export const GeneralNavGroup = withInjectables<Dependencies>(
NonInjectedGeneralNavGroup,
{
getProps: (di) => ({
navigationItems: di.inject(generalPreferenceNavigationItemsInjectable),
})
}
)

26
src/renderer/components/+preferences/preferences-navigation/general-preference-navigation-items.injectable.ts Normal file
View File

@ -0,0 +1,26 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { pipeline } from "@ogre-tools/fp";
import { getInjectable } from "@ogre-tools/injectable";
import { filter, orderBy } from "lodash/fp";
import { computed } from "mobx";
import { PreferenceNavigationItem, preferenceNavigationItemInjectionToken } from "./preference-navigation-items.injectable";
const generalPreferenceNavigationItemsInjectable = getInjectable({
id: "general-preference-navigation-items",
instantiate: (di) =>
computed((): PreferenceNavigationItem[] =>
pipeline(
di.injectMany(preferenceNavigationItemInjectionToken),
filter((item) => !!item.isVisible.get()),
filter((item) => !item.parent),
(items) => orderBy([(item) => item.orderNumber], ["asc"], items),
),
),
});
export default generalPreferenceNavigationItemsInjectable;

2
src/renderer/components/+preferences/preferences-navigation/preference-navigation-items.injectable.ts
View File

@ -20,7 +20,7 @@ export interface PreferenceNavigationItem {
isVisible: IComputedValue<boolean>;
navigate: () => void;
orderNumber: number;
fromExtension?: boolean;
parent?: string;
}
const preferenceNavigationItemsInjectable = getInjectable({

17
src/renderer/components/+preferences/preferences-navigation/preference-navigation-tab.tsx Normal file
View File

@ -0,0 +1,17 @@
import { observer } from "mobx-react";
import React from "react";
import { Tab } from "../../tabs";
import type { PreferenceNavigationItem } from "./preference-navigation-items.injectable";
interface PreferenceNavigationTabProps extends React.DOMAttributes<HTMLElement> {
item: PreferenceNavigationItem;
}
export const PreferencesNavigationTab = observer(({ item }: PreferenceNavigationTabProps) => (
<Tab
value={item}
label={item.label}
data-testid={`tab-link-for-${item.id}`}
active={item.isActive.get()}
/>
));

80
src/renderer/components/+preferences/preferences-navigation/preferences-navigation.tsx
View File

@ -2,89 +2,23 @@
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { Tab, Tabs } from "../../tabs";
import { withInjectables } from "@ogre-tools/injectable-react";
import type { IComputedValue } from "mobx";
import React from "react";
import { Tabs } from "../../tabs";
import { ExtensionsNavGroup } from "./extensions-nav-group";
import { GeneralNavGroup } from "./general-nav-group";
import type {
PreferenceNavigationItem,
PreferenceNavigationItem
} from "./preference-navigation-items.injectable";
import preferenceNavigationItemsInjectable from "./preference-navigation-items.injectable";
import { observer } from "mobx-react";
import { Icon } from "../../icon";
interface Dependencies {
navigationItems: IComputedValue<PreferenceNavigationItem[]>;
}
const NonInjectedPreferencesNavigation = ({
navigationItems,
}: Dependencies) => {
const generalNavItems = navigationItems.get().filter(item => !item.fromExtension);
const extensionNavItems = navigationItems.get().filter(item => item.fromExtension);
function renderTab(item: PreferenceNavigationItem) {
return (
<PreferencesNavigationTab
key={item.id}
item={item}
data-testid={`tab-link-for-${item.id}`}
/>
);
}
export const PreferencesNavigation = () => {
return (
<Tabs
className="flex column"
scrollable={false}
onChange={(item: PreferenceNavigationItem) => item.navigate()}
>
<div className="header">Preferences</div>
{generalNavItems.map(renderTab)}
{extensionNavItems.length > 0 && (
<div data-testid="extension-settings">
<hr/>
<div className="header flex items-center">
<Icon
material="extension"
smallest
className="mr-3"
/>
{" "}
Extensions
</div>
<div>
{extensionNavItems.map(renderTab)}
</div>
</div>
)}
<GeneralNavGroup/>
<ExtensionsNavGroup/>
</Tabs>
);
};
interface PreferenceNavigationTabProps extends React.DOMAttributes<HTMLElement> {
item: PreferenceNavigationItem;
}
const PreferencesNavigationTab = observer(({ item }: PreferenceNavigationTabProps) => (
<Tab
value={item}
label={item.label}
data-testid={`tab-link-for-${item.id}`}
active={item.isActive.get()}
/>
));
export const PreferencesNavigation = withInjectables<Dependencies>(
NonInjectedPreferencesNavigation,
{
getProps: (di) => ({
navigationItems: di.inject(preferenceNavigationItemsInjectable),
}),
},
);