Merge pull request #4912 from Infisical/PKI-58-add-dns-made-easy-for-external-ca-acme

[PKI-58] Add dns made easy for external ca acme

frontend/src/helpers/appConnections.ts

@@ -57,6 +57,7 @@ import { OCIConnectionMethod } from "@app/hooks/api/appConnections/types/oci-con
 import { RailwayConnectionMethod } from "@app/hooks/api/appConnections/types/railway-connection";
 import { RenderConnectionMethod } from "@app/hooks/api/appConnections/types/render-connection";
 import { SupabaseConnectionMethod } from "@app/hooks/api/appConnections/types/supabase-connection";
+import { DNSMadeEasyConnectionMethod } from "@app/hooks/api/appConnections/types/dns-made-easy-connection";
 
 export const APP_CONNECTION_MAP: Record<
   AppConnection,
@@ -111,6 +112,7 @@ export const APP_CONNECTION_MAP: Record<
   [AppConnection.Flyio]: { name: "Fly.io", image: "Flyio.svg" },
   [AppConnection.GitLab]: { name: "GitLab", image: "GitLab.png" },
   [AppConnection.Cloudflare]: { name: "Cloudflare", image: "Cloudflare.png" },
+  [AppConnection.DNSMadeEasy]: { name: "DNS Made Easy", image: "DNSMadeEasy.svg", size: 120 },
   [AppConnection.Zabbix]: { name: "Zabbix", image: "Zabbix.png" },
   [AppConnection.Railway]: { name: "Railway", image: "Railway.png" },
   [AppConnection.Bitbucket]: { name: "Bitbucket", image: "Bitbucket.png" },
@@ -214,6 +216,8 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
       return { name: "Client Secret", icon: faKey };
     case AzureClientSecretsConnectionMethod.Certificate:
       return { name: "Certificate", icon: faCertificate };
+    case DNSMadeEasyConnectionMethod.APIKeySecret:
+      return { name: "API Key & Secret", icon: faKey };
     default:
       throw new Error(`Unhandled App Connection Method: ${method}`);
   }

frontend/src/hooks/api/appConnections/dns-made-easy/index.ts

@@ -0,0 +1,2 @@
+export * from "./queries";
+export * from "./types";

frontend/src/hooks/api/appConnections/dns-made-easy/queries.tsx

@@ -0,0 +1,37 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { appConnectionKeys } from "../queries";
+import { TDNSMadeEasyZone } from "./types";
+
+const dnsMadeEasyConnectionKeys = {
+  all: [...appConnectionKeys.all, "dns-made-easy"] as const,
+  listZones: (connectionId: string) =>
+    [...dnsMadeEasyConnectionKeys.all, "zones", connectionId] as const
+};
+
+export const useDNSMadeEasyConnectionListZones = (
+  connectionId: string,
+  options?: Omit<
+    UseQueryOptions<
+      TDNSMadeEasyZone[],
+      unknown,
+      TDNSMadeEasyZone[],
+      ReturnType<typeof dnsMadeEasyConnectionKeys.listZones>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: dnsMadeEasyConnectionKeys.listZones(connectionId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TDNSMadeEasyZone[]>(
+        `/api/v1/app-connections/dns-made-easy/${connectionId}/dns-made-easy-zones`
+      );
+
+      return data;
+    },
+    ...options
+  });
+};

frontend/src/hooks/api/appConnections/dns-made-easy/types.ts

@@ -0,0 +1,4 @@
+export type TDNSMadeEasyZone = {
+  id: string;
+  name: string;
+};

frontend/src/hooks/api/appConnections/enums.ts

