@env-hopper/frontend-core 2.0.1-alpha

package/src/App.tsx

@@ -0,0 +1,28 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { RouterProvider } from '@tanstack/react-router'
+import { DbProvider } from './userDb/DbContext'
+import type { TRPCRouter } from '@env-hopper/backend-core'
+import type { QueryClient } from '@tanstack/react-query'
+import type { TRPCClient } from '@trpc/client'
+import type { EhDb } from './userDb/EhDb'
+import type { createEhRouter } from '~/util/createEhRouter'
+import { TRPCProvider } from '~/api/infra/trpc'
+
+export interface AppProps {
+  router: ReturnType<typeof createEhRouter>
+  queryClient: QueryClient
+  trpcClient: TRPCClient<TRPCRouter>
+  db: EhDb
+}
+
+export function App({ router, queryClient, trpcClient, db }: AppProps) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TRPCProvider queryClient={queryClient} trpcClient={trpcClient}>
+        <DbProvider db={db}>
+          <RouterProvider router={router} />
+        </DbProvider>
+      </TRPCProvider>
+    </QueryClientProvider>
+  )
+}

package/src/__tests__/modules/fuzzyMatchLogic/autoCompleteFilter.test.ts

@@ -0,0 +1,185 @@
+import { describe, expect, it } from 'vitest'
+import { makeInputEntry } from './testUtils'
+import type { FuzzySearchInputEntry } from '~/modules/fuzzyMatchLogic/types'
+import {
+  fuzzySearch,
+  makeFuzzySearchIndex,
+} from '~/modules/fuzzyMatchLogic/autoCompleteFilter'
+
+const randomEnvironmentNames = [
+  'uat-0916',
+  'Prod-02a',
+  'Pipeline-delta11',
+  'BUILD-08',
+  'Dev-107',
+  'staging-envc',
+  'Backup-gammae',
+  'Infra-temporale',
+  'STAGING-BETAB',
+  'Backup-21',
+  'Sig-betac',
+  'Prod-production14',
+  'Staging-deployb',
+  'BACKUP-TEMPORAL',
+  'acc-2198',
+  'node-productiona',
+  'shared-21',
+  'Sig-deploy',
+  'SIG-01',
+  'uat-temporal',
+]
+
+describe.skip('env search a bit fuzzy', () => {
+  let db: Array<FuzzySearchInputEntry> = []
+
+  function given(strings: Array<string>) {
+    db = strings.map((title) => makeInputEntry(title))
+  }
+
+  function searchResults(search: string) {
+    const index = makeFuzzySearchIndex({
+      entries: db,
+    })
+    return fuzzySearch(search, { index })
+  }
+
+  it('case 1', () => {
+    given(['env-a', 'env-b'])
+    expect(searchResults('a')).toEqual(['env-a'])
+  })
+
+  it('case 2', () => {
+    given(['x abcdev', 'abc-dev'])
+    expect(searchResults('abcdev')).toMatchInlineSnapshot(`
+      [
+        "abc-dev",
+        "x abcdev",
+      ]
+    `)
+  })
+
+  it('case 3 - firstLetters', () => {
+    given(['x abcdev', 'abcXXX-devXXX'])
+    expect(searchResults('abc-dev')).toEqual(['abcXXX-devXXX', 'x abcdev'])
+  })
+
+  it('case 4', () => {
+    given(['env-xxx-1', 'env-xxx-3'])
+    expect(searchResults('env1')).toEqual(['env-xxx-1'])
+  })
+
+  it('case 5', () => {
+    given(['env-xxxx-33', 'env-xxx-33', 'env-xxx-3'])
+    expect(searchResults('env-xxx-3')).toEqual([
+      'env-xxx-3',
+      'env-xxx-33',
+      'env-xxxx-33',
+    ])
+  })
+
+  it('user can find split text without splitters', () => {
+    given(['Abc-Rev'])
+    expect(searchResults('Abcrev')).toEqual(['Abc-Rev'])
+  })
+
+  it('case 6', () => {
+    given(randomEnvironmentNames)
+    expect(searchResults('pro14')).toEqual(['Prod-production14'])
+  })
+
+  it('case 7', () => {
+    given(randomEnvironmentNames)
+    expect(searchResults('B')).toEqual([
+      'BUILD-08',
+      'Backup-21',
+      'Backup-gammae',
+      'BACKUP-TEMPORAL',
+      'Sig-betac',
+      'STAGING-BETAB',
+      'Staging-deployb',
+    ])
+  })
+
+  it('Case insensitive', () => {
+    given(['Abc Review', 'AbcRev'])
+    expect(searchResults('Rev')).toEqual(['AbcRev', 'Abc Review'])
+  })
+
+  it('prefix is priority', () => {
+    given(['EPIC-ENV-A64', 'A64-ENV-01'])
+    expect(searchResults('a64')).toEqual(['A64-ENV-01', 'EPIC-ENV-A64'])
+  })
+
+  // TODO: treat  numeric/letter boundaries with different priorities compared with separators like '-'
+  it.skip('should respect delimiter', () => {
+    given(['g32pe-01', 'g32-dev-01'])
+    expect(searchResults('g32')).toEqual(['g32-dev-01', 'g32pe-01'])
+  })
+
+  it('fuzzy will not match inverted', () => {
+    given(['env-33'])
+    expect(searchResults('33-env')).toEqual([])
+  })
+
+  it('Upper case is a word separator', () => {
+    given(['camelCase', 'PascalCase', 'case'])
+    expect(searchResults('case')).toEqual(['case', 'camelCase', 'PascalCase'])
+  })
+
+  it('000 Leading zeros can be omitted', () => {
+    given(['env-001', 'env-1'])
+    expect(searchResults('1')).toEqual(['env-1', 'env-001'])
+  })
+
+  it('ru keyboard layout is working too', () => {
+    given(['env-001'])
+    expect(searchResults('утм')).toEqual(['env-001'])
+  })
+
+  it('special symbols will be working if they are standalone', () => {
+    given(['a order', 'b order #', 'c order'])
+    expect(searchResults('order #')).toEqual(['b order #'])
+  })
+
+  it('favorites, then recent, are priority - case sensitive', () => {
+    given(['a order', 'a order - recent', 'a order - favorite'])
+    expect(searchResults('a')).toEqual([
+      'a order - favorite',
+      'a order - recent',
+      'a order',
+    ])
+  })
+
+  it('favorites, then recent, are priority - case insensitive', () => {
+    given(['A order', 'A order - recent', 'A order - favorite'])
+    expect(searchResults('a')).toEqual([
+      'A order - favorite',
+      'A order - recent',
+      'A order',
+    ])
+  })
+
+  it('favorites, then recent, are priority - substring', () => {
+    given(['A order', 'A order - recent', 'A order - favorite'])
+    expect(searchResults('rd')).toEqual([
+      'A order - favorite',
+      'A order - recent',
+      'A order',
+    ])
+  })
+
+  it('doubl dashes', () => {
+    given(['abc-uat-01'])
+    expect(searchResults('abcuat-01')).toEqual(['abc-uat-01'])
+  })
+
+  it('dash-separator', () => {
+    given(['abc-uat'])
+    expect(searchResults('abcuat')).toEqual(['abc-uat'])
+  })
+
+  it('does not match substrings', () => {
+    given(['abc'])
+    expect(searchResults('b')).toEqual([])
+  })
+})

