feat: new deployment provider: flexcdn

ui/src/components/workflow/node/DeployNodeConfigForm.tsx

@@ -46,6 +46,7 @@ import DeployNodeConfigFormBytePlusCDNConfig from "./DeployNodeConfigFormBytePlu
 import DeployNodeConfigFormCdnflyConfig from "./DeployNodeConfigFormCdnflyConfig";
 import DeployNodeConfigFormDogeCloudCDNConfig from "./DeployNodeConfigFormDogeCloudCDNConfig";
 import DeployNodeConfigFormEdgioApplicationsConfig from "./DeployNodeConfigFormEdgioApplicationsConfig";
+import DeployNodeConfigFormFlexCDNConfig from "./DeployNodeConfigFormFlexCDNConfig";
 import DeployNodeConfigFormGcoreCDNConfig from "./DeployNodeConfigFormGcoreCDNConfig";
 import DeployNodeConfigFormGoEdgeConfig from "./DeployNodeConfigFormGoEdgeConfig";
 import DeployNodeConfigFormHuaweiCloudCDNConfig from "./DeployNodeConfigFormHuaweiCloudCDNConfig";
@@ -240,6 +241,8 @@ const DeployNodeConfigForm = forwardRef<DeployNodeConfigFormInstance, DeployNode
           return <DeployNodeConfigFormDogeCloudCDNConfig {...nestedFormProps} />;
         case DEPLOYMENT_PROVIDERS.EDGIO_APPLICATIONS:
           return <DeployNodeConfigFormEdgioApplicationsConfig {...nestedFormProps} />;
+        case DEPLOYMENT_PROVIDERS.FLEXCDN:
+          return <DeployNodeConfigFormFlexCDNConfig {...nestedFormProps} />;
         case DEPLOYMENT_PROVIDERS.GCORE_CDN:
           return <DeployNodeConfigFormGcoreCDNConfig {...nestedFormProps} />;
         case DEPLOYMENT_PROVIDERS.GOEDGE:

ui/src/components/workflow/node/DeployNodeConfigFormCdnflyConfig.tsx

@@ -79,13 +79,23 @@ const DeployNodeConfigFormCdnflyConfig = ({ form: formInst, formName, disabled,
       </Form.Item>
 
       <Show when={fieldResourceType === RESOURCE_TYPE_SITE}>
-        <Form.Item name="siteId" label={t("workflow_node.deploy.form.cdnfly_site_id.label")} rules={[formRule]}>
+        <Form.Item
+          name="siteId"
+          label={t("workflow_node.deploy.form.cdnfly_site_id.label")}
+          rules={[formRule]}
+          tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.cdnfly_site_id.tooltip") }}></span>}
+        >
           <Input type="number" placeholder={t("workflow_node.deploy.form.cdnfly_site_id.placeholder")} />
         </Form.Item>
       </Show>
 
       <Show when={fieldResourceType === RESOURCE_TYPE_CERTIFICATE}>
-        <Form.Item name="certificateId" label={t("workflow_node.deploy.form.cdnfly_certificate_id.label")} rules={[formRule]}>
+        <Form.Item
+          name="certificateId"
+          label={t("workflow_node.deploy.form.cdnfly_certificate_id.label")}
+          rules={[formRule]}
+          tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.cdnfly_certificate_id.tooltip") }}></span>}
+        >
           <Input type="number" placeholder={t("workflow_node.deploy.form.cdnfly_certificate_id.placeholder")} />
         </Form.Item>
       </Show>

ui/src/components/workflow/node/DeployNodeConfigFormFlexCDNConfig.tsx

@@ -0,0 +1,84 @@
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input, Select } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import Show from "@/components/Show";
+
+type DeployNodeConfigFormFlexCDNConfigFieldValues = Nullish<{
+  resourceType: string;
+  certificateId?: string | number;
+}>;
+
+export type DeployNodeConfigFormFlexCDNConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormFlexCDNConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormFlexCDNConfigFieldValues) => void;
+};
+
+const RESOURCE_TYPE_CERTIFICATE = "certificate" as const;
+
+const initFormModel = (): DeployNodeConfigFormFlexCDNConfigFieldValues => {
+  return {
+    resourceType: RESOURCE_TYPE_CERTIFICATE,
+    certificateId: "",
+  };
+};
+
+const DeployNodeConfigFormFlexCDNConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: DeployNodeConfigFormFlexCDNConfigProps) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    resourceType: z.literal(RESOURCE_TYPE_CERTIFICATE, {
+      message: t("workflow_node.deploy.form.flexcdn_resource_type.placeholder"),
+    }),
+    certificateId: z
+      .union([z.string(), z.number().int()])
+      .nullish()
+      .refine((v) => {
+        if (fieldResourceType !== RESOURCE_TYPE_CERTIFICATE) return true;
+        return /^\d+$/.test(v + "") && +v! > 0;
+      }, t("workflow_node.deploy.form.flexcdn_certificate_id.placeholder")),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  const fieldResourceType = Form.useWatch("resourceType", formInst);
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
+      <Form.Item name="resourceType" label={t("workflow_node.deploy.form.flexcdn_resource_type.label")} rules={[formRule]}>
+        <Select placeholder={t("workflow_node.deploy.form.flexcdn_resource_type.placeholder")}>
+          <Select.Option key={RESOURCE_TYPE_CERTIFICATE} value={RESOURCE_TYPE_CERTIFICATE}>
+            {t("workflow_node.deploy.form.flexcdn_resource_type.option.certificate.label")}
+          </Select.Option>
+        </Select>
+      </Form.Item>
+
+      <Show when={fieldResourceType === RESOURCE_TYPE_CERTIFICATE}>
+        <Form.Item
+          name="certificateId"
+          label={t("workflow_node.deploy.form.flexcdn_certificate_id.label")}
+          rules={[formRule]}
+          tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.flexcdn_certificate_id.tooltip") }}></span>}
+        >
+          <Input type="number" placeholder={t("workflow_node.deploy.form.flexcdn_certificate_id.placeholder")} />
+        </Form.Item>
+      </Show>
+    </Form>
+  );
+};
+
+export default DeployNodeConfigFormFlexCDNConfig;

ui/src/components/workflow/node/DeployNodeConfigFormGoEdgeConfig.tsx

@@ -68,7 +68,12 @@ const DeployNodeConfigFormGoEdgeConfig = ({ form: formInst, formName, disabled,
       </Form.Item>
 
       <Show when={fieldResourceType === RESOURCE_TYPE_CERTIFICATE}>
-        <Form.Item name="certificateId" label={t("workflow_node.deploy.form.goedge_certificate_id.label")} rules={[formRule]}>
+        <Form.Item
+          name="certificateId"
+          label={t("workflow_node.deploy.form.goedge_certificate_id.label")}
+          rules={[formRule]}
+          tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.goedge_certificate_id.tooltip") }}></span>}
+        >
           <Input type="number" placeholder={t("workflow_node.deploy.form.goedge_certificate_id.placeholder")} />
         </Form.Item>
       </Show>