summaryrefslogtreecommitdiffstats
path: root/webapp/components/integrations/components/installed_oauth_apps/installed_oauth_apps.jsx
blob: 4cd27ab57d89f0c8e2cb08a68f66e3a116c2716b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.

import React from 'react';
import PropTypes from 'prop-types';

import {localizeMessage} from 'utils/utils.jsx';
import BackstageList from 'components/backstage/components/backstage_list.jsx';
import {FormattedMessage} from 'react-intl';
import InstalledOAuthApp from '../installed_oauth_app.jsx';

export default class InstalledOAuthApps extends React.PureComponent {
    static propTypes = {

        /**
        * The team data
        */
        team: PropTypes.object,

        /**
        * The oauthApps data
        */
        oauthApps: PropTypes.object,

        /**
        * Set if user is admin
        */
        isSystemAdmin: PropTypes.bool,

        /**
        * The request state for regenOAuthAppSecret action. Contains status and error
        */
        regenOAuthAppSecretRequest: PropTypes.object.isRequired,

        actions: PropTypes.shape({

            /**
            * The function to call to fetch OAuth apps
            */
            getOAuthApps: PropTypes.func.isRequired,

            /**
            * The function to call when Regenerate Secret link is clicked
            */
            regenOAuthAppSecret: PropTypes.func.isRequired,

            /**
            * The function to call when Delete link is clicked
            */
            deleteOAuthApp: PropTypes.func.isRequired
        }).isRequired
    }

    constructor(props) {
        super(props);
        this.state = {
            loading: true
        };
    }

    componentDidMount() {
        if (window.mm_config.EnableOAuthServiceProvider === 'true') {
            this.props.actions.getOAuthApps().then(
                () => this.setState({loading: false})
            );
        }
    }

    deleteOAuthApp = (app) => {
        this.props.actions.deleteOAuthApp(app.id);
    }

    oauthAppCompare(a, b) {
        let nameA = a.name;
        if (!nameA) {
            nameA = localizeMessage('installed_integrations.unnamed_oauth_app', 'Unnamed OAuth 2.0 Application');
        }

        let nameB = b.name;
        if (!nameB) {
            nameB = localizeMessage('installed_integrations.unnamed_oauth_app', 'Unnamed OAuth 2.0 Application');
        }

        return nameA.localeCompare(nameB);
    }

    render() {
        const oauthApps = Object.values(this.props.oauthApps).sort(this.oauthAppCompare).map((app) => {
            return (
                <InstalledOAuthApp
                    key={app.id}
                    oauthApp={app}
                    regenOAuthAppSecretRequest={this.props.regenOAuthAppSecretRequest}
                    onRegenerateSecret={this.props.actions.regenOAuthAppSecret}
                    onDelete={this.deleteOAuthApp}
                />
            );
        });

        const config = global.mm_config;
        const integrationsEnabled = (config.EnableOAuthServiceProvider === 'true' &&
            (this.props.isSystemAdmin || config.EnableOnlyAdminIntegrations !== 'true'));
        let props;
        if (integrationsEnabled) {
            props = {
                addLink: '/' + this.props.team.name + '/integrations/oauth2-apps/add',
                addText: localizeMessage('installed_oauth_apps.add', 'Add OAuth 2.0 Application')
            };
        }

        return (
            <BackstageList
                header={
                    <FormattedMessage
                        id='installed_oauth_apps.header'
                        defaultMessage='OAuth 2.0 Applications'
                    />
                }
                helpText={
                    <FormattedMessage
                        id='installed_oauth_apps.help'
                        defaultMessage='Create {oauthApplications} to securely integrate bots and third-party apps with Mattermost. Visit the {appDirectory} to find available self-hosted apps.'
                        values={{
                            oauthApplications: (
                                <a
                                    target='_blank'
                                    rel='noopener noreferrer'
                                    href='https://docs.mattermost.com/developer/oauth-2-0-applications.html'
                                >
                                    <FormattedMessage
                                        id='installed_oauth_apps.help.oauthApplications'
                                        defaultMessage='OAuth 2.0 applications'
                                    />
                                </a>
                            ),
                            appDirectory: (
                                <a
                                    target='_blank'
                                    rel='noopener noreferrer'
                                    href='https://about.mattermost.com/default-app-directory/'
                                >
                                    <FormattedMessage
                                        id='installed_oauth_apps.help.appDirectory'
                                        defaultMessage='App Directory'
                                    />
                                </a>
                            )
                        }}
                    />
                }
                emptyText={
                    <FormattedMessage
                        id='installed_oauth_apps.empty'
                        defaultMessage='No OAuth 2.0 Applications found'
                    />
                }
                searchPlaceholder={localizeMessage('installed_oauth_apps.search', 'Search OAuth 2.0 Applications')}
                loading={this.state.loading}
                {...props}
            >
                {oauthApps}
            </BackstageList>
        );
    }
}