feat: support configuring independent ca in workflows

ui/src/components/provider/CAProviderSelect.tsx

@@ -0,0 +1,83 @@
+import { memo, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Avatar, Select, type SelectProps, Space, Typography } from "antd";
+
+import { type ApplyCAProvider, applyCAProvidersMap } from "@/domain/provider";
+
+export type CAProviderSelectProps = Omit<
+  SelectProps,
+  "filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
+> & {
+  filter?: (record: ApplyCAProvider) => boolean;
+};
+
+const CAProviderSelect = ({ filter, ...props }: CAProviderSelectProps) => {
+  const { t } = useTranslation();
+
+  const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: ApplyCAProvider }>>([]);
+  useEffect(() => {
+    const allItems = Array.from(applyCAProvidersMap.values());
+    const filteredItems = filter != null ? allItems.filter(filter) : allItems;
+    setOptions([
+      {
+        key: "",
+        value: "",
+        label: "provider.default_ca_provider.label",
+        data: {} as ApplyCAProvider,
+      },
+      ...filteredItems.map((item) => ({
+        key: item.type,
+        value: item.type,
+        label: t(item.name),
+        data: item,
+      })),
+    ]);
+  }, [filter]);
+
+  const renderOption = (key: string) => {
+    if (key === "") {
+      return (
+        <Space className="max-w-full grow overflow-hidden truncate" size={4}>
+          <Typography.Text className="italic leading-loose" type="secondary" ellipsis italic>
+            {t("provider.default_ca_provider.label")}
+          </Typography.Text>
+        </Space>
+      );
+    }
+
+    const provider = applyCAProvidersMap.get(key);
+    return (
+      <Space className="max-w-full grow overflow-hidden truncate" size={4}>
+        <Avatar src={provider?.icon} size="small" />
+        <Typography.Text className="leading-loose" ellipsis>
+          {t(provider?.name ?? "")}
+        </Typography.Text>
+      </Space>
+    );
+  };
+
+  return (
+    <Select
+      {...props}
+      filterOption={(inputValue, option) => {
+        if (!option) return false;
+
+        const value = inputValue.toLowerCase();
+        return option.value.toLowerCase().includes(value) || option.label.toLowerCase().includes(value);
+      }}
+      labelRender={({ label, value }) => {
+        if (!label) {
+          return <Typography.Text type="secondary">{props.placeholder || t("provider.default_ca_provider.label")}</Typography.Text>;
+        }
+
+        return renderOption(value as string);
+      }}
+      options={options}
+      optionFilterProp={undefined}
+      optionLabelProp={undefined}
+      optionRender={(option) => renderOption(option.data.value)}
+    />
+  );
+};
+
+export default memo(CAProviderSelect);

ui/src/components/provider/DNSProviderPicker.tsx

@@ -5,7 +5,7 @@ import { Avatar, Card, Col, Empty, Flex, Input, type InputRef, Row, Typography }
 import Show from "@/components/Show";
 import { applyDNSProvidersMap } from "@/domain/provider";
 
-export type ApplyDNSProviderPickerProps = {
+export type DNSProviderPickerProps = {
   className?: string;
   style?: React.CSSProperties;
   autoFocus?: boolean;
@@ -13,7 +13,7 @@ export type ApplyDNSProviderPickerProps = {
   onSelect?: (value: string) => void;
 };
 
-const ApplyDNSProviderPicker = ({ className, style, autoFocus, placeholder, onSelect }: ApplyDNSProviderPickerProps) => {
+const DNSProviderPicker = ({ className, style, autoFocus, placeholder, onSelect }: DNSProviderPickerProps) => {
   const { t } = useTranslation();
 
   const [keyword, setKeyword] = useState<string>();
@@ -71,4 +71,4 @@ const ApplyDNSProviderPicker = ({ className, style, autoFocus, placeholder, onSe
   );
 };
 
-export default memo(ApplyDNSProviderPicker);
+export default memo(DNSProviderPicker);

ui/src/components/provider/DNSProviderSelect.tsx

@@ -4,14 +4,14 @@ import { Avatar, Select, type SelectProps, Space, Typography } from "antd";
 
 import { type ApplyDNSProvider, applyDNSProvidersMap } from "@/domain/provider";
 
-export type ApplyDNSProviderSelectProps = Omit<
+export type DNSProviderSelectProps = Omit<
   SelectProps,
   "filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
 > & {
   filter?: (record: ApplyDNSProvider) => boolean;
 };
 
-const ApplyDNSProviderSelect = ({ filter, ...props }: ApplyDNSProviderSelectProps) => {
+const DNSProviderSelect = ({ filter, ...props }: DNSProviderSelectProps) => {
   const { t } = useTranslation();
 
   const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: ApplyDNSProvider }>>([]);
@@ -64,4 +64,4 @@ const ApplyDNSProviderSelect = ({ filter, ...props }: ApplyDNSProviderSelectProp
   );
 };
 
-export default memo(ApplyDNSProviderSelect);
+export default memo(DNSProviderSelect);

ui/src/components/provider/HostingProviderPicker.tsx

@@ -5,7 +5,7 @@ import { Avatar, Card, Col, Empty, Flex, Input, type InputRef, Row, Tabs, Toolti
 import Show from "@/components/Show";
 import { DEPLOY_CATEGORIES, deployProvidersMap } from "@/domain/provider";
 
-export type DeployProviderPickerProps = {
+export type HostingProviderPickerProps = {
   className?: string;
   style?: React.CSSProperties;
   autoFocus?: boolean;
@@ -13,7 +13,7 @@ export type DeployProviderPickerProps = {
   onSelect?: (value: string) => void;
 };
 
-const DeployProviderPicker = ({ className, style, autoFocus, placeholder, onSelect }: DeployProviderPickerProps) => {
+const HostingProviderPicker = ({ className, style, autoFocus, placeholder, onSelect }: HostingProviderPickerProps) => {
   const { t } = useTranslation();
 
   const [keyword, setKeyword] = useState<string>();
@@ -110,4 +110,4 @@ const DeployProviderPicker = ({ className, style, autoFocus, placeholder, onSele
   );
 };
 
-export default memo(DeployProviderPicker);
+export default memo(HostingProviderPicker);

ui/src/components/provider/HostingProviderSelect.tsx

@@ -4,14 +4,14 @@ import { Avatar, Select, type SelectProps, Space, Typography } from "antd";
 
 import { type DeployProvider, deployProvidersMap } from "@/domain/provider";
 
-export type DeployProviderSelectProps = Omit<
+export type HostingProviderSelectProps = Omit<
   SelectProps,
   "filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
 > & {
   filter?: (record: DeployProvider) => boolean;
 };
 
-const DeployProviderSelect = ({ filter, ...props }: DeployProviderSelectProps) => {
+const HostingProviderSelect = ({ filter, ...props }: HostingProviderSelectProps) => {
   const { t } = useTranslation();
 
   const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: DeployProvider }>>([]);
@@ -64,4 +64,4 @@ const DeployProviderSelect = ({ filter, ...props }: DeployProviderSelectProps) =
   );
 };
 
-export default memo(DeployProviderSelect);
+export default memo(HostingProviderSelect);