@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha.1

package/src/modules/resourceJump/ui/cmdk/QuickSearchContext.tsx

@@ -0,0 +1,58 @@
+import { createContext, use, useCallback, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import type { SearchMode } from '~/modules/resourceJump/ui/cmdk/types'
+
+export interface QuickSearchContextIface {
+  openQuickSearch: ({ searchMode }: { searchMode: SearchMode }) => void
+}
+
+export interface QuickSearchContextPrivateIface extends QuickSearchContextIface {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  searchMode: SearchMode
+  setSearchMode: (mode: SearchMode) => void
+}
+
+export const QuickSearchContext = createContext<
+  QuickSearchContextPrivateIface | undefined
+>(undefined)
+
+interface QuickSearchProviderProps {
+  children: ReactNode
+}
+
+export function QuickSearchProvider({ children }: QuickSearchProviderProps) {
+  const [open, onOpenChange] = useState(false)
+  const [searchMode, setSearchMode] = useState<SearchMode>('anything')
+
+  const openQuickSearch = useCallback(
+    ({ searchMode: mode }: { searchMode: SearchMode }) => {
+      setSearchMode(mode)
+      onOpenChange(true)
+    },
+    [],
+  )
+
+  const value: QuickSearchContextPrivateIface = useMemo(
+    () => ({
+      open,
+      onOpenChange,
+      openQuickSearch,
+      searchMode,
+      setSearchMode,
+    }),
+    [open, openQuickSearch, searchMode],
+  )
+
+  return <QuickSearchContext value={value}>{children}</QuickSearchContext>
+}
+
+export function useQuickSearchContext(): QuickSearchContextIface {
+  const context = use(QuickSearchContext)
+  if (context === undefined) {
+    throw new Error(
+      'useQuickSearchContext must be used within a QuickSearchProvider',
+    )
+  }
+  return context
+}

package/src/modules/resourceJump/ui/cmdk/highlightText.tsx

@@ -0,0 +1,27 @@
+export function highlightText(
+  text: string,
+  query: string,
+  className?: string,
+): React.ReactNode {
+  const tokens = query
+    .trim()
+    .slice(0, 100)
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+
+  if (!tokens.length) return text
+
+  // match ANY token
+  const regex = new RegExp(`(${tokens.join('|')})`, 'gi')
+
+  return (
+    <div className={className}>
+      {text
+        .split(regex)
+        .map((part, idx) =>
+          idx % 2 === 1 ? <mark key={`${text + idx}`}>{part}</mark> : part,
+        )}
+    </div>
+  )
+}

package/src/modules/resourceJump/ui/cmdk/types.ts

@@ -0,0 +1,7 @@
+export type SearchMode = 'anything' | 'app' | 'env'
+
+export interface QuickOption {
+  slug: string
+  displayName: string
+  type: Omit<SearchMode, 'anything'>
+}

package/src/modules/resourceJump/ui/cmdk/useCmdkDriver.ts

@@ -0,0 +1,40 @@
+import { useCallback, useMemo } from 'react'
+import { useEnvironmentContext } from '~/modules/environment/context/EnvironmentContext'
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+
+export interface CmdkDriverInput {
+  onOpenChange: (open: boolean) => void
+}
+
+export function useCmdkDriver({ onOpenChange }: CmdkDriverInput) {
+  const { environments, setCurrentEnv } = useEnvironmentContext()
+  const { setCurrentResourceJumpSlug } = useResourceJumpContext()
+
+  const envsForApps = useMemo(() => {
+    return environments.slice(0, 3)
+  }, [environments])
+
+  const onResourceJumpSelected = useCallback(
+    (resourceJumpSlug: string) => {
+      setCurrentResourceJumpSlug(resourceJumpSlug)
+      onOpenChange(false)
+    },
+    [onOpenChange, setCurrentResourceJumpSlug],
+  )
+
+  const onEnvironmentSelected = useCallback(
+    (envSlug: string) => {
+      setCurrentEnv(envSlug)
+      onOpenChange(false)
+    },
+    [onOpenChange, setCurrentEnv],
+  )
+
+  return useMemo(() => {
+    return {
+      envsForApps,
+      onResourceJumpSelected,
+      onEnvironmentSelected,
+    }
+  }, [envsForApps, onEnvironmentSelected, onResourceJumpSelected])
+}

package/src/modules/resourceJump/ui/cmdk/useQuickSearchLogic.ts

@@ -0,0 +1,74 @@
+import { use, useCallback, useMemo } from 'react'
+import type { QuickOption } from '~/modules/resourceJump/ui/cmdk/types'
+import { useEnvironmentContext } from '~/modules/environment/context/EnvironmentContext'
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import { QuickSearchContext } from '~/modules/resourceJump/ui/cmdk/QuickSearchContext'
+
+export function useQuickSearchLogic() {
+  const { environments, setCurrentEnv } = useEnvironmentContext()
+  const { setCurrentFlagship, flagshipJumpResources } = useResourceJumpContext()
+
+  const ctx = use(QuickSearchContext)
+  if (!ctx) {
+    throw new Error(
+      'useQuickSearchLogic must be used within a QuickSearchProvider',
+    )
+  }
+
+  const { searchMode, onOpenChange } = ctx
+
+  const envsForApps = useMemo(() => {
+    return environments.slice(0, 3)
+  }, [environments])
+
+  const options = useMemo(() => {
+    const isApp = searchMode == 'app' || searchMode == 'anything'
+    const isEnv = searchMode == 'env' || searchMode == 'anything'
+
+    let arr: Array<QuickOption> = []
+    if (isApp) {
+      arr = [
+        ...arr,
+        ...flagshipJumpResources.slice(0, 5).map(({ slug, displayName }) => ({
+          slug,
+          displayName,
+          type: 'app' as const,
+        })),
+      ]
+    }
+    if (isEnv) {
+      arr = [
+        ...arr,
+        ...environments.slice(0, 5).map(({ slug, displayName }) => ({
+          slug,
+          displayName,
+          type: 'env' as const,
+        })),
+      ]
+    }
+    return arr
+  }, [environments, flagshipJumpResources, searchMode])
+
+  const onSelect = useCallback(
+    (slug: string) => {
+      const option = options.find((o) => o.slug === slug)
+      if (!option) return
+      if (option.type === 'env') {
+        setCurrentEnv(slug)
+      }
+      if (option.type === 'app') {
+        setCurrentFlagship(slug)
+      }
+      onOpenChange(false)
+    },
+    [onOpenChange, options, setCurrentEnv, setCurrentFlagship],
+  )
+
+  return useMemo(() => {
+    return {
+      envsForApps,
+      onSelect,
+      options,
+    }
+  }, [envsForApps, onSelect, options])
+}

package/src/modules/resourceJump/ui/layout/CenterColumn.tsx

@@ -0,0 +1,3 @@
+export function CenterColumn({ children }: { children: React.ReactNode }) {
+  return <div className="max-w-4xl w-full">{children}</div>
+}

package/src/modules/resourceJump/ui/layout/LeftColumn.tsx

@@ -0,0 +1,96 @@
+import { GlobeIcon } from 'lucide-react'
+import { useRef, useState } from 'react'
+import { useEnvironmentContext } from '~/modules/environment/context/EnvironmentContext'
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import { MiniEnvSelectorPopover } from '~/modules/resourceJump/ui/miniEnvSelector/MiniEnvSelectorPopover'
+import { Button } from '~/ui/button'
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from '~/ui/popover'
+
+export function LeftColumn() {
+  const { currentEnv } = useEnvironmentContext()
+  const { leftEnvSelectorValue, setLeftEnvSelectorValue } =
+    useResourceJumpContext()
+
+  const [open, setOpen] = useState(false)
+
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  const onOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      setLeftEnvSelectorValue(inputRef.current?.value || '')
+    }
+    setOpen(isOpen)
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* <MiniEnvSelectorPopover /> */}
+      {/* <Select onValueChange={setCurrentEnv}>
+        <SelectTrigger>
+          <span
+            className="text-lg flex text-eh-env-foreground gap-4 items-center w-48"
+            // variant="ghost"
+          >
+            <GlobeIcon className="stroke-eh-env-foreground" />
+            <span>
+              {currentEnv ? currentEnv.displayName : 'No Environment Selected'}
+            </span>
+          </span>
+        </SelectTrigger>
+        <SelectContent>
+          {environments.slice(0, 5).map((env) => (
+            <SelectItem key={env.slug} value={env.slug}>
+              {env.displayName}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select> */}
+      <Popover open={open} onOpenChange={onOpenChange}>
+        <PopoverTrigger asChild>
+          <Button
+            className="text-lg flex text-eh-env-foreground gap-4 justify-between min-w-[250px]"
+            variant="outline"
+          >
+            <span>
+              {currentEnv ? currentEnv.displayName : 'No Environment Selected'}
+            </span>
+            <GlobeIcon className="stroke-eh-env-foreground" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent side="bottom" sideOffset={-40} align="center">
+          <MiniEnvSelectorPopover
+            onOpenChange={onOpenChange}
+            initialValue={leftEnvSelectorValue}
+            onValueChange={setLeftEnvSelectorValue}
+            inputRef={inputRef}
+          />
+        </PopoverContent>
+      </Popover>
+      <div className="flex flex-col gap-4">
+        <div className="text-muted-foreground text-xs p-1 mt-1">
+          PSPC Testing Environment
+        </div>
+        {/* <div>
+          <div className="flex flex-col items-center">
+            <div className="font-semibold">
+              {currentEnv ? currentEnv.displayName : 'No Environment Selected'}
+            </div>
+            <div className="text-muted-foreground text-xs">
+              PSPC Testing Environment
+            </div>
+          </div>
+        </div>
+        <div>
+          <GlobeIcon className="stroke-eh-env-foreground" />
+        </div> */}
+      </div>
+      {/* <div className="mt-4">
+        <EnvSwitcher />
+      </div> */}
+    </div>
+  )
+}

