101 lines
2.9 KiB
JavaScript
101 lines
2.9 KiB
JavaScript
import React from 'react';
|
|
import { observer } from 'mobx-react';
|
|
|
|
import { Flex } from 'reflexbox';
|
|
import { Input, ButtonOutline, InlineForm } from 'rebass';
|
|
import Layout, { Title } from 'components/Layout';
|
|
import CenteredContent from 'components/CenteredContent';
|
|
import SlackAuthLink from 'components/SlackAuthLink';
|
|
import ApiKeyRow from './components/ApiKeyRow';
|
|
|
|
import styles from './Settings.scss';
|
|
|
|
import SettingsStore from './SettingsStore';
|
|
|
|
@observer
|
|
class Settings extends React.Component {
|
|
static store;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.store = new SettingsStore();
|
|
}
|
|
|
|
onKeyCreate = (e) => {
|
|
e.preventDefault();
|
|
this.store.createApiKey();
|
|
}
|
|
|
|
render() {
|
|
const title = (
|
|
<Title>
|
|
Settings
|
|
</Title>
|
|
);
|
|
|
|
return (
|
|
<Layout
|
|
title={ title }
|
|
titleText="Settings"
|
|
search={ false }
|
|
loading={ this.store.isFetching }
|
|
>
|
|
<CenteredContent>
|
|
<div className={ styles.section }>
|
|
<h2 className={ styles.sectionHeader }>Slack</h2>
|
|
<p>
|
|
Connect Atlas to your Slack to instantly search for your documents
|
|
using <code>/atlas</code> command.
|
|
</p>
|
|
|
|
<SlackAuthLink
|
|
scopes={ ['commands'] }
|
|
redirectUri={ `${URL}/auth/slack/commands` }
|
|
>
|
|
<img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcSet="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x" />
|
|
</SlackAuthLink>
|
|
</div>
|
|
|
|
<div className={ styles.section }>
|
|
<h2 className={ styles.sectionHeader }>API access</h2>
|
|
<p>
|
|
Create API tokens to hack on your Atlas.
|
|
Learn more in <a href>API documentation</a>.
|
|
</p>
|
|
|
|
{ this.store.apiKeys && (
|
|
<table className={ styles.apiKeyTable }>
|
|
{ this.store.apiKeys.map(key => (
|
|
<ApiKeyRow
|
|
id={ key.id }
|
|
name={ key.name }
|
|
secret={ key.secret }
|
|
onDelete={ this.store.deleteApiKey }
|
|
/>
|
|
)) }
|
|
</table>
|
|
) }
|
|
|
|
<div>
|
|
<InlineForm
|
|
placeholder="Token name"
|
|
buttonLabel="Create token"
|
|
label="InlineForm"
|
|
name="inline_form"
|
|
value={ this.store.keyName }
|
|
onChange={ this.store.setKeyName }
|
|
onClick={ this.onKeyCreate }
|
|
style={{ width: '100%' }}
|
|
disabled={ this.store.isFetching }
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</CenteredContent>
|
|
</Layout>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Settings;
|