diff --git a/src-web/components/FolderSettingsDialog.tsx b/src-web/components/FolderSettingsDialog.tsx index e96d1ec13..6eb510bf4 100644 --- a/src-web/components/FolderSettingsDialog.tsx +++ b/src-web/components/FolderSettingsDialog.tsx @@ -1,12 +1,19 @@ -import { createWorkspaceModel, foldersAtom, patchModel } from '@yaakapp-internal/models'; +import { + createWorkspaceModel, + foldersAtom, + patchModel, + workspacesAtom, +} from '@yaakapp-internal/models'; import { useAtomValue } from 'jotai'; -import { useMemo, useState } from 'react'; +import { Fragment, useMemo, useState } from 'react'; import { useAuthTab } from '../hooks/useAuthTab'; import { useEnvironmentsBreakdown } from '../hooks/useEnvironmentsBreakdown'; import { useHeadersTab } from '../hooks/useHeadersTab'; import { useInheritedHeaders } from '../hooks/useInheritedHeaders'; +import { useParentFolders } from '../hooks/useParentFolders'; import { Button } from './core/Button'; import { CountBadge } from './core/CountBadge'; +import { Icon } from './core/Icon'; import { Input } from './core/Input'; import { Link } from './core/Link'; import { VStack } from './core/Stacks'; @@ -36,7 +43,9 @@ export type FolderSettingsTab = export function FolderSettingsDialog({ folderId, tab }: Props) { const folders = useAtomValue(foldersAtom); + const workspaces = useAtomValue(workspacesAtom); const folder = folders.find((f) => f.id === folderId) ?? null; + const parentFolders = useParentFolders(folder); const [activeTab, setActiveTab] = useState(tab ?? TAB_GENERAL); const authTab = useAuthTab(TAB_AUTH, folder); const headersTab = useHeadersTab(TAB_HEADERS, folder); @@ -47,6 +56,20 @@ export function FolderSettingsDialog({ folderId, tab }: Props) { ); const numVars = (folderEnvironment?.variables ?? []).filter((v) => v.name).length; + const breadcrumbs = useMemo(() => { + if (!folder) return []; + + const workspace = workspaces.find((w) => w.id === folder.workspaceId); + + const items = []; + if (workspace) { + items.push({ id: workspace.id, name: workspace.name }); + } + items.push(...parentFolders.reverse().map((f) => ({ id: f.id, name: f.name }))); + + return items; + }, [folder, parentFolders, workspaces]); + const tabs = useMemo(() => { if (folder == null) return []; @@ -82,6 +105,23 @@ export function FolderSettingsDialog({ folderId, tab }: Props) { + {breadcrumbs.length > 0 && ( +
+
+ Location +
+
+ {breadcrumbs.map((item, index) => ( + + {index > 0 && } + + {item.name} + + + ))} +
+
+ )}