package/src/__tests__/modules/fuzzyMatchLogic/features/prefixFracTokenMiddles.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import { makeInputEntry } from '../testUtils'
+import { prefixFracAcrossTokens } from '~/modules/fuzzyMatchLogic/features/prefixFracTokenMiddles'
+
+describe('prefixFracAcrossTokens', () => {
+  it('not found', () => {
+    const input = makeInputEntry('env-001')
+    const actual = prefixFracAcrossTokens(input, ['002'])
+    expect(actual.toFixed(2)).toEqual('0.00')
+  })
+
+  it('1 token match full', () => {
+    const input = makeInputEntry('env-001-abc')
+    const actual = prefixFracAcrossTokens(input, ['001', 'abc'])
+    expect(actual.toFixed(2)).toEqual('1.00')
+  })
+
+  it('1 token match partial l', () => {
+    const input = makeInputEntry('env-001-abc')
+    const actual = prefixFracAcrossTokens(input, ['001', 'ab'])
+    expect(actual.toFixed(2)).toEqual('0.83')
+  })
+})

package/src/__tests__/modules/fuzzyMatchLogic/fixLayout.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest'
+import { fixRuLayout, isRuLayout } from '~/modules/fuzzyMatchLogic/fixLayout'
+
+describe('ru -> en fix', () => {
+  it('can detect ru layout', () => {
+    expect(isRuLayout('йцукен')).toBe(true)
+  })
+  it('can fix ru layout', () => {
+    expect(fixRuLayout('здуфыу ашч ьу')).toBe('please fix me')
+  })
+})

