From 795f83465c32fc1444c1f80fab96e0ebc6cd105a Mon Sep 17 00:00:00 2001 From: Allison Truhlar Date: Wed, 29 Apr 2026 20:05:05 +0000 Subject: [PATCH 1/2] refactor: extract SubpathModeOptions from DataLinkOptions Split the link-name-format radios into a standalone exported SubpathModeOptions component and add a hideSubpathMode prop so callers can render only the automatic-links checkbox. --- .../ui/PreferencesPage/DataLinkOptions.tsx | 101 ++++++++++-------- 1 file changed, 56 insertions(+), 45 deletions(-) diff --git a/frontend/src/components/ui/PreferencesPage/DataLinkOptions.tsx b/frontend/src/components/ui/PreferencesPage/DataLinkOptions.tsx index 0ab835c3..9d332bcf 100644 --- a/frontend/src/components/ui/PreferencesPage/DataLinkOptions.tsx +++ b/frontend/src/components/ui/PreferencesPage/DataLinkOptions.tsx @@ -6,6 +6,7 @@ import OptionsSection from '@/components/ui/PreferencesPage/OptionsSection'; type DataLinkOptionsProps = { readonly checkboxesOnly?: boolean; + readonly hideSubpathMode?: boolean; }; const SUBPATH_MODES = [ @@ -14,15 +15,60 @@ const SUBPATH_MODES = [ { value: 'custom' as const, label: 'Custom' } ]; +export function SubpathModeOptions({ + indented = false +}: { + readonly indented?: boolean; +}) { + const { dataLinkSubpathMode, setDataLinkSubpathMode } = + usePreferencesContext(); + + const handleSubpathModeChange = async ( + mode: 'name' | 'full_path' | 'custom' + ) => { + const result = await setDataLinkSubpathMode(mode); + if (result.success) { + const label = SUBPATH_MODES.find(m => m.value === mode)?.label; + toast.success(`Link name format set to: ${label}`); + } else { + toast.error(result.error); + } + }; + + return ( +
+ + Link name format: + + {SUBPATH_MODES.map(mode => ( +
+ handleSubpathModeChange(mode.value)} + type="radio" + /> + + {mode.label} + +
+ ))} +
+ ); +} + export default function DataLinkOptions({ - checkboxesOnly = false + checkboxesOnly = false, + hideSubpathMode = false }: DataLinkOptionsProps) { - const { - areDataLinksAutomatic, - toggleAutomaticDataLinks, - dataLinkSubpathMode, - setDataLinkSubpathMode - } = usePreferencesContext(); + const { areDataLinksAutomatic, toggleAutomaticDataLinks } = + usePreferencesContext(); const automaticOption = { checked: areDataLinksAutomatic, @@ -42,18 +88,6 @@ export default function DataLinkOptions({ } }; - const handleSubpathModeChange = async ( - mode: 'name' | 'full_path' | 'custom' - ) => { - const result = await setDataLinkSubpathMode(mode); - if (result.success) { - const label = SUBPATH_MODES.find(m => m.value === mode)?.label; - toast.success(`Link name format set to: ${label}`); - } else { - toast.error(result.error); - } - }; - return ( <> -
- - Link name format: - - {SUBPATH_MODES.map(mode => ( -
- handleSubpathModeChange(mode.value)} - type="radio" - /> - - {mode.label} - -
- ))} -
+ {hideSubpathMode ? null : ( + + )} ); } From c8c81c05acd22a6ccca2a83e95c4514daf3d5c7d Mon Sep 17 00:00:00 2001 From: Allison Truhlar Date: Wed, 29 Apr 2026 20:05:09 +0000 Subject: [PATCH 2/2] feat: hide data link path format under advanced settings accordion Restore the original create-data-link dialog layout with the automatic-links checkbox above the Create/Cancel buttons, and move the link name format radios and preview into a collapsed "Advanced settings" accordion below the buttons. --- .../componentTests/DataLink.test.tsx | 4 +- .../src/components/ui/Dialogs/DataLink.tsx | 53 +++++++++++++++---- 2 files changed, 47 insertions(+), 10 deletions(-) diff --git a/frontend/src/__tests__/componentTests/DataLink.test.tsx b/frontend/src/__tests__/componentTests/DataLink.test.tsx index 5b70bb8c..6c7de772 100644 --- a/frontend/src/__tests__/componentTests/DataLink.test.tsx +++ b/frontend/src/__tests__/componentTests/DataLink.test.tsx @@ -46,7 +46,9 @@ describe('Data Link dialog', () => { }); await waitFor(() => { - expect(screen.getByText('my_zarr', { exact: false })).toBeInTheDocument(); + expect( + screen.getByText('Are you sure you want to create a data link?') + ).toBeInTheDocument(); }); }); diff --git a/frontend/src/components/ui/Dialogs/DataLink.tsx b/frontend/src/components/ui/Dialogs/DataLink.tsx index a09f1711..17665e85 100644 --- a/frontend/src/components/ui/Dialogs/DataLink.tsx +++ b/frontend/src/components/ui/Dialogs/DataLink.tsx @@ -3,7 +3,8 @@ import { useState, useMemo, SetStateAction } from 'react'; import type { ReactNode, Dispatch } from 'react'; -import { Button, Typography } from '@material-tailwind/react'; +import { Accordion, Button, Typography } from '@material-tailwind/react'; +import { HiChevronDown } from 'react-icons/hi'; import { Link } from 'react-router'; import type { ProxiedPath } from '@/contexts/ProxiedPathContext'; @@ -21,7 +22,9 @@ import type { FileSharePath } from '@/shared.types'; import type { PendingToolKey } from '@/hooks/useZarrMetadata'; import FgDialog from './FgDialog'; import TextWithFilePath from './TextWithFilePath'; -import DataLinkOptions from '@/components/ui/PreferencesPage/DataLinkOptions'; +import DataLinkOptions, { + SubpathModeOptions +} from '@/components/ui/PreferencesPage/DataLinkOptions'; import DeleteBtn from '@/components/ui/buttons/DeleteBtn'; interface CommonDataLinkDialogProps { @@ -152,6 +155,9 @@ export default function DataLinkDialog(props: DataLinkDialogProps) { // Custom subpath local state (only used in this dialog, not persisted) const [customSubpath, setCustomSubpath] = useState(folderNameOnly); + const [openAdvancedSections, setOpenAdvancedSections] = useState( + [] + ); const customSubpathError = useMemo( () => @@ -254,6 +260,12 @@ export default function DataLinkDialog(props: DataLinkDialogProps) { If you share the data link with internal collaborators, they will be able to view these data. +
+ + Don't ask me this again: + + +
- - Data link settings: - - + + > + } + type="multiple" + value={openAdvancedSections} + > + + +
+ Advanced settings +
+ + + + + + {dataLinkPreview} + + + + {dataLinkSubpathMode === 'custom' ? ( <> ) : null} - - {dataLinkPreview} - You can always modify settings on the{' '}