TeamSettings() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx lines 23–71

export const TeamSettings = () => {
  const { slug } = useParams()
  const [searchString, setSearchString] = useState('')

  const { data: roles } = useOrganizationRolesV2Query({ slug })
  const hasProjectScopedRoles = (roles?.project_scoped_roles ?? []).length > 0

  const { data } = useOrgProjectsInfiniteQuery({ slug })
  const totalCount = data?.pages[0].pagination.count ?? 0
  const threshold = 1000

  return (
    <ScaffoldContainer>
      <ScaffoldSection isFullWidth className="!py-8 gap-y-8">
        <ScaffoldTitle>Team</ScaffoldTitle>
        <ScaffoldFilterAndContent>
          <ScaffoldActionsContainer className="w-full flex-col md:flex-row gap-2 justify-between">
            <Input
              size="tiny"
              autoComplete="off"
              icon={<Search />}
              value={searchString}
              onChange={(e: any) => setSearchString(e.target.value)}
              name="email"
              id="email"
              placeholder="Filter members"
            />
            <ScaffoldActionsGroup className="w-full md:w-auto">
              <DocsButton href={`${DOCS_URL}/guides/platform/access-control`} />
              <InviteMemberButton />
            </ScaffoldActionsGroup>
          </ScaffoldActionsContainer>

          {hasProjectScopedRoles && totalCount > threshold && (
            <Admonition
              type="warning"
              title="This page may not render properly due to the number of projects your account has access to"
              description="We're actively looking into optimizing this page and will make things available as soon as we can!"
            />
          )}

          <ScaffoldSectionContent className="w-full">
            <MembersView searchString={searchString} />
          </ScaffoldSectionContent>
        </ScaffoldFilterAndContent>
      </ScaffoldSection>
    </ScaffoldContainer>
  )
}