Enable plugins for everyone

frontend/src/layout/navigation/MainNavigation.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react'
+import React, { useRef, useState, useEffect, useMemo } from 'react'
 import { Layout, Menu, Modal, Popover } from 'antd'
 import {
     ProjectFilled,
@@ -12,7 +12,7 @@ import {
 } from '@ant-design/icons'
 import { useActions, useValues } from 'kea'
 import { Link } from 'lib/components/Link'
-import { sceneLogic } from 'scenes/sceneLogic'
+import { Scene, sceneLogic } from 'scenes/sceneLogic'
 import { triggerResizeAfterADelay } from 'lib/utils'
 import { useEscapeKey } from 'lib/hooks/useEscapeKey'
 import lgLogo from 'public/posthog-logo-white.svg'
@@ -36,7 +36,7 @@ import { organizationLogic } from 'scenes/organizationLogic'
 import { canViewPlugins } from '../../scenes/plugins/access'
 
 // to show the right page in the sidebar
-const sceneOverride: Record<string, string> = {
+const sceneOverride: Partial<Record<Scene, string>> = {
     action: 'actions',
     person: 'persons',
     dashboard: 'dashboards',
@@ -47,30 +47,35 @@ interface MenuItemProps {
     icon: JSX.Element
     identifier: string
     to: string
+    highlight?: boolean
     onClick?: () => void
 }
 
-const MenuItem = ({ title, icon, identifier, to, onClick }: MenuItemProps): JSX.Element => {
+const MenuItem = ({ title, icon, identifier, to, highlight = false, onClick }: MenuItemProps): JSX.Element => {
     const { scene, loadingScene } = useValues(sceneLogic)
     const { collapseMenu } = useActions(navigationLogic)
 
-    function activeScene(): string {
-        const nominalScene = loadingScene || scene
-        // Scenes with special handling can go here
-        return sceneOverride[nominalScene] || nominalScene
-    }
-
     function handleClick(): void {
         onClick?.()
         collapseMenu()
     }
 
+    const className: string = useMemo(() => {
+        const nominalScene: Scene = loadingScene || scene
+        // Scenes with special handling handled below
+        const activeScene: string = sceneOverride[nominalScene] || nominalScene
+        const classList = ['menu-item']
+        if (identifier === activeScene) {
+            classList.push('menu-item-active')
+        } else if (highlight) {
+            classList.push('menu-item-highlighted')
+        }
+        return classList.join(' ')
+    }, [scene, loadingScene])
+
     return (
         <Link to={to} onClick={handleClick}>
-            <div
-                className={`menu-item${activeScene() === identifier ? ' menu-item-active' : ''}`}
-                data-attr={`menu-item-${identifier}`}
-            >
+            <div className={className} data-attr={`menu-item-${identifier}`}>
                 {icon}
                 <span className="menu-title text-center">{title}</span>
             </div>
@@ -232,7 +237,13 @@ export function MainNavigation(): JSX.Element {
                     />
                     <div className="divider" />
                     {canViewPlugins(user?.organization) && (
-                        <MenuItem title="Plugins" icon={<ApiFilled />} identifier="plugins" to="/project/plugins" />
+                        <MenuItem
+                            title="Plugins"
+                            icon={<ApiFilled />}
+                            identifier="plugins"
+                            to="/project/plugins"
+                            highlight={!user?.flags['has_checked_out_plugins']}
+                        />
                     )}
                     <MenuItem
                         title="Annotations"

frontend/src/layout/navigation/Navigation.scss

@@ -51,6 +51,7 @@
     }
 
     .menu-item {
+        position: relative;
         display: flex;
         align-items: center;
         border-radius: $radius;
@@ -81,6 +82,17 @@
             background-color: $primary;
             transition: background-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
         }
+
+        &.menu-item-highlighted::after {
+            content: '';
+            position: absolute;
+            top: 2px;
+            right: 2px;
+            width: 10px;
+            height: 10px;
+            border-radius: 100%;
+            background: $brand_red;
+        }
     }
 
     .divider {

frontend/src/scenes/plugins/Plugins.tsx

@@ -6,72 +6,80 @@ import { InstalledTab } from 'scenes/plugins/tabs/installed/InstalledTab'
 import { useActions, useValues } from 'kea'
 import { userLogic } from 'scenes/userLogic'
 import { pluginsLogic } from './pluginsLogic'
-import { Spin, Tabs, Tag } from 'antd'
-import { OptInPlugins } from 'scenes/plugins/optin/OptInPlugins'
+import { Alert, Tabs } from 'antd'
 import { PageHeader } from 'lib/components/PageHeader'
 import { PluginTab } from 'scenes/plugins/types'
 import { AdvancedTab } from 'scenes/plugins/tabs/advanced/AdvancedTab'
 import { canGloballyManagePlugins, canInstallPlugins, canViewPlugins } from './access'
 
 export function Plugins(): JSX.Element | null {
     const { user } = useValues(userLogic)
+    const { userUpdateRequest } = useActions(userLogic)
     const { pluginTab } = useValues(pluginsLogic)
     const { setPluginTab } = useActions(pluginsLogic)
     const { TabPane } = Tabs
 
-    if (!user) {
-        return <Spin />
-    }
+    useEffect(() => {
+        if (user) {
+            if (!canViewPlugins(user.organization)) {
+                window.location.href = '/'
+                return
+            }
+            if (!user.flags.has_checked_out_plugins) {
+                userUpdateRequest({ user: { flags: { has_checked_out_plugins: true } } })
+                return
+            }
+        }
+    }, [user])
 
-    if (!canViewPlugins(user.organization)) {
-        useEffect(() => {
-            window.location.href = '/'
-        }, [])
+    if (!user || !canViewPlugins(user.organization)) {
         return null
     }
 
     return (
         <div className="plugins-scene">
             <PageHeader
-                title={
-                    <>
-                        Plugins
-                        <sup>
-                            <Tag color="orange" style={{ marginLeft: 8 }}>
-                                BETA
-                            </Tag>
-                        </sup>
-                    </>
-                }
-                caption={user.team?.plugins_opt_in ? "Plugins enable you to extend PostHog's core functionality." : ''}
+                title="Plugins"
+                caption="Plugins enable you to extend PostHog's core data processing functionality."
             />
-
-            {user.team?.plugins_opt_in ? (
-                <>
-                    {canInstallPlugins(user.organization) ? (
-                        <Tabs activeKey={pluginTab} onChange={(activeKey) => setPluginTab(activeKey as PluginTab)}>
-                            <TabPane tab="Installed" key={PluginTab.Installed}>
-                                <InstalledTab />
-                            </TabPane>
-                            {canGloballyManagePlugins(user.organization) && (
-                                <TabPane tab="Repository" key={PluginTab.Repository}>
-                                    <RepositoryTab />
-                                </TabPane>
-                            )}
-                            <TabPane tab="Advanced" key={PluginTab.Advanced}>
-                                <AdvancedTab />
-                            </TabPane>
-                        </Tabs>
-                    ) : (
+            {!user.flags['has_closed_plugins_end_of_beta'] && (
+                <Alert
+                    message="Out of Beta!"
+                    description={
+                        <>
+                            Plugins are now a core feature of PostHog. Read more about this next step in our journey on
+                            the PostHog blog.
+                        </>
+                    }
+                    type="info"
+                    showIcon
+                    closable
+                    onClose={() => {
+                        if (!user.flags.has_closed_plugins_end_of_beta) {
+                            userUpdateRequest({ user: { flags: { has_closed_plugins_end_of_beta: true } } })
+                        }
+                    }}
+                    style={{ marginBottom: 32 }}
+                />
+            )}
+            {canInstallPlugins(user.organization) ? (
+                <Tabs activeKey={pluginTab} onChange={(activeKey) => setPluginTab(activeKey as PluginTab)}>
+                    <TabPane tab="Installed" key={PluginTab.Installed}>
                         <InstalledTab />
+                    </TabPane>
+                    {canGloballyManagePlugins(user.organization) && (
+                        <TabPane tab="Repository" key={PluginTab.Repository}>
+                            <RepositoryTab />
+                        </TabPane>
                     )}
-                    <PluginDrawer />
-                </>
+                    <TabPane tab="Advanced" key={PluginTab.Advanced}>
+                        <AdvancedTab user={user} />
+                    </TabPane>
+                </Tabs>
             ) : (
-                <div style={{ maxWidth: 600, marginTop: 20 }}>
-                    <OptInPlugins />
-                </div>
+                <InstalledTab />
             )}
+            <PluginDrawer />
         </div>
     )
 }

frontend/src/scenes/plugins/tabs/advanced/AdvancedTab.tsx

@@ -5,14 +5,13 @@ import React from 'react'
 import { SourcePlugin } from 'scenes/plugins/tabs/advanced/SourcePlugin'
 import { CustomPlugin } from 'scenes/plugins/tabs/advanced/CustomPlugin'
 import { LocalPlugin } from 'scenes/plugins/tabs/advanced/LocalPlugin'
-import { useActions, useValues } from 'kea'
+import { useActions } from 'kea'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
-import { DangerZone } from 'scenes/plugins/tabs/advanced/DangerZone'
-import { userLogic } from 'scenes/userLogic'
+import { UserType } from 'src/types'
 
-export function AdvancedTab(): JSX.Element {
-    const { user } = useValues(userLogic)
+export function AdvancedTab({ user }: { user: UserType }): JSX.Element {
     const { setPluginTab } = useActions(pluginsLogic)
+
     return (
         <>
             <Alert
@@ -40,7 +39,6 @@ export function AdvancedTab(): JSX.Element {
             <SourcePlugin />
             <CustomPlugin />
             {user && !user.is_multi_tenancy && <LocalPlugin />}
-            {user?.team?.plugins_opt_in && <DangerZone />}
         </>
     )
 }