diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx index b87eb6ba54b90..451ec01b2649e 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx @@ -29,8 +29,6 @@ import { import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' import { InnerSideBarFilterSearchInput, - InnerSideBarFilterSortDropdown, - InnerSideBarFilterSortDropdownItem, InnerSideBarFilters, InnerSideMenuItem, } from 'ui-patterns/InnerSideMenu' @@ -147,19 +145,7 @@ export const SQLEditorMenu = ({ onViewOngoingQueries }: SQLEditorMenuProps) => { aria-labelledby="Search queries" value={searchText} onChange={(e) => setSearchText(e.target.value)} - > - snapV2.setOrder(value)} - > - - Alphabetical - - - Created At - - - + > diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx index b03c992a2cf44..872069ee3d9da 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx @@ -1,4 +1,12 @@ -import { ChevronRight, Eye, EyeOffIcon, Heart, Unlock } from 'lucide-react' +import { + ArrowDownAz, + ChevronRight, + ClockArrowDown, + Eye, + EyeOffIcon, + Heart, + Unlock, +} from 'lucide-react' import { useRouter } from 'next/router' import { useEffect, useState } from 'react' import toast from 'react-hot-toast' @@ -7,17 +15,20 @@ import { useParams } from 'common' import DownloadSnippetModal from 'components/interfaces/SQLEditor/DownloadSnippetModal' import { MoveQueryModal } from 'components/interfaces/SQLEditor/MoveQueryModal' import RenameQueryModal from 'components/interfaces/SQLEditor/RenameQueryModal' +import { untitledSnippetTitle } from 'components/interfaces/SQLEditor/SQLEditor.constants' import { createSqlSnippetSkeletonV2 } from 'components/interfaces/SQLEditor/SQLEditor.utils' +import { useContentCountQuery } from 'data/content/content-count-query' import { useContentDeleteMutation } from 'data/content/content-delete-mutation' import { getContentById } from 'data/content/content-id-query' import { useSQLSnippetFoldersDeleteMutation } from 'data/content/sql-folders-delete-mutation' import { - getSQLSnippetFolders, Snippet, SnippetDetail, SnippetFolder, + getSQLSnippetFolders, useSQLSnippetFoldersQuery, } from 'data/content/sql-folders-query' +import { useSqlSnippetsQuery } from 'data/content/sql-snippets-query' import { useLocalStorage } from 'hooks/misc/useLocalStorage' import { useSelectedProject } from 'hooks/misc/useSelectedProject' import { useProfile } from 'lib/profile' @@ -32,19 +43,26 @@ import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, + Button, CollapsibleContent_Shadcn_, CollapsibleTrigger_Shadcn_, Collapsible_Shadcn_, + DropdownMenu, + DropdownMenuContent, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuTrigger, Separator, + TooltipContent_Shadcn_, + TooltipTrigger_Shadcn_, + Tooltip_Shadcn_, TreeView, + cn, } from 'ui' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { ROOT_NODE, formatFolderResponseForTreeView } from './SQLEditorNav.utils' import { SQLEditorTreeViewItem } from './SQLEditorTreeViewItem' -import { untitledSnippetTitle } from 'components/interfaces/SQLEditor/SQLEditor.constants' -import { useSqlSnippetsQuery } from 'data/content/sql-snippets-query' -import { useContentCountQuery } from 'data/content/content-count-query' interface SQLEditorNavProps { searchText: string @@ -339,6 +357,52 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) => return ( <> +
+ + + + + + + + Sort By + + + snapV2.setOrder(value)} + > + + Alphabetical + + + Created at + + + + +
{((numFavoriteSnippets === 0 && searchText.length === 0) || numFavoriteSnippets > 0) && (