Refactor/variables-redux

schemas/tdp-server_0.1.0_openapi.json

@@ -1473,10 +1473,11 @@
     "schemas": {
       "Component": {
         "title": "Component",
-        "required": ["id", "version"],
+        "required": ["id", "service_id", "version"],
         "type": "object",
         "properties": {
           "id": { "title": "Id", "type": "string" },
+          "service_id": { "title": "Service Id", "type": "string" },
           "variables": { "$ref": "#/components/schemas/Variables" },
           "version": { "title": "Version", "type": "string" }
         },

src/clients/tdpClient.ts

@@ -16,6 +16,7 @@ import type {
 } from '@/client-sdk'
 
 export type {
+  Component,
   ComponentUpdate,
   DeploymentLog,
   DeploymentLogWithOperations,
@@ -39,7 +40,6 @@ export function createTdpClientInstance(configuration?: Configuration) {
   const planApi = new PlanApi(configuration)
   const schemaApi = new SchemaApi(configuration)
 
-  //TODO: export API and refactor function in hooks
   return {
     getServices: () => serviceApi.getServicesApiV1ServiceGet(),
     getService: (serviceId: string) =>

src/components/Layout/Menu.tsx

@@ -1,22 +1,9 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { BeakerIcon, Cog6ToothIcon } from '@heroicons/react/24/solid'
-import { useServicesList } from 'src/hooks'
 import { HeroIcon } from 'src/types'
 import { classNames } from 'src/utils'
-
-const baseMenuItems = [
-  {
-    name: 'Services',
-    href: '#',
-    icon: BeakerIcon,
-  },
-  {
-    name: 'Deployments',
-    href: '/deploy',
-    icon: Cog6ToothIcon,
-  },
-]
+import { useSelectServices } from 'src/features/variables'
 
 export type TNavItem = {
   name: string
@@ -26,7 +13,22 @@ export type TNavItem = {
 }
 
 export function Menu() {
-  const menuItems = useServicesList(baseMenuItems)
+  const menuItems = [
+    {
+      name: 'Services',
+      href: '#',
+      icon: BeakerIcon,
+      children: useSelectServices().value.map((v) => ({
+        name: v.value.id,
+        href: `/services/${v.value.id}`,
+      })),
+    },
+    {
+      name: 'Deployments',
+      href: '/deploy',
+      icon: Cog6ToothIcon,
+    },
+  ]
 
   return (
     <nav className="flex flex-col">

src/components/Services/ComponentsNav/ComponentsNav.tsx

@@ -1,37 +1,34 @@
-import { useRouter } from 'next/router'
-import { getFirstElementIfArray } from 'src/utils'
+import { useSelectService } from 'src/features/variables'
+import { useParamsContext } from '../useParamsContext'
 import { ComponentsDropdown } from './ComponentsDropdown'
 import { ComponentsTabs } from './ComponentsTabs'
-import { useComponentsList } from './hooks'
 
 export function ComponentsNav() {
-  const {
-    query: { serviceId: tempServiceId, componentId: tempComponentId },
-    isReady,
-  } = useRouter()
-  const componentId = isReady && getFirstElementIfArray(tempComponentId)
-  const serviceId = isReady && getFirstElementIfArray(tempServiceId)
-  const { loading, components } = useComponentsList(serviceId)
+  const { serviceId: currentServiceId, componentId: currentComponentId } =
+    useParamsContext()
 
-  if (!isReady && loading) return <p>Loading</p>
-
-  const [usedComponents, unusedComponents] = components.reduce(
-    (acc, component) => {
-      const { id: componentId, isUsed } = component
+  const [usedComponents, unusedComponents] = useSelectService(
+    currentServiceId
+  ).value.components.reduce(
+    ([usedComponents, unusedComponents], component) => {
+      const {
+        value: { id: componentId, variables },
+      } = component
+      const isUsed = Object.values(variables).length > 0
       if (isUsed) {
-        acc[0].push({
+        usedComponents.push({
           id: componentId,
-          href: `/services/${serviceId}/components/${componentId}`,
+          href: `/services/${currentServiceId}/components/${componentId}`,
         })
       } else {
-        acc[1].push({
+        unusedComponents.push({
           id: componentId,
-          href: `/services/${serviceId}/components/${componentId}`,
+          href: `/services/${currentServiceId}/components/${componentId}`,
         })
       }
-      return acc
+      return [usedComponents, unusedComponents]
     },
-    [[{ id: serviceId, href: `/services/${serviceId}` }], []]
+    [[{ id: currentServiceId, href: `/services/${currentServiceId}` }], []]
   )
 
   return (
@@ -40,14 +37,14 @@ export function ComponentsNav() {
         <ComponentsDropdown
           usedComponents={usedComponents}
           unusedComponents={unusedComponents}
-          currentTabId={componentId}
+          currentTabId={currentComponentId}
         />
       </div>
       <div className="hidden sm:block">
         <ComponentsTabs
           usedComponents={usedComponents}
           unusedComponents={unusedComponents}
-          currentTabId={componentId}
+          currentTabId={currentComponentId}
         />
       </div>
     </div>

src/components/Services/Layout.tsx

@@ -0,0 +1,25 @@
+import { useRouter } from 'next/router'
+import { PageTitle } from 'src/components/Layout/primitives/PageTitle'
+import { ComponentsNav } from 'src/components/Services/ComponentsNav'
+import { getFirstElementIfArray } from 'src/utils'
+import { ParamsContextProvider } from './ParamsContext'
+
+export function Layout({ children }) {
+  const {
+    query: { serviceId: tempServiceId, componentId: tempComponentId },
+    isReady,
+  } = useRouter()
+  const currentServiceId = isReady && getFirstElementIfArray(tempServiceId)
+  const currentComponentId = isReady && getFirstElementIfArray(tempComponentId)
+
+  return (
+    <ParamsContextProvider
+      serviceId={currentServiceId}
+      componentId={currentComponentId}
+    >
+      <PageTitle>Variables configuration</PageTitle>
+      <ComponentsNav />
+      {children}
+    </ParamsContextProvider>
+  )
+}

src/components/Services/ParamsContext.tsx

@@ -0,0 +1,22 @@
+import { createContext, useEffect } from 'react'
+import { clearUserInput } from 'src/features/userInput'
+import { useAppDispatch } from 'src/store'
+
+export const ParamsContext = createContext<{
+  serviceId: string
+  componentId?: string
+}>(null)
+
+export function ParamsContextProvider({ children, serviceId, componentId }) {
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    dispatch(clearUserInput())
+  }, [serviceId, dispatch])
+
+  return (
+    <ParamsContext.Provider value={{ serviceId, componentId }}>
+      {children}
+    </ParamsContext.Provider>
+  )
+}

src/components/Services/VariablesDisplay/Fields/ArrayList.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react'
+import { setProperty } from 'src/features/userInput'
+import { useAppDispatch } from 'src/store'
+import { classNames } from 'src/utils'
+import { useParamsContext } from '../../useParamsContext'
+
+export function ArrayList({
+  property,
+  value,
+  dict,
+}: {
+  property: string
+  value: any[]
+  dict?: string
+}) {
+  console.log('dict', dict)
+  return (
+    <ol className="flex flex-grow flex-col gap-2">
+      {value.map((v) => (
+        <ValueArrayElement key={v} value={v} dict={dict} property={property} />
+      ))}
+    </ol>
+  )
+}
+
+function ValueArrayElement({
+  value,
+  dict,
+  property,
+}: {
+  value: any
+  dict?: string
+  property: string
+}) {
+  const { serviceId, componentId } = useParamsContext()
+  const dispatch = useAppDispatch()
+  const [error, setError] = useState(false)
+  const fullProperty = [dict, property].filter(Boolean).join('.')
+
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setError(false)
+    try {
+      const parsedValue = JSON.parse(event.target.value)
+      dispatch(
+        setProperty({
+          serviceId,
+          componentId,
+          property: fullProperty,
+          value: parsedValue,
+        })
+      )
+    } catch (err) {
+      setError(true)
+    }
+  }
+
+  return (
+    <li key={fullProperty} className="flex grow">
+      <input
+        name={fullProperty}
+        className={classNames(
+          'grow',
+          error && 'bg-red-200',
+          typeof value === 'number' ? 'text-teal-600' : 'text-slate-700',
+          'hover:opacity-100 hover:bg-slate-200 transition duration-75 ease-in-out'
+        )}
+        defaultValue={JSON.stringify(value)}
+        onChange={handleChange}
+      />
+    </li>
+  )
+}

src/components/Services/VariablesDisplay/Fields/BooleanField.tsx

@@ -0,0 +1,36 @@
+import { Toggle } from 'src/components/commons'
+import { useAppDispatch } from 'src/store'
+import { useParamsContext } from '../../useParamsContext'
+import { setProperty } from 'src/features/userInput'
+
+export function BooleanField({
+  property,
+  value,
+  dict,
+}: {
+  property: string
+  value: boolean
+  dict?: string
+}) {
+  const { serviceId, componentId } = useParamsContext()
+  const dispatch = useAppDispatch()
+
+  const fullProperty = [dict, property].filter(Boolean).join('.')
+
+  function handleChecked(event: React.ChangeEvent<HTMLInputElement>) {
+    const newValue = event.target.checked
+    dispatch(
+      setProperty({
+        serviceId,
+        componentId,
+        property: fullProperty,
+        value: newValue,
+      })
+    )
+  }
+  return (
+    <div className="flex flex-grow flex-col">
+      <Toggle handleChecked={handleChecked} defaultValue={value} />
+    </div>
+  )
+}