devpush 0.0.0-stage → 1.0.0-beta.4

package/src/router.tsx

@@ -0,0 +1,46 @@
+import { createRouter as createTanStackRouter } from '@tanstack/react-router'
+import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
+import {
+  RouteErrorState,
+  RouteNotFoundState,
+} from './components/route-error-state'
+import { createQueryClient } from './lib/query'
+import { routeTree } from './routeTree.gen'
+
+export function getRouter() {
+  const queryClient = createQueryClient()
+  const router = createTanStackRouter({
+    routeTree,
+    context: {
+      queryClient,
+    },
+    scrollRestoration: true,
+    defaultPreload: 'intent',
+    defaultPendingMs: 150,
+    defaultPendingMinMs: 0,
+    defaultPreloadStaleTime: 0,
+    // Query freshness owns data reuse; route loaders must observe invalidation.
+    defaultStaleTime: 0,
+    defaultErrorComponent: RouteErrorState,
+    defaultNotFoundComponent: () => (
+      <RouteNotFoundState
+        title="Page not found"
+        description="The page you requested does not exist, or you do not have access."
+      />
+    ),
+  })
+
+  setupRouterSsrQueryIntegration({
+    queryClient,
+    router,
+    wrapQueryClient: false,
+  })
+
+  return router
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}

package/src/routes/$teamSlug.index.tsx

@@ -0,0 +1,53 @@
+import { pageHead } from '#devpush/lib/page-head'
+import { useRefreshError } from '#devpush/lib/use-refresh-error'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { createFileRoute } from '@tanstack/react-router'
+
+import { TeamHome } from '#devpush/features/teams/team-home'
+import { TeamOverviewPending } from '#devpush/features/teams/team-route-pending'
+import {
+  teamSectionQueryOptions,
+  teamShellQueryOptions,
+} from '#devpush/lib/team-context-query'
+
+export const Route = createFileRoute('/$teamSlug/')({
+  loader: ({ context, params }) =>
+    context.queryClient.fetchQuery(
+      teamSectionQueryOptions({
+        section: 'overview',
+        teamSlug: params.teamSlug,
+      }),
+    ),
+  pendingMs: 150,
+  pendingComponent: TeamOverviewPending,
+  component: TeamHomeRoute,
+  head: ({ params }) => pageHead('Overview', params.teamSlug),
+})
+
+function TeamHomeRoute() {
+  const params = Route.useParams()
+  const { data: shell } = useSuspenseQuery(
+    teamShellQueryOptions({ teamSlug: params.teamSlug }),
+  )
+  const { data: section, error } = useSuspenseQuery(
+    teamSectionQueryOptions({
+      section: 'overview',
+      teamSlug: params.teamSlug,
+    }),
+  )
+
+  useRefreshError(error, 'team-deployments-refresh')
+
+  if (section.section !== 'overview') {
+    throw new Error('Team overview context is unavailable.')
+  }
+
+  return (
+    <TeamHome
+      team={shell.team}
+      deployments={section.deployments}
+      projects={shell.projects}
+      servers={shell.servers}
+    />
+  )
+}

package/src/routes/$teamSlug.new-project.tsx

@@ -0,0 +1,13 @@
+import { pageHead } from '#devpush/lib/page-head'
+import { createFileRoute } from '@tanstack/react-router'
+import { NewProjectRouteDialog } from '#devpush/features/repositories/new-project-dialog'
+
+export const Route = createFileRoute('/$teamSlug/new-project')({
+  component: NewProjectRoute,
+  head: ({ params }) => pageHead('New project', params.teamSlug),
+})
+
+function NewProjectRoute() {
+  const { teamSlug } = Route.useParams()
+  return <NewProjectRouteDialog teamSlug={teamSlug} />
+}

package/src/routes/$teamSlug.projects.$projectName.backups.$backupId.tsx

