merge main

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

@@ -0,0 +1,150 @@
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+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 { OnePassConnectionMethod, TOnePassConnection } from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TOnePassConnection;
+  onSubmit: (formData: FormData) => void;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.OnePass)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(OnePassConnectionMethod.ApiToken),
+    credentials: z.object({
+      apiToken: z.string().trim().min(1, "API Token required"),
+      instanceUrl: z.string().trim().url("Invalid Connect Server instance URL")
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const OnePassConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.OnePass,
+      method: OnePassConnectionMethod.ApiToken
+    }
+  });
+
+  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.OnePass].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(OnePassConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.instanceUrl"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Instance URL"
+              tooltipClassName="max-w-sm"
+              tooltipText="The URL of the 1Password Connect Server instance to authenticate with."
+            >
+              <Input {...field} placeholder="https://1pass.example.com" />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.apiToken"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="API Token"
+            >
+              <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 1Password"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};

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

@@ -9,6 +9,7 @@ import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import { DiscriminativePick } from "@app/types";
 
 import { AppConnectionHeader } from "../AppConnectionHeader";
+import { OnePassConnectionForm } from "./1PasswordConnectionForm";
 import { Auth0ConnectionForm } from "./Auth0ConnectionForm";
 import { AwsConnectionForm } from "./AwsConnectionForm";
 import { AzureAppConfigurationConnectionForm } from "./AzureAppConfigurationConnectionForm";
@@ -23,6 +24,7 @@ import { HCVaultConnectionForm } from "./HCVaultConnectionForm";
 import { HumanitecConnectionForm } from "./HumanitecConnectionForm";
 import { LdapConnectionForm } from "./LdapConnectionForm";
 import { MsSqlConnectionForm } from "./MsSqlConnectionForm";
+import { MySqlConnectionForm } from "./MySqlConnectionForm";
 import { OCIConnectionForm } from "./OCIConnectionForm";
 import { PostgresConnectionForm } from "./PostgresConnectionForm";
 import { TeamCityConnectionForm } from "./TeamCityConnectionForm";
@@ -91,6 +93,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
       return <PostgresConnectionForm onSubmit={onSubmit} />;
     case AppConnection.MsSql:
       return <MsSqlConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.MySql:
+      return <MySqlConnectionForm onSubmit={onSubmit} />;
     case AppConnection.Camunda:
       return <CamundaConnectionForm onSubmit={onSubmit} />;
     case AppConnection.AzureClientSecrets:
@@ -107,6 +111,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
       return <TeamCityConnectionForm onSubmit={onSubmit} />;
     case AppConnection.OCI:
       return <OCIConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.OnePass:
+      return <OnePassConnectionForm onSubmit={onSubmit} />;
     default:
       throw new Error(`Unhandled App ${app}`);
   }
@@ -167,6 +173,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
       return <PostgresConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     case AppConnection.MsSql:
       return <MsSqlConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.MySql:
+      return <MySqlConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     case AppConnection.Camunda:
       return <CamundaConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     case AppConnection.AzureClientSecrets:
@@ -183,6 +191,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
       return <TeamCityConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     case AppConnection.OCI:
       return <OCIConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.OnePass:
+      return <OnePassConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     default:
       throw new Error(`Unhandled App ${(appConnection as TAppConnection).app}`);
   }

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

@@ -5,7 +5,7 @@ import { FormControl, Input, TextArea } from "@app/components/v2";
 import { slugSchema } from "@app/lib/schemas";
 
 export const genericAppConnectionFieldsSchema = z.object({
-  name: slugSchema({ min: 1, max: 32, field: "Name" }),
+  name: slugSchema({ min: 1, max: 64, field: "Name" }),
   description: z.string().trim().max(256, "Description cannot exceed 256 characters").nullish()
 });
 

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

@@ -19,7 +19,7 @@ import {
   Tooltip
 } from "@app/components/v2";
 import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
