Merge branch 'main' into gitlab-sso

frontend/src/components/AddTagPopoverContent/AddTagPopoverContent.tsx

@@ -1,78 +1,92 @@
-
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Checkbox, PopoverContent } from "@app/components/v2";
+import { Button, Checkbox, PopoverContent } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 
 import { WsTag } from "../../hooks/api/tags/types";
+import { ProjectPermissionCan } from "../permissions";
 
 interface Props {
-    wsTags: WsTag[] | undefined;
-    secKey: string;
-    selectedTagIds: Record<string, boolean>;
-    handleSelectTag: (wsTag: WsTag) => void;
-    handleTagOnMouseEnter: (wsTag: WsTag) => void;
-    handleTagOnMouseLeave: () => void;
-    checkIfTagIsVisible: (wsTag: WsTag) => boolean;
-    handleOnCreateTagOpen: () => void
+  wsTags: WsTag[] | undefined;
+  secKey: string;
+  selectedTagIds: Record<string, boolean>;
+  handleSelectTag: (wsTag: WsTag) => void;
+  handleTagOnMouseEnter: (wsTag: WsTag) => void;
+  handleTagOnMouseLeave: () => void;
+  checkIfTagIsVisible: (wsTag: WsTag) => boolean;
+  handleOnCreateTagOpen: () => void;
 }
 
 const AddTagPopoverContent = ({
-    wsTags,
-    secKey,
-    selectedTagIds,
-    handleSelectTag,
-    handleTagOnMouseEnter,
-    handleTagOnMouseLeave,
-    checkIfTagIsVisible,
-    handleOnCreateTagOpen
+  wsTags,
+  secKey,
+  selectedTagIds,
+  handleSelectTag,
+  handleTagOnMouseEnter,
+  handleTagOnMouseLeave,
+  checkIfTagIsVisible,
+  handleOnCreateTagOpen
 }: Props) => {
-    return (
-        <PopoverContent
-            side="left"
-            className="relative max-h-96 w-auto min-w-[200px] p-2 overflow-y-auto overflow-x-hidden border border-mineshaft-600 bg-mineshaft-800 text-bunker-200"
-            hideCloseBtn
-        >
-            <div className=" text-center text-sm font-medium text-bunker-200">
-                Add tags to {secKey || "this secret"}
+  return (
+    <PopoverContent
+      side="left"
+      className="relative max-h-96 w-auto min-w-[200px] p-2 overflow-y-auto overflow-x-hidden border border-mineshaft-600 bg-mineshaft-800 text-bunker-200"
+      hideCloseBtn
+    >
+      <div className=" text-center text-sm font-medium text-bunker-200">
+        Add tags to {secKey || "this secret"}
+      </div>
+      <div className="absolute left-0 w-full border-mineshaft-600 border-t mt-2" />
+      <div className="flex flex-col space-y-1.5">
+        {wsTags?.map((wsTag: WsTag) => (
+          <div
+            key={`tag-${wsTag._id}`}
+            className="mt-4 h-[32px] relative flex items-center  justify-start hover:border-mineshaft-600 hover:border   hover:bg-mineshaft-700  p-2 rounded-md  hover:text-bunker-200 bg-none"
+            onClick={() => handleSelectTag(wsTag)}
+            onMouseEnter={() => handleTagOnMouseEnter(wsTag)}
+            onMouseLeave={() => handleTagOnMouseLeave()}
+            tabIndex={0}
+            role="button"
+            onKeyDown={() => {}}
+          >
+            {(checkIfTagIsVisible(wsTag) || selectedTagIds?.[wsTag.slug]) && (
+              <Checkbox
+                id="autoCapitalization"
+                isChecked={selectedTagIds?.[wsTag.slug]}
+                className="absolute top-[50%] translate-y-[-50%] left-[10px] "
+                checkIndicatorBg={`${
+                  !selectedTagIds?.[wsTag.slug] ? "text-transparent" : "text-mineshaft-800"
+                }`}
+              />
+            )}
+            <div className="ml-7 flex items-center gap-3">
+              <div
+                className="w-[10px] h-[10px] rounded-full"
+                style={{ background: wsTag?.tagColor ? wsTag.tagColor : "#bec2c8" }}
+              >
+                {" "}
+              </div>
+              <span>{wsTag.slug}</span>
             </div>
-            <div className="absolute left-0 w-full border-mineshaft-600 border-t mt-2" />
-            <div className="flex flex-col space-y-1.5">
-                {wsTags?.map((wsTag: WsTag) => (
-                    <div key={`tag-${wsTag._id}`} className="mt-4 h-[32px] relative flex items-center  justify-start hover:border-mineshaft-600 hover:border   hover:bg-mineshaft-700  p-2 rounded-md  hover:text-bunker-200 bg-none"
-                        onClick={() => handleSelectTag(wsTag)}
-                        onMouseEnter={() => handleTagOnMouseEnter(wsTag)}
-                        onMouseLeave={() => handleTagOnMouseLeave()}
-                        tabIndex={0} role="button"
-                        onKeyDown={() => { }}>
-                        {
+          </div>
+        ))}
+        <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Tags}>
+          {(isAllowed) => (
+            <Button
+              onClick={() => handleOnCreateTagOpen()}
+              isDisabled={!isAllowed}
+              size="xs"
+              className="mt-2"
+              leftIcon={<FontAwesomeIcon icon={faPlus} className="ml-1 mr-2" />}
+            >
+              Add new tag
+            </Button>
+          )}
+        </ProjectPermissionCan>
+      </div>
+    </PopoverContent>
+  );
+};
 
-                            (checkIfTagIsVisible(wsTag) || selectedTagIds?.[wsTag.slug]) && <Checkbox
-                                id="autoCapitalization"
-                                isChecked={selectedTagIds?.[wsTag.slug]}
-                                className="absolute top-[50%] translate-y-[-50%] left-[10px] "
-                                checkIndicatorBg={`${!selectedTagIds?.[wsTag.slug] ? "text-transparent" : "text-mineshaft-800"}`}
-                            />
-                        }
-                        <div className="ml-7 flex items-center gap-3">
-                            <div className="w-[10px] h-[10px] rounded-full" style={{ background: wsTag?.tagColor ? wsTag.tagColor : "#bec2c8" }}> </div>
-                            <span >
-                                {wsTag.slug}
-                            </span>
-                        </div>
-                    </div>
-                ))}
-                <div
-                    className="h-[32px] relative flex items-center cursor-pointer   justify-start  border-mineshaft-600 border   bg-mineshaft-700 p-2 rounded-md  hover:text-bunker-200 bg-none"
-                    onClick={() => handleOnCreateTagOpen()}
-                    tabIndex={0} role="button"
-                    onKeyDown={() => { }}>
-                    <FontAwesomeIcon icon={faPlus} className="ml-1 mr-2" />
-                    <span> Add new tag</span>
-                </div>
-            </div>
-        </PopoverContent>
-    )
-}
-
-export default AddTagPopoverContent
+export default AddTagPopoverContent;

