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

package/src/modules/resourceJump/ui/appCatalog/AppCatalogTable.tsx

@@ -0,0 +1,86 @@
+import type { ColumnDef } from '@tanstack/react-table'
+import {
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+} from '@tanstack/react-table'
+import { useMemo } from 'react'
+import type { ResourceJumpUI } from '~/modules/resourceJump/types'
+import { formatResourceTitle } from '~/modules/resourceJump/utils/helpers'
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '~/ui/table'
+import { getResourceJumpUrlPattern } from './appCatalogUtils'
+
+export interface AppCatalogTableProps {
+  rows: Array<ResourceJumpUI>
+  currentEnvSlug: string | undefined
+}
+
+export function AppCatalogTable({
+  rows,
+  currentEnvSlug,
+}: AppCatalogTableProps) {
+  const columns = useMemo<Array<ColumnDef<ResourceJumpUI>>>(
+    () => [
+      {
+        id: 'title',
+        header: 'ResourceJump Title',
+        cell: ({ row }) => formatResourceTitle(row.original),
+      },
+      {
+        id: 'urlPattern',
+        header: 'URL pattern',
+        cell: ({ row }) =>
+          getResourceJumpUrlPattern(row.original, currentEnvSlug),
+      },
+    ],
+    [currentEnvSlug],
+  )
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return (
+    <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>
+  )
+}

package/src/modules/resourceJump/ui/appCatalog/appCatalogUtils.ts

@@ -0,0 +1,12 @@
+import { resolveTemplate } from '@env-hopper/shared-core'
+import type { ResourceJumpUI } from '~/modules/resourceJump/types'
+
+export function getResourceJumpUrlPattern(
+  resourceJump: Pick<ResourceJumpUI, 'urlTemplate'>,
+  currentEnvSlug: string | undefined,
+): string {
+  if (!currentEnvSlug) {
+    return resourceJump.urlTemplate.default
+  }
+  return resolveTemplate(currentEnvSlug, resourceJump.urlTemplate)
+}

package/src/modules/resourceJump/ui/cmdk/AppAutocomplete.tsx

