feat: disable editing of name

Author: CasLubbers

src/components/Backup.tsx

@@ -11,9 +11,14 @@ export const getBackupSchema = (teamId: string): any => {
   return schema
 }
 
-export const getBackupUiSchema = (user: GetSessionApiResponse['user'], teamId: string): any => {
+export const getBackupUiSchema = (
+  user: GetSessionApiResponse['user'],
+  teamId: string,
+  isNameEditable: boolean,
+): any => {
   const uiSchema = {
     id: { 'ui:widget': 'hidden' },
+    name: { 'ui:readonly': !isNameEditable },
     teamId: { 'ui:widget': 'hidden' },
     namespace: teamId !== 'admin' && { 'ui:widget': 'hidden' },
   }
@@ -43,7 +48,7 @@ export default function ({ backup, teamId, ...other }: Props): React.ReactElemen
   // END HOOKS
   const formData = cloneDeep(data)
   const schema = getBackupSchema(teamId)
-  const uiSchema = getBackupUiSchema(user, teamId)
+  const uiSchema = getBackupUiSchema(user, teamId, !backup.name)
   return (
     <Form
       schema={schema}

src/components/Catalog.tsx

@@ -85,7 +85,7 @@ export const getWorkloadSchema = (): any => {
   return cloneDeep(getSpec().components.schemas.Workload)
 }
 
-export const getWorkloadUiSchema = (user: GetSessionApiResponse['user'], teamId: string): any => {
+export const getWorkloadUiSchema = (user: GetSessionApiResponse['user'], teamId: string, isNameEditable): any => {
   const uiSchema = {
     'ui:description': ' ',
     id: { 'ui:widget': 'hidden' },
@@ -98,6 +98,7 @@ export const getWorkloadUiSchema = (user: GetSessionApiResponse['user'], teamId:
     chart: { 'ui:widget': 'hidden' },
     revision: { 'ui:widget': 'hidden' },
     namespace: teamId !== 'admin' && { 'ui:widget': 'hidden' },
+    name: { 'ui:readonly': !isNameEditable },
   }
   applyAclToUiSchema(uiSchema, user, teamId, 'workload')
   return uiSchema
@@ -187,7 +188,7 @@ export default function ({
   }
 
   const schema = getWorkloadSchema()
-  const uiSchema = getWorkloadUiSchema(user, teamId)
+  const uiSchema = getWorkloadUiSchema(user, teamId, !workload?.name)
 
   return (
     <Box sx={{ width: '100%' }}>

src/components/Netpol.tsx

@@ -23,9 +23,14 @@ export const getNetpolSchema = (teamId: string, formData: any): any => {
   return schema
 }
 
-export const getNetpolUiSchema = (user: GetSessionApiResponse['user'], teamId: string): any => {
+export const getNetpolUiSchema = (
+  user: GetSessionApiResponse['user'],
+  teamId: string,
+  isNameEditable: boolean,
+): any => {
   const uiSchema = {
     id: { 'ui:widget': 'hidden' },
+    name: { 'ui:readonly': !isNameEditable },
     teamId: { 'ui:widget': 'hidden' },
   }
   applyAclToUiSchema(uiSchema, user, teamId, 'netpol')
@@ -46,7 +51,7 @@ export default function ({ netpol, teamId, ...other }: Props): React.ReactElemen
   // END HOOKS
   const formData = cloneDeep(data)
   const schema = getNetpolSchema(teamId, formData)
-  const uiSchema = getNetpolUiSchema(user, teamId)
+  const uiSchema = getNetpolUiSchema(user, teamId, !netpol?.name)
   return (
     <Form schema={schema} uiSchema={uiSchema} data={formData} onChange={setData} resourceType='Netpol' {...other} />
   )

src/components/Project.tsx

@@ -34,9 +34,10 @@ const getProjectSchema = (): any => {
   return schema
 }
 
-const getProjectUiSchema = (user: GetSessionApiResponse['user'], teamId: string): any => {
+const getProjectUiSchema = (user: GetSessionApiResponse['user'], teamId: string, isNameEditable: boolean): any => {
   const uiSchema = {
     id: { 'ui:widget': 'hidden' },
+    name: { 'ui:readonly': !isNameEditable },
     teamId: { 'ui:widget': 'hidden' },
     build: { 'ui:widget': 'hidden' },
     workload: { 'ui:widget': 'hidden' },
@@ -220,7 +221,7 @@ export default function ({
   }, [project])
 
   const projectSchema = getProjectSchema()
-  const projectUiSchema = getProjectUiSchema(user, teamId)
+  const projectUiSchema = getProjectUiSchema(user, teamId, !project?.name)
 
   const buildSchema = getBuildSchema(teamId)
   const buildUiSchema = getBuildUiSchema(user, teamId, formData?.build, !project?.build?.name)
@@ -244,7 +245,7 @@ export default function ({
   const { data: k8sServices } = useGetTeamK8SServicesQuery({ teamId })
   const { data: secrets } = useGetSecretsFromK8SQuery({ teamId })
   const serviceSchema = getServiceSchema(appsEnabled, settings, formData?.service, teamId, secrets, k8sServices)
-  const serviceUiSchema = getServiceUiSchema(appsEnabled, formData?.service, user, teamId)
+  const serviceUiSchema = getServiceUiSchema(appsEnabled, formData?.service, user, teamId, !formData?.service.name)
   serviceUiSchema.name = { 'ui:widget': 'hidden' }
 
   const teamSubdomain = getHost(formData?.name, teamId)

src/components/Service.tsx

@@ -135,6 +135,7 @@ export const getServiceUiSchema = (
   formData: GetServiceApiResponse,
   user: GetSessionApiResponse['user'],
   teamId: string,
+  isNameEditable: boolean,
   isKsvc = false,
 ): any => {
   const ing = formData?.ingress as Record<string, any>
@@ -145,6 +146,7 @@ export const getServiceUiSchema = (
     : { 'ui:widget': 'hidden' }
   const uiSchema: any = {
     id: { 'ui:widget': 'hidden' },
+    name: { 'ui:readonly': !isNameEditable },
     teamId: { 'ui:widget': 'hidden' },
     ksvc: { 'ui:widget': ksvcWidget },
     ingress: {
@@ -214,7 +216,7 @@ export default function ({ service, k8sServices, secrets, teamId, ...other }: Pr
   updateIngressField(formData, defaultSubdomain, isKsvc)
   // pass to the schema getters that manipulate the schemas based on form data
   const schema = getServiceSchema(appsEnabled, settings, formData, teamId, secrets, k8sServices)
-  const uiSchema = getServiceUiSchema(appsEnabled, formData, user, teamId, isKsvc)
+  const uiSchema = getServiceUiSchema(appsEnabled, formData, user, teamId, !service?.name, isKsvc)
   return (
     <Form schema={schema} uiSchema={uiSchema} data={formData} onChange={setData} resourceType='Service' {...other} />
   )

src/components/rjsf/Form.tsx

@@ -93,7 +93,6 @@ export default function ({
   const id = data?.[idProp]
   const initialNameRef = useRef(data?.[nameProp]) // Store initial name once
   const originalName = initialNameRef.current // Always refer to the initial name
-  console.log('data', originalName)
   const docUrl =
     schema && schema['x-externalDocsPath'] ? `https://apl-docs.net/${schema['x-externalDocsPath']}` : undefined
   const keepValues = [[{}]] // rjsf structs that open parts of the form, may not be stripped