diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx index 7fab824cb0..0604e2d93b 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx @@ -1,10 +1,14 @@ import { DragEventHandler, RefObject, useRef } from 'react'; -import { Box } from '@mui/material'; +import { Box, useMediaQuery, useTheme } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; import { IFeatureEnvironment } from 'interfaces/featureToggle'; import { IFeatureStrategy } from 'interfaces/strategy'; import { StrategyItem } from './StrategyItem/StrategyItem'; +import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; +import { Badge } from 'component/common/Badge/Badge'; +import { IChangeRequestEvent } from 'component/changeRequest/changeRequest.types'; +import { useStrategyChangeFromRequest } from './StrategyItem/useStrategyChangeFromRequest'; interface IStrategyDraggableItemProps { strategy: IFeatureStrategy; @@ -32,7 +36,15 @@ export const StrategyDraggableItem = ({ onDragOver, onDragEnd, }: IStrategyDraggableItemProps) => { + const projectId = useRequiredPathParam('projectId'); + const featureId = useRequiredPathParam('featureId'); const ref = useRef(null); + const change = useStrategyChangeFromRequest( + projectId, + featureId, + environmentName, + strategy.id + ); return ( } /> ); }; + +const ChangeRequestStatusBadge = ({ + change, +}: { + change: IChangeRequestEvent | undefined; +}) => { + const theme = useTheme(); + const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm')); + + if (isSmallScreen) { + return null; + } + + return ( + <> + Modified in draft} + /> + Deleted in draft} + /> + + ); +}; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx index ecbcda00dd..5fe010fe42 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx @@ -1,4 +1,4 @@ -import { DragEventHandler, VFC } from 'react'; +import { DragEventHandler, FC } from 'react'; import { Edit } from '@mui/icons-material'; import { Link } from 'react-router-dom'; import { IFeatureEnvironment } from 'interfaces/featureToggle'; @@ -20,15 +20,17 @@ interface IStrategyItemProps { onDragEnd?: DragEventHandler; otherEnvironments?: IFeatureEnvironment['name'][]; orderNumber?: number; + headerChildren?: JSX.Element[] | JSX.Element; } -export const StrategyItem: VFC = ({ +export const StrategyItem: FC = ({ environmentId, strategy, onDragStart, onDragEnd, otherEnvironments, orderNumber, + headerChildren, }) => { const projectId = useRequiredPathParam('projectId'); const featureId = useRequiredPathParam('featureId'); @@ -48,6 +50,7 @@ export const StrategyItem: VFC = ({ orderNumber={orderNumber} actions={ <> + {headerChildren} 0 diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/useStrategyChangeFromRequest.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/useStrategyChangeFromRequest.tsx new file mode 100644 index 0000000000..41c495c4c0 --- /dev/null +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/useStrategyChangeFromRequest.tsx @@ -0,0 +1,27 @@ +import { useChangeRequestOpen } from 'hooks/api/getters/useChangeRequestOpen/useChangeRequestOpen'; + +export const useStrategyChangeFromRequest = ( + projectId: string, + featureId: string, + environment: string, + strategyId: string +) => { + const { draft } = useChangeRequestOpen(projectId); + + const environmentDraft = draft?.find( + draft => draft.environment === environment + ); + const feature = environmentDraft?.features.find( + feature => feature.name === featureId + ); + const change = feature?.changes.find(change => { + if ( + change.action === 'updateStrategy' || + change.action === 'deleteStrategy' + ) { + return change.payload.id === strategyId; + } + }); + + return change; +};