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

package/src/modules/environment/ui/EhEnvSelector.tsx

@@ -1,191 +0,0 @@
-import { Popover, PopoverContent } from '@radix-ui/react-popover'
-import { useCombobox } from 'downshift'
-import { Edit3Icon, XIcon } from 'lucide-react'
-import { listify, unique } from 'radashi'
-import React, { useEffect, useMemo } from 'react'
-import { EhBaseSelectorRoot } from '../../../ui/components/commandInput/EhBaseSelector'
-import { PopoverTrigger } from '~/components/ui/popover'
-import { useBootstrapConfig } from '~/modules/config/BootstrapConfigContext'
-import { cn } from '~/lib/utils'
-import { useEnvironmentContext } from '~/modules/environment/EnvironmentContext'
-import {
-  fuzzySearch,
-  makeFuzzySearchIndex,
-} from '~/modules/fuzzyMatchLogic/autoCompleteFilter'
-
-interface EhEnvSelectorProps {
-  className?: string
-}
-
-export interface EhEnvSelectorItem {
-  slug: string
-  displayName: string
-}
-
-export function EhEnvSelector({ className = '' }: EhEnvSelectorProps) {
-  const { envs } = useBootstrapConfig()
-  const { currentEnv, setCurrentEnv } = useEnvironmentContext()
-
-  const allItems = useMemo(
-    () =>
-      listify(envs, (_, e) => {
-        return {
-          slug: e.slug,
-          displayName: e.displayName,
-        }
-      }),
-    [envs],
-  )
-
-  const searchIndex = useMemo(() => {
-    return makeFuzzySearchIndex({
-      entries: allItems,
-    })
-  }, [allItems])
-
-  const [displayedItems, setDisplayedItems] =
-    React.useState<Array<EhEnvSelectorItem>>(allItems)
-
-  const envFilter = (needle: string) => {
-    if (needle.trim() === '') {
-      return allItems
-    }
-    const newLocal = fuzzySearch(needle, {
-      index: searchIndex,
-    })
-    console.log(needle, newLocal)
-
-    return newLocal.map((e) => e.entry)
-  }
-
-  const {
-    isOpen: comboIsOpen,
-    getLabelProps,
-    getMenuProps,
-    getInputProps,
-    getToggleButtonProps,
-    highlightedIndex,
-    getItemProps,
-    selectItem,
-    inputValue: comboInputValue,
-    setInputValue,
-  } = useCombobox<EhEnvSelectorItem>({
-    onInputValueChange({
-      inputValue: changedInputValue,
-      isOpen: changedIsOpen,
-    }) {
-      if (changedIsOpen) {
-        const matchedIds = unique(envFilter(changedInputValue))
-        setDisplayedItems(matchedIds)
-      }
-    },
-    onSelectedItemChange({ selectedItem: changedSelectedItem }) {
-      setCurrentEnv(changedSelectedItem?.slug)
-    },
-    // selectedItem,
-    items: displayedItems,
-    itemToString(item) {
-      return (item && item.displayName) || ''
-    },
-  })
-
-  useEffect(() => {
-    if (currentEnv) {
-      const f = allItems.find((e) => e.slug === currentEnv.slug)
-      if (f) {
-        selectItem(f)
-      }
-    }
-  }, [allItems, currentEnv, selectItem])
-
-  return (
-    <EhBaseSelectorRoot className={className}>
-      <Popover open={comboIsOpen}>
-        <PopoverTrigger asChild>
-          <div className="relative group hover:cursor-pointer w-full">
-            <input
-              className={cn(
-                'text-xl h-14 w-full rounded-md border border-input bg-background px-4 py-4 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',
-                'pr-12 hover:cursor-pointer duration-300',
-              )}
-              {...getInputProps({
-                onMouseUp: (e) => {
-                  const userHasSelectedSomeText =
-                    e.currentTarget.selectionStart !==
-                    e.currentTarget.selectionEnd
-                  if (!userHasSelectedSomeText) {
-                    // setInputValue('asdads')
-                    e.currentTarget.select()
-                  }
-                },
-                onKeyUp: (e) => {
-                  if (e.key !== 'Enter') {
-                    // console.log(e.target.value)
-                    // setLastUsersInputText(e.target.value)
-                  }
-                },
-              })}
-            />
-            {comboInputValue.length ? (
-              <XIcon
-                className="absolute right-5 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={() => setInputValue('')}
-              />
-            ) : (
-              <Edit3Icon
-                {...getToggleButtonProps()}
-                className="absolute right-5 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"
-              />
-            )}
-
-            <label
-              className={cn(
-                'absolute text-sm text-secondary-foreground/50',
-                'left-2 -top-0.5 -translate-y-1/2 text-muted-foreground bg-background rounded-2xl px-1',
-              )}
-              {...getLabelProps()}
-            >
-              Environment
-            </label>
-          </div>
-        </PopoverTrigger>
-
-        <PopoverContent
-          className={cn(
-            'w-[var(--radix-popover-trigger-width)] max-h-[var(--radix-popover-content-available-height)] bg-popover text-popover-foreground z-50 origin-(--radix-popover-content-transform-origin) rounded-b-md border shadow-md outline-hidden',
-            { hidden: !comboIsOpen },
-          )}
-          onOpenAutoFocus={(e) => e.preventDefault()}
-          forceMount
-        >
-          <div {...getMenuProps()}>
-            {displayedItems.map((item, index) => (
-              <div
-                key={item.slug}
-                className={cn(
-                  'cursor-pointer text-secondary-foreground px-3 py-3 rounded-md',
-                  {
-                    // 'bg-secondary/40': comboSelectedItem?.slug === item.slug,
-                    'bg-primary/40': highlightedIndex === index,
-                  },
-                )}
-                {...getItemProps({
-                  item,
-                })}
-              >
-                {item.displayName}
-              </div>
-            ))}
-            {displayedItems.length === 0 && (
-              <div className="text-secondary-foreground/50">
-                '{comboInputValue}' not found. Try a different search.
-              </div>
-            )}
-          </div>
-        </PopoverContent>
-        {/* </PopoverAnchor> */}
-      </Popover>
-    </EhBaseSelectorRoot>
-  )
-}