frontend/src/components/basic/popups/GlobPatternExamples.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { faInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Tooltip } from "@app/components/v2/Tooltip";
+
+const GlobPatternExamples = () => {
+  const [showTip, setShowTip] = useState<boolean>(false);
+
+  return (
+    <Tooltip
+      isOpen={showTip}
+      onOpenChange={setShowTip}
+      content={
+        <div>
+          <h4 className="mb-2">Here are some examples of glob patterns:</h4>
+          <div className="ol-listStyleType">
+            <li>
+              <code className="text-primary">/</code> - Matches all files and directories in the
+              current directory
+            </li>
+            <li>
+              <code className="text-primary">**/*</code> - Matches all files and directories in the
+              current directory and its subdirectories
+            </li>
+            <li>
+              <code className="text-primary">{"/{dir1,dir2}"}</code> - Matches all files and
+              directories in dir1 and dir2
+            </li>
+          </div>
+        </div>
+      }
+      position="right"
+      className="text-xs"
+    >
+      <div
+        className="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[1px] border-mineshaft-300"
+        onMouseEnter={() => setShowTip(true)}
+      >
+        <FontAwesomeIcon icon={faInfo} className="h-2 w-2" />
+      </div>
+    </Tooltip>
+  );
+};
+
+export default GlobPatternExamples;

frontend/src/components/permissions/OrgPermissionCan.tsx

@@ -0,0 +1,49 @@
+import { FunctionComponent, ReactNode } from "react";
+import { BoundCanProps, Can } from "@casl/react";
+
+import { TOrgPermission, useOrgPermission } from "@app/context/OrgPermissionContext";
+
+import { Tooltip } from "../v2";
+
+type Props = {
+  label?: ReactNode;
+  // this prop is used when there exist already a tooltip as helper text for users
+  // so when permission is allowed same tooltip will be reused  to show helpertext
+  renderTooltip?: boolean;
+  allowedLabel?: string;
+} & BoundCanProps<TOrgPermission>;
+
+export const OrgPermissionCan: FunctionComponent<Props> = ({
+  label = "Access restricted",
+  children,
+  passThrough = true,
+  renderTooltip,
+  allowedLabel,
+  ...props
+}) => {
+  const permission = useOrgPermission();
+
+  return (
+    <Can {...props} passThrough={passThrough} ability={props?.ability || permission}>
+      {(isAllowed, ability) => {
+        // akhilmhdh: This is set as type due to error in casl react type.
+        const finalChild =
+          typeof children === "function"
+            ? children(isAllowed, ability as TOrgPermission)
+            : children;
+
+        if (!isAllowed && passThrough) {
+          return <Tooltip content={label}>{finalChild}</Tooltip>;
+        }
+
+        if (isAllowed && renderTooltip) {
+          return <Tooltip content={allowedLabel}>{finalChild}</Tooltip>;
+        }
+
+        if (!isAllowed) return null;
+
+        return finalChild;
+      }}
+    </Can>
+  );
+};

frontend/src/components/permissions/PermissionDeniedBanner.tsx

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+import { faLock } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+  containerClassName?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const PermissionDeniedBanner = ({ containerClassName, className, children }: Props) => {
+  return (
+    <div
+      className={twMerge(
+        "container h-full mx-auto flex justify-center items-center",
+        containerClassName
+      )}
+    >
+      <div
+        className={twMerge(
+          "rounded-md bg-mineshaft-800 text-bunker-300 p-16 flex space-x-12 items-end",
+          className
+        )}
+      >
+        <div>
+          <FontAwesomeIcon icon={faLock} size="6x" />
+        </div>
+        <div>
+          <div className="text-4xl font-medium mb-2">Access Restricted</div>
+          {children || (
+            <div className="text-sm">
+              Your role has limited permissions, please <br/> contact your administrator to gain access
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/permissions/ProjectPermissionCan.tsx

@@ -0,0 +1,52 @@
+import { FunctionComponent, ReactNode } from "react";
+import { BoundCanProps, Can } from "@casl/react";
+
+import { TProjectPermission, useProjectPermission } from "@app/context/ProjectPermissionContext";
+
+import { Tooltip } from "../v2";
+
+type Props = {
+  label?: ReactNode;
+  // this prop is used when there exist already a tooltip as helper text for users
+  // so when permission is allowed same tooltip will be reused  to show helpertext
+  renderTooltip?: boolean;
+  allowedLabel?: string;
+  // BUG(akhilmhdh): As a workaround for now i put any but this should be TProjectPermission
+  // For some reason when i put TProjectPermission in a wrapper component it just wont work causes a weird  ts error
+  // tried a lot combinations
+  // REF: https://github.com/stalniy/casl/blob/ac081a34f56366a7eaaed05d21689d27041ef005/packages/casl-react/src/factory.ts#L15
+} & BoundCanProps<any>;
+
+export const ProjectPermissionCan: FunctionComponent<Props> = ({
+  label = "Access restricted",
+  children,
+  passThrough = true,
+  renderTooltip,
+  allowedLabel,
+  ...props
+}) => {
+  const permission = useProjectPermission();
+  return (
+    <Can {...props} passThrough={passThrough} ability={props?.ability || permission}>
+      {(isAllowed, ability) => {
+        // akhilmhdh: This is set as type due to error in casl react type.
+        const finalChild =
+          typeof children === "function"
+            ? children(isAllowed, ability as TProjectPermission)
+            : children;
+
+        if (!isAllowed && passThrough) {
+          return <Tooltip content={label}>{finalChild}</Tooltip>;
+        }
+
+        if (isAllowed && renderTooltip) {
+          return <Tooltip content={allowedLabel}>{finalChild}</Tooltip>;
+        }
+
+        if (!isAllowed) return null;
+
+        return finalChild;
+      }}
+    </Can>
+  );
+};

frontend/src/components/permissions/index.tsx

@@ -0,0 +1,3 @@
+export { OrgPermissionCan } from "./OrgPermissionCan";
+export { PermissionDeniedBanner } from "./PermissionDeniedBanner";
+export { ProjectPermissionCan } from "./ProjectPermissionCan";

frontend/src/components/utilities/parseDotEnv.ts

@@ -1,5 +1,5 @@
 const LINE =
-  /(?:^|^)\s*(?:export\s+)?([\w.-:]+)(?:\s*=\s*?|:\s+?)(\s*'(?:\\'|[^'])*'|\s*"(?:\\"|[^"])*"|\s*`(?:\\`|[^`])*`|[^#\r\n]+)?\s*(?:#.*)?(?:$|$)/gm;
+  /(?:^|^)\s*(?:export\s+)?([\w.:-]+)(?:\s*=\s*?|:\s+?)(\s*'(?:\\'|[^'])*'|\s*"(?:\\"|[^"])*"|\s*`(?:\\`|[^`])*`|[^#\r\n]+)?\s*(?:#.*)?(?:$|$)/gm;
 
 /**
  * Return text that is the buffer parsed

frontend/src/components/v2/Accordion/Accordion.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Components/Accordion",
+  component: Accordion,
+  tags: ["v2"],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <div className="flex justify-center w-full">
+      <Accordion {...args}>
+        <AccordionItem value="section-1">
+          <AccordionTrigger>Section 1</AccordionTrigger>
+          <AccordionContent>Description of Section 1</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="section-2">
+          <AccordionTrigger>Section 2</AccordionTrigger>
+          <AccordionContent>Description of Section 2</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  )
+};

frontend/src/components/v2/Accordion/Accordion.tsx

@@ -0,0 +1,74 @@
+import { forwardRef } from "react";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { twMerge } from "tailwind-merge";
+
+export const AccordionItem = forwardRef<HTMLDivElement, AccordionPrimitive.AccordionItemProps>(
+  ({ children, className, ...props }, forwardedRef) => (
+    <AccordionPrimitive.Item
+      className={twMerge(
+        "mt-px overflow-hidden first:mt-0 data-[state=open]:border-l data-[state=open]:border-primary transition-all border-transparent",
+        className
+      )}
+      {...props}
+      ref={forwardedRef}
+    >
+      {children}
+    </AccordionPrimitive.Item>
+  )
+);
+AccordionItem.displayName = "AccordionItem";
+
+export const AccordionTrigger = forwardRef<
+  HTMLButtonElement,
+  AccordionPrimitive.AccordionTriggerProps
+>(({ children, className, ...props }, forwardedRef) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      className={twMerge(
+        "py-2 px-4 group data-[state=open]:text-primary h-11 hover:text-primary flex flex-1 outline-none items-center justify-between ",
+        className
+      )}
+      {...props}
+      ref={forwardedRef}
+    >
+      {children}
+      <FontAwesomeIcon
+        icon={faChevronDown}
+        className="ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180 text-sm"
+        aria-hidden
+      />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+
+AccordionTrigger.displayName = "AccordionTrigger";
+
+export const AccordionContent = forwardRef<
+  HTMLDivElement,
+  AccordionPrimitive.AccordionContentProps
+>(({ children, className, ...props }, forwardedRef) => (
+  <AccordionPrimitive.Content
+    className={twMerge(
+      "data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden",
+      className
+    )}
+    {...props}
+    ref={forwardedRef}
+  >
+    <div className="text-sm py-2 px-4">{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = "AccordionContent";
+
+// ref: https://www.radix-ui.com/primitives/docs/components/accordion#root
+export const Accordion = ({
+  children,
+  ...props
+}: AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) => (
+  <AccordionPrimitive.Root {...props} className={twMerge("w-80 text-bunker-300", props.className)}>
+    {children}
+  </AccordionPrimitive.Root>
+);

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

@@ -0,0 +1 @@
+export { Accordion, AccordionContent, AccordionItem,AccordionTrigger } from "./Accordion";

frontend/src/components/v2/Checkbox/Checkbox.tsx

@@ -45,7 +45,7 @@ export const Checkbox = ({
           <FontAwesomeIcon icon={faCheck} size="sm" />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
-      <label className="text-sm" htmlFor={id}>
+      <label className="text-sm whitespace-nowrap" htmlFor={id}>
         {children}
         {isRequired && <span className="pl-1 text-red">*</span>}
       </label>

frontend/src/components/v2/FormControl/FormControl.tsx

@@ -8,12 +8,17 @@ export type FormLabelProps = {
   id?: string;
   isRequired?: boolean;
   label?: ReactNode;
+  icon?: ReactNode;
 };
 
-export const FormLabel = ({ id, label, isRequired }: FormLabelProps) => (
-  <Label.Root className="mb-0.5 ml-1 block text-sm font-normal text-mineshaft-400" htmlFor={id}>
+export const FormLabel = ({ id, label, isRequired, icon }: FormLabelProps) => (
+  <Label.Root
+    className="mb-0.5 ml-1 block flex items-center text-sm font-normal text-mineshaft-400"
+    htmlFor={id}
+  >
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
+    {icon && <span className="ml-2 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">{icon}</span>}
   </Label.Root>
 );
 
@@ -47,6 +52,7 @@ export type FormControlProps = {
   errorText?: ReactNode;
   children: JSX.Element;
   className?: string;
+  icon?: ReactNode;
 };
 
 export const FormControl = ({
@@ -57,12 +63,13 @@ export const FormControl = ({
   errorText,
   id,
   isError,
+  icon,
   className
 }: FormControlProps): JSX.Element => {
   return (
     <div className={twMerge("mb-4", className)}>
       {typeof label === "string" ? (
-        <FormLabel label={label} isRequired={isRequired} id={id} />
+        <FormLabel label={label} isRequired={isRequired} id={id} icon={icon} />
       ) : (
         label
       )}

frontend/src/components/v2/IconButton/IconButton.tsx

@@ -57,7 +57,8 @@ const iconButtonVariants = cva(
       {
         colorSchema: "primary",
         variant: "outline_bg",
-        className: "bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60 text-bunker-200 hover:text-bunker-100 duration-100"
+        className:
+          "bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60 text-bunker-200 hover:text-bunker-100 duration-100"
       },
       {
         colorSchema: "danger",

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/no-danger */
 import { forwardRef, HTMLAttributes } from "react";
-import ContentEditable from "react-contenteditable";
 import sanitizeHtml, { DisallowedTagsModes } from "sanitize-html";
 
 import { useToggle } from "@app/hooks";
@@ -35,58 +34,52 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
       `<span class="ph-no-capture text-yellow">&#36;&#123;<span class="ph-no-capture text-yello-200/80">${b}</span>&#125;</span>`
   );
 
-  return newContent;
+  // akhilmhdh: Dont remove this br. I am still clueless how this works but weirdly enough
+  // when break is added a line break works properly
+  return `${newContent}<br/>`;
 };
 
-type Props = Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "onBlur"> & {
+type Props = HTMLAttributes<HTMLTextAreaElement> & {
   value?: string | null;
   isVisible?: boolean;
   isDisabled?: boolean;
-  onChange?: (val: string) => void;
-  onBlur?: () => void;
 };
 
-export const SecretInput = forwardRef<HTMLDivElement, Props>(
-  ({ value, isVisible, onChange, onBlur, isDisabled, ...props }, ref) => {
+const commonClassName = "font-mono text-sm caret-white border-none outline-none w-full break-all";
+
+export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
+  ({ value, isVisible, onBlur, isDisabled, onFocus, ...props }, ref) => {
     const [isSecretFocused, setIsSecretFocused] = useToggle();
 
     return (
-      <div
-        className="thin-scrollbar relative overflow-y-auto overflow-x-hidden"
-        style={{ maxHeight: `${21 * 7}px` }}
-      >
-        <div
-          dangerouslySetInnerHTML={{
-            __html: syntaxHighlight(value, isVisible || isSecretFocused)
-          }}
-          className={`absolute top-0 left-0 z-0 h-full w-full inline-block text-ellipsis whitespace-pre-wrap break-all ${
-            !value && value !== "" && "italic text-red-600/70"
-          }`}
-          ref={ref}
-        />
-        <ContentEditable
-          className="relative z-10 h-full w-full text-ellipsis inline-block whitespace-pre-wrap  break-all text-transparent caret-white outline-none"
-          role="textbox"
-          onChange={(evt) => {
-            if (onChange) onChange(evt.currentTarget.innerText.trim());
-          }}
-          onFocus={() => setIsSecretFocused.on()}
-          disabled={isDisabled}
-          spellCheck={false}
-          onBlur={() => {
-            if (onBlur) onBlur();
-            setIsSecretFocused.off();
-          }}
-          html={
-            isVisible || isSecretFocused
-              ? sanitizeHtml(
-                  value?.replaceAll("<", "&lt;").replaceAll(">", "&gt;") || "",
-                  sanitizeConf
-                )
-              : syntaxHighlight(value, false)
-          }
-          {...props}
-        />
+      <div className="overflow-auto w-full" style={{ maxHeight: `${21 * 7}px` }}>
+        <div className="relative overflow-hidden">
+          <pre aria-hidden className="m-0 ">
+            <code className={`inline-block w-full  ${commonClassName}`}>
+              <span
+                style={{ whiteSpace: "break-spaces" }}
+                dangerouslySetInnerHTML={{
+                  __html: syntaxHighlight(value, isVisible || isSecretFocused) ?? ""
+                }}
+              />
+            </code>
+          </pre>
+          <textarea
+            style={{ whiteSpace: "break-spaces" }}
+            aria-label="secret value"
+            ref={ref}
+            className={`absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0 ${commonClassName}`}
+            onFocus={() => setIsSecretFocused.on()}
+            disabled={isDisabled}
+            spellCheck={false}
+            onBlur={(evt) => {
+              onBlur?.(evt);
+              setIsSecretFocused.off();
+            }}
+            value={value || ""}
+            {...props}
+          />
+        </div>
       </div>
     );
   }

frontend/src/components/v2/Table/Table.tsx

@@ -79,7 +79,7 @@ export const Tr = ({
 }: TrProps): JSX.Element => (
   <tr
     className={twMerge(
-      "cursor-default border border-solid border-mineshaft-600",
+      "cursor-default border-b border-solid border-mineshaft-600 last:border-b-0",
       isHoverable && "hover:bg-mineshaft-600",
       isSelectable && "cursor-pointer",
       className
@@ -124,7 +124,7 @@ export type TdProps = {
 } & TdHTMLAttributes<HTMLTableCellElement>;
 
 export const Td = ({ children, className, ...props }: TdProps): JSX.Element => (
-  <td className={twMerge("px-5 py-2 text-left", className)} {...props}>
+  <td className={twMerge("px-5 py-3 text-left", className)} {...props}>
     {children}
   </td>
 );

frontend/src/components/v2/Tabs/Tabs.tsx

@@ -1,142 +1,46 @@
-import { useState } from "react";
-import { faArrowUpRightFromSquare, faCheck, faClipboard } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import * as Tabs from "@radix-ui/react-tabs";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { twMerge } from "tailwind-merge";
 
+export type TabsProps = TabsPrimitive.TabsProps;
 
-export type TabsProps = Tabs.TabsProps & {};
+export const Tabs = ({ className, children, ...props }: TabsProps) => (
+  <TabsPrimitive.Root className={twMerge("flex flex-col", className)} {...props}>
+    {children}
+  </TabsPrimitive.Root>
+);
 
-function copyToClipboard(id: string, setState: (value: boolean) => void) {
-  // Get the text field
-  const copyText = document.getElementById(id) as HTMLInputElement;
+export type TabListProps = TabsPrimitive.TabsListProps;
 
-  // Select the text field
-  copyText.select();
-  copyText.setSelectionRange(0, 99999); // For mobile devices
-
-  // Copy the text inside the text field
-  navigator.clipboard.writeText(copyText.value);
-
-  setState(true);
-  setTimeout(() => setState(false), 2000);
-  // Alert the copied text
-  // alert("Copied the text: " + copyText.value);
-}
-
-const CodeItem = ({isCopied, setIsCopied, textExplanation, code, id}: {isCopied: boolean, setIsCopied: (value: boolean) => void, textExplanation: string, code: string, id: string}) => {
-  return <>
-    <p className="mb-2 mt-4 text-bunker-300 text-sm leading-normal">
-      {textExplanation}
-    </p>
-    <div className='font-mono text-sm px-3 py-2 bg-bunker rounded-md border border-mineshaft-600 flex flex-row items-center justify-between'>
-      <input disabled value={code} id={id} className='w-full bg-transparent text-bunker-200'/>
-      <button
-        type="button"
-        onClick={() => copyToClipboard(id, setIsCopied)}
-        className='h-full pl-3.5 pr-2 text-bunker-300 hover:text-primary-200 duration-200'
-      >
-        {isCopied ? (
-          <FontAwesomeIcon
-            icon={faCheck}
-            className='pr-0.5'
-          />
-        ) : (
-          <FontAwesomeIcon icon={faClipboard} />
-        )}
-      </button>
-    </div>
-  </>
-}
-
-export const TabsObject = () => {
-  const [downloadCodeCopied, setDownloadCodeCopied] = useState(false);
-  const [downloadCode2Copied, setDownloadCode2Copied] = useState(false);
-  const [loginCodeCopied, setLoginCodeCopied] = useState(false);
-  const [initCodeCopied, setInitCodeCopied] = useState(false);
-  const [runCodeCopied, setRunCodeCopied] = useState(false);
-
-  return <Tabs.Root
-    className="flex flex-col w-full cursor-default border border-mineshaft-600 rounded-md"
-    defaultValue="tab1"
+export const TabList = ({ className, children, ...props }: TabListProps) => (
+  <TabsPrimitive.List
+    className={twMerge("flex-shrink-0 flex  border-b-2 border-mineshaft-800", className)}
+    {...props}
   >
-    <Tabs.List className="shrink-0 flex border-b border-mineshaft-600" aria-label="Manage your account">
-      <Tabs.Trigger
-        className="bg-bunker-700 px-5 h-10 flex-1 flex items-center justify-center text-sm leading-none text-bunker-300 select-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:text-primary data-[state=active]:font-medium data-[state=active]:focus:relative data-[state=active]:border-b data-[state=active]:border-primary outline-none cursor-default"
-        value="tab1"
-      >
-        MacOS
-      </Tabs.Trigger>
-      <Tabs.Trigger
-        className="bg-bunker-700 px-5 h-10 flex-1 flex items-center justify-center text-sm leading-none text-bunker-300 select-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:text-primary data-[state=active]:font-medium data-[state=active]:focus:relative data-[state=active]:border-b data-[state=active]:border-primary outline-none cursor-default"
-        value="tab2"
-      >
-        Windows
-      </Tabs.Trigger>
-      {/* <Tabs.Trigger
-        className="bg-bunker-700 px-5 h-10 flex-1 flex items-center justify-center text-sm leading-none text-bunker-300 select-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:text-primary data-[state=active]:font-medium data-[state=active]:focus:relative data-[state=active]:border-b data-[state=active]:border-primary outline-none cursor-default"
-        value="tab3"
-      >
-        Arch Linux
-      </Tabs.Trigger> */}
-      <a
-          target='_blank'
-          rel="noopener noreferrer"
-          className="bg-bunker-700 hover:text-bunker-100 duration-200 px-5 h-10 flex-1 flex items-center justify-center text-sm leading-none text-bunker-300 select-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:text-primary data-[state=active]:font-medium data-[state=active]:focus:relative data-[state=active]:border-b data-[state=active]:border-primary outline-none cursor-default"
-          href='https://infisical.com/docs/cli/overview'
-        >
-        Other Platforms <FontAwesomeIcon icon={faArrowUpRightFromSquare} className='ml-2'/>
-      </a>
-    </Tabs.List>
-    <Tabs.Content
-      className="grow p-5 pt-0 bg-bunker-700 rounded-b-md outline-none cursor-default"
-      value="tab1"
-    >
-      <CodeItem isCopied={downloadCodeCopied} setIsCopied={setDownloadCodeCopied} textExplanation="1. Download CLI" code="brew install infisical/get-cli/infisical" id="downloadCode" />
-      <CodeItem isCopied={loginCodeCopied} setIsCopied={setLoginCodeCopied} textExplanation="2. Login" code="infisical login" id="loginCode" />
-      <CodeItem isCopied={initCodeCopied} setIsCopied={setInitCodeCopied} textExplanation="3. Choose Project" code="infisical init" id="initCode" />
-      <CodeItem isCopied={runCodeCopied} setIsCopied={setRunCodeCopied} textExplanation="4. Done! Now, you can prepend your usual start script with:" code="infisical run -- [YOUR USUAL CODE START SCRIPT GOES HERE]" id="runCode" />
-      <p className='text-bunker-300 text-sm mt-2'>You can find example of start commands for different frameworks <a
-        className='text-primary underline underline-offset-2'
-        target="_blank"
-        rel="noopener noreferrer"
-        href='https://infisical.com/docs/integrations/overview'
-      >
-        here
-      </a>. </p>
-    </Tabs.Content>
-    <Tabs.Content
-      className="grow p-5 pt-0 bg-bunker-700 rounded-b-md outline-none"
-      value="tab2"
-    >
-      <CodeItem isCopied={downloadCodeCopied} setIsCopied={setDownloadCodeCopied} textExplanation="1. Download CLI" code="scoop bucket add org https://github.com/Infisical/scoop-infisical.git" id="downloadCodeW" />
-      <div className='font-mono text-sm px-3 py-2 mt-2 bg-bunker rounded-md border border-mineshaft-600 flex flex-row items-center justify-between'>
-        <input disabled value="scoop install infisical" id="downloadCodeW2" className='w-full bg-transparent text-bunker-200'/>
-        <button
-          type="button"
-          onClick={() => copyToClipboard("downloadCodeW2", setDownloadCode2Copied)}
-          className='h-full pl-3.5 pr-2 text-bunker-300 hover:text-primary-200 duration-200'
-        >
-          {downloadCode2Copied ? (
-            <FontAwesomeIcon
-              icon={faCheck}
-              className='pr-0.5'
-            />
-          ) : (
-            <FontAwesomeIcon icon={faClipboard} />
-          )}
-        </button>
-      </div>
-      <CodeItem isCopied={loginCodeCopied} setIsCopied={setLoginCodeCopied} textExplanation="2. Login" code="infisical login" id="loginCodeW" />
-      <CodeItem isCopied={initCodeCopied} setIsCopied={setInitCodeCopied} textExplanation="3. Choose Project" code="infisical init" id="initCodeW" />
-      <CodeItem isCopied={runCodeCopied} setIsCopied={setRunCodeCopied} textExplanation="4. Done! Now, you can prepend your usual start script with:" code="infisical run -- [YOUR USUAL CODE START SCRIPT GOES HERE]" id="runCodeW" />
-      <p className='text-bunker-300 text-sm mt-2'>You can find example of start commands for different frameworks <a
-        className='text-primary underline underline-offset-2'
-        target="_blank"
-        rel="noopener noreferrer"
-        href='https://infisical.com/docs/integrations/overview'
-      >
-        here
-      </a>. </p>
-    </Tabs.Content>
-  </Tabs.Root>
-};
+    {children}
+  </TabsPrimitive.List>
+);
+
+export type TabProps = TabsPrimitive.TabsTriggerProps;
+
+export const Tab = ({ className, children, ...props }: TabProps) => (
+  <TabsPrimitive.Trigger
+    className={twMerge(
+      "px-3 h-10 font-medium text-sm flex items-center justify-center select-none first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 text-mineshaft-400 transition-all data-[state=active]:text-white data-[state=active]:border-b data-[state=active]:border-primary",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </TabsPrimitive.Trigger>
+);
+
+export type TabPanelProps = TabsPrimitive.TabsContentProps;
+
+export const TabPanel = ({ className, children, ...props }: TabPanelProps) => (
+  <TabsPrimitive.Content
+    className={twMerge("outline-none flex-grow py-5 rounded-bl-md rounded-br-md", className)}
+    {...props}
+  >
+    {children}
+  </TabsPrimitive.Content>
+);

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

@@ -1,4 +1,2 @@
-export type {
-  TabsProps
-} from "./Tabs";
-export { TabsObject } from "./Tabs";
+export type { TabListProps,TabPanelProps, TabProps, TabsProps } from "./Tabs";
+export { Tab, TabList, TabPanel, Tabs } from "./Tabs";

frontend/src/components/v2/Tooltip/Tooltip.tsx

@@ -10,6 +10,7 @@ export type TooltipProps = Omit<TooltipPrimitive.TooltipContentProps, "open" | "
   asChild?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
   defaultOpen?: boolean;
+  position?: "top" | "bottom" | "left" | "right";
 };
 
 export const Tooltip = ({
@@ -20,6 +21,7 @@ export const Tooltip = ({
   defaultOpen,
   className,
   asChild = true,
+  position = "top",
   ...props
 }: TooltipProps) => (
   <TooltipPrimitive.Root
@@ -30,7 +32,7 @@ export const Tooltip = ({
   >
     <TooltipPrimitive.Trigger asChild={asChild}>{children}</TooltipPrimitive.Trigger>
     <TooltipPrimitive.Content
-      side="top"
+      side={position}
       align="center"
       sideOffset={5}
       {...props}

frontend/src/components/v2/index.tsx

@@ -1,3 +1,4 @@
+export * from "./Accordion";
 export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";
@@ -21,6 +22,7 @@ export * from "./Skeleton";
 export * from "./Spinner";
 export * from "./Switch";
 export * from "./Table";
+export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextArea";
 export * from "./Tooltip";

frontend/src/context/OrgPermissionContext/OrgPermissionContext.tsx

@@ -0,0 +1,52 @@
+import { createContext, ReactNode, useContext } from "react";
+
+import { useGetUserOrgPermissions } from "@app/hooks/api";
+
+import { useOrganization } from "../OrganizationContext";
+import { TOrgPermission } from "./types";
+
+type Props = {
+  children: ReactNode;
+};
+
+const OrgPermissionContext = createContext<null | TOrgPermission>(null);
+
+export const OrgPermissionProvider = ({ children }: Props): JSX.Element => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?._id || "";
+  const { data: permission, isLoading } = useGetUserOrgPermissions({ orgId });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center w-screen h-screen bg-bunker-800">
+        <img
+          src="/images/loading/loading.gif"
+          height={70}
+          width={120}
+          alt="infisical loading indicator"
+        />
+      </div>
+    );
+  }
+
+  if (!permission) {
+    return (
+      <div className="flex items-center justify-center w-screen h-screen bg-bunker-800">
+        Failed to load user permissions
+      </div>
+    );
+  }
+
+  return (
+    <OrgPermissionContext.Provider value={permission}>{children}</OrgPermissionContext.Provider>
+  );
+};
+
+export const useOrgPermission = () => {
+  const ctx = useContext(OrgPermissionContext);
+  if (!ctx) {
+    throw new Error("useOrgPermission to be used within <OrgPermissionProvider>");
+  }
+
+  return ctx;
+};

frontend/src/context/OrgPermissionContext/index.tsx

@@ -0,0 +1,3 @@
+export { OrgPermissionProvider, useOrgPermission } from "./OrgPermissionContext";
+export type { TOrgPermission } from "./types";
+export { OrgPermissionActions, OrgPermissionSubjects } from "./types";

frontend/src/context/OrgPermissionContext/types.ts

@@ -0,0 +1,32 @@
+import { MongoAbility } from "@casl/ability";
+
+export enum OrgPermissionActions {
+  Read = "read",
+  Create = "create",
+  Edit = "edit",
+  Delete = "delete"
+}
+
+export enum OrgPermissionSubjects {
+  Workspace = "workspace",
+  Role = "role",
+  Member = "member",
+  Settings = "settings",
+  IncidentAccount = "incident-contact",
+  Sso = "sso",
+  Billing = "billing",
+  SecretScanning = "secret-scanning"
+}
+
+export type OrgPermissionSet =
+  | [OrgPermissionActions.Create, OrgPermissionSubjects.Workspace]
+  | [OrgPermissionActions.Read, OrgPermissionSubjects.Workspace]
+  | [OrgPermissionActions, OrgPermissionSubjects.Role]
+  | [OrgPermissionActions, OrgPermissionSubjects.Member]
+  | [OrgPermissionActions, OrgPermissionSubjects.Settings]
+  | [OrgPermissionActions, OrgPermissionSubjects.IncidentAccount]
+  | [OrgPermissionActions, OrgPermissionSubjects.Sso]
+  | [OrgPermissionActions, OrgPermissionSubjects.SecretScanning]
+  | [OrgPermissionActions, OrgPermissionSubjects.Billing];
+
+export type TOrgPermission = MongoAbility<OrgPermissionSet>;

frontend/src/context/ProjectPermissionContext/ProjectPermissionContext.tsx

@@ -0,0 +1,54 @@
+import { createContext, ReactNode, useContext } from "react";
+
+import { useGetUserProjectPermissions } from "@app/hooks/api";
+
+import { useWorkspace } from "../WorkspaceContext";
+import { TProjectPermission } from "./types";
+
+type Props = {
+  children: ReactNode;
+};
+
+const ProjectPermissionContext = createContext<null | TProjectPermission>(null);
+
+export const ProjectPermissionProvider = ({ children }: Props): JSX.Element => {
+  const { currentWorkspace, isLoading: isWsLoading } = useWorkspace();
+  const workspaceId = currentWorkspace?._id || "";
+  const { data: permission, isLoading } = useGetUserProjectPermissions({ workspaceId });
+
+  if ((isLoading && currentWorkspace) || isWsLoading) {
+    return (
+      <div className="flex items-center justify-center w-screen h-screen bg-bunker-800">
+        <img
+          src="/images/loading/loading.gif"
+          height={70}
+          width={120}
+          alt="infisical loading indicator"
+        />
+      </div>
+    );
+  }
+
+  if (!permission && currentWorkspace) {
+    return (
+      <div className="flex items-center justify-center w-screen h-screen bg-bunker-800">
+        Failed to load user permissions
+      </div>
+    );
+  }
+
+  return (
+    <ProjectPermissionContext.Provider value={permission!}>
+      {children}
+    </ProjectPermissionContext.Provider>
+  );
+};
+
+export const useProjectPermission = () => {
+  const ctx = useContext(ProjectPermissionContext);
+  if (!ctx) {
+    throw new Error("useProjectPermission to be used within <ProjectPermissionContext>");
+  }
+
+  return ctx;
+};

frontend/src/context/ProjectPermissionContext/index.tsx

@@ -0,0 +1,3 @@
+export { ProjectPermissionProvider, useProjectPermission } from "./ProjectPermissionContext";
+export type { ProjectPermissionSet, TProjectPermission } from "./types";
+export { ProjectPermissionActions,ProjectPermissionSub } from "./types";

frontend/src/context/ProjectPermissionContext/types.ts

@@ -0,0 +1,51 @@
+import { ForcedSubject, MongoAbility } from "@casl/ability";
+
+export enum ProjectPermissionActions {
+  Read = "read",
+  Create = "create",
+  Edit = "edit",
+  Delete = "delete"
+}
+
+export enum ProjectPermissionSub {
+  Role = "role",
+  Member = "member",
+  Settings = "settings",
+  Integrations = "integrations",
+  Webhooks = "webhooks",
+  ServiceTokens = "service-tokens",
+  Environments = "environments",
+  Tags = "tags",
+  AuditLogs = "audit-logs",
+  IpAllowList = "ip-allowlist",
+  Workspace = "workspace",
+  Secrets = "secrets",
+  SecretRollback = "secret-rollback"
+}
+
+type SubjectFields = {
+  environment: string;
+  secretPath: string;
+};
+
+export type ProjectPermissionSet =
+  | [
+      ProjectPermissionActions,
+      ProjectPermissionSub.Secrets | (ForcedSubject<ProjectPermissionSub.Secrets> & SubjectFields)
+    ]
+  | [ProjectPermissionActions, ProjectPermissionSub.Role]
+  | [ProjectPermissionActions, ProjectPermissionSub.Tags]
+  | [ProjectPermissionActions, ProjectPermissionSub.Member]
+  | [ProjectPermissionActions, ProjectPermissionSub.Integrations]
+  | [ProjectPermissionActions, ProjectPermissionSub.Webhooks]
+  | [ProjectPermissionActions, ProjectPermissionSub.AuditLogs]
+  | [ProjectPermissionActions, ProjectPermissionSub.Environments]
+  | [ProjectPermissionActions, ProjectPermissionSub.IpAllowList]
+  | [ProjectPermissionActions, ProjectPermissionSub.Settings]
+  | [ProjectPermissionActions, ProjectPermissionSub.ServiceTokens]
+  | [ProjectPermissionActions.Delete, ProjectPermissionSub.Workspace]
+  | [ProjectPermissionActions.Edit, ProjectPermissionSub.Workspace]
+  | [ProjectPermissionActions.Read, ProjectPermissionSub.SecretRollback]
+  | [ProjectPermissionActions.Create, ProjectPermissionSub.SecretRollback];
+
+export type TProjectPermission = MongoAbility<ProjectPermissionSet>;

frontend/src/context/index.tsx

@@ -1,5 +1,19 @@
 export { AuthProvider } from "./AuthContext";
 export { OrgProvider, useOrganization } from "./OrganizationContext";
+export type { TOrgPermission } from "./OrgPermissionContext";
+export {
+  OrgPermissionActions,
+  OrgPermissionProvider,
+  OrgPermissionSubjects,
+  useOrgPermission
+} from "./OrgPermissionContext";
+export type { TProjectPermission } from "./ProjectPermissionContext";
+export {
+  ProjectPermissionActions,
+  ProjectPermissionProvider,
+  ProjectPermissionSub,
+  useProjectPermission
+} from "./ProjectPermissionContext";
 export { SubscriptionProvider, useSubscription } from "./SubscriptionContext";
 export { UserProvider, useUser } from "./UserContext";
 export { useWorkspace, WorkspaceProvider } from "./WorkspaceContext";

frontend/src/hoc/index.tsx

@@ -0,0 +1,2 @@
+export { withPermission } from "./withPermission";
+export { withProjectPermission } from "./withProjectPermission";

frontend/src/hoc/withPermission/index.tsx

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

frontend/src/hoc/withPermission/withPermission.tsx

@@ -0,0 +1,61 @@
+import { ComponentType } from "react";
+import { Abilities, AbilityTuple, Generics, SubjectType } from "@casl/ability";
+import { faLock } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { TOrgPermission, useOrgPermission } from "@app/context";
+
+type Props<T extends Abilities> = (T extends AbilityTuple
+  ? {
+      action: T[0];
+      subject: Extract<T[1], SubjectType>;
+    }
+  : {
+      action: string;
+      subject: string;
+    }) & { className?: string; containerClassName?: string };
+
+export const withPermission = <T extends {}, J extends TOrgPermission>(
+  Component: ComponentType<T>,
+  { action, subject, className, containerClassName }: Props<Generics<J>["abilities"]>
+) => {
+  const HOC = (hocProps: T) => {
+    const permission = useOrgPermission();
+
+    // akhilmhdh: Set as any due to casl/react ts type bug
+    // REASON: casl due to its type checking can't seem to union even if union intersection is applied
+    if (permission.cannot(action as any, subject)) {
+      return (
+        <div
+          className={twMerge(
+            "container h-full mx-auto flex justify-center items-center",
+            containerClassName
+          )}
+        >
+          <div
+            className={twMerge(
+              "rounded-md bg-mineshaft-800 text-bunker-300 p-16 flex space-x-12 items-end",
+              className
+            )}
+          >
+            <div>
+              <FontAwesomeIcon icon={faLock} size="6x" />
+            </div>
+            <div>
+              <div className="text-4xl font-medium mb-2">Access Restricted</div>
+              <div className="text-sm">
+                Your role has limited permissions, please <br /> contact your admin to gain access
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return <Component {...hocProps} />;
+  };
+
+  HOC.displayName = "WithPermission";
+  return HOC;
+};

frontend/src/hoc/withProjectPermission/index.tsx

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

frontend/src/hoc/withProjectPermission/withProjectPermission.tsx

@@ -0,0 +1,62 @@
+import { ComponentType } from "react";
+import { Abilities, AbilityTuple, Generics, SubjectType } from "@casl/ability";
+import { faLock } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { TProjectPermission, useProjectPermission } from "@app/context";
+
+type Props<T extends Abilities> = (T extends AbilityTuple
+  ? {
+      action: T[0];
+      subject: Extract<T[1], SubjectType>;
+    }
+  : {
+      action: string;
+      subject: string;
+    }) & { className?: string; containerClassName?: string };
+
+export const withProjectPermission = <T extends {}, J extends TProjectPermission>(
+  Component: ComponentType<T>,
+  { action, subject, className, containerClassName }: Props<Generics<J>["abilities"]>
+) => {
+  const HOC = (hocProps: T) => {
+    const permission = useProjectPermission();
+
+    // akhilmhdh: Set as any due to casl/react ts type bug
+    // REASON: casl due to its type checking can't seem to union even if union intersection is applied
+    if (permission.cannot(action as any, subject)) {
+      return (
+        <div
+          className={twMerge(
+            "container h-full mx-auto flex justify-center items-center",
+            containerClassName
+          )}
+        >
+          <div
+            className={twMerge(
+              "rounded-md bg-mineshaft-800 text-bunker-300 p-16 flex space-x-12 items-end",
+              className
+            )}
+          >
+            <div>
+              <FontAwesomeIcon icon={faLock} size="6x" />
+            </div>
+            <div>
+              <div className="text-4xl font-medium mb-2">Permission Denied</div>
+              <div className="text-sm">
+                You do not have permission to this page. <br /> Kindly contact your organization
+                administrator
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return <Component {...hocProps} />;
+  };
+
+  HOC.displayName = "WithProjectPermission";
+  return HOC;
+};

frontend/src/hooks/api/index.tsx

@@ -6,6 +6,7 @@ export * from "./integrationAuth";
 export * from "./integrations";
 export * from "./keys";
 export * from "./organization";
+export * from "./roles";
 export * from "./secretFolders";
 export * from "./secretImports";
 export * from "./secrets";

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

@@ -9,6 +9,8 @@ import {
   Environment, 
   IntegrationAuth, 
   NorthflankSecretGroup,
+  Org,
+  Project,
   Service, 
   Team, 
   TeamCityBuildConfig} from "./types";
@@ -27,6 +29,31 @@ const integrationAuthKeys = {
     integrationAuthId: string;
     appId: string;
   }) => [{ integrationAuthId, appId }, "integrationAuthVercelBranches"] as const,
+  getIntegrationAuthQoveryOrgs: (integrationAuthId: string) => 
+  [{ integrationAuthId }, "integrationAuthQoveryOrgs"] as const,
+  getIntegrationAuthQoveryProjects: ({
+    integrationAuthId,
+    orgId
+  }: {
+    integrationAuthId: string;
+    orgId: string;
+  }) => [{ integrationAuthId, orgId }, "integrationAuthQoveryProjects"] as const,
+  getIntegrationAuthQoveryEnvironments: ({
+    integrationAuthId,
+    projectId
+  }: {
+    integrationAuthId: string;
+    projectId: string;
+  }) => [{ integrationAuthId, projectId }, "integrationAuthQoveryEnvironments"] as const,
+  getIntegrationAuthQoveryScopes: ({
+    integrationAuthId,
+    environmentId,
+    scope
+  }: {
+    integrationAuthId: string;
+    environmentId: string;
+    scope: "job" | "application" | "container";
+  }) => [{ integrationAuthId, environmentId, scope }, "integrationAuthQoveryScopes"] as const,
   getIntegrationAuthRailwayEnvironments: ({
     integrationAuthId,
     appId
@@ -120,6 +147,121 @@ const fetchIntegrationAuthVercelBranches = async ({
   return branches;
 };
 
+const fetchIntegrationAuthQoveryOrgs = async (integrationAuthId: string) => {
+  const {
+    data: { orgs }
+  } = await apiRequest.get<{ orgs: Org[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/qovery/orgs`
+  );
+
+  return orgs;
+};
+
+const fetchIntegrationAuthQoveryProjects = async ({
+  integrationAuthId,
+  orgId
+}: {
+  integrationAuthId: string;
+  orgId: string;
+}) => {
+  if (orgId === "none") return [];
+  
+  const {
+    data: { projects }
+  } = await apiRequest.get<{ projects: Project[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/qovery/projects`,
+    {
+      params: {
+        orgId
+      }
+    }
+  );
+
+  return projects;
+};
+
+const fetchIntegrationAuthQoveryEnvironments = async ({
+  integrationAuthId,
+  projectId
+}: {
+  integrationAuthId: string;
+  projectId: string;
+}) => {
+  if (projectId === "none") return [];
+
+  const {
+    data: { environments }
+  } = await apiRequest.get<{ environments: Environment[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/qovery/environments`,
+    {
+      params: {
+        projectId
+      }
+    }
+  );
+
+  return environments;
+};
+
+const fetchIntegrationAuthQoveryScopes = async ({
+  integrationAuthId,
+  environmentId,
+  scope
+}: {
+  integrationAuthId: string;
+  environmentId: string;
+  scope: "job" | "application" | "container";
+}) => {
+  if (environmentId === "none") return [];
+  
+  if (scope === "application") {
+    const {
+      data: { apps }
+    } = await apiRequest.get<{ apps: App[] }>(
+      `/api/v1/integration-auth/${integrationAuthId}/qovery/apps`,
+      {
+        params: {
+          environmentId
+        }
+      }
+    );
+
+    return apps;
+  } 
+  
+  if (scope === "container") {
+    const {
+      data: { containers }
+    } = await apiRequest.get<{ containers: App[] }>(
+      `/api/v1/integration-auth/${integrationAuthId}/qovery/containers`,
+      {
+        params: {
+          environmentId
+        }
+      }
+    );
+
+    return containers;
+  }
+
+  if (scope === "job") {
+    const {
+      data: { jobs }
+    } = await apiRequest.get<{ jobs: App[] }>(
+      `/api/v1/integration-auth/${integrationAuthId}/qovery/jobs`,
+      {
+        params: {
+          environmentId
+        }
+      }
+    );
+
+    return jobs;
+  }
+
+  return undefined;
+};
+
 const fetchIntegrationAuthRailwayEnvironments = async ({
   integrationAuthId,
   appId
@@ -197,6 +339,8 @@ const fetchIntegrationAuthTeamCityBuildConfigs = async ({
   integrationAuthId: string;
   appId: string;
 }) => {
+  if (appId === "") return [];
+
   const {
     data: { buildConfigs }
   } = await apiRequest.get<{ buildConfigs: TeamCityBuildConfig[] }>(
@@ -269,6 +413,82 @@ export const useGetIntegrationAuthVercelBranches = ({
   });
 };
 
+export const useGetIntegrationAuthQoveryOrgs = (integrationAuthId: string) => {
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthQoveryOrgs(integrationAuthId),
+    queryFn: () =>
+      fetchIntegrationAuthQoveryOrgs(integrationAuthId),
+    enabled: true
+  });
+};
+
+export const useGetIntegrationAuthQoveryProjects = ({
+  integrationAuthId,
+  orgId
+}: {
+  integrationAuthId: string;
+  orgId: string;
+}) => {
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthQoveryProjects({
+      integrationAuthId,
+      orgId
+    }),
+    queryFn: () =>
+      fetchIntegrationAuthQoveryProjects({
+        integrationAuthId,
+        orgId
+      }),
+    enabled: true
+  });
+};
+
+export const useGetIntegrationAuthQoveryEnvironments = ({
+  integrationAuthId,
+  projectId
+}: {
+  integrationAuthId: string;
+  projectId: string;
+}) => {
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthQoveryEnvironments({
+      integrationAuthId,
+      projectId
+    }),
+    queryFn: () =>
+      fetchIntegrationAuthQoveryEnvironments({
+        integrationAuthId,
+        projectId
+      }),
+    enabled: true
+  });
+};
+
+export const useGetIntegrationAuthQoveryScopes = ({
+  integrationAuthId,
+  environmentId,
+  scope
+}: {
+  integrationAuthId: string;
+  environmentId: string;
+  scope: "job" | "application" | "container";
+}) => {
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthQoveryScopes({
+      integrationAuthId,
+      environmentId,
+      scope
+    }),
+    queryFn: () =>
+      fetchIntegrationAuthQoveryScopes({
+        integrationAuthId,
+        environmentId,
+        scope
+      }),
+    enabled: true
+  });
+};
+
 export const useGetIntegrationAuthRailwayEnvironments = ({
   integrationAuthId,
   appId
@@ -367,16 +587,19 @@ export const useAuthorizeIntegration = () => {
     mutationFn: async ({
       workspaceId,
       code,
-      integration
+      integration,
+      url
     }: {
       workspaceId: string;
       code: string;
       integration: string;
+      url?: string;
     }) => {
       const { data: { integrationAuth } } = await apiRequest.post("/api/v1/integration-auth/oauth-token", {
         workspaceId,
         code,
-        integration
+        integration,
+        url
       });
 
       return integrationAuth;
@@ -394,6 +617,7 @@ export const useSaveIntegrationAccessToken = () => {
     mutationFn: async ({
       workspaceId,
       integration,
+      refreshToken,
       accessId,
       accessToken,
       url,
@@ -401,14 +625,16 @@ export const useSaveIntegrationAccessToken = () => {
     }: {
       workspaceId: string | null;
       integration: string | undefined;
-      accessId: string | null;
-      accessToken: string;
-      url: string | null;
-      namespace: string | null;
+      refreshToken?: string;
+      accessId?: string;
+      accessToken?: string;
+      url?: string;
+      namespace?: string;
     }) => {
       const { data: { integrationAuth } } = await apiRequest.post("/api/v1/integration-auth/access-token", {
         workspaceId,
         integration,
+        refreshToken,
         accessId,
         accessToken,
         url,

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

@@ -26,6 +26,21 @@ export type Environment = {
   environmentId: string;
 };
 
+export type Container = {
+  name: string;
+  containerId: string;
+};
+
+export type Org = {
+  name: string;
+  orgId: string;
+};
+
+export type Project = {
+  name: string;
+  projectId: string;
+};
+
 export type Service = {
   name: string;
   serviceId: string;

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

@@ -40,23 +40,26 @@ export const useCreateIntegration = () => {
       owner,
       path,
       region,
+      scope,
       secretPath,
       metadata
     }: {
       integrationAuthId: string;
       isActive: boolean;
       secretPath: string;
-      app: string | null;
-      appId: string | null;
+      app?: string;
+      appId?: string;
       sourceEnvironment: string;
-      targetEnvironment: string | null;
-      targetEnvironmentId: string | null;
-      targetService: string | null;
-      targetServiceId: string | null;
-      owner: string | null;
-      path: string | null;
-      region: string | null;
+      targetEnvironment?: string;
+      targetEnvironmentId?: string;
+      targetService?: string;
+      targetServiceId?: string;
+      owner?: string;
+      path?: string;
+      region?: string;
+      scope?: string;
       metadata?: {
+        secretPrefix?: string;
         secretSuffix?: string;
       }
     }) => {
@@ -72,6 +75,7 @@ export const useCreateIntegration = () => {
         targetServiceId,
         owner,
         path,
+        scope,
         region,
         secretPath,
         metadata

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

@@ -32,5 +32,9 @@ export type TIntegration = {
   __v: number;
   metadata?: {
     secretSuffix?: string;
+    scope: string; 
+    org: string;
+    project: string;
+    environment: string;
   }
 };

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

@@ -0,0 +1,2 @@
+export { useCreateRole, useDeleteRole, useUpdateRole } from "./mutation";
+export { useGetRoles, useGetUserOrgPermissions,useGetUserProjectPermissions } from "./queries";

frontend/src/hooks/api/roles/mutation.tsx

@@ -0,0 +1,42 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { roleQueryKeys } from "./queries";
+import { TCreateRoleDTO, TDeleteRoleDTO, TUpdateRoleDTO } from "./types";
+
+export const useCreateRole = <T extends string | undefined>() => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (dto: TCreateRoleDTO<T>) => apiRequest.post("/api/v1/roles", dto),
+    onSuccess: (_, { orgId, workspaceId }) => {
+      queryClient.invalidateQueries(roleQueryKeys.getRoles({ orgId, workspaceId }));
+    }
+  });
+};
+
+export const useUpdateRole = <T extends string | undefined>() => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, ...dto }: TUpdateRoleDTO<T>) => apiRequest.patch(`/api/v1/roles/${id}`, dto),
+    onSuccess: (_, { orgId, workspaceId }) => {
+      queryClient.invalidateQueries(roleQueryKeys.getRoles({ orgId, workspaceId }));
+    }
+  });
+};
+
+export const useDeleteRole = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ orgId, id }: TDeleteRoleDTO) =>
+      apiRequest.delete(`/api/v1/roles/${id}`, {
+        data: { orgId }
+      }),
+    onSuccess: (_, { orgId, workspaceId }) => {
+      queryClient.invalidateQueries(roleQueryKeys.getRoles({ orgId, workspaceId }));
+    }
+  });
+};

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

@@ -0,0 +1,103 @@
+import { buildMongoQueryMatcher, createMongoAbility, MongoAbility, RawRuleOf } from "@casl/ability";
+import { PackRule, unpackRules } from "@casl/ability/extra";
+import { useQuery } from "@tanstack/react-query";
+import { FieldCondition, FieldInstruction, JsInterpreter } from "@ucast/mongo2js";
+import picomatch from "picomatch";
+
+import { apiRequest } from "@app/config/request";
+import { OrgPermissionSet } from "@app/context/OrgPermissionContext/types";
+import { ProjectPermissionSet } from "@app/context/ProjectPermissionContext/types";
+
+import {
+  TGetRolesDTO,
+  TGetUserOrgPermissionsDTO,
+  TGetUserProjectPermissionDTO,
+  TRole
+} from "./types";
+
+const $glob: FieldInstruction<string> = {
+  type: "field",
+  validate(instruction, value) {
+    if (typeof value !== "string") {
+      throw new Error(`"${instruction.name}" expects value to be a string`);
+    }
+  }
+};
+
+const glob: JsInterpreter<FieldCondition<string>> = (node, object, context) => {
+  const secretPath = context.get(object, node.field);
+  const permissionSecretGlobPath = node.value;
+  if (!secretPath) return false;
+  return picomatch.isMatch(secretPath, permissionSecretGlobPath, { strictSlashes: false });
+};
+
+const conditionsMatcher = buildMongoQueryMatcher({ $glob }, { glob });
+
+export const roleQueryKeys = {
+  getRoles: ({ orgId, workspaceId }: TGetRolesDTO) => ["roles", { orgId, workspaceId }] as const,
+  getUserOrgPermissions: ({ orgId }: TGetUserOrgPermissionsDTO) =>
+    ["user-permissions", { orgId }] as const,
+  getUserProjectPermissions: ({ workspaceId }: TGetUserProjectPermissionDTO) =>
+    ["user-project-permissions", { workspaceId }] as const
+};
+
+const getRoles = async ({ orgId, workspaceId }: TGetRolesDTO) => {
+  const { data } = await apiRequest.get<{ data: { roles: TRole<typeof workspaceId>[] } }>(
+    "/api/v1/roles",
+    {
+      params: {
+        workspaceId,
+        orgId
+      }
+    }
+  );
+
+  return data.data.roles;
+};
+
+export const useGetRoles = ({ orgId, workspaceId }: TGetRolesDTO) =>
+  useQuery({
+    queryKey: roleQueryKeys.getRoles({ orgId, workspaceId }),
+    queryFn: () => getRoles({ orgId, workspaceId }),
+    enabled: Boolean(orgId)
+  });
+
+const getUserOrgPermissions = async ({ orgId }: TGetUserOrgPermissionsDTO) => {
+  const { data } = await apiRequest.get<{
+    data: { permissions: PackRule<RawRuleOf<MongoAbility<OrgPermissionSet>>>[] };
+  }>(`/api/v1/roles/organization/${orgId}/permissions`, {});
+
+  return data.data.permissions;
+};
+
+export const useGetUserOrgPermissions = ({ orgId }: TGetUserOrgPermissionsDTO) =>
+  useQuery({
+    queryKey: roleQueryKeys.getUserOrgPermissions({ orgId }),
+    queryFn: () => getUserOrgPermissions({ orgId }),
+    enabled: Boolean(orgId),
+    select: (data) => {
+      const rule = unpackRules<RawRuleOf<MongoAbility<OrgPermissionSet>>>(data);
+      const ability = createMongoAbility<OrgPermissionSet>(rule, { conditionsMatcher });
+      return ability;
+    }
+  });
+
+const getUserProjectPermissions = async ({ workspaceId }: TGetUserProjectPermissionDTO) => {
+  const { data } = await apiRequest.get<{
+    data: { permissions: PackRule<RawRuleOf<MongoAbility<OrgPermissionSet>>>[] };
+  }>(`/api/v1/roles/workspace/${workspaceId}/permissions`, {});
+
+  return data.data.permissions;
+};
+
+export const useGetUserProjectPermissions = ({ workspaceId }: TGetUserProjectPermissionDTO) =>
+  useQuery({
+    queryKey: roleQueryKeys.getUserProjectPermissions({ workspaceId }),
+    queryFn: () => getUserProjectPermissions({ workspaceId }),
+    enabled: Boolean(workspaceId),
+    select: (data) => {
+      const rule = unpackRules<RawRuleOf<MongoAbility<ProjectPermissionSet>>>(data);
+      const ability = createMongoAbility<ProjectPermissionSet>(rule, { conditionsMatcher });
+      return ability;
+    }
+  });

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

@@ -0,0 +1,57 @@
+export type TGetRolesDTO = {
+  orgId: string;
+  workspaceId?: string;
+};
+
+export type TRole<T extends string | undefined> = {
+  _id: string;
+  organization: string;
+  workspace: T;
+  name: string;
+  description: string;
+  slug: string;
+  permissions: T extends string ? TProjectPermission[] : TPermission[];
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type TPermission = {
+  conditions?: Record<string, any>;
+  action: string;
+  subject: string;
+};
+
+export type TProjectPermission = {
+  conditions?: Record<string, any>;
+  action: string;
+  subject: string;
+};
+
+export type TCreateRoleDTO<T extends string | undefined> = {
+  orgId: string;
+  workspaceId?: T;
+  name: string;
+  description?: string;
+  slug: string;
+  permissions: T extends string ? TProjectPermission[] : TPermission[];
+};
+
+export type TUpdateRoleDTO<T extends string | undefined> = {
+  orgId: string;
+  id: string;
+  workspaceId?: T;
+} & Partial<Omit<TCreateRoleDTO<T>, "orgId" | "workspaceId">>;
+
+export type TDeleteRoleDTO = {
+  orgId: string;
+  id: string;
+  workspaceId?: string;
+};
+
+export type TGetUserOrgPermissionsDTO = {
+  orgId: string;
+};
+
+export type TGetUserProjectPermissionDTO = {
+  workspaceId: string;
+};

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

@@ -8,6 +8,7 @@ import { apiRequest } from "@app/config/request";
 import { setAuthToken } from "@app/reactQuery";
 
 import { useUploadWsKey } from "../keys/queries";
+import { workspaceKeys } from "../workspace/queries";
 import {
   AddUserToOrgDTO,
   AddUserToWsDTO,
@@ -55,27 +56,27 @@ export const useRenameUser = () => {
 
   return useMutation<{}, {}, RenameUserDTO>({
     mutationFn: ({ newName }) =>
-      apiRequest.patch("/api/v2/users/me/name", { firstName: newName?.split(" ")[0], lastName: newName?.split(" ").slice(1).join(" ") }),
+      apiRequest.patch("/api/v2/users/me/name", {
+        firstName: newName?.split(" ")[0],
+        lastName: newName?.split(" ").slice(1).join(" ")
+      }),
     onSuccess: () => {
       queryClient.invalidateQueries(userKeys.getUser);
     }
   });
 };
 
-
 export const useUpdateUserAuthMethods = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({
-      authMethods
-    }: {
-      authMethods: AuthMethod[];
-    }) => {
-      const { data: { user } } = await apiRequest.put("/api/v2/users/me/auth-methods", { 
+    mutationFn: async ({ authMethods }: { authMethods: AuthMethod[] }) => {
+      const {
+        data: { user }
+      } = await apiRequest.put("/api/v2/users/me/auth-methods", {
         authMethods
       });
-      
+
       return user;
     },
     onSuccess: () => {
@@ -108,6 +109,7 @@ export const useGetOrgUsers = (orgId: string) =>
 // mutation
 export const useAddUserToWs = () => {
   const uploadWsKey = useUploadWsKey();
+  const queryClient = useQueryClient();
 
   return useMutation<{ data: AddUserToWsRes }, {}, AddUserToWsDTO>({
     mutationFn: ({ email, workspaceId }) =>
@@ -136,18 +138,20 @@ export const useAddUserToWs = () => {
         userId: data.invitee._id,
         workspaceId
       });
+
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceUsers(workspaceId));
     }
   });
 };
 
 export const useAddUserToOrg = () => {
   const queryClient = useQueryClient();
-  type Response  = {
+  type Response = {
     data: {
-      message: string, 
-      completeInviteLink: string | undefined
-    }
-  }
+      message: string;
+      completeInviteLink: string | undefined;
+    };
+  };
 
   return useMutation<Response, {}, AddUserToOrgDTO>({
     mutationFn: (dto) => {
@@ -164,7 +168,7 @@ export const useDeleteOrgMembership = () => {
 
   return useMutation<{}, {}, DeletOrgMembershipDTO>({
     mutationFn: ({ membershipId, orgId }) => {
-      return apiRequest.delete(`/api/v2/organizations/${orgId}/memberships/${membershipId}`)
+      return apiRequest.delete(`/api/v2/organizations/${orgId}/memberships/${membershipId}`);
     },
     onSuccess: (_, { orgId }) => {
       queryClient.invalidateQueries(userKeys.getOrgUsers(orgId));
@@ -177,9 +181,12 @@ export const useUpdateOrgUserRole = () => {
 
   return useMutation<{}, {}, UpdateOrgUserRoleDTO>({
     mutationFn: ({ organizationId, membershipId, role }) => {
-      return apiRequest.patch(`/api/v2/organizations/${organizationId}/memberships/${membershipId}`, {
-        role
-      });
+      return apiRequest.patch(
+        `/api/v2/organizations/${organizationId}/memberships/${membershipId}`,
+        {
+          role
+        }
+      );
     },
     onSuccess: (_, { organizationId }) => {
       queryClient.invalidateQueries(userKeys.getOrgUsers(organizationId));
@@ -218,64 +225,49 @@ export const useLogoutUser = () =>
   });
 
 export const useGetMyIp = () => {
- return useQuery({
+  return useQuery({
     queryKey: userKeys.myIp,
     queryFn: async () => {
-      const { data } = await apiRequest.get<{ ip: string; }>(
-        "/api/v1/users/me/ip"
-      );
+      const { data } = await apiRequest.get<{ ip: string }>("/api/v1/users/me/ip");
       return data.ip;
     },
     enabled: true
-  }); 
-}
+  });
+};
 
 export const useGetMyAPIKeys = () => {
   return useQuery({
     queryKey: userKeys.myAPIKeys,
     queryFn: async () => {
-      const { data } = await apiRequest.get<APIKeyData[]>(
-        "/api/v2/users/me/api-keys"
-      );
+      const { data } = await apiRequest.get<APIKeyData[]>("/api/v2/users/me/api-keys");
       return data;
     },
     enabled: true
   });
-}
+};
 
 export const useCreateAPIKey = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async ({
-      name,
-      expiresIn
-    }: {
-      name: string;
-      expiresIn: number;
-    }) => {
-      const { data } = await apiRequest.post<CreateAPIKeyRes>(
-        "/api/v2/users/me/api-keys",
-        {
-          name,
-          expiresIn
-        }
-      );
-      
+    mutationFn: async ({ name, expiresIn }: { name: string; expiresIn: number }) => {
+      const { data } = await apiRequest.post<CreateAPIKeyRes>("/api/v2/users/me/api-keys", {
+        name,
+        expiresIn
+      });
+
       return data;
     },
     onSuccess() {
       queryClient.invalidateQueries(userKeys.myAPIKeys);
     }
   });
-}
+};
 
 export const useDeleteAPIKey = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async (apiKeyDataId: string) => {
-      const { data } = await apiRequest.delete(
-        `/api/v2/users/me/api-keys/${apiKeyDataId}`
-      );
+      const { data } = await apiRequest.delete(`/api/v2/users/me/api-keys/${apiKeyDataId}`);
 
       return data;
     },
@@ -283,29 +275,25 @@ export const useDeleteAPIKey = () => {
       queryClient.invalidateQueries(userKeys.myAPIKeys);
     }
   });
-}
+};
 
 export const useGetMySessions = () => {
   return useQuery({
     queryKey: userKeys.mySessions,
     queryFn: async () => {
-      const { data } = await apiRequest.get<TokenVersion[]>(
-        "/api/v2/users/me/sessions"
-      );
+      const { data } = await apiRequest.get<TokenVersion[]>("/api/v2/users/me/sessions");
 
       return data;
     },
     enabled: true
   });
-}
+};
 
 export const useRevokeMySessions = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async () => {
-      const { data } = await apiRequest.delete(
-        "/api/v2/users/me/sessions"
-      );
+      const { data } = await apiRequest.delete("/api/v2/users/me/sessions");
 
       return data;
     },
@@ -313,22 +301,17 @@ export const useRevokeMySessions = () => {
       queryClient.invalidateQueries(userKeys.mySessions);
     }
   });
-}
+};
 
 export const useUpdateMfaEnabled = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async ({
-      isMfaEnabled
-    }: {
-      isMfaEnabled: boolean;
-    }) => {
-      const { data: { user } } = await apiRequest.patch(
-        "/api/v2/users/me/mfa",
-        {
-          isMfaEnabled
-        }
-      );
+    mutationFn: async ({ isMfaEnabled }: { isMfaEnabled: boolean }) => {
+      const {
+        data: { user }
+      } = await apiRequest.patch("/api/v2/users/me/mfa", {
+        isMfaEnabled
+      });
 
       return user;
     },
@@ -336,15 +319,15 @@ export const useUpdateMfaEnabled = () => {
       queryClient.invalidateQueries(userKeys.getUser);
     }
   });
-}
+};
 
 export const fetchMyOrganizationProjects = async (orgId: string) => {
-  const { data: { workspaces } } = await apiRequest.get(
-    `/api/v1/organization/${orgId}/my-workspaces`
-  );
+  const {
+    data: { workspaces }
+  } = await apiRequest.get(`/api/v1/organization/${orgId}/my-workspaces`);
 
   return workspaces;
-}
+};
 
 export const useGetMyOrganizationProjects = (orgId: string) => {
   return useQuery({
@@ -354,4 +337,4 @@ export const useGetMyOrganizationProjects = (orgId: string) => {
     },
     enabled: true
   });
-}
+};

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

@@ -1,8 +1,8 @@
 import { UserWsKeyPair } from "../keys/types";
 
 export enum AuthMethod {
-	EMAIL = "email",
-	GOOGLE = "google",
+  EMAIL = "email",
+  GOOGLE = "google",
   GITHUB = "github",
   GITLAB = "gitlab",
 	OKTA_SAML = "okta-saml",
@@ -43,11 +43,14 @@ export type OrgUser = {
   };
   inviteEmail: string;
   organization: string;
-  role: "owner" | "admin" | "member";
+  role: "owner" | "admin" | "member" | "custom";
   status: "invited" | "accepted" | "verified" | "completed";
   deniedPermissions: any[];
+  customRole: string;
 };
 
+export type TWorkspaceUser = OrgUser;
+
 export type AddUserToWsDTO = {
   workspaceId: string;
   email: string;
@@ -77,7 +80,7 @@ export type AddUserToOrgDTO = {
 export type CreateAPIKeyRes = {
   apiKey: string;
   apiKeyData: APIKeyData;
-}
+};
 
 export type RenameUserDTO = {
   newName: string;
@@ -90,7 +93,7 @@ export type APIKeyData = {
   lastUsed: string;
   createdAt: string;
   expiresAt: string;
-}
+};
 
 export type TokenVersion = {
   _id: string;
@@ -100,4 +103,4 @@ export type TokenVersion = {
   lastUsed: string;
   createdAt: string;
   updatedAt: string;
-}
+};

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

@@ -5,6 +5,7 @@ import { apiRequest } from "@app/config/request";
 import { IntegrationAuth } from "../integrationAuth/types";
 import { TIntegration } from "../integrations/types";
 import { EncryptedSecret } from "../secrets/types";
+import { TWorkspaceUser } from "../users/types";
 import {
   CreateEnvironmentDTO,
   CreateWorkspaceDTO,
@@ -173,16 +174,17 @@ export const createWorkspace = ({
   workspaceName
 }: CreateWorkspaceDTO): Promise<{ data: { workspace: Workspace } }> => {
   return apiRequest.post("/api/v1/workspace", { workspaceName, organizationId });
-}
+};
 
 export const useCreateWorkspace = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{ data: { workspace: Workspace } }, {}, CreateWorkspaceDTO>({
-    mutationFn: async ({ organizationId, workspaceName }) => createWorkspace({
-      organizationId,
-      workspaceName
-    }),
+    mutationFn: async ({ organizationId, workspaceName }) =>
+      createWorkspace({
+        organizationId,
+        workspaceName
+      }),
     onSuccess: () => {
       queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
     }
@@ -296,32 +298,30 @@ export const useGetWorkspaceUsers = (workspaceId: string) => {
   return useQuery({
     queryKey: workspaceKeys.getWorkspaceUsers(workspaceId),
     queryFn: async () => {
-      const { data: { users } } = await apiRequest.get(
+      const {
+        data: { users }
+      } = await apiRequest.get<{ users: TWorkspaceUser[] }>(
         `/api/v1/workspace/${workspaceId}/users`
       );
       return users;
     },
     enabled: true
   });
-}
+};
 
 export const useAddUserToWorkspace = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({
-      email,
-      workspaceId
-    }: {
-      email: string;
-      workspaceId: string;
-    }) => {
-      const { data: { invitee, latestKey } } = await apiRequest.post(`/api/v1/workspace/${workspaceId}/invite-signup`, { email });
-      
-      return ({
+    mutationFn: async ({ email, workspaceId }: { email: string; workspaceId: string }) => {
+      const {
+        data: { invitee, latestKey }
+      } = await apiRequest.post(`/api/v1/workspace/${workspaceId}/invite-signup`, { email });
+
+      return {
         invitee,
         latestKey
-      });
+      };
     },
     onSuccess: (_, dto) => {
       queryClient.invalidateQueries(workspaceKeys.getWorkspaceUsers(dto.workspaceId));
@@ -334,7 +334,9 @@ export const useDeleteUserFromWorkspace = () => {
 
   return useMutation({
     mutationFn: async (membershipId: string) => {
-      const { data: { deletedMembership } } = await apiRequest.delete(`/api/v1/membership/${membershipId}`);
+      const {
+        data: { deletedMembership }
+      } = await apiRequest.delete(`/api/v1/membership/${membershipId}`);
       return deletedMembership;
     },
     onSuccess: (res) => {
@@ -346,14 +348,10 @@ export const useDeleteUserFromWorkspace = () => {
 export const useUpdateUserWorkspaceRole = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async ({
-      membershipId,
-      role
-    }: {
-      membershipId: string;
-      role: string;
-    }) => {
-      const { data: { membership } } = await apiRequest.post(`/api/v1/membership/${membershipId}/change-role`, {
+    mutationFn: async ({ membershipId, role }: { membershipId: string; role: string }) => {
+      const {
+        data: { membership }
+      } = await apiRequest.post(`/api/v1/membership/${membershipId}/change-role`, {
         role
       });
       return membership;

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -31,6 +31,7 @@ import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
 import onboardingCheck from "@app/components/utilities/checks/OnboardingCheck";
 import { tempLocalStorage } from "@app/components/utilities/checks/tempLocalStorage";
 import { encryptAssymmetric } from "@app/components/utilities/cryptography/crypto";
@@ -50,7 +51,14 @@ import {
   SelectItem,
   UpgradePlanModal
 } from "@app/components/v2";
-import { useOrganization, useSubscription, useUser, useWorkspace } from "@app/context";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useSubscription,
+  useUser,
+  useWorkspace
+} from "@app/context";
 import { usePopUp } from "@app/hooks";
 import {
   fetchOrgUsers,
@@ -130,18 +138,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
 
   const { t } = useTranslation();
 
-  useEffect(() => {
-    const handleRouteChange = () => {
-      window.Intercom("update");
-    };
-
-    router.events.on("routeChangeComplete", handleRouteChange);
-
-    return () => {
-      router.events.off("routeChangeComplete", handleRouteChange);
-    };
-  }, []);
-
   const logout = useLogoutUser();
   const logOutUser = async () => {
     try {
@@ -406,22 +402,30 @@ export const AppLayout = ({ children }: LayoutProps) => {
                         </div>
                         <hr className="mt-1 mb-1 h-px border-0 bg-gray-700" />
                         <div className="w-full">
-                          <Button
-                            className="w-full bg-mineshaft-700 py-2 text-bunker-200"
-                            colorSchema="primary"
-                            variant="outline_bg"
-                            size="sm"
-                            onClick={() => {
-                              if (isAddingProjectsAllowed) {
-                                handlePopUpOpen("addNewWs");
-                              } else {
-                                handlePopUpOpen("upgradePlan");
-                              }
-                            }}
-                            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Create}
+                            a={OrgPermissionSubjects.Workspace}
                           >
-                            Add Project
-                          </Button>
+                            {(isAllowed) => (
+                              <Button
+                                className="w-full bg-mineshaft-700 py-2 text-bunker-200"
+                                colorSchema="primary"
+                                variant="outline_bg"
+                                size="sm"
+                                isDisabled={!isAllowed}
+                                onClick={() => {
+                                  if (isAddingProjectsAllowed) {
+                                    handlePopUpOpen("addNewWs");
+                                  } else {
+                                    handlePopUpOpen("upgradePlan");
+                                  }
+                                }}
+                                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                              >
+                                Add Project
+                              </Button>
+                            )}
+                          </OrgPermissionCan>
                         </div>
                       </Select>
                     </div>
@@ -441,7 +445,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                         <a>
                           <MenuItem
                             isSelected={router.asPath.includes(
-                              `/project/${currentWorkspace?._id}/secrets/overview`
+                              `/project/${currentWorkspace?._id}/secrets`
                             )}
                             icon="system-outline-90-lock-closed"
                           >
@@ -464,7 +468,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                       <Link href={`/integrations/${currentWorkspace?._id}`} passHref>
                         <a>
                           <MenuItem
-                            isSelected={router.asPath === `/integrations/${currentWorkspace?._id}`}
+                            isSelected={router.asPath.includes("/integrations")}
                             icon="system-outline-82-extension"
                           >
                             {t("nav.menu.integrations")}
@@ -495,29 +499,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
                           </MenuItem>
                         </a>
                       </Link>
-                      {/* <Link href={`/project/${currentWorkspace?._id}/logs`} passHref>
-                        <a>
-                          <MenuItem
-                            isSelected={
-                              router.asPath === `/project/${currentWorkspace?._id}/logs`
-                            }
-                            icon="system-outline-168-view-headline"
-                          >
-                            Audit Logs
-                          </MenuItem>
-                        </a>
-                      </Link> */}
-                      {/* <Link href={`/project/${currentWorkspace?._id}/secret-scanning`} passHref>
-                      <a>
-                        <MenuItem
-                          isSelected={router.asPath === `/project/${currentWorkspace?._id}/secret-scanning`}
-                          // icon={<FontAwesomeIcon icon={faFileLines} size="lg" />}
-                          icon="system-outline-82-extension"
-                        >
-                          Audit Logs
-                        </MenuItem>
-                      </a>
-                    </Link> */}
                       <Link href={`/project/${currentWorkspace?._id}/settings`} passHref>
                         <a>
                           <MenuItem
@@ -734,16 +715,26 @@ export const AppLayout = ({ children }: LayoutProps) => {
                   <Controller
                     control={control}
                     name="addMembers"
-                    defaultValue
+                    defaultValue={false}
                     render={({ field: { onBlur, value, onChange } }) => (
-                      <Checkbox
-                        id="add-project-layout"
-                        isChecked={value}
-                        onCheckedChange={onChange}
-                        onBlur={onBlur}
+                      <OrgPermissionCan
+                        I={OrgPermissionActions.Read}
+                        a={OrgPermissionSubjects.Member}
                       >
-                        Add all members of my organization to this project
-                      </Checkbox>
+                        {(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>

frontend/src/pages/_app.tsx

@@ -12,13 +12,14 @@ import { QueryClientProvider } from "@tanstack/react-query";
 import NProgress from "nprogress";
 
 import NotificationProvider from "@app/components/context/Notifications/NotificationProvider";
-import { IntercomProvider } from "@app/components/utilities/intercom/intercomProvider";
 import Telemetry from "@app/components/utilities/telemetry/Telemetry";
 import { TooltipProvider } from "@app/components/v2";
 import { publicPaths } from "@app/const";
 import {
   AuthProvider,
+  OrgPermissionProvider,
   OrgProvider,
+  ProjectPermissionProvider,
   SubscriptionProvider,
   UserProvider,
   WorkspaceProvider
@@ -47,7 +48,6 @@ const App = ({ Component, pageProps, ...appProps }: NextAppProp): JSX.Element =>
     const telemetry = new Telemetry().getInstance();
 
     const handleRouteChange = () => {
-      // (window).Intercom('update');
       if (typeof window !== "undefined") {
         telemetry.capture("$pageview");
       }
@@ -97,19 +97,21 @@ const App = ({ Component, pageProps, ...appProps }: NextAppProp): JSX.Element =>
       <TooltipProvider>
         <AuthProvider>
           <OrgProvider>
-            <WorkspaceProvider>
-              <SubscriptionProvider>
-                <UserProvider>
-                  <NotificationProvider>
-                    <IntercomProvider>
-                      <AppLayout>
-                        <Component {...pageProps} />
-                      </AppLayout>
-                    </IntercomProvider>
-                  </NotificationProvider>
-                </UserProvider>
-              </SubscriptionProvider>
-            </WorkspaceProvider>
+            <OrgPermissionProvider>
+              <WorkspaceProvider>
+                <ProjectPermissionProvider>
+                  <SubscriptionProvider>
+                    <UserProvider>
+                      <NotificationProvider>
+                        <AppLayout>
+                          <Component {...pageProps} />
+                        </AppLayout>
+                      </NotificationProvider>
+                    </UserProvider>
+                  </SubscriptionProvider>
+                </ProjectPermissionProvider>
+              </WorkspaceProvider>
+            </OrgPermissionProvider>
           </OrgProvider>
         </AuthProvider>
       </TooltipProvider>

frontend/src/pages/integrations/aws-parameter-store/authorize.tsx

@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
   useSaveIntegrationAccessToken
@@ -39,9 +44,7 @@ export default function AWSParameterStoreAuthorizeIntegrationPage() {
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "aws-parameter-store",
         accessId: accessKey,
-        accessToken: accessSecretKey,
-        url: null,
-        namespace: null
+        accessToken: accessSecretKey
       });
 
       setAccessKey("");
@@ -58,12 +61,41 @@ export default function AWSParameterStoreAuthorizeIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="mb-4 text-center">AWS Parameter Store Integration</CardTitle>
+      <Head>
+        <title>Authorize AWS Parameter Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding the details below, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Amazon Web Services.png"
+                height={35}
+                width={35}
+                alt="AWS logo"
+              />
+            </div>
+            <span className="ml-1.5">AWS Parameter Store Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/aws-parameter-store" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
         <FormControl
           label="Access Key ID"
           errorText={accessKeyErrorText}
           isError={accessKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input 
             placeholder="" 
@@ -75,6 +107,7 @@ export default function AWSParameterStoreAuthorizeIntegrationPage() {
           label="Secret Access Key"
           errorText={accessSecretKeyErrorText}
           isError={accessSecretKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder=""
@@ -84,8 +117,9 @@ export default function AWSParameterStoreAuthorizeIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
           Connect to AWS Parameter Store

frontend/src/pages/integrations/aws-parameter-store/create.tsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -57,7 +62,7 @@ export default function AWSParameterStoreCreateIntegrationPage() {
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
-  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuth, isLoading: isintegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
 
   const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
   const [secretPath, setSecretPath] = useState("/");
@@ -97,14 +102,7 @@ export default function AWSParameterStoreCreateIntegrationPage() {
       await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
-        app: null,
-        appId: null,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
         path,
         region: selectedAWSRegion,
         secretPath
@@ -120,10 +118,38 @@ export default function AWSParameterStoreCreateIntegrationPage() {
   };
 
   return integrationAuth && workspace && selectedSourceEnvironment ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">AWS Parameter Store Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up AWS Parameter Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment in Infisical you want to sync to secerts in AWS Parameter Store."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Amazon Web Services.png"
+                height={35}
+                width={35}
+                alt="AWS logo"
+              />
+            </div>
+            <span className="ml-1.5">AWS Parameter Store Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/aws-parameter-store" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -139,14 +165,14 @@ export default function AWSParameterStoreCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <FormControl label="Secrets Path" className="px-6">
           <Input
             value={secretPath}
             onChange={(evt) => setSecretPath(evt.target.value)}
             placeholder="Provide a path, default is /"
           />
         </FormControl>
-        <FormControl label="AWS Region">
+        <FormControl label="AWS Region" className="px-6">
           <Select
             value={selectedAWSRegion}
             onValueChange={(val) => setSelectedAWSRegion(val)}
@@ -159,7 +185,7 @@ export default function AWSParameterStoreCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Path" errorText={pathErrorText} isError={pathErrorText !== "" ?? false}>
+        <FormControl label="Path" errorText={pathErrorText} isError={pathErrorText !== "" ?? false} className="px-6">
           <Input
             placeholder={`/${workspace.name
               .toLowerCase()
@@ -171,15 +197,39 @@ export default function AWSParameterStoreCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6"
           isLoading={isLoading}
         >
           Create Integration
         </Button>
       </Card>
+      <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
+        <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
+        <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in AWS Parameter Store with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up AWS Parameter Store Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isintegrationAuthLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
+        <p>
+          Something went wrong. Please contact <a
+            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:[email protected]"
+          >
+            support@infisical.com
+          </a> if the issue persists.
+        </p>
+      </div>}
+    </div>
   );
 }
 

frontend/src/pages/integrations/aws-secret-manager/authorize.tsx

@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useSaveIntegrationAccessToken } from "@app/hooks/api";
 
@@ -37,9 +42,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "aws-secret-manager",
         accessId: accessKey,
-        accessToken: accessSecretKey,
-        url: null,
-        namespace: null
+        accessToken: accessSecretKey
       });
 
       setAccessKey("");
@@ -56,12 +59,41 @@ export default function AWSSecretManagerCreateIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="mb-4 text-center">AWS Secret Manager Integration</CardTitle>
+      <Head>
+        <title>Authorize AWS Secrets Manager Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding the details below, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Amazon Web Services.png"
+                height={35}
+                width={35}
+                alt="AWS logo"
+              />
+            </div>
+            <span className="ml-1.5">AWS Secrets Manager Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/aws-secret-manager" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
         <FormControl
           label="Access Key ID"
           errorText={accessKeyErrorText}
           isError={accessKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input placeholder="" value={accessKey} onChange={(e) => setAccessKey(e.target.value)} />
         </FormControl>
@@ -69,6 +101,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
           label="Secret Access Key"
           errorText={accessSecretKeyErrorText}
           isError={accessSecretKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder=""
@@ -78,11 +111,12 @@ export default function AWSSecretManagerCreateIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
-          Connect to AWS Secret Manager
+          Connect to AWS Secrets Manager
         </Button>
       </Card>
     </div>

frontend/src/pages/integrations/aws-secret-manager/create.tsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -57,7 +62,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
-  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuth, isLoading: isintegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
 
   const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
   const [secretPath, setSecretPath] = useState("/");
@@ -97,14 +102,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetSecretName.trim(),
-        appId: null,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
         region: selectedAWSRegion,
         secretPath
       });
@@ -119,10 +117,38 @@ export default function AWSSecretManagerCreateIntegrationPage() {
   };
 
   return integrationAuth && workspace && selectedSourceEnvironment ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">AWS Secret Manager Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up AWS Secrets Manager Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment in Infisical you want to sync to secerts in AWS Secrets Manager."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Amazon Web Services.png"
+                height={35}
+                width={35}
+                alt="AWS logo"
+              />
+            </div>
+            <span className="ml-1.5">AWS Secrets Manager Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/aws-secret-manager" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -138,14 +164,14 @@ export default function AWSSecretManagerCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <FormControl label="Secrets Path" className="px-6">
           <Input
             value={secretPath}
             onChange={(evt) => setSecretPath(evt.target.value)}
             placeholder="Provide a path, default is /"
           />
         </FormControl>
-        <FormControl label="AWS Region">
+        <FormControl label="AWS Region" className="px-6">
           <Select
             value={selectedAWSRegion}
             onValueChange={(val) => setSelectedAWSRegion(val)}
@@ -162,6 +188,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
           label="AWS SM Secret Name"
           errorText={targetSecretNameErrorText}
           isError={targetSecretNameErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder={`${workspace.name
@@ -174,15 +201,39 @@ export default function AWSSecretManagerCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6"
           isLoading={isLoading}
         >
           Create Integration
         </Button>
       </Card>
+      <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
+        <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
+        <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in AWS Secrets Manager with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up AWS Secrets Manager Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isintegrationAuthLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
+        <p>
+          Something went wrong. Please contact <a
+            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:[email protected]"
+          >
+            support@infisical.com
+          </a> if the issue persists.
+        </p>
+      </div>}
+    </div>
   );
 }
 

frontend/src/pages/integrations/azure-key-vault/create.tsx

@@ -60,15 +60,7 @@ export default function AzureKeyVaultCreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: vaultBaseUrl,
-        appId: null,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
       setIsLoading(false);

frontend/src/pages/integrations/bitbucket/create.tsx

@@ -91,11 +91,6 @@ export default function BitBucketCreateIntegrationPage() {
         sourceEnvironment: selectedSourceEnvironment,
         targetEnvironment: targetEnvironment.name,
         targetEnvironmentId: targetEnvironment.slug,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
 

frontend/src/pages/integrations/checkly/authorize.tsx

@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
   useSaveIntegrationAccessToken
@@ -28,10 +33,7 @@ export default function ChecklyCreateIntegrationPage() {
       const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "checkly",
-        accessId: null,
-        accessToken,
-        url: null,
-        namespace: null
+        accessToken
       });
 
       setIsLoading(false);
@@ -44,8 +46,36 @@ export default function ChecklyCreateIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
+      <Head>
+        <title>Authorize Checkly Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
       <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
-        <CardTitle className="text-left px-6" subTitle="After adding your API-key, you will be prompted to set up an integration for a particular Infisical project and environment.">Checkly Integration</CardTitle>
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding your API key, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Checkly.png"
+                height={30}
+                width={30}
+                alt="Checkly logo"
+              />
+            </div>
+            <span className="ml-2.5">Checkly Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/checkly" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
         <FormControl
           label="Checkly API key"
           errorText={accessTokenErrorText}
@@ -60,7 +90,7 @@ export default function ChecklyCreateIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
+          colorSchema="primary"
           variant="outline_bg"
           className="mb-6 mt-2 ml-auto mr-6 w-min"
           isFullWidth={false}

frontend/src/pages/integrations/checkly/create.tsx

@@ -1,5 +1,11 @@
 import { useEffect, useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { motion } from "framer-motion";
 import queryString from "query-string";
 
 import {
@@ -9,7 +15,11 @@ import {
   FormControl,
   Input,
   Select,
-  SelectItem
+  SelectItem,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
 } from "@app/components/v2";
 import {
   useCreateIntegration
@@ -21,6 +31,11 @@ import {
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
 
+enum TabSections {
+  Connection = "connection",
+  Options = "options"
+}
+
 export default function ChecklyCreateIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
@@ -29,7 +44,7 @@ export default function ChecklyCreateIntegrationPage() {
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -72,13 +87,6 @@ export default function ChecklyCreateIntegrationPage() {
         app: targetApp,
         appId: targetAppId,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath,
         metadata: {
           secretSuffix
@@ -98,81 +106,156 @@ export default function ChecklyCreateIntegrationPage() {
     selectedSourceEnvironment &&
     integrationAuthApps &&
     targetApp ? (
-    <div className="flex h-full w-full items-center justify-center bg-gradient-to-tr from-mineshaft-900 to-bunker-900">
+    <div className="flex flex-col h-full w-full items-center justify-center bg-gradient-to-tr from-mineshaft-900 to-bunker-900">
+      <Head>
+        <title>Set Up Checkly Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
       <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
-        <CardTitle
-          className="px-6 text-left"
-          subTitle="Choose which environment in Infisical you want to sync with your Checkly account."
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment in Infisical you want to sync to Checkly environment variables."
         >
-          Checkly Integration
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Checkly.png"
+                height={30}
+                width={30}
+                alt="Checkly logo"
+              />
+            </div>
+            <span className="ml-2.5">Checkly Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/checkly" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
         </CardTitle>
-        <FormControl label="Infisical Project Environment" className="mt-4 px-6">
-          <Select
-            value={selectedSourceEnvironment}
-            onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
-          >
-            {workspace?.environments.map((sourceEnvironment) => (
-              <SelectItem
-                value={sourceEnvironment.slug}
-                key={`source-environment-${sourceEnvironment.slug}`}
-              >
-                {sourceEnvironment.name}
-              </SelectItem>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl label="Secrets Path" className="mt-4 px-6">
-          <Input
-            value={secretPath}
-            onChange={(evt) => setSecretPath(evt.target.value)}
-            placeholder="Provide a path, default is /"
-          />
-        </FormControl>
-        <FormControl label="Checkly Account" className="mt-4 px-6">
-          <Select
-            value={targetApp}
-            onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
-            isDisabled={integrationAuthApps.length === 0}
-          >
-            {integrationAuthApps.length > 0 ? (
-              integrationAuthApps.map((integrationAuthApp) => (
-                <SelectItem
-                  value={integrationAuthApp.name}
-                  key={`target-app-${integrationAuthApp.name}`}
+        <Tabs defaultValue={TabSections.Connection} className="px-6">
+          <TabList>
+            <div className="flex flex-row border-b border-mineshaft-600 w-full">
+              <Tab value={TabSections.Connection}>Connection</Tab>
+              <Tab value={TabSections.Options}>Options</Tab>
+            </div>
+          </TabList>
+          <TabPanel value={TabSections.Connection}>
+            <motion.div
+              key="panel-1"
+              transition={{ duration: 0.15 }}
+              initial={{ opacity: 0, translateX: 30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: 30 }}
+            >
+              <FormControl label="Infisical Project Environment">
+                <Select
+                  value={selectedSourceEnvironment}
+                  onValueChange={(val) => setSelectedSourceEnvironment(val)}
+                  className="w-full border border-mineshaft-500"
                 >
-                  {integrationAuthApp.name}
-                </SelectItem>
-              ))
-            ) : (
-              <SelectItem value="none" key="target-app-none">
-                No apps found
-              </SelectItem>
-            )}
-          </Select>
-        </FormControl>
-        <FormControl label="Append the Secret Name with..." className="mt-4 px-6">
-          <Input
-            value={secretSuffix}
-            onChange={(evt) => setSecretSuffix(evt.target.value)}
-            placeholder="Provide a suffix for secret names, default is no suffix"
-          />
-        </FormControl>
+                  {workspace?.environments.map((sourceEnvironment) => (
+                    <SelectItem
+                      value={sourceEnvironment.slug}
+                      key={`source-environment-${sourceEnvironment.slug}`}
+                    >
+                      {sourceEnvironment.name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl label="Secrets Path">
+                <Input
+                  value={secretPath}
+                  onChange={(evt) => setSecretPath(evt.target.value)}
+                  placeholder="Provide a path, default is /"
+                />
+              </FormControl>
+              <FormControl label="Checkly Account">
+                <Select
+                  value={targetApp}
+                  onValueChange={(val) => setTargetApp(val)}
+                  className="w-full border border-mineshaft-500"
+                  isDisabled={integrationAuthApps.length === 0}
+                >
+                  {integrationAuthApps.length > 0 ? (
+                    integrationAuthApps.map((integrationAuthApp) => (
+                      <SelectItem
+                        value={integrationAuthApp.name}
+                        key={`target-app-${integrationAuthApp.name}`}
+                      >
+                        {integrationAuthApp.name}
+                      </SelectItem>
+                    ))
+                  ) : (
+                    <SelectItem value="none" key="target-app-none">
+                      No apps found
+                    </SelectItem>
+                  )}
+                </Select>
+              </FormControl>
+            </motion.div>
+          </TabPanel>
+          <TabPanel value={TabSections.Options}>
+            <motion.div
+              key="panel-1"
+              transition={{ duration: 0.15 }}
+              initial={{ opacity: 0, translateX: -30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: 30 }}
+            >
+              <FormControl label="Append Secret Names with..." className="pb-[9.75rem]">
+                <Input
+                  value={secretSuffix}
+                  onChange={(evt) => setSecretSuffix(evt.target.value)}
+                  placeholder="Provide a suffix for secret names, default is no suffix"
+                />
+              </FormControl>
+            </motion.div>
+          </TabPanel>
+        </Tabs>
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mt-2 mb-6 ml-auto mr-6"
+          className="mb-6 ml-auto mr-6"
           isFullWidth={false}
           isLoading={isLoading}
         >
           Create Integration
         </Button>
       </Card>
+      <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
+        <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
+        <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in Checkly with secrets from Infisical.</span>
+        <span className="text-mineshaft-300 text-sm mt-4">If you have multiple Checkly integrations and are using suffixes for at least one of them, you will have to add suffixes for all the active Checkly integrations – otherwise you might run into rare unexpected behavior.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up Checkly Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isIntegrationAuthAppsLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
+        <p>
+          Something went wrong. Please contact <a
+            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:[email protected]"
+          >
+            support@infisical.com
+          </a> if the issue persists.
+        </p>
+      </div>}
+    </div>
   );
 }
 

frontend/src/pages/integrations/circleci/authorize.tsx

@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
   useSaveIntegrationAccessToken
@@ -28,10 +33,7 @@ export default function CircleCICreateIntegrationPage() {
       const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "circleci",
-        accessToken: apiKey,
-        accessId: null,
-        url: null,
-        namespace:null
+        accessToken: apiKey
       });
 
       setIsLoading(false);
@@ -44,19 +46,49 @@ export default function CircleCICreateIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">CircleCI Integration</CardTitle>
+      <Head>
+        <title>Authorize CircleCI Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding your API Token, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Circle CI.png"
+                height={30}
+                width={30}
+                alt="CircleCI logo"
+              />
+            </div>
+            <span className="ml-1.5">CircleCI Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cicd/circleci" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
         <FormControl
           label="CircleCI API Token"
           errorText={apiKeyErrorText}
           isError={apiKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input placeholder="" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
           Connect to CircleCI

frontend/src/pages/integrations/circleci/create.tsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -28,8 +33,8 @@ export default function CircleCICreateIntegrationPage() {
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
-  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+  const { data: integrationAuth, isLoading: isintegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -66,17 +71,8 @@ export default function CircleCICreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,
-        appId:
-          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
-            ?.appId ?? null,
+        appId: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)?.appId,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
 
@@ -93,10 +89,38 @@ export default function CircleCICreateIntegrationPage() {
     selectedSourceEnvironment &&
     integrationAuthApps &&
     targetApp ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">CircleCI Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up CircleCI Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment or folder in Infisical you want to sync to CircleCI environment variables."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Circle CI.png"
+                height={30}
+                width={30}
+                alt="CircleCI logo"
+              />
+            </div>
+            <span className="ml-1.5">CircleCI Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cicd/circleci" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -112,14 +136,14 @@ export default function CircleCICreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <FormControl label="Secrets Path" className="px-6">
           <Input
             value={secretPath}
             onChange={(evt) => setSecretPath(evt.target.value)}
             placeholder="Provide a path, default is /"
           />
         </FormControl>
-        <FormControl label="CircleCI Project" className="mt-4">
+        <FormControl label="CircleCI Project" className="px-6">
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
@@ -144,17 +168,41 @@ export default function CircleCICreateIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
+      <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
+        <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
+        <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in CircleCI with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up CircleCI Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isIntegrationAuthAppsLoading || isintegrationAuthLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
+        <p>
+          Something went wrong. Please contact <a
+            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:[email protected]"
+          >
+            support@infisical.com
+          </a> if the issue persists.
+        </p>
+      </div>}
+    </div>
   );
 }
 

frontend/src/pages/integrations/cloud-66/authorize.tsx

@@ -28,10 +28,7 @@ export default function Cloud66CreateIntegrationPage() {
       const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "cloud-66",
-        accessId: null,
-        accessToken: apiKey,
-        url: null,
-        namespace: null
+        accessToken: apiKey
       });
 
       setIsLoading(false);

frontend/src/pages/integrations/cloud-66/create.tsx

@@ -64,17 +64,8 @@ export default function Cloud66CreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,
-        appId:
-          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
-            ?.appId ?? null,
+        appId: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)?.appId,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
 

frontend/src/pages/integrations/cloudflare-pages/authorize.tsx

@@ -33,9 +33,7 @@ export default function CloudflarePagesIntegrationPage() {
                 workspaceId: localStorage.getItem("projectData.id"),
                 integration: "cloudflare-pages",
                 accessId: accountId,
-                accessToken: accessKey,
-                url: null,
-                namespace: null
+                accessToken: accessKey
             });
 
             setAccessKey("");

frontend/src/pages/integrations/cloudflare-pages/create.tsx

@@ -64,12 +64,6 @@ export default function CloudflarePagesIntegrationPage() {
                 appId: targetAppId,
                 sourceEnvironment: selectedSourceEnvironment,
                 targetEnvironment,
-                targetEnvironmentId: null,
-                targetService: null,
-                targetServiceId: null,
-                owner: null,
-                path: null,
-                region: null,
                 secretPath: "/",
             });
 

frontend/src/pages/integrations/codefresh/authorize.tsx

@@ -28,10 +28,7 @@ export default function CodefreshCreateIntegrationPage() {
       const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "codefresh",
-        accessId: null,
-        accessToken: apiKey,
-        url: null,
-        namespace: null
+        accessToken: apiKey
       });
 
       setIsLoading(false);

frontend/src/pages/integrations/codefresh/create.tsx

@@ -64,17 +64,8 @@ export default function CodefreshCreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,
-        appId:
-          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
-            ?.appId ?? null,
+        appId: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)?.appId,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
 

frontend/src/pages/integrations/digital-ocean-app-platform/authorize.tsx

@@ -28,10 +28,7 @@ export default function DigitalOceanAppPlatformCreateIntegrationPage() {
       const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "digital-ocean-app-platform",
-        accessId: null,
-        accessToken: apiKey,
-        url: null,
-        namespace: null
+        accessToken: apiKey
       });
 
       setIsLoading(false);

frontend/src/pages/integrations/digital-ocean-app-platform/create.tsx

@@ -64,17 +64,8 @@ export default function DigitalOceanAppPlatformCreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,
-        appId:
-          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
-            ?.appId ?? null,
+        appId: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)?.appId,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
 

frontend/src/pages/integrations/flyio/authorize.tsx

@@ -1,5 +1,13 @@
 import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 
 import {
   useSaveIntegrationAccessToken
@@ -7,67 +15,116 @@ import {
 
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
 
-export default function FlyioCreateIntegrationPage() {
+const schema = yup.object({
+  accessToken: yup.string().trim().required("Fly.io Access Token is required")
+});
+
+type FormData = yup.InferType<typeof schema>;
+
+export default function FlyioAuthorizeIntegrationPage() {
   const router = useRouter();
+
+  const {
+    control,
+    handleSubmit
+  } = useForm<FormData>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      accessToken: ""
+    }
+  });
+
   const { mutateAsync } = useSaveIntegrationAccessToken();
   
-  const [accessToken, setAccessToken] = useState("");
-  const [accessTokenErrorText, setAccessTokenErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
-
-  const handleButtonClick = async () => {
+  
+  const onFormSubmit = async ({
+    accessToken
+  }: FormData) => {
+    console.log("onFormSubmit accessToken: ", accessToken);
     try {
-      setAccessTokenErrorText("");
-      if (accessToken.length === 0) {
-        setAccessTokenErrorText("Access token cannot be blank");
-        return;
-      }
-
       setIsLoading(true);
-
+      
       const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "flyio",
-        accessId: null,
-        accessToken,
-        url: null,
-        namespace: null
+        accessToken
       });
-
+      
       setIsLoading(false);
-
       router.push(`/integrations/flyio/create?integrationAuthId=${integrationAuth._id}`);
     } catch (err) {
+      setIsLoading(false);
       console.error(err);
     }
-  };
+  }
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">Fly.io Integration</CardTitle>
-        <FormControl
-          label="Fly.io Access Token"
-          errorText={accessTokenErrorText}
-          isError={accessTokenErrorText !== "" ?? false}
+      <Head>
+        <title>Authorize Fly.io Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding your access token, you will be prompted to set up an integration for a particular Infisical project and environment."
         >
-          <Input
-            placeholder=""
-            value={accessToken}
-            onChange={(e) => setAccessToken(e.target.value)}
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Flyio.svg"
+                height={30}
+                width={30}
+                alt="Fly.io logo"
+              />
+            </div>
+            <span className="ml-2.5">Fly.io Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/flyio" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                    Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <form
+          onSubmit={handleSubmit(onFormSubmit)}
+          className="px-6 text-right pb-8"
+        >
+          <Controller
+            control={control}
+            name="accessToken"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Fly.io Access Token"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Input 
+                  {...field}
+                  placeholder="" 
+                />
+              </FormControl>
+            )}
           />
-        </FormControl>
-        <Button
-          onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
-          isLoading={isLoading}
-        >
-          Connect to Fly.io
-        </Button>
+          <Button
+            colorSchema="primary"
+            variant="outline_bg"
+            className="mt-2 w-min"
+            size="sm"
+            type="submit"
+            isLoading={isLoading}
+          >
+            Connect to Fly.io
+          </Button>
+        </form>
       </Card>
     </div>
   );
 }
 
-FlyioCreateIntegrationPage.requireAuth = true;
+FlyioAuthorizeIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/flyio/create.tsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -23,13 +28,14 @@ import { useGetWorkspaceById } from "../../../hooks/api/workspace";
 
 export default function FlyioCreateIntegrationPage() {
   const router = useRouter();
+  
   const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
-  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+  const { data: integrationAuth, isLoading: isIntegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -67,15 +73,7 @@ export default function FlyioCreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,
-        appId: null,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
 
@@ -92,10 +90,38 @@ export default function FlyioCreateIntegrationPage() {
     selectedSourceEnvironment &&
     integrationAuthApps &&
     targetApp ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">Fly.io Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up Fly.io Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment or folder in Infisical you want to sync to Fly.io environment variables."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Flyio.svg"
+                height={30}
+                width={30}
+                alt="Fly.io logo"
+              />
+            </div>
+            <span className="ml-2.5">Fly.io Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/flyio" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -111,14 +137,14 @@ export default function FlyioCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <FormControl label="Secrets Path" className="px-6">
           <Input
             value={secretPath}
             onChange={(evt) => setSecretPath(evt.target.value)}
             placeholder="Provide a path, default is /"
           />
         </FormControl>
-        <FormControl label="Fly.io App" className="mt-4">
+        <FormControl label="Fly.io App" className="px-6">
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
@@ -144,16 +170,40 @@ export default function FlyioCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
+      <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
+        <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
+        <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in Fly.io with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up Fly.io Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isIntegrationAuthLoading || isIntegrationAuthAppsLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
+        <p>
+          Something went wrong. Please contact <a
+            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:[email protected]"
+          >
+            support@infisical.com
+          </a> if the issue persists.
+        </p>
+      </div>}
+    </div>
   );
 }
 

frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx

@@ -0,0 +1,160 @@
+import crypto from "crypto";
+
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import {
+  useGetCloudIntegrations,
+  useSaveIntegrationAccessToken} from "@app/hooks/api";
+
+import { Button, Card, CardTitle, FormControl, TextArea } from "../../../components/v2";
+
+const schema = yup.object({
+  accessToken: yup.string().required("Service Account JSON cannot be empty")
+});
+
+type FormData = yup.InferType<typeof schema>;
+
+export default function GCPSecretManagerAuthorizeIntegrationPage() {
+  const router = useRouter();
+
+  const {
+    control,
+    handleSubmit
+  } = useForm<FormData>({
+    resolver: yupResolver(schema)
+  });
+
+  const { data: cloudIntegrations } = useGetCloudIntegrations();
+
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+  
+  const [isLoading, setIsLoading] = useState(false);
+  
+  const handleIntegrateWithOAuth = () => {
+    if (!cloudIntegrations) return;
+    const integrationOption = cloudIntegrations.find((integration) => integration.slug === "gcp-secret-manager");
+    
+    if (!integrationOption) return;
+    
+    const state = crypto.randomBytes(16).toString("hex");
+    localStorage.setItem("latestCSRFToken", state);
+    
+    const link = `https://accounts.google.com/o/oauth2/auth?scope=https://www.googleapis.com/auth/cloud-platform&response_type=code&access_type=offline&state=${state}&redirect_uri=${window.location.origin}/integrations/gcp-secret-manager/oauth2/callback&client_id=${integrationOption.clientId}`;
+    window.location.assign(link);
+  }
+  
+  const onFormSubmit = async ({
+    accessToken
+  }: FormData) => {
+    try {
+      setIsLoading(true);
+      
+      const integrationAuth = await mutateAsync({
+        workspaceId: localStorage.getItem("projectData.id"),
+        integration: "gcp-secret-manager",
+        refreshToken: accessToken
+      });
+      
+      setIsLoading(false);
+      router.push(`/integrations/gcp-secret-manager/create?integrationAuthId=${integrationAuth._id}`);
+    } catch (err) {
+      console.error(err);
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Head>
+        <title>Authorize GCP Secret Manager Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Connect Infisical to GCP Secret Manager to sync secrets."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Google Cloud Platform.png"
+                height={30}
+                width={30}
+                alt="GCP logo"
+              />
+            </div>
+            <span className="ml-1.5">GCP Secret Manager Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/gcp-secret-manager" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <div className="px-6">
+          <Button
+              colorSchema="primary" 
+              variant="outline_bg"
+              onClick={handleIntegrateWithOAuth}
+              leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
+              className="h-11 w-full mx-0 mt-4"
+          > 
+              Continue with OAuth
+          </Button>
+          <div className='w-full flex flex-row items-center my-4 py-2'>
+              <div className='w-full border-t border-mineshaft-400/40' /> 
+              <span className="mx-2 text-mineshaft-400 text-xs">or</span>
+              <div className='w-full border-t border-mineshaft-400/40' />
+          </div>
+        </div>
+        <form 
+          onSubmit={handleSubmit(onFormSubmit)}
+          className="px-6 text-right pb-8"
+        >
+          <Controller
+            control={control}
+            name="accessToken"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="GCP Service Account JSON"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <TextArea 
+                  {...field}
+                  className="h-48 border border-mineshaft-600 bg-bunker-900/80"
+                />
+              </FormControl>
+            )}
+          />
+          <Button
+            colorSchema="primary"
+            variant="outline_bg"
+            className="mt-2 w-min"
+            size="sm"
+            type="submit"
+            isLoading={isLoading}
+          >
+            Connect to GCP Secret Manager
+          </Button>
+        </form>
+      </Card>
+    </div>
+  );
+}
+
+GCPSecretManagerAuthorizeIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/gcp-secret-manager/create.tsx

@@ -1,7 +1,17 @@
 import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { motion } from "framer-motion";
 import queryString from "query-string";
+import * as yup from "yup";
 
+import { usePopUp } from "@app/hooks";
 import {
   useCreateIntegration
 } from "@app/hooks/api";
@@ -12,50 +22,114 @@ import {
   CardTitle,
   FormControl,
   Input,
+  Modal,
+  ModalContent,
   Select,
-  SelectItem
-} from "../../../components/v2";
+  SelectItem,
+  Switch,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs} from "../../../components/v2";
 import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
 
+enum TabSections {
+  Connection = "connection",
+  Options = "options"
+}
+
+const schema = yup.object({
+  selectedSourceEnvironment: yup.string().required("Source environment is required"),
+  secretPath: yup.string().required("Secret path is required"),
+  targetAppId: yup.string().required("GCP project is required"),
+  secretPrefix: yup.string().trim(),
+  secretSuffix: yup.string().trim(),
+  shouldLabel: yup.boolean(),
+  labelName: yup.string().trim(),
+  labelValue: yup.string().trim()
+});
+
+type FormData = yup.InferType<typeof schema>;
+
 export default function GCPSecretManagerCreateIntegrationPage() {
   const router = useRouter();
+  const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
+    "confirmIntegration"
+  ] as const);
+  
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    watch
+  } = useForm<FormData>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      secretPath: "/",
+      secretPrefix: "",
+      secretSuffix: "",
+      shouldLabel: false,
+      labelName: "managed-by",
+      labelValue: "infisical"
+    }
+  });
+  
+  const shouldLabel = watch("shouldLabel");
+  const selectedSourceEnvironment = watch("selectedSourceEnvironment");
+
   const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
-  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
-  const [targetAppId, setTargetAppId] = useState("");
-  const [secretPath, setSecretPath] = useState("/");
-
   const [isLoading, setIsLoading] = useState(false);
+  
+  useEffect(() => {
+    if (shouldLabel) {
+      setValue("labelName", "managed-by");
+      setValue("labelValue", "infisical");
+      return;
+    }
+    
+    setValue("labelName", "");
+    setValue("labelValue", "");
+  }, [shouldLabel]);
 
   useEffect(() => {
     if (workspace) {
-      setSelectedSourceEnvironment(workspace.environments[0].slug);
+      setValue("selectedSourceEnvironment", workspace.environments[0].slug);
     }
   }, [workspace]);
 
   useEffect(() => {
     if (integrationAuthApps) {
       if (integrationAuthApps.length > 0) {
-        setTargetAppId(integrationAuthApps[0].appId as string);
+        setValue("targetAppId", integrationAuthApps[0].appId as string);
       } else {
-        setTargetAppId("none");
+        setValue("targetAppId", "none");
       }
     }
   }, [integrationAuthApps]);
-
-  const handleButtonClick = async () => {
+  
+  const onFormSubmit = async ({
+    selectedSourceEnvironment: sce,
+    secretPath,
+    targetAppId,
+    secretPrefix,
+    secretSuffix,
+    shouldLabel: sl,
+    labelName,
+    labelValue
+  }: FormData) => {
     try {
       setIsLoading(true);
 
@@ -64,94 +138,342 @@ export default function GCPSecretManagerCreateIntegrationPage() {
       await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
-        app: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.appId === targetAppId)?.name ?? null,
+        app: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.appId === targetAppId)?.name,
         appId: targetAppId,
-        sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
-        secretPath
+        sourceEnvironment: sce,
+        secretPath,
+        metadata: {
+          ...(secretPrefix ? { secretPrefix } : {}),
+          ...(secretSuffix ? { secretSuffix } : {}),
+          ...(sl ? {
+            secretGCPLabel: {
+              labelName,
+              labelValue
+            }
+          } : {})
+        }
       });
-
+      
       setIsLoading(false);
       router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
     } catch (err) {
       console.error(err);
+      setIsLoading(false);
     }
-  };
-
+  }
+  
   return integrationAuth &&
     workspace &&
     selectedSourceEnvironment &&
-    integrationAuthApps &&
-    targetAppId ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">GCP Secret Manager Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
-          <Select
-            value={selectedSourceEnvironment}
-            onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
-          >
-            {workspace?.environments.map((sourceEnvironment) => (
-              <SelectItem
-                value={sourceEnvironment.slug}
-                key={`source-environment-${sourceEnvironment.slug}`}
-              >
-                {sourceEnvironment.name}
-              </SelectItem>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl label="Secrets Path">
-          <Input
-            value={secretPath}
-            onChange={(evt) => setSecretPath(evt.target.value)}
-            placeholder="Provide a path, default is /"
-          />
-        </FormControl>
-        <FormControl label="GCP Project">
-          <Select
-            value={targetAppId}
-            onValueChange={(val) => setTargetAppId(val)}
-            className="w-full border border-mineshaft-500"
-            isDisabled={integrationAuthApps.length === 0}
-          >
-            {integrationAuthApps.length > 0 ? (
-              integrationAuthApps.map((integrationAuthApp) => (
-                <SelectItem
-                  value={integrationAuthApp.appId as string}
-                  key={`target-app-${integrationAuthApp.appId}`}
-                >
-                  {integrationAuthApp.name}
-                </SelectItem>
-              ))
-            ) : (
-              <SelectItem value="none" key="target-app-none">
-                No projects found
-              </SelectItem>
-            )}
-          </Select>
-        </FormControl>
+    integrationAuthApps ? (
+    <form 
+      onSubmit={handleSubmit((data: FormData) => {
+        if (!data.secretPrefix && !data.secretSuffix && !data.shouldLabel) {
+          handlePopUpOpen("confirmIntegration", data); 
+          return;
+        }
+        
+        onFormSubmit(data);
+      })}
+      className="flex flex-col h-full w-full items-center justify-center"
+    >
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <Head>
+          <title>Set Up GCP Secret Manager Integration</title>
+          <link rel='icon' href='/infisical.ico' />
+        </Head>
+        <CardTitle 
+          className="text-left px-6 text-xl mb-2" 
+          subTitle="Select which environment or folder in Infisical you want to sync to GCP Secret Manager."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Google Cloud Platform.png"
+                height={30}
+                width={30}
+                alt="GCP logo"
+              />
+            </div>
+            <span className="ml-1.5">GCP Secret Manager Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/gcp-secret-manager" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <Tabs defaultValue={TabSections.Connection} className="px-6">
+          <TabList>
+            <div className="flex flex-row border-b border-mineshaft-600 w-full">
+              <Tab value={TabSections.Connection}>Connection</Tab>
+              <Tab value={TabSections.Options}>Options</Tab>
+            </div>
+          </TabList>
+          <TabPanel value={TabSections.Connection}>
+            <motion.div
+              key="panel-1"
+              transition={{ duration: 0.15 }}
+              initial={{ opacity: 0, translateX: 30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: 30 }}
+            >
+              <Controller
+                control={control}
+                name="selectedSourceEnvironment"
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                  <FormControl
+                    label="Project Environment"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                  >
+                    <Select
+                      defaultValue={field.value}
+                      {...field}
+                      onValueChange={(e) => onChange(e)}
+                      className="w-full"
+                    >
+                      {workspace?.environments.map((sourceEnvironment) => (
+                        <SelectItem
+                          value={sourceEnvironment.slug}
+                          key={`source-environment-${sourceEnvironment.slug}`}
+                        >
+                          {sourceEnvironment.name}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+              <Controller
+                  control={control}
+                  defaultValue=""
+                  name="secretPath"
+                  render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                          label="Secrets Path"
+                          isError={Boolean(error)}
+                          errorText={error?.message}
+                      >
+                      <Input 
+                          {...field} 
+                          placeholder="/"
+                      />
+                      </FormControl>
+                  )}
+              />
+              <Controller
+                  control={control}
+                  name="targetAppId"
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      label="GCP Project"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Select
+                        {...field}
+                        onValueChange={(e) => {
+                          if (e === "") return;
+                          onChange(e)
+                        }}
+                        className="w-full"
+                      >
+                        {integrationAuthApps.length > 0 ? (
+                          integrationAuthApps.map((integrationAuthApp) => (
+                            <SelectItem
+                              value={String(integrationAuthApp.appId as string)}
+                              key={`target-app-${String(integrationAuthApp.appId)}`}
+                            >
+                              {integrationAuthApp.name}
+                            </SelectItem>
+                          ))
+                        ) : (
+                          <SelectItem value="none" key="target-app-none">
+                            No projects found
+                          </SelectItem>
+                        )}
+                      </Select>
+                    </FormControl>
+                  )
+                }}
+              />
+            </motion.div>
+          </TabPanel>
+          <TabPanel value={TabSections.Options}>
+            <motion.div
+              key="panel-1"
+              transition={{ duration: 0.15 }}
+              initial={{ opacity: 0, translateX: -30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: 30 }}
+            >
+              <Controller
+                control={control}
+                name="secretPrefix"
+                render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                        label="Secret Prefix"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                    >
+                    <Input 
+                        {...field} 
+                        placeholder="INFISICAL_"
+                    />
+                    </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="secretSuffix"
+                render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                        label="Secret Suffix"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                    >
+                    <Input 
+                        {...field} 
+                        placeholder="_INFISICAL"
+                    />
+                    </FormControl>
+                )}
+              />
+              <div className="mt-8 mb-[2.36rem]">
+                <Controller
+                  control={control}
+                  name="shouldLabel"
+                  render={({ field: { onChange, value } }) => (
+                    <Switch
+                      id="label-gcp"
+                      onCheckedChange={(isChecked) => onChange(isChecked)}
+                      isChecked={value}
+                    >
+                      Label in GCP Secret Manager
+                    </Switch>
+                  )}
+                />
+              </div>
+              {shouldLabel && (
+                <div className="mt-8">
+                  <Controller
+                    control={control}
+                    name="labelName"
+                    render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                            label="Label Name"
+                            isError={Boolean(error)}
+                            errorText={error?.message}
+                        >
+                        <Input 
+                            {...field} 
+                            placeholder="managed-by"
+                        />
+                        </FormControl>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="labelValue"
+                    render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                            label="Label Name"
+                            isError={Boolean(error)}
+                            errorText={error?.message}
+                        >
+                        <Input 
+                            {...field} 
+                            placeholder="infisical"
+                        />
+                        </FormControl>
+                    )}
+                  />
+                </div>
+              )}
+            </motion.div>
+          </TabPanel>
+        </Tabs>
         <Button
-          onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-8 ml-auto mr-6 w-min"
+          size="sm"
+          type="submit"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
-    </div>
+      {/* <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
+        <div className="flex flex-row items-center">
+          <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/>
+          <span className="ml-3 text-md text-mineshaft-100">Pro Tip</span>
+        </div>
+        <span className="text-mineshaft-300 text-sm mt-4">
+          After creating an integration, your secrets will start syncing immediately. 
+          
+          To avoid overwriting existing secrets in GCP Secret Manager, you may consider adding a secret prefix/suffix and/or enabling labeling in the options tab.
+        </span>
+      </div> */}
+      <Modal
+          isOpen={popUp.confirmIntegration?.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("confirmIntegration", isOpen)}
+        >
+          <ModalContent
+            title="Heads Up"
+            footerContent={
+              <div className="flex items-center space-x-2">
+                <Button onClick={() => onFormSubmit(popUp.confirmIntegration?.data as FormData)}>
+                  Continue Anyway
+                </Button>
+                <Button
+                  onClick={() => handlePopUpClose("confirmIntegration")}
+                  variant="outline_bg"
+                  colorSchema="secondary"
+                >
+                  Cancel
+                </Button>
+              </div>
+            }
+          >
+            <p>
+              You&apos;re about to overwrite any existing secrets in GCP Secret Manager. 
+            </p>
+            <p className="mt-4">
+              To avoid this behavior, you may consider adding a secret prefix/suffix or enabling labeling in the options tab.
+            </p> 
+          </ModalContent>
+        </Modal>
+    </form>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up GCP Secret Manager Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isIntegrationAuthAppsLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
+        <p>
+          Something went wrong. Please contact <a
+            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:[email protected]"
+          >
+            support@infisical.com
+          </a> if the issue persists.
+        </p>
+      </div>}
+    </div>
   );
 }
 
