Merge branch 'master' into dn-chore/upgrade-openai

PostHog · Jan 26, 2024 · 8abebea · 8abebea
2 parents 1ab0fd5 + 0dd78c5
commit 8abebea
Show file tree

Hide file tree

Showing 50 changed files with 1,415 additions and 407 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -119,7 +119,7 @@ module.exports = {
                     },
                     {
                         name: 'antd',
-                        importNames: ['Card', 'Col', 'Row', 'Alert', 'Tooltip'],
+                        importNames: ['Card', 'Col', 'Row', 'Alert', 'Tooltip', 'Progress'],
                         message: 'please use the Lemon equivalent instead',
                     },
                 ],
@@ -169,6 +169,10 @@ module.exports = {
                         element: 'LemonButtonWithDropdown',
                         message: 'use <LemonMenu> with a <LemonButton> child instead',
                     },
+                    {
+                        element: 'Progress',
+                        message: 'use <LemonProgress> instead',
+                    },
                 ],
             },
         ],

diff --git a/cypress/e2e/auth-password-reset.cy.ts b/cypress/e2e/auth-password-reset.cy.ts
@@ -24,7 +24,7 @@ describe('Password Reset', () => {
     it('Shows validation error if passwords do not match', () => {
         cy.visit('/reset/e2e_test_user/e2e_test_token')
         cy.get('[data-attr="password"]').type('12345678')
-        cy.get('.ant-progress-bg').should('be.visible')
+        cy.get('.LemonProgress__track').should('be.visible')
         cy.get('[data-attr="password-confirm"]').type('1234567A')
         cy.get('button[type=submit]').click()
         cy.get('.text-danger').should('contain', 'Passwords do not match')

diff --git a/cypress/e2e/invites.cy.ts b/cypress/e2e/invites.cy.ts
@@ -53,7 +53,7 @@ describe('Invite Signup', () => {
         cy.get('.BridgePage__left').should('contain', "You've been invited to join")
         cy.get('input[type="email"]').should('have.value', target_email)
         cy.get('[data-attr="password"]').type('12345678')
-        cy.get('.ant-progress-bg').should('not.have.css', 'width', '0px') // Password strength indicator is working
+        cy.get('.LemonProgress__track').should('not.have.css', 'width', '0px') // Password strength indicator is working
         cy.get('[data-attr="first_name"]').type(randomString('Bob'))
         cy.get('[data-attr=signup-role-at-organization]').click()
         cy.get('.Popover li:first-child').click()

diff --git a/frontend/__snapshots__/lemon-ui-lemon-progress--variations--dark.png b/frontend/__snapshots__/lemon-ui-lemon-progress--variations--dark.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-progress--variations--light.png b/frontend/__snapshots__/lemon-ui-lemon-progress--variations--light.png
diff --git a/frontend/__snapshots__/scenes-other-signup--cloud--dark.png b/frontend/__snapshots__/scenes-other-signup--cloud--dark.png
diff --git a/frontend/__snapshots__/scenes-other-signup--self-hosted--dark.png b/frontend/__snapshots__/scenes-other-signup--self-hosted--dark.png
diff --git a/frontend/__snapshots__/scenes-other-signup--self-hosted-sso--dark.png b/frontend/__snapshots__/scenes-other-signup--self-hosted-sso--dark.png
diff --git a/frontend/public/postgres-logo.svg b/frontend/public/postgres-logo.svg
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
@@ -31,6 +31,7 @@ import {
     EventType,
     Experiment,
     ExportedAssetType,
+    ExternalDataPostgresSchema,
     ExternalDataSourceCreatePayload,
     ExternalDataSourceSchema,
     ExternalDataStripeSource,
@@ -1824,6 +1825,22 @@ const api = {
         async reload(sourceId: ExternalDataStripeSource['id']): Promise<void> {
             await new ApiRequest().externalDataSource(sourceId).withAction('reload').create()
         },
+        async database_schema(
+            host: string,
+            port: string,
+            dbname: string,
+            user: string,
+            password: string,
+            schema: string
+        ): Promise<ExternalDataPostgresSchema[]> {
+            const queryParams = toParams({ host, port, dbname, user, password, schema })
+
+            return await new ApiRequest()
+                .externalDataSources()
+                .withAction('database_schema')
+                .withQueryString(queryParams)
+                .get()
+        },
     },
 
     externalDataSchemas: {

diff --git a/frontend/src/lib/components/PasswordStrength.tsx b/frontend/src/lib/components/PasswordStrength.tsx
@@ -1,4 +1,4 @@
-import { Progress } from 'antd'
+import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import zxcvbn from 'zxcvbn'
 
@@ -15,14 +15,12 @@ export default function PasswordStrength({
 
     return (
         <Tooltip title="Password strength">
-            <Progress
+            <LemonProgress
                 percent={passwordScore}
-                size="small"
                 strokeColor={
                     passwordScore <= 50 ? 'var(--danger)' : passwordScore <= 75 ? 'var(--warning)' : 'var(--success)'
                 }
                 className={className}
-                showInfo={false}
             />
         </Tooltip>
     )

diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
@@ -159,7 +159,7 @@ export const FEATURE_FLAGS = {
     EXCEPTION_AUTOCAPTURE: 'exception-autocapture',
     DATA_WAREHOUSE: 'data-warehouse', // owner: @EDsCODE
     DATA_WAREHOUSE_VIEWS: 'data-warehouse-views', // owner: @EDsCODE
-    DATA_WAREHOUSE_HUBSPOT_IMPORT: 'data-warehouse-hubspot-import', // owner: @EDsCODE
+    DATA_WAREHOUSE_POSTGRES_IMPORT: 'data-warehouse-postgres-import', // owner: @EDsCODE
     FF_DASHBOARD_TEMPLATES: 'ff-dashboard-templates', // owner: @EDsCODE
     SHOW_PRODUCT_INTRO_EXISTING_PRODUCTS: 'show-product-intro-existing-products', // owner: @raquelmsmith
     ARTIFICIAL_HOG: 'artificial-hog', // owner: @Twixes

diff --git a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx
@@ -24,6 +24,10 @@ export interface LemonFileInputProps extends Pick<HTMLInputElement, 'multiple' |
      * the text to display to the user, a sensible default is used if not provided
      */
     callToAction?: string | JSX.Element
+    /**
+     * whether to show the uploaded files beneath the upload input
+     */
+    showUploadedFiles?: boolean
 }
 
 export const LemonFileInput = ({
@@ -35,6 +39,7 @@ export const LemonFileInput = ({
     accept,
     alternativeDropTargetRef,
     callToAction,
+    showUploadedFiles = true,
 }: LemonFileInputProps): JSX.Element => {
     const [files, setFiles] = useState(value || value || ([] as File[]))
 
@@ -148,7 +153,7 @@ export const LemonFileInput = ({
                         </>
                     )}
                 </label>
-                {files.length > 0 && (
+                {files.length > 0 && showUploadedFiles && (
                     <div className="flex flex-row gap-2">
                         {files.map((x, i) => (
                             <LemonTag key={i} icon={loading ? <Spinner /> : undefined}>

diff --git a/frontend/src/lib/lemon-ui/LemonProgress/LemonProgress.stories.tsx b/frontend/src/lib/lemon-ui/LemonProgress/LemonProgress.stories.tsx
@@ -0,0 +1,23 @@
+import { Meta, StoryFn } from '@storybook/react'
+
+import { LemonProgress } from './LemonProgress'
+
+const meta: Meta<typeof LemonProgress> = {
+    title: 'Lemon UI/Lemon Progress',
+    component: LemonProgress,
+    args: {
+        percent: 30,
+    },
+    tags: ['autodocs'],
+}
+export default meta
+
+export const Variations: StoryFn<typeof LemonProgress> = () => {
+    return (
+        <div className="min-w-120">
+            <LemonProgress percent={30} />
+            <LemonProgress percent={75} strokeColor="var(--warning)" />
+            <LemonProgress percent={50} size="large" strokeColor="purple" />
+        </div>
+    )
+}
diff --git a/frontend/src/lib/lemon-ui/LemonProgress/LemonProgress.tsx b/frontend/src/lib/lemon-ui/LemonProgress/LemonProgress.tsx
@@ -0,0 +1,38 @@
+import clsx from 'clsx'
+
+export type LemonProgressProps = {
+    size?: 'medium' | 'large'
+    strokeColor?: string
+    percent: number
+    children?: React.ReactNode
+    className?: string
+}
+
+export const LemonProgress = ({
+    size = 'medium',
+    percent,
+    strokeColor = 'var(--brand-blue)',
+    children,
+    className,
+}: LemonProgressProps): JSX.Element => {
+    return (
+        <div
+            className={clsx(
+                'LemonProgress rounded-full w-full inline-block bg-bg-3000',
+                size === 'large' ? 'h-5' : 'h-1.5',
+                className
+            )}
+        >
+            <span
+                className={clsx(
+                    'LemonProgress__track block h-full rounded-full transition-all',
+                    percent > 0 ? (size === 'large' ? 'min-w-5' : 'min-w-1.5') : null
+                )}
+                // eslint-disable-next-line react/forbid-dom-props
+                style={{ width: `${percent}%`, backgroundColor: strokeColor }}
+            >
+                {children}
+            </span>
+        </div>
+    )
+}
diff --git a/frontend/src/lib/lemon-ui/LemonProgress/index.tsx b/frontend/src/lib/lemon-ui/LemonProgress/index.tsx
@@ -0,0 +1 @@
+export * from './LemonProgress'
diff --git a/frontend/src/scenes/apps/HistoricalExportsTab.tsx b/frontend/src/scenes/apps/HistoricalExportsTab.tsx
@@ -1,6 +1,6 @@
-import { Progress } from 'antd'
 import { useActions, useValues } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
 import { LemonTable, LemonTableColumn } from 'lib/lemon-ui/LemonTable'
 import { createdAtColumn, createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
 import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
@@ -76,7 +76,9 @@ export function HistoricalExportsTab(): JSX.Element {
                                         </LemonTag>
                                     )
                                 case 'not_finished':
-                                    return <Progress percent={Math.floor((historicalExport.progress || 0) * 100)} />
+                                    return (
+                                        <LemonProgress percent={Math.floor((historicalExport.progress || 0) * 100)} />
+                                    )
                             }
                         },
                         align: 'right',

diff --git a/frontend/src/scenes/cohorts/CohortEdit.tsx b/frontend/src/scenes/cohorts/CohortEdit.tsx
@@ -1,6 +1,4 @@
-import { LemonDivider } from '@posthog/lemon-ui'
-import { UploadFile } from 'antd/es/upload/interface'
-import Dragger from 'antd/lib/upload/Dragger'
+import { LemonDivider, LemonFileInput } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { Form } from 'kea-forms'
 import { router } from 'kea-router'
@@ -169,38 +167,36 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
                                         single column with the user’s distinct ID. The very first row (the header) will
                                         be skipped during import.
                                     </span>
-                                    <Dragger
-                                        name="file"
-                                        multiple={false}
-                                        fileList={cohort.csv ? [cohort.csv] : []}
+                                    <LemonFileInput
                                         accept=".csv"
-                                        showUploadList={false}
-                                        beforeUpload={(file: UploadFile) => {
-                                            onChange(file)
-                                            return false
-                                        }}
-                                        className="cohort-csv-dragger"
-                                    >
-                                        {cohort.csv ? (
-                                            <>
-                                                <IconUploadFile
-                                                    style={{ fontSize: '3rem', color: 'var(--muted-alt)' }}
-                                                />
-                                                <div className="ant-upload-text">
-                                                    {cohort.csv?.name ?? 'File chosen'}
-                                                </div>
-                                            </>
-                                        ) : (
-                                            <>
-                                                <IconUploadFile
-                                                    style={{ fontSize: '3rem', color: 'var(--muted-alt)' }}
-                                                />
-                                                <div className="ant-upload-text">
-                                                    Drag a file here or click to browse for a file
-                                                </div>
-                                            </>
-                                        )}
-                                    </Dragger>
+                                        multiple={false}
+                                        value={cohort.csv ? [cohort.csv] : []}
+                                        onChange={(files) => onChange(files[0])}
+                                        showUploadedFiles={false}
+                                        callToAction={
+                                            <div className="flex flex-col items-center justify-center flex-1 cohort-csv-dragger text-default space-y-1">
+                                                {cohort.csv ? (
+                                                    <>
+                                                        <IconUploadFile
+                                                            style={{ fontSize: '3rem', color: 'var(--muted-alt)' }}
+                                                        />
+                                                        <div className="ant-upload-text">
+                                                            {cohort.csv?.name ?? 'File chosen'}
+                                                        </div>
+                                                    </>
+                                                ) : (
+                                                    <>
+                                                        <IconUploadFile
+                                                            style={{ fontSize: '3rem', color: 'var(--muted-alt)' }}
+                                                        />
+                                                        <div className="ant-upload-text">
+                                                            Drag a file here or click to browse for a file
+                                                        </div>
+                                                    </>
+                                                )}
+                                            </div>
+                                        }
+                                    />
                                 </>
                             )}
                         </Field>

diff --git a/frontend/src/scenes/cohorts/Cohorts.scss b/frontend/src/scenes/cohorts/Cohorts.scss
@@ -17,26 +17,12 @@
 .cohort-csv-dragger {
     height: 155px !important;
     margin-top: 1rem;
-    background-color: transparent !important;
-    border: 2px dashed var(--primary) !important;
-    border-radius: var(--radius) !important;
+    border-color: var(--primary);
+    border-style: dashed;
+    border-width: 2px;
+    border-radius: var(--radius);
 
     &:hover {
-        border-color: var(--primary-3000-hover) !important;
-    }
-
-    .ant-upload-drag-container {
-        display: flex !important;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        padding: 0 1rem;
-
-        .ant-upload-text {
-            margin: 8px 0 0 !important;
-            font-size: 1rem !important;
-            font-weight: 600;
-        }
+        border-color: var(--primary-3000-hover);
     }
 }