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

package/src/modules/resourceJump/ui/ResourceJumpMockTable.tsx

@@ -0,0 +1,249 @@
+import { ChevronDown, ChevronRight, ExternalLinkIcon } from 'lucide-react'
+import * as React from 'react'
+import { Input } from '~/ui/input'
+import { LinkExternal } from '~/ui/linkExternal'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '~/ui/table'
+
+type ResourceJumpMockRow = {
+  app: string
+  context?: string
+  version?: string
+  jump?: string
+  depth?: number
+}
+
+const rows: Array<ResourceJumpMockRow> = [
+  { app: 'Payment Gateway', version: 'v.12311' },
+  {
+    app: 'Transaction Logger',
+    version: 'v.12311',
+    jump: '[region-01]',
+    depth: 1,
+  },
+  {
+    app: 'Gateway - Dashboard',
+    version: 'v.12311',
+    jump: '[region-01]',
+    depth: 1,
+  },
+  {
+    app: 'Gateway - Dashboard #',
+    version: 'v.12311',
+    jump: '[region-01]',
+    depth: 1,
+  },
+  {
+    app: 'Gateway - Admin Scripts',
+    version: 'v.12311',
+    jump: '[region-01]',
+    depth: 1,
+  },
+
+  { app: 'Identity Provider', context: 'External', jump: '[global]' },
+
+  { app: 'Customer Portal', version: 'v.12312' },
+  {
+    app: 'Invoice #',
+    context: '[Derive]',
+    version: 'v.12312',
+    jump: '[region-01]',
+    depth: 1,
+  },
+
+  { app: 'Inventory API', version: 'v.12311', jump: '[region-01]' },
+  { app: 'Get Products', version: 'v.12311', jump: '[region-01]', depth: 1 },
+
+  { app: 'Message Queue', version: 'v.1.6.1', jump: '[region-01]' },
+  {
+    app: 'order-aggregator-service',
+    version: 'v.1.6.1',
+    jump: '[region-01]',
+    depth: 1,
+  },
+
+  { app: 'API Gateway', version: 'release-1', jump: '[global]' },
+  {
+    app: 'Workflow Engine - Process A',
+    version: 'release-1',
+    jump: '[global]',
+    depth: 1,
+  },
+
+  { app: 'Log Analytics', version: '-', jump: '[region-01]' },
+  { app: 'Request ID Tracker', version: '-', depth: 1 },
+]
+
+const CASE_ID_STORAGE_KEY = 'resourceJump.mock.invoiceId'
+const CASE_ID_FORMAT = /^\d{9}$/
+
+function getStoredCaseId() {
+  if (typeof window === 'undefined') return ''
+  return window.localStorage.getItem(CASE_ID_STORAGE_KEY) ?? ''
+}
+
+export function ResourceJumpMockTable() {
+  const [caseId, setCaseId] = React.useState(getStoredCaseId)
+  const [setIsSomeAppExpanded, setIsProdLimsExpanded] = React.useState(false)
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return
+    window.localStorage.setItem(CASE_ID_STORAGE_KEY, caseId)
+  }, [caseId])
+
+  return (
+    <div className="w-full">
+      <div className="w-full overflow-hidden rounded-md border border-border">
+        <Table>
+          <TableHeader className="bg-muted/30 text-muted-foreground">
+            <TableRow>
+              <TableHead className="px-3">App</TableHead>
+              <TableHead className="px-3">Context</TableHead>
+              <TableHead className="px-3">Version</TableHead>
+              <TableHead className="px-3">Jump</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((row) => {
+              const depth = row.depth ?? 0
+              const requiresCaseId = row.app === 'Gateway - Dashboard #'
+              const trimmedCaseId = caseId.trim()
+              const caseIdValid = CASE_ID_FORMAT.test(trimmedCaseId)
+              const canJump = requiresCaseId ? caseIdValid : Boolean(row.jump)
+
+              const href = requiresCaseId
+                ? `https://example.com?invoiceId=${encodeURIComponent(trimmedCaseId)}`
+                : 'https://example.com'
+
+              if (requiresCaseId) {
+                const id = `${row.app}-${row.context ?? ''}-${row.version ?? ''}-${row.jump ?? ''}`
+
+                return (
+                  <React.Fragment key={id}>
+                    <TableRow>
+                      <TableCell className="px-3 align-top">
+                        <span
+                          style={{ paddingLeft: depth * 16 }}
+                          className="block"
+                        >
+                          <button
+                            type="button"
+                            aria-expanded={setIsSomeAppExpanded}
+                            onClick={() => setIsProdLimsExpanded((v) => !v)}
+                            className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors font-medium"
+                          >
+                            {setIsSomeAppExpanded ? (
+                              <ChevronDown className="h-3 w-3" />
+                            ) : (
+                              <ChevronRight className="h-3 w-3" />
+                            )}
+                            <span>{row.app}</span>
+                            <span className="text-xs text-muted-foreground">
+                              (Invoice ID required)
+                            </span>
+                          </button>
+                        </span>
+                      </TableCell>
+                      <TableCell className="px-3 align-top">
+                        {row.context ?? ''}
+                      </TableCell>
+                      <TableCell className="px-3 align-top">
+                        {row.version ?? ''}
+                      </TableCell>
+                      <TableCell className="px-3 align-top">
+                        {canJump ? (
+                          <LinkExternal
+                            href={href}
+                            rel="noreferrer"
+                            className="inline-flex items-center gap-1"
+                          >
+                            {row.jump ?? 'Jump'}
+                            <ExternalLinkIcon className="h-3 w-3" />
+                          </LinkExternal>
+                        ) : (
+                          <span className="text-muted-foreground">
+                            {row.jump ?? ''}{' '}
+                            <span className="text-xs">(enter Invoice ID)</span>
+                          </span>
+                        )}
+                      </TableCell>
+                    </TableRow>
+
+                    {setIsSomeAppExpanded ? (
+                      <TableRow>
+                        <TableCell colSpan={4} className="px-3 py-3">
+                          <div className="flex flex-col gap-2">
+                            <div className="max-w-xs">
+                              <Input
+                                value={caseId}
+                                onChange={(e) =>
+                                  setCaseId(e.currentTarget.value)
+                                }
+                                placeholder="Invoice ID (9 digits)"
+                                aria-invalid={caseId.length > 0 && !caseIdValid}
+                              />
+                            </div>
+                            {caseId.length > 0 && !caseIdValid ? (
+                              <div className="text-xs text-muted-foreground">
+                                Invalid Invoice ID format.
+                              </div>
+                            ) : null}
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ) : null}
+                  </React.Fragment>
+                )
+              }
+
+              return (
+                <TableRow
+                  key={`${row.app}-${row.context ?? ''}-${row.version ?? ''}-${row.jump ?? ''}`}
+                >
+                  <TableCell className="px-3 align-top">
+                    <span style={{ paddingLeft: depth * 16 }} className="block">
+                      {canJump ? (
+                        <LinkExternal
+                          href={href}
+                          rel="noreferrer"
+                          className="inline-flex items-center gap-2"
+                        >
+                          <span aria-hidden className="inline-block h-3 w-3" />
+                          <span>{row.app}</span>
+                          <ExternalLinkIcon className="h-3 w-3" />
+                        </LinkExternal>
+                      ) : (
+                        <span className="inline-flex items-center gap-2 text-muted-foreground">
+                          <span aria-hidden className="inline-block h-3 w-3" />
+                          <span>{row.app}</span>
+                          {row.jump ? (
+                            <ExternalLinkIcon className="h-3 w-3" />
+                          ) : null}
+                        </span>
+                      )}
+                    </span>
+                  </TableCell>
+                  <TableCell className="px-3 align-top">
+                    {row.context ?? ''}
+                  </TableCell>
+                  <TableCell className="px-3 align-top">
+                    {row.version ?? ''}
+                  </TableCell>
+                  <TableCell className="px-3 align-top">
+                    {row.jump ?? ''}
+                  </TableCell>
+                </TableRow>
+              )
+            })}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}