@@ -0,0 +1,40 @@
+import { pageHead } from '#devpush/lib/page-head'
+import { createFileRoute, useParams } from '@tanstack/react-router'
+import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
+
+import { ProjectBackupDetails } from '#devpush/features/projects/project-backup-details'
+import { projectContextQueryOptions } from '#devpush/lib/project-context-query'
+
+export const Route = createFileRoute(
+  '/$teamSlug/projects/$projectName/backups/$backupId',
+)({
+  component: BackupPolicyRoute,
+  head: ({ params }) =>
+    pageHead(`Backup ${params.backupId}`, params.projectName, params.teamSlug),
+})
+
+function BackupPolicyRoute() {
+  const queryClient = useQueryClient()
+  const { backupId } = Route.useParams()
+  const params = useParams({
+    from: '/$teamSlug/projects/$projectName/backups/$backupId',
+  })
+  const { data: context } = useSuspenseQuery(
+    projectContextQueryOptions(
+      {
+        teamSlug: params.teamSlug,
+        projectName: params.projectName,
+        scope: 'backups',
+      },
+      queryClient,
+    ),
+  )
+
+  return (
+    <ProjectBackupDetails
+      key={backupId}
+      context={context}
+      backupId={backupId}
+    />
+  )
+}

package/src/routes/$teamSlug.projects.$projectName.backups.tsx

@@ -0,0 +1,82 @@
+import { backupsEnabled } from '#devpush/lib/backup-feature'
+import { pageHead } from '#devpush/lib/page-head'
+import {
+  Outlet,
+  createFileRoute,
+  notFound,
+  useParams,
+  useRouterState,
+  useChildMatches,
+} from '@tanstack/react-router'
+import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
+
+import { ProjectBackups } from '#devpush/features/projects/project-backups'
+import { ProjectSectionPending } from '#devpush/features/projects/project-route-pending'
+import { projectContextQueryOptions } from '#devpush/lib/project-context-query'
+import { stringSearchValidator } from '#devpush/lib/search'
+
+const validateSearch = stringSearchValidator([
+  'policy',
+  'environment',
+  'server',
+  'status',
+  'time',
+  'type',
+] as const)
+
+export const Route = createFileRoute(
+  '/$teamSlug/projects/$projectName/backups',
+)({
+  beforeLoad: () => {
+    if (!backupsEnabled) {
+      throw notFound()
+    }
+  },
+  loader: ({ context, params }) =>
+    context.queryClient.fetchQuery(
+      projectContextQueryOptions(
+        {
+          teamSlug: params.teamSlug,
+          projectName: params.projectName,
+          scope: 'backups',
+        },
+        context.queryClient,
+      ),
+    ),
+  validateSearch,
+  pendingMs: 0,
+  pendingComponent: BackupsPending,
+  component: BackupsRoute,
+  head: ({ params }) =>
+    pageHead('Backups', params.projectName, params.teamSlug),
+})
+
+function BackupsPending() {
+  const isIndex = useRouterState({
+    select: (state) => state.location.pathname.endsWith('/backups'),
+  })
+  return <ProjectSectionPending section={isIndex ? 'backups' : 'backup'} />
+}
+
+function BackupsRoute() {
+  const queryClient = useQueryClient()
+  const filters = Route.useSearch()
+  const params = useParams({
+    from: '/$teamSlug/projects/$projectName/backups',
+  })
+  const { data: context } = useSuspenseQuery(
+    projectContextQueryOptions(
+      {
+        teamSlug: params.teamSlug,
+        projectName: params.projectName,
+        scope: 'backups',
+      },
+      queryClient,
+    ),
+  )
+  const isIndex = useChildMatches({ select: (matches) => matches.length === 0 })
+
+  if (!isIndex) return <Outlet />
+
+  return <ProjectBackups context={context} filters={filters} />
+}

package/src/routes/$teamSlug.projects.$projectName.deployments.$deploymentId.tsx

@@ -0,0 +1,52 @@
+import { pageHead } from '#devpush/lib/page-head'
+import { createFileRoute } from '@tanstack/react-router'
+import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
+
+import { DeploymentDetail } from '#devpush/features/deployments/deployment-detail'
+import { ProjectSectionPending } from '#devpush/features/projects/project-route-pending'
+import { pluginContextQueryOptions } from '#devpush/lib/project-context-query'
+
+export const Route = createFileRoute(
+  '/$teamSlug/projects/$projectName/deployments/$deploymentId',
+)({
+  validateSearch: (
+    search: Record<string, unknown>,
+  ): { unavailable?: boolean } => ({
+    unavailable: search.unavailable === true || search.unavailable === 'true',
+  }),
+  loader: ({ context, params }) =>
+    context.queryClient.fetchQuery(
+      pluginContextQueryOptions(
+        {
+          teamSlug: params.teamSlug,
+          projectName: params.projectName,
+          deploymentId: params.deploymentId,
+        },
+        context.queryClient,
+      ),
+    ),
+  pendingMs: 0,
+  pendingComponent: DeploymentPending,
+  component: DeploymentRoute,
+  head: ({ params }) =>
+    pageHead(
+      `Deployment ${params.deploymentId}`,
+      params.projectName,
+      params.teamSlug,
+    ),
+})
+
+function DeploymentPending() {
+  return <ProjectSectionPending section="deployment" />
+}
+
+function DeploymentRoute() {
+  const params = Route.useParams()
+  const queryClient = useQueryClient()
+  const { data: context } = useSuspenseQuery(
+    pluginContextQueryOptions(params, queryClient),
+  )
+
+  const { unavailable } = Route.useSearch()
+  return <DeploymentDetail context={context} unavailable={unavailable} />
+}