package/src/modules/resourceJump/ApiQueryMagazineResourceJump.ts

@@ -1,31 +0,0 @@
-import { queryOptions } from '@tanstack/react-query'
-import type {
-  AvailiabilityMatrixData,
-  RenameRule,
-  RenameRuleParams,
-  ResourceJumpsData,
-} from '@env-hopper/backend-core'
-import { getTrpcFromMeta } from '~/util/reactQueryUtils'
-
-export class ApiQueryMagazineResouceJump {
-  static getNameMigration(params: RenameRuleParams) {
-    return queryOptions<RenameRule | false, Error>({
-      queryKey: ['nameMigrations'],
-      queryFn: (ctx) => getTrpcFromMeta(ctx).tryFindRenameRule.query(params),
-    })
-  }
-
-  static getAvailabilityMatrix() {
-    return queryOptions<AvailiabilityMatrixData, Error>({
-      queryKey: ['availabilityMatrix'],
-      queryFn: (ctx) => getTrpcFromMeta(ctx).availabilityMatrix.query(),
-    })
-  }
-
-  static getResourceJumps() {
-    return queryOptions<ResourceJumpsData, Error>({
-      queryKey: ['resourceJumps'],
-      queryFn: (ctx) => getTrpcFromMeta(ctx).resourceJumps.query(),
-    })
-  }
-}

package/src/modules/resourceJump/ResourceJumpContext.tsx

