cosmos-explorer/src/Explorer/Controls/GitHub/AuthorizeAccessComponent.tsx

import { ChoiceGroup, IButtonProps, IChoiceGroupProps, PrimaryButton, IChoiceGroupOption } from "@fluentui/react";
import * as React from "react";
import { ChildrenMargin } from "./GitHubStyleConstants";

export interface AuthorizeAccessComponentProps {
  scope: string;
  authorizeAccess: (scope: string) => void;
}

export interface AuthorizeAccessComponentState {
  scope: string;
}

export class AuthorizeAccessComponent extends React.Component<
  AuthorizeAccessComponentProps,
  AuthorizeAccessComponentState
> {
  // Scopes supported by GitHub OAuth. We're only interested in ones which allow us access to repos.
  // https://developer.github.com/apps/building-oauth-apps/understanding-scopes-for-oauth-apps/
  public static readonly Scopes = {
    Public: {
      key: "public_repo",
      text: "Public repos only",
    },
    PublicAndPrivate: {
      key: "repo",
      text: "Public and private repos",
    },
  };

  private static readonly DescriptionPara1 =
    "Connect your notebooks workspace to GitHub. You'll be able to view, edit, and run notebooks stored in your GitHub repositories in Data Explorer.";
  private static readonly DescriptionPara2 =
    "Complete setup by authorizing Azure Cosmos DB to access the repositories in your GitHub account: ";
  private static readonly AuthorizeButtonText = "Authorize access";

  private onChoiceGroupChange = (event: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void =>
    this.setState({
      scope: option.key,
    });

  private onButtonClick = (): void => this.props.authorizeAccess(this.state.scope);

  constructor(props: AuthorizeAccessComponentProps) {
    super(props);

    this.state = {
      scope: this.props.scope,
    };
  }

  public render(): JSX.Element {
    const choiceGroupProps: IChoiceGroupProps = {
      options: [
        {
          key: AuthorizeAccessComponent.Scopes.Public.key,
          text: AuthorizeAccessComponent.Scopes.Public.text,
          ariaLabel: AuthorizeAccessComponent.Scopes.Public.text,
        },
        {
          key: AuthorizeAccessComponent.Scopes.PublicAndPrivate.key,
          text: AuthorizeAccessComponent.Scopes.PublicAndPrivate.text,
          ariaLabel: AuthorizeAccessComponent.Scopes.PublicAndPrivate.text,
        },
      ],
      selectedKey: this.state.scope,
      onChange: this.onChoiceGroupChange,
    };

    const buttonProps: IButtonProps = {
      text: AuthorizeAccessComponent.AuthorizeButtonText,
      ariaLabel: AuthorizeAccessComponent.AuthorizeButtonText,
      onClick: this.onButtonClick,
    };

    return (
      <>
        <p>{AuthorizeAccessComponent.DescriptionPara1}</p>
        <p style={{ marginTop: ChildrenMargin }}>{AuthorizeAccessComponent.DescriptionPara2}</p>
        <ChoiceGroup style={{ marginTop: ChildrenMargin }} {...choiceGroupProps} />
        <PrimaryButton style={{ marginTop: ChildrenMargin }} {...buttonProps} />
      </>
    );
  }
}