-GCPSecretManagerCreateIntegrationPage.requireAuth = true;
+GCPSecretManagerCreateIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/github/create.tsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -29,7 +34,7 @@ export default function GitHubCreateIntegrationPage() {
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -71,15 +76,8 @@ export default function GitHubCreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp.name,
-        appId: null,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
         owner: targetApp.owner,
-        path: null,
-        region: null,
         secretPath
       });
 
@@ -95,10 +93,38 @@ export default function GitHubCreateIntegrationPage() {
     selectedSourceEnvironment &&
     integrationAuthApps &&
     targetAppId ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">GitHub Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up GitHub Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment in Infisical you want to sync to environment variables in GitHub."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center bg-mineshaft-200 rounded-full">
+              <Image
+                src="/images/integrations/GitHub.png"
+                height={30}
+                width={30}
+                alt="GitHub logo"
+              />
+            </div>
+            <span className="ml-2.5">GitHub Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cicd/githubactions" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -114,14 +140,14 @@ export default function GitHubCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <FormControl label="Secrets Path" className="px-6">
           <Input
             value={secretPath}
             onChange={(evt) => setSecretPath(evt.target.value)}
             placeholder="Provide a path, default is /"
           />
         </FormControl>
-        <FormControl label="GitHub Repo" className="mt-4">
+        <FormControl label="GitHub Repo" className="px-6">
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}
@@ -147,16 +173,40 @@ export default function GitHubCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mt-2 mb-6 ml-auto mr-6"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
+      <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
+        <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
+        <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in GitHub with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up GitHub Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isIntegrationAuthAppsLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
+        <p>
+          Something went wrong. Please contact <a
+            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:[email protected]"
+          >
+            support@infisical.com
+          </a> if the issue persists.
+        </p>
+      </div>}
+    </div>
   );
 }
 

