@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha-20260224145405

package/src/modules/appCatalog/ui/layout/AppCatalogLayout.tsx

@@ -0,0 +1,55 @@
+import type { TRPCRouter } from '@env-hopper/backend-core'
+import type { QueryClient } from '@tanstack/react-query'
+import type { TRPCClient } from '@trpc/client'
+import { HomeIcon } from 'lucide-react'
+import { AppCatalogProvider } from '~/modules/appCatalog/context/AppCatalogContext'
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbSeparator,
+} from '~/ui/breadcrumb'
+import { MainLayout } from '~/ui/layout/MainLayout'
+import { TopLevelProviders } from '~/ui/layout/TopLevelProviders'
+import { Link } from '~/ui/link'
+
+export interface AppCatalogLayoutProps {
+  children: React.ReactNode
+  queryClient: QueryClient
+  trpcClient: TRPCClient<TRPCRouter>
+}
+
+export function AppCatalogLayout({
+  children,
+  queryClient,
+  trpcClient,
+}: AppCatalogLayoutProps) {
+  return (
+    <TopLevelProviders queryClient={queryClient} trpcClient={trpcClient}>
+      <AppCatalogProvider>
+        <MainLayout>
+          <Breadcrumb className="pb-4">
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link to={'/'} className="flex items-center gap-1">
+                    <HomeIcon className="size-4" />
+                    <span className="sr-only">Home</span>
+                  </Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link to="/catalog/apps">App Catalog</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <div className="flex flex-1 w-full justify-center">{children}</div>
+        </MainLayout>
+      </AppCatalogProvider>
+    </TopLevelProviders>
+  )
+}

package/src/modules/appCatalog/ui/pages/AppCatalogPage.tsx

@@ -0,0 +1,99 @@
+import { useNavigate, useRouter, useSearch } from '@tanstack/react-router'
+import { useMemo, useState } from 'react'
+
+import type { AppForCatalog } from '@env-hopper/backend-core'
+import { useAppCatalogContext } from '../../context/AppCatalogContext'
+import { AppCatalogGrid } from '../grid/AppCatalogGrid'
+
+import { Input } from '~/ui/input'
+
+export function AppCatalogPage() {
+  const navigate = useNavigate()
+  const router = useRouter()
+  const search = useSearch({ strict: false })
+  const { apps, isLoadingApps, tagsDefinitions } = useAppCatalogContext()
+  const [searchValue, setSearchValue] = useState('')
+
+  const filterTag = search.filterTag
+  const selectedAppSlug = search.app
+
+  const filteredApps = useMemo(() => {
+    const normalizedSearchValue = searchValue.trim().toLowerCase()
+
+    return apps
+      .filter((app) => {
+        if (normalizedSearchValue === '') {
+          return true
+        }
+        const name = app.displayName.toLowerCase() || ''
+        const slug = app.slug.toLowerCase() || ''
+        const description = app.description?.toLowerCase() || ''
+        const tags = app.tags?.join(' ').toLowerCase() || ''
+
+        return (
+          name.includes(normalizedSearchValue) ||
+          slug.includes(normalizedSearchValue) ||
+          description.includes(normalizedSearchValue) ||
+          tags.includes(normalizedSearchValue)
+        )
+      })
+      .filter((app) => {
+        return (
+          filterTag === undefined ||
+          app.tags?.some((tag) => tag.toLowerCase() === filterTag.toLowerCase())
+        )
+      })
+  }, [apps, searchValue, filterTag])
+
+  const handleAppClick = (app: AppForCatalog) => {
+    const currentPath = router.state.location.pathname
+    navigate({ to: currentPath, search: { ...search, app: app.slug } })
+  }
+
+  const handleCloseDetails = () => {
+    const currentPath = router.state.location.pathname
+    const { app: _app, ...restSearch } = search
+    navigate({ to: currentPath, search: restSearch })
+  }
+
+  if (isLoadingApps) {
+    return <div className="py-6 text-muted-foreground">Loading…</div>
+  }
+
+  // Use first tag definition for grouping
+  const groupingDefinition = tagsDefinitions[0]
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="pb-4">
+        <div className="flex items-start justify-between gap-4 pb-4">
+          <div>
+            <div className="font-medium text-2xl">App Catalog</div>
+            <div className="text-sm text-muted-foreground">
+              {filteredApps.length} apps available
+            </div>
+          </div>
+        </div>
+
+        <div className="w-full">
+          <Input
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            placeholder="Search apps by name, description, or tags…"
+            aria-label="Search apps"
+          />
+        </div>
+      </div>
+
+      <div className="flex-1">
+        <AppCatalogGrid
+          apps={filteredApps}
+          selectedAppSlug={selectedAppSlug}
+          groupingDefinition={groupingDefinition}
+          onAppClick={handleAppClick}
+          onCloseDetails={handleCloseDetails}
+        />
+      </div>
+    </div>
+  )
+}

