AuthorizeRequesterDetails() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails.tsx lines 54–155

export const AuthorizeRequesterDetails = ({
  icon,
  name,
  domain,
  scopes,
  showOnlyScopes = false,
}: AuthorizeRequesterDetailsProps) => {
  return (
    <div className="flex gap-y-4 flex-col">
      {!showOnlyScopes && (
        <div className="flex flex-row gap-x-4 items-center">
          <div className="flex items-center">
            <div
              className="w-12 h-12 md:w-14 md:h-14 bg-center bg-no-repeat bg-cover flex items-center justify-center rounded-md border border-control"
              style={{
                backgroundImage: !!icon ? `url('${icon}')` : 'none',
              }}
            >
              {!icon && <p className="text-foreground-light text-lg">{name[0]}</p>}
            </div>
          </div>
          <p className="text-foreground">
            {name} ({domain}) is requesting API access to an organization.
          </p>
        </div>
      )}
      <div>
        {!showOnlyScopes && (
          <>
            <h3>Permissions</h3>
            <p className="text-sm text-foreground-light">
              The following scopes will apply for the{' '}
              <span className="text-amber-900">selected organization and all of its projects.</span>
            </p>
          </>
        )}
        <div className="pt-2">
          {scopes.length === 0 && (
            <p className="text-foreground-lighter text-sm">
              No permissions requested, {name} will not have access to your organization or projects
            </p>
          )}
          <ScopeSection
            description={PERMISSIONS_DESCRIPTIONS.ANALYTICS}
            hasReadScope={scopes.includes(OAuthScope.ANALYTICS_READ)}
            hasWriteScope={scopes.includes(OAuthScope.ANALYTICS_WRITE)}
          />
          <ScopeSection
            description={PERMISSIONS_DESCRIPTIONS.AUTH}
            hasReadScope={scopes.includes(OAuthScope.AUTH_READ)}
            hasWriteScope={scopes.includes(OAuthScope.AUTH_WRITE)}
          />
          <ScopeSection
            description={PERMISSIONS_DESCRIPTIONS.DATABASE}
            hasReadScope={scopes.includes(OAuthScope.DATABASE_READ)}
            hasWriteScope={scopes.includes(OAuthScope.DATABASE_WRITE)}
          />
          <ScopeSection
            description={PERMISSIONS_DESCRIPTIONS.DOMAINS}
            hasReadScope={scopes.includes(OAuthScope.DOMAINS_READ)}
            hasWriteScope={scopes.includes(OAuthScope.DOMAINS_WRITE)}
          />
          <ScopeSection
            description={PERMISSIONS_DESCRIPTIONS.EDGE_FUNCTIONS}
            hasReadScope={scopes.includes(OAuthScope.EDGE_FUNCTIONS_READ)}
            hasWriteScope={scopes.includes(OAuthScope.EDGE_FUNCTIONS_WRITE)}
          />
          <ScopeSection
            description={PERMISSIONS_DESCRIPTIONS.ENVIRONMENT}
            hasReadScope={scopes.includes(OAuthScope.ENVIRONMENT_READ)}
            hasWriteScope={scopes.includes(OAuthScope.ENVIRONMENT_WRITE)}
          />
          <ScopeSection
            description={PERMISSIONS_DESCRIPTIONS.ORGANIZATIONS}
            hasReadScope={scopes.includes(OAuthScope.ORGANIZATIONS_READ)}
            hasWriteScope={scopes.includes(OAuthScope.ORGANIZATIONS_WRITE)}
          />
          <ScopeSection
            description={PERMISSIONS_DESCRIPTIONS.PROJECTS}
            hasReadScope={scopes.includes(OAuthScope.PROJECTS_READ)}
            hasWriteScope={scopes.includes(OAuthScope.PROJECTS_WRITE)}
          />
          <ScopeSection
            description={PERMISSIONS_DESCRIPTIONS.REST}
            hasReadScope={scopes.includes(OAuthScope.REST_READ)}
            hasWriteScope={scopes.includes(OAuthScope.REST_WRITE)}
          />
          <ScopeSection
            description={PERMISSIONS_DESCRIPTIONS.SECRETS}
            hasReadScope={scopes.includes(OAuthScope.SECRETS_READ)}
            hasWriteScope={scopes.includes(OAuthScope.SECRETS_WRITE)}
          />
          <ScopeSection
            description={PERMISSIONS_DESCRIPTIONS.STORAGE}
            hasReadScope={scopes.includes(OAuthScope.STORAGE_READ)}
            hasWriteScope={scopes.includes(OAuthScope.STORAGE_WRITE)}
          />
        </div>
      </div>
    </div>
  )
}