frontend/src/pages/integrations/gitlab/authorize.tsx

@@ -0,0 +1,121 @@
+import crypto from "crypto";
+
+import { Controller, useForm } from "react-hook-form";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useGetCloudIntegrations } from "@app/hooks/api";
+
+import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
+
+const schema = yup.object({
+  gitLabURL: yup.string()
+});
+
+type FormData = yup.InferType<typeof schema>;
+
+export default function GitLabAuthorizeIntegrationPage() {
+  const {
+    control,
+    handleSubmit
+  } = useForm<FormData>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      gitLabURL: ""
+    }
+  });
+
+  const { data: cloudIntegrations } = useGetCloudIntegrations();
+  
+  const onFormSubmit = ({
+    gitLabURL
+  }: FormData) => {
+    if (!cloudIntegrations) return;
+    const integrationOption = cloudIntegrations.find((integration) => integration.slug === "gitlab");
+    
+    if (!integrationOption) return;
+    
+    const baseURL = (gitLabURL as string).trim() === "" ? "https://gitlab.com" : (gitLabURL as string).trim();
+    
+    const csrfToken = crypto.randomBytes(16).toString("hex");
+    localStorage.setItem("latestCSRFToken", csrfToken);
+    
+    const state = `${csrfToken}|${(gitLabURL as string).trim() === "" ? "" : (gitLabURL as string).trim()}`;
+    const link = `${baseURL}/oauth/authorize?client_id=${integrationOption.clientId}&redirect_uri=${window.location.origin}/integrations/gitlab/oauth2/callback&response_type=code&state=${state}`;
+    
+    window.location.assign(link);
+  }
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Head>
+        <title>Authorize GitLab Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Authorize this integration to sync secrets from Infisical to GitLab. If no self-hosted GitLab URL is specified, then Infisical will connect you to GitLab Cloud."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Gitlab.png"
+                height={28}
+                width={28}
+                alt="Gitlab logo"
+              />
+            </div>
+            <span className="ml-2.5">GitLab Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cicd/gitlab" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <form 
+          onSubmit={handleSubmit(onFormSubmit)}
+          className="px-6 text-right pb-8"
+        >
+          <Controller
+            control={control}
+            name="gitLabURL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Self-hosted URL (optional)"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Input 
+                  {...field}
+                  placeholder="https://self-hosted-gitlab.com" 
+                />
+              </FormControl>
+            )}
+          />
+          <Button
+            colorSchema="primary"
+            variant="outline_bg"
+            className="mt-2 w-min"
+            size="sm"
+            type="submit"
+          >
+            Continue with OAuth
+          </Button>
+        </form>
+      </Card>
+    </div>
+  );
+}
+
+GitLabAuthorizeIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/gitlab/create.tsx

