diff --git a/apps/studio-prototype/src/app/[org]/branch-menu.tsx b/apps/studio-prototype/src/app/[org]/branch-menu.tsx index 4904576a6ab..38c3d923038 100644 --- a/apps/studio-prototype/src/app/[org]/branch-menu.tsx +++ b/apps/studio-prototype/src/app/[org]/branch-menu.tsx @@ -20,6 +20,7 @@ import { Popover_Shadcn_, cn, } from 'ui' +import EnableBranchingDialog from './enable-branching-dialog' export function BranchMenu() { const [config] = useConfig() @@ -40,12 +41,15 @@ export function BranchMenu() { selectedOrg?.key, selectedProject?.key ) + const hideProjectsDropdown = resolveHideProjectsDropdown( pathName, selectedOrg?.key, selectedProject?.key ) + console.log('hideProjectsDropdown', hideProjectsDropdown) + const branchBasedSettings = !hideBranchesDropdown && pathName.startsWith(`/${selectedOrg?.key}/settings/project`) @@ -155,55 +159,55 @@ const IconHandler = (props: { icon: string }) => { d="M9.97796 18.9666L12.3138 14.9208C12.416 14.7433 12.4698 14.5421 12.4697 14.3373C12.4696 14.1325 12.4156 13.9313 12.3132 13.7539L9.94105 9.68715C9.83854 9.5096 9.69111 9.36217 9.51356 9.25966C9.33601 9.15715 9.13461 9.10319 8.9296 9.10319L4.2216 9.08223C4.01679 9.08223 3.81558 9.13608 3.63816 9.2384C3.46074 9.34071 3.31334 9.48788 3.21075 9.66515L0.874907 13.711C0.772684 13.8884 0.718929 14.0897 0.719034 14.2945C0.719139 14.4993 0.773101 14.7005 0.875506 14.8778L3.24766 18.9446C3.35017 19.1221 3.4976 19.2696 3.67515 19.3721C3.85269 19.4746 4.0541 19.5286 4.25911 19.5286L8.96711 19.5495C9.17192 19.5495 9.37313 19.4957 9.55055 19.3934C9.72797 19.291 9.87537 19.1439 9.97796 18.9666Z" fill="#282828" stroke="inherit" - stroke-linecap="round" - stroke-linejoin="round" + strokeLinecap="round" + strokeLinejoin="round" /> { ) @@ -242,7 +246,7 @@ const BranchMenuPopoverContent = (props: { branchBasedSettings?: boolean }) => { const [config, setConfig] = useConfig() - const { selectedOrg, selectedProject } = config + const { selectedOrg, selectedProject, selectedEnv } = config // data const projects = selectedOrg?.projects || [] @@ -256,9 +260,12 @@ const BranchMenuPopoverContent = (props: { const projectInputRef = React.useRef(null) const branchInputRef = React.useRef(null) - const _projectFocus = projectFocus || selectedProject?.key // dumb variable needed + const _projectFocus = selectedProject?.key // dumb variable needed const projectMeta = projects.find((proj) => proj.key === _projectFocus) + console.log(branches) + console.log(projectMeta) + // pick up stray unfocussed state with left and right keys useHotkeys( 'right', @@ -342,7 +349,7 @@ const BranchMenuPopoverContent = (props: { className={cn( 'w-4 h-4 bg-foreground rounded-full', 'flex items-center justify-center', - project.key === config.project ? 'opacity-100' : 'opacity-0' + selectedProject?.key === project.key ? 'opacity-100' : 'opacity-0' )} > @@ -367,11 +374,8 @@ const BranchMenuPopoverContent = (props: { ) : !projectMeta?.branching ? (

Branching not yet enabled

-

Use for safe database migrations

- - +

Use for safe database migrations

+
) : ( <> @@ -421,7 +425,7 @@ const BranchMenuPopoverContent = (props: { className={cn( 'w-4 h-4 bg-foreground rounded-full', 'flex items-center justify-center', - config?.env?.name === branch.key ? 'opacity-100' : 'opacity-0' + selectedEnv?.key === branch.key ? 'opacity-100' : 'opacity-0' )} > diff --git a/apps/studio-prototype/src/app/[org]/enable-branching-dialog.tsx b/apps/studio-prototype/src/app/[org]/enable-branching-dialog.tsx new file mode 100644 index 00000000000..62d26614674 --- /dev/null +++ b/apps/studio-prototype/src/app/[org]/enable-branching-dialog.tsx @@ -0,0 +1,132 @@ +'use client' + +import { useConfig } from '@/src/hooks/use-config' +import { X } from 'lucide-react' +import { useState } from 'react' +import { + Button, + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogSection, + DialogSectionSeparator, + DialogTitle, + DialogTrigger, +} from 'ui' + +export default function EnableBranchingDialog() { + const [config, setConfig] = useConfig() + const [open, setOpenState] = useState(false) + const { selectedEnv, selectedOrg, selectedProject } = config + return ( + + + + + + + Enable branching + Some description + + + +

Turn on Github

+

Turn on Github

+ + + +

Turn on Vercel

+

Turn on Vercel

+ + + + + + + ) +} diff --git a/apps/studio-prototype/src/app/[org]/layout.tsx b/apps/studio-prototype/src/app/[org]/layout.tsx index b146211ce1f..3972a3a5ea9 100644 --- a/apps/studio-prototype/src/app/[org]/layout.tsx +++ b/apps/studio-prototype/src/app/[org]/layout.tsx @@ -1,3 +1,4 @@ +import RedirectCatcher from './redirect-catcher' import SettingsMenuPanel from './settings-menu-panel' import SideNav from './side-nav' import TopHeader from './top-header' @@ -15,6 +16,7 @@ export default function OrgLayout({ {children} + ) } diff --git a/apps/studio-prototype/src/app/[org]/redirect-catcher.tsx b/apps/studio-prototype/src/app/[org]/redirect-catcher.tsx new file mode 100644 index 00000000000..77ed17d2907 --- /dev/null +++ b/apps/studio-prototype/src/app/[org]/redirect-catcher.tsx @@ -0,0 +1,31 @@ +'use client' + +import { useParams, usePathname, useRouter } from 'next/navigation' +import { useEffect } from 'react' +import { useConfig } from '@/src/hooks/use-config' + +export default function RedirectCatcher() { + const asPath = usePathname() + const router = useRouter() + const [config, setConfig] = useConfig() + const { selectedOrg, selectedProject } = config + const { org, project } = useParams() + + useEffect(() => { + if ( + selectedOrg?.key && + selectedProject?.key && + (selectedOrg.key !== org || selectedProject.key !== project) + ) { + // Construct the new URL with the updated parameters + const newUrl = asPath + .replace(`/${org}`, `/${selectedOrg.key}`) + .replace(`/${project}`, `/${selectedProject.key}`) + + // Navigate to the new URL + router.push(newUrl) + } + }, [selectedOrg?.key, selectedProject?.key, org, project, asPath, router]) + + return <> +} diff --git a/apps/studio-prototype/src/app/[org]/settings-menu-children.tsx b/apps/studio-prototype/src/app/[org]/settings-menu-children.tsx index 78c7dc2ae41..477ffa01f03 100644 --- a/apps/studio-prototype/src/app/[org]/settings-menu-children.tsx +++ b/apps/studio-prototype/src/app/[org]/settings-menu-children.tsx @@ -1,15 +1,15 @@ 'use client' -import React from 'react' -import { usePathname } from 'next/navigation' import settingsData from '@/src/config/settings.json' -import { ScrollArea, ScrollBar, cn } from 'ui' import { useConfig } from '@/src/hooks/use-config' +import { usePathname } from 'next/navigation' +import { ScrollArea, ScrollBar } from 'ui' import { ClickCounter } from './click-counter' -import Link from 'next/link' +import { SettingsGroup } from './settings-menu-group' // Define types for the settings data items -interface SettingsItemProps { + +export interface SettingsItemProps { item: { key: string label: string @@ -18,111 +18,62 @@ interface SettingsItemProps { } basePath: string } - -interface SettingsGroupProps { - group: string +export interface SettingsGroupProps { + group: 'Project settings' | 'Environment settings' | 'Organization settings' | 'Account settings' items: SettingsItemProps['item'][] basePath: string + hasBranchingEnabled?: boolean } const SettingsMenuChildren = () => { const [config] = useConfig() const pathname = usePathname() - const { organization, project } = config + const { selectedOrg, selectedProject } = config const getBasePath = (section: string): string => { switch (section) { case 'PROJECT_SETTINGS': - return `/${organization}/settings/project/${project}` + return `/${selectedOrg?.key}/settings/project/${selectedProject?.key}` + case 'ENV_SETTINGS': + return `/${selectedOrg?.key}/settings/project/${selectedProject?.key}` case 'ORGANIZATION_SETTINGS': - return `/${organization}/settings` + return `/${selectedOrg?.key}/settings` case 'ACCOUNT_SETTINGS': - return `/${organization}/settings/account` + return `/${selectedOrg?.key}/settings/account` default: return '' } } - const SettingsItem = React.memo( - ({ item, basePath }: SettingsItemProps) => { - const fullPath = `${basePath}${item.href}` - const isActive = pathname.startsWith(fullPath) - - return ( -
  • - {/* */} - - {item.label} -
    - - {item.items && ( -
      - {item.items.map((childItem) => ( - - ))} -
    - )} -
    • - ) - }, - (prevProps, nextProps) => { - return prevProps.item === nextProps.item && prevProps.basePath === nextProps.basePath - } - ) - - SettingsItem.displayName = 'SettingsItem' - - const SettingsGroup = React.memo( - ({ group, items, basePath }: SettingsGroupProps) => ( -
    - {/* */} -

    - {group} -

    -
      - {items.map((item) => ( - - ))} -
    -
    - ), - (prevProps, nextProps) => { - return ( - prevProps.group === nextProps.group && - prevProps.items === nextProps.items && - prevProps.basePath === nextProps.basePath - ) - } - ) - - SettingsGroup.displayName = 'SettingsGroup' + const hasBranchingEnabled = selectedProject?.branching return ( {/* */}