Merge remote-tracking branch 'origin' into ssh-certs

frontend/src/components/navigation/NavHeader.tsx

@@ -9,6 +9,7 @@ import { twMerge } from "tailwind-merge";
 
 import { useOrganization, useWorkspace } from "@app/context";
 import { useToggle } from "@app/hooks";
+import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { createNotification } from "../notifications";
 import { IconButton, Select, SelectItem, Tooltip } from "../v2";
@@ -69,7 +70,11 @@ export default function NavHeader({
       <div className="mr-2 flex h-5 w-5 min-w-[1.25rem] items-center justify-center rounded-md bg-primary text-sm text-black">
         {currentOrg?.name?.charAt(0)}
       </div>
-      <Link passHref legacyBehavior href={`/org/${currentOrg?.id}/overview`}>
+      <Link
+        passHref
+        legacyBehavior
+        href={`/org/${currentOrg?.id}/${ProjectType.SecretManager}/overview`}
+      >
         <a className="truncate pl-0.5 text-sm font-semibold text-primary/80 hover:text-primary">
           {currentOrg?.name}
         </a>
@@ -93,7 +98,10 @@ export default function NavHeader({
         <Link
           passHref
           legacyBehavior
-          href={{ pathname: "/project/[id]/secrets/overview", query: { id: router.query.id } }}
+          href={{
+            pathname: `/${ProjectType.SecretManager}/[id]/secrets/overview`,
+            query: { id: router.query.id }
+          }}
         >
           <a className="text-sm font-semibold text-primary/80 hover:text-primary">{pageName}</a>
         </Link>
@@ -130,7 +138,7 @@ export default function NavHeader({
             passHref
             legacyBehavior
             href={{
-              pathname: "/project/[id]/secrets/[env]",
+              pathname: `/${ProjectType.SecretManager}/[id]/secrets/[env]`,
               query: { id: router.query.id, env: router.query.env }
             }}
           >
@@ -199,7 +207,10 @@ export default function NavHeader({
                 <Link
                   passHref
                   legacyBehavior
-                  href={{ pathname: "/project/[id]/secrets/[env]", query }}
+                  href={{
+                    pathname: `/${ProjectType.SecretManager}/[id]/secrets/[env]`,
+                    query
+                  }}
                 >
                   <a
                     className={twMerge(

frontend/src/components/v2/Modal/Modal.tsx

@@ -72,7 +72,7 @@ ModalContent.displayName = "ModalContent";
 
 export type ModalProps = Omit<DialogPrimitive.DialogProps, "open"> & { isOpen?: boolean };
 export const Modal = ({ isOpen, ...props }: ModalProps) => (
-  <DialogPrimitive.Root open={isOpen} {...props} />
+  <DialogPrimitive.Root open={isOpen} {...props} modal/>
 );
 
 export const ModalTrigger = DialogPrimitive.Trigger;

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

@@ -77,11 +77,16 @@ export const selectOrganization = async (data: {
 export const useSelectOrganization = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async (details: { organizationId: string; userAgent?: UserAgentType }) => {
+    mutationFn: async (details: {
+      organizationId: string;
+      userAgent?: UserAgentType;
+      forceSetCredentials?: boolean;
+    }) => {
       const data = await selectOrganization(details);
 
       // If a custom user agent is set, then this session is meant for another consuming application, not the web application.
-      if (!details.userAgent && !data.isMfaEnabled) {
+      if ((!details.userAgent && !data.isMfaEnabled) || details.forceSetCredentials) {
+        localStorage.setItem("orgData.id", details.organizationId);
         SecurityClient.setToken(data.token);
         SecurityClient.setProviderAuthToken("");
       }

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

@@ -7,6 +7,7 @@ export {
   useGetIntegrationAuthBitBucketWorkspaces,
   useGetIntegrationAuthById,
   useGetIntegrationAuthChecklyGroups,
+  useGetIntegrationAuthCircleCIOrganizations,
   useGetIntegrationAuthGithubEnvs,
   useGetIntegrationAuthGithubOrgs,
   useGetIntegrationAuthNorthflankSecretGroups,

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

@@ -8,6 +8,7 @@ import {
   BitBucketEnvironment,
   BitBucketWorkspace,
   ChecklyGroup,
+  CircleCIOrganization,
   Environment,
   HerokuPipelineCoupling,
   IntegrationAuth,
@@ -128,7 +129,9 @@ const integrationAuthKeys = {
     integrationAuthId,
     ...params
   }: TGetIntegrationAuthOctopusDeployScopeValuesDTO) =>
-    [{ integrationAuthId }, "getIntegrationAuthOctopusDeployScopeValues", params] as const
+    [{ integrationAuthId }, "getIntegrationAuthOctopusDeployScopeValues", params] as const,
+  getIntegrationAuthCircleCIOrganizations: (integrationAuthId: string) =>
+    [{ integrationAuthId }, "getIntegrationAuthCircleCIOrganizations"] as const
 };
 
 const fetchIntegrationAuthById = async (integrationAuthId: string) => {
@@ -510,6 +513,15 @@ const fetchIntegrationAuthOctopusDeployScopeValues = async ({
   return data;
 };
 
+const fetchIntegrationAuthCircleCIOrganizations = async (integrationAuthId: string) => {
+  const {
+    data: { organizations }
+  } = await apiRequest.get<{
+    organizations: CircleCIOrganization[];
+  }>(`/api/v1/integration-auth/${integrationAuthId}/circleci/organizations`);
+  return organizations;
+};
+
 export const useGetIntegrationAuthById = (integrationAuthId: string) => {
   return useQuery({
     queryKey: integrationAuthKeys.getIntegrationAuthById(integrationAuthId),
@@ -884,6 +896,13 @@ export const useGetIntegrationAuthTeamCityBuildConfigs = ({
   });
 };
 
+export const useGetIntegrationAuthCircleCIOrganizations = (integrationAuthId: string) => {
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthCircleCIOrganizations(integrationAuthId),
+    queryFn: () => fetchIntegrationAuthCircleCIOrganizations(integrationAuthId)
+  });
+};
+
 export const useAuthorizeIntegration = () => {
   const queryClient = useQueryClient();
 

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

@@ -105,6 +105,19 @@ export enum OctopusDeployScope {
   // tenant, variable set
 }
 
+export type CircleCIOrganization = {
+  name: string;
+  slug: string;
+  projects: {
+    name: string;
+    id: string;
+  }[];
+  contexts: {
+    name: string;
+    id: string;
+  }[];
+};
+
 export type TGetIntegrationAuthOctopusDeployScopeValuesDTO = {
   integrationAuthId: string;
   spaceId: string;
@@ -125,3 +138,8 @@ export type TOctopusDeployVariableSetScopeValues = {
     Name: string;
   }[];
 };
+
+export enum CircleCiScope {
+  Context = "context",
+  Project = "project"
+}

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

@@ -80,6 +80,7 @@ export const useCreateIntegration = () => {
           key: string;
           value: string;
         }[];
+        azureLabel?: string;
         githubVisibility?: string;
         githubVisibilityRepoIds?: string[];
         kmsKeyId?: string;

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

@@ -41,6 +41,7 @@ export type TIntegration = {
       key: string;
       value: string;
     }[];
+    azureLabel?: string;
 
     kmsKeyId?: string;
     secretSuffix?: string;

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

@@ -1,5 +1,6 @@
 import { useMutation, useQuery, useQueryClient, UseQueryOptions } from "@tanstack/react-query";
 
+import SecurityClient from "@app/components/utilities/SecurityClient";
 import { apiRequest } from "@app/config/request";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 
@@ -67,7 +68,7 @@ export const useCreateOrg = (options: { invalidate: boolean } = { invalidate: tr
     mutationFn: async ({ name }: { name: string }) => {
       const {
         data: { organization }
-      } = await apiRequest.post("/api/v2/organizations", {
+      } = await apiRequest.post<{ organization: { id: string } }>("/api/v2/organizations", {
         name
       });
 
@@ -437,10 +438,13 @@ export const useDeleteOrgById = () => {
   return useMutation({
     mutationFn: async ({ organizationId }: { organizationId: string }) => {
       const {
-        data: { organization }
-      } = await apiRequest.delete<{ organization: Organization }>(
+        data: { organization, accessToken }
+      } = await apiRequest.delete<{ organization: Organization; accessToken: string }>(
         `/api/v2/organizations/${organizationId}`
       );
+      SecurityClient.setToken(accessToken);
+      localStorage.removeItem("orgData.id");
+
       return organization;
     },
     onSuccess(_, dto) {

frontend/src/pages/integrations/azure-app-configuration/create.tsx

@@ -10,6 +10,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import queryString from "query-string";
 import { z } from "zod";
 
+import { createNotification } from "@app/components/notifications";
 import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import { useCreateIntegration } from "@app/hooks/api";
 import { IntegrationSyncBehavior } from "@app/hooks/api/integrations/types";
@@ -19,9 +20,11 @@ import {
   Card,
   CardTitle,
   FormControl,
+  FormLabel,
   Input,
   Select,
-  SelectItem
+  SelectItem,
+  Switch
 } from "../../../components/v2";
 import { useGetIntegrationAuthById } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
@@ -39,7 +42,9 @@ const schema = z.object({
   secretPath: z.string().trim().min(1, { message: "Secret path is required" }),
   sourceEnvironment: z.string().trim().min(1, { message: "Source environment is required" }),
   initialSyncBehavior: z.nativeEnum(IntegrationSyncBehavior),
-  secretPrefix: z.string().default("")
+  secretPrefix: z.string().default(""),
+  useLabels: z.boolean().default(false),
+  azureLabel: z.string().min(1).optional()
 });
 
 type TFormSchema = z.infer<typeof schema>;
@@ -60,6 +65,7 @@ export default function AzureAppConfigurationCreateIntegration() {
   const router = useRouter();
   const {
     control,
+    watch,
     setValue,
     handleSubmit,
     formState: { isSubmitting }
@@ -85,16 +91,28 @@ export default function AzureAppConfigurationCreateIntegration() {
     }
   }, [workspace]);
 
+  const shouldUseLabels = watch("useLabels");
+
   const handleIntegrationSubmit = async ({
     secretPath,
+    useLabels,
     sourceEnvironment,
     baseUrl,
     initialSyncBehavior,
-    secretPrefix
+    secretPrefix,
+    azureLabel
   }: TFormSchema) => {
     try {
       if (!integrationAuth?.id) return;
 
+      if (useLabels && !azureLabel) {
+        createNotification({
+          type: "error",
+          text: "Label must be provided when 'Use Labels' is enabled"
+        });
+        return;
+      }
+
       await mutateAsync({
         integrationAuthId: integrationAuth?.id,
         isActive: true,
@@ -103,7 +121,8 @@ export default function AzureAppConfigurationCreateIntegration() {
         secretPath,
         metadata: {
           initialSyncBehavior,
-          secretPrefix
+          secretPrefix,
+          ...(useLabels && { azureLabel })
         }
       });
 
@@ -155,35 +174,70 @@ export default function AzureAppConfigurationCreateIntegration() {
           </div>
         </CardTitle>
         <div className="px-6">
-          <Controller
-            control={control}
-            name="sourceEnvironment"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Project Environment"
-                errorText={error?.message}
-                isError={Boolean(error)}
-              >
-                <Select
-                  className="w-full border border-mineshaft-500"
-                  dropdownContainerClassName="max-w-full"
-                  value={field.value}
-                  onValueChange={(val) => {
-                    field.onChange(val);
-                  }}
+          <div className="">
+            <Controller
+              control={control}
+              name="sourceEnvironment"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Project Environment"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
                 >
-                  {workspace?.environments.map((sourceEnvironment) => (
-                    <SelectItem
-                      value={sourceEnvironment.slug}
-                      key={`source-environment-${sourceEnvironment.slug}`}
+                  <Select
+                    className="w-full border border-mineshaft-500"
+                    dropdownContainerClassName="max-w-full"
+                    value={field.value}
+                    onValueChange={(val) => {
+                      field.onChange(val);
+                    }}
+                  >
+                    {workspace?.environments.map((sourceEnvironment) => (
+                      <SelectItem
+                        value={sourceEnvironment.slug}
+                        key={`source-environment-${sourceEnvironment.slug}`}
+                      >
+                        {sourceEnvironment.name}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+
+            <div className="mb-2 flex w-full flex-col gap-1">
+              <Controller
+                control={control}
+                name="useLabels"
+                render={({ field: { onChange, value } }) => (
+                  <Switch
+                    id="use-environment-labels"
+                    onCheckedChange={(isChecked) => onChange(isChecked)}
+                    isChecked={value}
+                  >
+                    <FormLabel label="Use Labels" />
+                  </Switch>
+                )}
+              />
+
+              {shouldUseLabels && (
+                <Controller
+                  control={control}
+                  name="azureLabel"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      className=""
+                      // label="Label"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
                     >
-                      {sourceEnvironment.name}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </FormControl>
-            )}
-          />
+                      <Input {...field} placeholder="pre-prod" />
+                    </FormControl>
+                  )}
+                />
+              )}
+            </div>
+          </div>
           <Controller
             control={control}
             name="secretPath"

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

@@ -56,7 +56,7 @@ export default function CircleCICreateIntegrationPage() {
           <div className="flex flex-row items-center">
             <div className="inline flex items-center pb-0.5">
               <Image
-                src="/images/integrations/Circle CI.png"
+                src="/images/integrations/CircleCI.png"
                 height={30}
                 width={30}
                 alt="CircleCI logo"

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

@@ -1,293 +1,309 @@
-import { useEffect, useMemo, useState } from "react";
-import Head from "next/head";
+import { Controller, useForm } from "react-hook-form";
 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 { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import queryString from "query-string";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { useCreateIntegration } from "@app/hooks/api";
-
 import {
   Button,
   Card,
   CardTitle,
+  FilterableSelect,
   FormControl,
-  Input,
   Select,
-  SelectItem
-} from "../../../components/v2";
-import {
-  useGetIntegrationAuthApps,
-  useGetIntegrationAuthById
-} from "../../../hooks/api/integrationAuth";
-import { useGetWorkspaceById } from "../../../hooks/api/workspace";
+  SelectItem,
+  Spinner
+} from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
+import { useWorkspace } from "@app/context";
+import { useCreateIntegration } from "@app/hooks/api";
+import { useGetIntegrationAuthCircleCIOrganizations } from "@app/hooks/api/integrationAuth";
+import { CircleCiScope } from "@app/hooks/api/integrationAuth/types";
+
+const formSchema = z.discriminatedUnion("scope", [
+  z.object({
+    scope: z.literal(CircleCiScope.Context),
+    secretPath: z.string().default("/"),
+    sourceEnvironment: z.object({ name: z.string(), slug: z.string() }),
+    targetOrg: z.object({ name: z.string().min(1), slug: z.string().min(1) }),
+    targetContext: z.object({ name: z.string().min(1), id: z.string().min(1) })
+  }),
+  z.object({
+    scope: z.literal(CircleCiScope.Project),
+    secretPath: z.string().default("/"),
+    sourceEnvironment: z.object({ name: z.string(), slug: z.string() }),
+    targetOrg: z.object({ name: z.string().min(1), slug: z.string().min(1) }),
+    targetProject: z.object({ name: z.string().min(1), id: z.string().min(1) })
+  })
+]);
+
+type TFormData = z.infer<typeof formSchema>;
 
 export default function CircleCICreateIntegrationPage() {
   const router = useRouter();
-  const { mutateAsync } = useCreateIntegration();
+  const { mutateAsync, isLoading: isCreatingIntegration } = useCreateIntegration();
+  const { currentWorkspace, isLoading: isProjectLoading } = useWorkspace();
 
-  const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
+  const integrationAuthId = router.query.integrationAuthId as string;
 
-  const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
-  const { data: integrationAuth, isLoading: isintegrationAuthLoading } = useGetIntegrationAuthById(
-    (integrationAuthId as string) ?? ""
-  );
-  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } =
-    useGetIntegrationAuthApps({
-      integrationAuthId: (integrationAuthId as string) ?? ""
-    });
-
-  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
-  const [targetOrganization, setTargetOrganization] = useState("");
-  const [secretPath, setSecretPath] = useState("/");
-
-  const [targetProjectId, setTargetProjectId] = useState("");
-
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    if (workspace) {
-      setSelectedSourceEnvironment(workspace.environments[0].slug);
+  const { control, watch, handleSubmit, setValue } = useForm<TFormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      secretPath: "/",
+      sourceEnvironment: currentWorkspace?.environments[0],
+      scope: CircleCiScope.Project
     }
-  }, [workspace]);
+  });
 
-  const handleButtonClick = async () => {
+  const selectedScope = watch("scope");
+  const selectedOrg = watch("targetOrg");
+
+  const { data: circleCIOrganizations, isLoading: isCircleCIOrganizationsLoading } =
+    useGetIntegrationAuthCircleCIOrganizations(integrationAuthId);
+
+  const selectedOrganizationEntry = selectedOrg
+    ? circleCIOrganizations?.find((org) => org.slug === selectedOrg.slug)
+    : undefined;
+
+  const onSubmit = async (data: TFormData) => {
     try {
-      if (!integrationAuth?.id) return;
-
-      if (!targetProjectId || targetOrganization === "none") {
-        createNotification({
-          type: "error",
-          text: "Please select a project"
+      if (data.scope === CircleCiScope.Context) {
+        await mutateAsync({
+          scope: data.scope,
+          integrationAuthId,
+          isActive: true,
+          sourceEnvironment: data.sourceEnvironment.slug,
+          app: data.targetContext.name,
+          appId: data.targetContext.id,
+          owner: data.targetOrg.name,
+          secretPath: data.secretPath
+        });
+      } else {
+        await mutateAsync({
+          scope: data.scope,
+          integrationAuthId,
+          isActive: true,
+          app: data.targetProject.name, // project name
+          owner: data.targetOrg.name, // organization name
+          appId: data.targetProject.id, // project id (used for syncing)
+          sourceEnvironment: data.sourceEnvironment.slug,
+          secretPath: data.secretPath
         });
-        setIsLoading(false);
-        return;
       }
 
-      setIsLoading(true);
-
-      const selectedApp = integrationAuthApps?.find(
-        (integrationAuthApp) => integrationAuthApp.appId === targetProjectId
-      );
-
-      if (!selectedApp) {
-        createNotification({
-          type: "error",
-          text: "Invalid project selected"
-        });
-        setIsLoading(false);
-        return;
-      }
-
-      await mutateAsync({
-        integrationAuthId: integrationAuth?.id,
-        isActive: true,
-        app: selectedApp.name, // project name
-        owner: selectedApp.owner, // organization name
-        appId: selectedApp.appId, // project id (used for syncing)
-        sourceEnvironment: selectedSourceEnvironment,
-        secretPath
+      createNotification({
+        type: "success",
+        text: "Successfully created integration"
       });
-
-      setIsLoading(false);
-
-      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
+      router.push(`/integrations/${currentWorkspace?.id}`);
     } catch (err) {
+      createNotification({
+        type: "error",
+        text: "Failed to create integration"
+      });
       console.error(err);
     }
   };
 
-  const filteredProjects = useMemo(() => {
-    if (!integrationAuthApps) return [];
+  if (isProjectLoading || isCircleCIOrganizationsLoading)
+    return (
+      <div className="flex h-full w-full items-center justify-center p-24">
+        <Spinner />
+      </div>
+    );
 
-    return integrationAuthApps.filter((integrationAuthApp) => {
-      return integrationAuthApp.owner === targetOrganization;
-    });
-  }, [integrationAuthApps, targetOrganization]);
-
-  const filteredOrganizations = useMemo(() => {
-    const organizations = new Set<string>();
-
-    if (integrationAuthApps) {
-      integrationAuthApps.forEach((integrationAuthApp) => {
-        if (!integrationAuthApp.owner) return;
-        organizations.add(integrationAuthApp.owner);
-      });
-    }
-
-    return Array.from(organizations);
-  }, [integrationAuthApps]);
-
-  return integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps ? (
-    <div className="flex h-full w-full flex-col 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">
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="flex h-full w-full items-center justify-center"
+    >
+      <Card className="max-w-lg rounded-md p-8 pt-4">
         <CardTitle
-          className="px-6 text-left text-xl"
-          subTitle="Choose which environment or folder in Infisical you want to sync to CircleCI environment variables."
+          className="w-full px-0 text-left text-xl"
+          subTitle="Choose which environment or folder in Infisical you want to sync to CircleCI."
         >
-          <div className="flex flex-row items-center">
-            <div className="flex items-center pb-0.5">
+          <div className="flex w-full flex-row items-center justify-between">
+            <div className="flex flex-row items-center gap-1.5">
               <Image
-                src="/images/integrations/Circle CI.png"
+                src="/images/integrations/CircleCI.png"
                 height={30}
                 width={30}
                 alt="CircleCI logo"
               />
+
+              <span className="">CircleCI Context Integration </span>
             </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 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  Docs
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="ml-1.5 mb-[0.07rem] text-xxs"
-                  />
-                </div>
-              </a>
+
+            <Link
+              href="https://infisical.com/docs/integrations/cicd/circleci"
+              target="_blank"
+              rel="noopener noreferrer"
+              passHref
+            >
+              <div className="ml-2 mb-1 flex cursor-pointer flex-row items-center gap-0.5 rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
+                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                Docs
+                <FontAwesomeIcon
+                  icon={faArrowUpRightFromSquare}
+                  className="ml-1.5 mb-[0.07rem] text-xxs"
+                />
+              </div>
             </Link>
           </div>
         </CardTitle>
-
-        <FormControl label="Project Environment" className="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="px-6">
-          <Input
-            value={secretPath}
-            onChange={(evt) => setSecretPath(evt.target.value)}
-            placeholder="Provide a path, default is /"
-          />
-        </FormControl>
-
-        <FormControl label="CircleCI Organization" className="px-6">
-          <Select
-            value={targetOrganization}
-            onValueChange={(val) => {
-              setTargetOrganization(val);
-              setTargetProjectId("none");
-            }}
-            className="w-full border border-mineshaft-500"
-            isDisabled={filteredOrganizations.length === 0}
-          >
-            {filteredOrganizations.length > 0 ? (
-              filteredOrganizations.map((org) => (
-                <SelectItem value={org} key={`target-org-${org}`}>
-                  {org}
-                </SelectItem>
-              ))
-            ) : (
-              <SelectItem value="none" key="target-app-none">
-                No organizations found
-              </SelectItem>
-            )}
-          </Select>
-        </FormControl>
-
-        {targetOrganization && (
-          <FormControl label="CircleCI Project ID" className="px-6">
-            <Select
-              value={targetProjectId}
-              onValueChange={(val) => {
-                setTargetProjectId(val);
-              }}
-              className="w-full border border-mineshaft-500"
-              isDisabled={filteredProjects.length === 0}
+        <Controller
+          control={control}
+          name="sourceEnvironment"
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error)}
+              label="Project Environment"
             >
-              {filteredProjects.length > 0 ? (
-                filteredProjects.map((project) => (
-                  <SelectItem value={project.appId!} key={`target-project-${project.owner}`}>
-                    {project.name}
-                  </SelectItem>
-                ))
-              ) : (
-                <SelectItem value="none" key="target-app-none">
-                  No projects found
-                </SelectItem>
-              )}
-            </Select>
-          </FormControl>
+              <FilterableSelect
+                getOptionValue={(option) => option.slug}
+                value={value}
+                getOptionLabel={(option) => option.name}
+                onChange={onChange}
+                options={currentWorkspace?.environments}
+                placeholder="Select a project environment"
+                isDisabled={!currentWorkspace?.environments.length}
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          name="secretPath"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl label="Secrets Path" errorText={error?.message} isError={Boolean(error)}>
+              <SecretPathInput {...field} />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          name="targetOrg"
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error)}
+              label="CircleCI Organization"
+            >
+              <FilterableSelect
+                getOptionValue={(option) => option.slug}
+                value={value}
+                getOptionLabel={(option) => option.name}
+                onChange={(e) => {
+                  setValue("targetProject", {
+                    name: "",
+                    id: ""
+                  });
+                  setValue("targetContext", {
+                    name: "",
+                    id: ""
+                  });
+
+                  onChange(e);
+                }}
+                options={circleCIOrganizations}
+                placeholder={
+                  circleCIOrganizations?.length
+                    ? "Select an organization..."
+                    : "No organizations found..."
+                }
+                isDisabled={!circleCIOrganizations?.length}
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          name="scope"
+          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+            <FormControl label="Scope" errorText={error?.message} isError={Boolean(error)}>
+              <Select
+                defaultValue={field.value}
+                onValueChange={(e) => {
+                  onChange(e);
+                }}
+                className="w-full border border-mineshaft-500"
+              >
+                <SelectItem value={CircleCiScope.Project}>Project</SelectItem>
+                <SelectItem value={CircleCiScope.Context}>Context</SelectItem>
+              </Select>
+            </FormControl>
+          )}
+        />
+        {selectedScope === CircleCiScope.Context && selectedOrganizationEntry && (
+          <Controller
+            control={control}
+            name="targetContext"
+            render={({ field: { value, onChange }, fieldState: { error } }) => (
+              <FormControl
+                errorText={error?.message}
+                isError={Boolean(error)}
+                label="CircleCI Context"
+              >
+                <FilterableSelect
+                  value={value}
+                  getOptionValue={(option) => option.id!}
+                  getOptionLabel={(option) => option.name}
+                  onChange={onChange}
+                  options={selectedOrganizationEntry?.contexts}
+                  placeholder={
+                    selectedOrganizationEntry.contexts?.length
+                      ? "Select a context..."
+                      : "No contexts found..."
+                  }
+                  isDisabled={!selectedOrganizationEntry.contexts?.length}
+                />
+              </FormControl>
+            )}
+          />
+        )}
+        {selectedScope === CircleCiScope.Project && selectedOrganizationEntry && (
+          <Controller
+            control={control}
+            name="targetProject"
+            render={({ field: { value, onChange }, fieldState: { error } }) => (
+              <FormControl
+                errorText={error?.message}
+                isError={Boolean(error)}
+                label="CircleCI Project"
+              >
+                <FilterableSelect
+                  value={value}
+                  getOptionValue={(option) => option.id!}
+                  getOptionLabel={(option) => option.name}
+                  onChange={onChange}
+                  options={selectedOrganizationEntry?.projects}
+                  placeholder={
+                    selectedOrganizationEntry.projects?.length
+                      ? "Select a project..."
+                      : "No projects found..."
+                  }
+                  isDisabled={!selectedOrganizationEntry.projects?.length}
+                />
+              </FormControl>
+            )}
+          />
         )}
         <Button
-          onClick={handleButtonClick}
+          type="submit"
           colorSchema="primary"
-          variant="outline_bg"
-          className="mb-6 mt-2 ml-auto mr-6 w-min"
-          isLoading={isLoading}
-          isDisabled={integrationAuthApps.length === 0}
+          className="mt-4"
+          isLoading={isCreatingIntegration}
+          isDisabled={isCreatingIntegration}
         >
           Create Integration
         </Button>
       </Card>
-      <div className="mt-6 w-full max-w-md border-t border-mineshaft-800" />
-      <div className="mt-6 flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4">
-        <div className="flex flex-row items-center">
-          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
-          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
-        </div>
-        <span className="mt-4 text-sm text-mineshaft-300">
-          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 className="flex h-full w-full items-center justify-center">
-      <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="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
-          <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
-          <p>
-            Something went wrong. Please contact{" "}
-            <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
-              target="_blank"
-              rel="noopener noreferrer"
-              href="mailto:[email protected]"
-            >
-              support@infisical.com
-            </a>{" "}
-            if the issue persists.
-          </p>
-        </div>
-      )}
-    </div>
+    </form>
   );
 }
 

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

@@ -1,6 +1,7 @@
 import { integrationSlugNameMapping } from "public/data/frequentConstants";
 
 import { FormLabel } from "@app/components/v2";
+import { CircleCiScope } from "@app/hooks/api/integrationAuth/types";
 import { IntegrationMappingBehavior, TIntegrationWithEnv } from "@app/hooks/api/integrations/types";
 
 type Props = {
@@ -46,6 +47,11 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
         case "qovery":
           return integration.scope;
         case "circleci":
+          if (integration.scope === CircleCiScope.Context) {
+            return "Context";
+          }
+
+          return "Project";
         case "terraform-cloud":
           return "Project";
         case "aws-secret-manager":
@@ -77,7 +83,6 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
             return `${integration.owner}`;
           }
           return `${integration.owner}/${integration.app}`;
-
         case "aws-parameter-store":
         case "rundeck":
           return `${integration.path}`;

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

@@ -14,6 +14,7 @@ const metadataMappings: Record<keyof NonNullable<TIntegrationWithEnv["metadata"]
   githubVisibilityRepoIds: "Github Visibility Repo Ids",
   shouldAutoRedeploy: "Auto Redeploy Target Application When Secrets Change",
   secretAWSTag: "Tags For Secrets Stored In AWS",
+  azureLabel: "Azure Label",
   kmsKeyId: "AWS KMS Key ID",
   secretSuffix: "Secret Suffix",
   secretPrefix: "Secret Prefix",
@@ -86,7 +87,7 @@ export const IntegrationSettingsSection = ({ integration }: Props) => {
           Object.entries(integration.metadata).map(([key, value]) => (
             <div key={key} className="flex flex-col">
               <p className="text-sm text-gray-400">
-                {metadataMappings[key as keyof typeof metadataMappings]}
+                {!!value && metadataMappings[key as keyof typeof metadataMappings]}
               </p>
               <p className="text-sm text-gray-200">{renderValue(key as MetadataKey, value)}</p>
             </div>

frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationDetails.tsx

@@ -1,4 +1,5 @@
 import { FormLabel } from "@app/components/v2";
+import { CircleCiScope } from "@app/hooks/api/integrationAuth/types";
 import { IntegrationMappingBehavior, TIntegration } from "@app/hooks/api/integrations/types";
 
 type Props = {
@@ -52,7 +53,8 @@ export const IntegrationDetails = ({ integration }: Props) => {
           <FormLabel
             label={
               (integration.integration === "qovery" && integration?.scope) ||
-              (integration.integration === "circleci" && "Project") ||
+              (integration.integration === "circleci" &&
+                (integration.scope === CircleCiScope.Context ? "Context" : "Project")) ||
               (integration.integration === "bitbucket" && "Repository") ||
               (integration.integration === "octopus-deploy" && "Project") ||
               (integration.integration === "aws-secret-manager" && "Secret") ||

frontend/src/views/Login/Login.utils.tsx

@@ -7,7 +7,7 @@ import { ProjectType } from "@app/hooks/api/workspace/types";
 import { queryClient } from "@app/reactQuery";
 
 export const navigateUserToOrg = async (router: NextRouter, organizationId?: string) => {
-  const userOrgs = await fetchOrganizations();
+  const userOrgs = await fetchOrganizations().catch(() => []);
 
   const nonAuthEnforcedOrgs = userOrgs.filter((org) => !org.authEnforced);
 

frontend/src/views/Org/components/CreateOrgModal.tsx

@@ -6,7 +6,7 @@ import z from "zod";
 
 import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
-import { useCreateOrg, useSelectOrganization } from "@app/hooks/api";
+import { useCreateOrg, useGetOrganizations, useSelectOrganization } from "@app/hooks/api";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 
 const schema = z
@@ -23,9 +23,10 @@ interface CreateOrgModalProps {
 }
 
 export const CreateOrgModal: FC<CreateOrgModalProps> = ({ isOpen, onClose }) => {
-  
   const router = useRouter();
 
+  const { refetch: refetchOrganizations } = useGetOrganizations();
+
   const {
     control,
     handleSubmit,
@@ -50,19 +51,21 @@ export const CreateOrgModal: FC<CreateOrgModalProps> = ({ isOpen, onClose }) =>
       });
 
       await selectOrg({
-        organizationId: organization.id
+        organizationId: organization.id,
+        forceSetCredentials: true
       });
 
+      await refetchOrganizations();
+
       createNotification({
         text: "Successfully created organization",
         type: "success"
       });
 
-      if (router.isReady) router.push(`/org/${organization.id}/${ProjectType.SecretManager}/overview`);
+      if (router.isReady)
+        router.push(`/org/${organization.id}/${ProjectType.SecretManager}/overview`);
       else window.location.href = `/org/${organization.id}/${ProjectType.SecretManager}/overview`;
 
-      localStorage.setItem("orgData.id", organization.id);
-
       reset();
       onClose();
     } catch (err) {

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -1125,6 +1125,7 @@ export const SecretOverviewPage = () => {
           bodyClassName="overflow-visible"
           title="Create Secrets"
           subTitle="Create a secret across multiple environments"
+          onPointerDownOutside={(e) => e.preventDefault()}
         >
           <CreateSecretForm
             secretPath={secretPath}