File size: 2,584 Bytes
3201ca6 | 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 | import { useTranslation } from "react-i18next";
import { I18nKey } from "#/i18n/declaration";
import { SettingsView } from "#/utils/sdk-settings-schema";
import { cn } from "#/utils/utils";
import { formControlTransitionClassName } from "#/utils/form-control-classes";
interface ViewToggleProps {
view: SettingsView;
setView: (view: SettingsView) => void;
/** Whether the basic tier has anything to show (any critical fields). */
showBasic?: boolean;
showAdvanced: boolean;
showAll: boolean;
isDisabled?: boolean;
}
const tabButtonClass = (isActive: boolean, isDisabled: boolean) =>
cn(
"w-fit px-2 py-2 text-sm cursor-pointer rounded-none bg-transparent",
formControlTransitionClassName,
"border-b-2 pb-2",
isActive
? "text-white border-white"
: "text-[var(--oh-muted)] border-transparent hover:text-white",
isDisabled && "pointer-events-none opacity-30 cursor-not-allowed",
);
export function ViewToggle({
view,
setView,
showBasic = true,
showAdvanced,
showAll,
isDisabled = false,
}: ViewToggleProps) {
const { t } = useTranslation("openhands");
const visibleTabs = [showBasic, showAdvanced, showAll].filter(Boolean).length;
if (visibleTabs <= 1) return null;
return (
<div
role="tablist"
aria-orientation="horizontal"
className="mb-6 flex items-center gap-2"
>
{showBasic ? (
<button
data-testid="sdk-section-basic-toggle"
type="button"
role="tab"
aria-selected={view === "basic"}
disabled={isDisabled}
className={tabButtonClass(view === "basic", isDisabled)}
onClick={() => setView("basic")}
>
{t(I18nKey.SETTINGS$BASIC)}
</button>
) : null}
{showAdvanced ? (
<button
data-testid="sdk-section-advanced-toggle"
type="button"
role="tab"
aria-selected={view === "advanced"}
disabled={isDisabled}
className={tabButtonClass(view === "advanced", isDisabled)}
onClick={() => setView("advanced")}
>
{t(I18nKey.SETTINGS$ADVANCED)}
</button>
) : null}
{showAll ? (
<button
data-testid="sdk-section-all-toggle"
type="button"
role="tab"
aria-selected={view === "all"}
disabled={isDisabled}
className={tabButtonClass(view === "all", isDisabled)}
onClick={() => setView("all")}
>
{t(I18nKey.SETTINGS$ALL)}
</button>
) : null}
</div>
);
}
|