package/src/modules/approvalMethod/AccessRequestFormFields.tsx

@@ -0,0 +1,393 @@
+import { useQuery } from '@tanstack/react-query'
+import type { Control, FieldValues } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '~/ui/form'
+import { MarkdownEditor } from '~/ui/markdown-editor'
+import { EditableListField } from '~/ui/editable-list'
+import { LinkExternal } from '~/ui/linkExternal'
+import { Input } from '~/ui/input'
+import { Button } from '~/ui/button'
+import { ApiQueryMagazineApprovalMethod } from './api/ApiQueryMagazineApprovalMethod'
+
+interface AccessRequestFormFieldsProps {
+  control: Control<FieldValues>
+  approvalMethodId: string | undefined
+}
+
+export function AccessRequestFormFields({
+  control,
+  approvalMethodId,
+}: AccessRequestFormFieldsProps) {
+  const { data: method } = useQuery({
+    ...ApiQueryMagazineApprovalMethod.getById(approvalMethodId!),
+    enabled: !!approvalMethodId,
+  })
+
+  if (!approvalMethodId) {
+    return (
+      <div className="text-sm text-muted-foreground py-4">
+        Select an approval method to configure details
+      </div>
+    )
+  }
+
+  if (!method) {
+    return <div className="text-sm text-muted-foreground py-4">Loading...</div>
+  }
+
+  const methodConfig = method.config as
+    | Record<string, unknown>
+    | undefined
+    | null
+
+  return (
+    <div className="space-y-6">
+      {/* Service type: Show clickable URL if configured */}
+      {method.type === 'service' && methodConfig?.url ? (
+        <div className="p-4 border rounded-lg bg-muted/30">
+          <div className="text-sm font-medium mb-2">Service URL</div>
+          <LinkExternal href={methodConfig.url as string}>
+            {methodConfig.url as string}
+          </LinkExternal>
+        </div>
+      ) : null}
+
+      {/* Common Fields */}
+      <FormField
+        control={control}
+        name="accessRequest.comments"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Comments</FormLabel>
+            <FormControl>
+              <MarkdownEditor
+                value={field.value ?? ''}
+                onChange={field.onChange}
+                placeholder="General comments about access..."
+              />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={control}
+        name="accessRequest.requestPrompt"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Request Prompt</FormLabel>
+            <FormControl>
+              <MarkdownEditor
+                value={field.value ?? ''}
+                onChange={field.onChange}
+                placeholder="Instructions on how to request access..."
+              />
+            </FormControl>
+            <FormDescription>
+              Explain how users should request access to this app
+            </FormDescription>
+          </FormItem>
+        )}
+      />
+
+      {/* Roles List */}
+      <FormField
+        control={control}
+        name="accessRequest.roles"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Available Roles</FormLabel>
+            <EditableListField
+              value={field.value ?? []}
+              onChange={field.onChange}
+              columns={[
+                { accessorKey: 'name', header: 'Role Name' },
+                { accessorKey: 'description', header: 'Description' },
+              ]}
+              createEmpty={() => ({ name: '', description: '' })}
+              getItemKey={(_, i) => String(i)}
+              addButtonLabel="Add Role"
+              emptyMessage="No roles defined"
+              renderForm={({ item, onSave, onCancel }) => {
+                if (!item) return null
+                return (
+                  <RoleForm item={item} onSave={onSave} onCancel={onCancel} />
+                )
+              }}
+            />
+          </FormItem>
+        )}
+      />
+
+      {/* Approvers List */}
+      <FormField
+        control={control}
+        name="accessRequest.approvers"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Approvers</FormLabel>
+            <EditableListField
+              value={field.value ?? []}
+              onChange={field.onChange}
+              columns={[
+                { accessorKey: 'displayName', header: 'Name' },
+                { accessorKey: 'contact', header: 'Contact' },
+              ]}
+              createEmpty={() => ({ displayName: '', contact: '' })}
+              getItemKey={(_, i) => String(i)}
+              addButtonLabel="Add Approver"
+              emptyMessage="No approvers defined"
+              renderForm={({ item, onSave, onCancel }) => {
+                if (!item) return null
+                return (
+                  <ApproverForm
+                    item={item}
+                    onSave={onSave}
+                    onCancel={onCancel}
+                  />
+                )
+              }}
+            />
+            <FormDescription>
+              People who can approve access requests
+            </FormDescription>
+          </FormItem>
+        )}
+      />
+
+      {/* URLs List */}
+      <FormField
+        control={control}
+        name="accessRequest.urls"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Related URLs</FormLabel>
+            <EditableListField
+              value={field.value ?? []}
+              onChange={field.onChange}
+              columns={[
+                { accessorKey: 'label', header: 'Label' },
+                { accessorKey: 'url', header: 'URL' },
+              ]}
+              createEmpty={() => ({ label: '', url: '' })}
+              getItemKey={(_, i) => String(i)}
+              addButtonLabel="Add URL"
+              emptyMessage="No URLs defined"
+              renderForm={({ item, onSave, onCancel }) => {
+                if (!item) return null
+                return (
+                  <UrlForm item={item} onSave={onSave} onCancel={onCancel} />
+                )
+              }}
+            />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={control}
+        name="accessRequest.postApprovalInstructions"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Post-Approval Instructions</FormLabel>
+            <FormControl>
+              <MarkdownEditor
+                value={field.value ?? ''}
+                onChange={field.onChange}
+                placeholder="Steps to follow after approval is granted..."
+              />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+
+      {/* Person/Team specific: Who to reach out */}
+      {method.type === 'personTeam' && (
+        <FormField
+          control={control}
+          name="accessRequest.whoToReachOut"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Who to Reach Out</FormLabel>
+              <FormControl>
+                <MarkdownEditor
+                  value={field.value ?? ''}
+                  onChange={field.onChange}
+                  placeholder="Describe who to contact and how..."
+                />
+              </FormControl>
+              <FormDescription>
+                Specific instructions for contacting the person or team
+              </FormDescription>
+            </FormItem>
+          )}
+        />
+      )}
+    </div>
+  )
+}
+
+// Sub-forms for list editing
+
+function RoleForm({
+  item,
+  onSave,
+  onCancel,
+}: {
+  item: { name: string; description: string }
+  onSave: (item: { name: string; description: string }) => void
+  onCancel: () => void
+}) {
+  const form = useForm<{ name: string; description: string }>({
+    defaultValues: item,
+  })
+
+  return (
+    <form onSubmit={form.handleSubmit(onSave)} className="space-y-4">
+      <FormField
+        control={form.control as any}
+        name="name"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Role Name</FormLabel>
+            <FormControl>
+              <Input {...field} placeholder="e.g., Admin, Read-Only" />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control as any}
+        name="description"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Description</FormLabel>
+            <FormControl>
+              <Input {...field} placeholder="Brief description of the role" />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+      <div className="flex gap-2">
+        <Button type="submit" size="sm">
+          Save
+        </Button>
+        <Button type="button" variant="outline" size="sm" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+function ApproverForm({
+  item,
+  onSave,
+  onCancel,
+}: {
+  item: { displayName: string; contact: string }
+  onSave: (item: { displayName: string; contact: string }) => void
+  onCancel: () => void
+}) {
+  const form = useForm<{ displayName: string; contact: string }>({
+    defaultValues: item,
+  })
+
+  return (
+    <form onSubmit={form.handleSubmit(onSave)} className="space-y-4">
+      <FormField
+        control={form.control as any}
+        name="displayName"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Name</FormLabel>
+            <FormControl>
+              <Input {...field} placeholder="e.g., John Doe" />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control as any}
+        name="contact"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Contact</FormLabel>
+            <FormControl>
+              <Input {...field} placeholder="e.g., email, Slack handle" />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+      <div className="flex gap-2">
+        <Button type="submit" size="sm">
+          Save
+        </Button>
+        <Button type="button" variant="outline" size="sm" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+function UrlForm({
+  item,
+  onSave,
+  onCancel,
+}: {
+  item: { label: string; url: string }
+  onSave: (item: { label: string; url: string }) => void
+  onCancel: () => void
+}) {
+  const form = useForm<{ label: string; url: string }>({
+    defaultValues: item,
+  })
+
+  return (
+    <form onSubmit={form.handleSubmit(onSave)} className="space-y-4">
+      <FormField
+        control={form.control as any}
+        name="label"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Label</FormLabel>
+            <FormControl>
+              <Input {...field} placeholder="e.g., Documentation" />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control as any}
+        name="url"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>URL</FormLabel>
+            <FormControl>
+              <Input
+                {...field}
+                type="url"
+                placeholder="e.g., https://example.com"
+              />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+      <div className="flex gap-2">
+        <Button type="submit" size="sm">
+          Save
+        </Button>
+        <Button type="button" variant="outline" size="sm" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  )
+}