@@ -0,0 +1,231 @@
+import type { AutocompleteRootChangeEventDetails } from '@base-ui/react'
+import type { EnvBaseInfo, TRPCRouter } from '@env-hopper/backend-core'
+import type { QueryClient } from '@tanstack/react-query'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import type { TRPCClient } from '@trpc/client'
+import { LayoutGrid, LayoutGridIcon } from 'lucide-react'
+import { useCallback, useMemo, useRef, useState } from 'react'
+import { cn } from '~/lib/utils'
+import {
+    fuzzySearch,
+    makeFuzzySearchIndex,
+} from '~/modules/fuzzyMatchLogic/autoCompleteFilter'
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import { highlightText } from '~/modules/resourceJump/ui/cmdk/highlightText'
+import { formatResourceTitle } from '~/modules/resourceJump/utils/helpers'
+import {
+    Autocomplete,
+    AutocompleteClear,
+    AutocompleteEmpty,
+    AutocompleteInput,
+    AutocompleteItem,
+    AutocompleteList,
+    AutocompletePopup,
+    AutocompleteTrigger,
+    AutocompleteValue,
+} from '~/ui/autocomplete'
+import { InputGroupAddon } from '~/ui/input-group'
+import type { ResourceJumpLoaderReturn } from '../../types'
+
+export interface ResourceJumpLayoutProps {
+  children: React.ReactNode
+  loaderData: ResourceJumpLoaderReturn
+  queryClient: QueryClient
+  trpcClient: TRPCClient<TRPCRouter>
+}
+
+function selectAll(e: React.FocusEvent<HTMLInputElement>) {
+  e.target.select()
+}
+
+export function AppAutoComplete() {
+  const { currentResourceJump, resourceJumps, setCurrentResourceJumpSlug } =
+    useResourceJumpContext()
+  // const { environments, currentResourceJump, setcurrentResourceJump } = useEnvironmentContext()
+  const [searchValue, setSearchValue] = useState(
+    currentResourceJump?.slug ?? '',
+  )
+  const searchIndex = useMemo(() => {
+    return makeFuzzySearchIndex({
+      entries: resourceJumps,
+    })
+  }, [resourceJumps])
+
+  // const favoriteEnvs = useEnvStatistics();
+
+  const [isPrestine, setPrestine] = useState(true)
+
+  const filteredItems = useMemo(() => {
+    // console.log({ isPrestine, searchValue, currentResourceJump: currentResourceJump?.displayName });
+
+    const searchBy =
+      isPrestine && currentResourceJump?.displayName === searchValue
+        ? ''
+        : searchValue
+    return fuzzySearch(searchBy, {
+      index: searchIndex,
+      // freqGetter: (slug: string) => favoriteEnvs[slug] || 0,
+    }).map((r) => r.entry)
+  }, [isPrestine, currentResourceJump?.displayName, searchValue, searchIndex])
+
+  const onValueChange = useCallback(
+    (value: string, eventDetails: AutocompleteRootChangeEventDetails) => {
+      setSearchValue(value)
+      if (eventDetails.reason === 'input-change') {
+        setPrestine(false)
+      } else {
+        const maybeFound = resourceJumps.find(
+          (resJump) => resJump.displayName === value,
+        )
+        setCurrentResourceJumpSlug(maybeFound?.slug)
+      }
+    },
+    [resourceJumps, setCurrentResourceJumpSlug],
+  )
+
+  const [open, setOpen] = useState(false)
+  const scrollElementRef = useRef<HTMLDivElement | null>(null)
+
+  const virtualizer = useVirtualizer({
+    enabled: open,
+    count: filteredItems.length,
+    getScrollElement: () => scrollElementRef.current,
+    estimateSize: () => 32,
+    overscan: 20,
+    paddingStart: 8,
+    paddingEnd: 8,
+    scrollPaddingEnd: 8,
+    scrollPaddingStart: 8,
+  })
+  const handleScrollElementRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      scrollElementRef.current = element
+      if (element) {
+        virtualizer.measure()
+      }
+    },
+    [virtualizer],
+  )
+
+  const totalSize = virtualizer.getTotalSize()
+
+  return (
+    <Autocomplete<EnvBaseInfo>
+      items={resourceJumps}
+      itemToStringValue={(v) => v.displayName}
+      filteredItems={filteredItems}
+      value={searchValue}
+      onValueChange={onValueChange}
+      openOnInputClick
+      highlightItemOnHover
+      autoHighlight
+      keepHighlight
+      limit={50}
+      onOpenChange={(o) => {
+        setPrestine(true)
+        setOpen(o)
+      }}
+      open={open}
+      onItemHighlighted={(item, { reason, index }) => {
+        if (!item) {
+          return
+        }
+
+        const isStart = index === 0
+        const isEnd = index === filteredItems.length - 1
+        const shouldScroll =
+          reason === 'none' || (reason === 'keyboard' && (isStart || isEnd))
+        if (shouldScroll) {
+          queueMicrotask(() => {
+            virtualizer.scrollToIndex(index, { align: isEnd ? 'start' : 'end' })
+          })
+        }
+      }}
+    >
+      <label>
+        Application
+        <AutocompleteInput
+          placeholder="Select Application..."
+          propsGroup={{ className: 'border-eh-app-border' }}
+          onFocus={selectAll}
+        >
+          <InputGroupAddon>
+            <LayoutGridIcon className="stroke-eh-app-border" />
+          </InputGroupAddon>
+          <AutocompleteClear />
+          <AutocompleteTrigger />
+        </AutocompleteInput>
+      </label>
+      <AutocompletePopup>
+        <AutocompleteEmpty>
+          {' '}
+          No results found for "{<AutocompleteValue />}"
+        </AutocompleteEmpty>
+        <AutocompleteList>
+          {filteredItems.length > 0 && (
+            <div
+              role="presentation"
+              ref={handleScrollElementRef}
+              style={
+                { '--total-size': `${totalSize}px` } as React.CSSProperties
+              }
+              className="box-border overflow-auto overscroll-contain scroll-py-2 h-[min(22rem,var(--total-size))] max-h-(--available-height)"
+            >
+              <div
+                role="presentation"
+                style={{ height: totalSize }}
+                className="w-full relative"
+              >
+                {virtualizer.getVirtualItems().map((virtualItem) => {
+                  const item = filteredItems[virtualItem.index]
+                  if (!item) {
+                    return null
+                  }
+
+                  const maybeFound = resourceJumps.find(
+                    (resJump) => resJump.slug === item.slug,
+                  )
+
+                  return (
+                    <AutocompleteItem
+                      key={virtualItem.key}
+                      index={virtualItem.index}
+                      data-index={virtualItem.index}
+                      ref={virtualizer.measureElement}
+                      value={item}
+                      aria-setsize={filteredItems.length}
+                      aria-posinset={virtualItem.index + 1}
+                      style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                        height: virtualItem.size,
+                        transform: `translateY(${virtualItem.start}px)`,
+                      }}
+                    >
+                      <div className="flex gap-2">
+                        <div>
+                          <LayoutGrid
+                            className={cn('w-4', {
+                              'stroke-eh-app-foreground':
+                                item.slug === currentResourceJump?.slug,
+                            })}
+                          />
+                        </div>
+                        {highlightText(
+                          formatResourceTitle(maybeFound),
+                          searchValue,
+                        )}
+                      </div>
+                    </AutocompleteItem>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+        </AutocompleteList>
+      </AutocompletePopup>
+    </Autocomplete>
+  )
+}

package/src/modules/resourceJump/ui/cmdk/CmdKQuickSearchDialog.scss

@@ -0,0 +1,197 @@
+.framer {
+  // height: 100%;
+
+  [cmdk-root] {
+    height: 500px;
+    display: flex;
+    flex-direction: column;
+    // height: 100%;
+    // width: 100%;
+    padding: 8px;
+    background: #ffffff;
+    border-radius: 16px;
+    // overflow: auto;
+    font-family: var(--font-sans);
+    border: 1px solid var(--gray6);
+    box-shadow: var(--cmdk-shadow);
+    outline: none;
+
+    .dark & {
+      background: var(--gray2);
+    }
+  }
+
+  [cmdk-framer-header] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 48px;
+    padding: 0 8px;
+    border-bottom: 1px solid var(--gray5);
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+      color: var(--gray9);
+      transform: translateY(1px);
+    }
+  }
+
+  [cmdk-list] {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    // overflow: auto;
+    // height: 100%;
+  }
+
+  [cmdk-list-sizer] {
+    flex: 1;
+    min-height: 0;
+  }
+
+  [cmdk-input] {
+    font-family: var(--font-sans);
+    border: none;
+    width: 100%;
+    font-size: 16px;
+    outline: none;
+    background: var(--bg);
+    color: var(--gray12);
+
+    &::placeholder {
+      color: var(--gray9);
+    }
+  }
+
+  [cmdk-item] {
+    content-visibility: auto;
+
+    cursor: pointer;
+    border-radius: 12px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    color: var(--gray12);
+    padding: 8px 8px;
+    margin-right: 8px;
+    font-weight: 500;
+    transition: all 150ms ease;
+    transition-property: none;
+
+    &[data-selected='true'] {
+      background: var(--sidebar-accent);
+      color: var(--accent) [cmdk-framer-item-subtitle] {
+        color: var(--accent);
+      }
+    }
+
+    & + [cmdk-item] {
+      margin-top: 4px;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      color: #ffffff;
+    }
+  }
+
+  [cmdk-framer-icon-wrapper] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    height: 32px;
+    border-radius: 8px;
+  }
+
+  [cmdk-framer-icon-wrapper-type='application'] {
+    background: orange;
+  }
+  [cmdk-framer-icon-wrapper-type='environment'] {
+    background: #5448d2;
+  }
+
+  [cmdk-framer-item-meta] {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  [cmdk-framer-item-subtitle] {
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--muted-foreground);
+    visibility: hidden;
+  }
+
+  [cmdk-framer-items] {
+    min-height: 308px;
+    max-height: 100%;
+    display: flex;
+  }
+
+  [cmdk-framer-left] {
+    overflow: auto;
+    scrollbar-gutter: stable;
+    flex: 0 0 300px;
+  }
+
+  [cmdk-framer-right] {
+    display: flex;
+    align-items: start;
+    height: 100%;
+    // scrollbar-gutter: stable;
+    overflow: auto;
+    // justify-content: center;
+    border-radius: 8px;
+    margin-left: 8px;
+    flex: 1 1 auto;
+  }
+
+  [cmdk-framer-separator] {
+    width: 1px;
+    border: 0;
+    margin-right: 8px;
+    background: var(--gray6);
+  }
+
+  [cmdk-separator] {
+    height: 1px;
+    width: 100%;
+    background: var(--gray5);
+    margin: 4px 0;
+  }
+
+  [cmdk-group-heading] {
+    user-select: none;
+    font-size: 12px;
+    color: var(--gray11);
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  [cmdk-empty] {
+    font-size: 14px;
+    padding: 32px;
+    white-space: pre-wrap;
+    color: var(--gray11);
+  }
+}
+
+@media (max-width: 640px) {
+  .framer {
+    [cmdk-framer-icon-wrapper] {
+    }
+
+    [cmdk-framer-item-subtitle] {
+      display: none;
+    }
+  }
+}