@@ -1,7 +1,17 @@
 import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { motion } from "framer-motion";
 import queryString from "query-string";
+import * as yup from "yup";
 
+import { usePopUp } from "@app/hooks";
 import {
   useCreateIntegration
 } from "@app/hooks/api";
@@ -12,8 +22,14 @@ import {
   CardTitle,
   FormControl,
   Input,
+  Modal,
+  ModalContent,
   Select,
-  SelectItem
+  SelectItem,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
 } from "../../../components/v2";
 import {
   useGetIntegrationAuthApps,
@@ -27,8 +43,49 @@ const gitLabEntities = [
   { name: "Group", value: "group" }
 ];
 
+enum TabSections {
+  Connection = "connection",
+  Options = "options"
+}
+
+const schema = yup.object({
+  targetEntity: yup.string().oneOf(gitLabEntities.map(entity => entity.value), "Invalid entity type"),
+  targetTeamId: yup.string(),
+  selectedSourceEnvironment: yup.string().required("Source environment is required"),
+  secretPath: yup.string().required("Secret path is required"),
+  targetAppId: yup.string().required("GitLab project is required"),
+  targetEnvironment: yup.string(),
+  secretPrefix: yup.string(),
+  secretSuffix: yup.string()
+});
+
+type FormData = yup.InferType<typeof schema>;
+
 export default function GitLabCreateIntegrationPage() {
   const router = useRouter();
+  const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
+    "confirmIntegration"
+  ] as const);
+  
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    watch
+  } = useForm<FormData>({
+      resolver: yupResolver(schema),
+      defaultValues: {
+        targetEntity: "individual",
+        secretPath: "/",
+        secretPrefix: "",
+        secretSuffix: ""
+      }
+  });
+  const selectedSourceEnvironment = watch("selectedSourceEnvironment");
+  const targetEntity = watch("targetEntity");
+  const targetTeamId = watch("targetTeamId");
+  const targetAppIdValue = watch("targetAppId");
+
   const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