@@ -29,6 +29,7 @@ export enum AppConnection {
   Flyio = "flyio",
   GitLab = "gitlab",
   Cloudflare = "cloudflare",
+  DNSMadeEasy = "dns-made-easy",
   Bitbucket = "bitbucket",
   Zabbix = "zabbix",
   Railway = "railway",

frontend/src/hooks/api/appConnections/types/app-options.ts

@@ -184,6 +184,10 @@ export type TRedisConnectionOption = TAppConnectionOptionBase & {
   app: AppConnection.Redis;
 };
 
+export type TDNSMadeEasyConnectionOption = TAppConnectionOptionBase & {
+  app: AppConnection.DNSMadeEasy;
+};
+
 export type TAppConnectionOption =
   | TAwsConnectionOption
   | TGitHubConnectionOption
@@ -225,7 +229,8 @@ export type TAppConnectionOption =
   | TOktaConnectionOption
   | TAzureAdCsConnectionOption
   | TLaravelForgeConnectionOption
-  | TChefConnectionOption;
+  | TChefConnectionOption
+  | TDNSMadeEasyConnectionOption;
 
 export type TAppConnectionOptionMap = {
   [AppConnection.AWS]: TAwsConnectionOption;
@@ -257,6 +262,7 @@ export type TAppConnectionOptionMap = {
   [AppConnection.Flyio]: TFlyioConnectionOption;
   [AppConnection.GitLab]: TGitlabConnectionOption;
   [AppConnection.Cloudflare]: TCloudflareConnectionOption;
+  [AppConnection.DNSMadeEasy]: TDNSMadeEasyConnectionOption;
   [AppConnection.Bitbucket]: TBitbucketConnectionOption;
   [AppConnection.Zabbix]: TZabbixConnectionOption;
   [AppConnection.Railway]: TRailwayConnectionOption;

frontend/src/hooks/api/appConnections/types/dns-made-easy-connection.ts

@@ -0,0 +1,14 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
+
+export enum DNSMadeEasyConnectionMethod {
+  APIKeySecret = "api-key-secret"
+}
+
+export type TDNSMadeEasyConnection = TRootAppConnection & { app: AppConnection.DNSMadeEasy } & {
+  method: DNSMadeEasyConnectionMethod.APIKeySecret;
+  credentials: {
+    apiKey: string;
+    secretKey: string;
+  };
+};

frontend/src/hooks/api/appConnections/types/index.ts

@@ -15,6 +15,7 @@ import { TChefConnection } from "./chef-connection";
 import { TCloudflareConnection } from "./cloudflare-connection";
 import { TDatabricksConnection } from "./databricks-connection";
 import { TDigitalOceanConnection } from "./digital-ocean";
+import { TDNSMadeEasyConnection } from "./dns-made-easy-connection";
 import { TFlyioConnection } from "./flyio-connection";
 import { TGcpConnection } from "./gcp-connection";
 import { TGitHubConnection } from "./github-connection";
@@ -56,6 +57,7 @@ export * from "./camunda-connection";
 export * from "./checkly-connection";
 export * from "./chef-connection";
 export * from "./cloudflare-connection";
+export * from "./dns-made-easy-connection";
 export * from "./databricks-connection";
 export * from "./flyio-connection";
 export * from "./gcp-connection";
@@ -127,7 +129,8 @@ export type TAppConnection =
   | TNorthflankConnection
   | TOktaConnection
   | TRedisConnection
-  | TChefConnection;
+  | TChefConnection
+  | TDNSMadeEasyConnection;
 
 export type TAvailableAppConnection = Pick<TAppConnection, "name" | "id" | "projectId">;
 

frontend/src/hooks/api/ca/constants.tsx

@@ -16,12 +16,14 @@ export const caStatusToNameMap: { [K in CaStatus]: string } = {
 
 export const ACME_DNS_PROVIDER_NAME_MAP: Record<AcmeDnsProvider, string> = {
   [AcmeDnsProvider.ROUTE53]: "Route53",
-  [AcmeDnsProvider.Cloudflare]: "Cloudflare"
+  [AcmeDnsProvider.Cloudflare]: "Cloudflare",
+  [AcmeDnsProvider.DNSMadeEasy]: "DNS Made Easy"
 };
 
 export const ACME_DNS_PROVIDER_APP_CONNECTION_MAP: Record<AcmeDnsProvider, AppConnection> = {
   [AcmeDnsProvider.ROUTE53]: AppConnection.AWS,
-  [AcmeDnsProvider.Cloudflare]: AppConnection.Cloudflare
+  [AcmeDnsProvider.Cloudflare]: AppConnection.Cloudflare,
+  [AcmeDnsProvider.DNSMadeEasy]: AppConnection.DNSMadeEasy
 };
 
 export const CA_TYPE_CAPABILITIES_MAP: Record<CaType, CaCapability[]> = {

frontend/src/hooks/api/ca/enums.tsx

@@ -21,7 +21,8 @@ export enum CaRenewalType {
 
 export enum AcmeDnsProvider {
   ROUTE53 = "route53",
-  Cloudflare = "cloudflare"
+  Cloudflare = "cloudflare",
+  DNSMadeEasy = "dns-made-easy"
 }
 
 export enum CaCapability {

frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaModal.tsx

@@ -27,6 +27,10 @@ import {
   TCloudflareZone,
   useCloudflareConnectionListZones
 } from "@app/hooks/api/appConnections/cloudflare";
+import {
+  TDNSMadeEasyZone,
+  useDNSMadeEasyConnectionListZones
+} from "@app/hooks/api/appConnections/dns-made-easy";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import {
   AcmeDnsProvider,
@@ -211,6 +215,11 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
       enabled: caType === CaType.ACME
     });
 
+  const { data: availableDNSMadeEasyConnections, isPending: isDNSMadeEasyPending } =
+    useListAvailableAppConnections(AppConnection.DNSMadeEasy, currentProject.id, {
+      enabled: caType === CaType.ACME
+    });
+
   const { data: availableAzureConnections, isPending: isAzurePending } =
     useListAvailableAppConnections(AppConnection.AzureADCS, currentProject.id, {
       enabled: caType === CaType.AZURE_AD_CS
@@ -220,16 +229,24 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
     if (caType === CaType.AZURE_AD_CS) {
       return availableAzureConnections || [];
     }
-    return [...(availableRoute53Connections || []), ...(availableCloudflareConnections || [])];
+    return [
+      ...(availableRoute53Connections || []),
+      ...(availableCloudflareConnections || []),
+      ...(availableDNSMadeEasyConnections || [])
+    ];
   }, [
     caType,
     availableRoute53Connections,
     availableCloudflareConnections,
+    availableDNSMadeEasyConnections,
     availableAzureConnections
   ]);
 
   const isPending =
-    isRoute53Pending || isCloudflarePending || (isAzurePending && caType === CaType.AZURE_AD_CS);
+    isRoute53Pending ||
+    isCloudflarePending ||
+    isDNSMadeEasyPending ||
+    (isAzurePending && caType === CaType.AZURE_AD_CS);
 
   const dnsAppConnection =
     caType === CaType.ACME && configuration && "dnsAppConnection" in configuration
@@ -241,6 +258,11 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
       enabled: dnsProvider === AcmeDnsProvider.Cloudflare && !!dnsAppConnection.id
     });
 
+  const { data: dnsMadeEasyZones = [], isPending: isDNSMadeEasyZonesPending } =
+    useDNSMadeEasyConnectionListZones(dnsAppConnection.id, {
+      enabled: dnsProvider === AcmeDnsProvider.DNSMadeEasy && !!dnsAppConnection.id
+    });
+
   // Populate form with CA data when editing
   useEffect(() => {
     if (ca && !isCaLoading) {
@@ -500,6 +522,32 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
                   )}
                 />
               )}
+              {dnsProvider === AcmeDnsProvider.DNSMadeEasy && (
+                <Controller
+                  name="configuration.dnsProviderConfig.hostedZoneId"
+                  control={control}
+                  render={({ field: { value, onChange }, fieldState: { error } }) => (
+                    <FormControl
+                      errorText={error?.message}
+                      isError={Boolean(error?.message)}
+                      label="Zone"
+                    >
+                      <FilterableSelect
+                        isLoading={isDNSMadeEasyZonesPending && !!dnsAppConnection.id}
+                        isDisabled={!dnsAppConnection.id}
+                        value={dnsMadeEasyZones.find((zone) => zone.id === value)}
+                        onChange={(option) => {
+                          onChange((option as SingleValue<TDNSMadeEasyZone>)?.id ?? null);
+                        }}
+                        options={dnsMadeEasyZones}
+                        placeholder="Select a zone..."
+                        getOptionLabel={(option) => option.name}
+                        getOptionValue={(option) => option.id}
+                      />
+                    </FormControl>
+                  )}
+                />
+              )}
               <Controller
                 control={control}
                 defaultValue=""

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AppConnectionForm.tsx

@@ -24,6 +24,7 @@ import { ChefConnectionForm } from "./ChefConnectionForm";
 import { CloudflareConnectionForm } from "./CloudflareConnectionForm";
 import { DatabricksConnectionForm } from "./DatabricksConnectionForm";
 import { DigitalOceanConnectionForm } from "./DigitalOceanConnectionForm";
+import { DNSMadeEasyConnectionForm } from "./DNSMadeEasyConnectionForm";
 import { FlyioConnectionForm } from "./FlyioConnectionForm";
 import { GcpConnectionForm } from "./GcpConnectionForm";
 import { GitHubConnectionForm } from "./GitHubConnectionForm";
@@ -148,6 +149,8 @@ const CreateForm = ({ app, onComplete, projectId }: CreateFormProps) => {
       return <GitLabConnectionForm onSubmit={onSubmit} projectId={projectId} />;
     case AppConnection.Cloudflare:
       return <CloudflareConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.DNSMadeEasy:
+      return <DNSMadeEasyConnectionForm onSubmit={onSubmit} />;
     case AppConnection.Bitbucket:
       return <BitbucketConnectionForm onSubmit={onSubmit} />;
     case AppConnection.Zabbix:
@@ -306,6 +309,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
       );
     case AppConnection.Cloudflare:
       return <CloudflareConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.DNSMadeEasy:
+      return <DNSMadeEasyConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     case AppConnection.Bitbucket:
       return <BitbucketConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     case AppConnection.Zabbix:

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/DNSMadeEasyConnectionForm.tsx

@@ -0,0 +1,157 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import {
+  Button,
+  FormControl,
+  Input,
+  ModalClose,
+  SecretInput,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { TDNSMadeEasyConnection } from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import { DNSMadeEasyConnectionMethod } from "@app/hooks/api/appConnections/types/dns-made-easy-connection";
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TDNSMadeEasyConnection;
+  onSubmit: (formData: FormData) => Promise<void>;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.DNSMadeEasy)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(DNSMadeEasyConnectionMethod.APIKeySecret),
+    credentials: z.object({
+      apiKey: z.string().trim().min(1, "API Key required"),
+      secretKey: z.string().trim().min(1, "Secret Key required")
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const DNSMadeEasyConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.DNSMadeEasy,
+      method: DNSMadeEasyConnectionMethod.APIKeySecret,
+      credentials: {
+        apiKey: "",
+        secretKey: ""
+      }
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {!isUpdate && <GenericAppConnectionsFields />}
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The method you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.DNSMadeEasy].name
+              }. This field cannot be changed after creation.`}
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Method"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(DNSMadeEasyConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.apiKey"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="API Key"
+            >
+              <Input
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder="af1b628f-3272-46aa-9cde-837d0c59155d"
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.secretKey"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Secret Key"
+            >
+              <SecretInput
+                containerClassName="text-gray-400 group-focus-within:border-primary-400/50! border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+              />
+            </FormControl>
+          )}
+        />
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : "Connect to DNS Made Easy"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};