mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Start considering application preferences as default tab
Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
parent
40a5732b26
commit
629d86c5ff
@ -3,12 +3,18 @@
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import navigateToApplicationPreferencesInjectable from "../../../../features/preferences/common/navigate-to-application-preferences.injectable";
|
||||
import { navigateToRouteInjectionToken } from "../../navigate-to-route-injection-token";
|
||||
import preferencesRouteInjectable from "../../../../features/preferences/common/preferences-route.injectable";
|
||||
|
||||
const navigateToPreferencesInjectable = getInjectable({
|
||||
id: "navigate-to-preferences",
|
||||
|
||||
instantiate: (di) => di.inject(navigateToApplicationPreferencesInjectable),
|
||||
instantiate: (di) => {
|
||||
const navigateToRoute = di.inject(navigateToRouteInjectionToken);
|
||||
const preferencesRoute = di.inject(preferencesRouteInjectable);
|
||||
|
||||
return () => navigateToRoute(preferencesRoute);
|
||||
},
|
||||
});
|
||||
|
||||
export default navigateToPreferencesInjectable;
|
||||
|
||||
@ -1035,3 +1035,696 @@ exports[`preferences - navigation to application preferences given in some child
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`preferences - navigation to application preferences given in some child page of preferences, when rendered when navigating to preferences without specifying the tab renders 1`] = `
|
||||
<body>
|
||||
<div>
|
||||
<div
|
||||
class="ClusterManager"
|
||||
>
|
||||
<div
|
||||
class="topBar"
|
||||
>
|
||||
<div
|
||||
class="items"
|
||||
>
|
||||
<div
|
||||
class="preventedDragging"
|
||||
>
|
||||
<i
|
||||
class="Icon material interactive focusable"
|
||||
data-testid="home-button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="home"
|
||||
>
|
||||
home
|
||||
</span>
|
||||
</i>
|
||||
</div>
|
||||
<div
|
||||
class="size-sm"
|
||||
/>
|
||||
<div
|
||||
class="preventedDragging"
|
||||
>
|
||||
<i
|
||||
class="Icon material interactive disabled focusable"
|
||||
data-testid="history-back"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="arrow_back"
|
||||
>
|
||||
arrow_back
|
||||
</span>
|
||||
</i>
|
||||
</div>
|
||||
<div
|
||||
class="size-sm"
|
||||
/>
|
||||
<div
|
||||
class="preventedDragging"
|
||||
>
|
||||
<i
|
||||
class="Icon material interactive disabled focusable"
|
||||
data-testid="history-forward"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="arrow_forward"
|
||||
>
|
||||
arrow_forward
|
||||
</span>
|
||||
</i>
|
||||
</div>
|
||||
<div
|
||||
class="separator"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<div
|
||||
id="lens-views"
|
||||
/>
|
||||
<div
|
||||
class="SettingLayout showNavigation Preferences"
|
||||
>
|
||||
<nav
|
||||
class="sidebarRegion"
|
||||
>
|
||||
<div
|
||||
class="sidebar"
|
||||
>
|
||||
<div
|
||||
class="Tabs flex column"
|
||||
>
|
||||
<div
|
||||
data-preference-tab-group-test="general-tab-group"
|
||||
>
|
||||
<div
|
||||
class="header flex items-center"
|
||||
>
|
||||
Preferences
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center active"
|
||||
data-preference-tab-link-test="app"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
App
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center"
|
||||
data-preference-tab-link-test="proxy"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
Proxy
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center"
|
||||
data-preference-tab-link-test="kubernetes"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
Kubernetes
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center"
|
||||
data-preference-tab-link-test="editor"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
Editor
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center"
|
||||
data-preference-tab-link-test="terminal"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
Terminal
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="HorizontalLine"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div
|
||||
class="contentRegion"
|
||||
id="ScrollSpyRoot"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
>
|
||||
<section
|
||||
data-preference-page-test="application-page"
|
||||
id="application-page"
|
||||
>
|
||||
<h2
|
||||
data-preference-page-title-test="true"
|
||||
>
|
||||
Application
|
||||
</h2>
|
||||
<div
|
||||
data-preference-item-test="theme"
|
||||
>
|
||||
<section
|
||||
id="appearance"
|
||||
>
|
||||
<div
|
||||
class="SubTitle"
|
||||
>
|
||||
Theme
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="Select theme-lens css-b62m3t-container"
|
||||
>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-theme-input-live-region"
|
||||
/>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
/>
|
||||
<div
|
||||
class="Select__control css-1s2u09g-control"
|
||||
>
|
||||
<div
|
||||
class="Select__value-container css-319lph-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class="Select__placeholder css-14el2xx-placeholder"
|
||||
id="react-select-theme-input-placeholder"
|
||||
>
|
||||
Select...
|
||||
</div>
|
||||
<div
|
||||
class="Select__input-container css-6j8wv5-Input"
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-describedby="react-select-theme-input-placeholder"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
class="Select__input"
|
||||
id="theme-input"
|
||||
role="combobox"
|
||||
spellcheck="false"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<span
|
||||
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
class="HorizontalLine"
|
||||
/>
|
||||
<div
|
||||
data-preference-item-test="extension-install-registry"
|
||||
>
|
||||
<section
|
||||
id="extensionRegistryUrl"
|
||||
>
|
||||
<div
|
||||
class="SubTitle"
|
||||
>
|
||||
Extension Install Registry
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="Select theme-lens css-b62m3t-container"
|
||||
>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-extension-install-registry-input-live-region"
|
||||
/>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
/>
|
||||
<div
|
||||
class="Select__control css-1s2u09g-control"
|
||||
>
|
||||
<div
|
||||
class="Select__value-container css-319lph-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class="Select__placeholder css-14el2xx-placeholder"
|
||||
id="react-select-extension-install-registry-input-placeholder"
|
||||
>
|
||||
Select...
|
||||
</div>
|
||||
<div
|
||||
class="Select__input-container css-6j8wv5-Input"
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-describedby="react-select-extension-install-registry-input-placeholder"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
class="Select__input"
|
||||
id="extension-install-registry-input"
|
||||
role="combobox"
|
||||
spellcheck="false"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<span
|
||||
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
class="mt-4 mb-5 leading-relaxed"
|
||||
>
|
||||
This setting is to change the registry URL for installing extensions by name.
|
||||
If you are unable to access the default registry (https://registry.npmjs.org) you can change it in your
|
||||
<b>
|
||||
.npmrc
|
||||
</b>
|
||||
file or in the input below.
|
||||
</p>
|
||||
<div
|
||||
class="Input theme round black disabled invalid"
|
||||
>
|
||||
<label
|
||||
class="input-area flex gaps align-center"
|
||||
id=""
|
||||
>
|
||||
<input
|
||||
class="input box grow"
|
||||
disabled=""
|
||||
placeholder="Custom Extension Registry URL..."
|
||||
spellcheck="false"
|
||||
value="some-custom-url"
|
||||
/>
|
||||
</label>
|
||||
<div
|
||||
class="input-info flex gaps"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
class="HorizontalLine"
|
||||
/>
|
||||
<div
|
||||
data-preference-item-test="start-up"
|
||||
>
|
||||
<section
|
||||
id="other"
|
||||
>
|
||||
<div
|
||||
class="SubTitle"
|
||||
>
|
||||
Start-up
|
||||
|
||||
</div>
|
||||
<label
|
||||
class="Switch"
|
||||
data-testid="switch"
|
||||
>
|
||||
Automatically start Lens on login
|
||||
<input
|
||||
role="switch"
|
||||
type="checkbox"
|
||||
/>
|
||||
</label>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
class="HorizontalLine"
|
||||
/>
|
||||
<div
|
||||
data-preference-item-test="update-channel"
|
||||
>
|
||||
<section
|
||||
id="update-channel"
|
||||
>
|
||||
<div
|
||||
class="SubTitle"
|
||||
>
|
||||
Update Channel
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="Select theme-lens css-b62m3t-container"
|
||||
>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-update-channel-input-live-region"
|
||||
/>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
/>
|
||||
<div
|
||||
class="Select__control css-1s2u09g-control"
|
||||
>
|
||||
<div
|
||||
class="Select__value-container Select__value-container--has-value css-319lph-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class="Select__single-value css-qc6sy-singleValue"
|
||||
>
|
||||
Stable
|
||||
</div>
|
||||
<div
|
||||
class="Select__input-container css-6j8wv5-Input"
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
class="Select__input"
|
||||
id="update-channel-input"
|
||||
role="combobox"
|
||||
spellcheck="false"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<span
|
||||
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
class="HorizontalLine"
|
||||
/>
|
||||
<div
|
||||
data-preference-item-test="timezone"
|
||||
>
|
||||
<section
|
||||
id="locale"
|
||||
>
|
||||
<div
|
||||
class="SubTitle"
|
||||
>
|
||||
Locale Timezone
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="Select theme-lens css-b62m3t-container"
|
||||
>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-timezone-input-live-region"
|
||||
/>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
/>
|
||||
<div
|
||||
class="Select__control css-1s2u09g-control"
|
||||
>
|
||||
<div
|
||||
class="Select__value-container css-319lph-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class="Select__placeholder css-14el2xx-placeholder"
|
||||
id="react-select-timezone-input-placeholder"
|
||||
>
|
||||
Select...
|
||||
</div>
|
||||
<div
|
||||
class="Select__input-container css-6j8wv5-Input"
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-describedby="react-select-timezone-input-placeholder"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
class="Select__input"
|
||||
id="timezone-input"
|
||||
role="combobox"
|
||||
spellcheck="false"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<span
|
||||
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
class="toolsRegion"
|
||||
>
|
||||
<div
|
||||
class="fixed top-[60px]"
|
||||
>
|
||||
<div
|
||||
data-testid="close-preferences"
|
||||
>
|
||||
<div
|
||||
aria-label="Close"
|
||||
class="closeButton"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="Icon icon material focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="close"
|
||||
>
|
||||
close
|
||||
</span>
|
||||
</i>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="esc"
|
||||
>
|
||||
ESC
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div
|
||||
class="HotbarMenu flex column"
|
||||
>
|
||||
<div
|
||||
class="HotbarItems flex column gaps"
|
||||
/>
|
||||
<div
|
||||
class="HotbarSelector"
|
||||
>
|
||||
<i
|
||||
class="Icon Icon previous material interactive focusable"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="arrow_left"
|
||||
>
|
||||
arrow_left
|
||||
</span>
|
||||
</i>
|
||||
<div
|
||||
class="HotbarIndex"
|
||||
>
|
||||
<div
|
||||
class="badge Badge small clickable"
|
||||
id="hotbarIndex"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
</div>
|
||||
<i
|
||||
class="Icon material interactive focusable"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="arrow_right"
|
||||
>
|
||||
arrow_right
|
||||
</span>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="StatusBar"
|
||||
>
|
||||
<div
|
||||
class="leftSide"
|
||||
data-testid="status-bar-left"
|
||||
/>
|
||||
<div
|
||||
class="rightSide"
|
||||
data-testid="status-bar-right"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Notifications flex column align-flex-end"
|
||||
/>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
||||
@ -59,6 +59,25 @@ describe("preferences - navigation to application preferences", () => {
|
||||
expect(page).not.toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("when navigating to preferences without specifying the tab", () => {
|
||||
beforeEach(() => {
|
||||
builder.preferences.navigate();
|
||||
});
|
||||
|
||||
it("renders", () => {
|
||||
expect(rendered.baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("shows tab for application preferences for it being the default", () => {
|
||||
const page = getSingleElement(
|
||||
"preference-page",
|
||||
"application-page",
|
||||
)(rendered);
|
||||
|
||||
expect(page).not.toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -6,30 +6,28 @@ import { getInjectable } from "@ogre-tools/injectable";
|
||||
import { computed } from "mobx";
|
||||
import type { PreferenceTab, PreferenceTypes } from "./preference-item-injection-token";
|
||||
import type { Composite } from "../../../application-menu/main/menu-items/get-composite/get-composite";
|
||||
import routePathParametersInjectable from "../../../../renderer/routes/route-path-parameters.injectable";
|
||||
import preferencesRouteInjectable from "../../common/preferences-route.injectable";
|
||||
import { filter, map } from "lodash/fp";
|
||||
import { pipeline } from "@ogre-tools/fp";
|
||||
import { normalizeComposite } from "../../../application-menu/main/menu-items/get-composite/normalize-composite/normalize-composite";
|
||||
import preferencesCompositeInjectable from "./preferences-composite.injectable";
|
||||
import type { PreferenceTabsRoot } from "./preference-tab-root";
|
||||
import currentPreferenceTabIdInjectable from "./current-preference-tab-id.injectable";
|
||||
|
||||
const currentPreferenceTabCompositeInjectable = getInjectable({
|
||||
id: "current-preference-page-composite",
|
||||
|
||||
instantiate: (di) => {
|
||||
const preferencesRoute = di.inject(preferencesRouteInjectable);
|
||||
const routePathParameters = di.inject(routePathParametersInjectable, preferencesRoute);
|
||||
const currentTabId = di.inject(currentPreferenceTabIdInjectable);
|
||||
const preferencesComposite = di.inject(preferencesCompositeInjectable);
|
||||
|
||||
return computed(() => {
|
||||
const { preferenceTabId } = routePathParameters.get();
|
||||
const tabId = currentTabId.get();
|
||||
|
||||
const tabComposites = pipeline(
|
||||
normalizeComposite(preferencesComposite.get()),
|
||||
map(([, composite]) => composite),
|
||||
filter(isPreferenceTab),
|
||||
filter(hasMatchingPathId(preferenceTabId)),
|
||||
filter(hasMatchingPathId(tabId)),
|
||||
);
|
||||
|
||||
if (tabComposites.length === 0) {
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
/**
|
||||
* 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 preferencesRouteInjectable from "../../common/preferences-route.injectable";
|
||||
import routePathParametersInjectable from "../../../../renderer/routes/route-path-parameters.injectable";
|
||||
|
||||
const currentPreferenceTabIdInjectable = getInjectable({
|
||||
id: "current-preference-tab-id",
|
||||
|
||||
instantiate: (di) => {
|
||||
const preferencesRoute = di.inject(preferencesRouteInjectable);
|
||||
|
||||
const routePathParameters = di.inject(
|
||||
routePathParametersInjectable,
|
||||
preferencesRoute,
|
||||
);
|
||||
|
||||
return computed(
|
||||
() => routePathParameters.get().preferenceTabId || "app",
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
export default currentPreferenceTabIdInjectable;
|
||||
@ -6,7 +6,7 @@ import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
|
||||
import { computed } from "mobx";
|
||||
import routeIsActiveInjectable from "../../../../../renderer/routes/route-is-active.injectable";
|
||||
import preferencesRouteInjectable from "../../../common/preferences-route.injectable";
|
||||
import routePathParametersInjectable from "../../../../../renderer/routes/route-path-parameters.injectable";
|
||||
import currentPreferenceTabIdInjectable from "../../preference-items/current-preference-tab-id.injectable";
|
||||
|
||||
const preferenceTabIsActiveInjectable = getInjectable({
|
||||
id: "preference-tab-is-active",
|
||||
@ -14,11 +14,11 @@ const preferenceTabIsActiveInjectable = getInjectable({
|
||||
instantiate: (di, tabId: string) => {
|
||||
const route = di.inject(preferencesRouteInjectable);
|
||||
const routeIsActive = di.inject(routeIsActiveInjectable, route);
|
||||
const pathParameters = di.inject(routePathParametersInjectable, route);
|
||||
const currentTabId = di.inject(currentPreferenceTabIdInjectable);
|
||||
|
||||
return computed(
|
||||
() =>
|
||||
routeIsActive.get() && pathParameters.get().preferenceTabId === tabId,
|
||||
routeIsActive.get() && currentTabId.get() === tabId,
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user