feat(app): add ingress to app service form [EE-5569] (#9106)

app/react/kubernetes/applications/CreateView/application-services/components/ContainerPortInput.tsx

@@ -0,0 +1,35 @@
+import { ChangeEvent } from 'react';
+
+import { InputGroup } from '@@/form-components/InputGroup';
+
+type Props = {
+  serviceIndex: number;
+  portIndex: number;
+  value?: number;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+
+export function ContainerPortInput({
+  serviceIndex,
+  portIndex,
+  value,
+  onChange,
+}: Props) {
+  return (
+    <InputGroup size="small">
+      <InputGroup.Addon required>Container port</InputGroup.Addon>
+      <InputGroup.Input
+        type="number"
+        className="form-control min-w-max"
+        name={`container_port_${portIndex}`}
+        placeholder="80"
+        min="1"
+        max="65535"
+        value={value ?? ''}
+        onChange={onChange}
+        required
+        data-cy={`k8sAppCreate-containerPort-${serviceIndex}-${portIndex}`}
+      />
+    </InputGroup>
+  );
+}

app/react/kubernetes/applications/CreateView/application-services/components/ServicePortInput.tsx

@@ -0,0 +1,35 @@
+import { ChangeEvent } from 'react';
+
+import { InputGroup } from '@@/form-components/InputGroup';
+
+type Props = {
+  serviceIndex: number;
+  portIndex: number;
+  value?: number;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+
+export function ServicePortInput({
+  serviceIndex,
+  portIndex,
+  value,
+  onChange,
+}: Props) {
+  return (
+    <InputGroup size="small">
+      <InputGroup.Addon required>Service port</InputGroup.Addon>
+      <InputGroup.Input
+        type="number"
+        className="form-control min-w-max"
+        name={`service_port_${portIndex}`}
+        placeholder="80"
+        min="1"
+        max="65535"
+        value={value ?? ''}
+        onChange={onChange}
+        required
+        data-cy={`k8sAppCreate-servicePort-${serviceIndex}-${portIndex}`}
+      />
+    </InputGroup>
+  );
+}

app/react/kubernetes/applications/CreateView/application-services/components/ServiceTabLabel.tsx

@@ -0,0 +1,33 @@
+import { AlertTriangle } from 'lucide-react';
+
+import { Badge } from '@@/Badge';
+import { Icon } from '@@/Icon';
+
+type Props = {
+  serviceTypeLabel: string;
+  serviceTypeCount: number;
+  serviceTypeHasErrors: boolean;
+};
+
+export function ServiceTabLabel({
+  serviceTypeLabel,
+  serviceTypeCount,
+  serviceTypeHasErrors,
+}: Props) {
+  return (
+    <div className="inline-flex items-center">
+      {serviceTypeLabel}
+      {serviceTypeCount && (
+        <Badge
+          className="ml-2 flex-none"
+          type={serviceTypeHasErrors ? 'warn' : 'info'}
+        >
+          {serviceTypeHasErrors && (
+            <Icon icon={AlertTriangle} className="!mr-1" />
+          )}
+          {serviceTypeCount}
+        </Badge>
+      )}
+    </div>
+  );
+}

app/react/kubernetes/applications/CreateView/application-services/components/ServiceTabs.tsx

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+
+import { ServiceTypeOption, ServiceTypeValue } from '../types';
+
+type Props = {
+  serviceTypeOptions: ServiceTypeOption[];
+  selectedServiceType: ServiceTypeValue;
+  setSelectedServiceType: (serviceTypeValue: ServiceTypeValue) => void;
+};
+
+export function ServiceTabs({
+  serviceTypeOptions,
+  selectedServiceType,
+  setSelectedServiceType,
+}: Props) {
+  return (
+    <div className="flex pl-2">
+      {serviceTypeOptions.map(({ label }, index) => (
+        <label
+          key={index}
+          className={clsx(
+            '!mb-0 inline-flex cursor-pointer items-center gap-2 border-0 border-b-2 border-solid bg-transparent px-4 py-2 font-medium',
+            selectedServiceType === serviceTypeOptions[index].value
+              ? 'border-blue-8  text-blue-8 th-highcontrast:border-blue-6 th-highcontrast:text-blue-6 th-dark:border-blue-6 th-dark:text-blue-6'
+              : 'border-transparent'
+          )}
+        >
+          <input
+            type="radio"
+            name="widget-tabs"
+            className="hidden"
+            value={serviceTypeOptions[index].value}
+            checked={selectedServiceType === serviceTypeOptions[index].value}
+            onChange={(e) =>
+              setSelectedServiceType(e.target.value as ServiceTypeValue)
+            }
+          />
+          {label}
+        </label>
+      ))}
+    </div>
+  );
+}