feat: search page flag status with change requests (#9744)

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx

@@ -197,7 +197,7 @@ export const FeatureToggleListTable: FC = () => {
                               <StatusCell {...original} />
                           ),
                           enableSorting: false,
-                          size: 50,
+                          size: 80,
                       }),
                       columnHelper.accessor('project', {
                           header: 'Project',

frontend/src/component/feature/FeatureToggleList/StatusCell/StatusCell.tsx

@@ -2,19 +2,63 @@ import { type FC, useMemo } from 'react';
 import type { FeatureSearchResponseSchema } from 'openapi';
 import { styled } from '@mui/material';
 import { getStatus } from './getStatus';
+import DifferenceIcon from '@mui/icons-material/Difference';
+import { Link } from 'react-router-dom';
+import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 
 const Container = styled('div')(({ theme }) => ({
     padding: theme.spacing(0, 2),
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+}));
+
+const ChangeRequestIcon = styled(DifferenceIcon)(({ theme }) => ({
+    color: theme.palette.primary.main,
+    fontSize: theme.spacing(2.5),
+    marginLeft: theme.spacing(0.5),
 }));
 
 export const StatusCell: FC<FeatureSearchResponseSchema> = ({
     lifecycle,
     environments,
+    project,
 }) => {
     const status = useMemo(
         () => getStatus({ lifecycle, environments }),
         [lifecycle, environments],
     );
+    const changeRequestIds = useMemo(
+        () => environments.flatMap((env) => env.changeRequestIds),
+        [environments],
+    );
 
-    return <Container>{status}</Container>;
+    return (
+        <Container>
+            <div>{status}</div>
+            {changeRequestIds.length > 0 && (
+                <HtmlTooltip
+                    arrow
+                    title={
+                        <div>
+                            <span>Change requests:</span>
+                            <br />
+                            {changeRequestIds.map((id) => (
+                                <Link
+                                    key={id}
+                                    to={`/projects/${project}/change-requests/${id}`}
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                >
+                                    {`#${id}`}
+                                </Link>
+                            ))}
+                        </div>
+                    }
+                >
+                    <ChangeRequestIcon />
+                </HtmlTooltip>
+            )}
+        </Container>
+    );
 };

frontend/src/component/feature/FeatureToggleList/StatusCell/getStatus.ts

@@ -38,15 +38,29 @@ export const getStatus = ({
         }
     }
 
-    const productionEnvironment = environments?.find(
+    const productionEnvironments = environments?.filter(
         (env) => env.type === PRODUCTION,
     );
 
-    if (lifecycle?.stage === 'live') {
-        if (!productionEnvironment) {
+    if (lifecycle?.stage === 'live' || lifecycle?.stage === 'completed') {
+        if (productionEnvironments.length > 1) {
+            const countEnabled = productionEnvironments.filter(
+                (env) => env.enabled,
+            ).length;
+            if (countEnabled === 0) {
+                return 'Paused';
+            }
+
+            if (productionEnvironments.length !== countEnabled) {
+                return `In ${countEnabled} out of ${productionEnvironments.length} production environments`;
+            }
+        }
+        if (productionEnvironments.length === 0) {
             return 'No production environments';
         }
 
+        const productionEnvironment = productionEnvironments[0];
+
         if (!productionEnvironment?.hasStrategies) {
             return 'No strategies';
         }
@@ -54,11 +68,14 @@ export const getStatus = ({
         if (!productionEnvironment?.enabled) {
             return 'Paused';
         }
+
+        if (productionEnvironment.totalMilestones) {
+            const order = `${(productionEnvironment.milestoneOrder || 0) + 1} of ${productionEnvironment.totalMilestones}`;
+            if (productionEnvironment.milestoneName) {
+                return `Milestone: ${productionEnvironment.milestoneName} (${order})`;
             }
 
-    if (lifecycle?.stage === 'completed') {
-        if (productionEnvironment?.enabled) {
-            return 'Enabled';
+            return `Milestone ${order}`;
         }
     }