feat(schedule flag changes): tweak frontend

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

@@ -172,6 +172,14 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
         })
     }
 
+    if (featureFlags[FEATURE_FLAGS.SCHEDULED_CHANGES_FEATURE_FLAGS]) {
+        tabs.push({
+            label: 'Schedule',
+            key: FeatureFlagsTab.SCHEDULE,
+            content: <FeatureFlagSchedule />,
+        })
+    }
+
     if (featureFlags[FEATURE_FLAGS.FF_DASHBOARD_TEMPLATES] && featureFlag.key && id) {
         tabs.push({
             label: (
@@ -222,14 +230,6 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
         })
     }
 
-    if (featureFlags[FEATURE_FLAGS.SCHEDULED_CHANGES_FEATURE_FLAGS]) {
-        tabs.push({
-            label: 'Schedule',
-            key: FeatureFlagsTab.SCHEDULE,
-            content: <FeatureFlagSchedule />,
-        })
-    }
-
     return (
         <>
             <div className="feature-flag">

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

@@ -418,7 +418,7 @@ export function FeatureFlagReleaseConditions({
                             </LemonBanner>
                         )}
                 </div>
-                {!readOnly && showGroupsOptions && (
+                {!readOnly && showGroupsOptions && usageContext !== 'schedule' && (
                     <div className="centered">
                         Match by
                         <Select

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

@@ -6,39 +6,49 @@ import {
     LemonTable,
     LemonTableColumn,
     LemonTableColumns,
+    LemonTag,
+    LemonTagType,
 } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { DatePicker } from 'lib/components/DatePicker'
+import { dayjs } from 'lib/dayjs'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { atColumn, createdAtColumn, createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { useEffect } from 'react'
 
-import { ScheduledChangeType } from '~/types'
+import { groupsModel } from '~/models/groupsModel'
+import { ScheduledChangeOperationType, ScheduledChangeType } from '~/types'
 
 import { featureFlagLogic } from './featureFlagLogic'
 import { FeatureFlagReleaseConditions } from './FeatureFlagReleaseConditions'
+import { groupFilters } from './FeatureFlags'
 
 const featureFlagScheduleLogic = featureFlagLogic({ id: 'schedule' })
 export const DAYJS_FORMAT = 'MMMM DD, YYYY h:mm A'
 
 export default function FeatureFlagSchedule(): JSX.Element {
-    const { featureFlag, scheduledChanges, scheduledChangeField, scheduleDateMarker } =
+    const { featureFlag, scheduledChanges, scheduledChangeOperation, scheduleDateMarker } =
         useValues(featureFlagScheduleLogic)
     const {
         setFeatureFlagId,
         setFeatureFlag,
+        setAggregationGroupTypeIndex,
         loadScheduledChanges,
         createScheduledChange,
         deleteScheduledChange,
         setScheduleDateMarker,
-        setScheduledChangeField,
+        setScheduledChangeOperation,
     } = useActions(featureFlagScheduleLogic)
+    const { aggregationLabel } = useValues(groupsModel)
 
     const featureFlagId = useValues(featureFlagLogic).featureFlag.id
+    const aggregationGroupTypeIndex = useValues(featureFlagLogic).featureFlag.filters.aggregation_group_type_index
 
     useEffect(() => {
         // Set the feature flag ID from the main flag logic to the current logic
         setFeatureFlagId(featureFlagId)
+        setAggregationGroupTypeIndex(aggregationGroupTypeIndex || null)
 
         loadScheduledChanges()
     }, [])
@@ -47,35 +57,89 @@ export default function FeatureFlagSchedule(): JSX.Element {
         {
             title: 'Change',
             dataIndex: 'payload',
-            render: (dataValue) => {
-                return JSON.stringify(dataValue)
+            render: function Render(_, scheduledChange: ScheduledChangeType) {
+                const { payload } = scheduledChange
+
+                if (payload.operation === ScheduledChangeOperationType.UpdateStatus) {
+                    const isEnabled = payload.value
+                    return (
+                        <LemonTag type={isEnabled ? 'success' : 'default'} className="uppercase">
+                            {isEnabled ? 'Enable' : 'Disable'}
+                        </LemonTag>
+                    )
+                } else if (payload.operation === ScheduledChangeOperationType.AddReleaseCondition) {
+                    const releaseText = groupFilters(payload.value, undefined, aggregationLabel)
+                    return (
+                        <div className="inline-flex leading-8">
+                            <span className="mr-2">
+                                <b>Add release condition:</b>
+                            </span>
+                            {typeof releaseText === 'string' && releaseText.startsWith('100% of') ? (
+                                <LemonTag type="highlight">{releaseText}</LemonTag>
+                            ) : (
+                                releaseText
+                            )}
+                        </div>
+                    )
+                }
+
+                return JSON.stringify(payload)
             },
         },
         atColumn('scheduled_at', 'Scheduled at') as LemonTableColumn<
             ScheduledChangeType,
             keyof ScheduledChangeType | undefined
         >,
-        atColumn('executed_at', 'Executed at') as LemonTableColumn<
-            ScheduledChangeType,
-            keyof ScheduledChangeType | undefined
-        >,
-        createdByColumn() as LemonTableColumn<ScheduledChangeType, keyof ScheduledChangeType | undefined>,
         createdAtColumn() as LemonTableColumn<ScheduledChangeType, keyof ScheduledChangeType | undefined>,
+        createdByColumn() as LemonTableColumn<ScheduledChangeType, keyof ScheduledChangeType | undefined>,
         {
-            width: 0,
-            render: function Render(_: any, scheduledChange: ScheduledChangeType) {
+            title: 'Status',
+            dataIndex: 'executed_at',
+            render: function Render(_, scheduledChange: ScheduledChangeType) {
+                const { executed_at, failure_reason } = scheduledChange
+
+                function getStatus(): { type: LemonTagType; text: string } {
+                    if (failure_reason) {
+                        return { type: 'danger', text: 'Error' }
+                    } else if (executed_at) {
+                        return { type: 'completion', text: 'Complete' }
+                    } else {
+                        return { type: 'default', text: 'Scheduled' }
+                    }
+                }
+                const { type, text } = getStatus()
                 return (
-                    <More
-                        overlay={
-                            <LemonButton
-                                status="danger"
-                                onClick={() => deleteScheduledChange(scheduledChange.id)}
-                                fullWidth
-                            >
-                                Delete scheduled change
-                            </LemonButton>
+                    <Tooltip
+                        title={
+                            failure_reason
+                                ? `Failed: ${failure_reason}`
+                                : executed_at && `Completed: ${dayjs(executed_at).format('MMMM D, YYYY h:mm A')}`
                         }
-                    />
+                    >
+                        <LemonTag type={type}>
+                            <b className="uppercase">{text}</b>
+                        </LemonTag>{' '}
+                    </Tooltip>
+                )
+            },
+        },
+        {
+            width: 0,
+            render: function Render(_, scheduledChange: ScheduledChangeType) {
+                return (
+                    !scheduledChange.executed_at && (
+                        <More
+                            overlay={
+                                <LemonButton
+                                    status="danger"
+                                    onClick={() => deleteScheduledChange(scheduledChange.id)}
+                                    fullWidth
+                                >
+                                    Delete scheduled change
+                                </LemonButton>
+                            }
+                        />
+                    )
                 )
             },
         },
@@ -91,30 +155,35 @@ export default function FeatureFlagSchedule(): JSX.Element {
                     <LemonSelect
                         className="w-50"
                         placeholder="Select variant"
-                        value={scheduledChangeField}
-                        onChange={(value) => setScheduledChangeField(value)}
+                        value={scheduledChangeOperation}
+                        onChange={(value) => setScheduledChangeOperation(value)}
                         options={[
-                            { label: 'Change status', value: 'active' },
-                            { label: 'Add a condition', value: 'filters' },
+                            { label: 'Change status', value: ScheduledChangeOperationType.UpdateStatus },
+                            { label: 'Add a condition', value: ScheduledChangeOperationType.AddReleaseCondition },
                         ]}
                     />
                 </div>
                 <div>
                     <div className="font-semibold leading-6 h-6 mb-1">Date and time</div>
                     <DatePicker
+                        disabledDate={(dateMarker) => {
+                            const now = new Date()
+                            return dateMarker.toDate().getTime() < now.getTime()
+                        }}
                         value={scheduleDateMarker}
                         onChange={(value) => setScheduleDateMarker(value)}
                         className="h-10 w-60"
                         allowClear={false}
                         showTime
                         showSecond={false}
                         format={DAYJS_FORMAT}
+                        showNow={false}
                     />
                 </div>
             </div>
 
             <div className="space-y-4">
-                {scheduledChangeField === 'active' && (
+                {scheduledChangeOperation === ScheduledChangeOperationType.UpdateStatus && (
                     <>
                         <div className="border rounded p-4">
                             <LemonCheckbox
@@ -129,7 +198,9 @@ export default function FeatureFlagSchedule(): JSX.Element {
                         </div>
                     </>
                 )}
-                {scheduledChangeField === 'filters' && <FeatureFlagReleaseConditions usageContext="schedule" />}
+                {scheduledChangeOperation === ScheduledChangeOperationType.AddReleaseCondition && (
+                    <FeatureFlagReleaseConditions usageContext="schedule" />
+                )}
                 <div className="flex items-center justify-end">
                     <LemonButton
                         disabledReason={!scheduleDateMarker ? 'Select the scheduled date and time' : null}
@@ -142,6 +213,7 @@ export default function FeatureFlagSchedule(): JSX.Element {
                 <LemonDivider className="" />
             </div>
             <LemonTable
+                rowClassName={(record) => (record.executed_at ? 'opacity-75' : '')}
                 className="mt-8"
                 loading={false}
                 dataSource={scheduledChanges}

frontend/src/scenes/feature-flags/featureFlagLogic.ts

@@ -42,6 +42,7 @@ import {
     PropertyFilterType,
     PropertyOperator,
     RolloutConditionType,
+    ScheduledChangeOperationType,
     ScheduledChangeType,
     Survey,
     SurveyQuestionType,
@@ -233,7 +234,7 @@ export const featureFlagLogic = kea<featureFlagLogicType>([
         setFeatureFlagId: (id: number | null) => ({ id }),
         setCopyDestinationProject: (id: number | null) => ({ id }),
         setScheduleDateMarker: (dateMarker: any) => ({ dateMarker }),
-        setScheduledChangeField: (changeType: string | null) => ({ changeType }),
+        setScheduledChangeOperation: (changeType: string | null) => ({ changeType }),
     }),
     forms(({ actions, values }) => ({
         featureFlag: {
@@ -493,10 +494,10 @@ export const featureFlagLogic = kea<featureFlagLogicType>([
                 setScheduleDateMarker: (_, { dateMarker }) => dateMarker,
             },
         ],
-        scheduledChangeField: [
-            'active' as string | null,
+        scheduledChangeOperation: [
+            ScheduledChangeOperationType.AddReleaseCondition as string | null,
             {
-                setScheduledChangeField: (_, { changeType }) => changeType,
+                setScheduledChangeOperation: (_, { changeType }) => changeType,
             },
         ],
     }),
@@ -657,16 +658,20 @@ export const featureFlagLogic = kea<featureFlagLogicType>([
         scheduledChange: {
             __default: {} as ScheduledChangeType,
             createScheduledChange: async () => {
-                const { featureFlag, scheduledChangeField, scheduleDateMarker, currentTeamId } = values
+                const { featureFlag, scheduledChangeOperation, scheduleDateMarker, currentTeamId } = values
 
-                if (currentTeamId && scheduledChangeField) {
+                const fields = {
+                    [ScheduledChangeOperationType.UpdateStatus]: 'active',
+                    [ScheduledChangeOperationType.AddReleaseCondition]: 'filters',
+                }
+
+                if (currentTeamId && scheduledChangeOperation) {
                     const data = {
                         record_id: values.featureFlag.id,
                         model_name: 'FeatureFlag',
-                        operation: scheduledChangeField,
                         payload: {
-                            field: scheduledChangeField,
-                            value: featureFlag[scheduledChangeField],
+                            operation: scheduledChangeOperation,
+                            value: featureFlag[fields[scheduledChangeOperation]],
                         },
                         scheduled_at: scheduleDateMarker.toISOString(),
                     }
@@ -873,6 +878,11 @@ export const featureFlagLogic = kea<featureFlagLogicType>([
             if (scheduledChange && scheduledChange) {
                 lemonToast.success('Change scheduled successfully')
                 actions.loadScheduledChanges()
+                actions.setFeatureFlag({
+                    ...values.featureFlag,
+                    filters: NEW_FLAG.filters,
+                    active: NEW_FLAG.active,
+                })
             }
         },
         deleteScheduledChangeSuccess: ({ scheduledChange }) => {

frontend/src/types.ts

@@ -2449,12 +2449,21 @@ export enum ScheduledChangeModels {
     FeatureFlag = 'FeatureFlag',
 }
 
+export enum ScheduledChangeOperationType {
+    UpdateStatus = 'update_status',
+    AddReleaseCondition = 'add_release_condition',
+}
+
+export type ScheduledChangePayload =
+    | { operation: ScheduledChangeOperationType.UpdateStatus; value: boolean }
+    | { operation: ScheduledChangeOperationType.AddReleaseCondition; value: FeatureFlagFilters }
+
 export interface ScheduledChangeType {
     id: number
     team_id: number
     record_id: number | string
     model_name: ScheduledChangeModels
-    payload: Record<string, any>
+    payload: ScheduledChangePayload
     scheduled_at: string
     executed_at: string | null
     failure_reason: string | null

posthog/models/feature_flag/feature_flag.py

@@ -1,4 +1,5 @@
 import json
+from django.http import HttpRequest
 import structlog
 from typing import Dict, List, Optional, cast
 
@@ -303,16 +304,21 @@ def scheduled_changes_dispatcher(self, payload):
         if "operation" not in payload or "value" not in payload:
             raise Exception("Invalid payload")
 
+        http_request = HttpRequest()
+        http_request.user = self.created_by
         context = {
-            "request": {"user": self.created_by},
+            "request": http_request,
             "team_id": self.team_id,
         }
+
         serializer_data = {}
 
         if payload["operation"] == "add_release_condition":
-            existing_groups = self.get_filters().get("groups", [])
+            current_filters = self.get_filters()
+            current_groups = current_filters.get("groups", [])
             new_groups = payload["value"].get("groups", [])
-            serializer_data["filters"] = {"groups": existing_groups + new_groups}
+
+            serializer_data["filters"] = {**current_filters, "groups": current_groups + new_groups}
         elif payload["operation"] == "update_status":
             serializer_data["active"] = payload["value"]
         else: