✨ Add webhook blocks API public endpoints

apps/builder/src/features/workspace/components/MembersList/MembersList.tsx

@@ -23,11 +23,13 @@ import { Member } from '../../types'
 
 export const MembersList = () => {
   const { user } = useUser()
-  const { workspace, canEdit } = useWorkspace()
+  const { workspace, currentRole } = useWorkspace()
   const { members, invitations, isLoading, mutate } = useMembers({
     workspaceId: workspace?.id,
   })
 
+  const canEdit = currentRole === WorkspaceRole.ADMIN
+
   const handleDeleteMemberClick = (memberId: string) => async () => {
     if (!workspace) return
     await deleteMemberQuery(workspace.id, memberId)

apps/builder/src/features/workspace/components/WorkspaceDropdown.tsx

@@ -0,0 +1,98 @@
+import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
+import {
+  HardDriveIcon,
+  ChevronLeftIcon,
+  PlusIcon,
+  LogOutIcon,
+} from '@/components/icons'
+import { PlanTag } from '@/features/billing'
+import { trpc } from '@/lib/trpc'
+import {
+  Menu,
+  MenuButton,
+  Button,
+  HStack,
+  SkeletonCircle,
+  MenuList,
+  MenuItem,
+  Text,
+} from '@chakra-ui/react'
+import { Workspace } from 'models'
+
+type Props = {
+  currentWorkspace?: Workspace
+  onWorkspaceSelected: (workspaceId: string) => void
+  onCreateNewWorkspaceClick: () => void
+  onLogoutClick: () => void
+}
+
+export const WorkspaceDropdown = ({
+  currentWorkspace,
+  onWorkspaceSelected,
+  onLogoutClick,
+  onCreateNewWorkspaceClick,
+}: Props) => {
+  const { data } = trpc.workspace.listWorkspaces.useQuery()
+
+  const workspaces = data?.workspaces ?? []
+
+  return (
+    <Menu placement="bottom-end">
+      <MenuButton as={Button} variant="outline" px="2">
+        <HStack>
+          <SkeletonCircle
+            isLoaded={currentWorkspace !== undefined}
+            alignItems="center"
+            display="flex"
+            boxSize="20px"
+          >
+            <EmojiOrImageIcon
+              boxSize="20px"
+              icon={currentWorkspace?.icon}
+              defaultIcon={HardDriveIcon}
+            />
+          </SkeletonCircle>
+          {currentWorkspace && (
+            <>
+              <Text noOfLines={1} maxW="200px">
+                {currentWorkspace.name}
+              </Text>
+              <PlanTag plan={currentWorkspace.plan} />
+            </>
+          )}
+          <ChevronLeftIcon transform="rotate(-90deg)" />
+        </HStack>
+      </MenuButton>
+      <MenuList>
+        {workspaces
+          ?.filter((workspace) => workspace.id !== currentWorkspace?.id)
+          .map((workspace) => (
+            <MenuItem
+              key={workspace.id}
+              onClick={() => onWorkspaceSelected(workspace.id)}
+            >
+              <HStack>
+                <EmojiOrImageIcon
+                  icon={workspace.icon}
+                  boxSize="16px"
+                  defaultIcon={HardDriveIcon}
+                />
+                <Text>{workspace.name}</Text>
+                <PlanTag plan={workspace.plan} />
+              </HStack>
+            </MenuItem>
+          ))}
+        <MenuItem onClick={onCreateNewWorkspaceClick} icon={<PlusIcon />}>
+          New workspace
+        </MenuItem>
+        <MenuItem
+          onClick={onLogoutClick}
+          icon={<LogOutIcon />}
+          color="orange.500"
+        >
+          Log out
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  )
+}

apps/builder/src/features/workspace/components/WorkspaceSettingsForm.tsx

@@ -19,12 +19,11 @@ export const WorkspaceSettingsForm = ({ onClose }: { onClose: () => void }) => {
 
   const handleNameChange = (name: string) => {
     if (!workspace?.id) return
-    updateWorkspace(workspace?.id, { name })
+    updateWorkspace({ name })
   }
 
   const handleChangeIcon = (icon: string) => {
-    if (!workspace?.id) return
-    updateWorkspace(workspace?.id, { icon })
+    updateWorkspace({ icon })
   }
 
   const handleDeleteClick = async () => {

apps/builder/src/features/workspace/components/WorkspaceSettingsModal.tsx

@@ -15,7 +15,7 @@ import {
   UsersIcon,
 } from '@/components/icons'
 import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
-import { GraphNavigation, User, Workspace } from 'db'
+import { GraphNavigation, User, Workspace, WorkspaceRole } from 'db'
 import { useState } from 'react'
 import { MembersList } from './MembersList'
 import { WorkspaceSettingsForm } from './WorkspaceSettingsForm'
@@ -44,9 +44,13 @@ export const WorkspaceSettingsModal = ({
   workspace,
   onClose,
 }: Props) => {
-  const { canEdit } = useWorkspace()
+  const { currentRole } = useWorkspace()
   const [selectedTab, setSelectedTab] = useState<SettingsTab>('my-account')
 
+  console.log(currentRole)
+
+  const canEditWorkspace = currentRole === WorkspaceRole.ADMIN
+
   return (
     <Modal isOpen={isOpen} onClose={onClose} size="4xl">
       <ModalOverlay />
@@ -94,7 +98,7 @@ export const WorkspaceSettingsModal = ({
               <Text pl="4" color="gray.500">
                 Workspace
               </Text>
-              {canEdit && (
+              {canEditWorkspace && (
                 <Button
                   variant={
                     selectedTab === 'workspace-settings' ? 'solid' : 'ghost'
@@ -124,7 +128,7 @@ export const WorkspaceSettingsModal = ({
               >
                 Members
               </Button>
-              {canEdit && (
+              {canEditWorkspace && (
                 <Button
                   variant={selectedTab === 'billing' ? 'solid' : 'ghost'}
                   onClick={() => setSelectedTab('billing')}

apps/builder/src/features/workspace/components/index.tsx

@@ -1 +1,2 @@
-export { WorkspaceSettingsModal } from './WorkspaceSettingsModal'
+export * from './WorkspaceSettingsModal'
+export * from './WorkspaceDropdown'