package/src/modules/resourceJump/ui/layout/ResourceJumpLayout.tsx

@@ -0,0 +1,101 @@
+import type { TRPCRouter } from '@env-hopper/backend-core'
+import type { QueryClient } from '@tanstack/react-query'
+import type { TRPCClient } from '@trpc/client'
+
+import type { ResourceJumpLoaderReturn } from '../../types'
+
+import { CrossCuttingParamsProvider } from '~/modules/crossCuttingParams/CrossCuttingParamsContext'
+import { EnvironmentProvider } from '~/modules/environment/context/EnvironmentContext'
+import { ResourceJumpProvider } from '~/modules/resourceJump/context/ResourceJumpContext'
+import { CommandPalette } from '~/modules/resourceJump/ui/cmdk/CommandPalette'
+import { QuickSearchProvider } from '~/modules/resourceJump/ui/cmdk/QuickSearchContext'
+import { CenterColumn } from '~/modules/resourceJump/ui/layout/CenterColumn'
+import { ResourceJumpBreadcrubms } from '~/modules/resourceJump/ui/ResourceJumpBreadcrumbs'
+import ContextDebug from '~/ui/components/contextDebug'
+import { MainLayout } from '~/ui/layout/MainLayout'
+import { TopLevelProviders } from '~/ui/layout/TopLevelProviders'
+
+export interface ResourceJumpLayoutProps {
+  children: React.ReactNode
+  loaderData: ResourceJumpLoaderReturn
+  queryClient: QueryClient
+  trpcClient: TRPCClient<TRPCRouter>
+}
+
+export function ResourceJumpLayout({
+  children,
+  loaderData,
+  queryClient,
+  trpcClient,
+}: ResourceJumpLayoutProps) {
+  return (
+    <TopLevelProviders queryClient={queryClient} trpcClient={trpcClient}>
+      <EnvironmentProvider initialEnvSlug={loaderData.envSlug}>
+        <CrossCuttingParamsProvider
+          initialCrossCuttingParams={loaderData.crossCuttingParams}
+        >
+          <ResourceJumpProvider resourceJumpLoader={loaderData}>
+            <QuickSearchProvider>
+              <MainLayout
+                headerMiddle={
+                  <CommandPalette label="Quick search" shortcutKey="k" />
+                }
+                breadcrumbs={<ResourceJumpBreadcrubms />}
+              >
+                {/* <div className="grid grid-cols-6 gap-4 mt-16">
+                  <div className="col-span-6">
+                    </div>
+                  <div className="col-span-2">
+                    <EnvAutoComplete />
+                  </div>
+                  <div className="col-span-4">
+                    <div className="flex flex-col gap-4">
+                      <AppAutoComplete />
+                      <div className="grid grid-cols-4 gap-4">
+                        <div className="col-span-1">
+                          <CommandPalette
+                            label="Case ID"
+                            className="border-eh-context-border"
+                          />
+                        </div>
+                        <div className="col-span-3">
+                          <CommandPalette
+                            label="123123123"
+                            className="border-eh-context-border"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div> */}
+                <div className="flex gap-32 flex-row">
+                  {/* Left Column - fit content: Environment Section */}
+                  {/* <div className="flex-col gap-4 w-fit flex-shrink-0 hidden lg:flex">
+                    <LeftColumn />
+                  </div> */}
+                  <div className="flex flex-col gap-4 flex-1 items-center">
+                    <CenterColumn>{children}</CenterColumn>
+                  </div>
+                  {/* <div className="flex flex-col gap-4 w-fit">
+                    <RightColumn />
+                  </div> */}
+
+                  {/* Center Column - max width: Application Section with Tabs */}
+                  {/* <ApplicationSectionWithTabs /> */}
+
+                  {/* Right Column - fit content: Credentials Section */}
+                  {/* <div className="flex flex-col gap-4 w-fit flex-shrink-0 items-end">
+                <CredentialsWidget />
+              </div> */}
+                </div>
+                <ContextDebug />
+
+                {/* <QuickJumpBar /> */}
+              </MainLayout>
+            </QuickSearchProvider>
+          </ResourceJumpProvider>
+        </CrossCuttingParamsProvider>
+      </EnvironmentProvider>
+    </TopLevelProviders>
+  )
+}

