Files
supabase/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
T
fb24d91305 Feat/ Org layout (#33150)
* update test

* move back button, fix width issues on sidebar

* update sidebar logic

* Update ProjectLayout.tsx

* lots of updates. layouts now streamlined. localstorage for tabs in use

* moar

* bunch of new tab logic

* fix empty tab issue

* Update tabs.ts

* layouts switched

* new pages now have fixed layouts

* fix tabs

* fix code bg

* add tabs support for multiple project refs

* intialization issue

* update ID handling

* fixed isOpened state for SQL snippets

* remove old assistant because its bugging up panels

* preview style works in sql editor

* fix border

* removes preview tab if there is one

* fix background of loading skeleton

* lots of issues with types/icons/redirect

* new tab cards

* snippets in empty state now work

* moar stuff

* tabs now in feature flags

* Update tabs.ts

* Update tabs.ts

* moar

* add feature previews

* remove code not needed

* Update next-env.d.ts

* Delete FeaturePreviewModal.tsx

* fix typescript errors. remove more explorer stuff

* remove explorer files

* fixed issues with templates and quickstarts tab

* fixed active state when tabs are not opted in

* logic error

* fix open/highlight issue when opted out of tabs

* templates/quickstarts now displayed with new cards

* Update recent-items.tsx

* Update new-tab.tsx

* add icon back in

* add old empty state back in

* recent items updated to respect project ref

* localstorage cleanup on deletion

* moar

* overflow tabs now working

* correct tab names used for new sql templates/quickstarts

* ongoing queries fix

* cleanup

* update images

* Update RouteValidationWrapper.tsx

* Update AppLayout.tsx

* Update NavigationBar.tsx

* add headers back into side panels

* improve writing

* tabs now drag and drop a billion times better

* Update tabs.tsx

* Update tabs.tsx

* init issues on stores, which caused a race condition.

* fix hydration error

* init

* init sidebars

* init

* Update app-default-navigation.tsx

* user dropdown updates

* moar layouts

* init

* moar

* moar

* updat

* reverse top bar

* some banners

* moar

* start adding account page

* change styling of dropdowns

* Update sidebar.tsx

* fix new tab issue in sql

* Update ProjectLayout.tsx

* Update pnpm-lock.yaml

* latest

* Update pnpm-lock.yaml

* moar layouts on account

* getLayout updates

* more fixes

* force a cache build

* moar

* Update app-default-navigation.tsx

* fix AI button animation

* moar layout

* account pages refactored

* Update user-dropdown.tsx

* Update new-tab.tsx

* move EditorMenuListSkeleton

* Fix type issues

* fixes: DESIGN-87

fixes: DESIGN-87

* refactor sort/filter components

* Update rules-set-button-text.tsx

* remove discussions for now

* small styling fixes

* Update FeaturePreviewModal.tsx

* Update FeaturePreviewModal.tsx

* Update RouteValidationWrapper.tsx

* revert

* revert

* revert

* revert

* revert

* more revert

* Update collapse-button.tsx

* Update SQLEditorTreeViewItem.tsx

* revert

* Update SchemaGraph.tsx

* Delete new-upcoming.tsx

* revert

* Update ProjectLayout.tsx

* fix home link

* Update table-editor.spec.ts

* test update

* Update projects.tsx

* remove

* Delete sidebar-open-top-banner.tsx

* add organizations page

* Update table-editor.spec.ts

* Fix the playwright tests.

* layout fixes

* layout fix

* revert sort/filter

* Update LastSignInWrapper.tsx

* revert

* revert

* remove

* update file names

* revert

* revert

* revert

* advisor lint page tabs revert

* revert

* revert

* revert

* revert

* revert

* revert tabs

* remove packages

* add sidebar

* sidebar docs added

* add sidebar

* fixed issues

* fix mobile

* fixes

* add org side bar in

* redirect updated

* fix more layouts

* move settings icon back down

* remove old stuff

* Delete SideBar.tsx

* use ProfileImage component

* spelling

* Update ThemeSettings.tsx

* Update ThemeSettings.tsx

* Update Sidebar.tsx

* layout udpate

* Update Sidebar.tsx

* fixes

* Minor lints

* Update Sidebar.tsx

* create a alt user dropdown for self hosting and local

* add fragment back in

* Adds Theme Selector for local/self hosting

* Update UserDropdown.tsx

* fix theme selector for local self host

* Update index.ts

* Update DefaultLayout.tsx

* now supports feature preview

* remove old files

* rename files

* revert

* Update LayoutHeader.tsx

* clean

* revert

* revert

* Update resource-banner.tsx

* remove redundant side bar stuff

* organizations action bar updated. removed hardcoded value

* fix type errors

* fix tests

* Undo test changes

* Fix account pages for when feature preview is off

* Bug fixes 1

* Missing key in map of EmailTemplates

* Fix missing border in StorageExplorer

* fix missing header in performance advisor

* Final clean up

* Fix DefaultLayout re-rendering issue on auth pages

* A couple of fixes

* Redirect to /organizations if land on /projects with feature preview on

* Route back to /projects if toggling preview off on /organizations

* Add HomePageActions to /org/slug

* make re-routing nicer

* Moar fixes

* Fix logging in redirect to /organizations irregardless of feature preview

* Fix missing withAuth in OrganizationLayout

* Minor clean upo

* Fix branch dropdown not aligned

* Add feature preview for update layout

* update dropdowns to only be chevron triggered in new layout

* Update content-query.ts

* Update entity-types-infinite-query.ts

* add IS_PLATFORM for org dropdown

* Add IS_PLATFORM check for EnableBranchingDropdown in LayoutHeader

* Midway fixing mobile nav

* Mobile nav fixes

* Address feedbacks

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Alaister Young <a@alaisteryoung.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
2025-04-08 11:32:29 +08:00

183 lines
5.8 KiB
TypeScript

import { Blocks, FileText, Lightbulb, List, Settings } from 'lucide-react'
import { ICON_SIZE, ICON_STROKE_WIDTH } from 'components/interfaces/Sidebar'
import { generateAuthMenu } from 'components/layouts/AuthLayout/AuthLayout.utils'
import { generateDatabaseMenu } from 'components/layouts/DatabaseLayout/DatabaseMenu.utils'
import { generateSettingsMenu } from 'components/layouts/ProjectSettingsLayout/SettingsMenu.utils'
import type { Route } from 'components/ui/ui.types'
import { EditorIndexPageLink } from 'data/prefetchers/project.$ref.editor'
import type { Project } from 'data/projects/project-detail-query'
import {
Auth,
Database,
EdgeFunctions,
Realtime,
Reports,
SqlEditor,
Storage,
TableEditor,
} from 'icons'
import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
export const generateToolRoutes = (
ref?: string,
project?: Project,
features?: { sqlEditorTabs: boolean }
): Route[] => {
const { sqlEditorTabs } = features ?? {}
const isProjectBuilding = project?.status === PROJECT_STATUS.COMING_UP
const buildingUrl = `/project/${ref}`
return [
{
key: 'editor',
label: 'Table Editor',
icon: <TableEditor size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/editor`),
linkElement: <EditorIndexPageLink projectRef={ref} />,
},
{
key: 'sql',
label: 'SQL Editor',
icon: <SqlEditor size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: !IS_PLATFORM
? `/project/${ref}/sql/1`
: ref &&
(isProjectBuilding ? buildingUrl : `/project/${ref}/sql${!!sqlEditorTabs ? '' : '/new'}`),
},
]
}
export const generateProductRoutes = (
ref?: string,
project?: Project,
features?: { auth?: boolean; edgeFunctions?: boolean; storage?: boolean; realtime?: boolean }
): Route[] => {
const isProjectActive = project?.status === PROJECT_STATUS.ACTIVE_HEALTHY
const isProjectBuilding = project?.status === PROJECT_STATUS.COMING_UP
const buildingUrl = `/project/${ref}`
const authEnabled = features?.auth ?? true
const edgeFunctionsEnabled = features?.edgeFunctions ?? true
const storageEnabled = features?.storage ?? true
const realtimeEnabled = features?.realtime ?? true
const databaseMenu = generateDatabaseMenu(project)
const authMenu = generateAuthMenu(ref as string)
return [
{
key: 'database',
label: 'Database',
icon: <Database size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link:
ref &&
(isProjectBuilding
? buildingUrl
: isProjectActive
? `/project/${ref}/database/schemas`
: `/project/${ref}/database/backups/scheduled`),
items: databaseMenu,
},
...(authEnabled
? [
{
key: 'auth',
label: 'Authentication',
icon: <Auth size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/auth/users`),
items: authMenu,
},
]
: []),
...(storageEnabled
? [
{
key: 'storage',
label: 'Storage',
icon: <Storage size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/storage/buckets`),
},
]
: []),
...(IS_PLATFORM && edgeFunctionsEnabled
? [
{
key: 'functions',
label: 'Edge Functions',
icon: <EdgeFunctions size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/functions`),
},
]
: []),
...(realtimeEnabled
? [
{
key: 'realtime',
label: 'Realtime',
icon: <Realtime size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/realtime/inspector`),
},
]
: []),
]
}
export const generateOtherRoutes = (ref?: string, project?: Project): Route[] => {
const isProjectBuilding = project?.status === PROJECT_STATUS.COMING_UP
const buildingUrl = `/project/${ref}`
return [
{
key: 'advisors',
label: 'Advisors',
icon: <Lightbulb size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/advisors/security`),
},
...(IS_PLATFORM
? [
{
key: 'reports',
label: 'Reports',
icon: <Reports size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/reports`),
},
]
: []),
{
key: 'logs',
label: 'Logs',
icon: <List size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/logs`),
},
{
key: 'api',
label: 'API Docs',
icon: <FileText size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/api`),
},
{
key: 'integrations',
label: 'Integrations',
icon: <Blocks size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/integrations`),
},
]
}
export const generateSettingsRoutes = (ref?: string, project?: Project): Route[] => {
const settingsMenu = generateSettingsMenu(ref as string)
return [
...(IS_PLATFORM
? [
{
key: 'settings',
label: 'Project Settings',
icon: <Settings size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && `/project/${ref}/settings/general`,
items: settingsMenu,
},
]
: []),
]
}