package/src/modules/resourceJump/ui/ShareLinkButton.tsx

@@ -0,0 +1,127 @@
+import { useRouter } from '@tanstack/react-router'
+import { Share2Icon } from 'lucide-react'
+import { use } from 'react'
+import {
+    EnvironmentContext,
+    useEnvironmentContext,
+} from '~/modules/environment/context/EnvironmentContext'
+import {
+    ResourceJumpContext,
+    useResourceJumpContext,
+} from '~/modules/resourceJump/context/ResourceJumpContext'
+import { Button } from '~/ui/button'
+import { Card, CardContent } from '~/ui/card'
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '~/ui/dialog'
+import { Input } from '~/ui/input'
+import { Label } from '~/ui/label'
+import { Link } from '~/ui/link'
+import { getEhToOptions } from '~/util/route-utils'
+
+export function ShareLinkButton() {
+  const maybeEnvContext = use(EnvironmentContext)
+  const maybeResourceJumpContext = use(ResourceJumpContext)
+  if (!maybeEnvContext || !maybeResourceJumpContext) {
+    return null
+  }
+
+  return (
+    <Dialog>
+      <form>
+        <DialogTrigger asChild>
+          <Button variant="outline">
+            <Share2Icon className="w-4 h-4" />
+            <span className="hidden md:block">Share link</span>
+          </Button>
+        </DialogTrigger>
+        <ShareDialogEnv />
+      </form>
+    </Dialog>
+  )
+}
+
+function ShareDialogEnv() {
+  const { currentEnv } = useEnvironmentContext()
+  const { currentResourceJump } = useResourceJumpContext()
+  const router = useRouter()
+
+  const fullUrl = new URL(
+    router.buildLocation(
+      getEhToOptions({
+        appId: currentResourceJump?.slug,
+        envId: currentEnv?.slug,
+      }),
+    ).href,
+    window.location.origin,
+  ).toString()
+
+  const isEnv = currentResourceJump === undefined
+
+  return (
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>
+          {isEnv ? (
+            <>
+              Share Link to{' '}
+              <code className="bg-accent p-1 rounded">
+                {currentEnv?.displayName}
+              </code>
+            </>
+          ) : (
+            'Share Env-Hopper Link to this page'
+          )}
+        </DialogTitle>
+      </DialogHeader>
+      <div className="grid gap-4">
+        {/* <div className="flex items-start gap-3">
+          <Checkbox id="share-include-env" defaultChecked />
+          <div className="grid gap-2">
+            <Label htmlFor="share-include-env">Auto-select environment</Label>
+            <p className="text-muted-foreground text-sm">
+              Use when you want to share the application but not force a
+              specific environment.
+            </p>
+          </div>
+        </div> */}
+
+        <div className="grid gap-3">
+          <Label htmlFor="name-1">Formatted URL</Label>
+          <Card>
+            <CardContent>
+              <Link
+                {...getEhToOptions({
+                  appId: currentResourceJump?.slug,
+                  envId: currentEnv?.slug,
+                })}
+              >
+                {currentEnv?.displayName} (Env-Hopper)
+              </Link>
+            </CardContent>
+          </Card>
+        </div>
+        <div className="grid gap-3">
+          <Label htmlFor="share-raw-url">Raw URL</Label>
+          <Input
+            id="share-raw-url"
+            name="share-raw-url"
+            defaultValue={fullUrl}
+            onClick={(e) => e.currentTarget.select()}
+          />
+        </div>
+      </div>
+      <DialogFooter>
+        <DialogClose asChild>
+          <Button variant="outline">Cancel</Button>
+        </DialogClose>
+      </DialogFooter>
+    </DialogContent>
+  )
+}