-import { DistinguishedNameRegex } from "@app/helpers/string";
+import { DistinguishedNameRegex, UserPrincipalNameRegex } from "@app/helpers/string";
 import {
   LdapConnectionMethod,
   LdapConnectionProvider,
@@ -55,8 +55,13 @@ const formSchema = z.discriminatedUnion("method", [
       dn: z
         .string()
         .trim()
-        .regex(DistinguishedNameRegex, "Invalid Distinguished Name format")
-        .min(1, "Distinguished Name (DN) required"),
+        .min(1, "DN/UPN required")
+        .refine(
+          (value) => DistinguishedNameRegex.test(value) || UserPrincipalNameRegex.test(value),
+          {
+            message: "Invalid DN/UPN format"
+          }
+        ),
       password: z.string().trim().min(1, "Password required"),
       sslRejectUnauthorized: z.boolean(),
       sslCertificate: z
@@ -223,7 +228,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
                     <FormControl
                       errorText={error?.message}
                       isError={Boolean(error?.message)}
-                      label="Binding Distinguished Name (DN)"
+                      label="Binding DN/UPN"
                     >
                       <Input {...field} placeholder="CN=John,OU=Users,DC=example,DC=com" />
                     </FormControl>

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

@@ -0,0 +1,155 @@
+import { useState } from "react";
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { Button, FormControl, ModalClose, Select, SelectItem } from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { MySqlConnectionMethod, TMySqlConnection } from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { PlatformManagedConfirmationModal } from "@app/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/PlatformManagedConfirmationModal";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+import {
+  BaseSqlUsernameAndPasswordConnectionSchema,
+  PlatformManagedNoticeBanner,
+  SqlConnectionFields
+} from "./shared";
+
+type Props = {
+  appConnection?: TMySqlConnection;
+  onSubmit: (formData: FormData) => Promise<void>;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.MySql),
+  isPlatformManagedCredentials: z.boolean().optional()
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(MySqlConnectionMethod.UsernameAndPassword),
+    credentials: BaseSqlUsernameAndPasswordConnectionSchema
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const MySqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.MySql,
+      method: MySqlConnectionMethod.UsernameAndPassword,
+      credentials: {
+        host: "",
+        port: 3306,
+        database: "default",
+        username: "",
+        password: "",
+        sslEnabled: true,
+        sslRejectUnauthorized: true,
+        sslCertificate: undefined
+      }
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  const isPlatformManagedCredentials = appConnection?.isPlatformManagedCredentials ?? false;
+
+  const confirmSubmit = async (formData: FormData) => {
+    if (formData.isPlatformManagedCredentials) {
+      setShowConfirmation(true);
+      return;
+    }
+
+    await onSubmit(formData);
+  };
+
+  return (
+    <FormProvider {...form}>
+      <form
+        onSubmit={(e) => {
+          setSelectedTabIndex(0);
+          handleSubmit(confirmSubmit)(e);
+        }}
+      >
+        {!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.MySql].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(MySqlConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <SqlConnectionFields
+          isPlatformManagedCredentials={isPlatformManagedCredentials}
+          selectedTabIndex={selectedTabIndex}
+          setSelectedTabIndex={setSelectedTabIndex}
+        />
+        {isPlatformManagedCredentials ? (
+          <PlatformManagedNoticeBanner />
+        ) : (
+          <div className="mt-6 flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              colorSchema="secondary"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting || !isDirty}
+            >
+              {isUpdate ? "Update Credentials" : "Connect to Database"}
+            </Button>
+            <ModalClose asChild>
+              <Button colorSchema="secondary" variant="plain">
+                Cancel
+              </Button>
+            </ModalClose>
+          </div>
+        )}
+      </form>
+      <PlatformManagedConfirmationModal
+        onConfirm={() => handleSubmit(onSubmit)()}
+        onOpenChange={setShowConfirmation}
+        isOpen={showConfirmation}
+      />
+    </FormProvider>
+  );
+};

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

@@ -1,8 +1,11 @@
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { faWrench } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { Spinner, Tooltip } from "@app/components/v2";
+import { useSubscription } from "@app/context";
 import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
+import { usePopUp } from "@app/hooks";
 import { useAppConnectionOptions } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 
@@ -11,8 +14,11 @@ type Props = {
 };
 
 export const AppConnectionsSelect = ({ onSelect }: Props) => {
+  const { subscription } = useSubscription();
   const { isPending, data: appConnectionOptions } = useAppConnectionOptions();
 
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
+
   if (isPending) {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
@@ -23,81 +29,86 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
   }
 
   return (
-    <>
-      <div className="grid grid-cols-4 gap-2">
-        {appConnectionOptions?.map((option) => {
-          const { image, name, size = 50, icon } = APP_CONNECTION_MAP[option.app];
+    <div className="grid grid-cols-4 gap-2">
+      {appConnectionOptions?.map((option) => {
+        const { image, name, size = 50, enterprise = false, icon } = APP_CONNECTION_MAP[option.app];
 
-          return (
-            <button
-              type="button"
-              key={option.app}
-              onClick={() => onSelect(option.app)}
-              className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
-            >
-              <div className="relative">
-                <img
-                  src={`/images/integrations/${image}`}
-                  style={{
-                    width: `${size}px`
-                  }}
-                  className="mt-auto"
-                  alt={`${name} logo`}
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              enterprise && !subscription.enterpriseAppConnections
+                ? handlePopUpOpen("upgradePlan")
+                : onSelect(option.app)
+            }
+            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+          >
+            <div className="relative">
+              <img
+                src={`/images/integrations/${image}`}
+                style={{
+                  width: `${size}px`
+                }}
+                className="mt-auto"
+                alt={`${name} logo`}
+              />
+              {icon && (
+                <FontAwesomeIcon
+                  className="-right- absolute -bottom-1.5 -right-1.5 text-primary-700"
+                  size="xl"
+                  icon={icon}
                 />
-                {icon && (
-                  <FontAwesomeIcon
-                    className="-right- absolute -bottom-1.5 -right-1.5 text-primary-700"
-                    size="xl"
-                    icon={icon}
-                  />
-                )}
-              </div>
-              <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-                {name}
-              </div>
-            </button>
-          );
-        })}
-      </div>
-
-      <div className="mt-2 flex items-center gap-1">
-        <div className="max-w-xs text-center text-sm font-medium text-mineshaft-400 duration-200">
-          Don&#39;t see the connection you&#39;re looking for?
-        </div>
-        <Tooltip
-          side="bottom"
-          className="max-w-sm py-4"
-          content={
-            <>
-              <p className="mb-2">Infisical is constantly adding support for more connections.</p>
-              <p>
-                {`If you don't see the third-party
+              )}
+            </div>
+            <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+              {name}
+            </div>
+          </button>
+        );
+      })}
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can use every App Connection if you switch to Infisical's Enterprise plan."
+      />
+      <Tooltip
+        side="bottom"
+        className="max-w-sm py-4"
+        content={
+          <>
+            <p className="mb-2">Infisical is constantly adding support for more connections.</p>
+            <p>
+              {`If you don't see the third-party
             app you're looking for,`}{" "}
-                <a
-                  target="_blank"
-                  className="underline hover:text-mineshaft-300"
-                  href="https://infisical.com/slack"
-                  rel="noopener noreferrer"
-                >
-                  let us know on Slack
-                </a>{" "}
-                or{" "}
-                <a
-                  target="_blank"
-                  className="underline hover:text-mineshaft-300"
-                  href="https://github.com/Infisical/infisical/discussions"
-                  rel="noopener noreferrer"
-                >
-                  make a request on GitHub
-                </a>
-                .
-              </p>
-            </>
-          }
-        >
-          <FontAwesomeIcon className="text-mineshaft-400" size="xs" icon={faInfoCircle} />
-        </Tooltip>
-      </div>
-    </>
+              <a
+                target="_blank"
+                className="underline hover:text-mineshaft-300"
+                href="https://infisical.com/slack"
+                rel="noopener noreferrer"
+              >
+                let us know on Slack
+              </a>{" "}
+              or{" "}
+              <a
+                target="_blank"
+                className="underline hover:text-mineshaft-300"
+                href="https://github.com/Infisical/infisical/discussions"
+                rel="noopener noreferrer"
+              >
+                make a request on GitHub
+              </a>
+              .
+            </p>
+          </>
+        }
+      >
+        <div className="group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed border-mineshaft-600 bg-mineshaft-800 p-4">
+          <FontAwesomeIcon className="mt-auto text-xl" icon={faWrench} />
+          <div className="mt-auto max-w-xs text-center text-sm font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+            Coming Soon
+          </div>
+        </div>
+      </Tooltip>
+    </div>
   );
 };

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

@@ -30,6 +30,11 @@ import {
   Tr
 } from "@app/components/v2";
 import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { TAppConnection, useListAppConnections } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
@@ -76,7 +81,14 @@ export const AppConnectionsTable = () => {
     orderBy,
     setOrderDirection,
     setOrderBy
-  } = usePagination<AppConnectionsOrderBy>(AppConnectionsOrderBy.App, { initPerPage: 20 });
+  } = usePagination<AppConnectionsOrderBy>(AppConnectionsOrderBy.App, {
+    initPerPage: getUserTablePreference("appConnectionsTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("appConnectionsTable", PreferenceKey.PerPage, newPerPage);
+  };
 
   const filteredAppConnections = useMemo(
     () =>
@@ -282,7 +294,7 @@ export const AppConnectionsTable = () => {
             page={page}
             perPage={perPage}
             onChangePage={setPage}
-            onChangePerPage={setPerPage}
+            onChangePerPage={handlePerPageChange}
           />
         )}
         {!isPending && !filteredAppConnections?.length && (