fix: Missing project ID error when editing or creating project template roles

frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeModifySection.tsx

@@ -220,7 +220,11 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
               >
                 Save
               </Button>
-              <AddPoliciesButton isDisabled={isDisabled} projectType={currentProject.type} />
+              <AddPoliciesButton
+                isDisabled={isDisabled}
+                projectType={currentProject.type}
+                projectId={projectId}
+              />
             </div>
           </div>
         </div>

frontend/src/pages/project/MemberDetailsByIDPage/components/MemberProjectAdditionalPrivilegeSection/MembershipProjectAdditionalPrivilegeModifySection.tsx

@@ -216,7 +216,11 @@ export const MembershipProjectAdditionalPrivilegeModifySection = ({
               >
                 Save
               </Button>
-              <AddPoliciesButton isDisabled={isDisabled} projectType={currentProject.type} />
+              <AddPoliciesButton
+                isDisabled={isDisabled}
+                projectType={currentProject.type}
+                projectId={projectId}
+              />
             </div>
           </div>
         </div>

frontend/src/pages/project/RoleDetailsBySlugPage/components/AddPoliciesButton.tsx

@@ -21,9 +21,10 @@ import { VaultPolicyImportModal } from "@app/pages/project/RoleDetailsBySlugPage
 type Props = {
   isDisabled?: boolean;
   projectType: ProjectType;
+  projectId?: string;
 };
 
-export const AddPoliciesButton = ({ isDisabled, projectType }: Props) => {
+export const AddPoliciesButton = ({ isDisabled, projectType, projectId }: Props) => {
   const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "addPolicy",
     "addPolicyOptions",
@@ -109,6 +110,7 @@ export const AddPoliciesButton = ({ isDisabled, projectType }: Props) => {
         </DropdownMenuContent>
       </DropdownMenu>
       <PolicySelectionModal
+        projectId={projectId}
         type={projectType}
         isOpen={popUp.addPolicy.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("addPolicy", isOpen)}

frontend/src/pages/project/RoleDetailsBySlugPage/components/PolicySelectionModal.tsx

@@ -18,7 +18,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
-import { ProjectPermissionSub, useProject } from "@app/context";
+import { ProjectPermissionSub } from "@app/context";
 import { useGetWorkspaceIntegrations } from "@app/hooks/api";
 import { ProjectType } from "@app/hooks/api/projects/types";
 
@@ -34,23 +34,25 @@ type Props = {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   type: ProjectType;
+  projectId?: string;
 };
 
 type ContentProps = {
   onClose: () => void;
 
+  // note(daniel): we allow projectId to be undefined because we use this component for project templates, in which case no project ID will be present.
+  projectId?: string;
   type: ProjectType;
 };
 
 type TForm = { permissions: Record<ProjectPermissionSub, boolean> };
 
-const Content = ({ onClose, type: projectType }: ContentProps) => {
+const Content = ({ onClose, projectId, type: projectType }: ContentProps) => {
   const rootForm = useFormContext<TFormSchema>();
   const [search, setSearch] = useState("");
-  const { currentProject, projectId } = useProject();
-  const isSecretManagerProject = currentProject.type === ProjectType.SecretManager;
-  const { data: integrations = [] } = useGetWorkspaceIntegrations(projectId, {
-    enabled: isSecretManagerProject,
+  const isSecretManagerProject = projectType === ProjectType.SecretManager;
+  const { data: integrations = [] } = useGetWorkspaceIntegrations(projectId ?? "", {
+    enabled: Boolean(isSecretManagerProject && projectId),
     refetchInterval: false
   });
 
@@ -216,7 +218,7 @@ const Content = ({ onClose, type: projectType }: ContentProps) => {
   );
 };
 
-export const PolicySelectionModal = ({ isOpen, onOpenChange, type }: Props) => {
+export const PolicySelectionModal = ({ isOpen, onOpenChange, type, projectId }: Props) => {
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalContent
@@ -224,7 +226,7 @@ export const PolicySelectionModal = ({ isOpen, onOpenChange, type }: Props) => {
         subTitle="Select one or more policies to add to this role."
         className="max-w-3xl"
       >
-        <Content onClose={() => onOpenChange(false)} type={type} />
+        <Content onClose={() => onOpenChange(false)} type={type} projectId={projectId} />
       </ModalContent>
     </Modal>
   );

frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx

@@ -209,7 +209,11 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
                   Save
                 </Button>
                 <div className="ml-2 border-l border-mineshaft-500 pl-4">
-                  <AddPoliciesButton isDisabled={isDisabled} projectType={currentProject.type} />
+                  <AddPoliciesButton
+                    isDisabled={isDisabled}
+                    projectType={currentProject.type}
+                    projectId={projectId}
+                  />
                 </div>
               </div>
             )}