package/src/__tests__/modules/fuzzyMatchLogic/postFiltration.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest'
+import { makeInputEntry } from './testUtils'
+import { isTokensConsequent } from '~/modules/fuzzyMatchLogic/postFiltration'
+
+describe('isTokensConsequent', () => {
+  it('in order', () => {
+    const actual = isTokensConsequent(['env', '3'], makeInputEntry('env-xxx-3'))
+    expect(actual).toBeTruthy()
+  })
+
+  it('reversed', () => {
+    const actual = isTokensConsequent(['3', 'env'], makeInputEntry('env-xxx-3'))
+    expect(actual).toBeFalsy()
+  })
+})

package/src/__tests__/modules/fuzzyMatchLogic/testUtils.ts

@@ -0,0 +1,8 @@
+import type { FuzzySearchInputEntry } from '~/modules/fuzzyMatchLogic/types'
+
+export function makeInputEntry(displayName: string): FuzzySearchInputEntry {
+  return {
+    slug: displayName,
+    displayName,
+  }
+}

package/src/__tests__/modules/fuzzyMatchLogic/tokenize.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+import { tokenize } from '~/modules/fuzzyMatchLogic/tokenize'
+
+describe('tokenize', () => {
+  it('at the start start', () => {
+    const result = tokenize('# 12foo')
+    expect(result).toMatchInlineSnapshot(`
+        [
+          "12",
+          "foo",
+        ]
+      `)
+  })
+
+  it('Tokenize complex expression', () => {
+    const result = tokenize('123abc12 CamelABCCaseX foo-bar_baz,HelloWorld')
+    expect(result).toMatchInlineSnapshot(`
+        [
+          "123",
+          "abc",
+          "12",
+          "camel",
+          "abc",
+          "case",
+          "x",
+          "foo",
+          "bar",
+          "baz",
+          "hello",
+          "world",
+        ]
+      `)
+  })
+
+  it('in the end', () => {
+    const result = tokenize('12foo #')
+    expect(result).toMatchInlineSnapshot(`
+        [
+          "12",
+          "foo",
+        ]
+      `)
+  })
+
+  it('camelCase', () => {
+    const result = tokenize('camelCase')
+    expect(result).toMatchInlineSnapshot(`
+      [
+        "camel",
+        "case",
+      ]
+    `)
+  })
+
+  it('international', () => {
+    const result = tokenize('РусскийТекстΣ')
+    expect(result).toMatchInlineSnapshot(`
+        [
+          "русский",
+          "текст",
+          "σ",
+        ]
+      `)
+  })
+})

package/src/__tests__/modules/resouceJump/findBestMatchByUrl.test.ts

