improvements: address feedback

2026-10-15 07:35:09 +00:00 · 2024-12-18 21:18:38 -08:00
parent 62968c5e43
commit 2d60f389c2
55 changed files with 1040 additions and 690 deletions
@@ -3,6 +3,7 @@ import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import { Modal, ModalContent, ModalTrigger, Select, SelectItem } from "@app/components/v2";
+import { isInfisicalCloud } from "@app/helpers/platform";

 enum Region {
  US = "us",
@@ -79,10 +80,7 @@ export const RegionSelect = () => {
  };

  const shouldDisplay =
-    window.location.origin.includes("https://app.infisical.com") ||
-    window.location.origin.includes("https://us.infisical.com") ||
-    window.location.origin.includes("https://eu.infisical.com") ||
-    window.location.origin.includes("http://localhost:8080");
+    isInfisicalCloud() || window.location.origin.includes("http://localhost:8080");

  // only display region select for cloud
  if (!shouldDisplay) return null;
@@ -1,22 +1,29 @@
-import { faGithub, IconDefinition } from "@fortawesome/free-brands-svg-icons";
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
 import { faKey, faPassport, faUser } from "@fortawesome/free-solid-svg-icons";

 import { AppConnection } from "@app/hooks/api/appConnections/enums";
-import { TAppConnection } from "@app/hooks/api/appConnections/types";
-import { AwsConnectionMethod } from "@app/hooks/api/appConnections/types/aws-connection";
-import { GitHubConnectionMethod } from "@app/hooks/api/appConnections/types/github-connection";
+import {
+  AwsConnectionMethod,
+  GitHubConnectionMethod,
+  TAppConnection
+} from "@app/hooks/api/appConnections/types";

 export const APP_CONNECTION_MAP: Record<AppConnection, { name: string; image: string }> = {
  [AppConnection.AWS]: { name: "AWS", image: "Amazon Web Services.png" },
  [AppConnection.GitHub]: { name: "GitHub", image: "GitHub.png" }
 };

-export const APP_CONNECTION_METHOD_MAP: Record<
-  TAppConnection["method"],
-  { name: string; icon: IconDefinition }
-> = {
-  [AwsConnectionMethod.AssumeRole]: { name: "Assume Role", icon: faUser },
-  [AwsConnectionMethod.AccessKey]: { name: "Access Key", icon: faKey },
-  [GitHubConnectionMethod.App]: { name: "GitHub App", icon: faGithub },
-  [GitHubConnectionMethod.OAuth]: { name: "OAuth", icon: faPassport }
+export const getAppConnectionMethodDetails = (method: TAppConnection["method"]) => {
+  switch (method) {
+    case GitHubConnectionMethod.App:
+      return { name: "GitHub App", icon: faGithub };
+    case GitHubConnectionMethod.OAuth:
+      return { name: "OAuth", icon: faPassport };
+    case AwsConnectionMethod.AccessKey:
+      return { name: "Access Key", icon: faKey };
+    case AwsConnectionMethod.AssumeRole:
+      return { name: "Assume Role", icon: faUser };
+    default:
+      throw new Error(`Unhandled App Connection Method: ${method}`);
+  }
 };
@@ -0,0 +1,4 @@
+export const isInfisicalCloud = () =>
+  window.location.origin.includes("https://app.infisical.com") ||
+  window.location.origin.includes("https://us.infisical.com") ||
+  window.location.origin.includes("https://eu.infisical.com");
@@ -15,10 +15,12 @@ export type TAppConnectionResponse = { appConnection: TAppConnection };

 export type TCreateAppConnectionDTO = Pick<
  TAppConnection,
-  "name" | "credentials" | "method" | "app"
+  "name" | "credentials" | "method" | "app" | "description"
 >;

-export type TUpdateAppConnectionDTO = Partial<Pick<TAppConnection, "name" | "credentials">> & {
+export type TUpdateAppConnectionDTO = Partial<
+  Pick<TAppConnection, "name" | "credentials" | "description">
+> & {
  connectionId: string;
  app: AppConnection;
 };
@@ -1,6 +1,7 @@
 export type TRootAppConnection = {
  id: string;
  name: string;
+  description?: string | null;
  version: number;
  orgId: string;
  createdAt: string;
@@ -13,7 +13,7 @@ import {
 } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";

-type FormData = Pick<TGitHubConnection, "name" | "method"> & {
+type FormData = Pick<TGitHubConnection, "name" | "method" | "description"> & {
  returnUrl?: string;
  connectionId?: string;
 };
@@ -58,7 +58,7 @@ export default function GitHubOAuthCallbackPage() {
      localStorage.removeItem("githubConnectionFormData");
      localStorage.removeItem("latestCSRFToken");

-      const { connectionId, name, returnUrl } = formData;
+      const { connectionId, name, description, returnUrl } = formData;

      let appConnection: TAppConnection;

@@ -85,6 +85,7 @@ export default function GitHubOAuthCallbackPage() {
          appConnection = await createAppConnection.mutateAsync({
            app: AppConnection.GitHub,
            name,
+            description,
            ...(installationId
              ? {
                  method: GitHubConnectionMethod.App,
@@ -65,7 +65,7 @@ export const AppConnectionsTab = withPermission(
            </div>
            <OrgPermissionCan
              I={OrgPermissionActions.Create}
-              a={OrgPermissionSubjects.ProjectTemplates}
+              a={OrgPermissionSubjects.AppConnections}
            >
              {(isAllowed) => (
                <Button
@@ -1,4 +1,4 @@
-import { Controller, useForm } from "react-hook-form";
+import { Controller, FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";

@@ -11,18 +11,21 @@ import {
  Select,
  SelectItem
 } from "@app/components/v2";
-import { APP_CONNECTION_MAP, APP_CONNECTION_METHOD_MAP } from "@app/helpers/appConnections";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
 import { AwsConnectionMethod, TAwsConnection } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
-import { slugSchema } from "@app/lib/schemas";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";

 type Props = {
  appConnection?: TAwsConnection;
  onSubmit: (formData: FormData) => void;
 };

-const rootSchema = z.object({
-  name: slugSchema({ min: 1, max: 32, field: "Name" }),
+const rootSchema = genericAppConnectionFieldsSchema.extend({
  app: z.literal(AppConnection.AWS)
 });

@@ -30,14 +33,14 @@ const formSchema = z.discriminatedUnion("method", [
  rootSchema.extend({
    method: z.literal(AwsConnectionMethod.AssumeRole),
    credentials: z.object({
-      roleArn: z.string().min(1, "Role ARN required")
+      roleArn: z.string().trim().min(1, "Role ARN required")
    })
  }),
  rootSchema.extend({
    method: z.literal(AwsConnectionMethod.AccessKey),
    credentials: z.object({
-      accessKeyId: z.string().min(1, "Access Key ID required"),
-      secretAccessKey: z.string().min(1, "Secret Access Key required")
+      accessKeyId: z.string().trim().min(1, "Access Key ID required"),
+      secretAccessKey: z.string().trim().min(1, "Secret Access Key required")
    })
  })
 ]);
@@ -47,13 +50,7 @@ type FormData = z.infer<typeof formSchema>;
 export const AwsConnectionForm = ({ appConnection, onSubmit }: Props) => {
  const isUpdate = Boolean(appConnection);

-  const {
-    handleSubmit,
-    register,
-    control,
-    watch,
-    formState: { isSubmitting, errors, isDirty }
-  } = useForm<FormData>({
+  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: appConnection ?? {
      app: AppConnection.AWS,
@@ -61,105 +58,61 @@ export const AwsConnectionForm = ({ appConnection, onSubmit }: Props) => {
    }
  });

+  const {
+    handleSubmit,
+    control,
+    watch,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
  const selectedMethod = watch("method");

  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      {!isUpdate && (
-        <FormControl
-          helperText="Name must be slug-friendly"
-          errorText={errors.name?.message}
-          isError={Boolean(errors.name?.message)}
-          label="Name"
-        >
-          <Input
-            autoFocus
-            placeholder={`my-${AppConnection.AWS}-connection`}
-            {...register("name")}
-          />
-        </FormControl>
-      )}
-      <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.AWS].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(AwsConnectionMethod).map((method) => {
-                return (
-                  <SelectItem value={method} key={method}>
-                    {APP_CONNECTION_METHOD_MAP[method].name}{" "}
-                    {method === AwsConnectionMethod.AssumeRole ? " (Recommended)" : ""}
-                  </SelectItem>
-                );
-              })}
-            </Select>
-          </FormControl>
-        )}
-      />
-      {selectedMethod === AwsConnectionMethod.AssumeRole ? (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {!isUpdate && <GenericAppConnectionsFields />}
        <Controller
-          name="credentials.roleArn"
+          name="method"
          control={control}
-          shouldUnregister
          render={({ field: { value, onChange }, fieldState: { error } }) => (
            <FormControl
+              tooltipText={`The method you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.AWS].name
+              }. This field cannot be changed after creation.`}
              errorText={error?.message}
              isError={Boolean(error?.message)}
-              label="Role ARN"
-              className="group"
+              label="Method"
            >
-              <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"
+              <Select
+                isDisabled={isUpdate}
                value={value}
-                onChange={(e) => onChange(e.target.value)}
-              />
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(AwsConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                      {method === AwsConnectionMethod.AssumeRole ? " (Recommended)" : ""}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
            </FormControl>
          )}
        />
-      ) : (
-        <>
+        {selectedMethod === AwsConnectionMethod.AssumeRole ? (
          <Controller
-            name="credentials.accessKeyId"
+            name="credentials.roleArn"
            control={control}
            shouldUnregister
            render={({ field: { value, onChange }, fieldState: { error } }) => (
              <FormControl
                errorText={error?.message}
                isError={Boolean(error?.message)}
-                label="Access Key ID"
-              >
-                <Input
-                  placeholder={"*".repeat(20)}
-                  value={value}
-                  onChange={(e) => onChange(e.target.value)}
-                />
-              </FormControl>
-            )}
-          />
-          <Controller
-            name="credentials.secretAccessKey"
-            control={control}
-            shouldUnregister
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                errorText={error?.message}
-                isError={Boolean(error?.message)}
-                label="Secret Access Key"
+                label="Role ARN"
                className="group"
              >
                <SecretInput
@@ -170,25 +123,65 @@ export const AwsConnectionForm = ({ appConnection, onSubmit }: Props) => {
              </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 AWS"}
-        </Button>
-        <ModalClose asChild>
-          <Button colorSchema="secondary" variant="plain">
-            Cancel
+        ) : (
+          <>
+            <Controller
+              name="credentials.accessKeyId"
+              control={control}
+              shouldUnregister
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  errorText={error?.message}
+                  isError={Boolean(error?.message)}
+                  label="Access Key ID"
+                >
+                  <Input
+                    placeholder={"*".repeat(20)}
+                    value={value}
+                    onChange={(e) => onChange(e.target.value)}
+                  />
+                </FormControl>
+              )}
+            />
+            <Controller
+              name="credentials.secretAccessKey"
+              control={control}
+              shouldUnregister
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  errorText={error?.message}
+                  isError={Boolean(error?.message)}
+                  label="Secret Access Key"
+                  className="group"
+                >
+                  <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 AWS"}
          </Button>
-        </ModalClose>
-      </div>
-    </form>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
  );
 };
@@ -0,0 +1,42 @@
+import { useFormContext } from "react-hook-form";
+import { z } from "zod";
+
+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" }),
+  description: z.string().trim().max(256, "Description cannot exceed 256 characters").nullish()
+});
+
+export const GenericAppConnectionsFields = () => {
+  const {
+    register,
+    formState: { errors }
+  } = useFormContext<{ name: string; description?: string | null }>();
+
+  return (
+    <>
+      <FormControl
+        helperText="Name must be slug-friendly"
+        errorText={errors.name?.message}
+        isError={Boolean(errors.name?.message)}
+        label="Name"
+      >
+        <Input autoFocus placeholder="my-app-connection" {...register("name")} />
+      </FormControl>
+      <FormControl
+        errorText={errors.description?.message}
+        isError={Boolean(errors.description?.message)}
+        label="Description"
+        isOptional
+      >
+        <TextArea
+          className="h-20 !resize-none"
+          placeholder="Connection description..."
+          {...register("description")}
+        />
+      </FormControl>
+    </>
+  );
+};
@@ -1,38 +1,34 @@
 import crypto from "crypto";

 import { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { Controller, FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";

-import { Button, FormControl, Input, ModalClose, Select, SelectItem } from "@app/components/v2";
-import { APP_CONNECTION_MAP, APP_CONNECTION_METHOD_MAP } from "@app/helpers/appConnections";
+import { Button, FormControl, ModalClose, Select, SelectItem } from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { isInfisicalCloud } from "@app/helpers/platform";
 import {
  GitHubConnectionMethod,
  TGitHubConnection,
  useGetAppConnectionOption
 } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
-import { slugSchema } from "@app/lib/schemas";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";

 type Props = {
  appConnection?: TGitHubConnection;
 };

-const rootSchema = z.object({
-  name: slugSchema({ min: 1, max: 32, field: "Name" }),
-  app: z.literal(AppConnection.GitHub)
+const formSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.GitHub),
+  method: z.nativeEnum(GitHubConnectionMethod)
 });

-const formSchema = z.discriminatedUnion("method", [
-  rootSchema.extend({
-    method: z.literal(GitHubConnectionMethod.App)
-  }),
-  rootSchema.extend({
-    method: z.literal(GitHubConnectionMethod.OAuth)
-  })
-]);
-
 type FormData = z.infer<typeof formSchema>;

 export const GitHubConnectionForm = ({ appConnection }: Props) => {
@@ -44,13 +40,7 @@ export const GitHubConnectionForm = ({ appConnection }: Props) => {
    isLoading
  } = useGetAppConnectionOption(AppConnection.GitHub);

-  const {
-    handleSubmit,
-    register,
-    control,
-    watch,
-    formState: { isSubmitting, errors, isDirty }
-  } = useForm<FormData>({
+  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: appConnection ?? {
      app: AppConnection.GitHub,
@@ -58,6 +48,13 @@ export const GitHubConnectionForm = ({ appConnection }: Props) => {
    }
  });

+  const {
+    handleSubmit,
+    control,
+    watch,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
  const selectedMethod = watch("method");

  const onSubmit = (formData: FormData) => {
@@ -98,75 +95,70 @@ export const GitHubConnectionForm = ({ appConnection }: Props) => {
      throw new Error(`Unhandled GitHub Connection method: ${selectedMethod}`);
  }

+  const methodDetails = getAppConnectionMethodDetails(selectedMethod);
+
  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      {!isUpdate && (
-        <FormControl
-          helperText="Name must be slug-friendly"
-          errorText={errors.name?.message}
-          isError={Boolean(errors.name?.message)}
-          label="Name"
-        >
-          <Input
-            autoFocus
-            placeholder={`my-${AppConnection.GitHub}-connection`}
-            {...register("name")}
-          />
-        </FormControl>
-      )}
-      <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.GitHub].name
-            }. This field cannot be changed after creation.`}
-            errorText={
-              !isLoading && isMissingConfig
-                ? `Environment variables have not been configured. See Docs to configure GitHub ${APP_CONNECTION_METHOD_MAP[selectedMethod].name} Connections.`
-                : error?.message
-            }
-            isError={Boolean(error?.message) || isMissingConfig}
-            label="Method"
-          >
-            <Select
-              isDisabled={isUpdate}
-              value={value}
-              onValueChange={(val) => onChange(val)}
-              className="w-full border border-mineshaft-500"
-              position="popper"
-              dropdownContainerClassName="max-w-none"
+    <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.GitHub].name
+              }. This field cannot be changed after creation.`}
+              errorText={
+                !isLoading && isMissingConfig
+                  ? `Environment variables have not been configured. ${
+                      isInfisicalCloud()
+                        ? "Please contact Infisical."
+                        : `See Docs to configure GitHub ${methodDetails.name} Connections.`
+                    }`
+                  : error?.message
+              }
+              isError={Boolean(error?.message) || isMissingConfig}
+              label="Method"
            >
-              {Object.values(GitHubConnectionMethod).map((method) => {
-                return (
-                  <SelectItem value={method} key={method}>
-                    {APP_CONNECTION_METHOD_MAP[method].name}{" "}
-                    {method === GitHubConnectionMethod.App ? " (Recommended)" : ""}
-                  </SelectItem>
-                );
-              })}
-            </Select>
-          </FormControl>
-        )}
-      />
-      <div className="mt-8 flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          colorSchema="secondary"
-          isLoading={isSubmitting || isRedirecting}
-          isDisabled={isSubmitting || (!isUpdate && !isDirty) || isMissingConfig || isRedirecting}
-        >
-          {isUpdate ? "Reconnect to GitHub" : "Connect to GitHub"}
-        </Button>
-        <ModalClose asChild>
-          <Button colorSchema="secondary" variant="plain">
-            Cancel
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(GitHubConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {methodDetails.name}{" "}
+                      {method === GitHubConnectionMethod.App ? " (Recommended)" : ""}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting || isRedirecting}
+            isDisabled={isSubmitting || (!isUpdate && !isDirty) || isMissingConfig || isRedirecting}
+          >
+            {isUpdate ? "Reconnect to GitHub" : "Connect to GitHub"}
          </Button>
-        </ModalClose>
-      </div>
-    </form>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
  );
 };
@@ -1 +1,2 @@
 export * from "./AppConnectionForm";
+export * from "./GenericAppConnectionFields";
@@ -24,10 +24,7 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
      <div>
        <div className="flex items-center text-mineshaft-300">
          {appDetails.name}
-          <Link
-            href={`https://infisical.com/docs/documentation/platform/app-connections/${app}`}
-            passHref
-          >
+          <Link href={`https://infisical.com/docs/integrations/app-connections/${app}`} passHref>
            <a target="_blank" className="ml-1 mb-1" rel="noopener noreferrer">
              <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
                <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
@@ -45,8 +45,34 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
      ))}
      <Tooltip
        side="bottom"
-        className="text-center"
-        content="Infisical is busy adding support for more connections. Check back soon if you don't see the one you're looking for."
+        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>
+          </>
+        }
      >
        <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} />
@@ -5,6 +5,7 @@ import {
  faCopy,
  faEdit,
  faEllipsisV,
+  faInfoCircle,
  faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -23,7 +24,7 @@ import {
  Tr
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
-import { APP_CONNECTION_MAP, APP_CONNECTION_METHOD_MAP } from "@app/helpers/appConnections";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
 import { useToggle } from "@app/hooks";
 import { TAppConnection } from "@app/hooks/api/appConnections";

@@ -31,16 +32,16 @@ type Props = {
  appConnection: TAppConnection;
  onDelete: (appConnection: TAppConnection) => void;
  onEditCredentials: (appConnection: TAppConnection) => void;
-  onEditName: (appConnection: TAppConnection) => void;
+  onEditDetails: (appConnection: TAppConnection) => void;
 };

 export const AppConnectionRow = ({
  appConnection,
  onDelete,
  onEditCredentials,
-  onEditName
+  onEditDetails
 }: Props) => {
-  const { id, name, method, app } = appConnection;
+  const { id, name, method, app, description } = appConnection;

  const [isIdCopied, setIsIdCopied] = useToggle(false);

@@ -59,6 +60,8 @@ export const AppConnectionRow = ({
    return () => clearTimeout(timer);
  }, [isIdCopied]);

+  const methodDetails = getAppConnectionMethodDetails(method);
+
  return (
    <Tr
      className={twMerge("group h-12 transition-colors duration-100 hover:bg-mineshaft-700")}
@@ -75,16 +78,23 @@ export const AppConnectionRow = ({
        </div>
      </Td>
      <Td className="!min-w-[8rem] max-w-0">
-        <p className="truncate">{name}</p>
+        <div className="flex w-full items-center">
+          <p className="truncate">{name}</p>
+          {description && (
+            <Tooltip content={description}>
+              <FontAwesomeIcon icon={faInfoCircle} className="ml-1 text-mineshaft-400" />
+            </Tooltip>
+          )}
+        </div>
      </Td>
      <Td className="!min-w-[8rem] max-w-0">
        <p className="truncate">
          <FontAwesomeIcon
            size="sm"
            className="mr-1.5 text-mineshaft-300/75"
-            icon={APP_CONNECTION_METHOD_MAP[method].icon}
+            icon={methodDetails.icon}
          />
-          {APP_CONNECTION_METHOD_MAP[method].name}
+          {methodDetails.name}
        </p>
      </Td>

@@ -116,9 +126,9 @@ export const AppConnectionRow = ({
                  <DropdownMenuItem
                    isDisabled={!isAllowed}
                    icon={<FontAwesomeIcon icon={faEdit} />}
-                    onClick={() => onEditName(appConnection)}
+                    onClick={() => onEditDetails(appConnection)}
                  >
-                    Edit Name
+                    Edit Details
                  </DropdownMenuItem>
                )}
              </OrgPermissionCan>
@@ -30,7 +30,7 @@ import {
  Tr
 } from "@app/components/v2";
 import { useSubscription } from "@app/context";
-import { APP_CONNECTION_MAP, APP_CONNECTION_METHOD_MAP } from "@app/helpers/appConnections";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
 import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { TAppConnection, useListAppConnections } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
@@ -39,7 +39,7 @@ import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { AppConnectionRow } from "./AppConnectionRow";
 import { DeleteAppConnectionModal } from "./DeleteAppConnectionModal";
 import { EditAppConnectionCredentialsModal } from "./EditAppConnectionCredentialsModal";
-import { EditAppConnectionNameModal } from "./EditAppConnectionNameModal";
+import { EditAppConnectionDetailsModal } from "./EditAppConnectionDetailsModal";

 enum AppConnectionsOrderBy {
  App = "app",
@@ -61,7 +61,7 @@ export const AppConnectionsTable = () => {
  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
    "deleteConnection",
    "editCredentials",
-    "editName"
+    "editDetails"
  ] as const);

  const [filters, setFilters] = useState<AppConnectionFilters>({
@@ -95,7 +95,7 @@ export const AppConnectionsTable = () => {

          return (
            APP_CONNECTION_MAP[app].name.toLowerCase().includes(searchValue) ||
-            APP_CONNECTION_METHOD_MAP[method].name.toLowerCase().includes(searchValue) ||
+            getAppConnectionMethodDetails(method).name.toLowerCase().includes(searchValue) ||
            name.toLowerCase().includes(searchValue)
          );
        })
@@ -109,9 +109,11 @@ export const AppConnectionsTable = () => {
                .toLowerCase()
                .localeCompare(connectionTwo.name.toLowerCase());
            case AppConnectionsOrderBy.Method:
-              return APP_CONNECTION_METHOD_MAP[connectionOne.method].name
-                .toLowerCase()
-                .localeCompare(APP_CONNECTION_METHOD_MAP[connectionTwo.method].name.toLowerCase());
+              return getAppConnectionMethodDetails(connectionOne.method)
+                .name.toLowerCase()
+                .localeCompare(
+                  getAppConnectionMethodDetails(connectionTwo.method).name.toLowerCase()
+                );
            case AppConnectionsOrderBy.App:
            default:
              return APP_CONNECTION_MAP[connectionOne.app].name
@@ -152,8 +154,8 @@ export const AppConnectionsTable = () => {
  const handleEditCredentials = (appConnection: TAppConnection) =>
    handlePopUpOpen("editCredentials", appConnection);

-  const handleEditName = (appConnection: TAppConnection) =>
-    handlePopUpOpen("editName", appConnection);
+  const handleEditDetails = (appConnection: TAppConnection) =>
+    handlePopUpOpen("editDetails", appConnection);

  return (
    <div>
@@ -274,7 +276,7 @@ export const AppConnectionsTable = () => {
                key={connection.id}
                onDelete={handleDelete}
                onEditCredentials={handleEditCredentials}
-                onEditName={handleEditName}
+                onEditDetails={handleEditDetails}
              />
            ))}
          </TBody>
@@ -309,10 +311,10 @@ export const AppConnectionsTable = () => {
        onOpenChange={(isOpen) => handlePopUpToggle("editCredentials", isOpen)}
        appConnection={popUp.editCredentials.data}
      />
-      <EditAppConnectionNameModal
-        isOpen={popUp.editName.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("editName", isOpen)}
-        appConnection={popUp.editName.data}
+      <EditAppConnectionDetailsModal
+        isOpen={popUp.editDetails.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("editDetails", isOpen)}
+        appConnection={popUp.editDetails.data}
      />
    </div>
  );
@@ -1,23 +1,23 @@
-import { useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";

 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input, Modal, ModalClose, ModalContent } from "@app/components/v2";
+import { Button, Modal, ModalClose, ModalContent } from "@app/components/v2";
 import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
 import { TAppConnection, useUpdateAppConnection } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
-import { slugSchema } from "@app/lib/schemas";
 import { DiscriminativePick } from "@app/lib/types";

+import { genericAppConnectionFieldsSchema, GenericAppConnectionsFields } from "./AppConnectionForm";
+
 type Props = {
  isOpen: boolean;
  onOpenChange: (isOpen: boolean) => void;
  appConnection?: TAppConnection;
 };

-const formSchema = z.object({
-  name: slugSchema({ min: 1, max: 32, field: "Name" }),
+const formSchema = genericAppConnectionFieldsSchema.extend({
  app: z.nativeEnum(AppConnection)
 });

@@ -29,14 +29,19 @@ const Content = ({ appConnection, onComplete }: ContentProps) => {
  const updateAppConnection = useUpdateAppConnection();
  const { name: appName } = APP_CONNECTION_MAP[appConnection.app];

+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: appConnection.name,
+      app: appConnection.app,
+      description: appConnection.description
+    }
+  });
+
  const {
    handleSubmit,
-    register,
-    formState: { isSubmitting, errors, isDirty }
-  } = useForm<FormData>({
-    resolver: zodResolver(formSchema),
-    defaultValues: { name: appConnection.name, app: appConnection.app }
-  });
+    formState: { isSubmitting, isDirty }
+  } = form;

  const onSubmit = async (formData: DiscriminativePick<TAppConnection, "name" | "app">) => {
    try {
@@ -60,38 +65,32 @@ const Content = ({ appConnection, onComplete }: ContentProps) => {
  };

  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <FormControl
-        helperText="Name must be slug-friendly"
-        errorText={errors.name?.message}
-        isError={Boolean(errors.name?.message)}
-        label="Name"
-      >
-        <Input autoFocus placeholder={`my-${AppConnection.AWS}-connection`} {...register("name")} />
-      </FormControl>
-
-      <div className="mt-8 flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          colorSchema="secondary"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting || !isDirty}
-        >
-          Update Name
-        </Button>
-        <ModalClose asChild>
-          <Button colorSchema="secondary" variant="plain">
-            Cancel
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <GenericAppConnectionsFields />
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            Update Details
          </Button>
-        </ModalClose>
-      </div>
-    </form>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
  );
 };

-export const EditAppConnectionNameModal = ({ isOpen, onOpenChange, appConnection }: Props) => {
+export const EditAppConnectionDetailsModal = ({ isOpen, onOpenChange, appConnection }: Props) => {
  if (!appConnection) return null;

  return (