+
+ {text}
+
{path}
diff --git a/frontend/src/components/ui/PreferencesPage/DataLinkOptions.tsx b/frontend/src/components/ui/PreferencesPage/DataLinkOptions.tsx
index 9d332bcf0..d188b443a 100644
--- a/frontend/src/components/ui/PreferencesPage/DataLinkOptions.tsx
+++ b/frontend/src/components/ui/PreferencesPage/DataLinkOptions.tsx
@@ -1,11 +1,11 @@
import toast from 'react-hot-toast';
-import { Typography } from '@material-tailwind/react';
+import FgRadio from '@/components/designSystem/atoms/formElements/FgRadio';
+import FgSwitch from '@/components/designSystem/atoms/formElements/FgSwitch';
+import FgFieldSet from '@/components/designSystem/molecules/FgFieldSet';
import { usePreferencesContext } from '@/contexts/PreferencesContext';
-import OptionsSection from '@/components/ui/PreferencesPage/OptionsSection';
type DataLinkOptionsProps = {
- readonly checkboxesOnly?: boolean;
readonly hideSubpathMode?: boolean;
};
@@ -15,11 +15,7 @@ const SUBPATH_MODES = [
{ value: 'custom' as const, label: 'Custom' }
];
-export function SubpathModeOptions({
- indented = false
-}: {
- readonly indented?: boolean;
-}) {
+export function SubpathModeOptions() {
const { dataLinkSubpathMode, setDataLinkSubpathMode } =
usePreferencesContext();
@@ -36,35 +32,24 @@ export function SubpathModeOptions({
};
return (
-
-
- Link name format:
-
+
{SUBPATH_MODES.map(mode => (
-
- handleSubpathModeChange(mode.value)}
- type="radio"
- />
-
- {mode.label}
-
-
+ handleSubpathModeChange(mode.value)}
+ value={mode.value}
+ />
))}
-
+
);
}
export default function DataLinkOptions({
- checkboxesOnly = false,
hideSubpathMode = false
}: DataLinkOptionsProps) {
const { areDataLinksAutomatic, toggleAutomaticDataLinks } =
@@ -90,14 +75,14 @@ export default function DataLinkOptions({
return (
<>
-
- {hideSubpathMode ? null : (
-
- )}
+ {hideSubpathMode ? null :
}
);
}
diff --git a/frontend/src/components/ui/PreferencesPage/DisplayOptions.tsx b/frontend/src/components/ui/PreferencesPage/DisplayOptions.tsx
index 650affa4d..39c0aa09f 100644
--- a/frontend/src/components/ui/PreferencesPage/DisplayOptions.tsx
+++ b/frontend/src/components/ui/PreferencesPage/DisplayOptions.tsx
@@ -1,7 +1,8 @@
import toast from 'react-hot-toast';
+import FgSwitch from '@/components/designSystem/atoms/formElements/FgSwitch';
+import FgFieldSet from '@/components/designSystem/molecules/FgFieldSet';
import { usePreferencesContext } from '@/contexts/PreferencesContext';
-import OptionsSection from '@/components/ui/PreferencesPage/OptionsSection';
export default function DisplayOptions() {
const {
@@ -14,61 +15,61 @@ export default function DisplayOptions() {
} = usePreferencesContext();
return (
-
{
- const result = await toggleFilterByGroups();
- if (result.success) {
- toast.success(
- !isFilteredByGroups
- ? 'Only Zones for groups you have membership in are now visible'
- : 'All Zones are now visible'
- );
- } else {
- toast.error(result.error);
- }
+
+ {
+ const result = await toggleFilterByGroups();
+ if (result.success) {
+ toast.success(
+ !isFilteredByGroups
+ ? 'Only Zones for groups you have membership in are now visible'
+ : 'All Zones are now visible'
+ );
+ } else {
+ toast.error(result.error);
}
- },
- {
- checked: hideDotFiles,
- id: 'hide_dot_files',
- label: 'Hide dot files (files and folders starting with ".")',
- onChange: async () => {
- const result = await toggleHideDotFiles();
- if (result.success) {
- toast.success(
- hideDotFiles
- ? 'Dot files are now visible'
- : 'Dot files are now hidden'
- );
- } else {
- toast.error(result.error);
- }
+ }}
+ showState
+ />
+ {
+ const result = await toggleHideDotFiles();
+ if (result.success) {
+ toast.success(
+ hideDotFiles
+ ? 'Dot files are now visible'
+ : 'Dot files are now hidden'
+ );
+ } else {
+ toast.error(result.error);
}
- },
- {
- checked: showTutorial,
- id: 'show_tutorial',
- label: 'Show tutorial welcome card on Browse page',
- onChange: async () => {
- const result = await toggleShowTutorial();
- if (result.success) {
- toast.success(
- showTutorial
- ? 'Tutorial welcome card will no longer be shown on Browse page'
- : 'Tutorial welcome card will be shown on Browse page'
- );
- } else {
- toast.error(result.error);
- }
+ }}
+ showState
+ />
+ {
+ const result = await toggleShowTutorial();
+ if (result.success) {
+ toast.success(
+ showTutorial
+ ? 'Tutorial welcome card will no longer be shown on Browse page'
+ : 'Tutorial welcome card will be shown on Browse page'
+ );
+ } else {
+ toast.error(result.error);
}
- }
- ]}
- />
+ }}
+ showState
+ />
+
);
}
diff --git a/frontend/src/components/ui/PreferencesPage/ExperimentalOptions.tsx b/frontend/src/components/ui/PreferencesPage/ExperimentalOptions.tsx
index 7fdbc7de7..7c8c73c88 100644
--- a/frontend/src/components/ui/PreferencesPage/ExperimentalOptions.tsx
+++ b/frontend/src/components/ui/PreferencesPage/ExperimentalOptions.tsx
@@ -1,34 +1,30 @@
import toast from 'react-hot-toast';
+import FgSwitch from '@/components/designSystem/atoms/formElements/FgSwitch';
import { usePreferencesContext } from '@/contexts/PreferencesContext';
-import OptionsSection from '@/components/ui/PreferencesPage/OptionsSection';
export default function ExperimentalOptions() {
const { showAppsAndJobsPages, toggleShowAppsAndJobsPages } =
usePreferencesContext();
return (
- {
- const result = await toggleShowAppsAndJobsPages();
- if (result.success) {
- toast.success(
- showAppsAndJobsPages
- ? 'Apps and Jobs pages are now hidden'
- : 'Apps and Jobs pages are now visible'
- );
- } else {
- toast.error(result.error);
- }
- }
+ {
+ const result = await toggleShowAppsAndJobsPages();
+ if (result.success) {
+ toast.success(
+ showAppsAndJobsPages
+ ? 'Apps and Jobs pages are now hidden'
+ : 'Apps and Jobs pages are now visible'
+ );
+ } else {
+ toast.error(result.error);
}
- ]}
+ }}
+ showState
/>
);
}
diff --git a/frontend/src/components/ui/PreferencesPage/JobOptions.tsx b/frontend/src/components/ui/PreferencesPage/JobOptions.tsx
index 3014cab2e..238b20938 100644
--- a/frontend/src/components/ui/PreferencesPage/JobOptions.tsx
+++ b/frontend/src/components/ui/PreferencesPage/JobOptions.tsx
@@ -1,9 +1,10 @@
import { useState } from 'react';
-import { Typography } from '@material-tailwind/react';
import toast from 'react-hot-toast';
-import { usePreferencesContext } from '@/contexts/PreferencesContext';
import FgButton from '@/components/designSystem/atoms/FgButton';
+import FgInput from '@/components/designSystem/atoms/formElements/FgInput';
+import FgFormField from '@/components/designSystem/molecules/FgFormField';
+import { usePreferencesContext } from '@/contexts/PreferencesContext';
export default function JobOptions() {
const {
@@ -44,67 +45,56 @@ export default function JobOptions() {
};
return (
-
-
Jobs
-
-
-
-
- Additional CLI arguments appended to every job submit command. Can
- be overridden per job on the Cluster tab.
-
-
+
+
+ setLocalExtraArgs(e.target.value)}
placeholder="e.g. -P your_project"
+ size="sm"
type="text"
value={localExtraArgs}
/>
-
- Save
-
-
+
+
+ Save
+
+
-
-
-
- Directory where Apptainer SIF images are cached. Defaults to{' '}
- ~/.fileglancer/apptainer_cache if not set.
-
-
+
+ setLocalCacheDir(e.target.value)}
placeholder="~/.fileglancer/apptainer_cache"
+ size="sm"
type="text"
value={localCacheDir}
/>
-
- Save
-
-
+
+
+ Save
+
-
-
- {option.label}
-
-
- ))}
-
- );
-}
diff --git a/frontend/src/components/ui/PreferencesPage/PathFormatOptions.tsx b/frontend/src/components/ui/PreferencesPage/PathFormatOptions.tsx
new file mode 100644
index 000000000..5ba64f228
--- /dev/null
+++ b/frontend/src/components/ui/PreferencesPage/PathFormatOptions.tsx
@@ -0,0 +1,48 @@
+import toast from 'react-hot-toast';
+
+import FgFieldSet from '@/components/designSystem/molecules/FgFieldSet';
+import FgRadio from '@/components/designSystem/atoms/formElements/FgRadio';
+import { usePreferencesContext } from '@/contexts/PreferencesContext';
+
+const PATH_MODES = [
+ { value: 'linux_path' as const, label: 'Cluster/Linux (e.g., /misc/public)' },
+ {
+ value: 'windows_path' as const,
+ label: 'Windows/Linux SMB (e.g. \\\\prfs.hhmi.org\\public)'
+ },
+ {
+ value: 'mac_path' as const,
+ label: 'macOS (e.g. smb://prfs.hhmi.org/public)'
+ }
+];
+
+export default function PathFormatOptions() {
+ const { pathPreference, handlePathPreferenceSubmit } =
+ usePreferencesContext();
+
+ const handleChange = async (value: string) => {
+ const result = await handlePathPreferenceSubmit([value]);
+ if (result.success) {
+ toast.success('Path preference updated successfully!');
+ } else {
+ toast.error(result.error);
+ }
+ };
+
+ return (
+
+ {PATH_MODES.map(mode => (
+ handleChange(mode.value)}
+ value={mode.value}
+ />
+ ))}
+
+ );
+}
diff --git a/frontend/src/components/ui/Sidebar/ZonesBrowser.tsx b/frontend/src/components/ui/Sidebar/ZonesBrowser.tsx
index ded4b745d..7ae6cacae 100644
--- a/frontend/src/components/ui/Sidebar/ZonesBrowser.tsx
+++ b/frontend/src/components/ui/Sidebar/ZonesBrowser.tsx
@@ -11,6 +11,8 @@ import useOpenZones from '@/hooks/useOpenZones';
import Zone from './Zone';
import { SidebarItemSkeleton } from '@/components/ui/widgets/Loaders';
import FgLink from '@/components/designSystem/atoms/FgLink';
+import FgSwitch from '@/components/designSystem/atoms/formElements/FgSwitch';
+import FgFormField from '@/components/designSystem/molecules/FgFormField';
export default function ZonesBrowser({
searchQuery,
@@ -76,18 +78,15 @@ export default function ZonesBrowser({
No zones match your filter '{searchQuery}'
{hasResultsOutsideGroups ? (
-
-
+
+
Results exist in Zones outside your groups.
-
- Change your zone display preferences to view:
-
-
-
+
+