@@ -36,36 +93,29 @@ export default function GitLabCreateIntegrationPage() {
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
 
-  const [targetTeamId, setTargetTeamId] = useState<string | null>(null);
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
 
-  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? "",
     ...(targetTeamId ? { teamId: targetTeamId } : {})
   });
-  const { data: integrationAuthTeams } = useGetIntegrationAuthTeams(
+  const { data: integrationAuthTeams, isLoading: isintegrationAuthTeamsLoading } = useGetIntegrationAuthTeams(
     (integrationAuthId as string) ?? ""
   );
 
-  const [targetEntity, setTargetEntity] = useState(gitLabEntities[0].value);
-  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
-  const [secretPath, setSecretPath] = useState("/");
-  const [targetAppId, setTargetAppId] = useState("");
-  const [targetEnvironment, setTargetEnvironment] = useState("");
-
   const [isLoading, setIsLoading] = useState(false);
-
+  
   useEffect(() => {
     if (workspace) {
-      setSelectedSourceEnvironment(workspace.environments[0].slug);
+      setValue("selectedSourceEnvironment", workspace.environments[0].slug);
     }
   }, [workspace]);
 
   useEffect(() => {
     if (integrationAuthApps) {
       if (integrationAuthApps.length > 0) {
-        setTargetAppId(integrationAuthApps[0].appId as string);
+        setValue("targetAppId", String(integrationAuthApps[0].appId as string));
       } else {
-        setTargetAppId("none");
+        setValue("targetAppId", "none");
       }
     }
   }, [integrationAuthApps]);
@@ -75,162 +125,382 @@ export default function GitLabCreateIntegrationPage() {
       if (integrationAuthTeams) {
         if (integrationAuthTeams.length > 0) {
           // case: user is part of at least 1 group in GitLab
-          setTargetTeamId(integrationAuthTeams[0].teamId);
+          setValue("targetTeamId", String(integrationAuthTeams[0].teamId));
         } else {
           // case: user is not part of any groups in GitLab
-          setTargetTeamId("none");
+          setValue("targetTeamId", "none");
         }
       }
     } else if (targetEntity === "individual") {
-      setTargetTeamId(null);
+      setValue("targetTeamId", undefined);
     }
   }, [targetEntity, integrationAuthTeams]);
 
-  const handleButtonClick = async () => {
+  const onFormSubmit = async ({
+    selectedSourceEnvironment: sse,
+    secretPath,
+    targetAppId,
+    targetEnvironment,
+    secretPrefix,
+    secretSuffix
+  }: FormData) => {
     try {
       setIsLoading(true);
       if (!integrationAuth?._id) return;
-
+      
       await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
-        app:
-          integrationAuthApps?.find(
-            (integrationAuthApp) => integrationAuthApp.appId === targetAppId
-          )?.name ?? null,
-        appId: targetAppId,
-        sourceEnvironment: selectedSourceEnvironment,
+        app: integrationAuthApps?.find((integrationAuthApp) => String(integrationAuthApp.appId) === targetAppId)?.name,
+        appId: String(targetAppId),
+        sourceEnvironment: sse,
         targetEnvironment: targetEnvironment === "" ? "*" : targetEnvironment,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
-        secretPath
+        secretPath,
+        metadata: {
+          secretPrefix,
+          secretSuffix
+        }
       });
 
       setIsLoading(false);
       router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
     } catch (err) {
       console.error(err);
+      setIsLoading(false);
     }
-  };
+  }
 
   return integrationAuth &&
     workspace &&
     selectedSourceEnvironment &&
     integrationAuthApps &&
-    integrationAuthTeams &&
-    targetAppId ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">GitLab Integration</CardTitle>
-        <FormControl label="Project Environment">
-          <Select
-            value={selectedSourceEnvironment}
-            onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
-          >
-            {workspace?.environments.map((sourceEnvironment) => (
-              <SelectItem
-                value={sourceEnvironment.slug}
-                key={`source-environment-${sourceEnvironment.slug}`}
-              >
-                {sourceEnvironment.name}
-              </SelectItem>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl label="Secrets Path">
-          <Input
-            value={secretPath}
-            onChange={(evt) => setSecretPath(evt.target.value)}
-            placeholder="Provide a path, default is /"
-          />
-        </FormControl>
-        <FormControl label="GitLab Integration Type">
-          <Select
-            value={targetEntity}
-            onValueChange={(val) => setTargetEntity(val)}
-            className="w-full border border-mineshaft-500"
-          >
-            {gitLabEntities.map((entity) => {
-              return (
-                <SelectItem value={entity.value} key={`target-entity-${entity.value}`}>
-                  {entity.name}
-                </SelectItem>
-              );
-            })}
-          </Select>
-        </FormControl>
-        {targetEntity === "group" && targetTeamId && (
-          <FormControl label="GitLab Group">
-            <Select
-              value={targetTeamId}
-              onValueChange={(val) => setTargetTeamId(val)}
-              className="w-full border border-mineshaft-500"
+    integrationAuthTeams ? (
+    <form 
+      onSubmit={handleSubmit((data: FormData) => {
+        if (!data.secretPrefix && !data.secretSuffix) {
+          handlePopUpOpen("confirmIntegration", data); 
+          return;
+        }
+        
+        onFormSubmit(data);
+      })}
+      className="flex flex-col h-full w-full items-center justify-center"
+    >
+      <Head>
+        <title>Set Up GitLab Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Select which environment or folder in Infisical you want to sync to GitLab's environment variables."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Gitlab.png"
+                height={28}
+                width={28}
+                alt="Gitlab logo"
+              />
+            </div>
+            <span className="ml-2.5">GitLab Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cicd/gitlab" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <Tabs defaultValue={TabSections.Connection} className="px-6">
+          <TabList>
+            <div className="flex flex-row border-b border-mineshaft-600 w-full">
+              <Tab value={TabSections.Connection}>Connection</Tab>
+              <Tab value={TabSections.Options}>Options</Tab>
+            </div>
+          </TabList>
+          <TabPanel value={TabSections.Connection}>
+            <motion.div
+              key="panel-1"
+              transition={{ duration: 0.15 }}
+              initial={{ opacity: 0, translateX: 30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: 30 }}
             >
-              {integrationAuthTeams.length > 0 ? (
-                integrationAuthTeams.map((integrationAuthTeam) => (
-                  <SelectItem
-                    value={integrationAuthTeam.teamId}
-                    key={`target-team-${integrationAuthTeam.teamId}`}
+              <Controller
+                control={control}
+                name="selectedSourceEnvironment"
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                  <FormControl
+                    label="Project Environment"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
                   >
-                    {integrationAuthTeam.name}
-                  </SelectItem>
-                ))
-              ) : (
-                <SelectItem value="none" key="target-team-none">
-                  No groups found
-                </SelectItem>
+                    <Select
+                      defaultValue={field.value}
+                      {...field}
+                      onValueChange={(e) => onChange(e)}
+                      className="w-full"
+                    >
+                      {workspace?.environments.map((sourceEnvironment) => (
+                        <SelectItem
+                          value={sourceEnvironment.slug}
+                          key={`source-environment-${sourceEnvironment.slug}`}
+                        >
+                          {sourceEnvironment.name}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+              <Controller
+                  control={control}
+                  defaultValue=""
+                  name="secretPath"
+                  render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                          label="Secrets Path"
+                          isError={Boolean(error)}
+                          errorText={error?.message}
+                      >
+                      <Input 
+                          {...field} 
+                          placeholder="/"
+                      />
+                      </FormControl>
+                  )}
+              />
+              <Controller
+                control={control}
+                name="targetEntity"
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                  <FormControl
+                    label="GitLab Integration Type"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                  >
+                    <Select
+                      {...field}
+                      onValueChange={(e) => onChange(e)}
+                      className="w-full"
+                    >
+                      {gitLabEntities.map((entity) => {
+                        return (
+                          <SelectItem value={entity.value} key={`target-entity-${entity.value}`}>
+                            {entity.name}
+                          </SelectItem>
+                        );
+                      })}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+              {targetEntity === "group" && targetTeamId && (
+                <Controller
+                  control={control}
+                  name="targetTeamId"
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                    <FormControl
+                      label="GitLab Group"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Select
+                        {...field}
+                        onValueChange={(e) => onChange(e)}
+                        className="w-full"
+                      >
+                        {integrationAuthTeams.length > 0 ? (
+                          integrationAuthTeams.map((integrationAuthTeam) => 
+                          (
+                            <SelectItem
+                              value={String(integrationAuthTeam.teamId as string)}
+                              key={`target-team-${String(integrationAuthTeam.teamId)}`}
+                            >
+                              {integrationAuthTeam.name}
+                            </SelectItem>
+                          ))
+                        ) : (
+                          <SelectItem value="none" key="target-team-none">
+                            No groups found
+                          </SelectItem>
+                        )}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
               )}
-            </Select>
-          </FormControl>
-        )}
-        <FormControl label="GitLab Project">
-          <Select
-            value={targetAppId}
-            onValueChange={(val) => setTargetAppId(val)}
-            className="w-full border border-mineshaft-500"
-            isDisabled={integrationAuthApps.length === 0}
-          >
-            {integrationAuthApps.length > 0 ? (
-              integrationAuthApps.map((integrationAuthApp) => (
-                <SelectItem
-                  value={integrationAuthApp.appId as string}
-                  key={`target-app-${integrationAuthApp.appId}`}
-                >
-                  {integrationAuthApp.name}
-                </SelectItem>
-              ))
-            ) : (
-              <SelectItem value="none" key="target-app-none">
-                No projects found
-              </SelectItem>
-            )}
-          </Select>
-        </FormControl>
-        <FormControl label="GitLab Environment Scope (Optional)">
-          <Input
-            placeholder="*"
-            value={targetEnvironment}
-            onChange={(e) => setTargetEnvironment(e.target.value)}
-          />
-        </FormControl>
+              <Controller
+                control={control}
+                name="targetAppId"
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      label="GitLab Project"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Select
+                        {...field}
+                        onValueChange={(e) => {
+                          if (e === "") return;
+                          onChange(e)
+                        }}
+                        className="w-full"
+                      >
+                        {integrationAuthApps.length > 0 ? (
+                          integrationAuthApps.map((integrationAuthApp) => (
+                            <SelectItem
+                              value={String(integrationAuthApp.appId as string)}
+                              key={`target-app-${String(integrationAuthApp.appId)}`}
+                            >
+                              {integrationAuthApp.name}
+                            </SelectItem>
+                          ))
+                        ) : (
+                          <SelectItem value="none" key="target-app-none">
+                            No projects found
+                          </SelectItem>
+                        )}
+                      </Select>
+                    </FormControl>
+                  )}}
+                />
+                <Controller
+                  control={control}
+                  defaultValue=""
+                  name="targetEnvironment"
+                  render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                          label="GitLab Environment Scope (Optional)"
+                          isError={Boolean(error)}
+                          errorText={error?.message}
+                      >
+                      <Input 
+                          {...field} 
+                          placeholder="*"
+                      />
+                      </FormControl>
+                  )}
+              />
+            </motion.div>
+          </TabPanel>
+          <TabPanel value={TabSections.Options}>
+            <motion.div
+              key="panel-1"
+              transition={{ duration: 0.15 }}
+              initial={{ opacity: 0, translateX: -30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: 30 }}
+              className="pb-[14.25rem]"
+            >
+              <Controller
+                control={control}
+                name="secretPrefix"
+                render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                        label="Secret Prefix"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                    >
+                    <Input 
+                        {...field} 
+                        placeholder="INFISICAL_"
+                    />
+                    </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="secretSuffix"
+                render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                        label="Secret Suffix"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                    >
+                    <Input 
+                        {...field} 
+                        placeholder="_INFISICAL"
+                    />
+                    </FormControl>
+                )}
+              />
+            </motion.div>
+          </TabPanel>
+        </Tabs>
         <Button
