File size: 3,958 Bytes
3d700dd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | import { useMemo, useState } from "react";
import { Outlet, redirect, useLocation, useMatches } from "react-router";
import { useTranslation } from "react-i18next";
import { Route } from "./+types/settings";
import OptionService from "#/api/option-service/option-service.api";
import { queryClient } from "#/query-client-config";
import { SettingsLayout } from "#/components/features/settings";
import { WebClientConfig } from "#/api/option-service/option.types";
import { QUERY_KEYS, CONFIG_CACHE_OPTIONS } from "#/hooks/query/query-keys";
import { Typography } from "#/ui/typography";
import { useBreakpoint } from "#/hooks/use-breakpoint";
import { useSettingsNavItems } from "#/hooks/use-settings-nav-items";
import { OSS_NAV_ITEMS } from "#/constants/settings-nav";
import {
getFirstAvailablePath,
isSettingsPageHidden,
} from "#/utils/settings-utils";
import { SettingsSectionHeaderProvider } from "#/contexts/settings-section-header-context";
export const clientLoader = async ({ request }: Route.ClientLoaderArgs) => {
const url = new URL(request.url);
const { pathname } = url;
const config = await queryClient.fetchQuery<WebClientConfig>({
queryKey: QUERY_KEYS.WEB_CLIENT_CONFIG,
queryFn: OptionService.getConfig,
...CONFIG_CACHE_OPTIONS,
});
const featureFlags = config?.feature_flags;
if (isSettingsPageHidden(pathname, featureFlags)) {
const fallbackPath = getFirstAvailablePath(featureFlags);
if (fallbackPath && fallbackPath !== pathname) {
return redirect(fallbackPath);
}
}
return null;
};
function SettingsScreen() {
const { t } = useTranslation("openhands");
const location = useLocation();
const matches = useMatches();
const navItems = useSettingsNavItems();
const isMobile = useBreakpoint(768);
const [hideSectionHeader, setHideSectionHeader] = useState(false);
const { currentSectionTitle, currentSectionSubtitle } = useMemo(() => {
// Resolve from the full list, not the listed subset: locked-to-Cloud
// unlists most pages but they stay reachable via deep links (OHE-3168).
const currentItem = OSS_NAV_ITEMS.find(
(item) => item.to === location.pathname,
);
if (currentItem) {
return {
currentSectionTitle: currentItem.text,
currentSectionSubtitle: currentItem.subtitle,
};
}
const firstItem = navItems.find((item) => item.type === "item");
if (firstItem?.type === "item") {
return {
currentSectionTitle: firstItem.item.text,
currentSectionSubtitle: firstItem.item.subtitle,
};
}
return {
currentSectionTitle: "SETTINGS$TITLE",
currentSectionSubtitle: null as string | null,
};
}, [navItems, location.pathname]);
const routeHandle = matches.find((m) => m.pathname === location.pathname)
?.handle as { hideTitle?: boolean } | undefined;
const isMobileHub = isMobile && location.pathname === "/settings";
const shouldHideTitle =
routeHandle?.hideTitle === true || isMobileHub || hideSectionHeader;
return (
<main data-testid="settings-screen" className="min-h-0">
<SettingsSectionHeaderProvider
setHideSectionHeader={setHideSectionHeader}
>
<SettingsLayout navigationItems={navItems}>
<div className="flex flex-col gap-6 pb-8">
{!shouldHideTitle && (
<header className="space-y-1">
<Typography.H2>{t(currentSectionTitle)}</Typography.H2>
{currentSectionSubtitle ? (
<p
data-testid="settings-page-subtitle"
className="text-sm leading-5 text-tertiary-light"
>
{t(currentSectionSubtitle)}
</p>
) : null}
</header>
)}
<Outlet />
</div>
</SettingsLayout>
</SettingsSectionHeaderProvider>
</main>
);
}
export default SettingsScreen;
|