wip

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

@@ -38,11 +38,7 @@ import { OrgPermissionSubjects, ProjectPermissionSub } from "@app/context";
 import { OrgPermissionAppConnectionActions } from "@app/context/OrgPermissionContext/types";
 import { ProjectPermissionAppConnectionActions } from "@app/context/ProjectPermissionContext/types";
 import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
-import {
-  getUserTablePreference,
-  PreferenceKey,
-  setUserTablePreference
-} from "@app/helpers/userTablePreferences";
+import { getUserTablePreference, PreferenceKey, setUserTablePreference } from "@app/helpers/userTablePreferences";
 import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { TAppConnection, useListAppConnections } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
@@ -311,38 +307,46 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
+          <DropdownMenuContent
+            sideOffset={2}
+            className="thin-scrollbar max-h-[70vh] overflow-y-auto"
+            align="end"
+          >
             <DropdownMenuLabel>Filter by Apps</DropdownMenuLabel>
             {appConnections.length ? (
-              [...new Set(appConnections.map(({ app }) => app))].map((app) => (
-                <DropdownMenuItem
-                  onClick={(e) => {
-                    e.preventDefault();
-                    setFilters((prev) => ({
-                      ...prev,
-                      apps: prev.apps.includes(app)
-                        ? prev.apps.filter((a) => a !== app)
-                        : [...prev.apps, app]
-                    }));
-                  }}
-                  key={app}
-                  icon={
-                    filters.apps.includes(app) && (
-                      <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
-                    )
-                  }
-                  iconPos="right"
-                >
-                  <div className="flex items-center gap-2">
-                    <img
-                      alt={`${APP_CONNECTION_MAP[app].name} integration`}
-                      src={`/images/integrations/${APP_CONNECTION_MAP[app].image}`}
-                      className="h-4 w-4"
-                    />
-                    <span>{APP_CONNECTION_MAP[app].name}</span>
-                  </div>
-                </DropdownMenuItem>
-              ))
+              [...new Set(appConnections.map(({ app }) => app))]
+                .sort((a, b) => {
+                  return a.toLowerCase().localeCompare(b.toLowerCase());
+                })
+                .map((app) => (
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setFilters((prev) => ({
+                        ...prev,
+                        apps: prev.apps.includes(app)
+                          ? prev.apps.filter((a) => a !== app)
+                          : [...prev.apps, app]
+                      }));
+                    }}
+                    key={app}
+                    icon={
+                      filters.apps.includes(app) && (
+                        <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
+                      )
+                    }
+                    iconPos="right"
+                  >
+                    <div className="flex items-center gap-2">
+                      <img
+                        alt={`${APP_CONNECTION_MAP[app].name} integration`}
+                        src={`/images/integrations/${APP_CONNECTION_MAP[app].image}`}
+                        className="h-4 w-4"
+                      />
+                      <span>{APP_CONNECTION_MAP[app].name}</span>
+                    </div>
+                  </DropdownMenuItem>
+                ))
             ) : (
               <DropdownMenuItem isDisabled>No Connections Configured</DropdownMenuItem>
             )}

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

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { useForm } from "react-hook-form";
 import {
   faArrowDownAZ,
   faBorderAll,
@@ -16,6 +15,7 @@ import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
+import { RequestProjectAccessModal } from "@app/components/projects/RequestProjectAccessModal";
 import {
   Badge,
   Button,
@@ -24,12 +24,9 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuTrigger,
-  FormControl,
   IconButton,
   Input,
   Lottie,
-  Modal,
-  ModalContent,
   Pagination,
   Skeleton,
   Tooltip
@@ -43,11 +40,7 @@ import {
   setUserTablePreference
 } from "@app/helpers/userTablePreferences";
 import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
-import {
-  useOrgAdminAccessProject,
-  useRequestProjectAccess,
-  useSearchProjects
-} from "@app/hooks/api";
+import { useOrgAdminAccessProject, useSearchProjects } from "@app/hooks/api";
 import { ProjectType, Workspace, WorkspaceEnv } from "@app/hooks/api/workspace/types";
 import {
   ProjectListToggle,
@@ -62,53 +55,6 @@ type Props = {
   onProjectListViewChange: (value: ProjectListView) => void;
 };
 
-type RequestAccessModalProps = {
-  projectId: string;
-  onPopUpToggle: () => void;
-};
-
-const RequestAccessModal = ({ projectId, onPopUpToggle }: RequestAccessModalProps) => {
-  const form = useForm<{ note: string }>();
-
-  const requestProjectAccess = useRequestProjectAccess();
-
-  const onFormSubmit = ({ note }: { note: string }) => {
-    if (requestProjectAccess.isPending) return;
-    requestProjectAccess.mutate(
-      {
-        comment: note,
-        projectId
-      },
-      {
-        onSuccess: () => {
-          createNotification({
-            type: "success",
-            title: "Project Access Request Sent",
-            text: "Project admins will receive an email of your request"
-          });
-          onPopUpToggle();
-        }
-      }
-    );
-  };
-
-  return (
-    <form onSubmit={form.handleSubmit(onFormSubmit)}>
-      <FormControl label="Note">
-        <Input {...form.register("note")} />
-      </FormControl>
-      <div className="mt-4 flex items-center">
-        <Button className="mr-4" size="sm" type="submit" isLoading={form.formState.isSubmitting}>
-          Submit Request
-        </Button>
-        <Button colorSchema="secondary" variant="plain" onClick={() => onPopUpToggle()}>
-          Cancel
-        </Button>
-      </div>
-    </form>
-  );
-};
-
 export const AllProjectView = ({
   onAddNewProject,
   onUpgradePlan,
@@ -419,20 +365,11 @@ export const AllProjectView = ({
           <div className="text-center font-light">No Projects Found</div>
         </div>
       )}
-      <Modal
+      <RequestProjectAccessModal
         isOpen={popUp.requestAccessConfirmation.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("requestAccessConfirmation", isOpen)}
-      >
-        <ModalContent
-          title="Confirm Access Request"
-          subTitle={`Requesting access to project ${requestedWorkspaceDetails?.name}. You may include an optional note for project admins to review your request.`}
-        >
-          <RequestAccessModal
-            onPopUpToggle={() => handlePopUpToggle("requestAccessConfirmation")}
-            projectId={requestedWorkspaceDetails?.id}
-          />
-        </ModalContent>
-      </Modal>
+        project={requestedWorkspaceDetails}
+      />
     </div>
   );
 };