package/src/routes/$teamSlug.projects.$projectName.deployments.tsx

@@ -0,0 +1,86 @@
+import { pageHead } from '#devpush/lib/page-head'
+import { useRefreshError } from '#devpush/lib/use-refresh-error'
+import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
+import {
+  Outlet,
+  createFileRoute,
+  useParams,
+  useChildMatches,
+} from '@tanstack/react-router'
+
+import { DeploymentsPage } from '#devpush/features/deployments/deployments-page'
+import { ProjectSectionPending } from '#devpush/features/projects/project-route-pending'
+import { projectContextQueryOptions } from '#devpush/lib/project-context-query'
+import { stringSearchValidator } from '#devpush/lib/search'
+
+const validateSearch = stringSearchValidator([
+  'branch',
+  'date',
+  'environment',
+  'status',
+] as const)
+
+export const Route = createFileRoute(
+  '/$teamSlug/projects/$projectName/deployments',
+)({
+  loader: ({ context, location, params }) => {
+    if (!location.pathname.endsWith('/deployments')) {
+      return
+    }
+
+    return context.queryClient.fetchQuery(
+      projectContextQueryOptions(
+        {
+          teamSlug: params.teamSlug,
+          projectName: params.projectName,
+          scope: 'deployments',
+        },
+        context.queryClient,
+      ),
+    )
+  },
+  validateSearch,
+  pendingMs: 0,
+  pendingComponent: DeploymentsPending,
+  component: DeploymentsRoute,
+  head: ({ params }) =>
+    pageHead('Deployments', params.projectName, params.teamSlug),
+})
+
+function DeploymentsPending() {
+  return <ProjectSectionPending section="deployments" />
+}
+
+function DeploymentsRoute() {
+  const params = useParams({
+    from: '/$teamSlug/projects/$projectName/deployments',
+  })
+  const isIndex = useChildMatches({ select: (matches) => matches.length === 0 })
+
+  if (!isIndex) return <Outlet />
+
+  return <DeploymentsIndex params={params} />
+}
+
+function DeploymentsIndex({
+  params,
+}: {
+  params: { projectName: string; teamSlug: string }
+}) {
+  const filters = Route.useSearch()
+  const queryClient = useQueryClient()
+  const { data: context, error } = useSuspenseQuery(
+    projectContextQueryOptions(
+      {
+        teamSlug: params.teamSlug,
+        projectName: params.projectName,
+        scope: 'deployments',
+      },
+      queryClient,
+    ),
+  )
+
+  useRefreshError(error, 'project-deployments-refresh')
+
+  return <DeploymentsPage context={context} filters={filters} />
+}

package/src/routes/$teamSlug.projects.$projectName.logs.tsx

