feat: Settings 3000

frontend/src/layout/navigation/ProjectNotice.tsx

@@ -1,7 +1,7 @@
 import { useActions, useValues } from 'kea'
 import { Link } from 'lib/lemon-ui/Link'
 import { navigationLogic, ProjectNoticeVariant } from './navigationLogic'
-import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
+import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { IconPlus, IconSettings } from 'lib/lemon-ui/icons'
 import { LemonBannerAction } from 'lib/lemon-ui/LemonBanner/LemonBanner'

frontend/src/layout/navigation/TopBar/SitePopover.tsx

@@ -29,7 +29,7 @@ import {
     NewOrganizationButton,
     OtherOrganizationButton,
 } from '~/layout/navigation/OrganizationSwitcher'
-import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
+import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { LemonButtonPropsBase } from '@posthog/lemon-ui'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'

frontend/src/layout/navigation/TopBar/TopBar.tsx

@@ -6,12 +6,12 @@ import { navigationLogic } from '../navigationLogic'
 import { HelpButton } from 'lib/components/HelpButton/HelpButton'
 import { CommandPalette } from 'lib/components/CommandPalette'
 import { CreateOrganizationModal } from 'scenes/organization/CreateOrganizationModal'
-import { InviteModal } from 'scenes/organization/Settings/InviteModal'
+import { InviteModal } from 'scenes/settings/organization/InviteModal'
 import { Link } from 'lib/lemon-ui/Link'
 import { IconMenu, IconMenuOpen } from 'lib/lemon-ui/icons'
 import { CreateProjectModal } from 'scenes/project/CreateProjectModal'
 import './TopBar.scss'
-import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
+import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { UniversalSearchPopover } from 'lib/components/UniversalSearch/UniversalSearchPopover'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { groupsModel } from '~/models/groupsModel'

frontend/src/layout/navigation/navigationLogic.ts

@@ -8,7 +8,7 @@ import { sceneLogic } from 'scenes/sceneLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { userLogic } from 'scenes/userLogic'
 import type { navigationLogicType } from './navigationLogicType'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { membersLogic } from 'scenes/settings/organization/membersLogic'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { Scene } from 'scenes/sceneTypes'
 

frontend/src/lib/components/ActivationSidebar/activationLogic.test.ts

@@ -1,6 +1,6 @@
 import { expectLogic } from 'kea-test-utils'
-import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
+import { membersLogic } from 'scenes/settings/organization/membersLogic'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { navigationLogic } from '~/layout/navigation/navigationLogic'

frontend/src/lib/components/ActivationSidebar/activationLogic.ts

@@ -3,8 +3,8 @@ import { loaders } from 'kea-loaders'
 import { router, urlToAction } from 'kea-router'
 import api from 'lib/api'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
+import { membersLogic } from 'scenes/settings/organization/membersLogic'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { navigationLogic } from '~/layout/navigation/navigationLogic'

frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx

@@ -8,7 +8,7 @@ import { DashboardType, InsightType } from '~/types'
 import api from 'lib/api'
 import { copyToClipboard, isMobile, isURL, sample, uniqueBy } from 'lib/utils'
 import { userLogic } from 'scenes/userLogic'
-import { personalAPIKeysLogic } from '../PersonalAPIKeys/personalAPIKeysLogic'
+import { personalAPIKeysLogic } from '../../../scenes/settings/user/personalAPIKeysLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import posthog from 'posthog-js'
 import { debugCHQueries } from './DebugCHQueries'

frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx

@@ -8,7 +8,7 @@
 import { Owner } from 'scenes/events/Owner'
 import { dayjs } from 'lib/dayjs'
 import { Divider, DividerProps, Select } from 'antd'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { membersLogic } from 'scenes/settings/organization/membersLogic'
 import { Link } from 'lib/lemon-ui/Link'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
