Plugins

.dockerignore

@@ -7,6 +7,7 @@
 !manage.py
 !gunicorn.config.py
 !babel.config.js
+!posthog.json
 !package.json
 !yarn.lock
 !webpack.config.js

.gitignore

@@ -27,3 +27,4 @@ yarn-error.log
 yalc.lock
 cypress/screenshots/*
 docker-compose.prod.yml
+posthog.json

dev.Dockerfile

@@ -21,6 +21,7 @@ RUN mkdir /code/requirements/
 COPY requirements/dev.txt /code/requirements/
 RUN pip install -r requirements/dev.txt --compile
 
+COPY posthog.json /code/
 COPY package.json /code/
 COPY yarn.lock /code/
 COPY webpack.config.js /code/

frontend/src/initKea.tsx

@@ -18,7 +18,7 @@ export function initKea(): void {
                         <div>
                             <h1>Error loading "{reducerKey}".</h1>
                             <p className="info">Action "{actionKey}" responded with</p>
-                            <p className="error-message">"{error.message}"</p>
+                            <p className="error-message">"{error.message || error.detail}"</p>
                         </div>
                     )
                     window['Sentry'] ? window['Sentry'].captureException(error) : console.error(error)

frontend/src/layout/Sidebar.js

@@ -20,6 +20,7 @@ import {
     TeamOutlined,
     LockOutlined,
     WalletOutlined,
+    ApiOutlined,
     DatabaseOutlined,
 } from '@ant-design/icons'
 import { useActions, useValues } from 'kea'
@@ -64,6 +65,7 @@ const submenuOverride = {
     annotations: 'settings',
     billing: 'settings',
     licenses: 'settings',
+    plugins: 'settings',
     systemStatus: 'settings',
 }
 
@@ -279,6 +281,14 @@ export function Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
                                 <Link to={'/setup/licenses'} onClick={collapseSidebar} />
                             </Menu.Item>
                         )}
+
+                        {user.plugin_access?.configure && (
+                            <Menu.Item key="plugins" style={itemStyle} data-attr="menu-item-plugins">
+                                <ApiOutlined />
+                                <span className="sidebar-label">Plugins</span>
+                                <Link to="/setup/plugins" onClick={collapseSidebar} />
+                            </Menu.Item>
+                        )}
                     </Menu.SubMenu>
 
                     <Menu.Item key="team" style={itemStyle} data-attr="menu-item-team">

frontend/src/scenes/plugins/CustomPlugin.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Button, Col, Input, Row } from 'antd'
+import { useActions, useValues } from 'kea'
+import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
+
+export function CustomPlugin(): JSX.Element {
+    const { customPluginUrl, pluginError, loading } = useValues(pluginsLogic)
+    const { setCustomPluginUrl, installPlugin } = useActions(pluginsLogic)
+
+    return (
+        <div>
+            <h1 className="page-header">Install Custom Plugin</h1>
+            <p>
+                Paste the URL of the Plugin's <strong>Github Repository</strong> to install it
+            </p>
+
+            <Row style={{ maxWidth: 600, width: '100%' }}>
+                <Col style={{ flex: 1 }}>
+                    <Input
+                        value={customPluginUrl}
+                        disabled={loading}
+                        onChange={(e) => setCustomPluginUrl(e.target.value)}
+                        placeholder="https://github.com/user/repo"
+                    />
+                </Col>
+                <Col>
+                    <Button
+                        disabled={loading}
+                        loading={loading}
+                        type="primary"
+                        onClick={() => installPlugin(customPluginUrl, true)}
+                    >
+                        Install
+                    </Button>
+                </Col>
+            </Row>
+            {pluginError ? <p style={{ color: 'var(--red)', marginTop: 10 }}>{pluginError}</p> : null}
+        </div>
+    )
+}

frontend/src/scenes/plugins/InstalledPlugins.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import { Button, Col, Row, Table, Tooltip } from 'antd'
+import { useActions, useValues } from 'kea'
+import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
+import { GithubOutlined, CheckOutlined, ToolOutlined, PauseOutlined } from '@ant-design/icons'
+import { PluginTypeWithConfig } from 'scenes/plugins/types'
+import { userLogic } from 'scenes/userLogic'
+
+function trimTag(tag: string): string {
+    if (tag.match(/^[a-f0-9]{40}$/)) {
+        return tag.substring(0, 7)
+    }
+    if (tag.length >= 20) {
+        return tag.substring(0, 17) + '...'
+    }
+    return tag
+}
+
+export function InstalledPlugins(): JSX.Element {
+    const { user } = useValues(userLogic)
+    const { installedPlugins, loading } = useValues(pluginsLogic)
+    const { editPlugin } = useActions(pluginsLogic)
+
+    const canInstall = user?.plugin_access?.install
+
+    return (
+        <div>
+            <h1 className="page-header">{canInstall ? 'Installed Plugins' : 'Plugins'}</h1>
+            <Table
+                data-attr="plugins-table"
+                size="small"
+                rowKey={(plugin) => plugin.name}
+                pagination={{ pageSize: 99999, hideOnSinglePage: true }}
+                dataSource={installedPlugins}
+                columns={[
+                    {
+                        title: 'Plugin',
+                        key: 'name',
+                        render: function RenderPlugin(plugin: PluginTypeWithConfig): JSX.Element {
+                            return (
+                                <>
+                                    <Row>
+                                        <Col>
+                                            <strong>{plugin.name}</strong>
+                                        </Col>
+                                    </Row>
+                                    <Row gutter={16}>
+                                        <Col>
+                                            {plugin.pluginConfig?.enabled ? (
+                                                <div style={{ color: 'var(--green)' }}>
+                                                    <CheckOutlined />{' '}
+                                                    {plugin.pluginConfig?.global ? 'Globally Enabled' : 'Enabled'}
+                                                </div>
+                                            ) : (
+                                                <div style={{ color: 'var(--orange)' }}>
+                                                    <PauseOutlined /> Disabled
+                                                </div>
+                                            )}
+                                        </Col>
+                                        <Col>
+                                            {!plugin.url?.startsWith('file:') && (
+                                                <a
+                                                    href={`${plugin.url}/tree/${plugin.tag}`}
+                                                    target="_blank"
+                                                    rel="noreferrer noopener"
+                                                >
+                                                    <GithubOutlined /> {trimTag(plugin.tag)}
+                                                </a>
+                                            )}
+                                        </Col>
+                                    </Row>
+                                </>
+                            )
+                        },
+                    },
+                    {
+                        title: 'Description',
+                        key: 'description',
+                        render: function RenderDescription(plugin: PluginTypeWithConfig): JSX.Element {
+                            return <div>{plugin.description}</div>
+                        },
+                    },
+                    {
+                        title: '',
+                        key: 'config',
+                        align: 'right',
+                        render: function RenderConfig(plugin: PluginTypeWithConfig): JSX.Element | null {
+                            return !plugin.pluginConfig?.global ? (
+                                <Tooltip title="Configure">
+                                    <Button
+                                        type="primary"
+                                        icon={<ToolOutlined />}
+                                        onClick={() => editPlugin(plugin.id)}
+                                    />
+                                </Tooltip>
+                            ) : null
+                        },
+                    },
+                ]}
+                loading={loading}
+                locale={{ emptyText: 'No Plugins Installed!' }}
+            />
+        </div>
+    )
+}

frontend/src/scenes/plugins/PluginModal.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect } from 'react'
+import { useActions, useValues } from 'kea'
+import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
+import { Button, Form, Input, Modal, Popconfirm, Switch } from 'antd'
+import { DeleteOutlined } from '@ant-design/icons'
+import { userLogic } from 'scenes/userLogic'
+
+export function PluginModal(): JSX.Element {
+    const { user } = useValues(userLogic)
+    const { editingPlugin, pluginsLoading } = useValues(pluginsLogic)
+    const { editPlugin, savePluginConfig, uninstallPlugin } = useActions(pluginsLogic)
+    const [form] = Form.useForm()
+
+    const canDelete = user?.plugin_access?.install && !editingPlugin?.from_json
+
+    useEffect(() => {
+        if (editingPlugin) {
+            form.setFieldsValue({
+                ...(editingPlugin.pluginConfig.config || {}),
+                __enabled: editingPlugin.pluginConfig.enabled,
+            })
+        } else {
+            form.resetFields()
+        }
+    }, [editingPlugin?.name])
+
+    return (
+        <Modal
+            forceRender={true}
+            visible={!!editingPlugin}
+            okText="Save"
+            onOk={() => form.submit()}
+            onCancel={() => editPlugin(null)}
+            confirmLoading={pluginsLoading}
+            footer={
+                <>
+                    {canDelete && (
+                        <Popconfirm
+                            placement="topLeft"
+                            title="Are you sure you wish to uninstall this plugin?"
+                            onConfirm={editingPlugin ? () => uninstallPlugin(editingPlugin.name) : () => {}}
+                            okText="Yes"
+                            cancelText="No"
+                        >
+                            <Button style={{ color: 'var(--red)', float: 'left' }} type="link">
+                                <DeleteOutlined /> Uninstall
+                            </Button>
+                        </Popconfirm>
+                    )}
+                    <Button onClick={() => editPlugin(null)}>Cancel</Button>
+                    <Button type="primary" loading={pluginsLoading} onClick={() => form.submit()}>
+                        Save
+                    </Button>
+                </>
+            }
+        >
+            <Form form={form} layout="vertical" name="basic" onFinish={savePluginConfig}>
+                {editingPlugin ? (
+                    <div>
+                        <h2>{editingPlugin.name}</h2>
+                        <p>{editingPlugin.description}</p>
+
+                        <Form.Item label="Enabled?" fieldKey="__enabled" name="__enabled" valuePropName="checked">
+                            <Switch />
+                        </Form.Item>
+                        {Object.keys(editingPlugin.config_schema).map((configKey) => (
+                            <Form.Item
+                                key={configKey}
+                                label={editingPlugin.config_schema[configKey].name || configKey}
+                                name={configKey}
+                                required={editingPlugin.config_schema[configKey].required}
+                                rules={[
+                                    {
+                                        required: editingPlugin.config_schema[configKey].required,
+                                        message: 'Please enter a value!',
+                                    },
+                                ]}
+                            >
+                                <Input />
+                            </Form.Item>
+                        ))}
+                    </div>
+                ) : null}
+            </Form>
+        </Modal>
+    )
+}

frontend/src/scenes/plugins/Plugins.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect } from 'react'
+import { hot } from 'react-hot-loader/root'
+import { PluginModal } from 'scenes/plugins/PluginModal'
+import { CustomPlugin } from 'scenes/plugins/CustomPlugin'
+import { Repository } from 'scenes/plugins/Repository'
+import { InstalledPlugins } from 'scenes/plugins/InstalledPlugins'
+import { useValues } from 'kea'
+import { userLogic } from 'scenes/userLogic'
+
+export const Plugins = hot(_Plugins)
+function _Plugins(): JSX.Element {
+    const { user } = useValues(userLogic)
+
+    if (!user) {
+        return <div />
+    }
+
+    if (!user?.plugin_access?.configure) {
+        useEffect(() => {
+            window.location.href = '/'
+        }, [])
+        return <div />
+    }
+
+    return (
+        <div>
+            <InstalledPlugins />
+
+            {user.plugin_access?.install ? (
+                <>
+                    <br />
+                    <br />
+                    <Repository />
+                    <br />
+                    <br />
+                    <CustomPlugin />
+                </>
+            ) : null}
+
+            <PluginModal />
+        </div>
+    )
+}