@@ -1,142 +0,0 @@
-import { useNavigate } from '@tanstack/react-router'
-import {
-  createContext,
-  use,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
-import { useEnvironmentContext } from '../environment/EnvironmentContext'
-import { usePluginManager } from '../pluginCore/PluginManagerContext'
-import { buildJumpUrl } from './buildJumpUrl'
-import type { EhUrlParams } from '~/types/ehTypes'
-import type { ReactNode } from 'react'
-import type { EnvSlug, JumpResouceSlug } from '@env-hopper/backend-core'
-import type { ResourceJumpItem, ResourceJumpLoaderReturn } from './types'
-import { getEhToOptions } from '~/util/route-utils'
-import { useBootstrapConfig } from '~/modules/config/BootstrapConfigContext'
-
-export interface ResourceJumpContextIface {
-  setCurrentResourceJumpSlug: (slug: JumpResouceSlug | undefined) => void
-  currentResourceJump: ResourceJumpItem | undefined
-  jumpResources: Array<ResourceJumpItem>
-  getJumpUrl: (
-    jumpResourceSlug: JumpResouceSlug | undefined,
-    envSlug: EnvSlug | undefined,
-  ) => string
-}
-
-const ResourceJumpContext = createContext<ResourceJumpContextIface | undefined>(
-  undefined,
-)
-
-interface ResouceJumpProviderProps {
-  children: ReactNode
-  initialJumpLinkSlug?: string
-  resourceJumpLoader: ResourceJumpLoaderReturn
-}
-
-export function ResourceJumpProvider({
-  children,
-  resourceJumpLoader,
-}: ResouceJumpProviderProps) {
-  const { autocompleteFactoryItems } = usePluginManager()
-  const indexData = useBootstrapConfig()
-  const { currentEnv } = useEnvironmentContext()
-  const navigate = useNavigate()
-  const [currentResourceJumpSlug, setCurrentResourceJumpSlug] = useState<
-    string | undefined
-  >(resourceJumpLoader.resourceSlug)
-
-  const [jumpResources, setJumpResources] = useState<Array<ResourceJumpItem>>(
-    () =>
-      autocompleteFactoryItems({
-        bootstrapConfig: indexData,
-      }),
-  )
-
-  // const [initialEnvAppSubBased] = useState(() => {
-  //   return parseUrlParams({
-  //     rawUrlParams: urlParams,
-  //     config: {
-  //       envs: indexData.envs,
-  //       apps: indexData.apps,
-  //     },
-  //     lastUsedAppSlug: undefined,
-  //     lastUsedEnvSlug: undefined,
-  //   })
-  // })
-
-  const fixUrlBasedOnSelection = useCallback(
-    async (state: EhUrlParams, replace = false) => {
-      await navigate({
-        ...getEhToOptions(state),
-        replace,
-      })
-    },
-    [navigate],
-  )
-
-  useEffect(() => {
-    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
-    setJumpResources(autocompleteFactoryItems({ bootstrapConfig: indexData }))
-  }, [indexData, autocompleteFactoryItems])
-
-  const currentResourceJump = useMemo(() => {
-    return jumpResources.find((item) => item.slug === currentResourceJumpSlug)
-  }, [currentResourceJumpSlug, jumpResources])
-
-  useEffect(() => {
-    if (
-      resourceJumpLoader.envSlug !== currentEnv?.slug ||
-      resourceJumpLoader.resourceSlug !== currentResourceJump?.slug
-    ) {
-      void fixUrlBasedOnSelection(
-        { envId: currentEnv?.slug, appId: currentResourceJump?.slug },
-        true,
-      )
-    }
-  }, [
-    currentResourceJump,
-    currentEnv,
-    resourceJumpLoader,
-    fixUrlBasedOnSelection,
-  ])
-
-  const getJumpUrl = useCallback(
-    (
-      jumpResourceSlug: JumpResouceSlug | undefined,
-      envSlug: EnvSlug | undefined,
-    ) => {
-      return buildJumpUrl(
-        jumpResourceSlug,
-        envSlug,
-        resourceJumpLoader.resourceJumps,
-      )
-    },
-    [resourceJumpLoader],
-  )
-
-  const value: ResourceJumpContextIface = useMemo(
-    () => ({
-      currentResourceJump,
-      setCurrentResourceJumpSlug,
-      jumpResources,
-      getJumpUrl,
-    }),
-    [currentResourceJump, jumpResources, getJumpUrl],
-  )
-
-  return <ResourceJumpContext value={value}>{children}</ResourceJumpContext>
-}
-
-export function useResourceJumpContext(): ResourceJumpContextIface {
-  const context = use(ResourceJumpContext)
-  if (context === undefined) {
-    throw new Error(
-      'useResourceJumpContext must be used within an ResourceJumpContext',
-    )
-  }
-  return context
-}

package/src/modules/resourceJump/buildJumpUrl.ts

@@ -1,40 +0,0 @@
-import type {
-  EnvSlug,
-  JumpResouceSlug,
-  ResourceJumpsData,
-} from '@env-hopper/backend-core'
-
-export function buildJumpUrl(
-  jumpResourceSlug: JumpResouceSlug | undefined,
-  envSlug: EnvSlug | undefined,
-  resourceJumps: ResourceJumpsData,
-): string {
-  const { baseResouceJumpUrls, resourceJumpsData, envData } = resourceJumps
-
-  const baseUrl = baseResouceJumpUrls[jumpResourceSlug || ''] || ''
-  let finalUrl = baseUrl
-  let prevUrl = ''
-
-  while (finalUrl !== prevUrl) {
-    prevUrl = finalUrl
-    finalUrl = finalUrl.replace(/{{(.+?)}}/g, function (match, contents) {
-      if (contents.startsWith('app.meta.')) {
-        const varName = contents.replace('app.meta.', '')
-        const r = resourceJumpsData[jumpResourceSlug || '']?.[varName]
-        if (r !== undefined) {
-          return r
-        }
-      }
-      if (contents.startsWith('env.meta.')) {
-        const varName = contents.replace('env.meta.', '')
-        const r = envData[envSlug || '']?.[varName]
-        if (r !== undefined) {
-          return r
-        }
-      }
-      return match
-    })
-  }
-
-  return finalUrl || `not found ${jumpResourceSlug}`
-}

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

@@ -1,259 +0,0 @@
-import { Popover, PopoverContent } from '@radix-ui/react-popover'
-import { useCombobox } from 'downshift'
-import { CornerDownRight, Edit3Icon, ExpandIcon, XIcon } from 'lucide-react'
-import { unique } from 'radashi'
-import React, { useEffect, useMemo } from 'react'
-import { EhBaseSelectorRoot } from '../../../ui/components/commandInput/EhBaseSelector'
-import { mapDisplayedItems } from '../helpers'
-import { useResourceJumpContext } from '../ResourceJumpContext'
-import type {
-  BaseAutoCompletableItem,
-  BaseAutoCompleteItemRender,
-} from '~/modules/pluginCore/types'
-import type {
-  AppAutoCompleteAmend,
-  AutoCompleteContext,
-} from '../../../ui/components/commandInput/types'
-import { Button } from '~/components/ui/button'
-import { PopoverTrigger } from '~/components/ui/popover'
-import { cn } from '~/lib/utils'
-import {
-  autocompleteFilter,
-  autocompleteToString,
-  isAutocompleteItem,
-} from '~/plugins/builtin/pageUrl/pageUrlAutoCompletePlugin'
-import { highlightMatches } from '~/util/highlightMatches'
-
-interface EhJumpResourceSelectorProps {
-  className?: string
-}
-
-export function EhJumpResourceSelector({
-  className = '',
-}: EhJumpResourceSelectorProps) {
-  const { jumpResources, currentResourceJump, setCurrentResourceJumpSlug } =
-    useResourceJumpContext()
-
-  const appFilter = (
-    needle: string,
-    allItems: Array<BaseAutoCompletableItem>,
-  ) => {
-    return autocompleteFilter(
-      allItems.filter((i) => isAutocompleteItem(i)),
-      needle,
-    )
-  }
-
-  const [displayedItems, setDisplayedItems] =
-    React.useState<Array<BaseAutoCompletableItem>>(jumpResources)
-
-  const {
-    isOpen: comboIsOpen,
-    getLabelProps,
-    getMenuProps,
-    getInputProps,
-    getToggleButtonProps,
-    highlightedIndex,
-    getItemProps,
-    selectItem,
-    selectedItem: comboSelectedItem,
-    inputValue: comboInputValue,
-    setInputValue,
-  } = useCombobox<BaseAutoCompletableItem>({
-    onInputValueChange({
-      inputValue: changedInputValue,
-      isOpen: changedIsOpen,
-    }) {
-      if (changedIsOpen) {
-        const matchedIds = unique(appFilter(changedInputValue, jumpResources))
-        setDisplayedItems(matchedIds)
-      }
-    },
-    onSelectedItemChange({ selectedItem: changedSelectedItem }) {
-      setCurrentResourceJumpSlug(changedSelectedItem?.slug)
-    },
-    // selectedItem,
-    items: displayedItems,
-    itemToString(item) {
-      if (isAutocompleteItem(item)) {
-        return autocompleteToString(item)
-      }
-      return 'n/a'
-    },
-  })
-
-  useEffect(() => {
-    if (currentResourceJump) {
-      const f = jumpResources.find((e) => e.slug === currentResourceJump.slug)
-      if (f) {
-        selectItem(f)
-      }
-    }
-  }, [currentResourceJump, jumpResources, selectItem])
-
-  const ctx = useMemo<AutoCompleteContext>(() => {
-    return {
-      searchString: comboInputValue,
-    }
-  }, [comboInputValue])
-
-  return (
-    <EhBaseSelectorRoot className={className}>
-      <Popover open={comboIsOpen}>
-        <PopoverTrigger asChild>
-          <div className="relative group hover:cursor-pointer w-full">
-            <input
-              className={cn(
-                'text-xl h-14 w-full rounded-md border border-input bg-background px-4 py-4 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',
-                'pr-12 hover:cursor-pointer',
-              )}
-              {...getInputProps({
-                onMouseUp: (e) => {
-                  const userHasSelectedSomeText =
-                    e.currentTarget.selectionStart !==
-                    e.currentTarget.selectionEnd
-                  if (!userHasSelectedSomeText) {
-                    // setInputValue('asdads')
-                    e.currentTarget.select()
-                  }
-                },
-                onKeyUp: (e) => {
-                  if (e.key !== 'Enter') {
-                    // console.log(e.target.value)
-                    // setLastUsersInputText(e.target.value)
-                  }
-                },
-              })}
-            />
-            {comboInputValue.length ? (
-              <XIcon
-                className="absolute right-5 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={() => setInputValue('')}
-              />
-            ) : (
-              <Edit3Icon
-                {...getToggleButtonProps()}
-                className="absolute right-5 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"
-              />
-            )}
-
-            <label
-              className={cn(
-                'absolute text-sm text-secondary-foreground/50',
-                'left-2 -top-0.5 -translate-y-1/2 text-muted-foreground bg-background rounded-2xl px-1',
-              )}
-              {...getLabelProps()}
-            >
-              Application
-            </label>
-          </div>
-        </PopoverTrigger>
-
-        <PopoverContent
-          className={cn(
-            'w-[var(--radix-popover-trigger-width)] max-h-[var(--radix-popover-content-available-height)] bg-popover text-popover-foreground z-50 origin-(--radix-popover-content-transform-origin) rounded-b-md border shadow-md outline-hidden',
-            { hidden: !comboIsOpen },
-          )}
-          onOpenAutoFocus={(e) => e.preventDefault()}
-          forceMount
-        >
-          <div {...getMenuProps()} className="">
-            {[...mapDisplayedItems(displayedItems)].map(
-              ({ item, itemRenderData, isChild }, index) => {
-                return (
-                  <DisplayItem
-                    key={item.slug}
-                    ctx={ctx}
-                    item={item}
-                    itemRenderData={itemRenderData}
-                    isChild={isChild}
-                    selected={comboSelectedItem?.slug === item.slug}
-                    highlighted={highlightedIndex === index}
-                    getItemProps={getItemProps}
-                  />
-                )
-              },
-            )}
-            {displayedItems.length === 0 && (
-              <div className="text-secondary-foreground/50">
-                '{comboInputValue}' not found. Try a different search.
-              </div>
-            )}
-          </div>
-          <div className="flex justify-end items-center p-1 bg-secondary/30 border-t">
-            <Button className="h-1" variant="outline" size={'sm'}>
-              All Apps (34) <ExpandIcon />
-            </Button>
-          </div>
-        </PopoverContent>
-        {/* </PopoverAnchor> */}
-      </Popover>
-    </EhBaseSelectorRoot>
-  )
-}
-
-export interface DisplayItemProps
-  extends React.ComponentPropsWithoutRef<'div'>,
-    AppAutoCompleteAmend {
-  item: BaseAutoCompletableItem
-  itemRenderData: BaseAutoCompleteItemRender
-  isChild?: boolean
-  selected: boolean
-  highlighted: boolean
-  getItemProps: (props: { item: BaseAutoCompletableItem }) => any
-  ctx: AutoCompleteContext
-}
-
-export function DisplayItem({
-  item,
-  itemRenderData,
-  selected,
-  isChild,
-  highlighted,
-  ctx,
-  getItemProps,
-  ...props
-}: DisplayItemProps) {
-  const { displayName, parentDisplayName, isDefaultGroupItem } = itemRenderData
-
-  const content = () => {
-    let finalStr = [parentDisplayName, isChild ? '-' : false, displayName]
-      .filter(Boolean)
-      .join(' / ')
-    if (isDefaultGroupItem && parentDisplayName) {
-      finalStr = parentDisplayName
-    }
-    if (isChild) {
-      return (
-        <div className="flex flex-row gap-1 items-center">
-          <div className="text-secondary-foreground/50 pl-2">
-            <CornerDownRight size={14} />
-          </div>
-          <div className="">
-            {highlightMatches(displayName, ctx.searchString)}
-          </div>
-        </div>
-      )
-    }
-
-    return highlightMatches(finalStr, ctx.searchString)
-  }
-
-  return (
-    <div
-      className={cn(
-        'cursor-pointer text-secondary-foreground px-4 py-2 rounded-md',
-        {
-          'bg-accent': highlighted,
-        },
-      )}
-      {...getItemProps({
-        item,
-      })}
-      {...props}
-    >
-      {content()}
-    </div>
-  )
-}