@env-hopper/frontend-core 2.0.1-alpha

package/src/userDb/DbContext.tsx

@@ -0,0 +1,22 @@
+import { createContext, use } from 'react'
+import type { ReactNode } from 'react'
+import type { EhDb } from './EhDb'
+
+const DbContext = createContext<EhDb | undefined>(undefined)
+
+interface DbProviderProps {
+  children: ReactNode
+  db: EhDb
+}
+
+export function DbProvider({ children, db }: DbProviderProps) {
+  return <DbContext value={db}>{children}</DbContext>
+}
+
+export function useDb(): EhDb {
+  const context = use(DbContext)
+  if (context === undefined) {
+    throw new Error('useDb must be used within a DbProvider')
+  }
+  return context
+}

package/src/userDb/EhDb.ts

@@ -0,0 +1,22 @@
+import Dexie from 'dexie'
+import type { Table } from 'dexie'
+import type { BootstrapConfigData } from '@env-hopper/backend-core'
+import type { EnvironmentHistoryItem } from '~/modules/environment/types'
+
+export class EhDb extends Dexie {
+  bootstrap!: Table<BootstrapConfigData>
+  environmentHistory!: Table<EnvironmentHistoryItem>
+
+  constructor() {
+    super('envhopper')
+    this.version(2).stores({
+      bootstrap: '',
+      environmentHistory: '',
+    })
+  }
+}
+
+export enum dbCacheDbKeys {
+  Bootstrap = 'bootstrap',
+  EnvironmentHistory = 'environmentHistory',
+}

package/src/util/availabilityMatrixUtils.ts

@@ -0,0 +1,80 @@
+import type {
+  AvailabilityVariant,
+  AvailiabilityMatrixData,
+} from '@env-hopper/backend-core'
+
+export interface AvailabilitySearchParams {
+  envSlug?: string
+  resourceJumpSlug?: string
+  availabilityMatrix: AvailiabilityMatrixData
+}
+
+export interface AvailabilitySlugPair {
+  envSlug: string
+  resourceJumpSlug: string
+  availabilityVariant: AvailabilityVariant
+}
+
+export function findAvailableResources({
+  resourceJumpSlug,
+  envSlug,
+  availabilityMatrix,
+}: AvailabilitySearchParams): Array<AvailabilitySlugPair> {
+  const { availabilityVariants, envSlugs, matrix, resourceJumpSlugs } =
+    availabilityMatrix
+
+  let pairs: Array<AvailabilitySlugPair> = []
+
+  if (envSlug !== undefined) {
+    const envIdx = envSlugs.findIndex((slug) => slug === envSlug)
+    if (envIdx !== -1) {
+      pairs =
+        matrix[envIdx]?.flatMap((variantIdx, resourceIdx) => {
+          const resourceJumpSlugFound = resourceJumpSlugs[resourceIdx]
+          const availabilityVariant = availabilityVariants[variantIdx]
+          if (
+            resourceJumpSlugFound === undefined ||
+            availabilityVariant === undefined
+          ) {
+            return []
+          }
+          return [
+            {
+              envSlug,
+              resourceJumpSlug: resourceJumpSlugFound,
+              availabilityVariant,
+            },
+          ]
+        }) || []
+    }
+    if (resourceJumpSlug !== undefined) {
+      pairs = pairs.filter((pair) => pair.resourceJumpSlug === resourceJumpSlug)
+    }
+  } else if (resourceJumpSlug !== undefined) {
+    const resourceIdx = resourceJumpSlugs.findIndex(
+      (resource) => resource === resourceJumpSlug,
+    )
+    if (resourceIdx !== -1) {
+      pairs = matrix.flatMap((resourceJumps, envIdx) => {
+        const variantIdx = resourceJumps[resourceIdx]
+        const foundEnvSlug = envSlugs[envIdx]
+        const availabilityVariant =
+          variantIdx !== undefined
+            ? availabilityVariants[variantIdx]
+            : undefined
+
+        if (foundEnvSlug == null || availabilityVariant == null) {
+          return []
+        }
+        return [
+          {
+            envSlug: foundEnvSlug,
+            resourceJumpSlug,
+            availabilityVariant,
+          },
+        ]
+      })
+    }
+  }
+  return pairs
+}

