feat: adapt action pages to new json structure

Author: mvriu5

src/app/(landing)/[locale]/actions/[slug]/page.tsx

@@ -1,20 +1,17 @@
 import { ActionTriggerView } from "@/components/ActionTriggerView"
 import { ActionCard } from "@/components/cards/ActionCard"
 import { Aurora } from "@/components/ui/Aurora"
-import { HapticButtonLink } from "@/components/ui/HapticButtonLink"
 import { LandingContainer } from "@/components/ui/LandingContainer"
 import { LinkButton } from "@/components/ui/LinkButton"
 import { getPageLocaleAndSlug, type LocaleSlugPageParams } from "@/lib/appRoute"
-import { extractFunctionDefsFromJson, extractTriggersFromJson, fetchMediaJson } from "@/lib/actionTriggerExtraction"
+import { extractFlowTypesFromJson, extractFunctionDefinitionsFromJson, fetchMediaJson } from "@/lib/actionExtraction"
 import { getActionBySlug, getLandingPage } from "@/lib/cms"
-import { getMediaUrl } from "@/lib/media"
 import { findPageBlock } from "@/lib/pageBlocks"
 import { createMetadata } from "@/lib/siteConfig"
 import { getIcon } from "@/components/IconRenderer"
 import type { Media } from "@/payload-types"
-import { IconArrowLeft, IconExternalLink } from "@tabler/icons-react"
+import { IconArrowLeft } from "@tabler/icons-react"
 import type { Metadata } from "next"
