Merge branch 'ENG-3506' into ENG-3506-LDAP

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AppConnectionForm.tsx

@@ -12,6 +12,7 @@ import { AppConnectionHeader } from "../AppConnectionHeader";
 import { OnePassConnectionForm } from "./1PasswordConnectionForm";
 import { Auth0ConnectionForm } from "./Auth0ConnectionForm";
 import { AwsConnectionForm } from "./AwsConnectionForm";
+import { AzureADCSConnectionForm } from "./AzureADCSConnectionForm";
 import { AzureAppConfigurationConnectionForm } from "./AzureAppConfigurationConnectionForm";
 import { AzureClientSecretsConnectionForm } from "./AzureClientSecretsConnectionForm";
 import { AzureDevOpsConnectionForm } from "./AzureDevOpsConnectionForm";
@@ -96,6 +97,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
       return <AzureKeyVaultConnectionForm onSubmit={onSubmit} />;
     case AppConnection.AzureAppConfiguration:
       return <AzureAppConfigurationConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.AzureADCS:
+      return <AzureADCSConnectionForm onSubmit={onSubmit} />;
     case AppConnection.Databricks:
       return <DatabricksConnectionForm onSubmit={onSubmit} />;
     case AppConnection.Humanitec:
@@ -208,6 +211,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
       return (
         <AzureAppConfigurationConnectionForm appConnection={appConnection} onSubmit={onSubmit} />
       );
+    case AppConnection.AzureADCS:
+      return <AzureADCSConnectionForm appConnection={appConnection} onSubmit={onSubmit} />;
     case AppConnection.Databricks:
       return <DatabricksConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     case AppConnection.Humanitec:

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureADCSConnectionForm.tsx

