Skip to content

Chore/move sort out by itself #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Chore/move sort out by itself #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3be5b05
Merge branch 'master' of github.com:supabase/supabase
saltcod Aug 29, 2024
ea59f5a
Move sort out of input box
saltcod Aug 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 1 addition & 15 deletions apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,6 @@ import {
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import {
InnerSideBarFilterSearchInput,
InnerSideBarFilterSortDropdown,
InnerSideBarFilterSortDropdownItem,
InnerSideBarFilters,
InnerSideMenuItem,
} from 'ui-patterns/InnerSideMenu'
Expand Down Expand Up @@ -147,19 +145,7 @@ export const SQLEditorMenu = ({ onViewOngoingQueries }: SQLEditorMenuProps) => {
aria-labelledby="Search queries"
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
>
<InnerSideBarFilterSortDropdown
value={snapV2.order}
onValueChange={(value: any) => snapV2.setOrder(value)}
>
<InnerSideBarFilterSortDropdownItem key="name" value="name">
Alphabetical
</InnerSideBarFilterSortDropdownItem>
<InnerSideBarFilterSortDropdownItem key="inserted_at" value="inserted_at">
Created At
</InnerSideBarFilterSortDropdownItem>
</InnerSideBarFilterSortDropdown>
</InnerSideBarFilterSearchInput>
></InnerSideBarFilterSearchInput>
</InnerSideBarFilters>
<DropdownMenu>
<DropdownMenuTrigger asChild>
Expand Down
74 changes: 69 additions & 5 deletions apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand All @@ -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
Expand Down Expand Up @@ -339,6 +357,52 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) =>

return (
<>
<div className="relative mt-4">
<DropdownMenu modal={false}>
<Tooltip_Shadcn_ delayDuration={0}>
<DropdownMenuTrigger
asChild
className={cn(
'absolute right-1 -top-4',
'text-foreground-muted transition-colors hover:text-foreground data-[state=open]:text-foreground'
)}
>
<TooltipTrigger_Shadcn_ asChild>
<Button
type="text"
className="text-light"
iconRight={
snapV2.order === 'name' ? (
<ArrowDownAz size={18} strokeWidth={1.5} />
) : (
<ClockArrowDown size={18} strokeWidth={1.5} />
)
}
>
Sort
</Button>
</TooltipTrigger_Shadcn_>
</DropdownMenuTrigger>
<TooltipContent_Shadcn_ side="bottom">Sort By</TooltipContent_Shadcn_>
</Tooltip_Shadcn_>
<DropdownMenuContent side="bottom" align="end" className={cn('w-48')}>
<DropdownMenuRadioGroup
value={snapV2.order}
onValueChange={(value: any) => snapV2.setOrder(value)}
>
<DropdownMenuRadioItem value="name" defaultChecked={snapV2.order === 'name'}>
Alphabetical
</DropdownMenuRadioItem>
<DropdownMenuRadioItem
value="inserted_at"
defaultChecked={snapV2.order === 'inserted_at'}
>
Created at
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
<Separator />

{((numFavoriteSnippets === 0 && searchText.length === 0) || numFavoriteSnippets > 0) && (
Expand Down