-import Image from "next/image"
 import { notFound } from "next/navigation"
 
 export default async function ActionDetailPage({ params }: { params: LocaleSlugPageParams }) {
@@ -23,25 +20,27 @@ export default async function ActionDetailPage({ params }: { params: LocaleSlugP
     if (!action) notFound()
     const actionsPage = await getLandingPage("actions", locale)
 
-    const icon = action.icon as Media | undefined
-    const iconUrl = getMediaUrl(icon?.url)
-    const triggers = action.trigger as Media | undefined
-    const functionDefs = action.functiondefinitions as Media | undefined
-    const [extractedTriggers, extractedFunctionDefs] = await Promise.all([fetchMediaJson(triggers), fetchMediaJson(functionDefs)])
-        .then(([triggerJson, functionDefJson]) => [extractTriggersFromJson(triggerJson), extractFunctionDefsFromJson(functionDefJson)] as const)
-        .catch(() => [[], []] as const)
-    const triggerItems = extractedTriggers.map((item) => ({
+    const module = action.module as Media | undefined
+    const moduleJson = await fetchMediaJson(module).catch(() => null)
+    const extractedFlowTypes = extractFlowTypesFromJson(moduleJson)
+    const extractedFunctionDefinitions = extractFunctionDefinitionsFromJson(moduleJson)
+    const flowTypeItems = extractedFlowTypes.map((item) => ({
         item,
         icon: getIcon(item.displayIcon, 32),
     }))
-    const functionDefItems = extractedFunctionDefs.map((item) => ({
+    const functionDefinitionItems = extractedFunctionDefinitions.map((item) => ({
         item,
-        icon: getIcon("function", 32),
+        icon: getIcon(item.displayIcon ?? "function", 32),
     }))
     const references = (action.references ?? []).filter((reference): reference is Exclude<typeof reference, number> => typeof reference !== "number")
     const tags = (action.tags ?? []).filter((tag): tag is string => Boolean(tag))
     const actionsBlock = findPageBlock(actionsPage, "actions")
     const referencesLabel = actionsBlock?.referencesLabel ?? (locale === "de" ? "Referenzen" : "References")
+    const emptyDefinitionLabels = {
+        flowTypes: actionsBlock?.noFlowTypesFoundLabel ?? (locale === "de" ? "Keine FlowTypes gefunden." : "No flow types found."),
+        functionDefinitions: actionsBlock?.noFunctionDefinitionsFoundLabel ?? (locale === "de" ? "Keine FunctionDefinitions gefunden." : "No function definitions found."),
+        both: actionsBlock?.noActionDefinitionsFoundLabel ?? (locale === "de" ? "Keine FlowTypes oder FunctionDefinitions gefunden." : "No flow types or function definitions found."),
+    }
 
     return (
         <>
@@ -57,9 +56,9 @@ export default async function ActionDetailPage({ params }: { params: LocaleSlugP
                         <div className="relative z-10 flex flex-col gap-8">
                             <div className="flex flex-col gap-4 sm:flex-row sm:justify-between">
                                 <div className="flex flex-col gap-6 sm:flex-row sm:items-start">
-                                    {iconUrl && (
-                                        <div className="relative size-20 shrink-0 overflow-hidden rounded-3xl border border-white/10 bg-light">
-                                            <Image src={iconUrl} alt={icon?.alt ?? action.title} fill sizes="80px" className="object-contain p-2" />
+                                    {action.icon && (
+                                        <div className="flex size-20 shrink-0 items-center justify-center overflow-hidden rounded-3xl border border-white/10 bg-light text-white">
+                                            {getIcon(action.icon, 40)}
                                         </div>
                                     )}
 
@@ -76,17 +75,10 @@ export default async function ActionDetailPage({ params }: { params: LocaleSlugP
                                         )}
                                     </div>
                                 </div>
-
-                                {action.documentation?.label && action.documentation?.url && (
-                                    <HapticButtonLink href={action.documentation.url} variant="normal" className="text-sm!">
-                                        <IconExternalLink size={16} />
-                                        {action.documentation.label}
-                                    </HapticButtonLink>
-                                )}
                             </div>
                             {action.description && <div className="max-w-3xl whitespace-pre-line text-sm leading-6 text-secondary">{action.description}</div>}
 
-                            <ActionTriggerView locale={locale} triggers={triggerItems} functionDefs={functionDefItems} />
+                            <ActionTriggerView locale={locale} flowTypes={flowTypeItems} functionDefinitions={functionDefinitionItems} emptyLabels={emptyDefinitionLabels} />
 
                             {references.length > 0 && (
                                 <div className="space-y-3">

src/blocks/ActionBlock.ts

@@ -42,5 +42,26 @@ export const ActionBlock: Block = {
       localized: true,
       defaultValue: "References",
     },
+    {
+      name: "noFlowTypesFoundLabel",
+      type: "text",
+      required: true,
+      localized: true,
+      defaultValue: "No flow types found.",
+    },
+    {
+      name: "noFunctionDefinitionsFoundLabel",
+      type: "text",
+      required: true,
+      localized: true,
+      defaultValue: "No function definitions found.",
+    },
+    {
+      name: "noActionDefinitionsFoundLabel",
+      type: "text",
+      required: true,
+      localized: true,
+      defaultValue: "No flow types or function definitions found.",
+    },
   ],
 }

src/collections/actions.ts

@@ -1,84 +1,33 @@
 import type { CollectionConfig } from "payload"
 
 export const Actions: CollectionConfig = {
-  slug: "actions",
-  admin: {
-    useAsTitle: "title",
-    defaultColumns: ["title", "updatedAt"],
-  },
-  access: {
-    read: () => true,
-    create: ({ req }) => Boolean(req.user),
-    update: ({ req }) => Boolean(req.user),
-    delete: ({ req }) => Boolean(req.user),
-  },
-  fields: [
-    {
-      name: "title",
-      type: "text",
-      required: true,
-      localized: true,
+    slug: "actions",
+    admin: {
+        defaultColumns: ["module", "tags", "updatedAt"],
     },
-    {
-      name: "slug",
-      type: "text",
-      required: true,
-      unique: true,
-      index: true,
-      admin: {
-        description: "URL slug for the action subpage, e.g. 'slack-sync'.",
-      },
+    access: {
+        read: () => true,
+        create: ({ req }) => Boolean(req.user),
+        update: ({ req }) => Boolean(req.user),
+        delete: ({ req }) => Boolean(req.user),
     },
-    {
-      name: "shortDescription",
-      type: "textarea",
-      localized: true,
-    },
-    {
-      name: "description",
-      type: "textarea",
-      localized: true,
-    },
-    {
-      name: "icon",
-      type: "upload",
-      relationTo: "media",
-    },
-    {
-      name: "trigger",
-      type: "upload",
-      relationTo: "media",
-    },
-    {
-      name: "functiondefinitions",
-      type: "upload",
-      relationTo: "media",
-    },
-    {
-      name: "tags",
-      type: "text",
-      hasMany: true,
-    },
-    {
-      name: "documentation",
-      type: "group",
-      fields: [
+    fields: [
         {
-          name: "label",
-          type: "text",
-          localized: true,
+            name: "module",
+            type: "upload",
+            relationTo: "media",
+            required: true,
         },
         {
-          name: "url",
-          type: "text",
+            name: "tags",
+            type: "text",
+            hasMany: true,
         },
-      ],
-    },
-    {
-      name: "references",
-      type: "relationship",
-      relationTo: "actions",
-      hasMany: true,
-    },
-  ],
+        {
+            name: "references",
+            type: "relationship",
+            relationTo: "actions",
+            hasMany: true,
+        },
+    ],
 }

src/components/ActionTriggerCard.tsx

@@ -1,30 +1,30 @@
 "use client"
 
 import { BaseAccordionItem } from "@/components/ui/Accordion"
-import type { ExtractedActionTriggerItem } from "@/lib/actionTriggerExtraction"
+import type { ExtractedFlowType, ExtractedFunctionDefinition } from "@/lib/actionExtraction"
 import { type ReactNode, useCallback, useMemo, useState } from "react"
 import { Card } from "./ui/Card"
 
 interface ActionTriggerCardProps {
-    type: "trigger" | "functionDef"
-    item: ExtractedActionTriggerItem
+    type: "flowType" | "functionDefinition"
+    item: ExtractedFlowType | ExtractedFunctionDefinition
     icon: ReactNode
 }
 
 export function ActionTriggerCard({ type, item, icon }: ActionTriggerCardProps) {
     const [openItem, setOpenItem] = useState<number | null>(null)
-    const parameters = item.kind === "functionDef" ? item.parameters : item.settings
-    const label = type === "trigger" ? "Trigger" : "FunctionDefinition"
-    const parameterLabel = type === "trigger" ? "Settings" : "Parameters"
+    const parameters = item.kind === "functionDefinition" ? item.parameters : item.kind === "flowType" ? item.settings : []
+    const label = type === "flowType" ? "FlowType" : "FunctionDefinition"
+    const parameterLabel = type === "flowType" ? "Settings" : "Parameters"
     const toggleItem = useCallback((index: number) => {
         setOpenItem((previousItem) => (previousItem === index ? null : index))
     }, [])
     const parameterList = useMemo(
         () => (
             <div className="flex flex-col gap-2">
                 {parameters.map((parameter) => (
-                    <div key={parameter.id} className="rounded-md bg-white/2 p-2">
-                        <div className="text-xs font-medium text-secondary">{parameter.name || parameter.identifier}</div>
+                    <div key={parameter.id} className="rounded-md bg-primary/50 p-2">
+                        <div className="text-xs font-medium text-white">{parameter.name || parameter.identifier}</div>
                         {parameter.description && <div className="mt-1 text-xs leading-5 text-tertiary">{parameter.description}</div>}
                     </div>
                 ))}
@@ -34,14 +34,14 @@ export function ActionTriggerCard({ type, item, icon }: ActionTriggerCardProps)
     )
 
     return (
-        <Card size="sm" className="bg-primary">
+        <Card size="sm" className="bg-light">
             <div className="relative z-10 flex h-full flex-col gap-2">
                 <div className="flex items-start justify-between gap-3">
                     <div className="flex min-w-0 items-center gap-2">
-                        <div className="flex size-12 shrink-0 items-center justify-center rounded-lg border border-white/5 bg-light text-brand">{icon}</div>
+                        <div className="flex size-10 shrink-0 items-center justify-center rounded-lg border border-white/5 bg-light text-brand">{icon}</div>
                         <div className="min-w-0">
-                            <p className="text-xs font-medium tracking-wider text-tertiary">{label}</p>
-                            <h3 className="mt-1 truncate text-base tracking-wide font-semibold text-white">{item.name || item.identifier}</h3>
+                            <p className="text-xs tracking-wide text-tertiary">{label}</p>
+                            <h3 className="truncate tracking-wide text-white">{item.name || item.identifier}</h3>
                         </div>
                     </div>
                     <div className="shrink-0 rounded-lg border border-white/5 bg-light px-2 py-1 text-xs text-tertiary">{item.identifier}</div>
@@ -57,7 +57,8 @@ export function ActionTriggerCard({ type, item, icon }: ActionTriggerCardProps)
                             isOpen={openItem === 0}
                             onToggle={toggleItem}
                             className="rounded-lg before:bg-none"
-                            questionClassname="pl-5 pr-2 py-1 text-sm lg:text-sm"
+                            questionClassname="pl-3 pr-1 py-0 text-sm lg:text-sm"
+                            answerClassname="px-2 pb-2 pt-0"
                             answer={parameterList}
                         />
                     </div>

src/components/ActionTriggerView.tsx

@@ -3,44 +3,54 @@
 import { type ReactNode, useState } from "react"
 import { ActionTriggerCard } from "@/components/ActionTriggerCard"
 import { Switch, type SwitchOption } from "@/components/ui/Switch"
-import type { ExtractedActionTriggerItem, ExtractedFunctionDef, ExtractedTrigger } from "@/lib/actionTriggerExtraction"
+import type { ExtractedFlowType, ExtractedFunctionDefinition } from "@/lib/actionExtraction"
 
 interface ActionTriggerViewProps {
     locale: string
-    triggers: Array<{ item: ExtractedTrigger; icon: ReactNode }>
-    functionDefs: Array<{ item: ExtractedFunctionDef; icon: ReactNode }>
+    flowTypes: Array<{ item: ExtractedFlowType; icon: ReactNode }>
+    functionDefinitions: Array<{ item: ExtractedFunctionDefinition; icon: ReactNode }>
+    emptyLabels: {
+        flowTypes: string
+        functionDefinitions: string
+        both: string
+    }
 }
 
-type ViewMode = "both" | "triggers" | "functionDefs"
+type ViewMode = "both" | "flowTypes" | "functionDefinitions"
 
 interface DisplayItem {
-    type: "trigger" | "functionDef"
-    item: ExtractedActionTriggerItem
+    type: "flowType" | "functionDefinition"
+    item: ExtractedFlowType | ExtractedFunctionDefinition
     icon: ReactNode
 }
 
-export function ActionTriggerView({ locale, triggers, functionDefs }: ActionTriggerViewProps) {
+export function ActionTriggerView({ locale, flowTypes, functionDefinitions, emptyLabels }: ActionTriggerViewProps) {
     const [viewMode, setViewMode] = useState<ViewMode>("both")
     const viewModeOptions: SwitchOption<ViewMode>[] = [
+        { value: "flowTypes", label: "FlowTypes" },
+        { value: "functionDefinitions", label: "FunctionDefinitions" },
         { value: "both", label: locale === "en" ? "Both" : "Beide" },
-        { value: "triggers", label: "Triggers" },
-        { value: "functionDefs", label: "FunctionDefinitions" },
     ]
 
     const visibleItems: DisplayItem[] = [
-        ...(viewMode === "both" || viewMode === "triggers" ? triggers.map(({ item, icon }) => ({ type: "trigger" as const, item, icon })) : []),
-        ...(viewMode === "both" || viewMode === "functionDefs" ? functionDefs.map(({ item, icon }) => ({ type: "functionDef" as const, item, icon })) : []),
+        ...(viewMode === "both" || viewMode === "flowTypes" ? flowTypes.map(({ item, icon }) => ({ type: "flowType" as const, item, icon })) : []),
+        ...(viewMode === "both" || viewMode === "functionDefinitions" ? functionDefinitions.map(({ item, icon }) => ({ type: "functionDefinition" as const, item, icon })) : []),
     ]
+    const emptyLabel = viewMode === "both" ? emptyLabels.both : viewMode === "flowTypes" ? emptyLabels.flowTypes : emptyLabels.functionDefinitions
 
     return (
         <div className="space-y-6">
-            <Switch value={viewMode} options={viewModeOptions} onChange={setViewMode} className="w-max" />
-
-            <div className="flex flex-col gap-4 md:hidden">
-                {visibleItems.map(({ type, item, icon }) => (
-                    <ActionTriggerCard key={item.id} type={type} item={item} icon={icon} />
-                ))}
-            </div>
+            <Switch value={viewMode} options={viewModeOptions} onChange={setViewMode} className="w-max max-w-full overflow-x-auto" fitContent />
+
+            {visibleItems.length > 0 ? (
+                <div className="flex flex-col gap-4 md:hidden">
+                    {visibleItems.map(({ type, item, icon }) => (
+                        <ActionTriggerCard key={item.id} type={type} item={item} icon={icon} />
+                    ))}
+                </div>
+            ) : (
+                <p className="px-2 text-sm text-tertiary">{emptyLabel}</p>
+            )}
         </div>
     )
 }

src/components/ActionsPageClient.tsx

@@ -61,7 +61,7 @@ export function ActionsPageClient({ actions, locale, content }: ActionsPageClien
                 clearable
                 className="text-white!"
             />
-            <div className="grid gap-4 md:grid-cols-2">
+            <div className="flex flex-col gap-4">
                 {filteredActions.map((action) => (
                     <ActionCard key={action.id} action={action} locale={locale} />
                 ))}

src/components/IconRenderer.tsx

@@ -1,5 +1,3 @@
-import "server-only"
-
 import { IconRenderer as PayloadIconRenderer } from "@mvriu5/payload-icon-picker/client"
 import type { CSSProperties, Key, ReactNode } from "react"
 import { simpleIconsAdapter } from "@mvriu5/payload-icon-picker/adapters/simple-icons"