fix: Add tunneling label for service deployments

Author: wzrdx

src/components/create-job/sections/AppParametersSection.tsx

@@ -4,7 +4,13 @@ import NumberInputWithLabel from '@shared/NumberInputWithLabel';
 import SelectWithLabel from '@shared/SelectWithLabel';
 import { useFormContext } from 'react-hook-form';
 
-export default function AppParametersSection({ baseName = 'deployment' }: { baseName?: string }) {
+export default function AppParametersSection({
+    baseName = 'deployment',
+    enableTunnelingLabel = false,
+}: {
+    baseName?: string;
+    enableTunnelingLabel?: boolean;
+}) {
     const { watch, trigger } = useFormContext();
 
     const enableTunneling: (typeof BOOLEAN_TYPES)[number] = watch(`${baseName}.enableTunneling`);
@@ -31,6 +37,15 @@ export default function AppParametersSection({ baseName = 'deployment' }: { base
             {enableTunneling === BOOLEAN_TYPES[0] && (
                 <div className="flex gap-4">
                     <InputWithLabel name={`${baseName}.tunnelingToken`} label="Tunnel Token" placeholder="Starts with 'ey'" />
+
+                    {enableTunnelingLabel && (
+                        <InputWithLabel
+                            name={`${baseName}.tunnelingLabel`}
+                            label="Tunnel Label"
+                            placeholder="my-tunnel"
+                            isOptional
+                        />
+                    )}
                 </div>
             )}
         </div>

src/components/create-job/steps/deployment/ServiceDeployment.tsx

@@ -27,7 +27,7 @@ function ServiceDeployment({ isEditingJob }: { isEditingJob?: boolean }) {
 
     return (
         <div className="col gap-6">
-            <SlateCard title="Service Identity" label={containerOrWorkerType?.icon}>
+            <SlateCard title="Service Identity" label={containerOrWorkerType?.tag}>
                 <div className="flex gap-4">
                     <InputWithLabel name="deployment.jobAlias" label="Alias" placeholder="Service" />
                 </div>
@@ -36,7 +36,7 @@ function ServiceDeployment({ isEditingJob }: { isEditingJob?: boolean }) {
             <TargetNodesCard isEditingJob={isEditingJob} />
 
             <SlateCard title="App Parameters">
-                <AppParametersSection />
+                <AppParametersSection enableTunnelingLabel />
             </SlateCard>
 
             {containerOrWorkerType.inputs && (

src/data/containerResources.tsx

@@ -1,6 +1,4 @@
 import { JobType } from '@typedefs/deeploys';
-import { DiMysql } from 'react-icons/di';
-import { SiMongodb, SiPostgresql } from 'react-icons/si';
 
 export type ContainerOrWorkerType = {
     id: number;
@@ -21,7 +19,7 @@ export type Service = ContainerOrWorkerType & {
     port?: number;
     image?: string;
     dbSystem?: string;
-    icon?: React.ReactNode;
+    tag?: React.ReactNode;
     inputs?: { key: string; label: string }[];
 };
 
@@ -49,7 +47,6 @@ export type RunningJobResources = {
 const getPostgresTag = () => (
     <div className="center-all h-[30px] rounded-md bg-blue-100 px-2">
         <div className="row gap-1.5 text-blue-600">
-            <SiPostgresql className="text-xl" />
             <div className="compact">PostgreSQL</div>
         </div>
     </div>
@@ -58,7 +55,6 @@ const getPostgresTag = () => (
 const getMySQLTag = () => (
     <div className="center-all h-[30px] rounded-md bg-orange-100 px-2">
         <div className="row gap-0.5 text-orange-600">
-            <DiMysql className="text-[28px]" />
             <div className="compact">MySQL</div>
         </div>
     </div>
@@ -67,7 +63,6 @@ const getMySQLTag = () => (
 const getMongoDBTag = () => (
     <div className="center-all h-[30px] rounded-md bg-green-100 px-2">
         <div className="row gap-0.5 text-green-600">
-            <SiMongodb className="text-xl" />
             <div className="compact">MongoDB</div>
         </div>
     </div>
@@ -278,7 +273,7 @@ export const serviceContainerTypes: Service[] = [
         port: 5432,
         image: 'postgres:17',
         dbSystem: 'PostgreSQL',
-        icon: getPostgresTag(),
+        tag: getPostgresTag(),
         inputs: [{ key: 'POSTGRES_PASSWORD', label: 'PostgreSQL Password' }],
     },
     {
@@ -297,7 +292,7 @@ export const serviceContainerTypes: Service[] = [
         port: 5432,
         image: 'postgres:17',
         dbSystem: 'PostgreSQL',
-        icon: getPostgresTag(),
+        tag: getPostgresTag(),
         inputs: [{ key: 'POSTGRES_PASSWORD', label: 'PostgreSQL Password' }],
     },
     {
@@ -316,7 +311,7 @@ export const serviceContainerTypes: Service[] = [
         port: 3306,
         image: 'mysql',
         dbSystem: 'MySQL',
-        icon: getMySQLTag(),
+        tag: getMySQLTag(),
         inputs: [{ key: 'MYSQL_ROOT_PASSWORD', label: 'MySQL Root Password' }],
     },
     {
@@ -335,7 +330,7 @@ export const serviceContainerTypes: Service[] = [
         port: 3306,
         image: 'mysql',
         dbSystem: 'MySQL',
-        icon: getMySQLTag(),
+        tag: getMySQLTag(),
         inputs: [{ key: 'MYSQL_ROOT_PASSWORD', label: 'MySQL Root Password' }],
     },
     {
@@ -354,7 +349,7 @@ export const serviceContainerTypes: Service[] = [
         port: 27017,
         image: 'mongodb',
         dbSystem: 'MongoDB',
-        icon: getMongoDBTag(),
+        tag: getMongoDBTag(),
         inputs: [
             { key: 'MONGO_INITDB_ROOT_USERNAME', label: 'MongoDB Root Username' },
             { key: 'MONGO_INITDB_ROOT_PASSWORD', label: 'MongoDB Root Password' },
@@ -376,7 +371,7 @@ export const serviceContainerTypes: Service[] = [
         port: 27017,
         image: 'mongodb',
         dbSystem: 'MongoDB',
-        icon: getMongoDBTag(),
+        tag: getMongoDBTag(),
         inputs: [
             { key: 'MONGO_INITDB_ROOT_USERNAME', label: 'MongoDB Root Username' },
             { key: 'MONGO_INITDB_ROOT_PASSWORD', label: 'MongoDB Root Password' },

src/lib/deeploy-utils.ts

@@ -478,8 +478,8 @@ export const formatServiceJobPayload = (
                 CONTAINER_RESOURCES: containerResources,
                 PORT: formatPort(containerType.port),
                 TUNNEL_ENGINE: 'ngrok',
-                NGROK_AUTH_TOKEN: deployment.tunnelingToken || null,
-                NGROK_EDGE_LABEL: deployment.tunnelingLabel || null,
+                NGROK_AUTH_TOKEN: deployment.tunnelingToken ?? null,
+                NGROK_EDGE_LABEL: deployment.tunnelingLabel ?? null,
                 TUNNEL_ENGINE_ENABLED: deployment.enableTunneling === 'True',
                 NGROK_USE_API: true,
                 ENV: envVars,

src/pages/deeploys/job/EditJob.tsx

@@ -280,7 +280,7 @@ export default function EditJob() {
             target_nodes: targetNodes,
             target_nodes_count: 0,
             app_params: {
-                CONTAINER_RESOURCES: formatContainerResources(containerType, undefined),
+                CONTAINER_RESOURCES: formatContainerResources(containerType, []),
             },
             project_id: job.projectHash,
             chainstore_response: true,

src/schemas/steps/deployment.ts

@@ -247,7 +247,19 @@ const baseDeploymentSchema = z.object({
     enableTunneling: z.enum(BOOLEAN_TYPES, { required_error: 'Value is required' }),
     port: validations.port,
     tunnelingToken: getOptionalStringSchema(512),
-    tunnelingLabel: getOptionalStringSchema(64),
+    tunnelingLabel: z
+        .union([
+            z.literal(''),
+            z
+                .string()
+                .min(3, 'Value must be at least 3 characters')
+                .max(64, 'Value cannot exceed 64 characters')
+                .regex(
+                    /^[a-zA-Z0-9!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]*$/,
+                    'Only letters, numbers and special characters allowed',
+                ),
+        ])
+        .optional(),
 });
 
 const containerDeploymentTypeSchema = z.object({