@@ -0,0 +1,234 @@
+import { objectify } from 'radashi'
+import { describe, expect, it } from 'vitest'
+import type {
+  AvailiabilityMatrixData as AvailabilityMatrixData,
+  AvailabilityVariant,
+  EhEnvIndexed,
+} from '@env-hopper/backend-core'
+import type { ResourceJumpItem } from '~/modules/resourceJump/types'
+import type { FindBestMatchingResourceJumpParams } from '~/modules/resourceJump/findBestMatchByUrl'
+import { findBestMatchByUrl } from '~/modules/resourceJump/findBestMatchByUrl'
+
+function makeEnvs(
+  envAsCommaSeparated: string | Array<string>,
+): Record<string, EhEnvIndexed> {
+  const envsArray = Array.isArray(envAsCommaSeparated)
+    ? envAsCommaSeparated
+    : envAsCommaSeparated.split(/\s*,\s*/)
+  return objectify(
+    envsArray,
+    (slug) => slug,
+    (slug) => ({ slug, displayName: slug }),
+  )
+}
+
+function makeResourceJumps(
+  resoucesAsCommaSeparated: string | Array<string>,
+): Record<string, ResourceJumpItem> {
+  const resourceArray = Array.isArray(resoucesAsCommaSeparated)
+    ? resoucesAsCommaSeparated
+    : resoucesAsCommaSeparated.split(/\s*,\s*/)
+  return objectify(
+    resourceArray,
+    (slug) => slug,
+    (slug) => ({ slug, type: 'resource' }),
+  )
+}
+
+function parseUrl(url: string): {
+  urlEnvSlug: string | undefined
+  urlAppSlug: string | undefined
+} {
+  // 3 options
+  // /env/{urlSlug}/app/{appSlug}
+  // /env/{urlSlug}
+  // /app/{appSlug}
+  const envMatch = url.match(/\/env\/([^/]+)/)
+  const appMatch = url.match(/\/app\/([^/]+)/)
+  return {
+    urlEnvSlug: envMatch ? envMatch[1] : undefined,
+    urlAppSlug: appMatch ? appMatch[1] : undefined,
+  }
+}
+
+describe('findBestMatchByUrl', () => {
+  const envs = makeEnvs(['test-env', 'staging-env', 'prod-env'])
+  const resourceJumps = makeResourceJumps(['test-app', 'appA', 'appB'])
+
+  async function run(
+    url: string,
+    override: Partial<FindBestMatchingResourceJumpParams> = {},
+  ): Promise<{
+    env: string | undefined
+    resourceJump: string | undefined
+  }> {
+    const { urlEnvSlug, urlAppSlug } = parseUrl(url)
+
+    const matrixStr = `
+        env/app    |  test-app  | appA | appB
+        test-env   |  v         |      | x
+        staging-env|            | x    | x
+        prod-env   |            |      | x
+
+        v - healthy & data & deployed
+        x - unhealthy & data & deployed
+        . - not deployed, no data, not health
+        `
+
+    const matrixData = parseMatrixStrToAvailabilityMatrix(matrixStr)
+
+    const actual = await findBestMatchByUrl({
+      urlEnvSlug: urlEnvSlug,
+      urlAppSlug: urlAppSlug,
+      envs: envs,
+      resourceJumps: resourceJumps,
+      getAvailabilityMatrix: async () => await Promise.resolve(matrixData),
+      getNameMigrations: async (r) => {
+        if (r.resourceSlug === 'old-app%2Fhome') {
+          return await Promise.resolve({
+            type: 'resourceRename',
+            oldSlug: r.resourceSlug,
+            targetSlug: 'test-app',
+          })
+        }
+        return await Promise.resolve(false)
+      },
+      getEnvHistory: async () =>
+        await Promise.resolve(
+          ['staging-env', 'prod-env', 'test-env'].map((envSlug, index) => ({
+            envSlug,
+            timestamp: 100 - index,
+          })),
+        ),
+      ...override,
+    })
+
+    return {
+      env: actual.env?.slug,
+      resourceJump: actual.resourceJump?.slug,
+    }
+  }
+
+  it('env-only simple', async () => {
+    expect(await run('/env/test-env')).toEqual({
+      env: 'test-env',
+      resourceJump: undefined,
+    })
+  })
+
+  it('empty url', async () => {
+    expect(await run('/')).toEqual({
+      env: undefined,
+      resourceJump: undefined,
+    })
+  })
+
+  it('app-only simple', async () => {
+    expect(
+      await run('/app/test-app', { getEnvHistory: () => Promise.resolve([]) }),
+    ).toEqual({
+      env: undefined,
+      resourceJump: 'test-app',
+    })
+  })
+
+  it('app & env simple', async () => {
+    expect(await run('/env/test-env/app/test-app')).toEqual({
+      env: 'test-env',
+      resourceJump: 'test-app',
+    })
+  })
+
+  it('migration: resourceName', async () => {
+    expect(await run('/env/test-env/app/old-app%2Fhome')).toEqual({
+      env: 'test-env',
+      resourceJump: 'test-app',
+    })
+  })
+
+  it('auto selection: env', async () => {
+    expect(await run('/app/test-app')).toEqual({
+      env: 'test-env',
+      resourceJump: 'test-app',
+    })
+  })
+
+  it('combo: auto selection + migration', async () => {
+    expect(await run('/app/old-app%2Fhome')).toEqual({
+      env: 'test-env',
+      resourceJump: 'test-app',
+    })
+  })
+})
+
+function parseMatrixStrToAvailabilityMatrix(
+  matrixStr: string,
+): AvailabilityMatrixData {
+  const lines = matrixStr
+    .split('\n')
+    .map((l) => l.trim())
+    .filter((l) => l.includes('|')) // only keep lines with matrix data
+
+  if (lines.length === 0) {
+    return {
+      envSlugs: [],
+      resourceJumpSlugs: [],
+      availabilityVariants: [],
+      matrix: [],
+    }
+  }
+
+  // --- Parse header row ---
+  const headerParts = lines[0]!.split('|').map((s) => s.trim())
+  const resourceJumpSlugs = headerParts.slice(1)
+
+  // --- Parse rows ---
+  const envSlugs: Array<string> = []
+  const matrix: Array<Array<number>> = []
+  const variants: Array<AvailabilityVariant> = []
+  const variantMap = new Map<string, number>() // maps symbol → variant index
+
+  function registerVariant(symbol: string): number {
+    if (!variantMap.has(symbol)) {
+      let variant: AvailabilityVariant
+      if (symbol === 'v') {
+        variant = { isDeployed: true, isHealthy: true, hasData: true }
+      } else if (symbol === 'x') {
+        variant = { isDeployed: true, isHealthy: false, hasData: true }
+      } else if (symbol === '.') {
+        variant = { isDeployed: false, isHealthy: false, hasData: false }
+      } else if (symbol === '' || symbol === ' ') {
+        // treat empty cell as no deployment
+        variant = { isDeployed: false, isHealthy: false, hasData: false }
+        symbol = '.'
+      } else {
+        throw new Error(`Unknown symbol '${symbol}'`)
+      }
+      variantMap.set(symbol, variants.length)
+      variants.push(variant)
+    }
+    return variantMap.get(symbol)!
+  }
+
+  for (const line of lines.slice(1)) {
+    const parts = line.split('|').map((s) => s.trim())
+    const env = parts[0]!
+    envSlugs.push(env)
+
+    const row: Array<number> = []
+    for (let j = 1; j < parts.length; j++) {
+      const cell = parts[j]
+      const symbol = cell || '.' // normalize empty → "."
+      const idx = registerVariant(symbol)
+      row.push(idx)
+    }
+    matrix.push(row)
+  }
+
+  return {
+    envSlugs,
+    resourceJumpSlugs,
+    availabilityVariants: variants,
+    matrix,
+  }
+}

