konnosDashboard
TeamSettings.tsx71 lines · main
1import { useParams } from 'common'
2import { Search } from 'lucide-react'
3import { useState } from 'react'
4import { Admonition } from 'ui-patterns'
5import { Input } from 'ui-patterns/DataInputs/Input'
6
7import { InviteMemberButton } from './InviteMemberButton'
8import MembersView from './MembersView'
9import {
10 ScaffoldActionsContainer,
11 ScaffoldActionsGroup,
12 ScaffoldContainer,
13 ScaffoldFilterAndContent,
14 ScaffoldSection,
15 ScaffoldSectionContent,
16 ScaffoldTitle,
17} from '@/components/layouts/Scaffold'
18import { DocsButton } from '@/components/ui/DocsButton'
19import { useOrganizationRolesV2Query } from '@/data/organization-members/organization-roles-query'
20import { useOrgProjectsInfiniteQuery } from '@/data/projects/org-projects-infinite-query'
21import { DOCS_URL } from '@/lib/constants'
22
23export const TeamSettings = () => {
24 const { slug } = useParams()
25 const [searchString, setSearchString] = useState('')
26
27 const { data: roles } = useOrganizationRolesV2Query({ slug })
28 const hasProjectScopedRoles = (roles?.project_scoped_roles ?? []).length > 0
29
30 const { data } = useOrgProjectsInfiniteQuery({ slug })
31 const totalCount = data?.pages[0].pagination.count ?? 0
32 const threshold = 1000
33
34 return (
35 <ScaffoldContainer>
36 <ScaffoldSection isFullWidth className="py-8! gap-y-8">
37 <ScaffoldTitle>Team</ScaffoldTitle>
38 <ScaffoldFilterAndContent>
39 <ScaffoldActionsContainer className="w-full flex-col md:flex-row gap-2 justify-between">
40 <Input
41 size="tiny"
42 autoComplete="off"
43 icon={<Search />}
44 value={searchString}
45 onChange={(e: any) => setSearchString(e.target.value)}
46 name="email"
47 id="email"
48 placeholder="Filter members"
49 />
50 <ScaffoldActionsGroup className="w-full md:w-auto">
51 <DocsButton href={`${DOCS_URL}/guides/platform/access-control`} />
52 <InviteMemberButton />
53 </ScaffoldActionsGroup>
54 </ScaffoldActionsContainer>
55
56 {hasProjectScopedRoles && totalCount > threshold && (
57 <Admonition
58 type="warning"
59 title="This page may not render properly due to the number of projects your account has access to"
60 description="We're actively looking into optimizing this page and will make things available as soon as we can!"
61 />
62 )}
63
64 <ScaffoldSectionContent className="w-full">
65 <MembersView searchString={searchString} />
66 </ScaffoldSectionContent>
67 </ScaffoldFilterAndContent>
68 </ScaffoldSection>
69 </ScaffoldContainer>
70 )
71}