import AddIcon from 'mdi-react/AddIcon';
import * as React from 'react';
import { Link } from 'react-router-dom';
import { Subject } from 'rxjs';
import { map } from 'rxjs/operators';
import { gql, queryGraphQL } from '../../backend/graphql';
import { PageTitle } from '../../components/PageTitle';
import { accessTokenFragment, AccessTokenNode, FilteredAccessTokenConnection, } from '../../settings/tokens/AccessTokenNode';
import { eventLogger } from '../../tracking/eventLogger';
import { createAggregateError } from '../../util/errors';
/**
 * Displays access tokens whose subject is a specific user.
 */
export class UserAccountTokensPage extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {};
        this.accessTokenUpdates = new Subject();
        this.queryAccessTokens = (args) => queryGraphQL(gql `
                query AccessTokens($user: ID!, $first: Int) {
                    node(id: $user) {
                        ... on User {
                            accessTokens(first: $first) {
                                nodes {
                                    ...AccessTokenFields
                                }
                                totalCount
                                pageInfo {
                                    hasNextPage
                                }
                            }
                        }
                    }
                }
                ${accessTokenFragment}
            `, Object.assign({}, args, { user: this.props.user.id })).pipe(map(({ data, errors }) => {
            if (!data || !data.node) {
                throw createAggregateError(errors);
            }
            const user = data.node;
            if (!user.accessTokens) {
                throw createAggregateError(errors);
            }
            return user.accessTokens;
        }));
        this.onDidUpdateAccessToken = () => this.accessTokenUpdates.next();
    }
    componentDidMount() {
        eventLogger.logViewEvent('UserAccountTokens');
        if (UserAccountTokensPage.clearNewTokenTimer !== undefined) {
            clearTimeout(UserAccountTokensPage.clearNewTokenTimer);
        }
    }
    componentWillUnmount() {
        // Clear the newly created access token value from our application state; we assume the user
        // has already stored it elsewhere.
        this.props.onDidPresentNewToken();
    }
    render() {
        const nodeProps = {
            onDidUpdate: this.onDidUpdateAccessToken,
            newToken: this.props.newToken,
        };
        return (React.createElement("div", { className: "user-settings-tokens-page" },
            React.createElement(PageTitle, { title: "Access tokens" }),
            React.createElement("div", { className: "d-flex justify-content-between align-items-center" },
                React.createElement("h2", null, "Access tokens"),
                React.createElement(Link, { className: "btn btn-primary ml-2", to: `${this.props.match.url}/new` },
                    React.createElement(AddIcon, { className: "icon-inline" }),
                    " Generate new token")),
            React.createElement("p", null, "Access tokens may be used to access the Sourcegraph API."),
            React.createElement(FilteredAccessTokenConnection, { listClassName: "list-group list-group-flush", noun: "access token", pluralNoun: "access tokens", queryConnection: this.queryAccessTokens, nodeComponent: AccessTokenNode, nodeComponentProps: nodeProps, updates: this.accessTokenUpdates, hideSearch: true, noSummaryIfAllNodesVisible: true, history: this.props.history, location: this.props.location })));
    }
}
UserAccountTokensPage.clearNewTokenTimer = undefined;
//# sourceMappingURL=UserAccountTokensPage.js.map