-          onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-8 ml-auto mr-6 w-min"
+          size="sm"
+          type="submit"
           isLoading={isLoading}
-          isDisabled={integrationAuthApps.length === 0}
+          isDisabled={targetAppIdValue === "none"}
         >
           Create Integration
         </Button>
-      </Card>
-    </div>
+      </Card> 
+      {/* <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
+        <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
+        <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in GitLab with secrets from Infisical.</span>
+      </div> */}
+      <Modal
+          isOpen={popUp.confirmIntegration?.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("confirmIntegration", isOpen)}
+        >
+          <ModalContent
+            title="Heads Up"
+            footerContent={
+              <div className="flex items-center space-x-2">
+                <Button onClick={() => onFormSubmit(popUp.confirmIntegration?.data as FormData)}>
+                  Continue Anyway
+                </Button>
+                <Button
+                  onClick={() => handlePopUpClose("confirmIntegration")}
+                  variant="outline_bg"
+                  colorSchema="secondary"
+                >
+                  Cancel
+                </Button>
+              </div>
+            }
+          >
+            <p>
+              You&apos;re about to overwrite any existing secrets in GitLab.
+            </p>
+            <p className="mt-4">
+              To avoid this behavior, you may consider adding a secret prefix/suffix in the options tab.
+            </p> 
+          </ModalContent>
+        </Modal>
+    </form>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up GitLab Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isIntegrationAuthAppsLoading || isintegrationAuthTeamsLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
+        <p>
+          Something went wrong. Please contact <a
+            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:[email protected]"
+          >
+            support@infisical.com
+          </a> if the issue persists.
+        </p>
+      </div>}
+    </div>
   );
 }
 

frontend/src/pages/integrations/gitlab/oauth2/callback.tsx