@@ -188,7 +188,7 @@
 
 function HorizontalLine({ children, ...props }: DividerProps): JSX.Element {
     return (
         <Divider className="definition-popover-divider" {...props}>
             {children}
         </Divider>
     )
@@ -252,7 +252,7 @@
     const { setLocalDefinition } = useActions(definitionPopoverLogic)
 
     return (
         <Select
             className={'definition-popover-owner-select definition-popover-edit-form-value'}
             placeholder={<Owner user={'owner' in localDefinition ? localDefinition?.owner : null} />}
             style={{ minWidth: 200 }}

frontend/src/lib/components/RestrictedArea.tsx

@@ -18,17 +18,16 @@ export enum RestrictionScope {
     Project = 'project',
 }
 
-export interface RestrictedAreaProps {
-    Component: (props: RestrictedComponentProps) => JSX.Element
+export interface UseRestrictedAreaProps {
     minimumAccessLevel: EitherMembershipLevel
     scope?: RestrictionScope
 }
 
-export function RestrictedArea({
-    Component,
-    minimumAccessLevel,
-    scope = RestrictionScope.Organization,
-}: RestrictedAreaProps): JSX.Element {
+export interface RestrictedAreaProps extends UseRestrictedAreaProps {
+    Component: (props: RestrictedComponentProps) => JSX.Element
+}
+
+export function useRestrictedArea({ scope, minimumAccessLevel }: UseRestrictedAreaProps): null | string {
     const { currentOrganization } = useValues(organizationLogic)
     const { currentTeam } = useValues(teamLogic)
 
@@ -59,6 +58,16 @@ export function RestrictedArea({
         return null
     }, [currentOrganization])
 
+    return restrictionReason
+}
+
+export function RestrictedArea({
+    Component,
+    minimumAccessLevel,
+    scope = RestrictionScope.Organization,
+}: RestrictedAreaProps): JSX.Element {
+    const restrictionReason = useRestrictedArea({ minimumAccessLevel, scope })
+
     return restrictionReason ? (
         <Tooltip title={restrictionReason} placement="topLeft" delayMs={0}>
             <span>

frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from 'react'
 import { useActions, useValues } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { membersLogic } from 'scenes/settings/organization/membersLogic'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { Field } from 'lib/forms/Field'
 import { dayjs } from 'lib/dayjs'

frontend/src/scenes/App.tsx

@@ -20,7 +20,7 @@ import { inAppPromptLogic } from 'lib/logic/inAppPrompt/inAppPromptLogic'
 import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
 import { LemonModal } from '@posthog/lemon-ui'
 import { Setup2FA } from './authentication/Setup2FA'
-import { membersLogic } from './organization/Settings/membersLogic'
+import { membersLogic } from './settings/organization/membersLogic'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { Navigation as Navigation3000 } from '~/layout/navigation-3000/Navigation'
 import { Prompt } from 'lib/logic/newPrompt/Prompt'

frontend/src/scenes/ResourcePermissionModal.tsx

@@ -12,8 +12,8 @@ import {
     FormattedResourceLevel,
     permissionsLogic,
     ResourcePermissionMapping,
-} from './organization/Settings/Permissions/permissionsLogic'
-import { rolesLogic } from './organization/Settings/Permissions/Roles/rolesLogic'
+} from './settings/organization/Permissions/permissionsLogic'
+import { rolesLogic } from './settings/organization/Permissions/Roles/rolesLogic'
 import { urls } from './urls'
 
 interface ResourcePermissionProps {

frontend/src/scenes/appScenes.ts

@@ -46,7 +46,7 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.DataWarehouseExternal]: () => import('./data-warehouse/external/DataWarehouseExternalScene'),
     [Scene.DataWarehouseSavedQueries]: () => import('./data-warehouse/saved_queries/DataWarehouseSavedQueriesScene'),
     [Scene.DataWarehouseSettings]: () => import('./data-warehouse/settings/DataWarehouseSettingsScene'),
-    [Scene.OrganizationSettings]: () => import('./organization/Settings'),
+    [Scene.OrganizationSettings]: () => import('./settings/organization'),
     [Scene.OrganizationCreateFirst]: () => import('./organization/Create'),
     [Scene.OrganizationCreationConfirm]: () => import('./organization/ConfirmOrganization/ConfirmOrganization'),
     [Scene.ProjectHomepage]: () => import('./project-homepage/ProjectHomepage'),
@@ -57,7 +57,7 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.Site]: () => import('./sites/Site'),
     [Scene.AsyncMigrations]: () => import('./instance/AsyncMigrations/AsyncMigrations'),
     [Scene.DeadLetterQueue]: () => import('./instance/DeadLetterQueue/DeadLetterQueue'),
-    [Scene.MySettings]: () => import('./me/Settings'),
+    [Scene.MySettings]: () => import('./me/settings'),
     [Scene.Annotations]: () => import('./annotations/Annotations'),
     [Scene.PreflightCheck]: () => import('./PreflightCheck/PreflightCheck'),
     [Scene.Signup]: () => import('./authentication/signup/SignupContainer'),
@@ -83,4 +83,5 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.Canvas]: () => import('./notebooks/NotebookCanvasScene'),
     [Scene.Products]: () => import('./products/Products'),
     [Scene.Onboarding]: () => import('./onboarding/Onboarding'),
+    [Scene.Settings]: () => import('./settings/SettingsScene'),
 }

frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx

@@ -22,7 +22,7 @@ import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { LemonRow } from 'lib/lemon-ui/LemonRow'
 import { DASHBOARD_CANNOT_EDIT_MESSAGE } from '../DashboardHeader'
 import { LemonInput, LemonSelect } from '@posthog/lemon-ui'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { membersLogic } from 'scenes/settings/organization/membersLogic'
 import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 
 export function DashboardsTableContainer(): JSX.Element {

frontend/src/scenes/feature-flags/featureFlagPermissionsLogic.tsx

@@ -2,7 +2,7 @@ import { actions, afterMount, connect, kea, key, path, props, reducers, selector
 import { loaders } from 'kea-loaders'
 import api from 'lib/api'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { rolesLogic } from 'scenes/organization/Settings/Permissions/Roles/rolesLogic'
+import { rolesLogic } from 'scenes/settings/organization/Permissions/Roles/rolesLogic'
 import { AccessLevel, FeatureFlagAssociatedRoleType, Resource, RoleType } from '~/types'
 
 import type { featureFlagPermissionsLogicType } from './featureFlagPermissionsLogicType'

frontend/src/scenes/ingestion/IngestionInviteMembersButton.tsx

@@ -2,7 +2,7 @@ import { LemonButton } from '@posthog/lemon-ui'
 import { useActions } from 'kea'
 import { IconArrowRight } from 'lib/lemon-ui/icons'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
+import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 
 export function IngestionInviteMembersButton(): JSX.Element {
     const { showInviteModal } = useActions(inviteLogic)

frontend/src/scenes/ingestion/IngestionWizard.tsx

@@ -12,8 +12,8 @@ import { GeneratingDemoDataPanel } from './panels/GeneratingDemoDataPanel'
 import { ThirdPartyPanel } from './panels/ThirdPartyPanel'
 import { BillingPanel } from './panels/BillingPanel'
 import { Sidebar } from './Sidebar'
-import { InviteModal } from 'scenes/organization/Settings/InviteModal'
-import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
+import { InviteModal } from 'scenes/settings/organization/InviteModal'
+import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { Logo } from '~/toolbar/assets/Logo'
 import { SitePopover } from '~/layout/navigation/TopBar/SitePopover'
 import { HelpButton } from 'lib/components/HelpButton/HelpButton'

frontend/src/scenes/ingestion/ingestionLogic.ts

@@ -11,7 +11,7 @@ import { windowValues } from 'kea-window-values'
 import { subscriptions } from 'kea-subscriptions'
 import { TeamType } from '~/types'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
+import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import api from 'lib/api'
 import { loaders } from 'kea-loaders'
 import type { ingestionLogicType } from './ingestionLogicType'

frontend/src/scenes/ingestion/panels/InviteTeamPanel.tsx

@@ -4,7 +4,7 @@ import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import './Panels.scss'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { IconChevronRight } from 'lib/lemon-ui/icons'
-import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
+import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { DemoProjectButton } from './PanelComponents'
 

frontend/src/lib/components/PersonalAPIKeys/PersonalAPIKeys.tsx → frontend/src/scenes/me/Settings/PersonalAPIKeys.tsx

@@ -5,7 +5,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons'
 import { personalAPIKeysLogic } from './personalAPIKeysLogic'
 import { PersonalAPIKeyType } from '~/types'
 import { humanFriendlyDetailedTime } from 'lib/utils'
-import { CopyToClipboardInline } from '../CopyToClipboard'
+import { CopyToClipboardInline } from '../../../lib/components/CopyToClipboard'
 import { ColumnsType } from 'antd/lib/table'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonInput, LemonModal, Link } from '@posthog/lemon-ui'

frontend/src/scenes/me/Settings/TwoFactorAuthentication.tsx

@@ -4,7 +4,7 @@ import { LemonButton, LemonModal } from '@posthog/lemon-ui'
 import { IconCheckmark, IconWarning } from 'lib/lemon-ui/icons'
 import { useState } from 'react'
 import { Setup2FA } from 'scenes/authentication/Setup2FA'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { membersLogic } from 'scenes/settings/organization/membersLogic'
 
 export function TwoFactorAuthentication(): JSX.Element {
     const { user } = useValues(userLogic)

frontend/src/scenes/me/Settings/index.tsx

@@ -4,7 +4,7 @@ import { useAnchor } from 'lib/hooks/useAnchor'
 import { router } from 'kea-router'
 import { UpdateEmailPreferences } from './UpdateEmailPreferences'
 import { ChangePassword } from './ChangePassword'
-import { PersonalAPIKeys } from 'lib/components/PersonalAPIKeys'
+import { PersonalAPIKeys } from 'scenes/settings/user/PersonalAPIKeys'
 import { OptOutCapture } from './OptOutCapture'
 import { PageHeader } from 'lib/components/PageHeader'
 import { SceneExport } from 'scenes/sceneTypes'

frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx

@@ -10,7 +10,7 @@ import { useEffect } from 'react'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { LemonMenu } from 'lib/lemon-ui/LemonMenu'
 import { IconDelete, IconEllipsis } from 'lib/lemon-ui/icons'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { membersLogic } from 'scenes/settings/organization/membersLogic'
 import { ContainsTypeFilters } from 'scenes/notebooks/NotebooksTable/ContainsTypeFilter'
 import { DEFAULT_FILTERS, notebooksTableLogic } from 'scenes/notebooks/NotebooksTable/notebooksTableLogic'
 import { notebookPanelLogic } from '../NotebookPanel/notebookPanelLogic'

frontend/src/scenes/project-homepage/ProjectHomepage.tsx

@@ -6,7 +6,7 @@ import { useActions, useValues } from 'kea'
 import { teamLogic } from 'scenes/teamLogic'
 import { Scene, SceneExport } from 'scenes/sceneTypes'
 import { DashboardPlacement } from '~/types'
-import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
+import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { IconCottage } from 'lib/lemon-ui/icons'
 import { projectHomepageLogic } from 'scenes/project-homepage/projectHomepageLogic'

frontend/src/scenes/project/Settings/teamMembersLogic.tsx

@@ -13,7 +13,7 @@ import {
     UserType,
 } from '~/types'
 import type { teamMembersLogicType } from './teamMembersLogicType'
-import { membersLogic } from '../../organization/Settings/membersLogic'
+import { membersLogic } from '../../settings/organization/membersLogic'
 import { membershipLevelToName } from 'lib/utils/permissioning'
 import { userLogic } from '../../userLogic'
 import { teamLogic } from '../../teamLogic'

frontend/src/scenes/saved-insights/SavedInsightsFilters.tsx

@@ -6,7 +6,7 @@ import { INSIGHT_TYPE_OPTIONS } from 'scenes/saved-insights/SavedInsights'
 import { useActions, useValues } from 'kea'
 import { dashboardsModel } from '~/models/dashboardsModel'
 import { savedInsightsLogic } from 'scenes/saved-insights/savedInsightsLogic'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { membersLogic } from 'scenes/settings/organization/membersLogic'
 import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
 
 export function SavedInsightsFilters(): JSX.Element {

frontend/src/scenes/sceneTypes.ts

@@ -86,6 +86,7 @@ export enum Scene {
     Canvas = 'Canvas',
     Products = 'Products',
     Onboarding = 'Onboarding',
+    Settings = 'Settings',
 }
 
 export type SceneProps = Record<string, any>

frontend/src/scenes/scenes.ts

@@ -336,6 +336,10 @@ export const sceneConfigurations: Partial<Record<Scene, SceneConfig>> = {
         name: 'Canvas',
         layout: 'app-raw',
     },
+    [Scene.Settings]: {
+        projectBased: true,
+        name: 'Settings',
+    },
 }
 
 const preserveParams = (url: string) => (_params: Params, searchParams: Params, hashParams: Params) => {
@@ -514,4 +518,5 @@ export const routes: Record<string, Scene> = {
     [urls.notebook(':shortId')]: Scene.Notebook,
     [urls.notebooks()]: Scene.Notebooks,
     [urls.canvas()]: Scene.Canvas,
+    [urls.settings()]: Scene.Settings,
 }

frontend/src/scenes/session-recordings/saved-playlists/SavedSessionRecordingPlaylists.tsx

@@ -6,7 +6,7 @@ import { LemonTableColumn, LemonTableColumns } from 'lib/lemon-ui/LemonTable'
 import { urls } from 'scenes/urls'
 import { createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
 import { DateFilter } from 'lib/components/DateFilter/DateFilter'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { membersLogic } from 'scenes/settings/organization/membersLogic'
 import { TZLabel } from '@posthog/apps-common'
 import { SavedSessionRecordingPlaylistsEmptyState } from 'scenes/session-recordings/saved-playlists/SavedSessionRecordingPlaylistsEmptyState'
 import clsx from 'clsx'