ResourceAccess() — supabase Function Reference

Architecture documentation for the ResourceAccess() function in ResourceAccess.tsx from the supabase codebase.

Function tsx ContentManagement AccessControl calls 1

Entity Profile

ContentManagement→ AccessControl→ ResourceAccess() — supabase Function Reference

Dependency Diagram

graph TD
  ba40aa21_76a9_5694_176f_5c7e7e88791e["ResourceAccess()"]
  93731708_c41f_3a77_3f8a_c076523beb9a["useOrgAndProjectData()"]
  ba40aa21_76a9_5694_176f_5c7e7e88791e -->|calls| 93731708_c41f_3a77_3f8a_c076523beb9a
  style ba40aa21_76a9_5694_176f_5c7e7e88791e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/ResourceAccess/ResourceAccess.tsx lines 27–115

export const ResourceAccess = ({ control, resourceAccess, setValue }: ResourceAccessProps) => {
  const { profile } = useProfile()

  const { organizations, projects, isLoadingOrgs, isLoadingProjects } = useOrgAndProjectData({
    enabled: !!profile,
  })

  const handleResourceAccessChange = (newValue: string, currentValue: string) => {
    if (newValue !== currentValue) {
      setValue('selectedOrganizations', [])
      setValue('selectedProjects', [])
    }
  }

  return (
    <div className="space-y-4 px-5 sm:px-6 py-6">
      <FormField_Shadcn_
        key="resourceAccess"
        name="resourceAccess"
        control={control}
        render={({ field }) => (
          <FormItemLayout name="resourceAccess" label="Resource access">
            <FormControl_Shadcn_>
              <div className="space-y-3">
                <fieldset className="flex gap-3">
                  <legend className="sr-only">Resource access level</legend>
                  {RESOURCE_OPTIONS.map((option) => (
                    <ResourceOption
                      key={option.value}
                      value={option.value}
                      label={option.label}
                      isSelected={field.value === option.value}
                      onChange={() => {
                        handleResourceAccessChange(option.value, field.value)
                        field.onChange(option.value)
                      }}
                    />
                  ))}
                </fieldset>

                <p className="text-foreground-light text-sm">
                  {RESOURCE_OPTIONS.find((opt) => opt.value === field.value)?.description}
                </p>
              </div>
            </FormControl_Shadcn_>
          </FormItemLayout>
        )}
      />

      {resourceAccess === 'selected-orgs' && (
        <FormField_Shadcn_
          key="selectedOrganizations"
          name="selectedOrganizations"
          control={control}
          render={({ field }) => (
            <ResourceMultiSelector
              field={field}
              items={organizations.map((org) => ({ id: org.slug, name: org.name }))}
              isLoading={isLoadingOrgs}
              fieldName="selectedOrganizations"
              label="Select organizations"
              loadingMessage="Loading organizations..."
              emptyMessage="No organizations available"
            />
          )}
        />
      )}

      {resourceAccess === 'selected-projects' && (
        <FormField_Shadcn_
          key="selectedProjects"
          name="selectedProjects"
          control={control}
          render={({ field }) => (
            <ResourceMultiSelector
              field={field}
              items={projects.map((project) => ({ id: project.ref, name: project.name }))}
              isLoading={isLoadingProjects}
              fieldName="selectedProjects"
              label="Select projects"
              loadingMessage="Loading projects..."
              emptyMessage="No projects available"
            />
          )}
        />
      )}
    </div>
  )
}