package/src/__tests__/util/availabilityMatrixUtils.test.ts

@@ -0,0 +1,61 @@
+import { expect, it } from 'vitest'
+import type { AvailabilityVariant } from '@env-hopper/backend-core'
+import { findAvailableResources } from '~/util/availabilityMatrixUtils'
+
+const variantHealthy: AvailabilityVariant = {
+  isDeployed: true,
+  hasData: true,
+  isHealthy: true,
+}
+const variantMissing: AvailabilityVariant = {
+  isDeployed: false,
+  hasData: false,
+  isHealthy: false,
+}
+
+const matrixData = {
+  envSlugs: ['env1', 'env2'],
+  resourceJumpSlugs: ['res1', 'res2'],
+  availabilityVariants: [variantHealthy, variantMissing],
+  matrix: [
+    [0, 1],
+    [1, 0],
+  ],
+}
+it('finds available resources by envSlug', () => {
+  const result = findAvailableResources({
+    envSlug: 'env1',
+    availabilityMatrix: matrixData,
+  })
+  expect(result).toEqual([
+    {
+      envSlug: 'env1',
+      resourceJumpSlug: 'res1',
+      availabilityVariant: variantHealthy,
+    },
+    {
+      envSlug: 'env1',
+      resourceJumpSlug: 'res2',
+      availabilityVariant: variantMissing,
+    },
+  ])
+})
+
+it('finds available resources by resourceJumpSlug', () => {
+  const result = findAvailableResources({
+    resourceJumpSlug: 'res1',
+    availabilityMatrix: matrixData,
+  })
+  expect(result).toEqual([
+    {
+      envSlug: 'env1',
+      resourceJumpSlug: 'res1',
+      availabilityVariant: variantHealthy,
+    },
+    {
+      envSlug: 'env2',
+      resourceJumpSlug: 'res1',
+      availabilityVariant: variantMissing,
+    },
+  ])
+})

package/src/api/ApiQueryMagazine.ts

@@ -0,0 +1,15 @@
+import { queryOptions } from '@tanstack/react-query'
+import { indexDataFetcher } from './unsorted/indexDataFetcher'
+import type { IndexDataFetcherParams } from './unsorted/indexDataFetcher'
+import type { BootstrapConfigData } from '@env-hopper/backend-core'
+
+export class ApiQueryMagazine {
+  static getConfig(params: IndexDataFetcherParams) {
+    const queryFn = indexDataFetcher(params)
+    return queryOptions<BootstrapConfigData, Error>({
+      queryKey: ['config'],
+      queryFn,
+      staleTime: 0,
+    })
+  }
+}

package/src/api/data/useQueryBootstrapConfig.ts

@@ -0,0 +1,17 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { ApiQueryMagazine } from '../ApiQueryMagazine'
+import type { QueryKey } from '@tanstack/react-query'
+import { useTRPCClient } from '~/api/infra/trpc'
+import { useDb } from '~/userDb/DbContext'
+
+export const shouldPersist = (key: QueryKey) =>
+  Array.isArray(key) && key[0] === 'envs'
+
+export function useQueryBootstrapConfig() {
+  // const trpc = useTRPC();
+  const trpcClient = useTRPCClient()
+  const queryClient = useQueryClient()
+  const db = useDb()
+
+  return useQuery(ApiQueryMagazine.getConfig({ trpcClient, queryClient, db }))
+}