feat: wait for trigger summary ui update (#5956)

Co-authored-by: wadii <wadii.zaim@flagsmith.com>
Co-authored-by: kyle-ssg <kyle@solidstategroup.com>

Author: 3 people

frontend/common/types/responses.ts

@@ -873,7 +873,15 @@ export interface StageAction {
 
 export type Features = {
   [id: number]: {
-    name: string
+    created_at?: string
+    phased_rollout_state?: {
+      current_split: number
+      increase_by: number
+      increase_every: string
+      initial_split: number
+      is_rollout_complete: boolean
+      last_updated_at: string
+    }
   }
 }
 

frontend/package-lock.json

@@ -1,5 +1,4 @@
 import { FC } from 'react'
-import { fi } from 'date-fns/locale'
 
 export type IconName =
   | 'arrow-left'
@@ -56,6 +55,7 @@ export type IconName =
   | 'pr-draft'
   | 'pr-linked'
   | 'pr-merged'
+  | 'radio'
   | 'refresh'
   | 'request'
   | 'required'
@@ -1488,6 +1488,28 @@ const Icon: FC<IconType> = ({ fill, fill2, height, name, width, ...rest }) => {
         </svg>
       )
     }
+
+    case 'radio': {
+      return (
+        <svg
+          viewBox='0 0 24 24'
+          height={height ?? '24'}
+          width={width ?? '24'}
+          fill={fill ?? '#000000'}
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <g id='Outlined/circle'>
+            <path
+              id='Icon'
+              fillRule='evenodd'
+              clipRule='evenodd'
+              d='M12 4C7.589 4 4 7.589 4 12C4 16.411 7.589 20 12 20C16.411 20 20 16.411 20 12C20 7.589 16.411 4 12 4ZM12 22C6.486 22 2 17.514 2 12C2 6.486 6.486 2 12 2C17.514 2 22 6.486 22 12C22 17.514 17.514 22 12 22Z'
+            />
+          </g>
+        </svg>
+      )
+    }
+
     default:
       return null
   }

frontend/web/components/Icon.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import CreatePipelineStage from './CreatePipelineStage'
 import Breadcrumb from 'components/Breadcrumb'
 import { Button } from 'components/base/forms/Button'
@@ -64,7 +64,8 @@ function CreateReleasePipeline() {
     },
   ] = useUpdateReleasePipelineMutation()
 
