SQL Editor shift shared section up, fix searching for favorites (supabase#29611)

Shift shared section up, fix searching for favorites

Author: joshenlim

apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx

@@ -97,7 +97,9 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) =>
  ? [ROOT_NODE]
  : formatFolderResponseForTreeView({ folders, contents: privateSnippets })
 
- const favoriteSnippets = useFavoriteSnippets(projectRef as string)
+ const favoriteSnippets = useFavoriteSnippets(projectRef as string).filter((x) =>
+ searchText.length > 0 ? x.name.toLowerCase().includes(searchText.toLowerCase()) : true
+ )
  const numFavoriteSnippets = favoriteSnippets.length
  const favoritesTreeState =
  numFavoriteSnippets === 0
@@ -341,31 +343,29 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) =>
  <>
  <Separator />
 
- {((numFavoriteSnippets === 0 && searchText.length === 0) || numFavoriteSnippets > 0) && (
+ {((numProjectSnippets === 0 && searchText.length === 0) || numProjectSnippets > 0) && (
  <>
- <Collapsible_Shadcn_ open={showFavouriteSnippets} onOpenChange={setShowFavouriteSnippets}>
+ <Collapsible_Shadcn_ open={showSharedSnippets} onOpenChange={setShowSharedSnippets}>
  <CollapsibleTrigger_Shadcn_ className={COLLAPSIBLE_TRIGGER_CLASS_NAMES}>
  <ChevronRight size={16} className={COLLAPSIBLE_ICON_CLASS_NAMES} />
  <span className={COLLASIBLE_HEADER_CLASS_NAMES}>
- Favorites{numFavoriteSnippets > 0 && ` (${numFavoriteSnippets})`}
+ Shared{numProjectSnippets > 0 && ` (${numProjectSnippets})`}
  </span>
  </CollapsibleTrigger_Shadcn_>
  <CollapsibleContent_Shadcn_ className="pt-2">
- {numFavoriteSnippets === 0 ? (
+ {numProjectSnippets === 0 ? (
  <div className="mx-4">
  <Alert_Shadcn_ className="p-3">
- <AlertTitle_Shadcn_ className="text-xs">No favorite queries</AlertTitle_Shadcn_>
+ <AlertTitle_Shadcn_ className="text-xs">No shared queries</AlertTitle_Shadcn_>
  <AlertDescription_Shadcn_ className="text-xs ">
- Save a query to favorites for easy accessbility by clicking the{' '}
- <Heart size={12} className="inline-block relative align-center -top-[1px]" />{' '}
- icon.
+ Share queries with your team by right-clicking on the query.
  </AlertDescription_Shadcn_>
  </Alert_Shadcn_>
  </div>
  ) : (
  <TreeView
- data={favoritesTreeState}
- aria-label="favorite-snippets"
+ data={projectSnippetsTreeState}
+ aria-label="project-level-snippets"
  nodeRenderer={({ element, ...props }) => (
  <SQLEditorTreeViewItem
  {...props}
@@ -384,7 +384,6 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) =>
  onSelectCopyPersonal={() => {
  onSelectCopyPersonal(element.metadata as Snippet)
  }}
- onSelectShare={() => setSelectedSnippetToShare(element.metadata as Snippet)}
  onSelectUnshare={() => {
  setSelectedSnippetToUnshare(element.metadata as Snippet)
  }}
@@ -398,29 +397,31 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) =>
  </>
  )}
 
- {((numProjectSnippets === 0 && searchText.length === 0) || numProjectSnippets > 0) && (
+ {((numFavoriteSnippets === 0 && searchText.length === 0) || numFavoriteSnippets > 0) && (
  <>
- <Collapsible_Shadcn_ open={showSharedSnippets} onOpenChange={setShowSharedSnippets}>
+ <Collapsible_Shadcn_ open={showFavouriteSnippets} onOpenChange={setShowFavouriteSnippets}>
  <CollapsibleTrigger_Shadcn_ className={COLLAPSIBLE_TRIGGER_CLASS_NAMES}>
  <ChevronRight size={16} className={COLLAPSIBLE_ICON_CLASS_NAMES} />
  <span className={COLLASIBLE_HEADER_CLASS_NAMES}>
- Shared{numProjectSnippets > 0 && ` (${numProjectSnippets})`}
+ Favorites{numFavoriteSnippets > 0 && ` (${numFavoriteSnippets})`}
  </span>
  </CollapsibleTrigger_Shadcn_>
  <CollapsibleContent_Shadcn_ className="pt-2">
- {numProjectSnippets === 0 ? (
+ {numFavoriteSnippets === 0 ? (
  <div className="mx-4">
  <Alert_Shadcn_ className="p-3">
- <AlertTitle_Shadcn_ className="text-xs">No shared queries</AlertTitle_Shadcn_>
+ <AlertTitle_Shadcn_ className="text-xs">No favorite queries</AlertTitle_Shadcn_>
  <AlertDescription_Shadcn_ className="text-xs ">
- Share queries with your team by right-clicking on the query.
+ Save a query to favorites for easy accessbility by clicking the{' '}
+ <Heart size={12} className="inline-block relative align-center -top-[1px]" />{' '}
+ icon.
  </AlertDescription_Shadcn_>
  </Alert_Shadcn_>
  </div>
  ) : (
  <TreeView
- data={projectSnippetsTreeState}
- aria-label="project-level-snippets"
+ data={favoritesTreeState}
+ aria-label="favorite-snippets"
  nodeRenderer={({ element, ...props }) => (
  <SQLEditorTreeViewItem
  {...props}
@@ -439,6 +440,7 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) =>
  onSelectCopyPersonal={() => {
  onSelectCopyPersonal(element.metadata as Snippet)
  }}
+ onSelectShare={() => setSelectedSnippetToShare(element.metadata as Snippet)}
  onSelectUnshare={() => {
  setSelectedSnippetToUnshare(element.metadata as Snippet)
  }}