diff --git a/src/apps/editor/components/job-dialog/content/container/container-sets.tsx b/src/apps/editor/components/job-dialog/content/container/container-sets.tsx new file mode 100644 index 0000000..4c22d0e --- /dev/null +++ b/src/apps/editor/components/job-dialog/content/container/container-sets.tsx @@ -0,0 +1,138 @@ +import React from 'react'; + +import { Chip, ChipWrapper, Input } from '@/aero'; +import { JobDocs } from '@/editor/config'; +import { useAdvancedInput, useSelectedJobId } from '@/editor/hooks'; +import { useJobContainerSet } from '@/editor/stores'; + +import { Section, SectionHeader } from '../shared'; + +const EnvRegex = /^([a-zA-Z0-9_]+)=(.+)$/; + +type Props = { + setKey: Parameters[1]; + title: string; + docs: string; + subtitle: string; + placeholder: string; + inputOptions?: Pick< + Parameters[1], + 'disableSpaces' | 'preventUppercase' | 'spaceAsUnderscore' | 'numOnly' + >; + validateValue?: (value: string) => boolean; +}; + +export const ContainerSet: React.FC = ({ + setKey, + title, + docs, + subtitle, + placeholder, + inputOptions, + validateValue, +}) => { + const jobId = useSelectedJobId(); + const { + [setKey]: values, + onAdd, + onDelete, + } = useJobContainerSet(jobId ?? '', setKey); + + const [methods, { onResetInput }] = useAdvancedInput('', { + ...inputOptions, + onEnterPress: (value, { onResetInput }) => { + if (validateValue && !validateValue(value)) { + return; + } + + onAdd(value); + onResetInput(); + }, + }); + + const handleOnAddValue = () => { + if (validateValue && !validateValue(methods.value)) { + return; + } + + onAdd(methods.value); + onResetInput(); + }; + + const handleOnClick = (value: string) => () => { + onDelete(value); + }; + + return ( +
+ + {values?.size ? ( + + {[...values].map((value) => ( + + ))} + + ) : null} + +
+ ); +}; + +export const ContainerEnv: React.FC = () => { + const validateValue = (value: string) => EnvRegex.test(value); + + return ( + + ); +}; +export const ContainerPorts: React.FC = () => ( + +); + +export const ContainerVolumes: React.FC = () => ( + +); + +export const ContainerOptions: React.FC = () => ( + +); diff --git a/src/apps/editor/components/job-dialog/content/container/container.tsx b/src/apps/editor/components/job-dialog/content/container/container.tsx index ac5a7ad..b3370e4 100644 --- a/src/apps/editor/components/job-dialog/content/container/container.tsx +++ b/src/apps/editor/components/job-dialog/content/container/container.tsx @@ -5,6 +5,12 @@ import { JobDocs } from '@/editor/config'; import { ContainerCredentials } from './container-credentials'; import { ContainerImage } from './container-image'; +import { + ContainerEnv, + ContainerOptions, + ContainerPorts, + ContainerVolumes, +} from './container-sets'; import { SectionHeader } from '../shared'; export const ContainerContent: React.FC = () => ( @@ -16,5 +22,9 @@ export const ContainerContent: React.FC = () => ( /> + + + + );