import { CaretRightOutlined } from '@ant-design/icons' import { Button, Col, Empty, Row, Skeleton } from 'antd' import { Subtitle } from 'lib/components/PageHeader' import React from 'react' import { PluginLoading } from 'scenes/plugins/plugin/PluginLoading' import { useActions, useValues } from 'kea' import { pluginsLogic } from 'scenes/plugins/pluginsLogic' import { PluginTab } from 'scenes/plugins/types' import { canGloballyManagePlugins } from 'scenes/plugins/access' import { userLogic } from 'scenes/userLogic' export function PluginsEmptyState(): JSX.Element { const { setPluginTab } = useActions(pluginsLogic) const { loading } = useValues(pluginsLogic) const { user } = useValues(userLogic) return ( <> {loading ? ( <> <Subtitle subtitle={ <> {' '} <CaretRightOutlined /> {'Enabled plugins'}{' '} </> } buttons={<Skeleton.Button style={{ width: 150 }} />} /> <PluginLoading /> </> ) : ( <> <Subtitle subtitle="Installed plugins" /> <Row gutter={16} style={{ marginTop: 16 }}> <Col span={24}> <Empty description={<span>You haven't installed any plugins yet</span>}> {canGloballyManagePlugins(user?.organization) && ( <Button type="default" onClick={() => setPluginTab(PluginTab.Repository)}> Open the Plugin Repository </Button> )} </Empty> </Col> </Row> </> )} </> ) }