@@ -0,0 +1,294 @@
+import { useState } from "react";
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Tab } from "@headlessui/react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import {
+  Button,
+  FormControl,
+  Input,
+  ModalClose,
+  SecretInput,
+  Select,
+  SelectItem,
+  Switch,
+  TextArea,
+  Tooltip
+} from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { AzureADCSConnectionMethod, TAzureADCSConnection } from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TAzureADCSConnection;
+  onSubmit: (formData: FormData) => Promise<void>;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.AzureADCS)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(AzureADCSConnectionMethod.UsernamePassword),
+    credentials: z.object({
+      adcsUrl: z
+        .string()
+        .trim()
+        .min(1, "ADCS URL required")
+        .refine((value) => value.startsWith("https://"), "ADCS URL must use HTTPS"),
+      username: z.string().trim().min(1, "Username required"),
+      password: z.string().trim().min(1, "Password required"),
+      sslRejectUnauthorized: z.boolean().optional(),
+      sslCertificate: z
+        .string()
+        .trim()
+        .transform((value) => value || undefined)
+        .optional()
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.AzureADCS,
+      method: AzureADCSConnectionMethod.UsernamePassword,
+      name: "",
+      description: "",
+      credentials: {
+        adcsUrl: "",
+        username: "",
+        password: "",
+        sslRejectUnauthorized: true,
+        sslCertificate: undefined
+      }
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty },
+    watch
+  } = form;
+
+  const sslEnabled = watch("credentials.adcsUrl")?.startsWith("https://") ?? false;
+
+  return (
+    <FormProvider {...form}>
+      <form
+        onSubmit={(e) => {
+          setSelectedTabIndex(0);
+          handleSubmit(onSubmit)(e);
+        }}
+      >
+        {!isUpdate && <GenericAppConnectionsFields />}
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The method you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.AzureADCS].name
+              }. This field cannot be changed after creation.`}
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Method"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(AzureADCSConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
+          <Tab.List
+            className={`-pb-1 ${selectedTabIndex === 1 ? "mb-3" : "mb-6"} w-full border-b-2 border-mineshaft-600`}
+          >
+            <Tab
+              className={({ selected }) =>
+                `w-30 -mb-[0.14rem] px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
+                  selected
+                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                    : "text-bunker-300"
+                }`
+              }
+            >
+              Configuration
+            </Tab>
+            <Tab
+              className={({ selected }) =>
+                `w-30 -mb-[0.14rem] px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
+                  selected
+                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                    : "text-bunker-300"
+                }`
+              }
+            >
+              SSL ({sslEnabled ? "Enabled" : "Disabled"})
+            </Tab>
+          </Tab.List>
+          {selectedTabIndex === 1 && (
+            <div className="mb-2 text-xs text-mineshaft-300">
+              SSL configuration for HTTPS connections
+            </div>
+          )}
+          <Tab.Panels className="mb-4 rounded border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
+            <Tab.Panel>
+              <Controller
+                name="credentials.adcsUrl"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    errorText={error?.message}
+                    isError={Boolean(error?.message)}
+                    label="ADCS URL"
+                  >
+                    <Input {...field} placeholder="https://your-adcs-server.com/certsrv" />
+                  </FormControl>
+                )}
+              />
+              <div className="grid grid-cols-2 gap-2">
+                <Controller
+                  name="credentials.username"
+                  control={control}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      errorText={error?.message}
+                      isError={Boolean(error?.message)}
+                      label="Username"
+                    >
+                      <Input {...field} placeholder="DOMAIN\\username or [email protected]" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  name="credentials.password"
+                  control={control}
+                  render={({ field: { value, onChange }, fieldState: { error } }) => (
+                    <FormControl
+                      errorText={error?.message}
+                      isError={Boolean(error?.message)}
+                      label="Password"
+                    >
+                      <SecretInput
+                        containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
+                        value={value}
+                        onChange={(e) => onChange(e.target.value)}
+                      />
+                    </FormControl>
+                  )}
+                />
+              </div>
+            </Tab.Panel>
+            <Tab.Panel>
+              <Controller
+                name="credentials.sslCertificate"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    errorText={error?.message}
+                    isError={Boolean(error?.message)}
+                    className={sslEnabled ? "" : "opacity-50"}
+                    label="SSL Certificate"
+                    isOptional
+                  >
+                    <TextArea
+                      className="h-[3.6rem] !resize-none"
+                      {...field}
+                      isDisabled={!sslEnabled}
+                      placeholder="-----BEGIN CERTIFICATE-----
+...
+-----END CERTIFICATE-----"
+                    />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                name="credentials.sslRejectUnauthorized"
+                control={control}
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl
+                    className={sslEnabled ? "" : "opacity-50"}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Switch
+                      className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                      id="ssl-reject-unauthorized"
+                      thumbClassName="bg-mineshaft-800"
+                      isChecked={sslEnabled ? value : false}
+                      onCheckedChange={onChange}
+                      isDisabled={!sslEnabled}
+                    >
+                      <p className="w-[9.5rem]">
+                        Reject Unauthorized
+                        <Tooltip
+                          className="max-w-md"
+                          content={
+                            <p>
+                              If enabled, Infisical will only connect to the ADCS server if it has a
+                              valid, trusted SSL certificate. Disable only in test environments with
+                              self-signed certificates.
+                            </p>
+                          }
+                        >
+                          <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                        </Tooltip>
+                      </p>
+                    </Switch>
+                  </FormControl>
+                )}
+              />
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : "Connect to Azure ADCS"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};

frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx

@@ -11,7 +11,7 @@ import { usePopUp } from "@app/hooks/usePopUp";
 
 import { AllProjectView } from "./components/AllProjectView";
 import { MyProjectView } from "./components/MyProjectView";
-import { ProjectListToggle, ProjectListView } from "./components/ProjectListToggle";
+import { ProjectListView } from "./components/ProjectListToggle";
 
 // const formatDescription = (type: ProjectType) => {
 //   if (type === ProjectType.SecretManager)
@@ -28,7 +28,23 @@ import { ProjectListToggle, ProjectListView } from "./components/ProjectListTogg
 export const ProjectsPage = () => {
   const { t } = useTranslation();
 
-  const [projectListView, setProjectListView] = useState(ProjectListView.MyProjects);
+  const [projectListView, setProjectListView] = useState<ProjectListView>(() => {
+    const storedView = localStorage.getItem("projectListView");
+
+    if (
+      storedView &&
+      (storedView === ProjectListView.AllProjects || storedView === ProjectListView.MyProjects)
+    ) {
+      return storedView;
+    }
+
+    return ProjectListView.MyProjects;
+  });
+
+  const handleSetProjectListView = (value: ProjectListView) => {
+    localStorage.setItem("projectListView", value);
+    setProjectListView(value);
+  };
 
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
     "addNewWs",
@@ -49,11 +65,7 @@ export const ProjectsPage = () => {
       </Helmet>
       <div className="mb-4 flex flex-col items-start justify-start">
         <PageHeader
-          title={
-            <div className="flex items-center gap-4">
-              <ProjectListToggle value={projectListView} onChange={setProjectListView} />
-            </div>
-          }
+          title="Projects"
           description="Your team's complete security toolkit - organized and ready when you need them."
         />
       </div>
@@ -62,12 +74,16 @@ export const ProjectsPage = () => {
           onAddNewProject={() => handlePopUpOpen("addNewWs")}
           onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
           isAddingProjectsAllowed={isAddingProjectsAllowed}
+          projectListView={projectListView}
+          onProjectListViewChange={handleSetProjectListView}
         />
       ) : (
         <AllProjectView
           onAddNewProject={() => handlePopUpOpen("addNewWs")}
           onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
           isAddingProjectsAllowed={isAddingProjectsAllowed}
+          projectListView={projectListView}
+          onProjectListViewChange={handleSetProjectListView}
         />
       )}
       <NewProjectModal

frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx

@@ -49,11 +49,17 @@ import {
   useSearchProjects
 } from "@app/hooks/api";
 import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
+import {
+  ProjectListToggle,
+  ProjectListView
+} from "@app/pages/organization/ProjectsPage/components/ProjectListToggle";
 
 type Props = {
   onAddNewProject: () => void;
   onUpgradePlan: () => void;
   isAddingProjectsAllowed: boolean;
+  projectListView: ProjectListView;
+  onProjectListViewChange: (value: ProjectListView) => void;
 };
 
 type RequestAccessModalProps = {
@@ -106,7 +112,9 @@ const RequestAccessModal = ({ projectId, onPopUpToggle }: RequestAccessModalProp
 export const AllProjectView = ({
   onAddNewProject,
   onUpgradePlan,
-  isAddingProjectsAllowed
+  isAddingProjectsAllowed,
+  projectListView,
+  onProjectListViewChange
 }: Props) => {
   const navigate = useNavigate();
   const [searchFilter, setSearchFilter] = useState("");
@@ -176,10 +184,10 @@ export const AllProjectView = ({
   return (
     <div>
       <div className="flex w-full flex-row">
-        <div className="flex-grow" />
+        <ProjectListToggle value={projectListView} onChange={onProjectListViewChange} />
         <Input
           className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
-          containerClassName="w-full"
+          containerClassName="w-full ml-2"
           placeholder="Search by project name..."
           value={searchFilter}
           onChange={(e) => setSearchFilter(e.target.value)}
@@ -242,7 +250,7 @@ export const AllProjectView = ({
             ))}
           </DropdownMenuContent>
         </DropdownMenu>
-        <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+        <div className="ml-2 flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
           <Tooltip content="Disabled across All Project view.">
             <div className="flex cursor-not-allowed items-center justify-center">
               <IconButton

frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx

@@ -44,11 +44,17 @@ import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
 import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
 import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
+import {
+  ProjectListToggle,
+  ProjectListView
+} from "@app/pages/organization/ProjectsPage/components/ProjectListToggle";
 
 type Props = {
   onAddNewProject: () => void;
   onUpgradePlan: () => void;
   isAddingProjectsAllowed: boolean;
+  projectListView: ProjectListView;
+  onProjectListViewChange: (value: ProjectListView) => void;
 };
 
 enum ProjectOrderBy {
@@ -63,7 +69,9 @@ enum ProjectsViewMode {
 export const MyProjectView = ({
   onAddNewProject,
   onUpgradePlan,
-  isAddingProjectsAllowed
+  isAddingProjectsAllowed,
+  projectListView,
+  onProjectListViewChange
 }: Props) => {
   const navigate = useNavigate();
   const { currentOrg } = useOrganization();
@@ -371,10 +379,10 @@ export const MyProjectView = ({
   return (
     <div>
       <div className="flex w-full flex-row">
-        <div className="flex-grow" />
+        <ProjectListToggle value={projectListView} onChange={onProjectListViewChange} />
         <Input
           className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
-          containerClassName="w-full"
+          containerClassName="w-full ml-2"
           placeholder="Search by project name..."
           value={searchFilter}
           onChange={(e) => setSearchFilter(e.target.value)}
@@ -441,7 +449,7 @@ export const MyProjectView = ({
             ))}
           </DropdownMenuContent>
         </DropdownMenu>
-        <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+        <div className="ml-2 flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
           <IconButton
             variant="outline_bg"
             onClick={() => {

frontend/src/pages/organization/ProjectsPage/components/ProjectListToggle.tsx

@@ -1,7 +1,4 @@
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { Select, SelectItem } from "@app/components/v2";
+import { Button } from "@app/components/v2";
 
 export enum ProjectListView {
   MyProjects = "my-projects",
@@ -14,28 +11,32 @@ type Props = {
 };
 
 export const ProjectListToggle = ({ value, onChange }: Props) => {
-  const getDisplayText = (listView: ProjectListView) => {
-    return listView === ProjectListView.MyProjects ? "My Projects" : "All Projects";
-  };
-
   return (
-    <div className="group relative flex cursor-pointer items-center gap-2">
-      <h1 className="text-3xl font-semibold transition-colors group-hover:text-gray-500">
-        {getDisplayText(value)}
-      </h1>
-      <Select
-        value={value}
-        onValueChange={onChange}
-        className="absolute left-0 top-0 h-full w-full cursor-pointer opacity-0"
-        position="popper"
+    <div className="flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+      <Button
+        variant="outline_bg"
+        onClick={() => {
+          onChange(ProjectListView.MyProjects);
+        }}
+        size="xs"
+        className={`${
+          value === ProjectListView.MyProjects ? "bg-mineshaft-500" : "bg-transparent"
+        } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
       >
-        <SelectItem value={ProjectListView.MyProjects}>My Projects</SelectItem>
-        <SelectItem value={ProjectListView.AllProjects}>All Projects</SelectItem>
-      </Select>
-      <FontAwesomeIcon
-        icon={faChevronDown}
-        className="text-lg transition-colors group-hover:text-gray-500"
-      />
+        My Projects
+      </Button>
+      <Button
+        variant="outline_bg"
+        onClick={() => {
+          onChange(ProjectListView.AllProjects);
+        }}
+        size="xs"
+        className={`${
+          value === ProjectListView.AllProjects ? "bg-mineshaft-500" : "bg-transparent"
+        } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
+      >
+        All Projects
+      </Button>
     </div>
   );
 };