package/src/modules/resourceJump/ui/layout/RightColumn.tsx

@@ -0,0 +1,14 @@
+export function RightColumn() {
+  return (
+    <div className="flex gap-2">
+      <div>
+        <div className="text-center text-secondary-foreground p-2">Envs</div>
+        {/* <EnvSwitcher /> */}
+      </div>
+      <div>
+        <div className="text-center text-secondary-foreground p-2">Apps</div>
+        {/* <AppSwitcher /> */}
+      </div>
+    </div>
+  )
+}

package/src/modules/resourceJump/ui/miniEnvSelector/MiniEnvSelectorPopover.tsx

@@ -0,0 +1,61 @@
+import { useEffect } from 'react'
+import { useEnvironmentContext } from '~/modules/environment/context/EnvironmentContext'
+import {
+    Command,
+    CommandEmpty,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '~/ui/command'
+
+export interface MiniEnvSelectorPopoverProps {
+  initialValue?: string
+  onValueChange?: (value: string) => void
+  onOpenChange?: (open: boolean) => void
+  inputRef?: React.RefObject<HTMLInputElement | null>
+}
+
+export function MiniEnvSelectorPopover({
+  onOpenChange,
+  initialValue,
+  inputRef,
+}: MiniEnvSelectorPopoverProps) {
+  const { environments, setCurrentEnv } = useEnvironmentContext()
+
+  useEffect(() => {
+    if (inputRef?.current && initialValue) {
+      inputRef.current.value = initialValue
+    }
+  }, [inputRef, initialValue])
+
+  const selectEnv = (envSlug: string) => {
+    setCurrentEnv(envSlug)
+    // if (ref.current) {
+    //   onValueChange?.(ref.current.value);
+    // }
+    onOpenChange?.(false)
+  }
+
+  // useEffect(() => {
+  //   if (ref.current && onValueChange) {
+  //     const r = ref.current
+  //     return () => {
+  //       onValueChange(r.value)
+  //     }
+  //   }
+  // }, [ref, onValueChange])
+
+  return (
+    <Command>
+      <CommandInput placeholder="Type environement name" defaultValue="a" />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        {environments.slice(0, 7).map((env) => (
+          <CommandItem key={env.slug} onSelect={() => selectEnv(env.slug)}>
+            {env.displayName}
+          </CommandItem>
+        ))}
+      </CommandList>
+    </Command>
+  )
+}

package/src/modules/resourceJump/ui/pages/AppCatalog.tsx

@@ -0,0 +1,105 @@
+import { resolveTemplate } from '@env-hopper/shared-core'
+import type { ColumnDef } from '@tanstack/react-table'
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { useMemo } from 'react'
+import { useEnvironmentContext } from '~/modules/environment/context/EnvironmentContext'
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import type { ResourceJumpUI } from '~/modules/resourceJump/types'
+import { EnvAutoComplete } from '~/modules/resourceJump/ui/cmdk/EnvAutocomplete'
+import { formatResourceTitle } from '~/modules/resourceJump/utils/helpers'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '~/ui/table'
+
+type Row = ResourceJumpUI
+
+export function AppCatalogPage() {
+	const { resourceJumps, isLoadingResourceJumps } = useResourceJumpContext()
+	const { currentEnv } = useEnvironmentContext()
+
+	const columns = useMemo<Array<ColumnDef<Row>>>(
+		() => [
+			{
+				id: 'title',
+				header: 'ResourceJump Title',
+				cell: ({ row }) => formatResourceTitle(row.original),
+			},
+			{
+				id: 'urlPattern',
+				header: 'URL pattern',
+				cell: ({ row }) => {
+					if (!currentEnv?.slug) {
+						return row.original.urlTemplate.default
+					}
+					return resolveTemplate(currentEnv.slug, row.original.urlTemplate)
+				},
+			},
+		],
+		[currentEnv?.slug],
+	)
+
+	const table = useReactTable({
+		data: resourceJumps,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+	})
+
+	if (isLoadingResourceJumps) {
+		return <div className="py-6 text-muted-foreground">Loading…</div>
+	}
+
+	return (
+		<div className="py-6 flex flex-col gap-4">
+			<div className="flex items-start justify-between gap-4">
+				<div>
+					<div className="font-medium">Apps</div>
+					<div className="text-sm text-muted-foreground">
+						{resourceJumps.length} resource jumps
+					</div>
+				</div>
+				<div className="w-[320px]">
+					<EnvAutoComplete />
+				</div>
+			</div>
+
+			<div className="w-full overflow-hidden rounded-md border border-border">
+				<Table>
+					<TableHeader className="bg-muted/30 text-muted-foreground">
+						{table.getHeaderGroups().map((headerGroup) => (
+							<TableRow key={headerGroup.id}>
+								{headerGroup.headers.map((header) => (
+									<TableHead key={header.id} className="px-3">
+										{header.isPlaceholder
+											? null
+											: flexRender(
+													header.column.columnDef.header,
+													header.getContext(),
+												)}
+									</TableHead>
+								))}
+							</TableRow>
+						))}
+					</TableHeader>
+
+					<TableBody>
+						{table.getRowModel().rows.map((row) => (
+							<TableRow key={row.id}>
+								{row.getVisibleCells().map((cell) => (
+									<TableCell key={cell.id} className="px-3 align-top">
+										{flexRender(cell.column.columnDef.cell, cell.getContext())}
+									</TableCell>
+								))}
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</div>
+		</div>
+	)
+}
+

package/src/modules/resourceJump/ui/pages/AppPage.tsx

@@ -0,0 +1,14 @@
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import { AppPageFlagship } from '~/modules/resourceJump/ui/pages/AppPageFlagship'
+import { AppPageRegular } from '~/modules/resourceJump/ui/pages/AppPageRegular'
+import { isFlagshipResource } from '~/modules/resourceJump/utils/helpers'
+
+export function AppPage() {
+  const { currentResourceJump } = useResourceJumpContext()
+
+  if (isFlagshipResource(currentResourceJump)) {
+    return <AppPageFlagship />
+  } else {
+    return <AppPageRegular />
+  }
+}