From 8e0605aae63581d804bb7c68487a25e78347a76f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romaric=20Philog=C3=A8ne?= <rphilogene@qovery.com>
Date: Sat, 16 Dec 2023 16:34:13 +0100
Subject: [PATCH] wip: add frontend dynamic fields for service catalog

---
 backend/examples/config.yaml                  |  60 ++--
 backend/src/yaml_config.rs                    |   1 +
 frontend/src/components/SelfService.tsx       |  22 +-
 frontend/src/components/SelfServiceCard.tsx   |   1 -
 .../src/components/SelfServiceSideOver.tsx    | 305 ------------------
 .../src/components/SelfServiceSlideOver.tsx   | 118 +++++++
 .../self-service-fields/BooleanField.tsx      |  63 ++++
 .../self-service-fields/TextField.tsx         |  38 +++
 .../self-service-fields/TextareaField.tsx     |  32 ++
 9 files changed, 305 insertions(+), 335 deletions(-)
 delete mode 100644 frontend/src/components/SelfServiceSideOver.tsx
 create mode 100644 frontend/src/components/SelfServiceSlideOver.tsx
 create mode 100644 frontend/src/components/self-service-fields/BooleanField.tsx
 create mode 100644 frontend/src/components/self-service-fields/TextField.tsx
 create mode 100644 frontend/src/components/self-service-fields/TextareaField.tsx

diff --git a/backend/examples/config.yaml b/backend/examples/config.yaml
index 075e18c..98b0b36 100644
--- a/backend/examples/config.yaml
+++ b/backend/examples/config.yaml
@@ -4,18 +4,34 @@ catalogs:
     description: Default catalog
     services:
       - slug: new-testing-environment
-        name: new testing environment
-        description: spin up a testing environment
-        icon: https://example.com/icon.png
+        name: New Testing Environment
+        description: spin up a temporary testing environment
+        icon: target
         fields:
-          - slug: environment-name
-            title: environment name
+          - slug: name
+            title: Name
             description: provide a name for your environment
             placeholder: testing-123
-            type: string
+            type: text
             default: testing-123
             required: true
-            autocomplete-fetcher: ./your-script.py
+          - slug: description
+            title: Description
+            description: provide a description for your environment - what's good for?
+            type: textarea
+          - slug: ttl
+            title: TTL
+            description: Time to live for your environment (in hours)
+            placeholder: 24
+            type: number
+            default: 24
+            required: true
+          - slug: seed
+            title: Seed
+            description: Do you want to seed your environment with some data?
+            placeholder: 24
+            type: boolean
+            default: true
         validate:
           - command:
               - bash
@@ -38,16 +54,16 @@ catalogs:
               - bash
               - post-validation-script-3.sh # AND finally this one
             output-model: string (optional) # model name
-      - slug: new-testing-environment-2
-        name: new testing environment 2
-        description: spin up a testing environment 2
-        icon: https://example.com/icon.png
+      - slug: shutdown-testing-environment
+        name: Shutdown Testing Environment
+        description: shutdown a temporary testing environment
+        icon: trash
         fields:
           - slug: environment-name
             title: environment name
             description: provide a name for your environment
             placeholder: testing-123
-            type: string
+            type: text
             default: testing-123
             required: true
             autocomplete-fetcher: ./your-script.py
@@ -80,55 +96,55 @@ catalogs:
       - slug: another-service
         name: another service
         description: another service
-        icon: https://example.com/icon.png
+        icon: target
         fields:
           - slug: field-1
             title: field 1
             description: field 1
             placeholder: field 1
-            type: string
+            type: text
             default: field 1
             required: true
           - slug: field-2
             title: field 2
             description: field 2
             placeholder: field 2
-            type: string
+            type: text
             default: field 2
             required: true
           - slug: field-3
             title: field 3
             description: field 3
             placeholder: field 3
-            type: string
+            type: text
             default: field 3
             required: true
           - slug: field-4
             title: field 4
             description: field 4
             placeholder: field 4
-            type: string
+            type: text
             default: field 4
             required: true
           - slug: field-5
             title: field 5
             description: field 5
             placeholder: field 5
-            type: string
+            type: text
             default: field 5
             required: true
           - slug: field-6
             title: field 6
             description: field 6
             placeholder: field 6