package/src/modules/resourceJump/ui/SmoothSwitcher.tsx

@@ -0,0 +1,119 @@
+import { motion } from 'framer-motion'
+import { BubblesIcon } from 'lucide-react'
+import { useId, useMemo, useState } from 'react'
+import { cn } from '~/lib/utils'
+
+export interface SmoothSwitcherProps {
+  values: Array<{ displayName: string; slug: string }>
+  selectedValueSlug: string | undefined
+  onValueSelect: (slug: string) => void
+  className?: string
+}
+
+export function SmoothSwitcher({
+  values,
+  onValueSelect,
+  selectedValueSlug,
+  className,
+}: SmoothSwitcherProps) {
+  const [showArrowKeyHint, setShowArrowKeyHint] = useState(false)
+
+  const layoutId = useId()
+
+  const valuesEx = useMemo(() => {
+    return values.map((e) => ({
+      icon: <BubblesIcon className="w-3 h-3" />,
+      slug: e.slug,
+      displayName: e.displayName,
+    }))
+  }, [values])
+
+  // useEffect(() => {
+  //   function listener(e: KeyboardEvent) {
+
+  //     if (e.key === 'ArrowDown') {
+  //       const currentIndex = values.findIndex(fjr => fjr.key.slug == currentEnv?.slug);
+  //       const nextIndex = currentIndex + 1
+  //       const nextItem = values[nextIndex]?.key.slug;
+
+  //       if (nextItem) {
+  //         setCurrentEnv(nextItem)
+  //       }
+  //     }
+
+  //     if (e.key === 'ArrowUp') {
+  //       const currentIndex = values.findIndex(fjr => fjr.key.slug == currentEnv?.slug);
+  //       const prevIndex = currentIndex - 1
+  //       const prevItem = values[prevIndex]?.key.slug;
+
+  //       if (prevItem) {
+  //         setCurrentEnv(prevItem)
+  //       }
+  //     }
+  //   }
+
+  //   document.addEventListener('keydown', listener)
+
+  //   return () => {
+  //     document.removeEventListener('keydown', listener)
+  //   }
+  // }, [currentEnv?.slug, setCurrentEnv, values])
+
+  return (
+    <motion.div
+      className={cn('flex flex-col gap-1 items-stretch', className)}
+      layout
+    >
+      {valuesEx.map(({ slug, displayName, icon }) => {
+        const isActive = selectedValueSlug === slug
+        return (
+          <button
+            key={slug}
+            type="button"
+            onClick={() => {
+              onValueSelect(slug)
+              if (showArrowKeyHint === false) {
+                setShowArrowKeyHint(true)
+              }
+            }}
+            className={cn(
+              // button sizing + layout
+              'relative group z-10 h-8 leading-8 flex items-center gap-2 px-4 rounded-full text-sm select-none capitalize transition-transform',
+              'hover:bg-accent/25',
+              // icon sizing
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:scale-95',
+              // text color (inactive / active)
+              isActive ? 'text-foreground' : 'text-muted-foreground',
+              // main ? 'text-xl font-semibold' : '',
+            )}
+          >
+            {/* active background (shared layout) - placed before content so it sits under text */}
+            {isActive && (
+              <motion.div
+                layoutId={layoutId}
+                transition={{
+                  type: 'spring',
+                  stiffness: 250,
+                  damping: 27,
+                  mass: 1,
+                }}
+                className={cn(
+                  'absolute left-0 top-0 h-8 w-full rounded-full bg-secondary z-0',
+                  // allow hover/active visual changes via group state
+                  'group-hover:bg-secondary/80 group-active:bg-secondary/90',
+                )}
+              />
+            )}
+
+            <span className="relative z-10 inline-flex items-center gap-2">
+              <span className="w-3.5 h-3.5 relative z-10 inline-block overflow-clip">
+                {icon}
+              </span>
+              <span className="relative z-10">{displayName}</span>
+            </span>
+          </button>
+        )
+      })}
+    </motion.div>
+  )
+}