@@ -0,0 +1,55 @@
+import { pageHead } from '#devpush/lib/page-head'
+import { createFileRoute } from '@tanstack/react-router'
+import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
+
+import { ProjectLogs } from '#devpush/features/projects/project-logs'
+import { ProjectSectionPending } from '#devpush/features/projects/project-route-pending'
+import { stringSearchValidator } from '#devpush/lib/search'
+import { projectLogsQueryOptions } from '#devpush/lib/project-context-query'
+
+const validateSearch = stringSearchValidator([
+  'branch',
+  'date',
+  'deploymentId',
+  'environmentId',
+  'keyword',
+] as const)
+
+export const Route = createFileRoute('/$teamSlug/projects/$projectName/logs')({
+  validateSearch,
+  loaderDeps: ({ search }) => search,
+  loader: ({ context, params, deps }) =>
+    context.queryClient.fetchQuery(
+      projectLogsQueryOptions(
+        {
+          teamSlug: params.teamSlug,
+          projectName: params.projectName,
+          branch: deps.branch,
+          date: deps.date,
+          deploymentId: deps.deploymentId,
+          environmentId: deps.environmentId,
+          keyword: deps.keyword,
+        },
+        context.queryClient,
+      ),
+    ),
+  pendingMs: 0,
+  pendingComponent: LogsPending,
+  component: LogsRoute,
+  head: ({ params }) => pageHead('Logs', params.projectName, params.teamSlug),
+})
+
+function LogsPending() {
+  return <ProjectSectionPending section="logs" />
+}
+
+function LogsRoute() {
+  const params = Route.useParams()
+  const search = Route.useSearch()
+  const queryClient = useQueryClient()
+  const { data: context } = useSuspenseQuery(
+    projectLogsQueryOptions({ ...params, ...search }, queryClient),
+  )
+
+  return <ProjectLogs context={context} />
+}

package/src/routes/$teamSlug.projects.$projectName.settings.tsx

@@ -0,0 +1,51 @@
+import { pageHead } from '#devpush/lib/page-head'
+import { createFileRoute, useParams } from '@tanstack/react-router'
+import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
+
+import { ProjectSettings } from '#devpush/features/projects/project-settings'
+import { ProjectSectionPending } from '#devpush/features/projects/project-route-pending'
+import { projectContextQueryOptions } from '#devpush/lib/project-context-query'
+
+export const Route = createFileRoute(
+  '/$teamSlug/projects/$projectName/settings',
+)({
+  loader: ({ context, params }) =>
+    context.queryClient.fetchQuery(
+      projectContextQueryOptions(
+        {
+          teamSlug: params.teamSlug,
+          projectName: params.projectName,
+          scope: 'settings',
+        },
+        context.queryClient,
+      ),
+    ),
+  pendingMs: 0,
+  pendingComponent: SettingsPending,
+  component: SettingsRoute,
+  head: ({ params }) =>
+    pageHead('Project settings', params.projectName, params.teamSlug),
+})
+
+function SettingsPending() {
+  return <ProjectSectionPending section="settings" />
+}
+
+function SettingsRoute() {
+  const queryClient = useQueryClient()
+  const params = useParams({
+    from: '/$teamSlug/projects/$projectName/settings',
+  })
+  const { data: context } = useSuspenseQuery(
+    projectContextQueryOptions(
+      {
+        teamSlug: params.teamSlug,
+        projectName: params.projectName,
+        scope: 'settings',
+      },
+      queryClient,
+    ),
+  )
+
+  return <ProjectSettings key={context.project.id} context={context} />
+}

package/src/routes/$teamSlug.projects.$projectName.tsx

