Merge pull request #3035 from akhilmhdh/fix/env-ui

feat: updated ui validation for env to 64 like api

backend/src/services/app-connection/aws/aws-connection-fns.ts

@@ -81,11 +81,14 @@ export const getAwsConnectionConfig = async (appConnection: TAwsConnectionConfig
 };
 
 export const validateAwsConnectionCredentials = async (appConnection: TAwsConnectionConfig) => {
-  const awsConfig = await getAwsConnectionConfig(appConnection);
+  let resp: AWS.STS.GetCallerIdentityResponse & {
-  const sts = new AWS.STS(awsConfig);
+    $response: AWS.Response<AWS.STS.GetCallerIdentityResponse, AWS.AWSError>;
-  let resp: Awaited<ReturnType<ReturnType<typeof sts.getCallerIdentity>["promise"]>>;
+  };
 
   try {
+    const awsConfig = await getAwsConnectionConfig(appConnection);
+    const sts = new AWS.STS(awsConfig);
+
     resp = await sts.getCallerIdentity().promise();
   } catch (e: unknown) {
     throw new BadRequestError({
@@ -93,7 +96,7 @@ export const validateAwsConnectionCredentials = async (appConnection: TAwsConnec
     });
   }
 
-  if (resp.$response.httpResponse.statusCode !== 200)
+  if (resp?.$response.httpResponse.statusCode !== 200)
     throw new InternalServerError({
       message: `Unable to validate credentials: ${
         resp.$response.error?.message ??

docs/integrations/app-connections/aws.mdx

@@ -9,10 +9,6 @@ Infisical supports two methods for connecting to AWS.
     <Tab title="Assume Role (Recommended)">
         Infisical will assume the provided role in your AWS account securely, without the need to share any credentials.
 
-        **Prerequisites:**
-
-        - Set up and add envars to [Infisical Cloud](https://app.infisical.com)
-
         <Accordion title="Self-Hosted Instance">
             To connect your self-hosted Infisical instance with AWS, you need to set up an AWS IAM User account that can assume the configured AWS IAM Role.
 
@@ -47,8 +43,8 @@ Infisical supports two methods for connecting to AWS.
                     ![Access Key Step 3](/images/integrations/aws/integrations-aws-access-key-3.png)
                 </Step>
                 <Step title="Set Up Connection Keys">
-                    1. Set the access key as **INF_APP_CONNECTION_AWS_CLIENT_ID**.
+                    1. Set the access key as **INF_APP_CONNECTION_AWS_ACCESS_KEY_ID**.
-                    2. Set the secret key as **INF_APP_CONNECTION_AWS_CLIENT_SECRET**.
+                    2. Set the secret key as **INF_APP_CONNECTION_AWS_SECRET_ACCESS_KEY**.
                 </Step>
             </Steps>
         </Accordion>
@@ -63,7 +59,11 @@ Infisical supports two methods for connecting to AWS.
                 4. Optionally, enable **Require external ID** and enter your **Organization ID** to further enhance security.
             </Step>
 
-            <Step title="Add Required Permissions for the IAM Role">
+            <Step title="Add Required Permissions to the IAM Role">
+                Navigate to your IAM role permissions and click **Create Inline Policy**.
+
+                ![IAM Role Create Policy](/images/app-connections/aws/assume-role-create-policy.png)
+
                 Depending on your use case, add one or more of the following policies to your IAM Role:
 
                 <Tabs>
@@ -199,22 +199,13 @@ Infisical supports two methods for connecting to AWS.
     <Tab title="Access Key">
         Infisical will use the provided **Access Key ID** and **Secret Key** to connect to your AWS instance.
 
-        **Prerequisites:**
-
-        - Set up and add envars to [Infisical Cloud](https://app.infisical.com)
-
         <Steps>
-            <Step title="Create the Managing User IAM Role for Infisical">
+            <Step title="Add Required Permissions to the IAM User">
-                1. Navigate to the [Create IAM Role](https://console.aws.amazon.com/iamv2/home#/roles/create?step=selectEntities) page in your AWS Console.
+                Navigate to your IAM user permissions and click **Create Inline Policy**.
-                ![IAM Role Creation](/images/integrations/aws/integration-aws-iam-assume-role.png)
 
-                2. Select **AWS Account** as the **Trusted Entity Type**.
+                ![User IAM Create Policy](/images/app-connections/aws/access-key-create-policy.png)
-                3. Choose **Another AWS Account** and enter **381492033652** (Infisical AWS Account ID). This restricts the role to be assumed only by Infisical. If self-hosting, provide your AWS account number instead.
-                4. Optionally, enable **Require external ID** and enter your **Organization ID** to further enhance security.
-            </Step>
 
-            <Step title="Add Required Permissions for the IAM Role">
+                Depending on your use case, add one or more of the following policies to your user:
-                Depending on your use case, add one or more of the following policies to your IAM Role:
 
                 <Tabs>
                     <Tab title="Secret Sync">

docs/integrations/app-connections/github.mdx

@@ -9,10 +9,6 @@ Infisical supports two methods for connecting to GitHub.
     <Tab title="GitHub App (Recommended)">
         Infisical will use a GitHub App with finely grained permissions to connect to GitHub.
 
-        **Prerequisites:**
-
-        - Set up and add envars to [Infisical Cloud](https://app.infisical.com)
-
         <Accordion title="Self-Hosted Instance">
             Using the GitHub integration with app authentication on a self-hosted instance of Infisical requires configuring an application on GitHub
             and registering your instance with it.
@@ -61,9 +57,9 @@ Infisical supports two methods for connecting to GitHub.
 
                     - `INF_APP_CONNECTION_GITHUB_APP_CLIENT_ID`: The **Client ID** of your GitHub application.
                     - `INF_APP_CONNECTION_GITHUB_APP_CLIENT_SECRET`: The **Client Secret** of your GitHub application.
-                    - `INF_APP_CONNECTION_GITHUB_APP_CLIENT_SLUG`: The **Slug** of your GitHub application. This is the one found in the URL.
+                    - `INF_APP_CONNECTION_GITHUB_APP_SLUG`: The **Slug** of your GitHub application. This is the one found in the URL.
-                    - `INF_APP_CONNECTION_GITHUB_APP_CLIENT_APP_ID`: The **App ID** of your GitHub application.
+                    - `INF_APP_CONNECTION_GITHUB_APP_ID`: The **App ID** of your GitHub application.
-                    - `INF_APP_CONNECTION_GITHUB_APP_CLIENT_PRIVATE_KEY`: The **Private Key** of your GitHub application.
+                    - `INF_APP_CONNECTION_GITHUB_APP_PRIVATE_KEY`: The **Private Key** of your GitHub application.
 
                     Once added, restart your Infisical instance and use the GitHub integration via app authentication.
                 </Step>
@@ -100,10 +96,6 @@ Infisical supports two methods for connecting to GitHub.
     <Tab title="OAuth">
         Infisical will use an OAuth App to connect to GitHub.
 
-        **Prerequisites:**
-
-        - Set up and add envars to [Infisical Cloud](https://app.infisical.com)
-
         <Accordion title="Self-Hosted Instance">
             Using the GitHub integration on a self-hosted instance of Infisical requires configuring an OAuth application in GitHub
             and registering your instance with it.

docs/mint.json

@@ -347,16 +347,26 @@
       "group": "App Connections",
       "pages": [
         "integrations/app-connections/overview",
-        "integrations/app-connections/aws",
+        {
-        "integrations/app-connections/github"
+          "group": "Connections",
+          "pages": [
+            "integrations/app-connections/aws",
+            "integrations/app-connections/github"
+          ]
+        }
       ]
     },
     {
       "group": "Secret Syncs",
       "pages": [
         "integrations/secret-syncs/overview",
-        "integrations/secret-syncs/aws-parameter-store",
+        {
-        "integrations/secret-syncs/github"
+          "group": "Syncs",
+          "pages": [
+            "integrations/secret-syncs/aws-parameter-store",
+            "integrations/secret-syncs/github"
+          ]
+        }
       ]
     },
     {

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncsTable.tsx

@@ -289,34 +289,36 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
           </DropdownMenuTrigger>
           <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
             <DropdownMenuLabel>Status</DropdownMenuLabel>
-            {Object.values(SecretSyncStatus).map((status) => (
+            {[SecretSyncStatus.Running, SecretSyncStatus.Succeeded, SecretSyncStatus.Failed].map(
-              <DropdownMenuItem
+              (status) => (
-                onClick={(e) => {
+                <DropdownMenuItem
-                  e.preventDefault();
+                  onClick={(e) => {
-                  setFilters((prev) => ({
+                    e.preventDefault();
-                    ...prev,
+                    setFilters((prev) => ({
-                    status: prev.status.includes(status)
+                      ...prev,
-                      ? prev.status.filter((s) => s !== status)
+                      status: prev.status.includes(status)
-                      : [...prev.status, status]
+                        ? prev.status.filter((s) => s !== status)
-                  }));
+                        : [...prev.status, status]
-                }}
+                    }));
-                key={status}
+                  }}
-                icon={
+                  key={status}
-                  filters.status.includes(status) && (
+                  icon={
-                    <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
+                    filters.status.includes(status) && (
-                  )
+                      <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
-                }
+                    )
-                iconPos="right"
+                  }
-              >
+                  iconPos="right"
-                <div className="flex items-center gap-2">
+                >
-                  <FontAwesomeIcon
+                  <div className="flex items-center gap-2">
-                    icon={STATUS_ICON_MAP[status].icon}
+                    <FontAwesomeIcon
-                    className={STATUS_ICON_MAP[status].className}
+                      icon={STATUS_ICON_MAP[status].icon}
-                  />
+                      className={STATUS_ICON_MAP[status].className}
-                  <span className="capitalize">{STATUS_ICON_MAP[status].name}</span>
+                    />
-                </div>
+                    <span className="capitalize">{STATUS_ICON_MAP[status].name}</span>
-              </DropdownMenuItem>
+                  </div>
-            ))}
+                </DropdownMenuItem>
+              )
+            )}
             <DropdownMenuLabel>Service</DropdownMenuLabel>
             {secretSyncs.length ? (
               [...new Set(secretSyncs.map(({ destination }) => destination))].map((destination) => {

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDetailsSection.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { SecretSyncLabel, SecretSyncStatusBadge } from "@app/components/secret-syncs";
 import { IconButton } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
@@ -57,6 +57,11 @@ export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) =
         <div className="space-y-3">
           <SecretSyncLabel label="Name">{name}</SecretSyncLabel>
           <SecretSyncLabel label="Description">{description}</SecretSyncLabel>
+          {syncStatus && (
+            <SecretSyncLabel label="Status">
+              <SecretSyncStatusBadge status={syncStatus} />
+            </SecretSyncLabel>
+          )}
           {lastSyncedAt && (
             <SecretSyncLabel label="Last Synced">
               {format(new Date(lastSyncedAt), "yyyy-MM-dd, hh:mm aaa")}

frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx

@@ -19,7 +19,7 @@ const schema = z.object({
   environmentName: z
     .string()
     .min(1, { message: "Environment Name field must be at least 1 character" }),
-  environmentSlug: slugSchema()
+  environmentSlug: slugSchema({ max: 64 })
 });
 
 export type FormData = z.infer<typeof schema>;

frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/UpdateEnvironmentModal.tsx

@@ -17,7 +17,7 @@ type Props = {
 
 const schema = z.object({
   name: z.string(),
-  slug: slugSchema({ min: 1 })
+  slug: slugSchema({ min: 1, max: 64 })
 });
 
 export type FormData = z.infer<typeof schema>;