package/src/util/createEhRouter.ts

@@ -0,0 +1,20 @@
+import { createRouter } from '@tanstack/react-router'
+import type { EhRouterInitParams } from '~/types/types'
+import { routeTree } from '~/routeTree.gen'
+
+export function createEhRouter({ context, history }: EhRouterInitParams) {
+  return createRouter({
+    routeTree,
+    context,
+    history,
+    // Since we're using React Query, we don't want loader calls to ever be stale
+    // This will ensure that the loader is always called when the route is preloaded or visited
+    defaultPreloadStaleTime: 0,
+  })
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof createEhRouter>
+  }
+}

package/src/util/highlightMatches.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+// Escape regex special characters
+function escapeRegex(str: string): string {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+export function highlightMatches(text: string, query: string): React.ReactNode {
+  if (!query) return text
+
+  const safeQuery = escapeRegex(query)
+  const regex = new RegExp(`(${safeQuery})`, 'gi')
+  const parts = text.split(regex)
+
+  return (
+    <>
+      {parts.map((part, idx) => {
+        const key = `${part}-${text.indexOf(part, idx)}`
+        return idx % 2 === 1 ? (
+          <span key={key} className="bg-highlight">
+            {part}
+          </span>
+        ) : (
+          <React.Fragment key={key}>{part}</React.Fragment>
+        )
+      })}
+    </>
+  )
+}

package/src/util/reactQueryUtils.ts

@@ -0,0 +1,12 @@
+import type { TRPCRouter } from '@env-hopper/backend-core'
+import type { TRPCClient } from '@trpc/client'
+import type { EhReactQueryMeta } from '~/types/tanstackQuery'
+
+export function getTrpcFromMeta(ctx: {
+  meta?: EhReactQueryMeta
+}): TRPCClient<TRPCRouter> {
+  if (!ctx.meta) {
+    throw new Error('Missing TRPC client in context of react-query')
+  }
+  return ctx.meta.trpcClient
+}

package/src/util/route-utils.ts

@@ -0,0 +1,71 @@
+import type { ToOptions } from '@tanstack/react-router'
+import type { EhUrlParams } from '~/types/ehTypes'
+
+export function escapeAppId(appId: string) {
+  return encodeURIComponent(appId.replace(/\/home$/, '').replace('/', '@'))
+}
+
+export function escapeSubValue(subValue: string) {
+  return encodeURIComponent(subValue)
+}
+
+export function escapeEnvId(envId: string) {
+  return encodeURIComponent(envId)
+}
+
+export function getEhToOptions({
+  appId,
+  envId,
+  subValue,
+}: EhUrlParams): ToOptions {
+  if (appId && envId && subValue) {
+    return {
+      from: '/',
+      to: '/env/$envSlug/app/$appSlug/sub/$subValue',
+      params: {
+        appSlug: escapeAppId(appId),
+        envSlug: escapeEnvId(envId),
+        subValue: escapeSubValue(subValue),
+      },
+    }
+  } else if (appId && envId) {
+    return {
+      from: '/',
+      to: '/env/$envSlug/app/$appSlug',
+      params: {
+        appSlug: escapeAppId(appId),
+        envSlug: escapeEnvId(envId),
+      },
+    }
+  } else if (appId && subValue) {
+    return {
+      from: '/',
+      to: '/app/$appSlug/sub/$subValue',
+      params: {
+        appSlug: escapeAppId(appId),
+        subValue: escapeSubValue(subValue),
+      },
+    }
+  } else if (appId) {
+    return {
+      from: '/',
+      to: '/app/$appSlug',
+      params: {
+        appSlug: escapeAppId(appId),
+      },
+    }
+  } else if (envId) {
+    return {
+      from: '/',
+      to: '/env/$envSlug',
+      params: {
+        envSlug: escapeEnvId(envId),
+      },
+    }
+  } else {
+    return {
+      from: '/',
+      to: '/',
+    }
+  }
+}