import all frontend changes

PostHog · Apr 2, 2021 · 64bf932 · 64bf932
1 parent 10ead90
commit 64bf932
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 40 deletions.
diff --git a/frontend/src/layout/navigation/navigationLogic.ts b/frontend/src/layout/navigation/navigationLogic.ts
@@ -103,6 +103,10 @@ export const navigationLogic = kea<navigationLogicType<UserType, SystemStatus, W
         demoWarning: [
             () => [userLogic.selectors.user, organizationLogic.selectors.currentOrganization],
             (user: UserType, organization: OrganizationType): WarningType => {
+                if (!organization) {
+                    return null
+                }
+
                 if (
                     organization.setup.is_active &&
                     dayjs(organization.created_at) >= dayjs().subtract(1, 'days') &&

diff --git a/frontend/src/lib/components/JSSnippet.tsx b/frontend/src/lib/components/JSSnippet.tsx
@@ -1,15 +1,15 @@
 import React from 'react'
 import { CodeSnippet, Language } from 'scenes/ingestion/frameworks/CodeSnippet'
 import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
+import { userLogic } from 'scenes/userLogic'
 
 export function JSSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
+    const { user } = useValues(userLogic)
 
     return (
         <CodeSnippet language={Language.HTML}>{`<script>
     !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
-    posthog.init('${currentTeam?.api_token}',{api_host:'${window.location.origin}'})
+    posthog.init('${user?.team?.api_token}',{api_host:'${window.location.origin}'})
 </script>`}</CodeSnippet>
     )
 }
diff --git a/frontend/src/lib/components/TimezoneAware/index.tsx b/frontend/src/lib/components/TimezoneAware/index.tsx
@@ -7,7 +7,7 @@ import LocalizedFormat from 'dayjs/plugin/localizedFormat'
 import utc from 'dayjs/plugin/utc'
 import timezone from 'dayjs/plugin/timezone'
 import { useActions, useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
+import { userLogic } from 'scenes/userLogic'
 import { ProjectOutlined, LaptopOutlined, GlobalOutlined, SettingOutlined } from '@ant-design/icons'
 import { Link } from '../Link'
 import { humanTzOffset, shortTimeZone } from 'lib/utils'
@@ -36,7 +36,8 @@ function TZConversionHeader(): JSX.Element {
 /** Return a simple label component with timezone conversion UI. */
 export function TZLabel({ time, showSeconds }: { time: string | dayjs.Dayjs; showSeconds?: boolean }): JSX.Element {
     const parsedTime = dayjs.isDayjs(time) ? time : dayjs(time)
-    const { currentTeam } = useValues(teamLogic)
+    const { user } = useValues(userLogic)
+    const currentTeam = user?.team
 
     const DATE_OUTPUT_FORMAT = !showSeconds ? BASE_OUTPUT_FORMAT : `${BASE_OUTPUT_FORMAT}:ss`
     const timeStyle = showSeconds ? { minWidth: 192 } : undefined
@@ -98,7 +99,8 @@ export function TZLabel({ time, showSeconds }: { time: string | dayjs.Dayjs; sho
 
 /** Return an explainer component for analytics visualization pages. */
 export function TZIndicator({ style }: { style?: React.CSSProperties }): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
+    const { user } = useValues(userLogic)
+    const currentTeam = user?.team
 
     const { reportTimezoneComponentViewed } = useActions(eventUsageLogic)
 

diff --git a/frontend/src/scenes/App.tsx b/frontend/src/scenes/App.tsx
@@ -11,9 +11,7 @@ import { SceneLoading } from 'lib/utils'
 import { router } from 'kea-router'
 import { CommandPalette } from 'lib/components/CommandPalette'
 import { UpgradeModal } from './UpgradeModal'
-import { teamLogic } from './teamLogic'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { organizationLogic } from './organizationLogic'
 import { preflightLogic } from './PreflightCheck/logic'
 import { BackTo } from 'lib/components/BackTo'
 import { Papercups } from 'lib/components/Papercups'
@@ -23,11 +21,9 @@ function Toast(): JSX.Element {
 }
 
 export function App(): JSX.Element | null {
-    const { user } = useValues(userLogic)
-    const { currentOrganization, currentOrganizationLoading } = useValues(organizationLogic)
-    const { currentTeam, currentTeamLoading } = useValues(teamLogic)
+    const { user, userLoading } = useValues(userLogic)
     const { scene, params, loadedScenes, sceneConfig } = useValues(sceneLogic)
-    const { preflight } = useValues(preflightLogic)
+    const { preflight, preflightLoading } = useValues(preflightLogic)
     const { location } = useValues(router)
     const { replace } = useActions(router)
     const { featureFlags } = useValues(featureFlagLogic)
@@ -47,33 +43,37 @@ export function App(): JSX.Element | null {
                 replace('/')
                 return
             }
+
             // Redirect to org/project creation if there's no org/project respectively, unless using invite
             if (scene !== Scene.InviteSignup) {
-                if (!currentOrganizationLoading && !currentOrganization?.id) {
+                if (!user.organization) {
                     if (location.pathname !== '/organization/create') {
                         replace('/organization/create')
                     }
                     return
-                } else if (!currentTeamLoading && !currentTeam?.id) {
+                } else if (!user.team) {
                     if (location.pathname !== '/project/create') {
                         replace('/project/create')
                     }
                     return
                 }
             }
-        }
 
-        // If ingestion tutorial not completed, redirect to it
-        if (
-            currentTeam?.id &&
-            !currentTeam.completed_snippet_onboarding &&
-            !location.pathname.startsWith('/ingestion') &&
-            !location.pathname.startsWith('/personalization')
-        ) {
-            replace('/ingestion')
-            return
+            // If ingestion tutorial not completed, redirect to it
+            if (
+                !user.team?.completed_snippet_onboarding &&
+                !location.pathname.startsWith('/ingestion') &&
+                !location.pathname.startsWith('/personalization')
+            ) {
+                replace('/ingestion')
+                return
+            }
         }
-    }, [scene, user, currentOrganization, currentOrganizationLoading, currentTeam, currentTeamLoading])
+    }, [scene, user])
+
+    if (userLoading || preflightLoading) {
+        return <SceneLoading />
+    }
 
     const SceneComponent = loadedScenes[scene]?.component || (() => <SceneLoading />)
 
@@ -104,13 +104,8 @@ export function App(): JSX.Element | null {
         )
     }
 
-    if (!currentOrganization?.id || !currentTeam?.id) {
-        return null
-    }
-
     return (
         <>
-            <UpgradeModal />
             <Layout>
                 <MainNavigation />
                 <Layout className={`${sceneConfig.dark ? 'bg-mid' : ''}`} style={{ minHeight: '100vh' }}>
@@ -127,6 +122,7 @@ export function App(): JSX.Element | null {
                 </Layout>
                 {essentialElements}
             </Layout>
+            <UpgradeModal />
             <CommandPalette />
         </>
     )

diff --git a/frontend/src/scenes/organization/Settings/Invites.tsx b/frontend/src/scenes/organization/Settings/Invites.tsx
@@ -4,7 +4,7 @@ import { useValues, useActions } from 'kea'
 import { invitesLogic } from './invitesLogic'
 import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
 import { humanFriendlyDetailedTime } from 'lib/utils'
-import { OrganizationInviteType, UserNestedType } from '~/types'
+import { OrganizationInviteType, UserBasicSerializer } from '~/types'
 import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
 import { CreateInviteModalWithButton } from './CreateInviteModal'
 import { ColumnsType } from 'antd/lib/table'
@@ -81,7 +81,8 @@ export function Invites(): JSX.Element {
             title: 'Created By',
             dataIndex: 'created_by',
             key: 'created_by',
-            render: (createdBy?: UserNestedType) => (createdBy ? `${createdBy.first_name} (${createdBy.email})` : '–'),
+            render: (createdBy?: UserBasicSerializer) =>
+                createdBy ? `${createdBy.first_name} (${createdBy.email})` : '–',
         },
         {
             title: 'Invite Link',

diff --git a/frontend/src/scenes/userLogic.tsx b/frontend/src/scenes/userLogic.tsx
@@ -17,6 +17,7 @@ export const userLogic = kea<userLogicType<UserType, EventProperty, UserUpdateTy
             user: user && ({ ...user } as UserType),
             updateKey,
         }), // make and use a copy of user to patch some legacy issues
+        setUserLoading: (loading: boolean) => ({ loading }),
         userUpdateRequest: (update: UserUpdateType, updateKey?: string) => ({ update, updateKey }),
         userUpdateSuccess: (user: UserType, updateKey?: string) => ({ user, updateKey }),
         userUpdateFailure: (error: string, updateKey?: string) => ({ updateKey, error }),
@@ -43,6 +44,12 @@ export const userLogic = kea<userLogicType<UserType, EventProperty, UserUpdateTy
                 userUpdateFailure: () => false,
             },
         ],
+        userLoading: [
+            false,
+            {
+                setUserLoading: (_, { loading }) => loading,
+            },
+        ],
     },
 
     events: ({ actions }) => ({
@@ -105,6 +112,7 @@ export const userLogic = kea<userLogicType<UserType, EventProperty, UserUpdateTy
 
     listeners: ({ actions }) => ({
         loadUser: async ({ resetOnFailure }) => {
+            actions.setUserLoading(true)
             try {
                 const user: UserType = await api.get('api/user')
                 actions.setUser(user)
@@ -165,6 +173,7 @@ export const userLogic = kea<userLogicType<UserType, EventProperty, UserUpdateTy
                     actions.setUser(null)
                 }
             }
+            actions.setUserLoading(false)
         },
         userUpdateRequest: async ({ update, updateKey }) => {
             try {

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -42,7 +42,7 @@ export interface UserType {
 }
 
 /* Type for User objects in nested serializers (e.g. created_by) */
-export interface UserNestedType {
+export interface UserBasicSerializer {
     id: number
     distinct_id: string
     first_name: string
@@ -139,7 +139,7 @@ export interface ActionType {
     name: string
     post_to_slack?: boolean
     steps?: ActionStepType[]
-    created_by: UserNestedType | null
+    created_by: UserBasicSerializer | null
 }
 
 export interface ActionStepType {
@@ -282,7 +282,7 @@ export interface CohortGroupType {
 
 export interface CohortType {
     count?: number
-    created_by?: UserNestedType | null
+    created_by?: UserBasicSerializer | null
     created_at?: string
     deleted?: boolean
     id: number | 'new'
@@ -378,7 +378,7 @@ export interface DashboardItemType {
     color: string | null
     last_refresh: string
     refreshing: boolean
-    created_by: UserNestedType | null
+    created_by: UserBasicSerializer | null
     is_sample: boolean
     dashboard: number
     result: any | null
@@ -391,7 +391,7 @@ export interface DashboardType {
     pinned: boolean
     items: DashboardItemType[]
     created_at: string
-    created_by: UserNestedType | null
+    created_by: UserBasicSerializer | null
     is_shared: boolean
     share_token: string
     deleted: boolean
@@ -406,7 +406,7 @@ export interface OrganizationInviteType {
     first_name: string
     is_expired: boolean
     emailing_attempt_made: boolean
-    created_by: UserNestedType | null
+    created_by: UserBasicSerializer | null
     created_at: string
     updated_at: string
 }
@@ -449,7 +449,7 @@ export interface AnnotationType {
     scope: 'organization' | 'dashboard_item'
     content: string
     date_marker: string
-    created_by?: UserNestedType | null
+    created_by?: UserBasicSerializer | null
     created_at: string
     updated_at: string
     dashboard_item?: number
@@ -572,7 +572,7 @@ export interface FeatureFlagType {
     filters: FeatureFlagFilters
     deleted: boolean
     active: boolean
-    created_by: UserNestedType | null
+    created_by: UserBasicSerializer | null
     created_at: string
     is_simple_flag: boolean
     rollout_percentage: number | null