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

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

@@ -0,0 +1,121 @@
+import { alphabetical, group } from 'radashi'
+import { useState } from 'react'
+import { useCrossCuttingParamsContext } from '~/modules/crossCuttingParams/CrossCuttingParamsContext'
+import { useEnvironmentContext } from '~/modules/environment/context/EnvironmentContext'
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import { LateResolvableParamsInput } from '~/modules/resourceJump/ui/LateResolvableTopParam'
+import { ResourceJumpButton } from '~/modules/resourceJump/ui/ResourceJumpButton'
+import {
+    getFlashipResource,
+    isFlagshipResource,
+} from '~/modules/resourceJump/utils/helpers'
+import { useMostRelevantLateParamSlug } from '~/modules/resourceJump/utils/statistics/useMostRelevantLateParamSlug'
+import { Card, CardContent, CardHeader } from '~/ui/card'
+import { Skeleton } from '~/ui/skeleton'
+
+export function AppPageFlagship() {
+  const { currentResourceJump, currentFlagship, isLoadingResourceJumps } =
+    useResourceJumpContext()
+  const { currentEnv } = useEnvironmentContext()
+  const mostRelevantSlug = useMostRelevantLateParamSlug()
+  const { crossCuttingParams } = useCrossCuttingParamsContext()
+
+  const [selected, setSelected] = useState('')
+
+  const resourceJumpsList =
+    currentFlagship?.resourceJumps.filter((rj) => !isFlagshipResource(rj)) || []
+  const grouped = group(resourceJumpsList, (rj) => {
+    if (
+      mostRelevantSlug &&
+      rj.lateResolvableParamSlugs?.filter((s) => s === mostRelevantSlug)
+        .length &&
+      crossCuttingParams[mostRelevantSlug]?.stringValue
+    ) {
+      return 'slug-match'
+    } else {
+      return 'regular'
+    }
+  })
+  const slugMatch = alphabetical(
+    grouped['slug-match'] || [],
+    (p) => p.displayName,
+  )
+  const regular = alphabetical(grouped['regular'] || [], (p) => p.displayName)
+
+  const onClickResourceJump = (slug: string) => {
+    setSelected(slug)
+  }
+
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      <div className="flex gap-4 items-center justify-center w-full">
+        <div className="flex gap-1 justify-center between py-4 w-full">
+          {isLoadingResourceJumps || !currentResourceJump ? (
+            <Skeleton className="h-4 w-5" />
+          ) : (
+            <Card className="min-w-8/12">
+              <CardHeader>Jump</CardHeader>
+              <CardContent>
+                <ResourceJumpButton
+                  variant="flagship"
+                  resourceJump={getFlashipResource(
+                    currentResourceJump.flagship,
+                  )}
+                  env={currentEnv}
+                  onClick={() =>
+                    onClickResourceJump(
+                      getFlashipResource(currentResourceJump.flagship).slug,
+                    )
+                  }
+                />
+              </CardContent>
+            </Card>
+          )}
+        </div>
+        <div>
+          <LateResolvableParamsInput
+            label="Case Id"
+            placeholder="Case"
+            mostRelevantSlug={mostRelevantSlug}
+          />
+        </div>
+      </div>
+      {slugMatch.length > 0 && (
+        <>
+          <div>Context</div>
+          <div className="flex flex-col gap-2 text-sm">
+            {slugMatch.map((rj) => (
+              <ResourceJumpButton
+                resourceJump={rj}
+                env={currentEnv}
+                key={rj.slug}
+                onClick={() => onClickResourceJump(rj.slug)}
+                className={
+                  rj.slug === selected ? 'bg-accent/50 rounded-lg' : ''
+                }
+              />
+            ))}
+          </div>
+        </>
+      )}
+      {regular.length > 0 && (
+        <>
+          <div>Regular</div>
+          <div className="flex flex-col gap-2 text-sm">
+            {regular.map((rj) => (
+              <ResourceJumpButton
+                resourceJump={rj}
+                env={currentEnv}
+                key={rj.slug}
+                onClick={() => onClickResourceJump(rj.slug)}
+                className={
+                  rj.slug === selected ? 'bg-accent/50 rounded-lg' : ''
+                }
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,16 @@
+import { useEnvironmentContext } from '~/modules/environment/context/EnvironmentContext'
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import { ResourceJumpButton } from '~/modules/resourceJump/ui/ResourceJumpButton'
+
+export function AppPageRegular() {
+  const { currentResourceJump } = useResourceJumpContext()
+  const { currentEnv } = useEnvironmentContext()
+  if (!currentResourceJump) {
+    return <div>No Resource Jump selected</div>
+  }
+  return (
+    <div className="flex flex-col gap-4 w-[600px]">
+      <ResourceJumpButton resourceJump={currentResourceJump} env={currentEnv} />
+    </div>
+  )
+}

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

@@ -0,0 +1,13 @@
+import { ResourceJumpMockTable } from '~/modules/resourceJump/ui/ResourceJumpMockTable'
+
+export function DashboardPage() {
+  return (
+    <div className="py-6 flex flex-col gap-4">
+      <div>
+        <div className="font-medium">Hopper</div>
+        <div className="text-sm text-muted-foreground">Dashboard</div>
+      </div>
+      <ResourceJumpMockTable />
+    </div>
+  )
+}

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

@@ -0,0 +1,89 @@
+import type { EnvBaseInfo } from '@env-hopper/backend-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 {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '~/ui/table'
+
+type Row = EnvBaseInfo
+
+export function EnvCatalogPage() {
+  const { environments } = useEnvironmentContext()
+
+  const columns = useMemo<Array<ColumnDef<Row>>>(
+    () => [
+      {
+        id: 'name',
+        header: 'Environment',
+        accessorKey: 'displayName',
+      },
+      {
+        id: 'slug',
+        header: 'Slug',
+        accessorKey: 'slug',
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: environments,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return (
+    <div className="py-6 flex flex-col gap-4">
+      <div>
+        <div className="font-medium">Envs</div>
+        <div className="text-sm text-muted-foreground">
+          {environments.length} environments
+        </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/EnvPage.tsx

@@ -0,0 +1,195 @@
+import type { EnvBaseInfo } from '@env-hopper/backend-core'
+import { Link } from '@tanstack/react-router'
+import { counting } from 'radashi'
+import { useEnvironmentContext } from '~/modules/environment/context/EnvironmentContext'
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import type {
+    ResourceJumpHistoryItem,
+    ResourceJumpUI,
+} from '~/modules/resourceJump/types'
+import { ResourceJumpButton } from '~/modules/resourceJump/ui/ResourceJumpButton'
+import type { FlagshipResourceJumpUi } from '~/modules/resourceJump/utils/mapToFlagshipResourceJumps'
+import { Card, CardContent, CardHeader } from '~/ui/card'
+
+export interface TopFlagship {
+  flagship: FlagshipResourceJumpUi
+  topResourceJumps: Array<ResourceJumpUI>
+}
+
+function getTopFlagships(
+  history: Array<ResourceJumpHistoryItem>,
+  flagshipJumpResources: Array<FlagshipResourceJumpUi>,
+): Array<TopFlagship> {
+  const maxTopFlagships = 3
+  const maxResoucesPerFlagship = 3
+  const byResorceSlug = Object.entries(
+    counting(
+      history.filter((h) => h.resourceSlug !== undefined),
+      (h) => h.resourceSlug!,
+    ),
+  )
+
+  const allResouceJumps = flagshipJumpResources.flatMap((f) => f.resourceJumps)
+
+  const topFlagships: Array<TopFlagship> = []
+  for (const [rSlug] of byResorceSlug) {
+    const rj = allResouceJumps.find((r) => r.slug === rSlug)
+    if (!rj) {
+      continue
+    }
+
+    if (topFlagships.length < maxTopFlagships) {
+      topFlagships.push({
+        flagship: rj.flagship,
+        topResourceJumps: [],
+      })
+    }
+
+    const tf = topFlagships.find((f) => f.flagship.slug === rj.flagship.slug)
+    if (tf && tf.topResourceJumps.length < maxResoucesPerFlagship) {
+      tf.topResourceJumps.push(rj)
+    }
+  }
+
+  // const byFlagship = Object.entries(
+  //   counting(history, (h) => h.flagmanSlug || ''),
+  // )
+
+  // const byFlagshipSorted = sort(byFlagship, (f) => f[1], true)
+  // return byFlagshipSorted.slice(0, 3).map((f) => f[0]).map((f) => ({
+  //   flagship: f
+  // }))
+  return topFlagships
+}
+
+export interface FlagshipBlockProps {
+  topFlagship: TopFlagship
+}
+
+function FlagshipBlock({
+  topFlagship: { flagship, topResourceJumps },
+}: FlagshipBlockProps) {
+  const { currentEnv } = useEnvironmentContext()
+  return (
+    <Card>
+      <CardHeader>
+        <LinkToFlagship flagship={flagship} env={currentEnv}>
+          {flagship.displayName}
+        </LinkToFlagship>
+      </CardHeader>
+      <CardContent>
+        {topResourceJumps.map((rj) => (
+          <ResourceJumpButton
+            key={rj.slug}
+            resourceJump={rj}
+            env={currentEnv}
+          />
+        ))}
+      </CardContent>
+    </Card>
+    // <div className="flex flex-col gap-2">
+    //   <div className="font-semibold">
+    //     <LinkToFlagship flagship={flagship} env={currentEnv}>
+    //       {flagship.displayName}
+    //     </LinkToFlagship>
+    //   </div>
+    //   <div className="flex flex-col pl-4 border-l border-muted/50 gap-1">
+    //     {topResourceJumps.map((rj) => (
+    //       <ResourceJumpButton key={rj.slug} resourceJump={rj} env={currentEnv} />
+    //     ))}
+    //   </div>
+    // </div>
+  )
+}
+
+function LinkToFlagship({
+  flagship,
+  env,
+  children,
+}: {
+  flagship: FlagshipResourceJumpUi
+  env?: EnvBaseInfo
+  children: React.ReactNode
+}) {
+  if (!env) {
+    return (
+      <Link to={'/app/$appSlug'} params={{ appSlug: flagship.slug }}>
+        {children}
+      </Link>
+    )
+  } else if (flagship.resourceJumps[0] !== undefined) {
+    return (
+      <Link
+        to={'/env/$envSlug/app/$appSlug'}
+        params={{ envSlug: env.slug, appSlug: flagship.resourceJumps[0].slug }}
+      >
+        {children}
+      </Link>
+    )
+  } else {
+    return <span>{children}</span>
+  }
+}
+
+export function EnvPage() {
+  const { history, flagshipJumpResources } = useResourceJumpContext()
+
+  const topFlagships = getTopFlagships(history, flagshipJumpResources)
+  return (
+    <div className="flex flex-col gap-4 mt-4">
+      {/* <div className='text-xl text-eh-env-foreground font-semibold'>{currentEnv?.displayName}</div> */}
+      <div className="grid grid-cols-1 gap-8">
+        {topFlagships.map((tp) => {
+          return <FlagshipBlock key={tp.flagship.slug} topFlagship={tp} />
+        })}
+      </div>
+      {/* <div>
+        Related to Case ID - <strong>12q33244</strong>
+      </div> */}
+      {/* <Card>
+        <CardContent>
+          <div className="flex gap-2 justify-center">
+            <div>
+              <InputGroup>
+                <InputGroupInput placeholder="Case Id, Clinic Id, ..." />
+                <InputGroupAddon>
+                  <SearchIcon />
+                </InputGroupAddon>
+              </InputGroup>
+            </div>
+            <div>
+              <Button variant="secondary">Go</Button>
+            </div>
+          </div>
+
+        </CardContent>
+      </Card> */}
+      {/* 
+      <div className="flex flex-col gap-2">
+        <div className="round-lg p-2 rounded-lg hover:bg-secondary/50">
+          Slisptream
+        </div>
+        <div className="round-lg p-2 rounded-lg hover:bg-secondary/50">
+          <div className="flex items-center justify-between ">
+            <div className="grow">Support Review #</div>
+            <InputGroup className="max-w-64 h-">
+              <InputGroupInput placeholder="Type case id to search ..." />
+            </InputGroup>
+          </div>
+        </div>
+      </div> */}
+      {/* <div className="flex flex-col gap-2 text-sm">
+        {currentFlagship &&
+          alphabetical(currentFlagship.resourceJumps, (p) => p.displayName).map(
+            (rj) => (
+              <ResouceJumpRow
+                resourceJump={rj}
+                env={currentEnv}
+                key={rj.slug}
+              />
+            ),
+          )}
+      </div> */}
+    </div>
+  )
+}

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

@@ -0,0 +1,35 @@
+import { Link } from '~/ui/link'
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import { getEhToOptions } from '~/util/route-utils'
+
+export function HomePage() {
+  const { flagshipJumpResources } = useResourceJumpContext()
+  return (
+    <div className="flex flex-col gap-4 py-12">
+      <div>
+        <div className="grid grid-cols-1">
+          {flagshipJumpResources.length === 0 ? 'No applications found.' : ''}
+          {flagshipJumpResources.map((res) => (
+            <div
+              key={res.slug}
+              className="border border-border rounded-md p-4 m-2"
+            >
+              <div className="font-medium">
+                <Link
+                  {...getEhToOptions({
+                    appId: res.slug,
+                  })}
+                >
+                  {res.displayName}
+                </Link>
+              </div>
+              <div className="text-sm text-muted-foreground">
+                {res.resourceJumps.length} Resource Jumps
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/modules/resourceJump/ui/widgets/VersionWidget.tsx

@@ -0,0 +1,15 @@
+interface VersionWidgetProps {
+  className?: string
+}
+
+export function VersionWidget({ className }: VersionWidgetProps) {
+  return (
+    <div className={`flex flex-col gap-1 ${className}`}>
+      <h3 className="text-sm font-medium text-secondary-foreground">Version</h3>
+      <p className="text-sm font-medium">JIRA-1231-my-feature-123345</p>
+      <p className="text-xs text-muted-foreground">
+        Deployed 5 days ago • Igor Golovin
+      </p>
+    </div>
+  )
+}

package/src/modules/resourceJump/utils/buildJumpUrl.ts

@@ -0,0 +1,46 @@
+import {
+  resolveTemplate,
+  substituteTemplateWithEnvParams,
+} from '@env-hopper/shared-core'
+import type {
+  EnvSlug,
+  JumpResourceSlug,
+  ResourceJumpsData,
+} from '@env-hopper/backend-core'
+
+export function buildJumpUrl(
+  jumpResourceSlug: JumpResourceSlug | undefined,
+  envSlug: EnvSlug | undefined,
+  resourceJumpsData: ResourceJumpsData | undefined,
+  lateParamValues?: Record<string, string>,
+): string | undefined {
+  if (!resourceJumpsData || !jumpResourceSlug || !envSlug) {
+    return undefined
+  }
+
+  // Find the resource jump by slug
+  const resourceJump = resourceJumpsData.resourceJumps.find(
+    (rj) => rj.slug === jumpResourceSlug,
+  )
+  if (!resourceJump) {
+    return undefined
+  }
+
+  // Find the environment by slug
+  const env = resourceJumpsData.envs.find((e) => e.slug === envSlug)
+  if (!env) {
+    return undefined
+  }
+
+  // Resolve the template using shared-core function
+  const template = resolveTemplate(envSlug, resourceJump.urlTemplate)
+
+  // Apply template substitution with env params, resource template params, and late param values
+  return substituteTemplateWithEnvParams(
+    template,
+    envSlug,
+    env.templateParams,
+    resourceJump.urlTemplate.templateParams,
+    lateParamValues,
+  )
+}

package/src/modules/resourceJump/{findBestMatchByUrl.ts → utils/findBestMatchByUrl.ts}

@@ -1,13 +1,13 @@
 import { sort } from 'radashi'
 import type {
-  AvailiabilityMatrixData,
+  AvailabilityMatrixData,
   EhEnvIndexed,
   RenameRule,
   RenameRuleParams,
 } from '@env-hopper/backend-core'
-import type { EnvironmentHistoryItem } from '../environment/types'
-import type { ResourceJumpItem } from './types'
 import type { AvailabilitySlugPair } from '~/util/availabilityMatrixUtils'
+import type { EnvironmentHistoryItem } from '../../environment/types'
+import type { ResourceJumpItem } from '../types'
 import { findAvailableResources } from '~/util/availabilityMatrixUtils'
 
 export interface FindBestMatchingResourceJumpParams {
@@ -16,7 +16,7 @@ export interface FindBestMatchingResourceJumpParams {
   envs: Record<string, EhEnvIndexed>
   resourceJumps: Record<string, ResourceJumpItem>
   getEnvHistory: () => Promise<Array<EnvironmentHistoryItem>>
-  getAvailabilityMatrix: () => Promise<AvailiabilityMatrixData>
+  getAvailabilityMatrix: () => Promise<AvailabilityMatrixData>
   getNameMigrations: (params: RenameRuleParams) => Promise<RenameRule | false>
 }
 

package/src/modules/resourceJump/{helpers.ts → utils/helpers.ts}

@@ -3,8 +3,9 @@ import type {
   BaseAppAutoCompletableParent,
   BaseAutoCompletableItem,
 } from '~/modules/pluginCore/types'
+import type { ResourceJumpUI } from '~/modules/resourceJump/types'
+import type { FlagshipResourceJumpUi } from '~/modules/resourceJump/utils/mapToFlagshipResourceJumps'
 import type { EhUrlParams } from '~/types/ehTypes'
-import type { ResourceJumpItem } from './types'
 import {
   getRenderData,
   isAutocompleteItem,
@@ -18,23 +19,55 @@ export function* mapDisplayedItems(
   for (const item of displayedItems) {
     if (isAutocompleteItem(item)) {
       const itemRenderData = getRenderData(item)
+      // Only treat as child if both items have the same non-undefined parent
+      const isChild = item.parent !== undefined && item.parent === lastParent
       yield {
         item,
         itemRenderData,
-        isChild: item.parent === lastParent,
+        isChild,
       }
     }
     lastParent = item.parent
   }
 }
 
-export function formatResourceTitle(resouceJump: ResourceJumpItem | undefined) {
-  if (resouceJump === undefined) {
-    return ''
+export function isFlagshipPageByName(
+  resourceJump: ResourceJumpUI | undefined,
+): boolean {
+  return (
+    !!resourceJump &&
+    resourceJump.displayName === 'Home' &&
+    !!resourceJump.flagship
+  )
+}
+
+export function isFlagshipResource(
+  resourceJump: ResourceJumpUI | undefined,
+): boolean {
+  if (!resourceJump?.flagship) return false
+  return resourceJump.slug === resourceJump.flagship.resourceJumps[0]?.slug
+}
+
+export function getFlashipResource(
+  flagship: FlagshipResourceJumpUi,
+): ResourceJumpUI {
+  return flagship.resourceJumps[0]!
+}
+
+export function formatResourceTitle(
+  resourceJump: ResourceJumpUI | undefined,
+  defaultTitle: string = '',
+) {
+  if (resourceJump === undefined) {
+    return defaultTitle
+  }
+  if (isFlagshipPageByName(resourceJump)) {
+    return resourceJump.flagship.displayName
+  }
+  if (resourceJump.flagship.displayName === resourceJump.displayName) {
+    return resourceJump.displayName
   }
-  return [resouceJump.parent?.displayName, resouceJump.slug]
-    .filter(Boolean)
-    .join(' :: ')
+  return resourceJump.flagship.displayName + ' :: ' + resourceJump.displayName
 }
 
 export function getByIdRelaxed<T extends { slug: string }>(
@@ -72,7 +105,7 @@ export interface PreselectedBasedOnParamsReturn {
   app: EhAppIndexed | undefined
 }
 
-export function loadEnvAndResouceByRawUrlParams({
+export function loadEnvAndResourceByRawUrlParams({
   rawUrlParams: urlParams,
   config,
   lastUsedEnvSlug: lastUsedEnvSlug,