@igstack/app-catalog-frontend-core 0.0.1

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>
+  )
+}

package/src/modules/approvalMethod/ApprovalMethodForm.tsx

@@ -0,0 +1,323 @@
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Button } from '~/ui/button'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '~/ui/form'
+import { Input } from '~/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '~/ui/select'
+import { EditableListField } from '~/ui/editable-list'
+
+const APPROVAL_METHOD_TYPES = [
+  { value: 'service', label: 'Service' },
+  { value: 'personTeam', label: 'Person/Team' },
+  { value: 'custom', label: 'Custom' },
+] as const
+
+// Form schema
+const formSchema = z.object({
+  type: z.enum(['service', 'personTeam', 'custom']),
+  displayName: z.string().min(1, 'Display name is required'),
+  // Service config
+  serviceUrl: z.string().url().optional().or(z.literal('')),
+  serviceIcon: z.string().optional(),
+  // PersonTeam config
+  reachOutContacts: z
+    .array(
+      z.object({
+        displayName: z.string(),
+        contact: z.string(),
+      }),
+    )
+    .optional(),
+})
+
+type FormData = z.infer<typeof formSchema>
+
+interface ApprovalMethodFormProps {
+  mode: 'create' | 'edit'
+  initialData: {
+    id?: string
+    type: 'service' | 'personTeam' | 'custom'
+    displayName: string
+    config?: Record<string, unknown>
+  } | null
+  onSubmit: (data: any) => void
+  onCancel: () => void
+  isPending: boolean
+}
+
+export function ApprovalMethodForm({
+  mode,
+  initialData,
+  onSubmit,
+  onCancel,
+  isPending,
+}: ApprovalMethodFormProps) {
+  const config = initialData?.config
+  const configRecord = config ? config : undefined
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema as any) as any,
+    defaultValues: {
+      type: initialData?.type || 'custom',
+      displayName: initialData?.displayName || '',
+      serviceUrl: configRecord?.url ? String(configRecord.url) : '',
+      serviceIcon: configRecord?.icon ? String(configRecord.icon) : '',
+      reachOutContacts: Array.isArray(configRecord?.reachOutContacts)
+        ? (configRecord.reachOutContacts as Array<{
+            displayName: string
+            contact: string
+          }>)
+        : [],
+    },
+  })
+
+  const typeValue = form.watch('type')
+
+  const handleSubmit = (data: FormData) => {
+    // Build config based on type
+    let configPayload: Record<string, unknown> | undefined
+
+    if (data.type === 'service') {
+      configPayload = {
+        ...(data.serviceUrl && { url: data.serviceUrl }),
+        ...(data.serviceIcon && { icon: data.serviceIcon }),
+      }
+    } else if (data.type === 'personTeam') {
+      configPayload = {
+        ...(data.reachOutContacts?.length && {
+          reachOutContacts: data.reachOutContacts,
+        }),
+      }
+    }
+
+    const payload = {
+      ...(mode === 'edit' && initialData?.id && { id: initialData.id }),
+      type: data.type,
+      displayName: data.displayName,
+      config:
+        Object.keys(configPayload ?? {}).length > 0 ? configPayload : undefined,
+    }
+
+    onSubmit(payload)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+        <FormField
+          control={form.control as any}
+          name="type"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Type *</FormLabel>
+              <Select value={field.value} onValueChange={field.onChange}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {APPROVAL_METHOD_TYPES.map((type) => (
+                    <SelectItem key={type.value} value={type.value}>
+                      {type.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormDescription>
+                {typeValue === 'service' &&
+                  'For bots, ticketing systems, self-service portals'}
+                {typeValue === 'personTeam' && 'For human approvers or teams'}
+                {typeValue === 'custom' &&
+                  'Generic approval method with no specific configuration'}
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control as any}
+          name="displayName"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Display Name *</FormLabel>
+              <FormControl>
+                <Input placeholder="e.g., Natero Bot, IT Helpdesk" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Service-specific fields */}
+        {typeValue === 'service' && (
+          <div className="space-y-4 p-4 border rounded-lg bg-muted/30">
+            <div className="text-sm font-medium">Service Configuration</div>
+
+            <FormField
+              control={form.control as any}
+              name="serviceUrl"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>URL</FormLabel>
+                  <FormControl>
+                    <Input type="url" placeholder="https://..." {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    URL to the service (shown as clickable link in app)
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control as any}
+              name="serviceIcon"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Icon</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Icon name" {...field} />
+                  </FormControl>
+                  <FormDescription>Optional icon identifier</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+        )}
+
+        {/* PersonTeam-specific fields */}
+        {typeValue === 'personTeam' && (
+          <div className="space-y-4 p-4 border rounded-lg bg-muted/30">
+            <div className="text-sm font-medium">Reach-Out Contacts</div>
+            <FormDescription>
+              People or teams to contact for approval (not necessarily the
+              approvers themselves)
+            </FormDescription>
+
+            <FormField
+              control={form.control as any}
+              name="reachOutContacts"
+              render={({ field }) => (
+                <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 Contact"
+                  emptyMessage="No contacts configured"
+                  renderForm={({ item, onSave, onCancel: onCancelEdit }) => {
+                    if (!item) return null
+                    return (
+                      <ContactForm
+                        item={item}
+                        onSave={onSave}
+                        onCancel={onCancelEdit}
+                      />
+                    )
+                  }}
+                />
+              )}
+            />
+          </div>
+        )}
+
+        {/* Custom type - no additional fields */}
+        {typeValue === 'custom' && (
+          <div className="p-4 border rounded-lg bg-muted/30 text-sm text-muted-foreground">
+            Custom type has no additional configuration. App-specific details
+            will be configured per app.
+          </div>
+        )}
+
+        <div className="flex gap-2 pt-4">
+          <Button type="submit" disabled={isPending}>
+            {isPending ? 'Saving...' : mode === 'create' ? 'Create' : 'Save'}
+          </Button>
+          <Button type="button" variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </Form>
+  )
+}
+
+// Simple contact form for the dialog
+function ContactForm({
+  item,
+  onSave,
+  onCancel: handleCancel,
+}: {
+  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, IT Team" />
+            </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={handleCancel}
+        >
+          Cancel
+        </Button>
+      </div>
+    </form>
+  )
+}