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

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

@@ -1,14 +1,9 @@
 import type { ReactNode } from 'react'
-import type { ResourceJumpItem } from '../types'
-import type { EhPluginResouceJumpCtx } from '~/modules/pluginCore/types'
-import { getJumpUrl } from '~/plugins/builtin/pageUrl/pageUrlAutoCompletePlugin'
 
 export interface JumpUrlParams extends React.ComponentPropsWithoutRef<'a'> {
   children: ReactNode
-  ctx: EhPluginResouceJumpCtx
-  jumpResource: ResourceJumpItem
+  jumpUrl: string
   id?: string
-  // substitution?: EhSubstitutionValue;
   className?: string
   isMain?: boolean
   prefetch?: boolean
@@ -17,10 +12,8 @@ export interface JumpUrlParams extends React.ComponentPropsWithoutRef<'a'> {
 
 export function JumpALink({
   children,
-  ctx,
+  jumpUrl,
   id,
-  jumpResource,
-  // substitution,
   className,
   isMain,
   testId,
@@ -32,9 +25,8 @@ export function JumpALink({
     // ...existing code...
   }
 
-  const jumpUrl = getJumpUrl(jumpResource, ctx)
   if (!jumpUrl) {
-    return undefined
+    return <div className={className}>{children}</div>
   }
   return (
     <a

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

@@ -1,11 +1,8 @@
 import cn from 'classnames'
-import { useResourceJumpContext } from '../ResourceJumpContext'
+import { useResourceJumpContext } from '../context/ResourceJumpContext'
 import { JumpALink } from './JumpALink'
-import { useEnvironmentContext } from '~/modules/environment/EnvironmentContext'
-import {
-  formatJumpButtonTitle,
-  isAutocompleteItem,
-} from '~/plugins/builtin/pageUrl/pageUrlAutoCompletePlugin'
+import { useEnvironmentContext } from '~/modules/environment/context/EnvironmentContext'
+import { formatJumpButtonTitle } from '~/plugins/builtin/pageUrl/pageUrlAutoCompletePlugin'
 
 export const JUMP_MAIN_BTN_ID = 'jump-main-button'
 
@@ -14,7 +11,8 @@ export interface JumpMainButtonProps {
 }
 
 export function JumpMainButton({ className }: JumpMainButtonProps) {
-  const { currentResourceJump, getJumpUrl } = useResourceJumpContext()
+  const { currentResourceJump, getJumpUrl, isLoadingResourceJumps } =
+    useResourceJumpContext()
 
   const { currentEnv } = useEnvironmentContext()
 
@@ -23,11 +21,9 @@ export function JumpMainButton({ className }: JumpMainButtonProps) {
       ? getJumpUrl(currentResourceJump.slug, currentEnv.slug)
       : undefined
 
-  let buttonTitle = 'n/a'
-  if (isAutocompleteItem(currentResourceJump)) {
-    // If the current resource jump is an autocomplete item, format the button title
-    buttonTitle = formatJumpButtonTitle(currentResourceJump)
-  }
+  const buttonTitle = currentResourceJump
+    ? formatJumpButtonTitle(currentResourceJump)
+    : 'n/a'
 
   // .btn:active:hover,
   //   .btn:active:focus {
@@ -44,54 +40,99 @@ export function JumpMainButton({ className }: JumpMainButtonProps) {
 
   return (
     <div className={cn('relative flex justify-center', className)}>
-      {currentResourceJump !== undefined && url !== undefined ? (
-        <JumpALink
-          id={JUMP_MAIN_BTN_ID}
-          testId={'jump-main-button'}
-          ctx={{
-            env: currentEnv,
-          }}
-          jumpResource={currentResourceJump}
-          isMain={true}
-          className={cn(
-            'border border-secondary-foreground/50 primary text-center rounded-md px-8 py-4 h-auto shadow-xl group indicator relative hover:bg-base-content/10 hover:text-base-content w-full hover:bg-accent hover:text-accent-foreground ease-out  ',
-            'active:hover:scale-(--btn-focus-scale) active:focus:scale-(--btn-focus-scale) motion-safe:duration-200',
-          )}
-        >
-          <div className="absolute top-0 bottom-0 right-0 flex items-center text-xl text-hopper invisible lg:visible font-semibold select-none">
+      {currentResourceJump !== undefined ? (
+        isLoadingResourceJumps ? (
+          // Loading state: show raw URL params with loading indicator
+          <div className="border border-secondary-foreground/50 primary text-center rounded-md px-8 py-4 h-auto shadow-xl group indicator relative w-full">
+            <div className="absolute top-0 bottom-0 right-0 flex items-center text-xl text-hopper invisible lg:visible font-semibold select-none">
+              <div className="mr-12">LOADING</div>
+            </div>
             <div
-              className={cn(
-                'mr-12 group-hover:motion-safe:-translate-x-0.5 group-hover:motion-safe:translate-y-0.5 group-hover:motion-safe:scale-y-90 group-hover:motion-safe:rotate-2 origin-bottom transition-transform motion-safe:duration-100',
-              )}
+              className={'flex flex-col gap-6'}
+              data-testid={'jump-main-button-text'}
             >
-              JUMP
+              <div>
+                <code>{buttonTitle}</code>
+              </div>
+              <div>
+                <code>{currentEnv?.slug}</code>
+              </div>
+              <div className={'text-xs text-wrap font-semibold opacity-50'}>
+                Loading URL...
+              </div>
             </div>
           </div>
-          <div
-            className={'flex flex-col gap-6'}
-            data-testid={'jump-main-button-text'}
+        ) : url !== undefined ? (
+          // Loaded with URL: show clickable button
+          <JumpALink
+            id={JUMP_MAIN_BTN_ID}
+            testId={'jump-main-button'}
+            jumpUrl={url}
+            isMain={true}
+            className={cn(
+              'border border-secondary-foreground/50 primary text-center rounded-md px-8 py-4 h-auto shadow-xl group indicator relative hover:bg-base-content/10 hover:text-base-content w-full hover:bg-accent hover:text-accent-foreground ease-out  ',
+              'active:hover:scale-(--btn-focus-scale) active:focus:scale-(--btn-focus-scale) motion-safe:duration-200',
+            )}
           >
-            <div>
-              <code>{buttonTitle}</code>
+            <div className="absolute top-0 bottom-0 right-0 flex items-center text-xl text-hopper invisible lg:visible font-semibold select-none">
+              <JumpAnimatedLabel />
             </div>
-            <div>
-              <code>{currentEnv?.slug}</code>
+            <div
+              className={'flex flex-col gap-6'}
+              data-testid={'jump-main-button-text'}
+            >
+              <div>
+                <code>{buttonTitle}</code>
+              </div>
+              <div>
+                <code>{currentEnv?.slug}</code>
+              </div>
+              <div
+                className={
+                  'group-hover:underline text-xs text-wrap font-semibold'
+                }
+              >
+                {url}
+              </div>
             </div>
+          </JumpALink>
+        ) : (
+          // Loaded without URL: show not ready state
+          <div className="border border-dashed border-black dark:border-white rounded flex justify-center p-4 flex-col cursor-not-allowed w-full">
             <div
-              className={
-                'group-hover:underline text-xs text-wrap font-semibold'
-              }
+              className={'flex flex-col gap-6'}
+              data-testid={'jump-main-button-text'}
             >
-              {url}
+              <div>
+                <code>{buttonTitle}</code>
+              </div>
+              <div>
+                <code>{currentEnv?.slug}</code>
+              </div>
+              <div className={'text-xs text-wrap font-semibold'}>
+                Resource or environment not found
+              </div>
             </div>
           </div>
-        </JumpALink>
+        )
       ) : (
         <div className="border border-dashed border-black dark:border-white rounded flex justify-center p-4 flex-col cursor-not-allowed w-full">
           not ready
-          {/* <MainJumpButtonNotReady isHovered={isHovered} /> */}
         </div>
       )}
     </div>
   )
 }
+
+export function JumpAnimatedLabel({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        'mr-12 hover:motion-safe:-translate-x-0.5 hover:motion-safe:translate-y-0.5 hover:motion-safe:scale-y-90 hover:motion-safe:rotate-2 origin-bottom transition-transform motion-safe:duration-100',
+        className,
+      )}
+    >
+      JUMP
+    </div>
+  )
+}

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

@@ -0,0 +1,47 @@
+import { debounce } from 'radashi'
+import { useMemo, useRef } from 'react'
+import { useCrossCuttingParamsContext } from '~/modules/crossCuttingParams/CrossCuttingParamsContext'
+import { CROSS_CUTTING_SINGLE_SLUG } from '~/modules/crossCuttingParams/types'
+import { Input } from '~/ui/input'
+
+export function LateResolvableParamInput({ paramSlug }: { paramSlug: string }) {
+  const { getParamDefBySlug, crossCuttingParams, setCrossCuttingParams } =
+    useCrossCuttingParamsContext()
+
+  const paramDef = getParamDefBySlug(paramSlug)
+
+  const paramsObj = crossCuttingParams[paramSlug] || {
+    stringValue: '',
+    slug: CROSS_CUTTING_SINGLE_SLUG,
+  }
+
+  const paramsRef = useRef(crossCuttingParams)
+  paramsRef.current = crossCuttingParams
+
+  const debouncedUpdate = useMemo(
+    () =>
+      debounce({ delay: 100 }, (value: string) => {
+        setCrossCuttingParams({
+          ...paramsRef.current,
+          [paramSlug]: { slug: paramSlug, stringValue: value },
+        })
+      }),
+    [paramSlug, setCrossCuttingParams],
+  )
+
+  if (!paramSlug) {
+    return null
+  }
+
+  return (
+    <Input
+      placeholder={paramDef?.displayName || 'undef ' + paramDef}
+      className="w-fit"
+      defaultValue={paramsObj.stringValue || ''}
+      key={paramSlug}
+      onChange={(v) => {
+        debouncedUpdate(v.target.value)
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,46 @@
+import { ChevronDown } from 'lucide-react'
+import { cn } from '~/lib/utils'
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import { LateResolvableParamInput } from '~/modules/resourceJump/ui/LateResolvableSingleParam'
+import { Button } from '~/ui/button'
+import { ButtonGroup } from '~/ui/button-group'
+
+interface LateResolvableParamsInputProps {
+  className?: string
+  placeholder?: string
+  label: string
+  mostRelevantSlug: string | undefined
+}
+
+export function LateResolvableParamsInput({
+  className,
+  label: _label,
+  placeholder: _placeholder,
+  mostRelevantSlug,
+}: LateResolvableParamsInputProps) {
+  const { currentResourceJump } = useResourceJumpContext()
+  if (!currentResourceJump) {
+    return null
+  }
+  return (
+    <div className={cn('flex flex-col gap-2 items-center', className)}>
+      {mostRelevantSlug && (
+        <ButtonGroup>
+          <LateResolvableParamInput paramSlug={mostRelevantSlug} />
+          {/* <Input type="text" placeholder={placeholder} /> */}
+          <Button variant="outline" aria-label="Search">
+            <ChevronDown />
+          </Button>
+        </ButtonGroup>
+      )}
+      {/* <Link
+        to={'/env/$envSlug/app/$appSlug'}
+        params={{ appSlug: 'flagship-app', envSlug: 'flagship-resource-jump' }}
+        className='inline-flex items-center gap-1'
+      >
+        RM Support Review Case
+        <ExternalLinkIcon className="w-3 h-3" />
+      </Link> */}
+    </div>
+  )
+}

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

@@ -0,0 +1,109 @@
+import { XIcon } from 'lucide-react'
+import { debounce } from 'radashi'
+import { useEffect, useMemo, useRef } from 'react'
+import { useResourceJumpContext } from '../context/ResourceJumpContext'
+import { cn } from '~/lib/utils'
+
+interface ResolvableParameterSelectorProps {
+  className?: string
+  slug: string
+  label?: string
+}
+
+export function ResolvableParameterSelector({
+  className = '',
+  slug,
+  label,
+}: ResolvableParameterSelectorProps) {
+  const {
+    currentLateResolvableParams,
+    currentLateResolvableParamsValue,
+    setLateResolvableParamValue,
+  } = useResourceJumpContext()
+
+  // Resolve display name from context if not provided
+  const paramMeta = currentLateResolvableParams.find((p) => p.slug === slug)
+  const displayLabel = label ?? paramMeta?.displayName ?? 'Parameter'
+
+  // Find current value for this slug
+  const currentValue =
+    currentLateResolvableParamsValue.find((p) => p.slug === slug)?.value ?? ''
+
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  // Debounced push to context with leading: true
+  const pushToContext = useMemo(
+    () =>
+      debounce({ delay: 3000 }, (val: string) => {
+        return setLateResolvableParamValue(slug, val)
+      }),
+    [slug, setLateResolvableParamValue],
+  )
+
+  useEffect(() => () => pushToContext.cancel(), [pushToContext])
+
+  const handleChange = (newValue: string) => {
+    pushToContext(newValue)
+  }
+
+  // Keep the uncontrolled input in sync when context changes externally
+  useEffect(() => {
+    if (inputRef.current && inputRef.current.value !== currentValue) {
+      inputRef.current.value = currentValue
+    }
+  }, [currentValue])
+
+  return (
+    <div className={cn('w-full', className)}>
+      <div className="relative group hover:cursor-pointer w-full">
+        <input
+          ref={inputRef}
+          className={cn(
+            'text-sm h-10 w-full rounded-md border border-input bg-background pl-4 pr-10 py-2 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+            'group-hover:border-secondary-foreground/60 group-hover:bg-secondary/30 focus:bg-secondary/30 focus:border-secondary-foreground/60',
+            'hover:cursor-pointer duration-300',
+          )}
+          placeholder={displayLabel}
+          defaultValue={currentValue}
+          onChange={(e) => handleChange(e.target.value)}
+          onBlur={() => {
+            const val = inputRef.current?.value ?? ''
+            setLateResolvableParamValue(slug, val)
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              const val = inputRef.current?.value ?? ''
+              setLateResolvableParamValue(slug, val)
+              ;(e.currentTarget as HTMLInputElement).blur()
+            }
+          }}
+          onMouseUp={(e) => {
+            const userHasSelectedSomeText =
+              e.currentTarget.selectionStart !== e.currentTarget.selectionEnd
+            if (!userHasSelectedSomeText) {
+              e.currentTarget.select()
+            }
+          }}
+        />
+        <XIcon
+          className="absolute right-3 top-1/2 -translate-y-1/2 stroke-secondary-foreground/50 group-hover:stroke-secondary-foreground/60 group-hover:rotate-3 group-hover:scale-95 hover:stroke-secondary-foreground hover:bg-secondary rounded-full"
+          onClick={() => {
+            if (inputRef.current) {
+              inputRef.current.value = ''
+            }
+            handleChange('')
+          }}
+        />
+        <label
+          className={cn(
+            'absolute text-xs text-secondary-foreground/50',
+            'left-2 -top-0.5 -translate-y-1/2 text-muted-foreground bg-background rounded-2xl px-1',
+          )}
+        >
+          {displayLabel}
+        </label>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,26 @@
+import { useResourceJumpContext } from '../context/ResourceJumpContext'
+import { ResolvableParameterSelector } from './ResolvableParameterSelector'
+
+interface ResolvableParametersProps {
+  className?: string
+}
+
+export function ResolvableParameters({
+  className = '',
+}: ResolvableParametersProps) {
+  const { currentLateResolvableParams } = useResourceJumpContext()
+
+  if (currentLateResolvableParams.length === 0) {
+    return null
+  }
+
+  return (
+    <div className={className}>
+      {currentLateResolvableParams.map((p) => (
+        <div key={p.slug} className="pt-2 w-full">
+          <ResolvableParameterSelector slug={p.slug} label={p.displayName} />
+        </div>
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,89 @@
+import { HomeIcon } from 'lucide-react'
+import { useEnvironmentContext } from '~/modules/environment/context/EnvironmentContext'
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import {
+  getFlashipResource,
+  isFlagshipResource,
+} from '~/modules/resourceJump/utils/helpers'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from '~/ui/breadcrumb'
+import { Link } from '~/ui/link'
+import { getEhToOptions } from '~/util/route-utils'
+
+export interface ResourceJumpBreadcrumbsProps {
+  className?: string
+}
+
+export function ResourceJumpBreadcrubms() {
+  const { currentFlagship, currentResourceJump } = useResourceJumpContext()
+  const { currentEnv } = useEnvironmentContext()
+
+  return (
+    <Breadcrumb className="pb-4">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link to={'/'} className="flex items-center gap-1">
+              <HomeIcon className="inline w-4 h-4" />
+              <span>Home</span>
+            </Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        {currentEnv && (
+          <>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link
+                  to={`/env/$envSlug`}
+                  params={{ envSlug: currentEnv.slug }}
+                >
+                  {currentEnv.displayName}
+                </Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          </>
+        )}
+        {currentFlagship && (
+          <>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link
+                  {...getEhToOptions({
+                    appId: getFlashipResource(currentFlagship).slug,
+                    envId: currentEnv?.slug,
+                  })}
+                >
+                  {currentFlagship.displayName}
+                </Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          </>
+        )}
+        {currentResourceJump && !isFlagshipResource(currentResourceJump) && (
+          <>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link
+                  {...getEhToOptions({
+                    appId: currentResourceJump.slug,
+                    envId: currentEnv?.slug,
+                  })}
+                >
+                  {currentResourceJump.displayName}
+                </Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          </>
+        )}
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}

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

@@ -0,0 +1,75 @@
+import type { EnvBaseInfo } from '@env-hopper/backend-core'
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+import { ExternalLinkIcon } from 'lucide-react'
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import type { ResourceJumpUI } from '~/modules/resourceJump/types'
+import { isFlagshipResource } from '~/modules/resourceJump/utils/helpers'
+import { LinkExternal } from '~/ui/linkExternal'
+
+const linkVariants = cva('flex items-center group-hover:underline', {
+  variants: {
+    variant: {
+      default: 'gap-2',
+      flagship: 'gap-2 font-semibold',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+const iconVariants = cva('', {
+  variants: {
+    variant: {
+      default: 'h-3 w-3',
+      flagship: 'h-6 w-6',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+export function ResourceJumpButton({
+  resourceJump: resouceJump,
+  env,
+  variant,
+  className,
+  onClick,
+}: {
+  resourceJump: ResourceJumpUI
+  env: EnvBaseInfo | undefined
+  className?: string
+  onClick?: () => void
+} & VariantProps<typeof linkVariants>) {
+  const { getJumpUrl } = useResourceJumpContext()
+
+  return (
+    <div className={className} onClick={onClick}>
+      <div className="p-2 flex flex-col gap-2 hover:bg-accent/30 duration-100 rounded-lg group">
+        <LinkExternal
+          href={getJumpUrl(resouceJump.slug, env?.slug)}
+          className="flex justify-between active:hover:scale-(--btn-focus-scale) active:focus:scale-(--btn-focus-scale) motion-safe:duration-200 ease-out transition-all gap-2"
+        >
+          <div className="flex flex-col">
+            <div className={linkVariants({ variant })}>
+              {isFlagshipResource(resouceJump)
+                ? resouceJump.flagship.displayName
+                : resouceJump.displayName}
+              <ExternalLinkIcon className={iconVariants({ variant })} />
+              {/* <JumpIcon resouceJump={resouceJump} /> */}
+
+              {/* <LateResolvableParamInput resourceJump={resouceJump} /> */}
+              {/* <ExternalLinkIcon className="w-4 stroke-secondary-foreground invisible group-hover:visible" /> */}
+            </div>
+            {/* <div className={subLinkVariant({ variant })}>
+              {getJumpUrl(resouceJump.slug, env?.slug)}
+            </div> */}
+          </div>
+          {/* <JumpAnimatedLabel className='invisible group-hover:visible text-lg py-3 px-5 hidden lg:flex' /> */}
+        </LinkExternal>
+      </div>
+    </div>
+  )
+}