From 01ca716af36e65830b68ba43e6c6e3aa08b0e1c8 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Wed, 23 Oct 2024 16:36:51 +0800 Subject: [PATCH 1/6] init --- apps/design-system/__registry__/index.tsx | 66 ++++++++ apps/design-system/config/docs.ts | 5 + .../docs/fragments/inner-side-menu.mdx | 142 ++++++++++++++++++ .../default/example/inner-side-menu-demo.tsx | 45 ++++++ .../default/example/inner-side-menu-empty.tsx | 74 +++++++++ .../example/inner-side-menu-loading.tsx | 32 ++++ .../inner-side-menu-multiple-sections.tsx | 32 ++++ .../example/inner-side-menu-static-titles.tsx | 40 +++++ .../example/inner-side-menu-with-search.tsx | 92 ++++++++++++ apps/design-system/registry/examples.ts | 30 ++++ packages/ui-patterns/InnerSideMenu/index.tsx | 49 +++++- 11 files changed, 599 insertions(+), 8 deletions(-) create mode 100644 apps/design-system/content/docs/fragments/inner-side-menu.mdx create mode 100644 apps/design-system/registry/default/example/inner-side-menu-demo.tsx create mode 100644 apps/design-system/registry/default/example/inner-side-menu-empty.tsx create mode 100644 apps/design-system/registry/default/example/inner-side-menu-loading.tsx create mode 100644 apps/design-system/registry/default/example/inner-side-menu-multiple-sections.tsx create mode 100644 apps/design-system/registry/default/example/inner-side-menu-static-titles.tsx create mode 100644 apps/design-system/registry/default/example/inner-side-menu-with-search.tsx diff --git a/apps/design-system/__registry__/index.tsx b/apps/design-system/__registry__/index.tsx index 57cf860d20b..cdd6dad9f54 100644 --- a/apps/design-system/__registry__/index.tsx +++ b/apps/design-system/__registry__/index.tsx @@ -1787,6 +1787,72 @@ export const Index: Record = { subcategory: "undefined", chunks: [] }, + "inner-side-menu-demo": { + name: "inner-side-menu-demo", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/inner-side-menu-demo")), + source: "", + files: ["registry/default/example/inner-side-menu-demo.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "inner-side-menu-static-titles": { + name: "inner-side-menu-static-titles", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/inner-side-menu-static-titles")), + source: "", + files: ["registry/default/example/inner-side-menu-static-titles.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "inner-side-menu-loading": { + name: "inner-side-menu-loading", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/inner-side-menu-loading")), + source: "", + files: ["registry/default/example/inner-side-menu-loading.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "inner-side-menu-multiple-sections": { + name: "inner-side-menu-multiple-sections", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/inner-side-menu-multiple-sections")), + source: "", + files: ["registry/default/example/inner-side-menu-multiple-sections.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "inner-side-menu-empty": { + name: "inner-side-menu-empty", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/inner-side-menu-empty")), + source: "", + files: ["registry/default/example/inner-side-menu-empty.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "inner-side-menu-with-search": { + name: "inner-side-menu-with-search", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/inner-side-menu-with-search")), + source: "", + files: ["registry/default/example/inner-side-menu-with-search.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, "multi-select-demo": { name: "multi-select-demo", type: "components:example", diff --git a/apps/design-system/config/docs.ts b/apps/design-system/config/docs.ts index ad2619adf12..fa2e91a1c20 100644 --- a/apps/design-system/config/docs.ts +++ b/apps/design-system/config/docs.ts @@ -102,6 +102,11 @@ export const docsConfig: DocsConfig = { href: '/docs/fragments/info-tooltip', items: [], }, + { + title: 'Inner Side Menu', + href: '/docs/fragments/inner-side-menu', + items: [], + }, { title: 'Form Item Layout', href: '/docs/fragments/form-item-layout', diff --git a/apps/design-system/content/docs/fragments/inner-side-menu.mdx b/apps/design-system/content/docs/fragments/inner-side-menu.mdx new file mode 100644 index 00000000000..d65255904f2 --- /dev/null +++ b/apps/design-system/content/docs/fragments/inner-side-menu.mdx @@ -0,0 +1,142 @@ +--- +title: Inner Side Menu +description: InnerSideMenu is a component that provides a collapsible side menu with multiple sections. +component: true +--- + + + +## Examples + +{/* ### Multiple sections */} + +{/* */} + +### Collapsible menus + +Inner Side Menu uses the `` component to wrap the menu items. +This is a wrapper component around the `` component. + +```jsx {10-12,16-17} +import { + InnerSideMenuCollapsible, + InnerSideMenuCollapsibleTrigger, + InnerSideMenuCollapsibleContent, + InnerSideMenuItem, +} from 'ui-patterns/InnerSideMenu' + +function app() { + return ( + + + + Dashboard + Team + Settings + + + ) +} +``` + +### Static titles + +If you don't need the Collapsible features, you can instead use ``. +This doesn't require the use of the `` parent component wrapped around it. + +You can wrap the `` conponents however you like. Below we've put a `
` around them. + +```jsx {1} +Projects +
+ Dashboard + Team + Settings +
+``` + + + +### Loading state + +Use `` to show a loading state for menu items. + +This item is a wrapper around the `` component, and also includes some y-padding so the items don't layout shift when shifting to loaded state and to look visually seperated in a list. + + + +### With search + +Use the following components to add a search input to the menu. + +```jsx + + setSearchTerm(e.target.value)} + aria-labelledby="Search items" + /> + +``` + +There is also a Filter Dropdown component that can be used to sort the menu items. +This can be used inside ``. + +```jsx {9-16} + + setSearchTerm(e.target.value)} + aria-labelledby="Search items" + > + setSort(value)}> + + Sort Alphabetically + + + Sort Reverse Alphabetically + + + + +``` + + + +### Empty list state + +Use `` to show an empty state. + +Use the `actions` prop to add any actions like a ` + } +/> +``` + +You can also use the prop `illustration` to pass in a custom illustration, it accets any React Node. + +```jsx {4-7} + + ../ + + } +/> +``` + + diff --git a/apps/design-system/registry/default/example/inner-side-menu-demo.tsx b/apps/design-system/registry/default/example/inner-side-menu-demo.tsx new file mode 100644 index 00000000000..f8a12c28e29 --- /dev/null +++ b/apps/design-system/registry/default/example/inner-side-menu-demo.tsx @@ -0,0 +1,45 @@ +import React from 'react' +import { Card } from 'ui' +import { + InnerSideMenuCollapsible, + InnerSideMenuCollapsibleTrigger, + InnerSideMenuCollapsibleContent, + InnerSideMenuItem, + InnerSideMenuSeparator, +} from 'ui-patterns/InnerSideMenu' + +export default function InnerSideMenuDemo() { + return ( + + + Hello + + Dashboard + Team + Settings + + + + + Hello + + + Dashboard + + Team + Settings + + + + Hello + + + Dashboard + + Team + Settings + + + + ) +} diff --git a/apps/design-system/registry/default/example/inner-side-menu-empty.tsx b/apps/design-system/registry/default/example/inner-side-menu-empty.tsx new file mode 100644 index 00000000000..b9abf8bf2d1 --- /dev/null +++ b/apps/design-system/registry/default/example/inner-side-menu-empty.tsx @@ -0,0 +1,74 @@ +import React from 'react' +import { + InnerSideMenuCollapsible, + InnerSideMenuCollapsibleTrigger, + InnerSideMenuCollapsibleContent, + InnerSideBarShimmeringLoaders, + InnerSideBarEmptyPanel, + InnerSideMenuItem, + InnerSideMenuSeparator, +} from 'ui-patterns/InnerSideMenu' +import { Button, Card } from 'ui' +import { Heart, Pointer } from 'lucide-react' + +export default function InnerSideMenuEmpty() { + const [isLoading, setIsLoading] = React.useState(true) + const [hasItems, setHasItems] = React.useState(false) + + React.useEffect(() => { + // Simulate loading + const timer = setTimeout(() => { + setIsLoading(false) + }, 2000) + return () => clearTimeout(timer) + }, []) + + return ( + + + + + 🚀
} + actions={ + + } + /> + + + + + + + +
+ +
+ + + } + actions={ + + } + /> + + + + ) +} diff --git a/apps/design-system/registry/default/example/inner-side-menu-loading.tsx b/apps/design-system/registry/default/example/inner-side-menu-loading.tsx new file mode 100644 index 00000000000..46e096f1c09 --- /dev/null +++ b/apps/design-system/registry/default/example/inner-side-menu-loading.tsx @@ -0,0 +1,32 @@ +import { Card } from 'ui' +import { + InnerSideMenuCollapsible, + InnerSideMenuCollapsibleContent, + InnerSideMenuCollapsibleTrigger, + InnerSideMenuItemLoading, + InnerSideMenuSeparator, +} from 'ui-patterns/InnerSideMenu' + +export default function InnerSideMenuLoading() { + return ( + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/design-system/registry/default/example/inner-side-menu-multiple-sections.tsx b/apps/design-system/registry/default/example/inner-side-menu-multiple-sections.tsx new file mode 100644 index 00000000000..c31c62c0b78 --- /dev/null +++ b/apps/design-system/registry/default/example/inner-side-menu-multiple-sections.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import { + InnerSideMenuCollapsible, + InnerSideMenuCollapsibleTrigger, + InnerSideMenuCollapsibleContent, + InnerSideMenuItem, + InnerSideMenuSeparator, +} from 'ui-patterns/InnerSideMenu' + +export default function InnerSideMenuMultipleSections() { + return ( +
+ + + + + API + + Database + + + + + + + Reports + Usage + + +
+ ) +} diff --git a/apps/design-system/registry/default/example/inner-side-menu-static-titles.tsx b/apps/design-system/registry/default/example/inner-side-menu-static-titles.tsx new file mode 100644 index 00000000000..12df6a102e2 --- /dev/null +++ b/apps/design-system/registry/default/example/inner-side-menu-static-titles.tsx @@ -0,0 +1,40 @@ +import React from 'react' +import { Card } from 'ui' +import { + InnerSideMenuCollapsible, + InnerSideMenuCollapsibleTrigger, + InnerSideMenuCollapsibleContent, + InnerSideMenuItem, + InnerSideMenuSeparator, + InnerSideBarTitle, +} from 'ui-patterns/InnerSideMenu' + +export default function InnerSideMenuBasic() { + return ( + +
+ Projects + Dashboard + Team + Settings +
+ +
+ Projects + + Dashboard + + Team + Settings +
+
+ Projects + + Dashboard + + Team + Settings +
+ + ) +} diff --git a/apps/design-system/registry/default/example/inner-side-menu-with-search.tsx b/apps/design-system/registry/default/example/inner-side-menu-with-search.tsx new file mode 100644 index 00000000000..1fdbac66c4f --- /dev/null +++ b/apps/design-system/registry/default/example/inner-side-menu-with-search.tsx @@ -0,0 +1,92 @@ +import React, { useState, useMemo } from 'react' +import { Card } from 'ui' +import { + InnerSideMenuCollapsible, + InnerSideMenuCollapsibleTrigger, + InnerSideMenuCollapsibleContent, + InnerSideMenuItem, + InnerSideBarFilters, + InnerSideBarFilterSearchInput, + InnerSideBarFilterSortDropdown, + InnerSideBarFilterSortDropdownItem, + InnerSideBarEmptyPanel, +} from 'ui-patterns/InnerSideMenu' + +export default function InnerSideMenuWithSearch() { + const [sort, setSort] = useState('alphabetical') + const [searchTerm, setSearchTerm] = useState('') + + const foodCategories = { + Fruits: ['Apple', 'Banana', 'Orange', 'Strawberry'], + Vegetables: ['Carrot', 'Broccoli', 'Spinach', 'Tomato'], + Grains: ['Rice', 'Wheat', 'Oats', 'Quinoa'], + Proteins: ['Chicken', 'Beef', 'Fish', 'Tofu'], + } + + const filteredAndSortedCategories = useMemo(() => { + return Object.entries(foodCategories).reduce( + (acc, [category, items]) => { + let filteredItems = items.filter((item) => + item.toLowerCase().includes(searchTerm.toLowerCase()) + ) + + // Sort the filtered items + filteredItems.sort((a, b) => { + if (sort === 'alphabetical') { + return a.localeCompare(b) + } else { + return b.localeCompare(a) + } + }) + + acc[category] = filteredItems + return acc + }, + {} as Record + ) + }, [foodCategories, searchTerm, sort]) + + return ( + + + setSearchTerm(e.target.value)} + aria-labelledby="Search items" + > + setSort(value)}> + + Sort Alphabetically + + + Sort Reverse Alphabetically + + + + + + {Object.entries(filteredAndSortedCategories).map(([category, items]) => ( + + + + {items.length > 0 ? ( + items.map((item) => ( + + {item} + + )) + ) : ( + + )} + + + ))} + + ) +} diff --git a/apps/design-system/registry/examples.ts b/apps/design-system/registry/examples.ts index a7e7a595bb7..132afc0f9e8 100644 --- a/apps/design-system/registry/examples.ts +++ b/apps/design-system/registry/examples.ts @@ -1030,6 +1030,36 @@ export const examples: Registry = [ type: 'components:example', files: ['example/info-tooltip-demo.tsx'], }, + { + name: 'inner-side-menu-demo', + type: 'components:example', + files: ['example/inner-side-menu-demo.tsx'], + }, + { + name: 'inner-side-menu-static-titles', + type: 'components:example', + files: ['example/inner-side-menu-static-titles.tsx'], + }, + { + name: 'inner-side-menu-loading', + type: 'components:example', + files: ['example/inner-side-menu-loading.tsx'], + }, + { + name: 'inner-side-menu-multiple-sections', + type: 'components:example', + files: ['example/inner-side-menu-multiple-sections.tsx'], + }, + { + name: 'inner-side-menu-empty', + type: 'components:example', + files: ['example/inner-side-menu-empty.tsx'], + }, + { + name: 'inner-side-menu-with-search', + type: 'components:example', + files: ['example/inner-side-menu-with-search.tsx'], + }, { name: 'multi-select-demo', type: 'components:example', diff --git a/packages/ui-patterns/InnerSideMenu/index.tsx b/packages/ui-patterns/InnerSideMenu/index.tsx index 52f946884d2..376c812e9a7 100644 --- a/packages/ui-patterns/InnerSideMenu/index.tsx +++ b/packages/ui-patterns/InnerSideMenu/index.tsx @@ -1,4 +1,4 @@ -import { ChevronsDown, Search } from 'lucide-react' +import { ChevronRight, ChevronsDown, Search } from 'lucide-react' import Link from 'next/link' import { ElementRef, forwardRef } from 'react' import { @@ -11,6 +11,7 @@ import { DropdownMenuRadioItem, DropdownMenuTrigger, Input_Shadcn_, + Skeleton, TooltipContent_Shadcn_, TooltipTrigger_Shadcn_, Tooltip_Shadcn_, @@ -18,11 +19,27 @@ import { } from 'ui' import ShimmeringLoader from '../ShimmeringLoader' +const InnerSideBarTitle = forwardRef>( + (props, ref) => { + const { className, ...restProps } = props + return ( + + ) + } +) + const InnerSideMenuCollapsible = forwardRef< ElementRef, React.ComponentPropsWithoutRef >(({ ...props }, ref) => { - return + return }) const InnerSideMenuCollapsibleTrigger = forwardRef< @@ -31,7 +48,6 @@ const InnerSideMenuCollapsibleTrigger = forwardRef< >(({ ...props }, ref) => { return ( - {/* */} + /> {props.title} ) @@ -55,8 +71,12 @@ const InnerSideMenuCollapsibleContent = forwardRef< >(({ ...props }, ref) => { return ( ) }) @@ -92,6 +112,17 @@ const InnerSideMenuItem = forwardRef< ) }) +function InnerSideMenuItemLoading({ + className, + ...props +}: React.ComponentPropsWithoutRef) { + return ( +
+ +
+ ) +} + const InnerSideBarFilters = forwardRef>( (props, ref) => { return ( @@ -199,7 +230,7 @@ const InnerSideBarEmptyPanel = forwardRef< ref={ref} {...props} className={cn( - 'border bg-surface-100/50 flex flex-col gap-y-3 items-center justify-center rounded-md px-3 py-4', + 'border bg-surface-100/50 flex flex-col gap-y-3 items-center justify-center rounded-md px-5 py-4', props.className )} > @@ -217,14 +248,16 @@ const InnerSideBarEmptyPanel = forwardRef< export { InnerSideBarEmptyPanel, + InnerSideBarFilters, InnerSideBarFilterSearchInput, InnerSideBarFilterSortDropdown, InnerSideBarFilterSortDropdownItem, - InnerSideBarFilters, InnerSideBarShimmeringLoaders, + InnerSideBarTitle, InnerSideMenuCollapsible, InnerSideMenuCollapsibleContent, InnerSideMenuCollapsibleTrigger, InnerSideMenuItem, + InnerSideMenuItemLoading, InnerSideMenuSeparator, } From 2d266bbfd98aafeeba7897e272ee4a5eaf1e7e30 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Wed, 23 Oct 2024 16:45:49 +0800 Subject: [PATCH 2/6] Update inner-side-menu.mdx --- apps/design-system/content/docs/fragments/inner-side-menu.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/design-system/content/docs/fragments/inner-side-menu.mdx b/apps/design-system/content/docs/fragments/inner-side-menu.mdx index d65255904f2..329252c1efe 100644 --- a/apps/design-system/content/docs/fragments/inner-side-menu.mdx +++ b/apps/design-system/content/docs/fragments/inner-side-menu.mdx @@ -61,7 +61,7 @@ You can wrap the `` conponents however you like. Below we've Use `` to show a loading state for menu items. -This item is a wrapper around the `` component, and also includes some y-padding so the items don't layout shift when shifting to loaded state and to look visually seperated in a list. +This item is a wrapper around the `` component, and also includes some y-padding so the items don't layout shift when shifting to loaded state and to look visually separated in a list. From c59b2675cbd28f5cc05e1ae525629e64437e9243 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Wed, 23 Oct 2024 17:31:31 +0800 Subject: [PATCH 3/6] chore: update SQL sidebar to use ui pattern components --- .../SQLEditorNavV2/SQLEditorNav.tsx | 158 +++++++++++------- packages/config/tailwind.config.js | 3 + packages/ui-patterns/InnerSideMenu/index.tsx | 10 +- 3 files changed, 108 insertions(+), 63 deletions(-) diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx index 16d3174d5ac..bf928ef99cf 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx @@ -39,12 +39,21 @@ import { CollapsibleTrigger_Shadcn_, Collapsible_Shadcn_, Separator, + Skeleton, TreeView, + Button, } 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 { + InnerSideBarEmptyPanel, + InnerSideMenuCollapsible, + InnerSideMenuCollapsibleContent, + InnerSideMenuCollapsibleTrigger, + InnerSideMenuSeparator, +} from 'ui-patterns' interface SQLEditorNavProps { searchText: string @@ -341,27 +350,24 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) => return ( <> - - + {((numProjectSnippets === 0 && searchText.length === 0) || numProjectSnippets > 0) && ( <> - - - - - Shared{numProjectSnippets > 0 && ` (${numProjectSnippets})`} - - - + + 0 ? ` (${numProjectSnippets})` : ''}`} + /> + {numProjectSnippets === 0 ? ( -
- - No shared queries - - Share queries with your team by right-clicking on the query. - - -
+ ) : ( )} /> )} - - - + + + )} {((numFavoriteSnippets === 0 && searchText.length === 0) || numFavoriteSnippets > 0) && ( <> - - - - - Favorites{numFavoriteSnippets > 0 && ` (${numFavoriteSnippets})`} - - - + + 0 ? ` (${numFavoriteSnippets})` : ''}`} + /> + {numFavoriteSnippets === 0 ? ( -
- - No favorite queries - + Save a query to favorites for easy accessbility by clicking the{' '} {' '} icon. - - -
+ + } + /> ) : ( )} /> )} - - - + + + )} - - - - - PRIVATE - {numPrivateSnippets > 0 && ` (${numPrivateSnippets})`} - - - + + 0 ? ` (${numPrivateSnippets})` : ''}`} + /> + {!snapV2.loaded[projectRef as string] ? ( -
- -
+ <> +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ ) : folders.length === 0 && numPrivateSnippets === 0 ? ( -
- - No queries created yet - - Queries will be automatically saved once you start writing in the editor. - - -
+ { + // handle create query here + }} + > + Create query + + } + /> ) : ( )} /> )} - - + + diff --git a/packages/config/tailwind.config.js b/packages/config/tailwind.config.js index 9254c114124..d0d5df21861 100644 --- a/packages/config/tailwind.config.js +++ b/packages/config/tailwind.config.js @@ -420,6 +420,9 @@ const uiConfig = ui({ require('@tailwindcss/typography'), require('tailwindcss-animate'), plugin(motionSafeTransition), + function ({ addVariant }) { + addVariant('not-disabled', '&:not(:disabled)') + }, ], }) diff --git a/packages/ui-patterns/InnerSideMenu/index.tsx b/packages/ui-patterns/InnerSideMenu/index.tsx index 376c812e9a7..a19c2ee384b 100644 --- a/packages/ui-patterns/InnerSideMenu/index.tsx +++ b/packages/ui-patterns/InnerSideMenu/index.tsx @@ -39,7 +39,13 @@ const InnerSideMenuCollapsible = forwardRef< ElementRef, React.ComponentPropsWithoutRef >(({ ...props }, ref) => { - return + return ( + + ) }) const InnerSideMenuCollapsibleTrigger = forwardRef< @@ -51,7 +57,7 @@ const InnerSideMenuCollapsibleTrigger = forwardRef< ref={ref} {...props} className={cn( - 'w-full flex gap-1 items-center group px-3 text-xs font-normal font-mono uppercase text-lighter tracking-wide', + 'w-full flex gap-1 items-center group px-3 text-sm font-normal font-mono uppercase text-lighter tracking-wide', props.className )} > From 8a179e62b7d793cd74ce3c33be2a2c57061147f7 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Mon, 4 Nov 2024 18:21:20 +0800 Subject: [PATCH 4/6] mor --- .../layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx | 3 +-- packages/ui-patterns/InnerSideMenu/index.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx index bf928ef99cf..4f65e32202f 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx @@ -418,7 +418,6 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) => Save a query to favorites for easy accessbility by clicking the{' '} @@ -500,7 +499,7 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) => & { title: string - description?: string + description?: string | React.ReactNode illustration?: React.ReactNode actions?: React.ReactNode } From f940677d70523a47b5505f85e2d4f9c33512d4ff Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Mon, 4 Nov 2024 20:53:43 +0800 Subject: [PATCH 5/6] Update --- .../layouts/SQLEditorLayout/SQLEditorMenu.tsx | 137 +++++++++--------- .../SQLEditorNavV2/SQLEditorNav.tsx | 41 +----- 2 files changed, 74 insertions(+), 104 deletions(-) diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx index 16c4cc691d1..dce32b418ac 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx @@ -36,11 +36,10 @@ export const SQLEditorMenu = ({ onViewOngoingQueries }: SQLEditorMenuProps) => { const router = useRouter() const { profile } = useProfile() const project = useSelectedProject() - const { ref, id: activeId } = useParams() + const { ref } = useParams() const snapV2 = useSqlEditorV2StateSnapshot() const [searchText, setSearchText] = useState('') - const [selectedQueries, setSelectedQueries] = useState([]) const canCreateSQLSnippet = useCheckPermissions(PermissionAction.CREATE, 'user_content', { resource: { type: 'sql', owner_id: profile?.id }, @@ -80,78 +79,76 @@ export const SQLEditorMenu = ({ onViewOngoingQueries }: SQLEditorMenuProps) => { } return ( - <> -
-
-
- - setSearchText(e.target.value)} +
+
+
+ + setSearchText(e.target.value)} + > + snapV2.setOrder(value)} > - snapV2.setOrder(value)} - > - - Alphabetical - - - Created At - - - - - - -
- -
- - Templates - - - Quickstarts - -
- - + + Alphabetical + + + Created At + + + + + + +
-
- +
+ + Templates + + + Quickstarts +
+ +
- + +
+ +
+
) } diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx index 4f65e32202f..9562476804d 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx @@ -1,4 +1,4 @@ -import { ChevronRight, Eye, EyeOffIcon, Heart, Unlock } from 'lucide-react' +import { Eye, EyeOffIcon, Heart, Unlock } from 'lucide-react' import { useRouter } from 'next/router' import { useEffect, useState } from 'react' import { toast } from 'sonner' @@ -31,22 +31,7 @@ import { useSnippets, useSqlEditorV2StateSnapshot, } from 'state/sql-editor-v2' -import { - AlertDescription_Shadcn_, - AlertTitle_Shadcn_, - Alert_Shadcn_, - CollapsibleContent_Shadcn_, - CollapsibleTrigger_Shadcn_, - Collapsible_Shadcn_, - Separator, - Skeleton, - TreeView, - Button, -} 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 { Separator, Skeleton, TreeView } from 'ui' import { InnerSideBarEmptyPanel, InnerSideMenuCollapsible, @@ -54,6 +39,9 @@ import { InnerSideMenuCollapsibleTrigger, InnerSideMenuSeparator, } from 'ui-patterns' +import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' +import { ROOT_NODE, formatFolderResponseForTreeView } from './SQLEditorNav.utils' +import { SQLEditorTreeViewItem } from './SQLEditorTreeViewItem' interface SQLEditorNavProps { searchText: string @@ -84,11 +72,6 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) => const [selectedSnippetToDownload, setSelectedSnippetToDownload] = useState() const [selectedFolderToDelete, setSelectedFolderToDelete] = useState() - const COLLAPSIBLE_TRIGGER_CLASS_NAMES = - 'flex items-center gap-x-2 px-4 [&[data-state=open]>svg]:!rotate-90' - const COLLAPSIBLE_ICON_CLASS_NAMES = 'text-foreground-light transition-transform duration-200' - const COLLASIBLE_HEADER_CLASS_NAMES = 'text-foreground-light font-mono text-sm uppercase' - // ======================================================= // [Joshen] Set up favorites, shared, and private snippets // ======================================================= @@ -497,19 +480,9 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) => ) : folders.length === 0 && numPrivateSnippets === 0 ? ( { - // handle create query here - }} - > - Create query - - } + description="Queries will be automatically saved once you start writing in the editor" /> ) : ( Date: Fri, 8 Nov 2024 18:44:47 +0800 Subject: [PATCH 6/6] Update index.tsx --- packages/ui-patterns/InnerSideMenu/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/ui-patterns/InnerSideMenu/index.tsx b/packages/ui-patterns/InnerSideMenu/index.tsx index 7dcd843113f..d478cc2ef61 100644 --- a/packages/ui-patterns/InnerSideMenu/index.tsx +++ b/packages/ui-patterns/InnerSideMenu/index.tsx @@ -79,10 +79,7 @@ const InnerSideMenuCollapsibleContent = forwardRef< ) })