-  const [publishReleasePipeline] = usePublishReleasePipelineMutation()
+  const [publishReleasePipeline, { isLoading: isPublishingPipeline }] =
+    usePublishReleasePipelineMutation()
 
   const [pipelineData, setPipelineData] = useState<ReleasePipelineRequest>({
     name: '',
@@ -75,19 +76,22 @@ function CreateReleasePipeline() {
   const [isEditingName, setIsEditingName] = useState(
     !pipelineData?.name?.length,
   )
+  const skipNextCreateToast = useRef(false)
 
   const handleSuccess = useCallback(
-    (updated = false) => {
+    (updated = false, skipToast = false) => {
       history.push(`/project/${projectId}/release-pipelines`)
-      toast(`Release pipeline ${updated ? 'updated' : 'created'} successfully`)
+      if (!skipToast) {
+        toast(
+          `Release pipeline ${updated ? 'updated' : 'created'} successfully`,
+        )
+      }
     },
     [history, projectId],
   )
 
-  const [isSavingAndPublishing, setIsSavingAndPublishing] = useState(false)
-
   useEffect(() => {
-    if (isSavingAndPublishing) {
+    if (skipNextCreateToast.current) {
       return
     }
 
@@ -98,15 +102,10 @@ function CreateReleasePipeline() {
     if (isUpdatingPipelineSuccess) {
       return handleSuccess(true)
     }
-  }, [
-    isCreatingPipelineSuccess,
-    isUpdatingPipelineSuccess,
-    handleSuccess,
-    isSavingAndPublishing,
-  ])
+  }, [isCreatingPipelineSuccess, isUpdatingPipelineSuccess, handleSuccess])
 
   useEffect(() => {
-    if (isSavingAndPublishing) {
+    if (skipNextCreateToast.current) {
       return
     }
 
@@ -125,7 +124,6 @@ function CreateReleasePipeline() {
     createPipelineError,
     isUpdatingPipelineError,
     updatePipelineError,
-    isSavingAndPublishing,
   ])
 
   useEffect(() => {
@@ -248,20 +246,20 @@ function CreateReleasePipeline() {
 
   const handleSubmitAndPublish = async (id?: number) => {
     try {
-      setIsSavingAndPublishing(true)
+      skipNextCreateToast.current = true
       const response = await handleSubmit(id)
       await publishReleasePipeline({
         pipelineId: response.id,
         projectId: Number(projectId),
-      })
-      toast(`Release pipeline published successfully`)
+      }).unwrap()
+      toast('Release pipeline published successfully')
+      handleSuccess(true, true)
+      skipNextCreateToast.current = false
     } catch (error) {
       toast(
         `Error ${id ? 'updating' : 'creating'} and publishing pipeline`,
         'danger',
       )
-    } finally {
-      setIsSavingAndPublishing(false)
     }
   }
 
@@ -271,7 +269,10 @@ function CreateReleasePipeline() {
   }
 
   const isSaveDisabled =
-    !validatePipelineData() || isCreatingPipeline || isUpdatingPipeline
+    !validatePipelineData() ||
+    isCreatingPipeline ||
+    isUpdatingPipeline ||
+    isPublishingPipeline
 
   const saveButtonText = existingPipeline?.id ? 'Update' : 'Save'
 

frontend/web/components/release-pipelines/CreateReleasePipeline.tsx

@@ -3,60 +3,9 @@ import {
   useGetReleasePipelinesQuery,
 } from 'common/services/useReleasePipelines'
 import AccordionCard from 'components/base/accordion/AccordionCard'
-import ProjectStore from 'common/stores/project-store'
-import { Environment } from 'common/types/responses'
-import classNames from 'classnames'
 import { useMemo } from 'react'
 
-interface StageStatusProps {
-  featureId: number
-  stageOrder: number
-  stageName: string
-  totalStages: number
-  stageFeatures: number[]
-  stageEnvironment?: number
-}
-
-const StageStatus = ({
-  featureId,
-  stageEnvironment,
-  stageFeatures,
-  stageName,
-  stageOrder,
-  totalStages,
-}: StageStatusProps) => {
-  const isInStage = stageFeatures?.includes(featureId) ?? false
-  const showLine = totalStages > 1
-  const lastStage = stageOrder === totalStages - 1
-  const showLeftLine = showLine && stageOrder > 0
-  const showRightLine = showLine && stageOrder !== totalStages - 1
-
-  const stageStyle = {
-    marginRight: lastStage ? '0px' : '24px',
-  }
-
-  const env = ProjectStore.getEnvironmentById(
-    stageEnvironment,
-  ) as unknown as Environment
-  const envName = env?.name
-
-  return (
-    <div
-      className='flex align-items-center gap-2 position-relative flex-1'
-      style={stageStyle}
-    >
-      {showLeftLine && <div className='position-absolute line-left' />}
-      {showRightLine && <div className='position-absolute line-right' />}
-      <div
-        className={classNames('circle-container', { 'in-stage': isInStage })}
-      />
-      <span>
-        <b>{stageName}</b>
-      </span>
-      {envName && <p className='text-muted'>{envName}</p>}
-    </div>
-  )
-}
+import StageStatus from './StageStatus'
 
 interface FeaturePipelineStatusProps {
   featureId: number
@@ -69,7 +18,9 @@ const FeaturePipelineStatus = ({
 }: FeaturePipelineStatusProps) => {
   const { data: releasePipelines } = useGetReleasePipelinesQuery(
     {
+      page_size: 100,
       projectId: Number(projectId),
+      q: 'name',
     },
     {
       skip: !projectId,
@@ -96,6 +47,20 @@ const FeaturePipelineStatus = ({
   const stages = releasePipeline?.stages
   const totalStages = (stages?.length ?? 0) + 1
 
+  const stageHasFeature = useMemo(
+    () =>
+      stages?.find((stage) => {
+        const stageFeatureIds = Object.keys(stage.features ?? {})
+        return stageFeatureIds.includes(featureId.toString())
+      }),
+    [stages, featureId],
+  )
+
+  const featureInStage = useMemo(
+    () => stageHasFeature?.features?.[featureId],
+    [stageHasFeature, featureId],
+  )
+
   if (!stages) return null
 
   return (
@@ -106,18 +71,22 @@ const FeaturePipelineStatus = ({
             key={stage.id}
             stageOrder={stage.order}
             stageName={stage.name}
-            stageFeatures={stage.features}
             stageEnvironment={stage.environment}
+            stageActions={stage.actions}
+            stageTrigger={stage.trigger}
             totalStages={totalStages}
-            featureId={featureId}
+            featureInStage={
+              stageHasFeature?.order === stage.order
+                ? featureInStage
+                : undefined
+            }
+            isCompleted={stage.order < (stageHasFeature?.order ?? -1)}
           />
         ))}
         <StageStatus
           stageOrder={totalStages - 1}
           stageName='Done'
-          stageFeatures={[]}
           totalStages={totalStages}
-          featureId={featureId}
         />
       </Row>
     </AccordionCard>

frontend/web/components/release-pipelines/FeaturePipelineStatus.tsx

@@ -1,18 +1,20 @@
 import { useGetSegmentQuery } from 'common/services/useSegment'
 import { StageActionBody, StageActionType } from 'common/types/responses'
+import moment from 'moment'
 
 type FlagActionDetailProps = {
   actionType: StageActionType
   actionBody: StageActionBody
   projectId: number
 }
 
-const renderActionDetail = (
+export const renderActionDetail = (
   actionType: StageActionType,
-  enabled: boolean,
+  actionBody: StageActionBody,
   segmentName?: string,
+  currentSplit?: number,
 ) => {
-  const actionPrefixText = enabled ? 'Enable' : 'Disable'
+  const actionPrefixText = actionBody.enabled ? 'Enable' : 'Disable'
   switch (actionType) {
     case StageActionType.TOGGLE_FEATURE_FOR_SEGMENT:
       return (
@@ -26,9 +28,41 @@ const renderActionDetail = (
           {actionPrefixText} flag for <b>everyone</b>
         </span>
       )
-    case StageActionType.PHASED_ROLLOUT:
-      // TODO: TBD
-      return <span>Phased rollout</span>
+    case StageActionType.PHASED_ROLLOUT: {
+      const { increase_by, increase_every, initial_split } = actionBody
+      return (
+        <div>
+          <div className='mb-1'>
+            <b>{actionPrefixText}</b> flag with <b>phased rollout</b>.
+          </div>
+          {initial_split && (
+            <div className='mb-1'>
+              Initial split of <b>{initial_split}%</b>
+            </div>
+          )}
+          {increase_by && increase_every && (
+            <div className='mb-1'>
+              Increase by <b>{increase_by}%</b> every{' '}
+              <b>
+                {moment
+                  .duration(increase_every)
+                  .humanize()
+                  .replace(/(a |in )/g, '')}
+                .
+              </b>
+            </div>
+          )}
+          {currentSplit && (
+            <div className='mb-1 fs-caption text-muted'>
+              Current rollout:{' '}
+              <b className={currentSplit ? 'text-success' : ''}>
+                {currentSplit}%
+              </b>
+            </div>
+          )}
+        </div>
+      )
+    }
     default:
       return null
   }
@@ -51,7 +85,7 @@ const FlagActionDetail = ({
     },
   )
 
-  return renderActionDetail(actionType, actionBody.enabled, segmentData?.name)
+  return renderActionDetail(actionType, actionBody, segmentData?.name)
 }
 
 export default FlagActionDetail