Implement functionality to automatically populate template

Author: Yanni8

src/foxops/__main__.py

@@ -8,7 +8,7 @@
 from foxops.logger import get_logger, setup_logging
 from foxops.middlewares import request_id_middleware, request_time_middleware
 from foxops.openapi import custom_openapi
-from foxops.routers import auth, incarnations, not_found, version
+from foxops.routers import auth, incarnations, not_found, template, version
 
 #: Holds the module logger instance
 logger = get_logger(__name__)
@@ -48,6 +48,7 @@ def create_app():
     # Add routes to the protected router (authentication required)
     protected_router = APIRouter(dependencies=[Depends(static_token_auth_scheme)])
     protected_router.include_router(incarnations.router)
+    protected_router.include_router(template.router)
 
     app.include_router(public_router)
     app.include_router(protected_router)

src/foxops/dependencies.py

@@ -14,6 +14,7 @@
 from foxops.logger import get_logger
 from foxops.services.change import ChangeService
 from foxops.services.incarnation import IncarnationService
+from foxops.services.template import TemplateService
 from foxops.settings import (
     DatabaseSettings,
     GitlabHosterSettings,
@@ -94,6 +95,12 @@ def get_incarnation_service(
     return IncarnationService(incarnation_repository=incarnation_repository, hoster=hoster)
 
 
+def get_template_service(
+    hoster: Hoster = Depends(get_hoster),
+):
+    return TemplateService(hoster=hoster)
+
+
 def get_change_service(
     hoster: Hoster = Depends(get_hoster),
     change_repository: ChangeRepository = Depends(get_change_repository),

src/foxops/routers/template.py

@@ -0,0 +1,15 @@
+from fastapi import APIRouter, Depends
+
+from foxops.dependencies import get_template_service
+from foxops.services.template import TemplateService
+
+router = APIRouter(prefix="/api/templates", tags=["template"])
+
+
+@router.get("/variables")
+async def get_template_variables(
+    template_repository: str,
+    template_version: str,
+    template_service: TemplateService = Depends(get_template_service),
+):
+    return await template_service.get_template_variables(template_repository, template_version)

src/foxops/services/template.py

@@ -0,0 +1,13 @@
+from foxops.engine.models.template_config import TemplateConfig
+from foxops.hosters import Hoster
+
+
+class TemplateService:
+    def __init__(self, hoster: Hoster) -> None:
+        self.hoster = hoster
+
+    async def get_template_variables(self, template_repository: str, template_version: str) -> dict[str, str]:
+        async with self.hoster.cloned_repository(template_repository, refspec=template_version) as repo:
+            template_config = TemplateConfig.from_path(repo.directory / "fengine.yaml")
+
+        return {k: v.get("default", "") for k, v in template_config.model_dump().get("variables", {}).items()}

ui/src/components/Layout/Layout.tsx

@@ -29,7 +29,7 @@ const ErrorMessage = styled.div(({ theme }) => ({
     color: theme.colors.contrastText,
     float: 'right'
   },
-  width: 'min(25rem, 80%)'
+  width: 'min(25rem, 80%)',
 }))
 
 const ErrorText = styled.div({
@@ -86,7 +86,8 @@ const ErrorWrapper = styled.div({
   display: 'flex',
   alignItems: 'start',
   justifyContent: 'right',
-  paddingRight: '1rem'
+  paddingRight: '1rem',
+  pointerEvents: 'none'
 })
 
 const LoadbarWrapper = styled.div({

ui/src/routes/incarnations/Form.tsx

@@ -24,6 +24,7 @@ import { Tabs } from 'components/common/Tabs/Tabs'
 import { useNavigate } from 'react-router-dom'
 import { Dialog } from 'components/common/Dialog/Dialog'
 import { useErrorStore } from 'stores/error'
+import { TemplateDataPrefetcher } from './parts/TemplateDataPrefetcher'
 
 const DeleteIncarnationLink = styled.span`
   cursor: pointer;
@@ -121,14 +122,7 @@ export const IncarnationsForm = ({
   commitUrl,
   templateDataFull
 }: FormProps) => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    control,
-    watch,
-    getValues
-  } = useForm({
+  const { register, handleSubmit, formState: { errors }, control, watch, setValue, getValues } = useForm({
     defaultValues
   })
 
@@ -138,6 +132,7 @@ export const IncarnationsForm = ({
   }
 
   const templateRepo = watch('templateRepository')
+  const templateVersion = watch('templateVersion')
   const failed = templateRepo === '' && isEdit
   const navigate = useNavigate()
 
@@ -349,9 +344,10 @@ export const IncarnationsForm = ({
             ) : (
               <>
                 <strong>Template data JSON</strong>
-                <Hug my={16} h="100%">
+
+                <TemplateDataPrefetcher templateVersion={templateVersion} templateRepository={templateRepo} onFetchSuccess={data => setValue('templateData', JSON.stringify(data, null, 2))}>
                   {editTemplateDataController}
-                </Hug>
+                </TemplateDataPrefetcher>
               </>
             )}
           </Hug>

ui/src/routes/incarnations/parts/TemplateDataPrefetcher.tsx

@@ -0,0 +1,147 @@
+import styled from '@emotion/styled'
+import { Button } from 'components/common/Button/Button'
+import { Hug } from 'components/common/Hug/Hug'
+import { Tooltip } from 'components/common/Tooltip/Tooltip'
+import { useState } from 'react'
+import { template } from '../../../services/template'
+
+type TemplateDataPrefetcherProps = {
+    templateRepository: string,
+    templateVersion: string,
+    children: React.ReactNode,
+    onFetchSuccess?: (data: Record<string, string>) => void
+};
+
+const PreFetchWrapper = styled.div(({
+  height: '100%',
+  position: 'relative'
+}))
+
+const PreFetchBoxWrapper = styled.div(({
+  height: '100%',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  zIndex: 100,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: 'rgba(165, 165, 165, 0.6)'
+}))
+
+const PreFetchBox = styled.div(({
+  backgroundColor: 'rgba(49, 49, 49, 0.6)',
+  width: '80%',
+  minHeight: '60%',
+  maxHeight: '85%',
+  padding: '1rem',
+  borderRadius: '.8rem',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: 'white',
+  boxShadow: '0 0 5px rgba(0, 0, 0, 0.2)'
+}))
+
+const TemplateDataPrefetcherTitle = styled.h1(({
+  textAlign: 'center'
+}))
+
+const TemplateDataPrefetcherContent = styled.div(({
+  padding: '.5rem',
+  textAlign: 'center' }))
+
+const TemplateDataPrefetcherActions = styled.div(({
+  display: 'flex',
+  justifyContent: 'center',
+  padding: '.5rem'
+}))
+
+const MagicButton = styled.button(({
+  position: 'absolute',
+  bottom: '.8rem',
+  right: '.8rem',
+  width: '2.5rem',
+  height: '2.5rem',
+  fontSize: '1.5rem',
+  borderRadius: '50%',
+  border: '1px solid rgb(137, 137, 137)',
+  cursor: 'pointer',
+  padding: 0,
+  paddingBottom: '.2rem',
+  paddingLeft: '.2rem',
+  backgroundColor: 'rgba(255, 255, 255, 0.15)',
+
+  '&:hover': {
+    backgroundColor: 'rgba(255, 255, 255, 0.2)'
+  }
+
+}))
+
+export const TemplateDataPrefetcher = ({ templateRepository, templateVersion, children, onFetchSuccess }: TemplateDataPrefetcherProps) => {
+  const [isActivated, setIsActivated] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const fetchData = async () => {
+    if (onFetchSuccess) {
+      setIsLoading(true)
+      const data = await template.getDefaultVariables(templateRepository, templateVersion)
+      setIsLoading(false)
+      setIsActivated(false)
+      onFetchSuccess(data)
+
+      // TODO implement error handeling, if the fetch fails
+    }
+  }
+
+  const missingFields = []
+  if (!templateRepository) {
+    missingFields.push('Template repository')
+  }
+  if (!templateVersion) {
+    missingFields.push('Template version')
+  }
+
+  return isActivated ? (
+    <PreFetchWrapper>
+      <PreFetchBoxWrapper>
+        <PreFetchBox>
+          <TemplateDataPrefetcherTitle>Automatically populate the template data</TemplateDataPrefetcherTitle>
+          <TemplateDataPrefetcherContent>
+        You can automatically prefetch the data from the repository, which you have provided.
+          </TemplateDataPrefetcherContent>
+          <TemplateDataPrefetcherContent>
+        If you would wish to do so, click the button &quot;Prefetch data&quot; below. This will populate the template data with the data found in the repository.
+          </TemplateDataPrefetcherContent>
+          <TemplateDataPrefetcherContent>
+            <strong>Note: This will overwrite the current template data. And is not reversible.</strong>
+          </TemplateDataPrefetcherContent>
+          <TemplateDataPrefetcherActions style={{ height: '2rem' }}>
+            {missingFields.length > 0 && (
+              <span style={{ color: '#fc2121', margin: 0 }}>
+                Please fill in the missing data: <strong>{missingFields.join(', ')}</strong>
+              </span>
+            )}
+          </TemplateDataPrefetcherActions>
+
+          <TemplateDataPrefetcherActions>
+            <Hug m=".5rem">
+              <Tooltip title="Fetch data">
+                <Button loading={isLoading} minWidth="9.5rem" disabled={(!templateRepository || !templateVersion) || isLoading} type="button" onClick={fetchData}>Prefetch data</Button>
+              </Tooltip>
+            </Hug><Hug m=".5rem">
+              <Button variant="warning" minWidth="9.5rem" type="button" disabled={isLoading} onClick={() => setIsActivated(false)}>Continue Editing</Button>
+            </Hug>
+          </TemplateDataPrefetcherActions>
+        </PreFetchBox>
+      </PreFetchBoxWrapper>
+      {children}
+    </PreFetchWrapper>) : (
+    <PreFetchWrapper>
+      {children}
+      <MagicButton type="button" onClick={() => setIsActivated(true)}>🪄</MagicButton>
+    </PreFetchWrapper>
+  )
+}

ui/src/services/template.ts

@@ -0,0 +1,9 @@
+import { api } from './api'
+
+export const template = {
+  getDefaultVariables: async (templateRepository: string, templateVersion: string) => {
+    const data = await api.get<undefined, Record<string, string>>(`/templates/variables?template_repository=${templateRepository}&template_version=${templateVersion}`)
+    return data
+  }
+}
+