Merge branch 'main' into octopus-deploy-integration

frontend/next.config.js

@@ -2,7 +2,7 @@ const path = require("path");
 
 const ContentSecurityPolicy = `
 	default-src 'self';
-  connect-src 'self' https://*.posthog.com;
+  connect-src 'self' https://*.posthog.com http://127.0.0.1:*;
 	script-src 'self' https://*.posthog.com https://js.stripe.com https://api.stripe.com https://widget.intercom.io https://js.intercomcdn.com https://hcaptcha.com https://*.hcaptcha.com 'unsafe-inline' 'unsafe-eval';
 	style-src 'self' https://rsms.me 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com;
 	child-src https://api.stripe.com;

frontend/src/components/v2/projects/NewProjectModal.tsx

@@ -0,0 +1,328 @@
+import { FC, useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useRouter } from "next/router";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import z from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  Checkbox,
+  FormControl,
+  Input,
+  Modal,
+  ModalClose,
+  ModalContent,
+  Select,
+  SelectItem,
+  TextArea
+} from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useOrgPermission,
+  useSubscription,
+  useUser
+} from "@app/context";
+import {
+  fetchOrgUsers,
+  useAddUserToWsNonE2EE,
+  useCreateWorkspace,
+  useGetExternalKmsList
+} from "@app/hooks/api";
+import { INTERNAL_KMS_KEY_ID } from "@app/hooks/api/kms/types";
+import { InfisicalProjectTemplate, useListProjectTemplates } from "@app/hooks/api/projectTemplates";
+
+const formSchema = z.object({
+  name: z.string().trim().min(1, "Required").max(64, "Too long, maximum length is 64 characters"),
+  description: z
+    .string()
+    .trim()
+    .max(256, "Description too long, max length is 256 characters")
+    .optional(),
+  addMembers: z.boolean(),
+  kmsKeyId: z.string(),
+  template: z.string()
+});
+
+type TAddProjectFormData = z.infer<typeof formSchema>;
+
+interface NewProjectModalProps {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+}
+
+type NewProjectFormProps = Pick<NewProjectModalProps, "onOpenChange">;
+
+const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
+  const router = useRouter();
+  const { currentOrg } = useOrganization();
+  const { permission } = useOrgPermission();
+  const { user } = useUser();
+  const createWs = useCreateWorkspace();
+  const addUsersToProject = useAddUserToWsNonE2EE();
+  const { subscription } = useSubscription();
+
+  const canReadProjectTemplates = permission.can(
+    OrgPermissionActions.Read,
+    OrgPermissionSubjects.ProjectTemplates
+  );
+
+  const { data: projectTemplates = [] } = useListProjectTemplates({
+    enabled: Boolean(canReadProjectTemplates && subscription?.projectTemplates)
+  });
+
+  const { data: externalKmsList } = useGetExternalKmsList(currentOrg?.id!, {
+    enabled: permission.can(OrgPermissionActions.Read, OrgPermissionSubjects.Kms)
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting, errors }
+  } = useForm<TAddProjectFormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      kmsKeyId: INTERNAL_KMS_KEY_ID,
+      template: InfisicalProjectTemplate.Default
+    }
+  });
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      console.log("Current form errors:", errors);
+    }
+  }, [errors]);
+
+  const onCreateProject = async ({
+    name,
+    description,
+    addMembers,
+    kmsKeyId,
+    template
+  }: TAddProjectFormData) => {
+    // type check
+    if (!currentOrg) return;
+    if (!user) return;
+    try {
+      const {
+        data: {
+          project: { id: newProjectId }
+        }
+      } = await createWs.mutateAsync({
+        projectName: name,
+        projectDescription: description,
+        kmsKeyId: kmsKeyId !== INTERNAL_KMS_KEY_ID ? kmsKeyId : undefined,
+        template
+      });
+
+      if (addMembers) {
+        const orgUsers = await fetchOrgUsers(currentOrg.id);
+        await addUsersToProject.mutateAsync({
+          usernames: orgUsers
+            .filter(
+              (member) => member.user.username !== user.username && member.status === "accepted"
+            )
+            .map((member) => member.user.username),
+          projectId: newProjectId,
+          orgId: currentOrg.id
+        });
+      }
+      // eslint-disable-next-line no-promise-executor-return -- We do this because the function returns too fast, which sometimes causes an error when the user is redirected.
+      await new Promise((resolve) => setTimeout(resolve, 2_000));
+
+      createNotification({ text: "Project created", type: "success" });
+      reset();
+      onOpenChange(false);
+      router.push(`/project/${newProjectId}/secrets/overview`);
+    } catch (err) {
+      console.error(err);
+      createNotification({ text: "Failed to create project", type: "error" });
+    }
+  };
+  const onSubmit = handleSubmit((data) => {
+    return onCreateProject(data);
+  });
+  return (
+    <form onSubmit={onSubmit}>
+      <div className="flex flex-col gap-2">
+        <Controller
+          control={control}
+          name="name"
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Project Name"
+              isError={Boolean(error)}
+              errorText={error?.message}
+              className="flex-1"
+            >
+              <Input {...field} placeholder="Type your project name" />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          name="description"
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Project Description"
+              isError={Boolean(error)}
+              isOptional
+              errorText={error?.message}
+              className="flex-1"
+            >
+              <TextArea
+                placeholder="Project description"
+                {...field}
+                rows={3}
+                className="thin-scrollbar w-full !resize-none bg-mineshaft-900"
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          name="template"
+          render={({ field: { value, onChange } }) => (
+            <OrgPermissionCan
+              I={OrgPermissionActions.Read}
+              a={OrgPermissionSubjects.ProjectTemplates}
+            >
+              {(isAllowed) => (
+                <FormControl
+                  label="Project Template"
+                  icon={<FontAwesomeIcon icon={faInfoCircle} size="sm" />}
+                  tooltipText={
+                    <>
+                      <p>
+                        Create this project from a template to provision it with custom environments
+                        and roles.
+                      </p>
+                      {subscription && !subscription.projectTemplates && (
+                        <p className="pt-2">Project templates are a paid feature.</p>
+                      )}
+                    </>
+                  }
+                >
+                  <Select
+                    defaultValue={InfisicalProjectTemplate.Default}
+                    placeholder={InfisicalProjectTemplate.Default}
+                    isDisabled={!isAllowed || !subscription?.projectTemplates}
+                    value={value}
+                    onValueChange={onChange}
+                    className="w-full"
+                  >
+                    {projectTemplates.length
+                      ? projectTemplates.map((template) => (
+                          <SelectItem key={template.id} value={template.name}>
+                            {template.name}
+                          </SelectItem>
+                        ))
+                      : Object.values(InfisicalProjectTemplate).map((template) => (
+                          <SelectItem key={template} value={template}>
+                            {template}
+                          </SelectItem>
+                        ))}
+                  </Select>
+                </FormControl>
+              )}
+            </OrgPermissionCan>
+          )}
+        />
+      </div>
+      <div className="mt-4 pl-1">
+        <Controller
+          control={control}
+          name="addMembers"
+          defaultValue={false}
+          render={({ field: { onBlur, value, onChange } }) => (
+            <OrgPermissionCan I={OrgPermissionActions.Read} a={OrgPermissionSubjects.Member}>
+              {(isAllowed) => (
+                <div>
+                  <Checkbox
+                    id="add-project-layout"
+                    isChecked={value}
+                    onCheckedChange={onChange}
+                    isDisabled={!isAllowed}
+                    onBlur={onBlur}
+                  >
+                    Add all members of my organization to this project
+                  </Checkbox>
+                </div>
+              )}
+            </OrgPermissionCan>
+          )}
+        />
+      </div>
+      <div className="mt-14 flex">
+        <Accordion type="single" collapsible className="w-full">
+          <AccordionItem value="advance-settings" className="data-[state=open]:border-none">
+            <AccordionTrigger className="h-fit flex-none pl-1 text-sm">
+              <div className="order-1 ml-3">Advanced Settings</div>
+            </AccordionTrigger>
+            <AccordionContent>
+              <Controller
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                  <FormControl errorText={error?.message} isError={Boolean(error)} label="KMS">
+                    <Select
+                      {...field}
+                      onValueChange={(e) => {
+                        onChange(e);
+                      }}
+                      className="mb-12 w-full bg-mineshaft-600"
+                    >
+                      <SelectItem value={INTERNAL_KMS_KEY_ID} key="kms-internal">
+                        Default Infisical KMS
+                      </SelectItem>
+                      {externalKmsList?.map((kms) => (
+                        <SelectItem value={kms.id} key={`kms-${kms.id}`}>
+                          {kms.name}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+                control={control}
+                name="kmsKeyId"
+              />
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <div className="absolute right-0 bottom-0 mr-6 mb-6 flex items-start justify-end">
+          <ModalClose>
+            <Button colorSchema="secondary" variant="plain" className="py-2">
+              Cancel
+            </Button>
+          </ModalClose>
+          <Button isDisabled={isSubmitting} isLoading={isSubmitting} className="ml-4" type="submit">
+            Create Project
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export const NewProjectModal: FC<NewProjectModalProps> = ({ isOpen, onOpenChange }) => {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        title="Create a new project"
+        subTitle="This project will contain your secrets and configurations."
+      >
+        <NewProjectForm onOpenChange={onOpenChange} />
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/components/v2/projects/index.tsx

@@ -0,0 +1 @@
+export { NewProjectModal } from "./NewProjectModal";

frontend/src/hooks/api/dynamicSecret/types.ts

@@ -29,7 +29,8 @@ export enum DynamicSecretProviders {
   Ldap = "ldap",
   SapHana = "sap-hana",
   Snowflake = "snowflake",
-  Totp = "totp"
+  Totp = "totp",
+  SapAse = "sap-ase"
 }
 
 export enum SqlProviders {
@@ -220,6 +221,18 @@ export type TDynamicSecretProvider =
         ca?: string | undefined;
       };
     }
+  | {
+      type: DynamicSecretProviders.SapAse;
+      inputs: {
+        host: string;
+        port: number;
+        username: string;
+        database: string;
+        password: string;
+        creationStatement: string;
+        revocationStatement: string;
+      };
+    }
   | {
       type: DynamicSecretProviders.Snowflake;
       inputs: {

frontend/src/hooks/api/integrations/types.ts

@@ -59,6 +59,8 @@ export type TIntegration = {
     shouldEnableDelete?: boolean;
 
     octopusDeployScopeValues?: TOctopusDeployScopeValues;
+    awsIamRole?: string;
+    region?: string;
   };
 };
 

frontend/src/hooks/api/types.ts

@@ -34,9 +34,9 @@ export type {
   CreateWorkspaceDTO,
   DeleteEnvironmentDTO,
   DeleteWorkspaceDTO,
-  RenameWorkspaceDTO,
   ToggleAutoCapitalizationDTO,
   UpdateEnvironmentDTO,
+  UpdateProjectDTO,
   Workspace,
   WorkspaceEnv,
   WorkspaceTag
@@ -51,17 +51,26 @@ export enum ApiErrorTypes {
 
 export type TApiErrors =
   | {
+      requestId: string;
       error: ApiErrorTypes.ValidationError;
       message: ZodIssue[];
       statusCode: 401;
     }
   | {
+      requestId: string;
+      error: ApiErrorTypes.UnauthorizedError;
+      message: string;
+      statusCode: 401;
+    }
+  | {
+      requestId: string;
       error: ApiErrorTypes.ForbiddenError;
       message: string;
       details: PureAbility["rules"];
       statusCode: 403;
     }
   | {
+      requestId: string;
       statusCode: 400;
       message: string;
       error: ApiErrorTypes.BadRequestError;

frontend/src/hooks/api/workspace/index.tsx

@@ -33,10 +33,11 @@ export {
   useListWorkspacePkiAlerts,
   useListWorkspacePkiCollections,
   useNameWorkspaceSecrets,
-  useRenameWorkspace,
   useToggleAutoCapitalization,
   useUpdateIdentityWorkspaceRole,
+  useUpdateProject,
   useUpdateUserWorkspaceRole,
   useUpdateWsEnvironment,
-  useUpgradeProject} from "./queries";
+  useUpgradeProject
+} from "./queries";
 export { workspaceKeys } from "./query-keys";

frontend/src/hooks/api/workspace/queries.tsx

@@ -26,7 +26,6 @@ import {
   DeleteWorkspaceDTO,
   NameWorkspaceSecretsDTO,
   ProjectIdentityOrderBy,
-  RenameWorkspaceDTO,
   TGetUpgradeProjectStatusDTO,
   TListProjectIdentitiesDTO,
   ToggleAutoCapitalizationDTO,
@@ -35,6 +34,7 @@ import {
   UpdateAuditLogsRetentionDTO,
   UpdateEnvironmentDTO,
   UpdatePitVersionLimitDTO,
+  UpdateProjectDTO,
   Workspace
 } from "./types";
 
@@ -208,19 +208,26 @@ export const useGetWorkspaceIntegrations = (workspaceId: string) =>
 
 export const createWorkspace = ({
   projectName,
+  projectDescription,
   kmsKeyId,
   template
 }: CreateWorkspaceDTO): Promise<{ data: { project: Workspace } }> => {
-  return apiRequest.post("/api/v2/workspace", { projectName, kmsKeyId, template });
+  return apiRequest.post("/api/v2/workspace", {
+    projectName,
+    projectDescription,
+    kmsKeyId,
+    template
+  });
 };
 
 export const useCreateWorkspace = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{ data: { project: Workspace } }, {}, CreateWorkspaceDTO>({
-    mutationFn: async ({ projectName, kmsKeyId, template }) =>
+    mutationFn: async ({ projectName, projectDescription, kmsKeyId, template }) =>
       createWorkspace({
         projectName,
+        projectDescription,
         kmsKeyId,
         template
       }),
@@ -230,12 +237,15 @@ export const useCreateWorkspace = () => {
   });
 };
 
-export const useRenameWorkspace = () => {
+export const useUpdateProject = () => {
   const queryClient = useQueryClient();
 
-  return useMutation<{}, {}, RenameWorkspaceDTO>({
-    mutationFn: ({ workspaceID, newWorkspaceName }) => {
-      return apiRequest.post(`/api/v1/workspace/${workspaceID}/name`, { name: newWorkspaceName });
+  return useMutation<{}, {}, UpdateProjectDTO>({
+    mutationFn: ({ projectID, newProjectName, newProjectDescription }) => {
+      return apiRequest.patch(`/api/v1/workspace/${projectID}`, {
+        name: newProjectName,
+        description: newProjectDescription
+      });
     },
     onSuccess: () => {
       queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);

frontend/src/hooks/api/workspace/types.ts

@@ -16,6 +16,7 @@ export type Workspace = {
   __v: number;
   id: string;
   name: string;
+  description?: string;
   orgId: string;
   version: ProjectVersion;
   upgradeStatus: string | null;
@@ -26,7 +27,6 @@ export type Workspace = {
   auditLogsRetentionDays: number;
   slug: string;
   createdAt: string;
-
   roles?: TProjectRole[];
 };
 
@@ -56,11 +56,17 @@ export type TGetUpgradeProjectStatusDTO = {
 // mutation dto
 export type CreateWorkspaceDTO = {
   projectName: string;
+  projectDescription?: string;
   kmsKeyId?: string;
   template?: string;
 };
 
-export type RenameWorkspaceDTO = { workspaceID: string; newWorkspaceName: string };
+export type UpdateProjectDTO = {
+  projectID: string;
+  newProjectName: string;
+  newProjectDescription?: string;
+};
+
 export type UpdatePitVersionLimitDTO = { projectSlug: string; pitVersionLimit: number };
 export type UpdateAuditLogsRetentionDTO = { projectSlug: string; auditLogsRetentionDays: number };
 export type ToggleAutoCapitalizationDTO = { workspaceID: string; state: boolean };

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -6,7 +6,6 @@
 /* eslint-disable func-names */
 
 import { useEffect, useMemo, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -21,66 +20,48 @@ import {
   faEnvelope,
   faInfinity,
   faInfo,
-  faInfoCircle,
   faMobile,
   faPlus,
   faQuestion,
   faStar as faSolidStar
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { yupResolver } from "@hookform/resolvers/yup";
 import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 import { twMerge } from "tailwind-merge";
-import * as yup from "yup";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { tempLocalStorage } from "@app/components/utilities/checks/tempLocalStorage";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
   Button,
-  Checkbox,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  FormControl,
-  Input,
   Menu,
   MenuItem,
-  Modal,
-  ModalContent,
   Select,
   SelectItem,
   UpgradePlanModal
 } from "@app/components/v2";
+import { NewProjectModal } from "@app/components/v2/projects/NewProjectModal";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
   useOrganization,
-  useOrgPermission,
   useSubscription,
   useUser,
   useWorkspace
 } from "@app/context";
 import { usePopUp, useToggle } from "@app/hooks";
 import {
-  fetchOrgUsers,
-  useAddUserToWsNonE2EE,
-  useCreateWorkspace,
   useGetAccessRequestsCount,
-  useGetExternalKmsList,
   useGetOrgTrialUrl,
   useGetSecretApprovalRequestCount,
   useLogoutUser,
   useSelectOrganization
 } from "@app/hooks/api";
 import { MfaMethod } from "@app/hooks/api/auth/types";
-import { INTERNAL_KMS_KEY_ID } from "@app/hooks/api/kms/types";
-import { InfisicalProjectTemplate, useListProjectTemplates } from "@app/hooks/api/projectTemplates";
 import { Workspace } from "@app/hooks/api/types";
 import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
 import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
@@ -119,20 +100,6 @@ const supportOptions = [
   ]
 ];
 
-const formSchema = yup.object({
-  name: yup
-    .string()
-    .required()
-    .label("Project Name")
-    .trim()
-    .max(64, "Too long, maximum length is 64 characters"),
-  addMembers: yup.bool().required().label("Add Members"),
-  kmsKeyId: yup.string().label("KMS Key ID"),
-  template: yup.string().label("Project Template Name")
-});
-
-type TAddProjectFormData = yup.InferType<typeof formSchema>;
-
 export const AppLayout = ({ children }: LayoutProps) => {
   const router = useRouter();
 
@@ -165,10 +132,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
 
   const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({ workspaceId });
   const { data: accessApprovalRequestCount } = useGetAccessRequestsCount({ projectSlug });
-  const { permission } = useOrgPermission();
-  const { data: externalKmsList } = useGetExternalKmsList(currentOrg?.id!, {
-    enabled: permission.can(OrgPermissionActions.Read, OrgPermissionSubjects.Kms)
-  });
 
   const pendingRequestsCount = useMemo(() => {
     return (secretApprovalReqCount?.open || 0) + (accessApprovalRequestCount?.pendingCount || 0);
@@ -178,27 +141,13 @@ export const AppLayout = ({ children }: LayoutProps) => {
     ? subscription.workspacesUsed < subscription.workspaceLimit
     : true;
 
-  const createWs = useCreateWorkspace();
-  const addUsersToProject = useAddUserToWsNonE2EE();
-
   const infisicalPlatformVersion = process.env.NEXT_PUBLIC_INFISICAL_PLATFORM_VERSION;
 
-  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
     "addNewWs",
     "upgradePlan",
     "createOrg"
   ] as const);
-  const {
-    control,
-    formState: { isSubmitting },
-    reset,
-    handleSubmit
-  } = useForm<TAddProjectFormData>({
-    resolver: yupResolver(formSchema),
-    defaultValues: {
-      kmsKeyId: INTERNAL_KMS_KEY_ID
-    }
-  });
 
   const { t } = useTranslation();
 
@@ -281,58 +230,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
     putUserInOrg();
   }, [router.query.id]);
 
-  const canReadProjectTemplates = permission.can(
-    OrgPermissionActions.Read,
-    OrgPermissionSubjects.ProjectTemplates
-  );
-
-  const { data: projectTemplates = [] } = useListProjectTemplates({
-    enabled: Boolean(canReadProjectTemplates && subscription?.projectTemplates)
-  });
-
-  const onCreateProject = async ({ name, addMembers, kmsKeyId, template }: TAddProjectFormData) => {
-    // type check
-    if (!currentOrg) return;
-    if (!user) return;
-    try {
-      const {
-        data: {
-          project: { id: newProjectId }
-        }
-      } = await createWs.mutateAsync({
-        projectName: name,
-        kmsKeyId: kmsKeyId !== INTERNAL_KMS_KEY_ID ? kmsKeyId : undefined,
-        template
-      });
-
-      if (addMembers) {
-        const orgUsers = await fetchOrgUsers(currentOrg.id);
-        await addUsersToProject.mutateAsync({
-          usernames: orgUsers
-            .filter(
-              (member) => member.user.username !== user.username && member.status === "accepted"
-            )
-            .map((member) => member.user.username),
-          projectId: newProjectId,
-          orgId: currentOrg.id
-        });
-      }
-
-      // eslint-disable-next-line no-promise-executor-return -- We do this because the function returns too fast, which sometimes causes an error when the user is redirected.
-      await new Promise((resolve) => setTimeout(resolve, 2_000));
-
-      // eslint-disable-next-line no-promise-executor-return -- We do this because the function returns too fast, which sometimes causes an error when the user is redirected.
-      await new Promise((resolve) => setTimeout(resolve, 2_000));
-
-      createNotification({ text: "Project created", type: "success" });
-      handlePopUpClose("addNewWs");
-      router.push(`/project/${newProjectId}/secrets/overview`);
-    } catch (err) {
-      console.error(err);
-      createNotification({ text: "Failed to create project", type: "error" });
-    }
-  };
-
   const addProjectToFavorites = async (projectId: string) => {
     try {
       if (currentOrg?.id) {
@@ -560,8 +457,11 @@ export const AppLayout = ({ children }: LayoutProps) => {
                         value={currentWorkspace?.id}
                         className="w-full bg-mineshaft-600 py-2.5 font-medium [&>*:first-child]:truncate"
                         onValueChange={(value) => {
-                          router.push(`/project/${value}/secrets/overview`);
                           localStorage.setItem("projectData.id", value);
+                          // this is not using react query because react query in overview is throwing error when envs are not exact same count
+                          // to reproduce change this back to router.push and switch between two projects with different env count
+                          // look into this on dashboard revamp
+                          window.location.assign(`/project/${value}/secrets/overview`);
                         }}
                         position="popper"
                         dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 z-50 max-h-96 border-gray-700"
@@ -916,176 +816,10 @@ export const AppLayout = ({ children }: LayoutProps) => {
               </div>
             </nav>
           </aside>
-          <Modal
+          <NewProjectModal
             isOpen={popUp.addNewWs.isOpen}
-            onOpenChange={(isModalOpen) => {
-              handlePopUpToggle("addNewWs", isModalOpen);
-              reset();
-            }}
-          >
-            <ModalContent
-              title="Create a new project"
-              subTitle="This project will contain your secrets and configurations."
-            >
-              <form onSubmit={handleSubmit(onCreateProject)}>
-                <div className="flex gap-2">
-                  <Controller
-                    control={control}
-                    name="name"
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                      <FormControl
-                        label="Project Name"
-                        isError={Boolean(error)}
-                        errorText={error?.message}
-                        className="flex-1"
-                      >
-                        <Input {...field} placeholder="Type your project name" />
-                      </FormControl>
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    name="template"
-                    render={({ field: { value, onChange } }) => (
-                      <OrgPermissionCan
-                        I={OrgPermissionActions.Read}
-                        a={OrgPermissionSubjects.ProjectTemplates}
-                      >
-                        {(isAllowed) => (
-                          <FormControl
-                            label="Project Template"
-                            icon={<FontAwesomeIcon icon={faInfoCircle} size="sm" />}
-                            tooltipText={
-                              <>
-                                <p>
-                                  Create this project from a template to provision it with custom
-                                  environments and roles.
-                                </p>
-                                {subscription && !subscription.projectTemplates && (
-                                  <p className="pt-2">Project templates are a paid feature.</p>
-                                )}
-                              </>
-                            }
-                          >
-                            <Select
-                              defaultValue={InfisicalProjectTemplate.Default}
-                              placeholder={InfisicalProjectTemplate.Default}
-                              isDisabled={!isAllowed || !subscription?.projectTemplates}
-                              value={value}
-                              onValueChange={onChange}
-                              className="w-44"
-                            >
-                              {projectTemplates.length
-                                ? projectTemplates.map((template) => (
-                                    <SelectItem key={template.id} value={template.name}>
-                                      {template.name}
-                                    </SelectItem>
-                                  ))
-                                : Object.values(InfisicalProjectTemplate).map((template) => (
-                                    <SelectItem key={template} value={template}>
-                                      {template}
-                                    </SelectItem>
-                                  ))}
-                            </Select>
-                          </FormControl>
-                        )}
-                      </OrgPermissionCan>
-                    )}
-                  />
-                </div>
-                <div className="mt-4 pl-1">
-                  <Controller
-                    control={control}
-                    name="addMembers"
-                    defaultValue={false}
-                    render={({ field: { onBlur, value, onChange } }) => (
-                      <OrgPermissionCan
-                        I={OrgPermissionActions.Read}
-                        a={OrgPermissionSubjects.Member}
-                      >
-                        {(isAllowed) => (
-                          <div>
-                            <Checkbox
-                              id="add-project-layout"
-                              isChecked={value}
-                              onCheckedChange={onChange}
-                              isDisabled={!isAllowed}
-                              onBlur={onBlur}
-                            >
-                              Add all members of my organization to this project
-                            </Checkbox>
-                          </div>
-                        )}
-                      </OrgPermissionCan>
-                    )}
-                  />
-                </div>
-                <div className="mt-14 flex">
-                  <Accordion type="single" collapsible className="w-full">
-                    <AccordionItem
-                      value="advance-settings"
-                      className="data-[state=open]:border-none"
-                    >
-                      <AccordionTrigger className="h-fit flex-none pl-1 text-sm">
-                        <div className="order-1 ml-3">Advanced Settings</div>
-                      </AccordionTrigger>
-                      <AccordionContent>
-                        <Controller
-                          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                            <FormControl
-                              errorText={error?.message}
-                              isError={Boolean(error)}
-                              label="KMS"
-                            >
-                              <Select
-                                {...field}
-                                onValueChange={(e) => {
-                                  onChange(e);
-                                }}
-                                className="mb-12 w-full bg-mineshaft-600"
-                              >
-                                <SelectItem value={INTERNAL_KMS_KEY_ID} key="kms-internal">
-                                  Default Infisical KMS
-                                </SelectItem>
-                                {externalKmsList?.map((kms) => (
-                                  <SelectItem value={kms.id} key={`kms-${kms.id}`}>
-                                    {kms.name}
-                                  </SelectItem>
-                                ))}
-                              </Select>
-                            </FormControl>
-                          )}
-                          control={control}
-                          name="kmsKeyId"
-                        />
-                      </AccordionContent>
-                    </AccordionItem>
-                  </Accordion>
-                  <div className="absolute right-0 bottom-0 mr-6 mb-6 flex items-start justify-end">
-                    <Button
-                      key="layout-cancel-create-project"
-                      onClick={() => handlePopUpClose("addNewWs")}
-                      colorSchema="secondary"
-                      variant="plain"
-                      className="py-2"
-                    >
-                      Cancel
-                    </Button>
-                    <Button
-                      isDisabled={isSubmitting}
-                      isLoading={isSubmitting}
-                      key="layout-create-project-submit"
-                      className="ml-4"
-                      type="submit"
-                    >
-                      Create Project
-                    </Button>
-                  </div>
-                </div>
-              </form>
-            </ModalContent>
-          </Modal>
+            onOpenChange={(isOpen) => handlePopUpToggle("addNewWs", isOpen)}
+          />
           <UpgradePlanModal
             isOpen={popUp.upgradePlan.isOpen}
             onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}

frontend/src/pages/org/[id]/overview/index.tsx

@@ -1,7 +1,6 @@
 // REFACTOR(akhilmhdh): This file needs to be split into multiple components too complex
 
 import { useEffect, useMemo, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import Head from "next/head";
 import Link from "next/link";
@@ -19,7 +18,6 @@ import {
   faExclamationCircle,
   faFileShield,
   faHandPeace,
-  faInfoCircle,
   faList,
   faMagnifyingGlass,
   faNetworkWired,
@@ -29,48 +27,22 @@ import {
   faUserPlus
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { yupResolver } from "@hookform/resolvers/yup";
 import * as Tabs from "@radix-ui/react-tabs";
-import * as yup from "yup";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import onboardingCheck from "@app/components/utilities/checks/OnboardingCheck";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  Button,
-  Checkbox,
-  FormControl,
-  IconButton,
-  Input,
-  Modal,
-  ModalContent,
-  Select,
-  SelectItem,
-  Skeleton,
-  UpgradePlanModal
-} from "@app/components/v2";
+import { Button, IconButton, Input, Skeleton, UpgradePlanModal } from "@app/components/v2";
+import { NewProjectModal } from "@app/components/v2/projects";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
   useOrganization,
-  useOrgPermission,
   useSubscription,
   useUser,
   useWorkspace
 } from "@app/context";
-import {
-  fetchOrgUsers,
-  useAddUserToWsNonE2EE,
-  useCreateWorkspace,
-  useGetExternalKmsList,
-  useRegisterUserAction
-} from "@app/hooks/api";
-import { INTERNAL_KMS_KEY_ID } from "@app/hooks/api/kms/types";
-import { InfisicalProjectTemplate, useListProjectTemplates } from "@app/hooks/api/projectTemplates";
+import { useRegisterUserAction } from "@app/hooks/api";
 // import { fetchUserWsKey } from "@app/hooks/api/keys/queries";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 import { Workspace } from "@app/hooks/api/types";
@@ -476,20 +448,6 @@ const LearningItemSquare = ({
   );
 };
 
-const formSchema = yup.object({
-  name: yup
-    .string()
-    .required()
-    .label("Project Name")
-    .trim()
-    .max(64, "Too long, maximum length is 64 characters"),
-  addMembers: yup.bool().required().label("Add Members"),
-  kmsKeyId: yup.string().label("KMS Key ID"),
-  template: yup.string().label("Project Template Name")
-});
-
-type TAddProjectFormData = yup.InferType<typeof formSchema>;
-
 // #TODO: Update all the workspaceIds
 const OrganizationPage = () => {
   const { t } = useTranslation();
@@ -498,7 +456,6 @@ const OrganizationPage = () => {
 
   const { workspaces, isLoading: isWorkspaceLoading } = useWorkspace();
   const { currentOrg } = useOrganization();
-  const { permission } = useOrgPermission();
   const routerOrgId = String(router.query.id);
   const orgWorkspaces = workspaces?.filter((workspace) => workspace.orgId === routerOrgId) || [];
   const { data: projectFavorites, isLoading: isProjectFavoritesLoading } =
@@ -506,92 +463,25 @@ const OrganizationPage = () => {
   const { mutateAsync: updateUserProjectFavorites } = useUpdateUserProjectFavorites();
 
   const isProjectViewLoading = isWorkspaceLoading || isProjectFavoritesLoading;
-  const addUsersToProject = useAddUserToWsNonE2EE();
 
-  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
     "addNewWs",
     "upgradePlan"
   ] as const);
-  const {
-    control,
-    formState: { isSubmitting },
-    reset,
-    handleSubmit
-  } = useForm<TAddProjectFormData>({
-    resolver: yupResolver(formSchema),
-    defaultValues: {
-      kmsKeyId: INTERNAL_KMS_KEY_ID
-    }
-  });
 
   const [hasUserClickedSlack, setHasUserClickedSlack] = useState(false);
   const [hasUserClickedIntro, setHasUserClickedIntro] = useState(false);
   const [hasUserPushedSecrets, setHasUserPushedSecrets] = useState(false);
   const [usersInOrg, setUsersInOrg] = useState(false);
   const [searchFilter, setSearchFilter] = useState("");
-  const createWs = useCreateWorkspace();
   const { user } = useUser();
   const { data: serverDetails } = useFetchServerStatus();
   const [projectsViewMode, setProjectsViewMode] = useState<ProjectsViewMode>(
     (localStorage.getItem("projectsViewMode") as ProjectsViewMode) || ProjectsViewMode.GRID
   );
 
-  const { data: externalKmsList } = useGetExternalKmsList(currentOrg?.id!, {
-    enabled: permission.can(OrgPermissionActions.Read, OrgPermissionSubjects.Kms)
-  });
-
-  const onCreateProject = async ({ name, addMembers, kmsKeyId, template }: TAddProjectFormData) => {
-    // type check
-    if (!currentOrg) return;
-    if (!user) return;
-    try {
-      const {
-        data: {
-          project: { id: newProjectId }
-        }
-      } = await createWs.mutateAsync({
-        projectName: name,
-        kmsKeyId: kmsKeyId !== INTERNAL_KMS_KEY_ID ? kmsKeyId : undefined,
-        template
-      });
-
-      if (addMembers) {
-        const orgUsers = await fetchOrgUsers(currentOrg.id);
-
-        await addUsersToProject.mutateAsync({
-          usernames: orgUsers
-            .filter(
-              (member) => member.user.username !== user.username && member.status === "accepted"
-            )
-            .map((member) => member.user.username),
-          projectId: newProjectId,
-          orgId: currentOrg.id
-        });
-      }
-
-      // eslint-disable-next-line no-promise-executor-return -- We do this because the function returns too fast, which sometimes causes an error when the user is redirected.
-      await new Promise((resolve) => setTimeout(resolve, 2_000));
-
-      handlePopUpClose("addNewWs");
-      createNotification({ text: "Project created", type: "success" });
-      router.push(`/project/${newProjectId}/secrets/overview`);
-    } catch (err) {
-      console.error(err);
-      createNotification({ text: "Failed to create project", type: "error" });
-    }
-  };
-
   const { subscription } = useSubscription();
 
-  const canReadProjectTemplates = permission.can(
-    OrgPermissionActions.Read,
-    OrgPermissionSubjects.ProjectTemplates
-  );
-
-  const { data: projectTemplates = [] } = useListProjectTemplates({
-    enabled: Boolean(canReadProjectTemplates && subscription?.projectTemplates)
-  });
-
   const isAddingProjectsAllowed = subscription?.workspaceLimit
     ? subscription.workspacesUsed < subscription.workspaceLimit
     : true;
@@ -669,7 +559,7 @@ const OrganizationPage = () => {
         localStorage.setItem("projectData.id", workspace.id);
       }}
       key={workspace.id}
-      className="min-w-72 flex h-40 cursor-pointer flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
+      className="min-w-72 flex h-40 cursor-pointer flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
     >
       <div className="flex flex-row justify-between">
         <div className="mt-0 truncate text-lg text-mineshaft-100">{workspace.name}</div>
@@ -693,18 +583,33 @@ const OrganizationPage = () => {
           />
         )}
       </div>
-      <div className="mt-0 pb-6 text-sm text-mineshaft-300">
-        {workspace.environments?.length || 0} environments
+
+      <div
+        className="mt-1 mb-2.5 grow text-sm text-mineshaft-300"
+        style={{
+          overflow: "hidden",
+          display: "-webkit-box",
+          WebkitBoxOrient: "vertical",
+          WebkitLineClamp: 2
+        }}
+      >
+        {workspace.description}
       </div>
-      <button type="button">
-        <div className="group ml-auto w-max cursor-pointer rounded-full border border-mineshaft-600 bg-mineshaft-900 py-2 px-4 text-sm text-mineshaft-300 transition-all hover:border-primary-500/80 hover:bg-primary-800/20 hover:text-mineshaft-200">
-          Explore{" "}
-          <FontAwesomeIcon
-            icon={faArrowRight}
-            className="pl-1.5 pr-0.5 duration-200 hover:pl-2 hover:pr-0"
-          />
+
+      <div className="flex w-full flex-row items-end justify-between place-self-end">
+        <div className="mt-0 text-xs text-mineshaft-400">
+          {workspace.environments?.length || 0} environments
         </div>
-      </button>
+        <button type="button">
+          <div className="group ml-auto w-max cursor-pointer rounded-full border border-mineshaft-600 bg-mineshaft-900 py-2 px-4 text-sm text-mineshaft-300 transition-all hover:border-primary-500/80 hover:bg-primary-800/20 hover:text-mineshaft-200">
+            Explore{" "}
+            <FontAwesomeIcon
+              icon={faArrowRight}
+              className="pl-1.5 pr-0.5 duration-200 hover:pl-2 hover:pr-0"
+            />
+          </div>
+        </button>
+      </div>
     </div>
   );
 
@@ -1038,170 +943,10 @@ const OrganizationPage = () => {
           )}
         </div>
       )}
-      <Modal
+      <NewProjectModal
         isOpen={popUp.addNewWs.isOpen}
-        onOpenChange={(isModalOpen) => {
-          handlePopUpToggle("addNewWs", isModalOpen);
-          reset();
-        }}
-      >
-        <ModalContent
-          title="Create a new project"
-          subTitle="This project will contain your secrets and configurations."
-        >
-          <form onSubmit={handleSubmit(onCreateProject)}>
-            <div className="flex gap-2">
-              <Controller
-                control={control}
-                name="name"
-                defaultValue=""
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    label="Project Name"
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                    className="flex-1"
-                  >
-                    <Input {...field} placeholder="Type your project name" />
-                  </FormControl>
-                )}
-              />
-              <Controller
-                control={control}
-                name="template"
-                render={({ field: { value, onChange } }) => (
-                  <OrgPermissionCan
-                    I={OrgPermissionActions.Read}
-                    a={OrgPermissionSubjects.ProjectTemplates}
-                  >
-                    {(isAllowed) => (
-                      <FormControl
-                        label="Project Template"
-                        icon={<FontAwesomeIcon icon={faInfoCircle} size="sm" />}
-                        tooltipText={
-                          <>
-                            <p>
-                              Create this project from a template to provision it with custom
-                              environments and roles.
-                            </p>
-                            {subscription && !subscription.projectTemplates && (
-                              <p className="pt-2">Project templates are a paid feature.</p>
-                            )}
-                          </>
-                        }
-                      >
-                        <Select
-                          defaultValue={InfisicalProjectTemplate.Default}
-                          placeholder={InfisicalProjectTemplate.Default}
-                          isDisabled={!isAllowed || !subscription?.projectTemplates}
-                          value={value}
-                          onValueChange={onChange}
-                          className="w-44"
-                        >
-                          {projectTemplates.length
-                            ? projectTemplates.map((template) => (
-                                <SelectItem key={template.id} value={template.name}>
-                                  {template.name}
-                                </SelectItem>
-                              ))
-                            : Object.values(InfisicalProjectTemplate).map((template) => (
-                                <SelectItem key={template} value={template}>
-                                  {template}
-                                </SelectItem>
-                              ))}
-                        </Select>
-                      </FormControl>
-                    )}
-                  </OrgPermissionCan>
-                )}
-              />
-            </div>
-            <div className="mt-4 pl-1">
-              <Controller
-                control={control}
-                name="addMembers"
-                defaultValue={false}
-                render={({ field: { onBlur, value, onChange } }) => (
-                  <OrgPermissionCan I={OrgPermissionActions.Read} a={OrgPermissionSubjects.Member}>
-                    {(isAllowed) => (
-                      <div>
-                        <Checkbox
-                          id="add-project-layout"
-                          isChecked={value}
-                          onCheckedChange={onChange}
-                          isDisabled={!isAllowed}
-                          onBlur={onBlur}
-                        >
-                          Add all members of my organization to this project
-                        </Checkbox>
-                      </div>
-                    )}
-                  </OrgPermissionCan>
-                )}
-              />
-            </div>
-            <div className="mt-14 flex">
-              <Accordion type="single" collapsible className="w-full">
-                <AccordionItem value="advance-settings" className="data-[state=open]:border-none">
-                  <AccordionTrigger className="h-fit flex-none pl-1 text-sm">
-                    <div className="order-1 ml-3">Advanced Settings</div>
-                  </AccordionTrigger>
-                  <AccordionContent>
-                    <Controller
-                      render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                        <FormControl
-                          errorText={error?.message}
-                          isError={Boolean(error)}
-                          label="KMS"
-                        >
-                          <Select
-                            {...field}
-                            onValueChange={(e) => {
-                              onChange(e);
-                            }}
-                            className="mb-12 w-full bg-mineshaft-600"
-                          >
-                            <SelectItem value={INTERNAL_KMS_KEY_ID} key="kms-internal">
-                              Default Infisical KMS
-                            </SelectItem>
-                            {externalKmsList?.map((kms) => (
-                              <SelectItem value={kms.id} key={`kms-${kms.id}`}>
-                                {kms.name}
-                              </SelectItem>
-                            ))}
-                          </Select>
-                        </FormControl>
-                      )}
-                      control={control}
-                      name="kmsKeyId"
-                    />
-                  </AccordionContent>
-                </AccordionItem>
-              </Accordion>
-              <div className="absolute right-0 bottom-0 mr-6 mb-6 flex items-start justify-end">
-                <Button
-                  key="layout-cancel-create-project"
-                  onClick={() => handlePopUpClose("addNewWs")}
-                  colorSchema="secondary"
-                  variant="plain"
-                  className="py-2"
-                >
-                  Cancel
-                </Button>
-                <Button
-                  isDisabled={isSubmitting}
-                  isLoading={isSubmitting}
-                  key="layout-create-project-submit"
-                  className="ml-4"
-                  type="submit"
-                >
-                  Create Project
-                </Button>
-              </div>
-            </div>
-          </form>
-        </ModalContent>
-      </Modal>
+        onOpenChange={(isOpen) => handlePopUpToggle("addNewWs", isOpen)}
+      />
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}

frontend/src/reactQuery.tsx

@@ -32,7 +32,12 @@ export const queryClient = new QueryClient({
             {
               title: "Validation Error",
               type: "error",
-              text: "Please check the input and try again.",
+              text: (
+                <div>
+                  <p>Please check the input and try again.</p>
+                  <p className="mt-2 text-xs">Request ID: {serverResponse.requestId}</p>
+                </div>
+              ),
               children: (
                 <Modal>
                   <ModalTrigger>
@@ -72,7 +77,8 @@ export const queryClient = new QueryClient({
             {
               title: "Forbidden Access",
               type: "error",
-              text: serverResponse.message,
+
+              text: `${serverResponse.message} [requestId=${serverResponse.requestId}]`,
               children: serverResponse?.details?.length ? (
                 <Modal>
                   <ModalTrigger>
@@ -165,7 +171,11 @@ export const queryClient = new QueryClient({
           );
           return;
         }
-        createNotification({ title: "Bad Request", type: "error", text: serverResponse.message });
+        createNotification({
+          title: "Bad Request",
+          type: "error",
+          text: `${serverResponse.message} [requestId=${serverResponse.requestId}]`
+        });
       }
     }
   }),

frontend/src/views/IntegrationsPage/IntegrationDetailsPage/components/IntegrationSettingsSection.tsx

@@ -28,7 +28,9 @@ const metadataMappings: Record<keyof NonNullable<TIntegrationWithEnv["metadata"]
   shouldMaskSecrets: "GitLab Secrets Masking Enabled",
   shouldProtectSecrets: "GitLab Secret Protection Enabled",
   shouldEnableDelete: "GitHub Secret Deletion Enabled",
-  octopusDeployScopeValues: "Octopus Deploy Scope Values"
+  octopusDeployScopeValues: "Octopus Deploy Scope Values",
+  awsIamRole: "AWS IAM Role",
+  region: "Region"
 } as const;
 
 export const IntegrationSettingsSection = ({ integration }: Props) => {

frontend/src/views/Org/IdentityPage/components/IdentityClientSecretModal.tsx

@@ -63,32 +63,21 @@ export const IdentityClientSecretModal = ({ popUp, handlePopUpToggle }: Props) =
   };
 
   const onFormSubmit = async ({ description, ttl, numUsesLimit }: FormData) => {
-    try {
-      const { clientSecret } = await createClientSecret({
-        identityId: popUpData.identityId,
-        description,
-        ttl: Number(ttl),
-        numUsesLimit: Number(numUsesLimit)
-      });
+    const { clientSecret } = await createClientSecret({
+      identityId: popUpData.identityId,
+      description,
+      ttl: Number(ttl),
+      numUsesLimit: Number(numUsesLimit)
+    });
 
-      setToken(clientSecret);
+    setToken(clientSecret);
 
-      createNotification({
-        text: "Successfully created client secret",
-        type: "success"
-      });
+    createNotification({
+      text: "Successfully created client secret",
+      type: "success"
+    });
 
-      reset();
-    } catch (err) {
-      console.error(err);
-      const error = err as any;
-      const text = error?.response?.data?.message ?? "Failed to create client secret";
-
-      createNotification({
-        text,
-        type: "error"
-      });
-    }
+    reset();
   };
 
   return (

frontend/src/views/Project/IdentityDetailsPage/components/IdentityRoleDetailsSection/IdentityRoleDetailsSection.tsx

@@ -50,11 +50,34 @@ export const IdentityRoleDetailsSection = ({
   const handleRoleDelete = async () => {
     const { id } = popUp?.deleteRole?.data as TProjectRole;
     try {
-      const updatedRole = identityMembershipDetails?.roles?.filter((el) => el.id !== id);
+      const updatedRoles = identityMembershipDetails?.roles?.filter((el) => el.id !== id);
       await updateIdentityWorkspaceRole({
         workspaceId: currentWorkspace?.id || "",
         identityId: identityMembershipDetails.identity.id,
-        roles: updatedRole
+        roles: updatedRoles.map(
+          ({
+            role,
+            customRoleSlug,
+            isTemporary,
+            temporaryMode,
+            temporaryRange,
+            temporaryAccessStartTime,
+            temporaryAccessEndTime
+          }) => ({
+            role: role === "custom" ? customRoleSlug : role,
+            ...(isTemporary
+              ? {
+                  isTemporary,
+                  temporaryMode,
+                  temporaryRange,
+                  temporaryAccessStartTime,
+                  temporaryAccessEndTime
+                }
+              : {
+                  isTemporary
+                })
+          })
+        )
       });
       createNotification({ type: "success", text: "Successfully removed role" });
       handlePopUpClose("deleteRole");

frontend/src/views/Project/MemberDetailsPage/components/MemberRoleDetailsSection/MemberRoleDetailsSection.tsx

@@ -61,10 +61,33 @@ export const MemberRoleDetailsSection = ({
   const handleRoleDelete = async () => {
     const { id } = popUp?.deleteRole?.data as TProjectRole;
     try {
-      const updatedRole = membershipDetails?.roles?.filter((el) => el.id !== id);
+      const updatedRoles = membershipDetails?.roles?.filter((el) => el.id !== id);
       await updateUserWorkspaceRole({
         workspaceId: currentWorkspace?.id || "",
-        roles: updatedRole,
+        roles: updatedRoles.map(
+          ({
+            role,
+            customRoleSlug,
+            isTemporary,
+            temporaryMode,
+            temporaryRange,
+            temporaryAccessStartTime,
+            temporaryAccessEndTime
+          }) => ({
+            role: role === "custom" ? customRoleSlug : role,
+            ...(isTemporary
+              ? {
+                  isTemporary,
+                  temporaryMode,
+                  temporaryRange,
+                  temporaryAccessStartTime,
+                  temporaryAccessEndTime
+                }
+              : {
+                  isTemporary
+                })
+          })
+        ),
         membershipId: membershipDetails.id
       });
       createNotification({ type: "success", text: "Successfully removed role" });
@@ -215,7 +238,10 @@ export const MemberRoleDetailsSection = ({
           title="Roles"
           subTitle="Select one or more of the pre-defined or custom roles to configure project permissions."
         >
-          <MemberRoleModify projectMember={membershipDetails}  onOpenUpgradeModal={onOpenUpgradeModal} />
+          <MemberRoleModify
+            projectMember={membershipDetails}
+            onOpenUpgradeModal={onOpenUpgradeModal}
+          />
         </ModalContent>
       </Modal>
     </div>

frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx

@@ -29,6 +29,7 @@ import { MongoAtlasInputForm } from "./MongoAtlasInputForm";
 import { MongoDBDatabaseInputForm } from "./MongoDBInputForm";
 import { RabbitMqInputForm } from "./RabbitMqInputForm";
 import { RedisInputForm } from "./RedisInputForm";
+import { SapAseInputForm } from "./SapAseInputForm";
 import { SapHanaInputForm } from "./SapHanaInputForm";
 import { SqlDatabaseInputForm } from "./SqlDatabaseInputForm";
 import { TotpInputForm } from "./TotpInputForm";
@@ -107,6 +108,11 @@ const DYNAMIC_SECRET_LIST = [
     provider: DynamicSecretProviders.SapHana,
     title: "SAP HANA"
   },
+  {
+    icon: <SiSap size="1.5rem" />,
+    provider: DynamicSecretProviders.SapAse,
+    title: "SAP ASE"
+  },
   {
     icon: <SiSnowflake size="1.5rem" />,
     provider: DynamicSecretProviders.Snowflake,
@@ -393,6 +399,25 @@ export const CreateDynamicSecretForm = ({
                 />
               </motion.div>
             )}
+
+          {wizardStep === WizardSteps.ProviderInputs &&
+            selectedProvider === DynamicSecretProviders.SapAse && (
+              <motion.div
+                key="dynamic-sap-ase-step"
+                transition={{ duration: 0.1 }}
+                initial={{ opacity: 0, translateX: 30 }}
+                animate={{ opacity: 1, translateX: 0 }}
+              >
+                <SapAseInputForm
+                  onCompleted={handleFormReset}
+                  onCancel={handleFormReset}
+                  projectSlug={projectSlug}
+                  secretPath={secretPath}
+                  environment={environment}
+                />
+              </motion.div>
+            )}
+
           {wizardStep === WizardSteps.ProviderInputs &&
             selectedProvider === DynamicSecretProviders.Snowflake && (
               <motion.div

frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/SapAseInputForm.tsx

@@ -0,0 +1,309 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FormControl,
+  Input,
+  TextArea
+} from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+  provider: z.object({
+    host: z.string().toLowerCase().min(1),
+    port: z.coerce.number(),
+    database: z.string().min(1),
+    username: z.string().min(1),
+    password: z.string().min(1),
+    creationStatement: z.string().min(1),
+    revocationStatement: z.string().min(1)
+  }),
+  defaultTTL: z.string().superRefine((val, ctx) => {
+    const valMs = ms(val);
+    if (valMs < 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+    // a day
+    if (valMs > 24 * 60 * 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+  }),
+  maxTTL: z
+    .string()
+    .optional()
+    .superRefine((val, ctx) => {
+      if (!val) return;
+      const valMs = ms(val);
+      if (valMs < 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+      // a day
+      if (valMs > 24 * 60 * 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+    }),
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onCompleted: () => void;
+  onCancel: () => void;
+  secretPath: string;
+  projectSlug: string;
+  environment: string;
+};
+
+export const SapAseInputForm = ({
+  onCompleted,
+  onCancel,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      provider: {
+        database: "master",
+        port: 5000,
+        creationStatement: `sp_addlogin '{{username}}', '{{password}}';
+sp_adduser '{{username}}', '{{username}}', null;
+sp_role 'grant', 'mon_role', '{{username}}';`,
+        revocationStatement: `sp_dropuser '{{username}}';
+sp_droplogin '{{username}}';`
+      }
+    }
+  });
+
+  const createDynamicSecret = useCreateDynamicSecret();
+
+  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+    // wait till previous request is finished
+    if (createDynamicSecret.isLoading) return;
+    try {
+      await createDynamicSecret.mutateAsync({
+        provider: { type: DynamicSecretProviders.SapAse, inputs: provider },
+        maxTTL,
+        name,
+        path: secretPath,
+        defaultTTL,
+        projectSlug,
+        environmentSlug: environment
+      });
+      onCompleted();
+    } catch (err) {
+      createNotification({
+        type: "error",
+        text: "Failed to create dynamic secret"
+      });
+    }
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
+        <div>
+          <div className="flex items-center space-x-2">
+            <div className="flex-grow">
+              <Controller
+                control={control}
+                defaultValue=""
+                name="name"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Secret Name"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} placeholder="dynamic-secret" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="defaultTTL"
+                defaultValue="1h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Default TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="maxTTL"
+                defaultValue="24h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Max TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+          </div>
+          <div>
+            <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+              Configuration
+            </div>
+            <div className="flex flex-col">
+              <div className="flex items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="provider.host"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Host"
+                      className="flex-grow"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input placeholder="92.41.22.72" {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.port"
+                  defaultValue={5000}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Port"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="number" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.database"
+                  defaultValue="master"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Database"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="text" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div className="flex w-full items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="provider.username"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      className="w-full"
+                      label="User"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} autoComplete="off" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.password"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      className="w-full"
+                      label="Password"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="password" autoComplete="new-password" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div>
+                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                  <AccordionItem value="advance-statements">
+                    <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
+                    <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="provider.creationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Creation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            helperText="username and password are dynamically provisioned. The sp_addlogin statement is automatically called against the master database. All other statements are called against the database you specify."
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                      <Controller
+                        control={control}
+                        name="provider.revocationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Revocation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            helperText="username is dynamically provisioned. The sp_droplogin statement is automatically called against the master database. All other statements are called against the database you specify."
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-4 flex items-center space-x-4">
+          <Button type="submit" isLoading={isSubmitting}>
+            Submit
+          </Button>
+          <Button variant="outline_bg" onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};

frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx

@@ -136,7 +136,8 @@ const renderOutputForm = (
     provider === DynamicSecretProviders.SqlDatabase ||
     provider === DynamicSecretProviders.Cassandra ||
     provider === DynamicSecretProviders.MongoAtlas ||
-    provider === DynamicSecretProviders.MongoDB
+    provider === DynamicSecretProviders.MongoDB ||
+    provider === DynamicSecretProviders.SapAse
   ) {
     const { DB_PASSWORD, DB_USERNAME } = data as { DB_USERNAME: string; DB_PASSWORD: string };
     return (

frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretForm.tsx

@@ -14,6 +14,7 @@ import { EditDynamicSecretMongoAtlasForm } from "./EditDynamicSecretMongoAtlasFo
 import { EditDynamicSecretMongoDBForm } from "./EditDynamicSecretMongoDBForm";
 import { EditDynamicSecretRabbitMqForm } from "./EditDynamicSecretRabbitMqForm";
 import { EditDynamicSecretRedisProviderForm } from "./EditDynamicSecretRedisProviderForm";
+import { EditDynamicSecretSapAseForm } from "./EditDynamicSecretSapAseForm";
 import { EditDynamicSecretSapHanaForm } from "./EditDynamicSecretSapHanaForm";
 import { EditDynamicSecretSnowflakeForm } from "./EditDynamicSecretSnowflakeForm";
 import { EditDynamicSecretSqlProviderForm } from "./EditDynamicSecretSqlProviderForm";
@@ -260,6 +261,23 @@ export const EditDynamicSecretForm = ({
           />
         </motion.div>
       )}
+      {dynamicSecretDetails?.type === DynamicSecretProviders.SapAse && (
+        <motion.div
+          key="sap-ase-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretSapAseForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
       {dynamicSecretDetails?.type === DynamicSecretProviders.Snowflake && (
         <motion.div
           key="snowflake-edit"

frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapAseForm.tsx

@@ -0,0 +1,331 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FormControl,
+  Input,
+  SecretInput,
+  TextArea
+} from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+  inputs: z
+    .object({
+      host: z.string().toLowerCase().min(1),
+      port: z.coerce.number(),
+      database: z.string().min(1),
+      username: z.string().min(1),
+      password: z.string().min(1),
+      creationStatement: z.string().min(1),
+      revocationStatement: z.string().min(1),
+      ca: z.string().optional()
+    })
+    .partial(),
+  defaultTTL: z.string().superRefine((val, ctx) => {
+    const valMs = ms(val);
+    if (valMs < 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+    // a day
+    if (valMs > 24 * 60 * 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+  }),
+  maxTTL: z
+    .string()
+    .optional()
+    .superRefine((val, ctx) => {
+      if (!val) return;
+      const valMs = ms(val);
+      if (valMs < 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+      // a day
+      if (valMs > 24 * 60 * 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+    }),
+  newName: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onClose: () => void;
+  dynamicSecret: TDynamicSecret & { inputs: unknown };
+  secretPath: string;
+  projectSlug: string;
+  environment: string;
+};
+
+export const EditDynamicSecretSapAseForm = ({
+  onClose,
+  dynamicSecret,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      defaultTTL: dynamicSecret.defaultTTL,
+      maxTTL: dynamicSecret.maxTTL,
+      newName: dynamicSecret.name,
+      inputs: {
+        ...(dynamicSecret.inputs as TForm["inputs"])
+      }
+    }
+  });
+
+  const updateDynamicSecret = useUpdateDynamicSecret();
+
+  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+    // wait till previous request is finished
+    if (updateDynamicSecret.isLoading) return;
+    try {
+      await updateDynamicSecret.mutateAsync({
+        name: dynamicSecret.name,
+        path: secretPath,
+        projectSlug,
+        environmentSlug: environment,
+        data: {
+          maxTTL: maxTTL || undefined,
+          defaultTTL,
+          inputs,
+          newName: newName === dynamicSecret.name ? undefined : newName
+        }
+      });
+      onClose();
+      createNotification({
+        type: "success",
+        text: "Successfully updated dynamic secret"
+      });
+    } catch (err) {
+      createNotification({
+        type: "error",
+        text: "Failed to update dynamic secret"
+      });
+    }
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
+        <div>
+          <div className="flex items-center space-x-2">
+            <div className="flex-grow">
+              <Controller
+                control={control}
+                defaultValue=""
+                name="newName"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Secret Name"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} placeholder="dynamic-secret" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="defaultTTL"
+                defaultValue="1h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Default TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="maxTTL"
+                defaultValue="24h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Max TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+          </div>
+          <div>
+            <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+              Configuration
+            </div>
+            <div className="flex flex-col">
+              <div className="flex items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="inputs.host"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Host"
+                      className="flex-grow"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="inputs.port"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Port"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="number" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="inputs.database"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Database"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="text" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div className="flex w-full items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="inputs.username"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      className="w-full"
+                      label="User"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} autoComplete="off" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="inputs.password"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      className="w-full"
+                      label="Password"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="password" autoComplete="new-password" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div>
+                <Controller
+                  control={control}
+                  name="inputs.ca"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isOptional
+                      label="CA(SSL)"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <SecretInput
+                        {...field}
+                        containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+                      />
+                    </FormControl>
+                  )}
+                />
+                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                  <AccordionItem value="advance-statements">
+                    <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
+                    <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="inputs.creationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Creation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            helperText="username and password are dynamically provisioned. The sp_addlogin statement is automatically called against the master database. All other statements are called against the database you specify."
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                      <Controller
+                        control={control}
+                        name="inputs.revocationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Revocation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            helperText="username is dynamically provisioned. The sp_droplogin statement is automatically called against the master database. All other statements are called against the database you specify."
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-4 flex items-center space-x-4">
+          <Button type="submit" isLoading={isSubmitting}>
+            Submit
+          </Button>
+          <Button variant="outline_bg" onClick={onClose}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -186,7 +186,7 @@ export const SecretOverviewPage = () => {
     useGetImportedSecretsAllEnvs({
       projectId: workspaceId,
       path: secretPath,
-      environments: userAvailableEnvs.map(({ slug }) => slug)
+      environments: (userAvailableEnvs || []).map(({ slug }) => slug)
     });
 
   const { isLoading: isOverviewLoading, data: overview } = useGetProjectSecretsOverview(
@@ -618,7 +618,7 @@ export const SecretOverviewPage = () => {
     }
   }, [router.query.search]);
 
-  if (isWorkspaceLoading || (isProjectV3 && isOverviewLoading)) {
+  if (isWorkspaceLoading || (isProjectV3 && visibleEnvs.length > 0 && isOverviewLoading)) {
     return (
       <div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]">
         <img

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx

@@ -7,7 +7,7 @@ import { BackfillSecretReferenceSecretion } from "../BackfillSecretReferenceSect
 import { DeleteProjectSection } from "../DeleteProjectSection";
 import { EnvironmentSection } from "../EnvironmentSection";
 import { PointInTimeVersionLimitSection } from "../PointInTimeVersionLimitSection";
-import { ProjectNameChangeSection } from "../ProjectNameChangeSection";
+import { ProjectOverviewChangeSection } from "../ProjectOverviewChangeSection";
 import { RebuildSecretIndicesSection } from "../RebuildSecretIndicesSection/RebuildSecretIndicesSection";
 import { SecretTagsSection } from "../SecretTagsSection";
 
@@ -16,7 +16,7 @@ export const ProjectGeneralTab = () => {
 
   return (
     <div>
-      <ProjectNameChangeSection />
+      <ProjectOverviewChangeSection />
       <EnvironmentSection />
       <SecretTagsSection />
       <AutoCapitalizationSection />

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx

@@ -1,119 +0,0 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
-
-import { createNotification } from "@app/components/notifications";
-import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, FormControl, Input } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { useRenameWorkspace } from "@app/hooks/api";
-
-import { CopyButton } from "./CopyButton";
-
-const formSchema = yup.object({
-  name: yup
-    .string()
-    .required()
-    .label("Project Name")
-    .max(64, "Too long, maximum length is 64 characters")
-});
-
-type FormData = yup.InferType<typeof formSchema>;
-
-export const ProjectNameChangeSection = () => {
-  const { currentWorkspace } = useWorkspace();
-  const { mutateAsync, isLoading } = useRenameWorkspace();
-
-  const { handleSubmit, control, reset } = useForm<FormData>({ resolver: yupResolver(formSchema) });
-
-  useEffect(() => {
-    if (currentWorkspace) {
-      reset({
-        name: currentWorkspace.name
-      });
-    }
-  }, [currentWorkspace]);
-
-  const onFormSubmit = async ({ name }: FormData) => {
-    try {
-      if (!currentWorkspace?.id) return;
-
-      await mutateAsync({
-        workspaceID: currentWorkspace.id,
-        newWorkspaceName: name
-      });
-
-      createNotification({
-        text: "Successfully renamed workspace",
-        type: "success"
-      });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to rename workspace",
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <form
-      onSubmit={handleSubmit(onFormSubmit)}
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
-    >
-      <div className="justify-betweens flex">
-        <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Name</h2>
-        <div className="space-x-2">
-          <CopyButton
-            value={currentWorkspace?.slug || ""}
-            hoverText="Click to project slug"
-            notificationText="Copied project slug to clipboard"
-          >
-            Copy Project Slug
-          </CopyButton>
-          <CopyButton
-            value={currentWorkspace?.id || ""}
-            hoverText="Click to project ID"
-            notificationText="Copied project ID to clipboard"
-          >
-            Copy Project ID
-          </CopyButton>
-        </div>
-      </div>
-      <div className="max-w-md">
-        <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Project}>
-          {(isAllowed) => (
-            <Controller
-              defaultValue=""
-              render={({ field, fieldState: { error } }) => (
-                <FormControl isError={Boolean(error)} errorText={error?.message}>
-                  <Input
-                    placeholder="Project name"
-                    {...field}
-                    className="bg-mineshaft-800"
-                    isDisabled={!isAllowed}
-                  />
-                </FormControl>
-              )}
-              control={control}
-              name="name"
-            />
-          )}
-        </ProjectPermissionCan>
-      </div>
-      <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Project}>
-        {(isAllowed) => (
-          <Button
-            colorSchema="secondary"
-            type="submit"
-            isLoading={isLoading}
-            isDisabled={isLoading || !isAllowed}
-          >
-            Save
-          </Button>
-        )}
-      </ProjectPermissionCan>
-    </form>
-  );
-};

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/index.tsx

@@ -1 +0,0 @@
-export { ProjectNameChangeSection } from "./ProjectNameChangeSection";

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectOverviewChangeSection/ProjectOverviewChangeSection.tsx

@@ -0,0 +1,168 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, Input, TextArea } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useUpdateProject } from "@app/hooks/api";
+
+import { CopyButton } from "./CopyButton";
+
+const formSchema = z.object({
+  name: z.string().min(1, "Required").max(64, "Too long, maximum length is 64 characters"),
+  description: z
+    .string()
+    .trim()
+    .max(256, "Description too long, max length is 256 characters")
+    .optional()
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+export const ProjectOverviewChangeSection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync, isLoading } = useUpdateProject();
+
+  const { handleSubmit, control, reset } = useForm<FormData>({ resolver: zodResolver(formSchema) });
+
+  useEffect(() => {
+    if (currentWorkspace) {
+      reset({
+        name: currentWorkspace.name,
+        description: currentWorkspace.description ?? ""
+      });
+    }
+  }, [currentWorkspace]);
+
+  const onFormSubmit = async ({ name, description }: FormData) => {
+    try {
+      if (!currentWorkspace?.id) return;
+
+      await mutateAsync({
+        projectID: currentWorkspace.id,
+        newProjectName: name,
+        newProjectDescription: description
+      });
+
+      createNotification({
+        text: "Successfully updated project overview",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to update project overview",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="justify-betweens flex">
+        <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Overview</h2>
+        <div className="space-x-2">
+          <CopyButton
+            value={currentWorkspace?.slug || ""}
+            hoverText="Click to project slug"
+            notificationText="Copied project slug to clipboard"
+          >
+            Copy Project Slug
+          </CopyButton>
+          <CopyButton
+            value={currentWorkspace?.id || ""}
+            hoverText="Click to project ID"
+            notificationText="Copied project ID to clipboard"
+          >
+            Copy Project ID
+          </CopyButton>
+        </div>
+      </div>
+      <div>
+        <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full flex-col gap-0">
+          <div className="flex w-full flex-row items-end gap-4">
+            <div className="w-full max-w-md">
+              <ProjectPermissionCan
+                I={ProjectPermissionActions.Edit}
+                a={ProjectPermissionSub.Project}
+              >
+                {(isAllowed) => (
+                  <Controller
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                        label="Project name"
+                      >
+                        <Input
+                          placeholder="Project name"
+                          {...field}
+                          className=" bg-mineshaft-800"
+                          isDisabled={!isAllowed}
+                        />
+                      </FormControl>
+                    )}
+                    control={control}
+                    name="name"
+                  />
+                )}
+              </ProjectPermissionCan>
+            </div>
+          </div>
+          <div className="flex w-full flex-row items-end gap-4">
+            <div className="w-full max-w-md">
+              <ProjectPermissionCan
+                I={ProjectPermissionActions.Edit}
+                a={ProjectPermissionSub.Project}
+              >
+                {(isAllowed) => (
+                  <Controller
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                        label="Project description"
+                      >
+                        <TextArea
+                          placeholder="Project description"
+                          {...field}
+                          rows={3}
+                          className="thin-scrollbar max-w-md !resize-none bg-mineshaft-800"
+                          isDisabled={!isAllowed}
+                        />
+                      </FormControl>
+                    )}
+                    control={control}
+                    name="description"
+                  />
+                )}
+              </ProjectPermissionCan>
+            </div>
+          </div>
+          <div>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Edit}
+              a={ProjectPermissionSub.Project}
+            >
+              {(isAllowed) => (
+                <Button
+                  colorSchema="secondary"
+                  type="submit"
+                  isLoading={isLoading}
+                  isDisabled={isLoading || !isAllowed}
+                >
+                  Save
+                </Button>
+              )}
+            </ProjectPermissionCan>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectOverviewChangeSection/index.tsx

@@ -0,0 +1 @@
+export { ProjectOverviewChangeSection } from "./ProjectOverviewChangeSection";

frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx

@@ -2,5 +2,5 @@ export { AutoCapitalizationSection } from "./AutoCapitalizationSection";
 export { BackfillSecretReferenceSecretion } from "./BackfillSecretReferenceSection";
 export { DeleteProjectSection } from "./DeleteProjectSection";
 export { EnvironmentSection } from "./EnvironmentSection";
-export { ProjectNameChangeSection } from "./ProjectNameChangeSection";
+export { ProjectOverviewChangeSection } from "./ProjectOverviewChangeSection";
 export { SecretTagsSection } from "./SecretTagsSection";