fix(invite): allow anyone with access to the workspace to invite others, remove invite from dev environment (#379)

* allow anyone with access to the workspace to invite others

* hide invite members in dev

* remove invite member from sidebar in dev

Author: waleedlatif1

apps/sim/app/api/workspaces/invitations/route.ts

@@ -24,24 +24,23 @@ export async function GET(req: NextRequest) {
   }
 
   try {
-    // First get all workspaces where the user is a member with owner role
+    // Get all workspaces where the user is a member (any role)
     const userWorkspaces = await db
       .select({ id: workspace.id })
       .from(workspace)
       .innerJoin(
         workspaceMember,
         and(
           eq(workspaceMember.workspaceId, workspace.id),
-          eq(workspaceMember.userId, session.user.id),
-          eq(workspaceMember.role, 'owner')
+          eq(workspaceMember.userId, session.user.id)
         )
       )
 
     if (userWorkspaces.length === 0) {
       return NextResponse.json({ invitations: [] })
     }
 
-    // Get all workspaceIds where the user is an owner
+    // Get all workspaceIds where the user is a member
     const workspaceIds = userWorkspaces.map((w) => w.id)
 
     // Find all invitations for those workspaces
@@ -84,11 +83,8 @@ export async function POST(req: NextRequest) {
       )
       .then((rows) => rows[0])
 
-    if (!membership || membership.role !== 'owner') {
-      return NextResponse.json(
-        { error: 'You are not authorized to invite to this workspace' },
-        { status: 403 }
-      )
+    if (!membership) {
+      return NextResponse.json({ error: 'You are not a member of this workspace' }, { status: 403 })
     }
 
     // Get the workspace details for the email

apps/sim/app/w/components/sidebar/components/invite-modal/invite-modal.tsx

@@ -1,14 +1,12 @@
 'use client'
 
-import { KeyboardEvent, useEffect, useState } from 'react'
-import { Check, Loader2, X, XCircle } from 'lucide-react'
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { KeyboardEvent, useState } from 'react'
+import { Loader2, X } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { cn } from '@/lib/utils'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { InvitesSent } from './invites-sent/invites-sent'
 
 interface InviteModalProps {
   open: boolean

apps/sim/app/w/components/sidebar/components/invite-modal/invites-sent/invites-sent.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
 import {
   Table,

apps/sim/app/w/components/sidebar/sidebar.tsx

@@ -22,7 +22,6 @@ import { WorkspaceHeader } from './components/workspace-header/workspace-header'
 
 export function Sidebar() {
   useRegistryLoading()
-  // Initialize global keyboard shortcuts
   useGlobalShortcuts()
 
   const {
@@ -38,6 +37,7 @@ export function Sidebar() {
   const [showSettings, setShowSettings] = useState(false)
   const [showHelp, setShowHelp] = useState(false)
   const [showInviteMembers, setShowInviteMembers] = useState(false)
+  const [isDevEnvironment, setIsDevEnvironment] = useState(false)
   const {
     mode,
     isExpanded,
@@ -51,6 +51,10 @@ export function Sidebar() {
   const [isHovered, setIsHovered] = useState(false)
   const [explicitMouseEnter, setExplicitMouseEnter] = useState(false)
 
+  useEffect(() => {
+    setIsDevEnvironment(process.env.NODE_ENV === 'development')
+  }, [])
+
   // Track when active workspace changes to ensure we refresh the UI
   useEffect(() => {
     if (activeWorkspaceId) {
@@ -272,17 +276,19 @@ export function Sidebar() {
         <div className="flex-shrink-0 px-3 pb-3 pt-1">
           <div className="flex flex-col space-y-[1px]">
             {/* Invite members button */}
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div
-                  onClick={() => setShowInviteMembers(true)}
-                  className="flex items-center justify-center rounded-md text-sm font-medium text-muted-foreground hover:bg-accent/50 cursor-pointer w-8 h-8 mx-auto"
-                >
-                  <Send className="h-[18px] w-[18px]" />
-                </div>
-              </TooltipTrigger>
-              <TooltipContent side="right">Invite Members</TooltipContent>
-            </Tooltip>
+            {!isDevEnvironment && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div
+                    onClick={() => setShowInviteMembers(true)}
+                    className="flex items-center justify-center rounded-md text-sm font-medium text-muted-foreground hover:bg-accent/50 cursor-pointer w-8 h-8 mx-auto"
+                  >
+                    <Send className="h-[18px] w-[18px]" />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="right">Invite Members</TooltipContent>
+              </Tooltip>
+            )}
 
             {/* Help button */}
             <Tooltip>
@@ -309,15 +315,17 @@ export function Sidebar() {
       ) : (
         <>
           {/* Invite members bar */}
-          <div className="flex-shrink-0 px-3 pt-1">
-            <div
-              onClick={() => setShowInviteMembers(true)}
-              className="flex items-center rounded-md px-2 py-1.5 text-sm font-medium text-muted-foreground hover:bg-accent/50 cursor-pointer"
-            >
-              <Send className="h-[18px] w-[18px]" />
-              <span className="ml-2">Invite members</span>
+          {!isDevEnvironment && (
+            <div className="flex-shrink-0 px-3 pt-1">
+              <div
+                onClick={() => setShowInviteMembers(true)}
+                className="flex items-center rounded-md px-2 py-1.5 text-sm font-medium text-muted-foreground hover:bg-accent/50 cursor-pointer"
+              >
+                <Send className="h-[18px] w-[18px]" />
+                <span className="ml-2">Invite members</span>
+              </div>
             </div>
-          </div>
+          )}
 
           {/* Bottom buttons container */}
           <div className="flex-shrink-0 px-3 pb-3 pt-1">
@@ -350,7 +358,9 @@ export function Sidebar() {
 
       <SettingsModal open={showSettings} onOpenChange={setShowSettings} />
       <HelpModal open={showHelp} onOpenChange={setShowHelp} />
-      <InviteModal open={showInviteMembers} onOpenChange={setShowInviteMembers} />
+      {!isDevEnvironment && (
+        <InviteModal open={showInviteMembers} onOpenChange={setShowInviteMembers} />
+      )}
     </aside>
   )
 }