-            type: string
+            type: text
             default: field 6
             required: true
           - slug: field-7
             title: field 7
             description: field 7
             placeholder: field 7
-            type: string
+            type: text
             default: field 7
             required: true
           - slug: field-8
@@ -142,14 +158,14 @@ catalogs:
             title: field 9
             description: field 9
             placeholder: field 9
-            type: string
+            type: text
             default: field 9
             required: true
           - slug: field-10
             title: field 10
             description: field 10
             placeholder: field 10
-            type: string
+            type: text
 models:
   - name: string
     description: string (optional)
diff --git a/backend/src/yaml_config.rs b/backend/src/yaml_config.rs
index 950dcb6..ce31c06 100644
--- a/backend/src/yaml_config.rs
+++ b/backend/src/yaml_config.rs
@@ -22,6 +22,7 @@ pub struct CatalogServiceYamlConfig {
     pub slug: String,
     pub name: String,
     pub description: Option<String>,
+    pub icon: Option<String>,
     pub fields: Option<Vec<CatalogFieldYamlConfig>>,
     pub validate: Option<Vec<CatalogServiceValidateYamlConfig>>,
     pub post_validate: Option<Vec<CatalogServicePostValidateYamlConfig>>,
diff --git a/frontend/src/components/SelfService.tsx b/frontend/src/components/SelfService.tsx
index 1fc7d2d..0aa0584 100644
--- a/frontend/src/components/SelfService.tsx
+++ b/frontend/src/components/SelfService.tsx
@@ -1,15 +1,27 @@
 import EmptyState from "@/components/EmptyState.tsx";
 import SelfServiceCard from "@/components/SelfServiceCard.tsx";
 import {TargetIcon} from "lucide-react";
-import SelfServiceSideOver from "@/components/SelfServiceSideOver.tsx";
+import SelfServiceSlideOver from "@/components/SelfServiceSlideOver.tsx";
 import {useState} from "react";
 import {Transition} from "@headlessui/react";
+import {TrashIcon} from "@heroicons/react/24/outline";
 
 interface Props {
   catalogSlug: string
   services: any[]
 }
 
+function getIcon(icon?: string): JSX.Element {
+  switch (icon?.toLowerCase()) {
+    case 'target':
+      return <TargetIcon className="h-6 w-6" aria-hidden="true"/>
+    case 'trash':
+      return <TrashIcon className="h-6 w-6" aria-hidden="true"/>
+    default:
+      return <TargetIcon className="h-6 w-6" aria-hidden="true"/>
+  }
+}
+
 export default function SelfService({catalogSlug, services}: Props) {
   const [showSideOver, setShowSideOver] = useState({show: false, service: {}}) // pass service
 
@@ -17,10 +29,6 @@ export default function SelfService({catalogSlug, services}: Props) {
     return <EmptyState text="No Services" subText="This catalog has no services."/>
   }
 
-  function getIcon(): JSX.Element {
-    return <TargetIcon className="h-6 w-6" aria-hidden="true"/>
-  }
-
   return <>
     <div className="min-w-0 flex-1 my-5">
       <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
@@ -34,7 +42,7 @@ export default function SelfService({catalogSlug, services}: Props) {
             key={service.name}
             title={service.name}
             description={service.description}
-            icon={getIcon()}
+            icon={getIcon(service.icon)}
             index={idx}
             totalCards={services.length}
             onClick={() => {
@@ -44,7 +52,7 @@ export default function SelfService({catalogSlug, services}: Props) {
       }
     </div>
     <Transition show={showSideOver.show}>
-      <SelfServiceSideOver service={showSideOver.service} onClose={() => setShowSideOver({show: false, service: showSideOver.service})}/>
+      <SelfServiceSlideOver service={showSideOver.service} onClose={() => setShowSideOver({show: false, service: showSideOver.service})}/>
     </Transition>
   </>
 }
diff --git a/frontend/src/components/SelfServiceCard.tsx b/frontend/src/components/SelfServiceCard.tsx
index 85adfb3..0005152 100644
--- a/frontend/src/components/SelfServiceCard.tsx
+++ b/frontend/src/components/SelfServiceCard.tsx
@@ -69,7 +69,6 @@ export default function SelfServiceCard({title, description, icon, index, totalC
         <div className="mt-8">
           <h3 className="text-base font-semibold leading-6 text-gray-900">
             <a href="#" className="focus:outline-none" onClick={onClick}>
-              {/* Extend touch target to entire panel */}
               <span className="absolute inset-0" aria-hidden="true"/>
               {title}
             </a>
diff --git a/frontend/src/components/SelfServiceSideOver.tsx b/frontend/src/components/SelfServiceSideOver.tsx
deleted file mode 100644
index 90237f9..0000000
--- a/frontend/src/components/SelfServiceSideOver.tsx
+++ /dev/null
@@ -1,305 +0,0 @@
-import {Fragment} from 'react'
-import {Dialog, Transition} from '@headlessui/react'
-import {XMarkIcon} from '@heroicons/react/24/outline'
-import {LinkIcon, PlusIcon, QuestionMarkCircleIcon} from '@heroicons/react/20/solid'
-
-const team = [
-  {
-    name: 'Tom Cook',
-    email: 'tom.cook@example.com',
-    href: '#',
-    imageUrl:
-      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-  {
-    name: 'Whitney Francis',
-    email: 'whitney.francis@example.com',
-    href: '#',
-    imageUrl:
-      'https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-  {
-    name: 'Leonard Krasner',
-    email: 'leonard.krasner@example.com',
-    href: '#',
-    imageUrl:
-      'https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-  {
-    name: 'Floyd Miles',
-    email: 'floyd.miles@example.com',
-    href: '#',
-    imageUrl:
-      'https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-  {
-    name: 'Emily Selman',
-    email: 'emily.selman@example.com',
-    href: '#',
-    imageUrl:
-      'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-]
-
-interface Props {
-  service: any;
-  onClose: () => void;
-}
-
-export default function SelfServiceSideOver({service, onClose}: Props): JSX.Element {
-  return (
-    <Dialog as="div" className="relative z-10" onClose={onClose}>
-      <Transition.Child
-        as={Fragment}
-        enter="ease-in-out duration-500"
-        enterFrom="opacity-0"
-        enterTo="opacity-100"
-        leave="ease-in-out duration-500"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0"
-      >
-        <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"/>
-      </Transition.Child>
-
-      <div className="fixed inset-0 overflow-hidden">
-        <div className="absolute inset-0 overflow-hidden">
-          <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
-            <Transition.Child
-              as={Fragment}
-              enter="transform transition ease-in-out duration-500 sm:duration-700"
-              enterFrom="translate-x-full"
-              enterTo="translate-x-0"
-              leave="transform transition ease-in-out duration-500 sm:duration-700"
-              leaveFrom="translate-x-0"
-              leaveTo="translate-x-full"
-            >
-              <Dialog.Panel className="pointer-events-auto w-screen max-w-2xl">
-                <form className="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
-                  <div className="flex-1">
-                    {/* Header */}
-                    <div className="bg-gray-50 px-4 py-6 sm:px-6">
-                      <div className="flex items-start justify-between space-x-3">
-                        <div className="space-y-1">
-                          <Dialog.Title className="text-base font-semibold leading-6 text-gray-900">
-                            {service.name}
-                          </Dialog.Title>
-                          <p className="text-sm text-gray-500">
-                            {service.description}
-                          </p>
-                        </div>
-                        <div className="flex h-7 items-center">
-                          <button
-                            type="button"
-                            className="relative text-gray-400 hover:text-gray-500"
-                            onClick={() => onClose()}
-                          >
-                            <span className="absolute -inset-2.5"/>
-                            <span className="sr-only">Close panel</span>
-                            <XMarkIcon className="h-6 w-6" aria-hidden="true"/>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Divider container */}
-                    <div className="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0">
-                      {/* Project name */}
-                      <div className="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
-                        <div>
-                          <label
-                            htmlFor="project-name"
-                            className="block text-sm font-medium leading-6 text-gray-900 sm:mt-1.5"
-                          >
-                            Project name
-                          </label>
-                        </div>
-                        <div className="sm:col-span-2">
-                          <input
-                            type="text"
-                            name="project-name"
-                            id="project-name"
-                            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                          />
-                        </div>
-                      </div>
-
-                      {/* Project description */}
-                      <div className="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
-                        <div>
-                          <label
-                            htmlFor="project-description"
-                            className="block text-sm font-medium leading-6 text-gray-900 sm:mt-1.5"
-                          >
-                            Description
-                          </label>
-                        </div>
-                        <div className="sm:col-span-2">
-                            <textarea
-                              id="project-description"
-                              name="project-description"
-                              rows={3}
-                              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                              defaultValue={''}
-                            />
-                        </div>
-                      </div>
-
-                      {/* Team members */}
-                      <div className="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:items-center sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
-                        <div>
-                          <h3 className="text-sm font-medium leading-6 text-gray-900">Team Members</h3>
-                        </div>
-                        <div className="sm:col-span-2">
-                          <div className="flex space-x-2">
-                            {team.map((person) => (
-                              <a
-                                key={person.email}
-                                href={person.href}
-                                className="flex-shrink-0 rounded-full hover:opacity-75"
-                              >
-                                <img
-                                  className="inline-block h-8 w-8 rounded-full"
-                                  src={person.imageUrl}
-                                  alt={person.name}
-                                />
-                              </a>
-                            ))}
-
-                            <button
-                              type="button"
-                              className="relative inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 border-dashed border-gray-200 bg-white text-gray-400 hover:border-gray-300 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                            >
-                              <span className="absolute -inset-2"/>
-                              <span className="sr-only">Add team member</span>
-                              <PlusIcon className="h-5 w-5" aria-hidden="true"/>
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-
-                      {/* Privacy */}
-                      <fieldset className="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
-                        <legend className="sr-only">Privacy</legend>
-                        <div className="text-sm font-medium leading-6 text-gray-900" aria-hidden="true">
-                          Privacy
-                        </div>
-                        <div className="space-y-5 sm:col-span-2">
-                          <div className="space-y-5 sm:mt-0">
-                            <div className="relative flex items-start">
-                              <div className="absolute flex h-6 items-center">
-                                <input
-                                  id="public-access"
-                                  name="privacy"
-                                  aria-describedby="public-access-description"
-                                  type="radio"
-                                  className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
-                                  defaultChecked
-                                />
-                              </div>
-                              <div className="pl-7 text-sm leading-6">
-                                <label htmlFor="public-access" className="font-medium text-gray-900">
-                                  Public access
-                                </label>
-                                <p id="public-access-description" className="text-gray-500">
-                                  Everyone with the link will see this project
-                                </p>
-                              </div>
-                            </div>
-                            <div className="relative flex items-start">
-                              <div className="absolute flex h-6 items-center">
-                                <input
-                                  id="restricted-access"
-                                  name="privacy"
-                                  aria-describedby="restricted-access-description"
-                                  type="radio"
-                                  className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
-                                />
-                              </div>
-                              <div className="pl-7 text-sm leading-6">
-                                <label htmlFor="restricted-access" className="font-medium text-gray-900">
-                                  Private to Project Members
-                                </label>
-                                <p id="restricted-access-description" className="text-gray-500">
-                                  Only members of this project would be able to access
-                                </p>
-                              </div>
-                            </div>
-                            <div className="relative flex items-start">
-                              <div className="absolute flex h-6 items-center">
-                                <input
-                                  id="private-access"
-                                  name="privacy"
-                                  aria-describedby="private-access-description"
-                                  type="radio"
-                                  className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
-                                />
-                              </div>
-                              <div className="pl-7 text-sm leading-6">
-                                <label htmlFor="private-access" className="font-medium text-gray-900">
-                                  Private to you
-                                </label>
-                                <p id="private-access-description" className="text-gray-500">
-                                  You are the only one able to access this project
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                          <hr className="border-gray-200"/>
-                          <div className="flex flex-col items-start space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
-                            <div>
-                              <a
-                                href="#"
-                                className="group flex items-center space-x-2.5 text-sm font-medium text-indigo-600 hover:text-indigo-900"
-                              >
-                                <LinkIcon
-                                  className="h-5 w-5 text-indigo-500 group-hover:text-indigo-900"
-                                  aria-hidden="true"
-                                />
-                                <span>Copy link</span>
-                              </a>
-                            </div>
-                            <div>
-                              <a
-                                href="#"
-                                className="group flex items-center space-x-2.5 text-sm text-gray-500 hover:text-gray-900"
-                              >
-                                <QuestionMarkCircleIcon
-                                  className="h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                                  aria-hidden="true"
-                                />
-                                <span>Learn more about sharing</span>
-                              </a>
-                            </div>
-                          </div>
-                        </div>
-                      </fieldset>
-                    </div>
-                  </div>
-
-                  {/* Action buttons */}
-                  <div className="flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6">
-                    <div className="flex justify-end space-x-3">
-                      <button
-                        type="button"
-                        className="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
-                        onClick={() => onClose()}
-                      >
-                        Cancel
-                      </button>
-                      <button
-                        type="submit"
-                        className="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-                      >
-                        Go
-                      </button>
-                    </div>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </div>
-    </Dialog>
-  )
-}
diff --git a/frontend/src/components/SelfServiceSlideOver.tsx b/frontend/src/components/SelfServiceSlideOver.tsx
new file mode 100644
index 0000000..463953d
--- /dev/null
+++ b/frontend/src/components/SelfServiceSlideOver.tsx
@@ -0,0 +1,118 @@
+import {Fragment} from 'react'
+import {Dialog, Transition} from '@headlessui/react'
+import {XMarkIcon} from '@heroicons/react/24/outline'
+import TextField from "@/components/self-service-fields/TextField.tsx";
+import TextareaField from "@/components/self-service-fields/TextareaField.tsx";
+import BooleanField from "@/components/self-service-fields/BooleanField.tsx";
+
+interface Props {
+  service: any;
+  onClose: () => void;
+}
+
+function getField(field: any): JSX.Element {
+  switch (field.type) {
+    case 'text':
+      return <TextField key={field.slug} field={field}/>
+    case 'number':
+      return <TextField key={field.slug} field={field} inputMode="numeric"/>
+    case 'textarea':
+      return <TextareaField key={field.slug} field={field}/>
+    case 'boolean':
+      return <BooleanField key={field.slug} field={field}/>
+    default:
+      return <p>'{field.type}' is not a supported field</p>
+  }
+}
+
+export default function SelfServiceSlideOver({service, onClose}: Props): JSX.Element {
+
+  return (
+    <Dialog as="div" className="relative z-10" onClose={onClose}>
+      <Transition.Child
+        as={Fragment}
+        enter="ease-in-out duration-500"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="ease-in-out duration-500"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"/>
+      </Transition.Child>
+
+      <div className="fixed inset-0 overflow-hidden">
+        <div className="absolute inset-0 overflow-hidden">
+          <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
+            <Transition.Child
+              as={Fragment}
+              enter="transform transition ease-in-out duration-500 sm:duration-700"
+              enterFrom="translate-x-full"
+              enterTo="translate-x-0"
+              leave="transform transition ease-in-out duration-500 sm:duration-700"
+              leaveFrom="translate-x-0"
+              leaveTo="translate-x-full"
+            >
+              <Dialog.Panel className="pointer-events-auto w-screen max-w-2xl">
+                <form className="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
+                  <div className="flex-1">
+                    {/* Header */}
+                    <div className="bg-gray-50 px-4 py-6 sm:px-6">
+                      <div className="flex items-start justify-between space-x-3">
+                        <div className="space-y-1">
+                          <Dialog.Title className="text-base font-semibold leading-6 text-gray-900">
+                            {service.name}
+                          </Dialog.Title>
+                          <p className="text-sm text-gray-500">
+                            {service.description}
+                          </p>
+                        </div>
+                        <div className="flex h-7 items-center">
+                          <button
+                            type="button"
+                            className="relative text-gray-400 hover:text-gray-500"
+                            onClick={() => onClose()}
+                          >
+                            <span className="absolute -inset-2.5"/>
+                            <span className="sr-only">Close panel</span>
+                            <XMarkIcon className="h-6 w-6" aria-hidden="true"/>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Divider container */}
+                    <div className="space-y-6 py-6 sm:space-y-0 sm:py-0">
+                      {service.fields.map((field: any) => {
+                        return getField(field)
+                      })}
+                    </div>
+                  </div>
+
+                  {/* Action buttons */}
+                  <div className="flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6">
+                    <div className="flex justify-end space-x-3">
+                      <button
+                        type="button"
+                        className="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+                        onClick={() => onClose()}
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        type="submit"
+                        className="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                      >
+                        Go
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  )
+}
diff --git a/frontend/src/components/self-service-fields/BooleanField.tsx b/frontend/src/components/self-service-fields/BooleanField.tsx
new file mode 100644
index 0000000..1a7d0a7
--- /dev/null
+++ b/frontend/src/components/self-service-fields/BooleanField.tsx
@@ -0,0 +1,63 @@
+import {Switch} from "@headlessui/react";
+import {classNames} from "@/lib/utils.ts";
+import {useState} from "react";
+
+interface Props {
+  field: any;
+  onChange?: (value: boolean) => void;
+}
+
+export default function BooleanField({field, onChange}: Props) {
+  let defaultValue = false;
+  if (field.default.toLowerCase() === 'true') {
+    defaultValue = true;
+  }
+
+  const [enabled, setEnabled] = useState(defaultValue)
+
+  return (
+    <div className="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-2 sm:px-6 sm:py-5">
+      <div>
+        <label
+          htmlFor={field.slug}
+          className="block text-sm font-medium leading-6 text-gray-900 sm:mt-1.5"
+        >
+          {field.title}
+        </label>
+        <span className="text-sm leading-6 text-gray-500" id="field-required">
+          {field.required && 'Required'}
+        </span>
+      </div>
+      <div className="sm:col-span-2">
+        <Switch.Group as="div" className="flex items-center justify-between">
+      <span className="flex flex-grow flex-col">
+        <Switch.Description as="span" className="text-sm text-gray-500">
+          {field.description}
+        </Switch.Description>
+      </span>
+          <Switch
+            checked={enabled}
+            onChange={(v) => {
+              if (onChange) {
+                onChange(v)
+              }
+              setEnabled(v)
+            }}
+            className={classNames(
+              enabled ? 'bg-indigo-600' : 'bg-gray-200',
+              'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
+            )}
+          >
+            <span
+              aria-hidden="true"
+              className={classNames(
+                enabled ? 'translate-x-5' : 'translate-x-0',
+                'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
+              )}
+            />
+          </Switch>
+        </Switch.Group>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/self-service-fields/TextField.tsx b/frontend/src/components/self-service-fields/TextField.tsx
new file mode 100644
index 0000000..eaaa70f
--- /dev/null
+++ b/frontend/src/components/self-service-fields/TextField.tsx
@@ -0,0 +1,38 @@
+import {InputHTMLAttributes} from "react";
+
+interface Props {
+  field: any;
+  inputMode?: InputHTMLAttributes<HTMLInputElement>['inputMode'];
+}
+
+export default function TextField({field, inputMode}: Props) {
+
+  return (
+    <div className="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-2 sm:px-6 sm:py-5">
+      <div>
+        <label
+          htmlFor={field.slug}
+          className="block text-sm font-medium leading-6 text-gray-900 sm:mt-1.5"
+        >
+          {field.title}
+        </label>
+        <span className="text-sm leading-6 text-gray-500" id="field-required">
+          {field.required && 'Required'}
+        </span>
+      </div>
+      <div className="sm:col-span-2">
+        <input
+          type="text"
+          name={field.slug}
+          id={field.slug}
+          placeholder={field.placeholder}
+          defaultValue={field.default}
+          required={field.required}
+          aria-describedby="field-required"
+          inputMode={inputMode}
+          className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/self-service-fields/TextareaField.tsx b/frontend/src/components/self-service-fields/TextareaField.tsx
new file mode 100644
index 0000000..02e593b
--- /dev/null
+++ b/frontend/src/components/self-service-fields/TextareaField.tsx
@@ -0,0 +1,32 @@
+interface Props {
+  field: any;
+}
+
+export default function TextareaField({field}: Props) {
+
+  return (
+    <div className="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-2 sm:px-6 sm:py-5">
+      <div>
+        <label
+          htmlFor={field.slug}
+          className="block text-sm font-medium leading-6 text-gray-900 sm:mt-1.5"
+        >
+          {field.title}
+        </label>
+        <span className="text-sm leading-6 text-gray-500" id="field-required">
+          {field.required && 'Required'}
+        </span>
+      </div>
+      <div className="sm:col-span-2">
+       <textarea
+         id="about"
+         name="about"
+         rows={3}
+         className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+         defaultValue={''}
+       />
+        <p className="mt-3 text-sm leading-6 text-gray-600">{field.description}</p>
+      </div>
+    </div>
+  )
+}