@igstack/app-catalog-frontend-core 0.6.4 → 0.7.0

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

@@ -0,0 +1,91 @@
+import { ExternalLink } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import { InputGroup, InputGroupInput } from '~/ui/input-group'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '~/ui/table'
+import { useAppCatalogContext } from '../../context/AppCatalogContext'
+
+/**
+ * Service Desks view (#9): a searchable table of all service-desk approval
+ * methods (type === 'service'), each with a link that opens its portal in a new
+ * tab. Data rides in on the existing app-catalog query (context.approvalMethods).
+ */
+export function ServiceDesksPage() {
+  const { approvalMethods } = useAppCatalogContext()
+  const [search, setSearch] = useState('')
+
+  const desks = useMemo(() => {
+    const services = approvalMethods.filter((m) => m.type === 'service')
+    const q = search.trim().toLowerCase()
+    const filtered = q
+      ? services.filter((m) => m.displayName.toLowerCase().includes(q))
+      : services
+    return [...filtered].sort((a, b) =>
+      a.displayName.localeCompare(b.displayName),
+    )
+  }, [approvalMethods, search])
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0 gap-4">
+      <InputGroup className="max-w-sm">
+        <InputGroupInput
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search service desks by name…"
+          aria-label="Search service desks"
+        />
+      </InputGroup>
+
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        {desks.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            No service desks found{search && ` for "${search}"`}.
+          </p>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Service Desk</TableHead>
+                <TableHead>Link</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {desks.map((desk) => {
+                const url = desk.config.url
+                return (
+                  <TableRow key={desk.slug}>
+                    <TableCell className="font-medium">
+                      {desk.displayName}
+                    </TableCell>
+                    <TableCell>
+                      {url ? (
+                        <a
+                          href={url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="inline-flex items-center gap-1 text-primary hover:underline"
+                          title={url}
+                        >
+                          Open
+                          <ExternalLink className="size-3" />
+                        </a>
+                      ) : (
+                        <span className="text-muted-foreground">—</span>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                )
+              })}
+            </TableBody>
+          </Table>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/routeTree.gen.ts

@@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as LayoutRouteImport } from './routes/_layout'
 import { Route as LayoutIndexRouteImport } from './routes/_layout/index'
 import { Route as AuthCallbackRouteImport } from './routes/auth.callback'
+import { Route as LayoutServiceDesksRouteImport } from './routes/_layout/service-desks'
 import { Route as LayoutLoginRouteImport } from './routes/_layout/login'
 import { Route as LayoutAppSlugRouteImport } from './routes/_layout/app.$slug'
 import { Route as LayoutCatalogAppsIndexRouteImport } from './routes/_layout/catalog.apps.index'
@@ -30,6 +31,11 @@ const AuthCallbackRoute = AuthCallbackRouteImport.update({
   path: '/auth/callback',
   getParentRoute: () => rootRouteImport,
 } as any)
+const LayoutServiceDesksRoute = LayoutServiceDesksRouteImport.update({
+  id: '/service-desks',
+  path: '/service-desks',
+  getParentRoute: () => LayoutRoute,
+} as any)
 const LayoutLoginRoute = LayoutLoginRouteImport.update({
   id: '/login',
   path: '/login',
@@ -49,12 +55,14 @@ const LayoutCatalogAppsIndexRoute = LayoutCatalogAppsIndexRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof LayoutIndexRoute
   '/login': typeof LayoutLoginRoute
+  '/service-desks': typeof LayoutServiceDesksRoute
   '/auth/callback': typeof AuthCallbackRoute
   '/app/$slug': typeof LayoutAppSlugRoute
   '/catalog/apps/': typeof LayoutCatalogAppsIndexRoute
 }
 export interface FileRoutesByTo {
   '/login': typeof LayoutLoginRoute
+  '/service-desks': typeof LayoutServiceDesksRoute
   '/auth/callback': typeof AuthCallbackRoute
   '/': typeof LayoutIndexRoute
   '/app/$slug': typeof LayoutAppSlugRoute
@@ -64,6 +72,7 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/_layout': typeof LayoutRouteWithChildren
   '/_layout/login': typeof LayoutLoginRoute
+  '/_layout/service-desks': typeof LayoutServiceDesksRoute
   '/auth/callback': typeof AuthCallbackRoute
   '/_layout/': typeof LayoutIndexRoute
   '/_layout/app/$slug': typeof LayoutAppSlugRoute
@@ -71,13 +80,26 @@ export interface FileRoutesById {
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/login' | '/auth/callback' | '/app/$slug' | '/catalog/apps/'
+  fullPaths:
+    | '/'
+    | '/login'
+    | '/service-desks'
+    | '/auth/callback'
+    | '/app/$slug'
+    | '/catalog/apps/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/login' | '/auth/callback' | '/' | '/app/$slug' | '/catalog/apps'
+  to:
+    | '/login'
+    | '/service-desks'
+    | '/auth/callback'
+    | '/'
+    | '/app/$slug'
+    | '/catalog/apps'
   id:
     | '__root__'
     | '/_layout'
     | '/_layout/login'
+    | '/_layout/service-desks'
     | '/auth/callback'
     | '/_layout/'
     | '/_layout/app/$slug'
@@ -112,6 +134,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthCallbackRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/_layout/service-desks': {
+      id: '/_layout/service-desks'
+      path: '/service-desks'
+      fullPath: '/service-desks'
+      preLoaderRoute: typeof LayoutServiceDesksRouteImport
+      parentRoute: typeof LayoutRoute
+    }
     '/_layout/login': {
       id: '/_layout/login'
       path: '/login'
@@ -138,6 +167,7 @@ declare module '@tanstack/react-router' {
 
 interface LayoutRouteChildren {
   LayoutLoginRoute: typeof LayoutLoginRoute
+  LayoutServiceDesksRoute: typeof LayoutServiceDesksRoute
   LayoutIndexRoute: typeof LayoutIndexRoute
   LayoutAppSlugRoute: typeof LayoutAppSlugRoute
   LayoutCatalogAppsIndexRoute: typeof LayoutCatalogAppsIndexRoute
@@ -145,6 +175,7 @@ interface LayoutRouteChildren {
 
 const LayoutRouteChildren: LayoutRouteChildren = {
   LayoutLoginRoute: LayoutLoginRoute,
+  LayoutServiceDesksRoute: LayoutServiceDesksRoute,
   LayoutIndexRoute: LayoutIndexRoute,
   LayoutAppSlugRoute: LayoutAppSlugRoute,
   LayoutCatalogAppsIndexRoute: LayoutCatalogAppsIndexRoute,

package/src/routes/_layout/service-desks.tsx

@@ -0,0 +1,28 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod'
+import { appCatalogRouteLoader } from '~/modules/appCatalog/routeLoader'
+import { AppCatalogLayout } from '~/modules/appCatalog/ui/layout/AppCatalogLayout'
+import { ServiceDesksPage } from '~/modules/appCatalog/ui/pages/ServiceDesksPage'
+
+const searchSchema = z.object({
+  q: z.string().optional(),
+})
+
+export const Route = createFileRoute('/_layout/service-desks')({
+  component: RouteComponent,
+  validateSearch: searchSchema,
+  async loader() {
+    const appCatalogLoader = await appCatalogRouteLoader()
+    return { appCatalogLoader }
+  },
+})
+
+function RouteComponent() {
+  const { queryClient, trpcClient } = Route.useRouteContext()
+
+  return (
+    <AppCatalogLayout queryClient={queryClient} trpcClient={trpcClient}>
+      <ServiceDesksPage />
+    </AppCatalogLayout>
+  )
+}