import AddIcon from 'mdi-react/AddIcon';
import DeleteIcon from 'mdi-react/DeleteIcon';
import SettingsIcon from 'mdi-react/SettingsIcon';
import UserIcon from 'mdi-react/UserIcon';
import * as React from 'react';
import { Link } from 'react-router-dom';
import { Subject, Subscription } from 'rxjs';
import { FilteredConnection } from '../components/FilteredConnection';
import { PageTitle } from '../components/PageTitle';
import { orgURL } from '../org';
import { eventLogger } from '../tracking/eventLogger';
import { pluralize } from '../util/strings';
import { deleteOrganization, fetchAllOrganizations } from './backend';
class OrgNode extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            loading: false,
        };
        this.deleteOrg = () => {
            if (!window.confirm(`Delete the organization ${this.props.node.name}?`)) {
                return;
            }
            this.setState({
                errorDescription: undefined,
                loading: true,
            });
            deleteOrganization(this.props.node.id)
                .toPromise()
                .then(() => {
                this.setState({ loading: false });
                if (this.props.onDidUpdate) {
                    this.props.onDidUpdate();
                }
            }, err => this.setState({ loading: false, errorDescription: err.message }));
        };
    }
    render() {
        return (React.createElement("li", { className: "list-group-item py-2" },
            React.createElement("div", { className: "d-flex align-items-center justify-content-between" },
                React.createElement("div", null,
                    React.createElement(Link, { to: orgURL(this.props.node.name) },
                        React.createElement("strong", null, this.props.node.name)),
                    React.createElement("br", null),
                    React.createElement("span", { className: "text-muted" }, this.props.node.displayName)),
                React.createElement("div", null,
                    React.createElement(Link, { to: `${orgURL(this.props.node.name)}/settings`, className: "btn btn-sm btn-secondary", "data-tooltip": "Organization settings" },
                        React.createElement(SettingsIcon, { className: "icon-inline" }),
                        " Settings"),
                    ' ',
                    React.createElement(Link, { to: `${orgURL(this.props.node.name)}/members`, className: "btn btn-sm btn-secondary", "data-tooltip": "Organization members" },
                        React.createElement(UserIcon, { className: "icon-inline" }),
                        ' ',
                        this.props.node.members && (React.createElement(React.Fragment, null,
                            this.props.node.members.totalCount,
                            ' ',
                            pluralize('member', this.props.node.members.totalCount)))),
                    ' ',
                    React.createElement("button", { className: "btn btn-sm btn-danger", onClick: this.deleteOrg, disabled: this.state.loading, "data-tooltip": "Delete organization" },
                        React.createElement(DeleteIcon, { className: "icon-inline" })))),
            this.state.errorDescription && (React.createElement("div", { className: "alert alert-danger mt-2" }, this.state.errorDescription))));
    }
}
class FilteredOrgConnection extends FilteredConnection {
}
/**
 * A page displaying the orgs on this site.
 */
export class SiteAdminOrgsPage extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {};
        this.orgUpdates = new Subject();
        this.subscriptions = new Subscription();
        this.onDidUpdateOrg = () => this.orgUpdates.next();
    }
    componentDidMount() {
        eventLogger.logViewEvent('SiteAdminOrgs');
    }
    componentWillUnmount() {
        this.subscriptions.unsubscribe();
    }
    render() {
        const nodeProps = {
            onDidUpdate: this.onDidUpdateOrg,
        };
        return (React.createElement("div", { className: "site-admin-orgs-page" },
            React.createElement(PageTitle, { title: "Organizations - Admin" }),
            React.createElement("h2", null, "Organizations"),
            React.createElement("div", null,
                React.createElement(Link, { to: "/organizations/new", className: "btn btn-primary" },
                    React.createElement(AddIcon, { className: "icon-inline" }),
                    " Create organization")),
            React.createElement("p", { className: "mt-2" },
                "An organization is a set of users with associated configuration. See",
                ' ',
                React.createElement("a", { href: "https://about.sourcegraph.com/docs/server/config/organizations" }, "Sourcegraph documentation"),
                ' ',
                "for information about configuring organizations."),
            React.createElement(FilteredOrgConnection, { className: "list-group list-group-flush mt-3", noun: "organization", pluralNoun: "organizations", queryConnection: fetchAllOrganizations, nodeComponent: OrgNode, nodeComponentProps: nodeProps, updates: this.orgUpdates, history: this.props.history, location: this.props.location })));
    }
}
//# sourceMappingURL=SiteAdminOrgsPage.js.map