package/src/modules/resourceJump/ui/TopQuickJump.tsx

@@ -0,0 +1,23 @@
+import { AppSwitcher } from '~/modules/resourceJump/ui/AppSwitcher'
+import { CommandPalette } from '~/modules/resourceJump/ui/cmdk/CommandPalette'
+import { EnvSwitcher } from '~/modules/resourceJump/ui/EnvSwitcher'
+
+export function TopQuickJump() {
+  return (
+    <div className="border border-dashed border-amber-400 rounded-2xl w-[800px] p-4 flex">
+      <div className="flex flex-col gap-2 items-center">
+        <CommandPalette label="Other Env..." />
+        <div>
+          <EnvSwitcher />
+        </div>
+      </div>
+      <div className="border border-l-1 mx-4 my-2 border-border/50"></div>
+      <div className="flex flex-col gap-2 items-center">
+        <div>Apps</div>
+        <div>
+          <AppSwitcher />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/modules/resourceJump/ui/appCatalog/AppCatalogFiltersCard.tsx

@@ -0,0 +1,79 @@
+import { AppWindowIcon, LayoutGrid } from 'lucide-react'
+import { Button } from '~/ui/button'
+import { Card, CardContent } from '~/ui/card'
+import { RadioGroup, RadioGroupItem } from '~/ui/radio-group'
+import { Separator } from '~/ui/separator'
+
+export type AppCatalogScopeFilter = 'apps' | 'appsAndPages'
+export type AppCatalogDisplayMode = 'card' | 'grid'
+
+export interface AppCatalogFiltersCardProps {
+  scopeFilter: AppCatalogScopeFilter
+  onScopeFilterChange: (value: AppCatalogScopeFilter) => void
+  displayMode: AppCatalogDisplayMode
+  onDisplayModeChange: (value: AppCatalogDisplayMode) => void
+}
+
+export function AppCatalogFiltersCard({
+  scopeFilter,
+  onScopeFilterChange,
+  displayMode,
+  onDisplayModeChange,
+}: AppCatalogFiltersCardProps) {
+  return (
+    <Card className="py-4">
+      <CardContent className="px-6">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+          <div className="flex flex-col gap-2">
+            <div className="text-sm font-medium">Scope</div>
+            <RadioGroup
+              value={scopeFilter}
+              onValueChange={(value) =>
+                onScopeFilterChange(value as AppCatalogScopeFilter)
+              }
+              className="grid gap-2"
+            >
+              <label className="flex items-center gap-2">
+                <RadioGroupItem value="apps" />
+                <span className="text-sm">Show only Apps</span>
+              </label>
+              <label className="flex items-center gap-2">
+                <RadioGroupItem value="appsAndPages" />
+                <span className="text-sm">Show Apps + Pages</span>
+              </label>
+            </RadioGroup>
+          </div>
+
+          <Separator orientation="vertical" className="hidden sm:block" />
+
+          <div className="flex flex-col gap-2">
+            <div className="text-sm font-medium">Display as</div>
+            <div className="inline-flex rounded-md border border-border">
+              <Button
+                type="button"
+                variant={displayMode === 'card' ? 'secondary' : 'ghost'}
+                size="lg"
+                className="rounded-none border-0"
+                onClick={() => onDisplayModeChange('card')}
+              >
+                <AppWindowIcon className="size-5" />
+                Card
+              </Button>
+              <Separator orientation="vertical" className="h-10" />
+              <Button
+                type="button"
+                variant={displayMode === 'grid' ? 'secondary' : 'ghost'}
+                size="lg"
+                className="rounded-none border-0"
+                onClick={() => onDisplayModeChange('grid')}
+              >
+                <LayoutGrid className="size-5" />
+                Grid
+              </Button>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/modules/resourceJump/ui/appCatalog/AppCatalogGrid.tsx

@@ -0,0 +1,30 @@
+import type { ResourceJumpUI } from '~/modules/resourceJump/types'
+import { formatResourceTitle } from '~/modules/resourceJump/utils/helpers'
+import { Card, CardContent } from '~/ui/card'
+import { getResourceJumpUrlPattern } from './appCatalogUtils'
+
+export interface AppCatalogGridProps {
+  rows: Array<ResourceJumpUI>
+  currentEnvSlug: string | undefined
+}
+
+export function AppCatalogGrid({ rows, currentEnvSlug }: AppCatalogGridProps) {
+  return (
+    <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+      {rows.map((resourceJump) => (
+        <Card key={resourceJump.slug} className="py-4">
+          <CardContent className="px-6">
+            <div className="flex flex-col gap-2">
+              <div className="font-medium">
+                {formatResourceTitle(resourceJump)}
+              </div>
+              <div className="text-sm text-muted-foreground wrap-break-word">
+                {getResourceJumpUrlPattern(resourceJump, currentEnvSlug)}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}