import { useState } from "react"; import { faArrowUpRightFromSquare, faBook, faCheck, faCog, faEllipsis, faInfinity, faInfo, faInfoCircle, faMoneyBill, faReply, faShare, faSignOut, faUsers } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useQueryClient } from "@tanstack/react-query"; import { Link, useNavigate, useRouter } from "@tanstack/react-router"; import { motion } from "framer-motion"; import { Mfa } from "@app/components/auth/Mfa"; import { CreateOrgModal } from "@app/components/organization/CreateOrgModal"; import SecurityClient from "@app/components/utilities/SecurityClient"; import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "@app/components/v2"; import { envConfig } from "@app/config/env"; import { useOrganization, useSubscription, useUser } from "@app/context"; import { usePopUp, useToggle } from "@app/hooks"; import { useGetOrganizations, useGetOrgTrialUrl, useLogoutUser, useSelectOrganization, workspaceKeys } from "@app/hooks/api"; import { authKeys } from "@app/hooks/api/auth/queries"; import { MfaMethod } from "@app/hooks/api/auth/types"; import { AuthMethod } from "@app/hooks/api/users/types"; import { ProjectType } from "@app/hooks/api/workspace/types"; import { INFISICAL_SUPPORT_OPTIONS } from "@app/layouts/OrganizationLayout/components/SidebarFooter/SidebarFooter"; import { navigateUserToOrg } from "@app/pages/auth/LoginPage/Login.utils"; import { MenuIconButton } from "../MenuIconButton"; import { ProjectSwitcher } from "./ProjectSwitcher"; export const MinimizedOrgSidebar = () => { const [shouldShowMfa, toggleShowMfa] = useToggle(false); const [requiredMfaMethod, setRequiredMfaMethod] = useState(MfaMethod.EMAIL); const [mfaSuccessCallback, setMfaSuccessCallback] = useState<() => void>(() => {}); const { subscription } = useSubscription(); const { user } = useUser(); const { mutateAsync } = useGetOrgTrialUrl(); const { currentOrg } = useOrganization(); const { data: orgs } = useGetOrganizations(); const { popUp, handlePopUpToggle } = usePopUp(["createOrg"] as const); const { mutateAsync: selectOrganization } = useSelectOrganization(); const navigate = useNavigate(); const router = useRouter(); const queryClient = useQueryClient(); const handleOrgChange = async (orgId: string) => { queryClient.removeQueries({ queryKey: authKeys.getAuthToken }); queryClient.removeQueries({ queryKey: workspaceKeys.getAllUserWorkspace() }); const { token, isMfaEnabled, mfaMethod } = await selectOrganization({ organizationId: orgId }); if (isMfaEnabled) { SecurityClient.setMfaToken(token); if (mfaMethod) { setRequiredMfaMethod(mfaMethod); } toggleShowMfa.on(); setMfaSuccessCallback(() => () => handleOrgChange(orgId)); return; } await router.invalidate(); await navigateUserToOrg(navigate, orgId); }; const logout = useLogoutUser(); const logOutUser = async () => { try { console.log("Logging out..."); await logout.mutateAsync(); navigate({ to: "/login" }); } catch (error) { console.error(error); } }; if (shouldShowMfa) { return (