feat: change the use of id to name

package.json

@@ -107,8 +107,7 @@
     "typescript": "4.7.3"
   },
   "engines": {
-    "node": ">=20 <21",
-    "npm": "^10"
+    "node": ">=20 <21"
   },
   "lint-staged": {
     "*.{js,ts,tsx,json,md,yml,yaml}": [

src/App.tsx

@@ -15,9 +15,7 @@ import Clusters from 'pages/Clusters'
 import Catalogs from 'pages/Catalogs'
 import Catalog from 'pages/Catalog'
 import Error from 'pages/Error'
-import Secret from 'pages/Secret'
 import SealedSecret from 'pages/SealedSecret'
-import Secrets from 'pages/Secrets'
 import SealedSecrets from 'pages/SealedSecrets'
 import Service from 'pages/Service'
 import Services from 'pages/Services'
@@ -108,7 +106,7 @@ function App() {
                                   exact
                                 />
                                 <PrivateRoute
-                                  path='/teams/:teamId/coderepositories/:coderepositoryId'
+                                  path='/teams/:teamId/coderepositories/:codeRepositoryName'
                                   component={CodeRepository}
                                   exact
                                 /> */}
@@ -130,12 +128,11 @@ function App() {
                                 <PrivateRoute path='/catalogs/:teamId' component={Catalogs} exact />
                                 <PrivateRoute path='/catalogs/:teamId/:catalogName' component={Catalog} exact />
                                 <PrivateRoute
-                                  path='/catalogs/:teamId/:catalogName/:workloadId'
+                                  path='/catalogs/:teamId/:catalogName/:workloadName'
                                   component={Catalog}
                                   exact
                                 />
                                 <PrivateRoute path='/services' component={Services} platformAdminRoute exact />
-                                <PrivateRoute path='/secrets' component={Secrets} platformAdminRoute exact />
                                 <PrivateRoute
                                   path='/sealed-secrets'
                                   component={SealedSecrets}
@@ -154,7 +151,6 @@ function App() {
                                 <PrivateRoute path='/teams/:teamId' component={Team} exact />
                                 <PrivateRoute path='/teams/:teamId/create-backup' component={Backup} exact />
                                 <PrivateRoute path='/teams/:teamId/create-netpol' component={Netpol} exact />
-                                <PrivateRoute path='/teams/:teamId/create-secret' component={Secret} exact />
                                 <PrivateRoute
                                   path='/teams/:teamId/create-sealedsecret'
                                   component={SealedSecret}
@@ -164,28 +160,26 @@ function App() {
                                 <PrivateRoute path='/teams/:teamId/create-user' component={User} exact />
                                 <PrivateRoute path='/teams/:teamId/create-project' component={Project} exact />
                                 <PrivateRoute path='/teams/:teamId/create-build' component={Build} exact />
-                                <PrivateRoute path='/teams/:teamId/secrets' component={Secrets} exact />
                                 <PrivateRoute path='/teams/:teamId/sealed-secrets' component={SealedSecrets} exact />
-                                <PrivateRoute path='/teams/:teamId/secrets/:secretId' component={Secret} exact />
                                 <PrivateRoute
-                                  path='/teams/:teamId/sealed-secrets/:secretId'
+                                  path='/teams/:teamId/sealed-secrets/:sealedSecretName'
                                   component={SealedSecret}
                                   exact
                                 />
                                 <PrivateRoute path='/teams/:teamId/backups' component={Backups} exact />
-                                <PrivateRoute path='/teams/:teamId/backups/:backupId' component={Backup} exact />
+                                <PrivateRoute path='/teams/:teamId/backups/:backupName' component={Backup} exact />
                                 <PrivateRoute path='/teams/:teamId/netpols' component={Netpols} exact />
-                                <PrivateRoute path='/teams/:teamId/netpols/:netpolId' component={Netpol} exact />
+                                <PrivateRoute path='/teams/:teamId/netpols/:netpolName' component={Netpol} exact />
                                 <PrivateRoute path='/teams/:teamId/projects' component={Projects} exact />
-                                <PrivateRoute path='/teams/:teamId/projects/:projectId' component={Project} exact />
+                                <PrivateRoute path='/teams/:teamId/projects/:projectName' component={Project} exact />
                                 {/* <Route path='/teams/:teamId/builds' component={Builds} exact /> */}
                                 <PrivateRoute exact path='/teams/:teamId/builds' component={Builds} />
-                                <PrivateRoute path='/teams/:teamId/builds/:buildId' component={Build} exact />
+                                <PrivateRoute path='/teams/:teamId/builds/:buildName' component={Build} exact />
                                 <PrivateRoute path='/teams/:teamId/policies' component={Policies} exact />
                                 <PrivateRoute path='/teams/:teamId/policies/:policyId' component={Policy} exact />
                                 <PrivateRoute path='/teams/:teamId/workloads' component={Workloads} exact />
                                 <PrivateRoute path='/teams/:teamId/services' component={Services} exact />
-                                <PrivateRoute path='/teams/:teamId/services/:serviceId' component={Service} exact />
+                                <PrivateRoute path='/teams/:teamId/services/:serviceName' component={Service} exact />
                                 <PrivateRoute path='/maintenance' component={Maintenance} platformAdminRoute exact />
                                 <Route path='/logout' component={Logout} />
                                 <Route path='*'>

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/Backups.tsx

@@ -15,7 +15,7 @@ interface Row {
 }
 
 const getBackupNames = (row: Row) => {
-  const path = `/teams/${row.teamId}/backups/${encodeURIComponent(row.id)}`
+  const path = `/teams/${row.teamId}/backups/${encodeURIComponent(row.name)}`
   return (
     <RLink to={path} label={row.name}>
       {row.name}

src/components/Build.tsx

@@ -11,10 +11,16 @@ export const getBuildSchema = (teamId: string): any => {
   return schema
 }
 
-export const getBuildUiSchema = (user: GetSessionApiResponse['user'], teamId: string, formData: any): any => {
+export const getBuildUiSchema = (
+  user: GetSessionApiResponse['user'],
+  teamId: string,
+  formData: any,
+  isNameEditable: boolean,
+): any => {
   const uiSchema = {
     id: { 'ui:widget': 'hidden' },
     teamId: { 'ui:widget': 'hidden' },
+    name: { 'ui:readonly': !isNameEditable },
     namespace: teamId !== 'admin' && { 'ui:widget': 'hidden' },
     secretName: !formData?.externalRepo && { 'ui:widget': 'hidden' },
   }
@@ -38,6 +44,6 @@ export default function ({ build, teamId, ...other }: Props): React.ReactElement
   // END HOOKS
   const formData = cloneDeep(data)
   const schema = getBuildSchema(teamId)
-  const uiSchema = getBuildUiSchema(user, teamId, formData)
+  const uiSchema = getBuildUiSchema(user, teamId, formData, !build?.name)
   return <Form schema={schema} uiSchema={uiSchema} data={formData} onChange={setData} resourceType='Build' {...other} />
 }

src/components/Builds.tsx

@@ -23,7 +23,7 @@ interface Row {
 }
 
 const getBuildLink = (row: Row) => {
-  const path = `/teams/${row.teamId}/builds/${encodeURIComponent(row.id)}`
+  const path = `/teams/${row.teamId}/builds/${encodeURIComponent(row.name)}`
   return (
     <RLink to={path} label={row.name}>
       {row.name}
@@ -163,7 +163,7 @@ export default function ({ builds, teamId }: Props): React.ReactElement {
     {
       id: 'Status',
       label: 'Status',
-      renderer: (row: Row) => getStatus(status?.builds?.[row.id]),
+      renderer: (row: Row) => getStatus(status?.builds?.[row.name]),
     },
   ]
 

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' },
@@ -100,6 +100,7 @@ export const getWorkloadUiSchema = (user: GetSessionApiResponse['user'], teamId:
     namespace: teamId !== 'admin' && { 'ui:widget': 'hidden' },
     createNamespace: teamId !== 'admin' && { 'ui:widget': 'hidden' },
     sidecarInject: teamId !== 'admin' && { 'ui:widget': 'hidden' },
+    name: { 'ui:readonly': !isNameEditable },
   }
   applyAclToUiSchema(uiSchema, user, teamId, 'workload')
   return uiSchema
@@ -108,7 +109,7 @@ export const getWorkloadUiSchema = (user: GetSessionApiResponse['user'], teamId:
 interface Props extends CrudProps {
   teamId: string
   workload?: any
-  workloadId?: string
+  workloadName?: string
   values?: any
   createWorkload: any
   updateWorkload: any
@@ -120,7 +121,7 @@ interface Props extends CrudProps {
 export default function ({
   teamId,
   workload,
-  workloadId,
+  workloadName,
   values,
   createWorkload,
   updateWorkload,
@@ -144,7 +145,7 @@ export default function ({
   const [tab, setTab] = useState(defTab)
   const handleTabChange = (event, tab) => {
     // on the values tab, reset the values to see the comments in the code editor
-    if (tab === 1 && !workloadId) setWorkloadValues(values)
+    if (tab === 1 && !workloadName) setWorkloadValues(values)
     setTab(tab)
   }
   const [data, setData] = useState<any>(workload)
@@ -163,20 +164,20 @@ export default function ({
     const path = workload?.path
     const body = { ...workloadBody, chartMetadata, url: workload?.url, path }
     let res
-    if (workloadId) {
+    if (workloadName) {
       dispatch(setError(undefined))
-      res = await updateWorkload({ teamId, workloadId, body })
-      res = await updateWorkloadValues({ teamId, workloadId, body: { values: workloadValues } })
+      res = await updateWorkload({ teamId, workloadName, body })
+      res = await updateWorkloadValues({ teamId, workloadName, body: { values: workloadValues } })
     } else {
       res = await createWorkload({ teamId, body })
-      res = await updateWorkloadValues({ teamId, workloadId: res.data.id, body: { values: workloadValues } })
+      res = await updateWorkloadValues({ teamId, workloadName: res.data.name, body: { values: workloadValues } })
     }
     if (res.error) return
     history.push(`/teams/${teamId}/workloads`)
   }
 
   const schema = getWorkloadSchema()
-  const uiSchema = getWorkloadUiSchema(user, teamId)
+  const uiSchema = getWorkloadUiSchema(user, teamId, !workload?.name)
 
   return (
     <Box sx={{ width: '100%' }}>
@@ -210,9 +211,9 @@ export default function ({
                 Submit
               </Button>
             )}
-            {workloadId && (
+            {workloadName && (
               <DeleteButton
-                onDelete={() => deleteWorkload({ teamId, workloadId })}
+                onDelete={() => deleteWorkload({ teamId, workloadName })}
                 resourceName={workload?.name}
                 resourceType='workload'
                 data-cy='button-delete-workload'
@@ -334,9 +335,9 @@ export default function ({
                 Submit
               </Button>
             )}
-            {workloadId && (
+            {workloadName && (
               <DeleteButton
-                onDelete={() => deleteWorkload({ teamId, workloadId })}
+                onDelete={() => deleteWorkload({ teamId, workloadName })}
                 resourceName={workload?.name}
                 resourceType='workload'
                 data-cy='button-delete-workload'

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/Netpols.tsx

@@ -8,11 +8,13 @@ import ListTable from './ListTable'
 
 const getNetpolLink = (isAdmin, ownerId) =>
   function (row) {
-    const { teamId, id, name }: { teamId: string; id: string; name: string } = row
+    const { teamId, name }: { teamId: string; id: string; name: string } = row
     if (!(isAdmin || teamId === ownerId)) return name
 
     const path =
-      isAdmin && !ownerId ? `/netpols/${encodeURIComponent(id)}` : `/teams/${teamId}/netpols/${encodeURIComponent(id)}`
+      isAdmin && !ownerId
+        ? `/netpols/${encodeURIComponent(name)}`
+        : `/teams/${teamId}/netpols/${encodeURIComponent(name)}`
     return (
       <RLink to={path} label={name}>
         {name}