@@ -15,13 +15,18 @@ export default function GitLabOAuth2CallbackPage() {
     (async () => {
       try {
         // validate state
-        if (state !== localStorage.getItem("latestCSRFToken")) return;
+        const [csrfToken, url] = (state as string).split("|", 2);
+        
+        if (csrfToken !== localStorage.getItem("latestCSRFToken")) return;
         localStorage.removeItem("latestCSRFToken");
 
         const integrationAuth = await mutateAsync({
           workspaceId: localStorage.getItem("projectData.id") as string,
           code: code as string,
-          integration: "gitlab"
+          integration: "gitlab",
+          ...(url === "" ? {} : {
+            url
+          })
         });
 
         router.push(`/integrations/gitlab/create?integrationAuthId=${integrationAuth._id}`);

frontend/src/pages/integrations/hashicorp-vault/authorize.tsx

@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
   useSaveIntegrationAccessToken
@@ -80,12 +85,41 @@ export default function HashiCorpVaultAuthorizeIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">Vault Integration</CardTitle>
+      <Head>
+        <title>Authorize Vault Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After connecting to Vault, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Vault.png"
+                height={30}
+                width={30}
+                alt="HCP Vault logo"
+              />
+            </div>
+            <span className="ml-2.5">HashiCorp Vault Integration</span>
+            <Link href="https://infisical.com/docs/integrations/cloud/hashicorp-vault" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
         <FormControl
           label="Vault Cluster URL"
           errorText={vaultURLErrorText}
           isError={vaultURLErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input placeholder="" value={vaultURL} onChange={(e) => setVaultURL(e.target.value)} />
         </FormControl>
@@ -93,6 +127,7 @@ export default function HashiCorpVaultAuthorizeIntegrationPage() {
           label="Vault Namespace"
           errorText={vaultNamespaceErrorText}
           isError={vaultNamespaceErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input 
                 placeholder="admin/education" 
@@ -104,6 +139,7 @@ export default function HashiCorpVaultAuthorizeIntegrationPage() {
           label="Vault RoleID"
           errorText={vaultRoleIDErrorText}
           isError={vaultRoleIDErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input placeholder="" value={vaultRoleID} onChange={(e) => setVaultRoleID(e.target.value)} />
         </FormControl>
@@ -111,6 +147,7 @@ export default function HashiCorpVaultAuthorizeIntegrationPage() {
           label="Vault SecretID"
           errorText={vaultSecretIDErrorText}
           isError={vaultSecretIDErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input 
                 placeholder="" 
@@ -120,8 +157,9 @@ export default function HashiCorpVaultAuthorizeIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
           Connect to Vault

frontend/src/pages/integrations/hashicorp-vault/create.tsx

@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -25,7 +30,7 @@ export default function HashiCorpVaultCreateIntegrationPage() {
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
-  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuth, isLoading: isintegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
 
   const [vaultEnginePath, setVaultEnginePath] = useState("");
   const [vaultEnginePathErrorText, setVaultEnginePathErrorText] = useState("");
@@ -65,15 +70,8 @@ export default function HashiCorpVaultCreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: vaultEnginePath,
-        appId: null,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
         path: vaultSecretPath,
-        region: null,
         secretPath
       });
 
@@ -86,10 +84,38 @@ export default function HashiCorpVaultCreateIntegrationPage() {
   };
 
   return integrationAuth && workspace ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">Vault Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up Vault Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Select which environment or folder in Infisical you want to sync to which path in HashiCorp Vault."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Vault.png"
+                height={30}
+                width={30}
+                alt="HCP Vault logo"
+              />
+            </div>
+            <span className="ml-2.5">HashiCorp Vault Integration</span>
+            <Link href="https://infisical.com/docs/integrations/cloud/hashicorp-vault" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -105,7 +131,7 @@ export default function HashiCorpVaultCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <FormControl label="Secrets Path" className="px-6">
           <Input
             value={secretPath}
             onChange={(evt) => setSecretPath(evt.target.value)}
@@ -116,6 +142,7 @@ export default function HashiCorpVaultCreateIntegrationPage() {
           label="Vault KV Secrets Engine Path"
           errorText={vaultEnginePathErrorText}
           isError={vaultEnginePathErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder="kv"
@@ -127,6 +154,7 @@ export default function HashiCorpVaultCreateIntegrationPage() {
           label="Vault Secret(s) Path"
           errorText={vaultSecretPathErrorText}
           isError={vaultSecretPathErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder="machine/dev"
@@ -136,17 +164,41 @@ export default function HashiCorpVaultCreateIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
           isDisabled={!(isValidVaultPath(vaultEnginePath) && isValidVaultPath(vaultSecretPath))}
         >
           Create Integration
         </Button>
       </Card>
+      <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
+        <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
+        <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in Vault with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up Vault Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isintegrationAuthLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
+        <p>
+          Something went wrong. Please contact <a
+            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:[email protected]"
+          >
+            support@infisical.com
+          </a> if the issue persists.
+        </p>
+      </div>}
+    </div>
   );
 }
 

frontend/src/pages/integrations/heroku/create.tsx

@@ -65,15 +65,7 @@ export default function HerokuCreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,
-        appId: null,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
 

frontend/src/pages/integrations/laravel-forge/authorize.tsx

@@ -38,9 +38,7 @@ export default function LaravelForgeCreateIntegrationPage() {
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "laravel-forge",
         accessId: serverId,
-        accessToken: apiKey,
-        url: null,
-        namespace: null
+        accessToken: apiKey
       });
 
       setIsLoading(false);

frontend/src/pages/integrations/laravel-forge/create.tsx

@@ -64,17 +64,8 @@ export default function LaravelForgeCreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,
-        appId:
-          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
-            ?.appId ?? null,
+        appId: String(integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)?.appId),
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
 

frontend/src/pages/integrations/netlify/create.tsx

@@ -73,17 +73,9 @@ export default function NetlifyCreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,
-        appId:
-          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
-            ?.appId ?? null,
+        appId: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)?.appId,
         sourceEnvironment: selectedSourceEnvironment,
         targetEnvironment,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
 

frontend/src/pages/integrations/northflank/authorize.tsx

@@ -28,10 +28,7 @@ export default function NorthflankCreateIntegrationPage() {
       const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "northflank",
-        accessToken: apiKey,
-        accessId: null,
-        url: null,
-        namespace: null
+        accessToken: apiKey
       });
 
       setIsLoading(false);

frontend/src/pages/integrations/northflank/create.tsx

@@ -29,7 +29,7 @@ export default function NorthflankCreateIntegrationPage() {
   const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
   const [secretPath, setSecretPath] = useState("/");
   const [targetAppId, setTargetAppId] = useState("");
-  const [targetSecretGroupId, setTargetSecretGroupId] = useState<string | null>(null);
+  const [targetSecretGroupId, setTargetSecretGroupId] = useState<string>("");
 
   const [isLoading, setIsLoading] = useState(false);
 
@@ -85,18 +85,10 @@ export default function NorthflankCreateIntegrationPage() {
       await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
-        app: integrationAuthApps?.find(
-            (integrationAuthApp) => integrationAuthApp.appId === targetAppId
-          )?.name ?? null,
+        app: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.appId === targetAppId)?.name,
         appId: targetAppId,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
         targetServiceId: targetSecretGroupId,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
 
@@ -162,7 +154,7 @@ export default function NorthflankCreateIntegrationPage() {
             )}
           </Select>
         </FormControl>
-        {targetSecretGroupId && integrationAuthSecretGroups && (
+        {targetSecretGroupId !== "" && integrationAuthSecretGroups && (
           <FormControl label="Secret Group" className="mt-4">
             <Select
               value={targetSecretGroupId}

frontend/src/pages/integrations/qovery/authorize.tsx

@@ -0,0 +1,106 @@
+import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
+import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
+
+export default function QoveryCreateIntegrationPage() {
+  const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
+  const [accessToken, setAccessToken] = useState("");
+  const [accessTokenErrorText, setAccessTokenErrorText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleButtonClick = async () => {
+    try {
+      setAccessTokenErrorText("");
+      if (accessToken.length === 0) {
+        setAccessTokenErrorText("Access token cannot be blank");
+        return;
+      }
+
+      setIsLoading(true);
+
+      const integrationAuth = await mutateAsync({
+        workspaceId: localStorage.getItem("projectData.id"),
+        integration: "qovery",
+        accessToken
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/qovery/create?integrationAuthId=${integrationAuth._id}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Head>
+        <title>Authorize Qovery Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding your API key, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Qovery.png"
+                height={30}
+                width={30}
+                alt="Qovery logo"
+              />
+            </div>
+            <span className="ml-2.5">Qovery Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/qovery" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <FormControl
+          label="Qovery API token"
+          errorText={accessTokenErrorText}
+          isError={accessTokenErrorText !== "" ?? false}
+          className="mx-6"
+        >
+          <Input
+            placeholder=""
+            value={accessToken}
+            onChange={(e) => setAccessToken(e.target.value)}
+          />
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
+          isFullWidth={false}
+          isLoading={isLoading}
+        >
+          Connect to Qovery
+        </Button>
+      </Card>
+    </div>
+  );
+}
+
+QoveryCreateIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/qovery/create.tsx

@@ -0,0 +1,409 @@
+import { useEffect, useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { motion } from "framer-motion";
+import queryString from "query-string";
+
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Input,
+  Select,
+  SelectItem,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
+} from "@app/components/v2";
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+import {
+  useGetIntegrationAuthQoveryEnvironments, 
+  useGetIntegrationAuthQoveryOrgs, 
+  useGetIntegrationAuthQoveryProjects, 
+  useGetIntegrationAuthQoveryScopes 
+} from "@app/hooks/api/integrationAuth/queries";
+
+import { useGetIntegrationAuthById } from "../../../hooks/api/integrationAuth";
+import { useGetWorkspaceById } from "../../../hooks/api/workspace";
+
+const qoveryScopes = [
+  { label: "Application", value: "application" },
+  { label: "Container", value: "container" },
+  { label: "Job", value: "job" }
+];
+
+enum TabSections {
+  InfisicalSettings = "infisicalSettings",
+  QoverySettings = "qoverySettings"
+}
+
+/**
+ * Follow the logic:
+ * - Access token
+ * -> Get organizations (orgId) - select an organization
+ * -> Get projects belonging to the organization - select project
+ * -> Get environments belonging to the project - select environmnet
+ * -> Get qovery scopes / application (this is the application to sync to)
+ * 
+ * Do we even need to get organizations?
+ */
+
+export default function QoveryCreateIntegrationPage() {
+  const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
+
+  const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
+
+  const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
+  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+
+  const [scope, setScope] = useState("application");
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [secretPath, setSecretPath] = useState("/");
+
+  const { data: integrationAuthOrgs } = useGetIntegrationAuthQoveryOrgs((integrationAuthId as string) ?? "");
+  const [targetOrgId, setTargetOrgId] = useState("");
+  
+  const { data: integrationAuthProjects } = useGetIntegrationAuthQoveryProjects({
+    integrationAuthId: (integrationAuthId as string) ?? "",
+    orgId: targetOrgId
+  });
+  const [targetProjectId, setTargetProjectId] = useState("");
+
+  const { data: integrationAuthEnvironments } = useGetIntegrationAuthQoveryEnvironments({
+    integrationAuthId: (integrationAuthId as string) ?? "",
+    projectId: targetProjectId
+  });
+  const [targetEnvironmentId, setTargetEnvironmentId] = useState("");
+
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthQoveryScopes({
+    integrationAuthId: (integrationAuthId as string) ?? "",
+    environmentId: targetEnvironmentId,
+    scope: (scope as ("job" | "application" | "container"))
+  });
+  const [targetAppId, setTargetAppId] = useState("");
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (workspace) {
+      setSelectedSourceEnvironment(workspace.environments[0].slug);
+    }
+  }, [workspace]);
+
+  useEffect(() => {
+    if (integrationAuthApps) {
+      if (integrationAuthApps.length > 0) {
+        setTargetAppId(String(integrationAuthApps[0].appId));
+      } else {
+        setTargetAppId("none");
+      }
+    }
+  }, [integrationAuthApps]);
+
+  useEffect(() => {
+    if (integrationAuthOrgs) {
+      if (integrationAuthOrgs.length > 0) {
+        setTargetOrgId(String(integrationAuthOrgs[0].orgId));
+      } else {
+        setTargetOrgId("none");
+      }
+    }
+  }, [integrationAuthOrgs]);
+
+  useEffect(() => {
+    if (integrationAuthProjects) {
+      if (integrationAuthProjects.length > 0) {
+        setTargetProjectId(String(integrationAuthProjects[0].projectId));
+      } else {
+        setTargetProjectId("none");
+      }
+    }
+  }, [integrationAuthProjects]);
+
+  useEffect(() => {
+    if (integrationAuthEnvironments) {
+      if (integrationAuthEnvironments.length > 0) {
+        setTargetEnvironmentId(String(integrationAuthEnvironments[0].environmentId));
+      } else {
+        setTargetEnvironmentId("none");
+      }
+    }
+  }, [integrationAuthEnvironments]);
+
+  const handleButtonClick = async () => {
+    try {
+      if (!integrationAuth?._id) return;
+
+      setIsLoading(true);
+
+      const targetOrg = integrationAuthOrgs?.find((integrationAuthOrg) => integrationAuthOrg.orgId === targetOrgId)?.name;
+      const targetProject = integrationAuthProjects?.find((integrationAuthProject) => integrationAuthProject.projectId === targetProjectId)?.name;
+      const targetEnvironment = integrationAuthEnvironments?.find((integrationAuthEnvironment) => integrationAuthEnvironment.environmentId === targetEnvironmentId)?.name;
+      const targetApp = integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.appId === targetAppId)?.name;
+
+      await mutateAsync({
+        integrationAuthId: integrationAuth?._id,
+        isActive: true,
+        app: targetApp,
+        appId: targetAppId,
+        scope,
+        sourceEnvironment: selectedSourceEnvironment,
+        targetEnvironment,
+        targetEnvironmentId,
+        targetService: targetProject,
+        targetServiceId: targetProjectId,
+        owner: targetOrg,
+        secretPath
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+  
+  return integrationAuth &&
+    workspace &&
+    selectedSourceEnvironment ? (
+    <div className="flex flex-col h-full w-full items-center justify-center bg-gradient-to-tr from-mineshaft-900 to-bunker-900">
+      <Head>
+        <title>Set Up Qovery Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment in Infisical you want to sync to Checkly environment variables."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Qovery.png"
+                height={30}
+                width={30}
+                alt="Qovery logo"
+              />
+            </div>
+            <span className="ml-2.5">Qovery Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/qovery" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <Tabs defaultValue={TabSections.InfisicalSettings} className="px-6">
+          <TabList>
+            <div className="flex flex-row border-b border-mineshaft-600 w-full">
+              <Tab value={TabSections.InfisicalSettings}>Infisical Settings</Tab>
+              <Tab value={TabSections.QoverySettings}>Qovery Settings</Tab>
+            </div>
+          </TabList>
+          <TabPanel value={TabSections.InfisicalSettings}>
+            <motion.div
+              key="panel-1"
+              transition={{ duration: 0.15 }}
+              initial={{ opacity: 0, translateX: 30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: 30 }}
+            >
+              <FormControl label="Infisical Project Environment">
+                <Select
+                  value={selectedSourceEnvironment}
+                  onValueChange={(val) => setSelectedSourceEnvironment(val)}
+                  className="w-full border border-mineshaft-500"
+                >
+                  {workspace?.environments.map((sourceEnvironment) => (
+                    <SelectItem
+                      value={sourceEnvironment.slug}
+                      key={`source-environment-${sourceEnvironment.slug}`}
+                    >
+                      {sourceEnvironment.name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl label="Secrets Path" className="pb-[14.68rem]">
+                <Input
+                  value={secretPath}
+                  onChange={(evt) => setSecretPath(evt.target.value)}
+                  placeholder="Provide a path, default is /"
+                />
+              </FormControl>
+            </motion.div>
+          </TabPanel>
+          <TabPanel value={TabSections.QoverySettings}>
+            <motion.div
+              key="panel-1"
+              transition={{ duration: 0.15 }}
+              initial={{ opacity: 0, translateX: -30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: 30 }}
+            >
+              <FormControl label="Qovery Scope">
+                <Select
+                  value={scope}
+                  onValueChange={(val) => setScope(val)}
+                  className="w-full border border-mineshaft-500"
+                >
+                  {qoveryScopes.map((qoveryScope) => (
+                    <SelectItem
+                      value={qoveryScope.value}
+                      key={`target-app-${qoveryScope.value}`}
+                    >
+                      {qoveryScope.label}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+              {integrationAuthOrgs && <FormControl label="Qovery Organization">
+                <Select
+                  value={targetOrgId}
+                  onValueChange={(val) => setTargetOrgId(val)}
+                  className="w-full border border-mineshaft-500"
+                  isDisabled={integrationAuthOrgs.length === 0}
+                >
+                  {integrationAuthOrgs.length > 0 ? (
+                    integrationAuthOrgs.map((integrationAuthOrg) => (
+                      <SelectItem
+                        value={integrationAuthOrg.orgId}
+                        key={`target-app-${integrationAuthOrg.orgId}`}
+                      >
+                        {integrationAuthOrg.name}
+                      </SelectItem>
+                    ))
+                  ) : (
+                    <SelectItem value="none" key="target-app-none">
+                      No organizaztions found
+                    </SelectItem>
+                  )}
+                </Select>
+              </FormControl>}
+              {integrationAuthProjects && <FormControl label="Qovery Project">
+                <Select
+                  value={targetProjectId}
+                  onValueChange={(val) => setTargetProjectId(val)}
+                  className="w-full border border-mineshaft-500"
+                  isDisabled={integrationAuthProjects.length === 0}
+                >
+                  {integrationAuthProjects.length > 0 ? (
+                    integrationAuthProjects.map((integrationAuthProject) => (
+                      <SelectItem
+                        value={integrationAuthProject.projectId}
+                        key={`target-app-${integrationAuthProject.projectId}`}
+                      >
+                        {integrationAuthProject.name}
+                      </SelectItem>
+                    ))
+                  ) : (
+                    <SelectItem value="none" key="target-app-none">
+                      No projects found
+                    </SelectItem>
+                  )}
+                </Select>
+              </FormControl>}
+              {integrationAuthEnvironments && <FormControl label="Qovery Environment">
+                <Select
+                  value={targetEnvironmentId}
+                  onValueChange={(val) => setTargetEnvironmentId(val)}
+                  className="w-full border border-mineshaft-500"
+                  isDisabled={integrationAuthEnvironments.length === 0}
+                >
+                  {integrationAuthEnvironments.length > 0 ? (
+                    integrationAuthEnvironments.map((integrationAuthEnvironment) => (
+                      <SelectItem
+                        value={integrationAuthEnvironment.environmentId}
+                        key={`target-app-${integrationAuthEnvironment.environmentId}`}
+                      >
+                        {integrationAuthEnvironment.name}
+                      </SelectItem>
+                    ))
+                  ) : (
+                    <SelectItem value="none" key="target-app-none">
+                      No environments found
+                    </SelectItem>
+                  )}
+                </Select>
+              </FormControl>}
+              {(scope && integrationAuthApps) && <FormControl label={`Qovery ${scope.charAt(0).toUpperCase() + scope.slice(1)}`}>
+                <Select
+                  value={targetAppId}
+                  onValueChange={(val) => setTargetAppId(val)}
+                  className="w-full border border-mineshaft-500"
+                  isDisabled={integrationAuthApps.length === 0}
+                >
+                  {integrationAuthApps.length > 0 ? (
+                    integrationAuthApps.map((integrationAuthApp) => (
+                      <SelectItem
+                        value={(integrationAuthApp.appId as string)}
+                        key={`target-app-${integrationAuthApp.appId}`}
+                      >
+                        {integrationAuthApp.name}
+                      </SelectItem>
+                    ))
+                  ) : (
+                    <SelectItem value="none" key="target-app-none">
+                      No {scope}s found
+                    </SelectItem>
+                  )}
+                </Select>
+              </FormControl>}
+            </motion.div>
+          </TabPanel>
+        </Tabs>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          variant="outline_bg"
+          className="mb-6 ml-auto mr-6"
+          isFullWidth={false}
+          isLoading={isLoading}
+        >
+          Create Integration
+        </Button>
+      </Card>
+      {/* <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
+        <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
+        <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in Qovery with secrets from Infisical.</span>
+      </div> */}
+    </div>
+  ) : (
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up Qovery Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isIntegrationAuthAppsLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
+        <p>
+          Something went wrong. Please contact <a
+            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:[email protected]"
+          >
+            support@infisical.com
+          </a> if the issue persists.
+        </p>
+      </div>}
+    </div>
+  );
+}
+
+QoveryCreateIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/railway/authorize.tsx

@@ -28,10 +28,7 @@ export default function RailwayAuthorizeIntegrationPage() {
       const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "railway",
-        accessId: null,
-        accessToken: apiKey,
-        url: null,
-        namespace: null
+        accessToken: apiKey
       });
 
       setIsLoading(false);

frontend/src/pages/integrations/railway/create.tsx

@@ -108,11 +108,8 @@ export default function RailwayCreateIntegrationPage() {
         sourceEnvironment: selectedSourceEnvironment,
         targetEnvironment: targetEnvironment.name,
         targetEnvironmentId: targetEnvironment.environmentId,
-        targetService: targetService ? targetService.name : null,
-        targetServiceId: targetService ? targetService.serviceId : null,
-        owner: null,
-        path: null,
-        region: null,
+        targetService: targetService?.name,
+        targetServiceId: targetService?.serviceId,
         secretPath
       });
 

frontend/src/pages/integrations/render/authorize.tsx

@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useSaveIntegrationAccessToken} from "@app/hooks/api";
 
@@ -26,10 +31,7 @@ export default function RenderCreateIntegrationPage() {
       const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "render",
-        accessId: null,
-        accessToken: apiKey,
-        url: null,
-        namespace: null
+        accessToken: apiKey
       });
 
       setIsLoading(false);
@@ -42,19 +44,49 @@ export default function RenderCreateIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">Render Integration</CardTitle>
+      <Head>
+        <title>Authorize Render Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding your API key, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Render.png"
+                height={30}
+                width={30}
+                alt="Render logo"
+              />
+            </div>
+            <span className="ml-2.5">Render Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/render" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
         <FormControl
           label="Render API Key"
           errorText={apiKeyErrorText}
           isError={apiKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input placeholder="rnd_xxx" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
           Connect to Render

frontend/src/pages/integrations/render/create.tsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -28,8 +33,8 @@ export default function RenderCreateIntegrationPage() {
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
-  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+  const { data: integrationAuth, isLoading: isIntegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -64,17 +69,8 @@ export default function RenderCreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,
-        appId:
-          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
-            ?.appId ?? null,
+        appId: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)?.appId,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
 
@@ -91,10 +87,38 @@ export default function RenderCreateIntegrationPage() {
     selectedSourceEnvironment &&
     integrationAuthApps &&
     targetApp ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">Render Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up Render Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment or folder in Infisical you want to sync to Render environment variables."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Render.png"
+                height={30}
+                width={30}
+                alt="Render logo"
+              />
+            </div>
+            <span className="ml-2.5">Render Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/render" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -110,14 +134,14 @@ export default function RenderCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <FormControl label="Secrets Path" className="px-6">
           <Input
             value={secretPath}
             onChange={(evt) => setSecretPath(evt.target.value)}
             placeholder="Provide a path, default is /"
           />
         </FormControl>
-        <FormControl label="Render Service" className="mt-4">
+        <FormControl label="Render Service" className="px-6">
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
@@ -143,16 +167,40 @@ export default function RenderCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
+      <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
+        <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
+        <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in Render with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up Render Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isIntegrationAuthLoading || isIntegrationAuthAppsLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
+        <p>
+          Something went wrong. Please contact <a
+            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:[email protected]"
+          >
+            support@infisical.com
+          </a> if the issue persists.
+        </p>
+      </div>}
+    </div>
   );
 }
 

frontend/src/pages/integrations/supabase/authorize.tsx

@@ -28,10 +28,7 @@ export default function SupabaseCreateIntegrationPage() {
       const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "supabase",
-        accessToken: apiKey,
-        accessId: null,
-        url: null,
-        namespace: null
+        accessToken: apiKey
       });
 
       setIsLoading(false);

frontend/src/pages/integrations/supabase/create.tsx

@@ -65,17 +65,8 @@ export default function SupabaseCreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,
-        appId:
-          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
-            ?.appId ?? null,
+        appId: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)?.appId,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
 

frontend/src/pages/integrations/teamcity/authorize.tsx

@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
   useSaveIntegrationAccessToken
@@ -37,10 +42,8 @@ export default function TeamCityCreateIntegrationPage() {
       const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "teamcity",
-        accessId: null,
         accessToken: apiKey,
         url: serverUrl,
-        namespace: null
       });
 
       setIsLoading(false);
@@ -53,12 +56,41 @@ export default function TeamCityCreateIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">TeamCity Integration</CardTitle>
+      <Head>
+        <title>Authorize TeamCity Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding the details below, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/TeamCity.png"
+                height={28}
+                width={28}
+                alt="TeamCity logo"
+              />
+            </div>
+            <span className="ml-2">TeamCity Integration</span>
+            <Link href="https://infisical.com/docs/integrations/cloud/teamcity" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
         <FormControl
           label="TeamCity Access Token"
           errorText={apiKeyErrorText}
           isError={apiKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder="Access Token"
@@ -70,6 +102,7 @@ export default function TeamCityCreateIntegrationPage() {
           label="TeamCity Server URL"
           errorText={serverUrlErrorText}
           isError={serverUrlErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder="https://example.teamcity.com"
@@ -79,8 +112,9 @@ export default function TeamCityCreateIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
           Connect to TeamCity

frontend/src/pages/integrations/teamcity/create.tsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -35,8 +40,8 @@ export default function TeamCityCreateIntegrationPage() {
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
-  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+  const { data: integrationAuth, isLoading: isIntegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
   
@@ -44,7 +49,7 @@ export default function TeamCityCreateIntegrationPage() {
     integrationAuthId: (integrationAuthId as string) ?? "",
     appId: targetAppId
   });
-
+  
   useEffect(() => {
     if (workspace) {
       setSelectedSourceEnvironment(workspace.environments[0].slug);
@@ -74,16 +79,11 @@ export default function TeamCityCreateIntegrationPage() {
       await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
-        app: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.appId === targetAppId)?.name ?? null,
+        app: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.appId === targetAppId)?.name,
         appId: targetAppId,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: targetEnvironment ? targetEnvironment.name : null,
-        targetEnvironmentId: targetEnvironment ? targetEnvironment.buildConfigId : null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
+        targetEnvironment: targetEnvironment?.name,
+        targetEnvironmentId: targetEnvironment?.buildConfigId,
         secretPath
       });
 
@@ -107,9 +107,37 @@ export default function TeamCityCreateIntegrationPage() {
     filteredBuildConfigs &&
     targetAppId ? (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">TeamCity Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+      <Head>
+        <title>Set Up TeamCity Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment or folders in Infisical you want to sync to which project in TeamCity."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/TeamCity.png"
+                height={28}
+                width={28}
+                alt="TeamCity logo"
+              />
+            </div>
+            <span className="ml-2">TeamCity Integration</span>
+            <Link href="https://infisical.com/docs/integrations/cloud/teamcity" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -125,14 +153,14 @@ export default function TeamCityCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <FormControl label="Secrets Path" className="px-6">
           <Input
             value={secretPath}
             onChange={(evt) => setSecretPath(evt.target.value)}
             placeholder="Provide a path, default is /"
           />
         </FormControl>
-        <FormControl label="TeamCity Project" className="mt-4">
+        <FormControl label="TeamCity Project" className="px-6">
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}
@@ -155,7 +183,7 @@ export default function TeamCityCreateIntegrationPage() {
             )}
           </Select>
         </FormControl>
-        <FormControl label="Team City Build Config (Optional)" className="mt-4">
+        <FormControl label="Team City Build Config (Optional)"  className="px-6">
           <Select
             value={targetBuildConfigId}
             onValueChange={(val) => setTargetBuildConfigId(val)}
@@ -174,7 +202,8 @@ export default function TeamCityCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
@@ -183,7 +212,25 @@ export default function TeamCityCreateIntegrationPage() {
       </Card>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up TeamCity Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isIntegrationAuthLoading || isIntegrationAuthAppsLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
+        <p>
+          Something went wrong. Please contact <a
+            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:[email protected]"
+          >
+            support@infisical.com
+          </a> if the issue persists.
+        </p>
+      </div>}
+    </div>
   );
 }
 

frontend/src/pages/integrations/terraform-cloud/authorize.tsx

@@ -38,9 +38,7 @@ export default function TerraformCloudCreateIntegrationPage() {
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "terraform-cloud",
         accessId: workspacesId,
-        accessToken: apiKey,
-        url: null,
-        namespace: null
+        accessToken: apiKey
       });
 
       setIsLoading(false);

frontend/src/pages/integrations/terraform-cloud/create.tsx

@@ -76,17 +76,9 @@ export default function TerraformCloudCreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,
-        appId:
-          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
-            ?.appId ?? null,
+        appId: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)?.appId,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
         targetService: variableType,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
 

frontend/src/pages/integrations/travisci/authorize.tsx

@@ -28,10 +28,7 @@ export default function TravisCICreateIntegrationPage() {
       const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "travisci",
-        accessToken: apiKey,
-        accessId: null,
-        url: null,
-        namespace: null
+        accessToken: apiKey
       });
 
       setIsLoading(false);

frontend/src/pages/integrations/travisci/create.tsx

@@ -64,17 +64,8 @@ export default function TravisCICreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,
-        appId:
-          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
-            ?.appId ?? null,
+        appId: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)?.appId,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
 

frontend/src/pages/integrations/vercel/create.tsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -42,7 +47,7 @@ export default function VercelCreateIntegrationPage() {
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -83,7 +88,7 @@ export default function VercelCreateIntegrationPage() {
 
       if (!targetApp || !targetApp.appId) return;
 
-      const path = targetEnvironment === "preview" && targetBranch !== "" ? targetBranch : null;
+      const path = targetEnvironment === "preview" && targetBranch !== "" ? targetBranch : undefined;
 
       await mutateAsync({
         integrationAuthId: integrationAuth?._id,
@@ -92,12 +97,7 @@ export default function VercelCreateIntegrationPage() {
         appId: targetApp.appId,
         sourceEnvironment: selectedSourceEnvironment,
         targetEnvironment,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
         path,
-        region: null,
         secretPath
       });
 
@@ -114,10 +114,38 @@ export default function VercelCreateIntegrationPage() {
     integrationAuthApps &&
     targetAppId &&
     targetEnvironment ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">Vercel Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up Vercel Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Select which environment or folder in Infisical you want to sync to Vercel's environment variables."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Vercel.png"
+                height={30}
+                width={30}
+                alt="Vercel logo"
+              />
+            </div>
+            <span className="ml-2">Vercel Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/vercel" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <FormControl label="Infisical Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -133,14 +161,14 @@ export default function VercelCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <FormControl label="Secrets Path" className="px-6">
           <Input
             value={secretPath}
             onChange={(evt) => setSecretPath(evt.target.value)}
             placeholder="Provide a path, default is /"
           />
         </FormControl>
-        <FormControl label="Vercel App">
+        <FormControl label="Vercel App" className="px-6">
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}
@@ -163,7 +191,7 @@ export default function VercelCreateIntegrationPage() {
             )}
           </Select>
         </FormControl>
-        <FormControl label="Vercel App Environment">
+        <FormControl label="Vercel App Environment" className="px-6">
           <Select
             value={targetEnvironment}
             onValueChange={(val) => setTargetEnvironment(val)}
@@ -180,7 +208,7 @@ export default function VercelCreateIntegrationPage() {
           </Select>
         </FormControl>
         {targetEnvironment === "preview" && filteredBranches && (
-          <FormControl label="Vercel Preview Branch (Optional)">
+          <FormControl label="Vercel Preview Branch (Optional)" className="px-6">
             <Select
               value={targetBranch}
               onValueChange={(val) => setTargetBranch(val)}
@@ -197,16 +225,40 @@ export default function VercelCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mt-2 mb-6 ml-auto mr-6"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
+      <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
+        <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
+        <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in Vercel with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up Vercel Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isIntegrationAuthAppsLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
+        <p>
+          Something went wrong. Please contact <a
+            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:[email protected]"
+          >
+            support@infisical.com
+          </a> if the issue persists.
+        </p>
+      </div>}
+    </div>
   );
 }
 

frontend/src/pages/integrations/windmill/authorize.tsx

@@ -29,10 +29,7 @@ export default function WindmillCreateIntegrationPage() {
       const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "windmill",
-        accessToken: apiKey,
-        accessId: null,
-        url: null,
-        namespace: null
+        accessToken: apiKey
       });
   
       setIsLoading(false);

frontend/src/pages/integrations/windmill/create.tsx

@@ -65,17 +65,8 @@ export default function WindmillCreateIntegrationPage() {
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,
-        appId:
-          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
-            ?.appId ?? null,
+        appId: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)?.appId,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
-        targetEnvironmentId: null,
-        targetService: null,
-        targetServiceId: null,
-        owner: null,
-        path: null,
-        region: null,
         secretPath
       });
 

frontend/src/pages/login/index.tsx

@@ -9,7 +9,7 @@ export default function LoginPage() {
   const { t } = useTranslation();
 
   return (
-    <div className="flex h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
+    <div className="flex min-h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
       <Head>
         <title>{t("common.head-title", { title: t("login.title") })}</title>
         <link rel="icon" href="/infisical.ico" />

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

@@ -1,21 +1,28 @@
 import { useTranslation } from "react-i18next";
 import Head from "next/head";
 
+import { OrgPermissionActions, OrgPermissionSubjects, TOrgPermission } from "@app/context";
+import { withPermission } from "@app/hoc";
 import { BillingSettingsPage } from "@app/views/Settings/BillingSettingsPage";
 
-export default function SettingsBilling() {
-  const { t } = useTranslation();
+const SettingsBilling = withPermission<{}, TOrgPermission>(
+  () => {
+    const { t } = useTranslation();
 
-  return (
-    <div className="h-full bg-bunker-800">
-      <Head>
-        <title>{t("common.head-title", { title: t("billing.title") })}</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
-      </Head>
-      <BillingSettingsPage />
-    </div>
-  );
-}
+    return (
+      <div className="h-full bg-bunker-800">
+        <Head>
+          <title>{t("common.head-title", { title: t("billing.title") })}</title>
+          <link rel="icon" href="/infisical.ico" />
+          <meta property="og:image" content="/images/message.png" />
+        </Head>
+        <BillingSettingsPage />
+      </div>
+    );
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Billing }
+);
 
-SettingsBilling.requireAuth = true;
+Object.assign(SettingsBilling, { requireAuth: true });
+
+export default SettingsBilling;

frontend/src/pages/org/[id]/secret-scanning/index.tsx

@@ -1,89 +1,133 @@
 import { useEffect, useState } from "react";
 import Head from "next/head";
-import { useRouter } from "next/router"
+import { useRouter } from "next/router";
 
+import { OrgPermissionCan } from "@app/components/permissions";
 import { Button } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { withPermission } from "@app/hoc";
 import { SecretScanningLogsTable } from "@app/views/SecretScanning/components";
 
 import createNewIntegrationSession from "../../../api/secret-scanning/createSecretScanningSession";
 import getInstallationStatus from "../../../api/secret-scanning/getInstallationStatus";
 import linkGitAppInstallationWithOrganization from "../../../api/secret-scanning/linkGitAppInstallationWithOrganization";
 
-export default function SecretScanning() {
-  const router = useRouter()
-  const queryParams = router.query
-  const [integrationEnabled, setIntegrationStatus] = useState(false)
+const SecretScanning = withPermission(
+  () => {
+    const router = useRouter();
+    const queryParams = router.query;
+    const [integrationEnabled, setIntegrationStatus] = useState(false);
 
-  useEffect(()=>{
-    const linkInstallation = async () => {
-      if (typeof queryParams.state === "string" && typeof queryParams.installation_id === "string"){
-        try {
-          const isLinked = await linkGitAppInstallationWithOrganization(queryParams.installation_id as string, queryParams.state as string)
-          if (isLinked){
-            router.reload()
+    useEffect(() => {
+      const linkInstallation = async () => {
+        if (
+          typeof queryParams.state === "string" &&
+          typeof queryParams.installation_id === "string"
+        ) {
+          try {
+            const isLinked = await linkGitAppInstallationWithOrganization(
+              queryParams.installation_id as string,
+              queryParams.state as string
+            );
+            if (isLinked) {
+              router.reload();
+            }
+
+            console.log("installation verification complete");
+          } catch (e) {
+            console.log("app installation is stale, start new session", e);
           }
-          
-          console.log("installation verification complete")
-        }catch (e){
-          console.log("app installation is stale, start new session", e)
         }
-      }
-    }
+      };
 
-    const fetchInstallationStatus = async () => {
-      const status = await getInstallationStatus(String(localStorage.getItem("orgData.id")))
-      setIntegrationStatus(status)
-    }
+      const fetchInstallationStatus = async () => {
+        const status = await getInstallationStatus(String(localStorage.getItem("orgData.id")));
+        setIntegrationStatus(status);
+      };
 
-    fetchInstallationStatus()
-    linkInstallation()
-  },[queryParams.state, queryParams.installation_id])
+      fetchInstallationStatus();
+      linkInstallation();
+    }, [queryParams.state, queryParams.installation_id]);
 
-  const generateNewIntegrationSession = async () => {
-    const session = await createNewIntegrationSession(String(localStorage.getItem("orgData.id")))
-    router.push(`https://github.com/apps/infisical-radar/installations/new?state=${session.sessionId}`)
-  }
+    const generateNewIntegrationSession = async () => {
+      const session = await createNewIntegrationSession(String(localStorage.getItem("orgData.id")));
+      router.push(
+        `https://github.com/apps/infisical-radar/installations/new?state=${session.sessionId}`
+      );
+    };
 
-  return (
-    <div>
-      <Head>
-        <title>Secret scanning</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
-      </Head>
-      <div className="flex justify-center bg-bunker-800 text-white w-full h-full">
-        <div className="max-w-7xl px-6 w-full">
-          <div className="mt-6 text-3xl font-semibold text-gray-200">Secret Scanning</div>      
-          <div className="mb-6 text-lg text-mineshaft-300">Automatically monitor your GitHub activity and prevent secret leaks</div>    
-          <div className="relative flex justify-between bg-mineshaft-800 border border-mineshaft-600 rounded-md p-6 mb-6">
-            <div className="flex flex-col items-start">
-              <div className="flex flex-row mb-1">Secret Scanning Status: {integrationEnabled ? <p className="text-green ml-1.5 font-semibold">Enabled</p> : <p className="text-red ml-1.5 font-semibold">Not enabled</p>}</div>
-              <div>{integrationEnabled ? <p className="text-mineshaft-300">Your GitHub organization is connected to Infisical, and is being continuously monitored for secret leaks.</p> : <p className="text-mineshaft-300">Connect your GitHub organization to Infisical.</p>}</div>
+    return (
+      <div>
+        <Head>
+          <title>Secret scanning</title>
+          <link rel="icon" href="/infisical.ico" />
+          <meta property="og:image" content="/images/message.png" />
+        </Head>
+        <div className="flex justify-center bg-bunker-800 text-white w-full h-full">
+          <div className="max-w-7xl px-6 w-full">
+            <div className="mt-6 text-3xl font-semibold text-gray-200">Secret Scanning</div>
+            <div className="mb-6 text-lg text-mineshaft-300">
+              Automatically monitor your GitHub activity and prevent secret leaks
             </div>
-            {integrationEnabled ? (
-              <div>
-                <div className="absolute right-[2.5rem] top-[2.5rem] animate-ping rounded-full h-6 w-6 bg-green flex items-center justify-center"/>
-                <div className="absolute right-[2.63rem] top-[2.63rem] animate-ping rounded-full h-5 w-5 bg-green flex items-center justify-center"/>
-                <div className="absolute right-[2.82rem] top-[2.82rem] animate-ping rounded-full h-3.5 w-3.5 bg-green flex items-center justify-center"/>
+            <div className="relative flex justify-between bg-mineshaft-800 border border-mineshaft-600 rounded-md p-6 mb-6">
+              <div className="flex flex-col items-start">
+                <div className="flex flex-row mb-1">
+                  Secret Scanning Status:{" "}
+                  {integrationEnabled ? (
+                    <p className="text-green ml-1.5 font-semibold">Enabled</p>
+                  ) : (
+                    <p className="text-red ml-1.5 font-semibold">Not enabled</p>
+                  )}
+                </div>
+                <div>
+                  {integrationEnabled ? (
+                    <p className="text-mineshaft-300">
+                      Your GitHub organization is connected to Infisical, and is being continuously
+                      monitored for secret leaks.
+                    </p>
+                  ) : (
+                    <p className="text-mineshaft-300">
+                      Connect your GitHub organization to Infisical.
+                    </p>
+                  )}
+                </div>
               </div>
-            ) : (
-              <div className="flex items-center h-[3.25rem]">
-                <Button
-                  variant="solid"
-                  colorSchema="primary"
-                  onClick={generateNewIntegrationSession}
-                  className="py-2 h-min"
-                >
-                  Integrate with GitHub
-                </Button>
-              </div>
-            )}
+              {integrationEnabled ? (
+                <div>
+                  <div className="absolute right-[2.5rem] top-[2.5rem] animate-ping rounded-full h-6 w-6 bg-green flex items-center justify-center" />
+                  <div className="absolute right-[2.63rem] top-[2.63rem] animate-ping rounded-full h-5 w-5 bg-green flex items-center justify-center" />
+                  <div className="absolute right-[2.82rem] top-[2.82rem] animate-ping rounded-full h-3.5 w-3.5 bg-green flex items-center justify-center" />
+                </div>
+              ) : (
+                <div className="flex items-center h-[3.25rem]">
+                  <OrgPermissionCan
+                    I={OrgPermissionActions.Create}
+                    a={OrgPermissionSubjects.SecretScanning}
+                  >
+                    {(isAllowed) => (
+                      <Button
+                        variant="solid"
+                        colorSchema="primary"
+                        onClick={generateNewIntegrationSession}
+                        className="py-2 h-min"
+                        isDisabled={!isAllowed}
+                      >
+                        Integrate with GitHub
+                      </Button>
+                    )}
+                  </OrgPermissionCan>
+                </div>
+              )}
+            </div>
+            <SecretScanningLogsTable />
           </div>
-          <SecretScanningLogsTable />
         </div>
       </div>
-    </div>
-  );
-}
+    );
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.SecretScanning }
+);
 
-SecretScanning.requireAuth = true;
+Object.assign(SecretScanning, { requireAuth: true });
+
+export default SecretScanning;