Merge branch 'master' into warn-about-trailing-count-in-total-value

cypress/e2e/featureFlags.cy.ts

@@ -4,13 +4,7 @@ describe('Feature Flags', () => {
     let name
 
     beforeEach(() => {
-        cy.intercept('**/decide/*', (req) =>
-            req.reply(
-                decideResponse({
-                    'new-feature-flag-operators': true,
-                })
-            )
-        )
+        cy.intercept('**/decide/*', (req) => req.reply(decideResponse({})))
 
         cy.intercept('/api/projects/*/property_definitions?type=person*', {
             fixture: 'api/feature-flags/property_definition',
@@ -116,7 +110,7 @@ describe('Feature Flags', () => {
         cy.get('.Toastify').contains('Undo').should('be.visible')
     })
 
-    it.only('Move between property types smoothly, and support relative dates', () => {
+    it('Move between property types smoothly, and support relative dates', () => {
         // ensure unique names to avoid clashes
         cy.get('[data-attr=top-bar-name]').should('contain', 'Feature flags')
         cy.get('[data-attr=new-feature-flag]').click()

cypress/support/e2e.ts

@@ -32,7 +32,6 @@ beforeEach(() => {
                 // set feature flags here e.g.
                 // 'toolbar-launch-side-action': true,
                 'surveys-new-creation-flow': true,
-                'surveys-results-visualizations': true,
                 'auto-redirect': true,
                 hogql: true,
                 'data-exploration-insights': true,

frontend/src/lib/components/BridgePage/BridgePage.scss

@@ -23,7 +23,13 @@
     }
 
     .BridgePage__content-wrapper {
-        max-width: 100%;
+        width: 100%;
+        max-width: 380px;
+
+        @include screen($md) {
+            width: auto;
+            max-width: 100%;
+        }
     }
 
     .BridgePage__left-wrapper {

frontend/src/lib/components/SeriesGlyph.tsx

@@ -58,7 +58,7 @@ interface ExperimentVariantNumberProps {
     index: number
 }
 export function ExperimentVariantNumber({ className, index }: ExperimentVariantNumberProps): JSX.Element {
-    const color = getSeriesColor(index)
+    const color = getSeriesColor(index + 1)
     const { isDarkModeOn } = useValues(themeLogic)
 
     return (

frontend/src/lib/constants.tsx

@@ -107,6 +107,7 @@ export const INSTANTLY_AVAILABLE_PROPERTIES = [
     'distinct_id',
 ]
 export const MAX_EXPERIMENT_VARIANTS = 10
+export const EXPERIMENT_DEFAULT_DURATION = 14 // days
 
 // Event constants
 export const ACTION_TYPE = 'action_type'
@@ -150,7 +151,6 @@ export const FEATURE_FLAGS = {
     DEBUG_REACT_RENDERS: 'debug-react-renders', // owner: @benjackwhite
     AUTO_ROLLBACK_FEATURE_FLAGS: 'auto-rollback-feature-flags', // owner: @EDsCODE
     ONBOARDING_V2_DEMO: 'onboarding-v2-demo', // owner: #team-growth
-    ROLE_BASED_ACCESS: 'role-based-access', // owner: #team-experiments, @liyiy
     QUERY_RUNNING_TIME: 'query_running_time', // owner: @mariusandra
     QUERY_TIMINGS: 'query-timings', // owner: @mariusandra
     QUERY_ASYNC: 'query-async', // owner: @webjunkie
@@ -182,24 +182,19 @@ export const FEATURE_FLAGS = {
     BI_VIZ: 'bi_viz', // owner: @Gilbert09
     HOGQL_AUTOCOMPLETE: 'hogql-autocomplete', // owner: @Gilbert09
     WEBHOOKS_DENYLIST: 'webhooks-denylist', // owner: #team-pipeline
-    SURVEYS_RESULTS_VISUALIZATIONS: 'surveys-results-visualizations', // owner: @jurajmajerik
-    SURVEYS_PAYGATES: 'surveys-paygates',
     PERSONS_HOGQL_QUERY: 'persons-hogql-query', // owner: @mariusandra
     PIPELINE_UI: 'pipeline-ui', // owner: #team-pipeline
     SESSION_RECORDING_SAMPLING: 'session-recording-sampling', // owner: #team-replay
     PERSON_FEED_CANVAS: 'person-feed-canvas', // owner: #project-canvas
-    MULTI_PROJECT_FEATURE_FLAGS: 'multi-project-feature-flags', // owner: @jurajmajerik #team-feature-success
     FEATURE_FLAG_COHORT_CREATION: 'feature-flag-cohort-creation', // owner: @neilkakkar #team-feature-success
     INSIGHT_HORIZONTAL_CONTROLS: 'insight-horizontal-controls', // owner: @benjackwhite
     SURVEYS_WIDGETS: 'surveys-widgets', // owner: @liyiy
-    SCHEDULED_CHANGES_FEATURE_FLAGS: 'scheduled-changes-feature-flags', // owner: @jurajmajerik #team-feature-success
     INVITE_TEAM_MEMBER_ONBOARDING: 'invite-team-member-onboarding', // owner: @biancayang
     YEAR_IN_HOG: 'year-in-hog', // owner: #team-replay
     SESSION_REPLAY_EXPORT_MOBILE_DATA: 'session-replay-export-mobile-data', // owner: #team-replay
     DISCUSSIONS: 'discussions', // owner: #team-replay
     REDIRECT_INSIGHT_CREATION_PRODUCT_ANALYTICS_ONBOARDING: 'redirect-insight-creation-product-analytics-onboarding', // owner: @biancayang
     SIDEPANEL_STATUS: 'sidepanel-status', // owner: @benjackwhite
-    NEW_FEATURE_FLAG_OPERATORS: 'new-feature-flag-operators', // owner: @neilkakkar
     AI_SESSION_SUMMARY: 'ai-session-summary', // owner: #team-replay
     AI_SESSION_PERMISSIONS: 'ai-session-permissions', // owner: #team-replay
     PRODUCT_INTRO_PAGES: 'product-intro-pages', // owner: @raquelmsmith

frontend/src/lib/lemon-ui/LemonProgress/LemonProgress.tsx

@@ -3,6 +3,7 @@ import { forwardRef } from 'react'
 
 export type LemonProgressProps = {
     size?: 'medium' | 'large'
+    bgColor?: string
     strokeColor?: string
     percent: number
     children?: React.ReactNode
@@ -11,7 +12,14 @@ export type LemonProgressProps = {
 
 export const LemonProgress: React.FunctionComponent<LemonProgressProps & React.RefAttributes<HTMLDivElement>> =
     forwardRef(function LemonProgress(
-        { size = 'medium', percent, strokeColor = 'var(--brand-blue)', children, className },
+        {
+            size = 'medium',
+            percent,
+            bgColor = 'var(--bg-3000)',
+            strokeColor = 'var(--brand-blue)',
+            children,
+            className,
+        },
         ref
     ): JSX.Element {
         const width = isNaN(percent) ? 0 : Math.max(Math.min(percent, 100), 0)
@@ -20,10 +28,12 @@ export const LemonProgress: React.FunctionComponent<LemonProgressProps & React.R
             <div
                 ref={ref}
                 className={clsx(
-                    'LemonProgress rounded-full w-full inline-block bg-bg-3000',
+                    'LemonProgress rounded-full w-full inline-block',
                     size === 'large' ? 'h-5' : 'h-1.5',
                     className
                 )}
+                // eslint-disable-next-line react/forbid-dom-props
+                style={{ backgroundColor: bgColor }}
             >
                 <span
                     className={clsx(

frontend/src/scenes/ResourcePermissionModal.tsx

@@ -7,11 +7,7 @@ import { LemonTableColumns } from 'lib/lemon-ui/LemonTable'
 
 import { AccessLevel, Resource, RoleType } from '~/types'
 
-import {
-    FormattedResourceLevel,
-    permissionsLogic,
-    ResourcePermissionMapping,
-} from './settings/organization/Permissions/permissionsLogic'
+import { permissionsLogic } from './settings/organization/Permissions/permissionsLogic'
 import { rolesLogic } from './settings/organization/Permissions/Roles/rolesLogic'
 import { urls } from './urls'
 
@@ -88,7 +84,7 @@ export function ResourcePermission({
     resourceType,
     canEdit,
 }: ResourcePermissionProps): JSX.Element {
-    const { allPermissions, shouldShowPermissionsTable } = useValues(permissionsLogic)
+    const { allPermissions } = useValues(permissionsLogic)
     const { roles: possibleRolesWithAccess } = useValues(rolesLogic)
     const resourceLevel = allPermissions.find((permission) => permission.resource === resourceType)
     // TODO: feature_flag_access_level should eventually be generic in this component
@@ -112,7 +108,7 @@ export function ResourcePermission({
                                 icon={
                                     <LemonButton
                                         icon={<IconGear />}
-                                        to={`${urls.settings('organization')}?tab=role_based_access`}
+                                        to={`${urls.settings('organization-rbac')}`}
                                         targetBlank
                                         size="small"
                                         noPadding
@@ -166,33 +162,7 @@ export function ResourcePermission({
 
     return (
         <>
-            {!shouldShowPermissionsTable && (
-                <>
-                    {resourceLevel && <OrganizationResourcePermissionLabel resourceLevel={resourceLevel} />}
-                    <OrganizationResourcePermissionRoles roles={rolesWithAccess} />
-                </>
-            )}
-            {shouldShowPermissionsTable && <LemonTable dataSource={tableData} columns={columns} className="mt-4" />}
-            {!shouldShowPermissionsTable && (
-                <>
-                    <h5 className="mt-4">Roles</h5>
-                    {roles.length > 0 ? (
-                        <div className="pb-2 rounded overflow-y-auto max-h-80">
-                            {roles.map((role) => {
-                                return (
-                                    <RoleRow
-                                        key={role.id}
-                                        role={role}
-                                        deleteRole={(roleId) => deleteAssociatedRole(roleId)}
-                                    />
-                                )
-                            })}
-                        </div>
-                    ) : (
-                        <div className="text-muted mb-2">No roles added yet</div>
-                    )}
-                </>
-            )}
+            <LemonTable dataSource={tableData} columns={columns} className="mt-4" />
             {canEdit && (
                 <>
                     <h5 className="mt-4">Custom edit roles</h5>
@@ -217,61 +187,3 @@ export function ResourcePermission({
         </>
     )
 }
-
-function OrganizationResourcePermissionLabel({
-    resourceLevel,
-}: {
-    resourceLevel: FormattedResourceLevel
-}): JSX.Element {
-    return (
-        <>
-            <TitleWithIcon
-                icon={
-                    <LemonButton
-                        icon={<IconGear />}
-                        to={`${urls.settings('organization')}?tab=role_based_access`}
-                        targetBlank
-                        size="small"
-                        noPadding
-                        className="ml-1"
-                    />
-                }
-            >
-                <h5>Organization default</h5>
-            </TitleWithIcon>
-            <b>{ResourcePermissionMapping[resourceLevel.access_level]}</b>
-        </>
-    )
-}
-
-function OrganizationResourcePermissionRoles({ roles }: { roles: RoleType[] }): JSX.Element {
-    return (
-        <>
-            <h5 className="mt-4">Roles with edit access</h5>
-            <div className="flex">
-                {roles.map((role) => (
-                    <span key={role.id} className="simple-tag tag-light-blue text-primary-alt mr-2">
-                        <b>{role.name}</b>{' '}
-                    </span>
-                ))}
-            </div>
-        </>
-    )
-}
-
-function RoleRow({ role, deleteRole }: { role: RoleType; deleteRole?: (roleId: RoleType['id']) => void }): JSX.Element {
-    return (
-        <div className="flex items-center justify-between h-8">
-            <b>{role.name}</b>
-            {deleteRole && (
-                <LemonButton
-                    icon={<IconTrash />}
-                    onClick={() => deleteRole(role.id)}
-                    tooltip="Remove role from permission"
-                    tooltipPlacement="bottom-start"
-                    size="small"
-                />
-            )}
-        </div>
-    )
-}

frontend/src/scenes/authentication/signup/SignupContainer.tsx

@@ -30,13 +30,13 @@ export function SignupContainer(): JSX.Element | null {
         <BridgePage
             view="signup"
             footer={
-                <>
+                <div className="sm:flex sm:justify-center w-full gap-[10%]">
                     {footerHighlights[preflight?.cloud ? 'cloud' : 'selfHosted'].map((val, idx) => (
-                        <span key={idx} className="text-center">
+                        <p key={idx} className="text-center mb-2">
                             {val}
-                        </span>
+                        </p>
                     ))}
-                </>
+                </div>
             }
             sideLogo
             leftContainerContent={<SignupLeftContainer />}

frontend/src/scenes/experiments/Experiment.scss

@@ -156,17 +156,6 @@
     }
 }
 
-.preview-conversion-goal-num {
-    flex-shrink: 0;
-    width: 24px;
-    height: 24px;
-    margin-right: 0.5rem;
-    font-weight: 700;
-    color: var(--primary-alt);
-    text-align: center;
-    background-color: var(--side);
-}
-
 .experiment-preview-row {
     padding-bottom: 1rem;
     margin-bottom: 1rem;
@@ -193,3 +182,9 @@
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
+
+.experiment-view {
+    .InsightViz .LemonTable__cell--sticky::before {
+        background: var(--bg-table);
+    }
+}

frontend/src/scenes/experiments/Experiment.tsx

@@ -840,7 +840,13 @@ export function Experiment(): JSX.Element {
     )
 }
 
-const ResetButton = ({ experiment, onConfirm }: { experiment: ExperimentType; onConfirm: () => void }): JSX.Element => {
+export const ResetButton = ({
+    experiment,
+    onConfirm,
+}: {
+    experiment: ExperimentType
+    onConfirm: () => void
+}): JSX.Element => {
     const onClickReset = (): void => {
         LemonDialog.open({
             title: 'Reset this experiment?',

frontend/src/scenes/experiments/ExperimentCodeSnippets.tsx

@@ -40,7 +40,7 @@ if (experimentFlagValue === '${variant}' ) {
 
 export function JSSnippet({ flagKey, variant }: SnippetProps): JSX.Element {
     return (
-        <>
+        <div>
             <CodeSnippet language={Language.JavaScript} wrap>
                 {`if (posthog.getFeatureFlag('${flagKey}') === '${variant}') {
     // Do something differently for this user
@@ -49,11 +49,13 @@ export function JSSnippet({ flagKey, variant }: SnippetProps): JSX.Element {
     // so if something goes wrong with flag evaluation, you don't break your app.
 }`}
             </CodeSnippet>
-            <b>Test that it works</b>
+            <div className="mt-4 mb-1">
+                <b>Test that it works</b>
+            </div>
             <CodeSnippet language={Language.JavaScript} wrap>
                 {`posthog.featureFlags.override({'${flagKey}': '${variant}'})`}
             </CodeSnippet>
-        </>
+        </div>
     )
 }