feat: read only milestone progression in cr (#10882)

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ConsolidatedProgressionChanges.tsx

@@ -144,13 +144,7 @@ export const ConsolidatedProgressionChanges: FC<{
             </ChangeItemWrapper>
             <TabPanel>
                 {readonly ? (
-                    <ReadonlyMilestoneListRenderer
+                    <ReadonlyMilestoneListRenderer plan={modifiedPlan} />
-                        plan={modifiedPlan}
-                        milestonesWithAutomation={milestonesWithAutomation}
-                        milestonesWithDeletedAutomation={
-                            milestonesWithDeletedAutomation
-                        }
-                    />
                 ) : (
                     <EditableMilestoneListRenderer
                         plan={modifiedPlan}

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/MilestoneListRenderer.tsx

@@ -3,7 +3,10 @@ import type { IReleasePlan } from 'interfaces/releasePlans';
 import type { ChangeMilestoneProgressionSchema } from 'openapi';
 import { ReleasePlanMilestone } from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone';
 import { MilestoneAutomationSection } from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneAutomationSection.tsx';
-import { MilestoneTransitionDisplay } from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneTransitionDisplay.tsx';
+import {
+    MilestoneTransitionDisplay,
+    ReadonlyMilestoneTransitionDisplay,
+} from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneTransitionDisplay.tsx';
 import type { MilestoneStatus } from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStatus.tsx';
 import { Badge } from 'component/common/Badge/Badge';
 
@@ -41,8 +44,9 @@ const MilestoneListRendererCore = ({
             {plan.milestones.map((milestone, index) => {
                 const isNotLastMilestone = index < plan.milestones.length - 1;
                 const nextMilestoneId = plan.milestones[index + 1]?.id || '';
-                const shouldShowAutomation =
+                const shouldShowAutomation = readonly
-                    milestonesWithAutomation.has(milestone.id) ||
+                    ? milestone.transitionCondition !== undefined
+                    : milestonesWithAutomation.has(milestone.id) ||
                       milestonesWithDeletedAutomation.has(milestone.id);
 
                 const showAutomation =
@@ -64,13 +68,24 @@ const MilestoneListRendererCore = ({
                 const automationSection =
                     showAutomation && milestone.transitionCondition ? (
                         <MilestoneAutomationSection status={status}>
+                            {readonly ? (
+                                <ReadonlyMilestoneTransitionDisplay
+                                    intervalMinutes={
+                                        milestone.transitionCondition
+                                            .intervalMinutes
+                                    }
+                                    status={status}
+                                />
+                            ) : (
                                 <MilestoneTransitionDisplay
                                     intervalMinutes={
                                         milestone.transitionCondition
                                             .intervalMinutes
                                     }
                                     targetMilestoneId={nextMilestoneId}
-                                sourceMilestoneStartedAt={milestone.startedAt}
+                                    sourceMilestoneStartedAt={
+                                        milestone.startedAt
+                                    }
                                     onSave={async (payload) => {
                                         await onUpdateAutomation(
                                             milestone.id,
@@ -85,6 +100,7 @@ const MilestoneListRendererCore = ({
                                     status={status}
                                     badge={badge}
                                 />
+                            )}
                         </MilestoneAutomationSection>
                     ) : undefined;
 

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ProgressionChange.tsx

@@ -87,12 +87,7 @@ export const ProgressionChange: FC<ProgressionChangeProps> = ({
             </ChangeItemWrapper>
             <TabPanel>
                 {readonly ? (
-                    <ReadonlyMilestoneListRenderer
+                    <ReadonlyMilestoneListRenderer plan={modifiedPlan} />
-                        plan={modifiedPlan}
-                        milestonesWithAutomation={
-                            new Set([sourceId].filter(Boolean))
-                        }
-                    />
                 ) : (
                     <EditableMilestoneListRenderer
                         plan={modifiedPlan}

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneTransitionDisplay.tsx

@@ -109,6 +109,30 @@ interface IMilestoneTransitionDisplayProps {
     badge?: ReactNode;
 }
 
+export const ReadonlyMilestoneTransitionDisplay = ({
+    intervalMinutes,
+    status,
+}: {
+    intervalMinutes: number;
+    status?: MilestoneStatus;
+}) => {
+    const initial = getTimeValueAndUnitFromMinutes(intervalMinutes);
+
+    return (
+        <StyledDisplayContainer>
+            <StyledContentGroup>
+                <StyledIcon status={status} />
+                <StyledLabel status={status}>
+                    Proceed to the next milestone after
+                </StyledLabel>
+                <span style={{ fontSize: 'inherit' }}>
+                    {initial.value} {initial.unit}
+                </span>
+            </StyledContentGroup>
+        </StyledDisplayContainer>
+    );
+};
+
 export const MilestoneTransitionDisplay = ({
     intervalMinutes,
     targetMilestoneId,