feat: service page using form components (#525)

ElderMatt · dennisvankekem · web-flow · commit ccbc6df6fe10 · 2025-04-23T15:47:38.000+02:00
* feat: basic fields for service

* feat: first run

* feat: some fields are now loading data

* feat: all fields working

* feat: number field with custom end andorment

* fix: validation message now visible

* feat: fix custom errors

* fix: knative error

* fix: remove demo data

* fix: find services and secrets

* fix: find service

* fix: find secrets

* fix: subdomain

* fix: remove cname and headers if empty

* fix: styling subdomain and paths

* fix: remove demo values

* fix: styling and refresh page empty values

* fix: removed logs

* fix: urls empty and namespace required

* feat: added linkednumber validation and url helper

* fix: doc change console log removed and comment fixed

* feat: ports is select and filter services

* fix: serviceid to servicename

* fix: put back smtp in team component

* Update Team.tsx

* feat: added keys and changed texts

* fix: url being empty

* fix: set url

* fix: fetching check

* fix: set service and filtered services

* feat: platform ingress classnames now fetched

* feat: use advancedsettings component from APL-540

* fix: rerender issues

* feat: use api v2

* fix: empty fields and double slash in overview

* fix: teams being undefined

* fix: empty teams

* fix: undefined paths

* fix: trafficmanagement and dropdowns

* fix: default value in linkednumber component

* fix: add default ingressclassname platform

* feat: added adjustable width to autocomplete

* feat: cname domainsuffix validation

* fix: light mode cname text

* fix: clamped values

* fix: comment from ux findings

* fix: pathing and forward slash

* fix: uxfindings

* fix: save changes instead of edit service

* fix: cname styling

* fix: add buttons in keyvalue

* fix: removed tsnocheck

---------

Co-authored-by: dvankeke &lt;dvankeke@akamai.com&gt;
Co-authored-by: Dennis van Kekem &lt;38350840+dennisvankekem@users.noreply.github.com&gt;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
     "@types/js-yaml": "^4.0.9",
     "@types/json-schema": "^7.0.15",
     "@types/lodash": "^4.17.15",
+    "@types/ramda": "^0.30.2",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
     "@types/react-helmet": "5.0.20",
diff --git a/public/assets/number_icon.svg b/public/assets/number_icon.svg
@@ -0,0 +1,4 @@
+<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 0.666748L0 5.66675L1.175 6.84175L5 3.02508L8.825 6.84175L10 5.66675L5 0.666748Z" fill="#83868B"/>
+<path d="M8.825 12.1584L5 15.9751L1.175 12.1584L0 13.3334L5 18.3334L10 13.3334L8.825 12.1584Z" fill="#83868B"/>
+</svg>
diff --git a/src/App.tsx b/src/App.tsx
@@ -18,8 +18,6 @@ import Catalog from 'pages/Catalog'
 import Error from 'pages/Error'
 import SealedSecret from 'pages/SealedSecret'
 import SealedSecrets from 'pages/SealedSecrets'
-import Service from 'pages/Service'
-import Services from 'pages/Services'
 import Setting from 'pages/Setting'
 import SettingsOverview from 'pages/SettingsOverview'
 import Team from 'pages/teams/create-edit'
@@ -51,6 +49,8 @@ import Policy from 'pages/Policy'
 import Maintenance from 'pages/Maintenance'
 import PrivateRoute from 'components/AuthzRoute'
 import Logout from 'pages/Logout'
+import Service from 'pages/services/create-edit'
+import Services from 'pages/services/overview'
 import CodeRepository from 'pages/code-repositories/create-edit'
 import CodeRepositories from 'pages/code-repositories/overview'
 import { HttpErrorBadRequest } from './utils/error'
diff --git a/src/components/AdvancedSettings.tsx b/src/components/AdvancedSettings.tsx
@@ -46,18 +46,19 @@ interface Props {
   title?: string
   children?: React.ReactNode
   noPaddingTop?: boolean
+  closed?: boolean
 }
 
 export default function AdvancedSettings(props: Props) {
-  const { title = 'Advanced Settings', description, children, noPaddingTop } = props
+  const { title = 'Advanced Settings', description, children, noPaddingTop, closed = false } = props
   const [expanded, setExpanded] = useState(true)
 
   const handleAccordionChange = () => {
     setExpanded((prev) => !prev)
   }
 
   return (
-    <StyledAccordion disableGutters expanded={expanded} onChange={handleAccordionChange}>
+    <StyledAccordion defaultExpanded={!closed} disableGutters onChange={handleAccordionChange}>
       <StyledAccordionSummary
         expandIcon={<KeyboardArrowRight />}
         sx={{
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -143,11 +143,11 @@ export default function Header({ onOpenSidebar, isCollapse = false, verticalLayo
           <Select
             size='small'
             color='secondary'
-            value={(teams.length && oboTeamId) || ''}
+            value={(teams?.length && oboTeamId) || ''}
             onChange={handleChangeTeam}
             data-cy='select-oboteam'
           >
-            {teams.map((teamName) => (
+            {teams?.map((teamName) => (
               <MenuItem key={teamName} value={teamName} data-cy={`select-oboteam-${teamName}`}>
                 {teamName}
               </MenuItem>
diff --git a/src/components/Service.tsx b/src/components/Service.tsx
@@ -25,11 +25,11 @@ export const addDomainEnumField = (
   formData: GetServiceApiResponse,
 ): void => {
   const { cluster, dns } = settings
-  if (['cluster', 'tlsPass'].includes(formData?.ingress?.type)) return
+  // if (['cluster', 'tlsPass'].includes(formData?.ingress?.type)) return
   const ing = formData?.ingress as any
-  const idx = idxMap[formData?.ingress?.type]
+  // const idx = idxMap[formData?.ingress?.type]
   if (!formData || isEmpty(ing)) return
-  const ingressSchemaPath = getIngressSchemaPath(idx)
+  const ingressSchemaPath = getIngressSchemaPath(1)
   const ingressSchema = getStrict(schema, ingressSchemaPath)
   const zones = [cluster.domainSuffix, ...(dns?.zones || [])]
   if (!ingressSchema) return
@@ -85,7 +85,7 @@ export const getServiceSchema = (
   if (teamId !== 'admin') addServiceNameEnumField(schema, k8sServices, formData)
   addDomainEnumField(schema, settings, formData)
   const ing = formData?.ingress as Record<string, any>
-  const idx = idxMap[formData?.ingress?.type]
+  const idx = 1
   set(schema, 'properties.ingress.oneOf[1].allOf[0].properties.ingressClassName.enum', [
     'platform',
     ...settings.ingressClassNames,
diff --git a/src/components/Services.tsx b/src/components/Services.tsx
@@ -26,6 +26,7 @@ const renderHost = ({ ingress, teamId, name }): React.ReactElement | string => {
   if (!ingress) return ''
   if (ingress.type === 'cluster') return `${name}.team-${teamId}`
   const { subdomain, domain, paths } = ingress
+  // TODO: Replace functionality in apl-core so that / is not needed on path or domain
   const url = `${subdomain ? `${subdomain}.` : ''}${domain}${paths?.[0] || ''}`
   return (
     <MuiLink href={`https://${url}`} target='_blank' rel='noopener'>
diff --git a/src/components/forms/Autocomplete.tsx b/src/components/forms/Autocomplete.tsx
@@ -28,6 +28,7 @@ export interface EnhancedAutocompleteProps<
   /** Label for the "select all" option. */
   selectAllLabel?: string
   textFieldProps?: Partial<TextFieldProps>
+  width?: 'small' | 'medium' | 'large'
 }
 
 /**
@@ -70,6 +71,7 @@ export function Autocomplete<
     textFieldProps,
     value,
     onChange,
+    width = 'medium',
     ...rest
   } = props
   const [inPlaceholder, setInPlaceholder] = useState('')
@@ -82,7 +84,7 @@ export function Autocomplete<
         ((params) => (
           <TextField
             label={label}
-            width='medium'
+            width={width}
             loading={loading}
             placeholder={inPlaceholder || (placeholder ?? 'Select an option')}
             {...params}
diff --git a/src/components/forms/FormRow.tsx b/src/components/forms/FormRow.tsx
@@ -14,7 +14,7 @@ export default function FormRow(props: FormRowProps) {
     <Box
       display='flex'
       flexDirection='row'
-      alignItems='flex-end'
+      alignItems='baseline'
       sx={{
         '& > *:not(:last-child)': {
           marginRight: `${spacing}px`,
diff --git a/src/components/forms/KeyValue.tsx b/src/components/forms/KeyValue.tsx
@@ -150,7 +150,12 @@ export default function KeyValue(props: KeyValueProps) {
       ))}
       {addLabel && (
         <Button
-          sx={{ fontSize: '10px', color: `${error ? 'red' : ''}` }}
+          sx={{
+            paddingLeft: 'inherit',
+            fontSize: '10px',
+            color: `${error ? 'red' : ''}`,
+            ':hover': { backgroundColor: 'transparent' },
+          }}
           className={classes.addItemButton}
           onClick={handleAddItem}
         >
diff --git a/src/components/forms/KeyValueSingle.tsx b/src/components/forms/KeyValueSingle.tsx
@@ -0,0 +1,88 @@
+import React, { useState } from 'react'
+import { Box } from '@mui/material'
+import { TextField } from 'components/forms/TextField'
+import { makeStyles } from '@mui/styles'
+import { Typography } from 'components/Typography'
+import { InputLabel } from 'components/InputLabel'
+import { useFieldArray, useFormContext } from 'react-hook-form'
+import FormRow from './FormRow'
+
+const useStyles = makeStyles({
+  container: {
+    padding: '16px',
+    backgroundColor: '#424242',
+    borderRadius: '8px',
+  },
+  itemRow: {
+    marginBottom: '20px',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  addItemButton: {
+    marginLeft: '-10px',
+    display: 'flex',
+    alignItems: 'center',
+    textTransform: 'none',
+  },
+})
+
+interface registers {
+  registerA: any
+  registerB: any
+}
+
+interface KeyValueProps {
+  title: string
+  subTitle?: string
+  keyLabel: string
+  keyValue?: string
+  keyDisabled?: boolean
+  showLabel?: boolean
+  valueLabel: string
+  valueDisabled?: boolean
+  name: string
+  registers?: registers
+}
+
+export default function KeyValue(props: KeyValueProps) {
+  const classes = useStyles()
+  const { control, register } = useFormContext()
+
+  const {
+    title,
+    subTitle,
+    keyLabel,
+    valueLabel,
+    name,
+    keyValue,
+    keyDisabled = false,
+    showLabel = true,
+    valueDisabled = false,
+    registers,
+  } = props
+
+  const [items, setItems] = useState([{ [keyLabel.toLowerCase()]: '', [valueLabel.toLowerCase()]: '' }])
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name,
+  })
+
+  return (
+    <Box>
+      <InputLabel sx={{ fontWeight: 'bold', fontSize: '14px' }}>{title}</InputLabel>
+      {subTitle && <Typography sx={{ color: '#ABABAB' }}>{subTitle}</Typography>}
+
+      <FormRow spacing={10}>
+        <TextField
+          sx={{ color: '#B5B5BC' }}
+          disabled={keyDisabled}
+          value={keyValue}
+          label={showLabel ? keyLabel : ''}
+          {...registers.registerA}
+        />
+        <TextField disabled={valueDisabled} label={showLabel ? valueLabel : ''} {...registers.registerB} />
+      </FormRow>
+    </Box>
+  )
+}
diff --git a/src/components/forms/LinkedNumberField.tsx b/src/components/forms/LinkedNumberField.tsx
@@ -0,0 +1,93 @@
+import { Box, FormHelperText } from '@mui/material'
+import { TextField } from './TextField'
+import FormRow from './FormRow'
+
+interface Registers {
+  registerA: any
+  registerB: any
+  setValue: (name: string, value: any) => void
+  watch: (name: string) => any
+}
+
+interface LinkedNumberFieldProps {
+  labelA: string
+  labelB: string
+  valueMax: number
+  disabled: boolean
+  registers: Registers
+  helperText?: string
+  error?: boolean
+}
+
+export default function LinkedNumberField({
+  labelA,
+  labelB,
+  valueMax,
+  disabled,
+  registers,
+  error,
+  helperText,
+}: LinkedNumberFieldProps) {
+  const { setValue, watch } = registers
+  const defaultValue = valueMax / 2
+  const rawA = watch(registers.registerA.name)
+  const rawB = watch(registers.registerB.name)
+
+  const valueA: number = Math.min(Math.max(rawA ?? defaultValue, 0), valueMax)
+  const valueB: number = Math.min(Math.max(rawB ?? defaultValue, 0), valueMax)
+
+  function calculateValues(updatedValue: number, isValueA: boolean) {
+    const clamped = Math.min(Math.max(updatedValue, 0), valueMax)
+    const complementary = valueMax - clamped
+
+    if (isValueA) {
+      setValue(registers.registerA.name, clamped)
+      setValue(registers.registerB.name, complementary)
+    } else {
+      setValue(registers.registerA.name, complementary)
+      setValue(registers.registerB.name, clamped)
+    }
+  }
+
+  // Increment/Decrement helpers
+  const incrementA = () => calculateValues(valueA + 1, true)
+  const decrementA = () => calculateValues(valueA - 1, true)
+  const incrementB = () => calculateValues(valueB + 1, false)
+  const decrementB = () => calculateValues(valueB - 1, false)
+
+  return (
+    <Box>
+      <FormRow spacing={10}>
+        <TextField
+          {...registers.registerA}
+          width='small'
+          label={labelA}
+          value={valueA}
+          type='number'
+          inputProps={{ min: 0, max: valueMax }}
+          onChange={(e) => calculateValues(Number(e.target.value), true)}
+          onIncrement={incrementA}
+          onDecrement={decrementA}
+          suffixSymbol='%'
+          disabled={disabled}
+          error={error}
+        />
+        <TextField
+          {...registers.registerB}
+          width='small'
+          label={labelB}
+          value={valueB}
+          type='number'
+          inputProps={{ min: 0, max: valueMax }}
+          onChange={(e) => calculateValues(Number(e.target.value), false)}
+          onIncrement={incrementB}
+          onDecrement={decrementB}
+          suffixSymbol='%'
+          disabled={disabled}
+          error={error}
+        />
+      </FormRow>
+      {helperText && <FormHelperText data-qa-textfield-helper-text>{helperText}</FormHelperText>}
+    </Box>
+  )
+}
diff --git a/src/pages/services/create-edit/create-edit.styles.ts b/src/pages/services/create-edit/create-edit.styles.ts
diff --git a/src/pages/services/create-edit/create-edit.validator.ts b/src/pages/services/create-edit/create-edit.validator.ts
diff --git a/src/pages/services/create-edit/index.tsx b/src/pages/services/create-edit/index.tsx
diff --git a/src/pages/services/overview/index.tsx b/src/pages/services/overview/index.tsx
diff --git a/src/redux/otomiApi.ts b/src/redux/otomiApi.ts