@@ -0,0 +1,106 @@
+import { pageHead } from '#devpush/lib/page-head'
+import { useRefreshError } from '#devpush/lib/use-refresh-error'
+import {
+  Outlet,
+  createFileRoute,
+  useParams,
+  useRouterState,
+  useChildMatches,
+} from '@tanstack/react-router'
+import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
+
+import { ProjectPage } from '#devpush/features/projects/project-layout'
+import { ProjectOverview } from '#devpush/features/projects/project-overview'
+import { ProjectRoutePending, preloadProjectPendingPage } from '#devpush/features/projects/project-route-pending'
+import { getProjectPendingSection } from '#devpush/features/projects/pending-section'
+import {
+  projectContextQueryOptions,
+  projectShellQueryOptions,
+} from '#devpush/lib/project-context-query'
+
+export const Route = createFileRoute('/$teamSlug/projects/$projectName')({
+  loader: async ({ context, location, params }) => {
+    const scope = getProjectPendingSection(location.pathname)
+    preloadProjectPendingPage(scope)
+    const shell = context.queryClient.fetchQuery(
+      projectShellQueryOptions({
+        teamSlug: params.teamSlug,
+        projectName: params.projectName,
+      }),
+    )
+
+    if (scope !== 'overview') return shell
+
+    await Promise.all([
+      shell,
+      context.queryClient.fetchQuery(
+        projectContextQueryOptions(
+          {
+            teamSlug: params.teamSlug,
+            projectName: params.projectName,
+            scope: 'overview',
+          },
+          context.queryClient,
+        ),
+      ),
+    ])
+  },
+  pendingMs: 0,
+  pendingComponent: ProjectPending,
+  component: ProjectRoute,
+  head: ({ params }) =>
+    pageHead('Overview', params.projectName, params.teamSlug),
+})
+
+function ProjectRoute() {
+  const params = useParams({ from: '/$teamSlug/projects/$projectName' })
+  const isOverview = useChildMatches({
+    select: (matches) => matches.length === 0,
+  })
+
+  return <ProjectContent params={params} isOverview={isOverview} />
+}
+
+function ProjectContent({
+  params,
+  isOverview,
+}: {
+  params: { projectName: string; teamSlug: string }
+  isOverview: boolean
+}) {
+  const { data: shell } = useSuspenseQuery(
+    projectShellQueryOptions({
+      teamSlug: params.teamSlug,
+      projectName: params.projectName,
+    }),
+  )
+
+  return (
+    <ProjectPage context={shell}>
+      {isOverview ? <ProjectOverviewContent params={params} /> : <Outlet />}
+    </ProjectPage>
+  )
+}
+
+function ProjectOverviewContent({
+  params,
+}: {
+  params: { projectName: string; teamSlug: string }
+}) {
+  const queryClient = useQueryClient()
+  const { data: context, error } = useSuspenseQuery(
+    projectContextQueryOptions({ ...params, scope: 'overview' }, queryClient),
+  )
+
+  useRefreshError(error, 'project-deployments-refresh')
+
+  return <ProjectOverview context={context} />
+}
+
+function ProjectPending() {
+  const pathname = useRouterState({
+    select: (state) => state.location.pathname,
+  })
+
+  return <ProjectRoutePending section={getProjectPendingSection(pathname)} />
+}

package/src/routes/$teamSlug.projects.tsx

@@ -0,0 +1,40 @@
+import { pageHead } from '#devpush/lib/page-head'
+import {
+  Outlet,
+  createFileRoute,
+  useChildMatches,
+} from '@tanstack/react-router'
+import { useSuspenseQuery } from '@tanstack/react-query'
+
+import { TeamProjects } from '#devpush/features/teams/team-home'
+import { teamShellQueryOptions } from '#devpush/lib/team-context-query'
+
+export const Route = createFileRoute('/$teamSlug/projects')({
+  loader: ({ context, location, params }) => {
+    if (location.pathname !== `/${params.teamSlug}/projects`) return
+
+    return context.queryClient.fetchQuery(
+      teamShellQueryOptions({ teamSlug: params.teamSlug }),
+    )
+  },
+  component: TeamProjectsRoute,
+  head: ({ params }) => pageHead('Projects', params.teamSlug),
+})
+
+function TeamProjectsRoute() {
+  const hasChild = useChildMatches({ select: (matches) => matches.length > 0 })
+  if (hasChild) {
+    return <Outlet />
+  }
+
+  return <TeamProjectsContent />
+}
+
+function TeamProjectsContent() {
+  const params = Route.useParams()
+  const { data: context } = useSuspenseQuery(
+    teamShellQueryOptions({ teamSlug: params.teamSlug }),
+  )
+
+  return <TeamProjects team={context.team} projects={context.projects} />
+}

package/src/routes/$teamSlug.servers.$serverId.tsx

@@ -0,0 +1,31 @@
+import { pageHead } from '#devpush/lib/page-head'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { createFileRoute } from '@tanstack/react-router'
+
+import { ServerDetail } from '#devpush/features/servers/server-detail'
+import { ServerDetailPending } from '#devpush/features/servers/server-detail-pending'
+import { serverContextQueryOptions } from '#devpush/lib/server-context-query'
+
+export const Route = createFileRoute('/$teamSlug/servers/$serverId')({
+  loader: ({ context, params }) =>
+    context.queryClient.fetchQuery(serverContextQueryOptions(params)),
+  pendingMs: 150,
+  pendingComponent: ServerDetailPending,
+  component: TeamServerRoute,
+  head: ({ loaderData, params }) =>
+    pageHead(loaderData?.server.name ?? 'Server', params.teamSlug),
+})
+
+function TeamServerRoute() {
+  const { data: context } = useSuspenseQuery(
+    serverContextQueryOptions(Route.useParams()),
+  )
+
+  return (
+    <ServerDetail
+      key={context.server.id}
+      team={context.team}
+      server={context.server}
+    />
+  )
+}