Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: release plans flow in flag environments #8843

Merged
merged 6 commits into from
Nov 26, 2024
Merged

chore: release plans flow in flag environments #8843

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0a953da
chore: show release plans in flag environments
nunogois Nov 21, 2024
d33bbcb
fix: milestone status adjustments
nunogois Nov 21, 2024
b708710
chore: implement remaining logic
nunogois Nov 22, 2024
cd27653
refactor: leverage milestone.id in status check
nunogois Nov 25, 2024
068c829
fix: type
nunogois Nov 25, 2024
b4493b4
fix: types
nunogois Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions ...ure/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
import { useReleasePlansApi } from 'hooks/api/actions/useReleasePlansApi/useReleasePlansApi';
import useToast from 'hooks/useToast';
import { formatUnknownError } from 'utils/formatUnknownError';
import { useReleasePlans } from 'hooks/api/getters/useReleasePlans/useReleasePlans';

const StyledIcon = styled('div')(({ theme }) => ({
width: theme.spacing(4),
Expand Down Expand Up @@ -60,6 +61,7 @@ export const FeatureReleasePlanCard = ({
}: IFeatureReleasePlanCardProps) => {
const Icon = getFeatureStrategyIcon('releasePlanTemplate');
const { trackEvent } = usePlausibleTracker();
const { refetch } = useReleasePlans(projectId, featureId, environmentId);
const { addReleasePlanToFeature } = useReleasePlansApi();
const { setToastApiError, setToastData } = useToast();

Expand All @@ -75,6 +77,7 @@ export const FeatureReleasePlanCard = ({
type: 'success',
title: 'Release plan added',
});
refetch();
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
Expand Down
175 changes: 109 additions & 66 deletions ...ronments/FeatureOverviewEnvironment/EnvironmentAccordionBody/EnvironmentAccordionBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ import usePagination from 'hooks/usePagination';
import type { IFeatureStrategy } from 'interfaces/strategy';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { useUiFlag } from 'hooks/useUiFlag';
import { useReleasePlans } from 'hooks/api/getters/useReleasePlans/useReleasePlans';
import { ReleasePlan } from '../../../ReleasePlan/ReleasePlan';
import { Badge } from 'component/common/Badge/Badge';
import { SectionSeparator } from '../SectionSeparator/SectionSeparator';

interface IEnvironmentAccordionBodyProps {
isDisabled: boolean;
Expand All @@ -40,6 +44,14 @@ const StyledAccordionBodyInnerContainer = styled('div')(({ theme }) => ({
},
}));

const StyledBadge = styled(Badge)(({ theme }) => ({
backgroundColor: theme.palette.primary.light,
border: 'none',
padding: theme.spacing(0.75, 1.5),
borderRadius: theme.shape.borderRadiusLarge,
color: theme.palette.common.white,
}));

const EnvironmentAccordionBody = ({
featureEnvironment,
isDisabled,
Expand All @@ -58,6 +70,11 @@ const EnvironmentAccordionBody = ({
const [strategies, setStrategies] = useState(
featureEnvironment?.strategies || [],
);
const { releasePlans } = useReleasePlans(
projectId,
featureId,
featureEnvironment?.name,
);
const { trackEvent } = usePlausibleTracker();

const [dragItem, setDragItem] = useState<{
Expand Down Expand Up @@ -201,7 +218,10 @@ const EnvironmentAccordionBody = ({
<StyledAccordionBody>
<StyledAccordionBodyInnerContainer>
<ConditionallyRender
condition={strategies.length > 0 && isDisabled}
condition={
(releasePlans.length > 0 || strategies.length > 0) &&
isDisabled
}
show={() => (
<Alert severity='warning' sx={{ mb: 2 }}>
This environment is disabled, which means that none
Expand All @@ -210,74 +230,97 @@ const EnvironmentAccordionBody = ({
)}
/>
<ConditionallyRender
condition={strategies.length > 0}
condition={releasePlans.length > 0 || strategies.length > 0}
show={
<ConditionallyRender
condition={
strategies.length < 50 ||
!manyStrategiesPagination
}
show={
<>
{strategies.map((strategy, index) => (
<StrategyDraggableItem
key={strategy.id}
strategy={strategy}
index={index}
environmentName={
featureEnvironment.name
}
otherEnvironments={
otherEnvironments
<>
{releasePlans.map((plan) => (
<ReleasePlan key={plan.id} plan={plan} />
))}
<ConditionallyRender
condition={
releasePlans.length > 0 &&
strategies.length > 0
}
show={
<SectionSeparator>
<StyledBadge>OR</StyledBadge>
</SectionSeparator>
}
/>
<ConditionallyRender
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same question around these being moved away from and consistency as further down

condition={
strategies.length < 50 ||
!manyStrategiesPagination
}
show={
<>
{strategies.map((strategy, index) => (
<StrategyDraggableItem
key={strategy.id}
strategy={strategy}
index={index}
environmentName={
featureEnvironment.name
}
otherEnvironments={
otherEnvironments
}
isDragging={
dragItem?.id === strategy.id
}
onDragStartRef={onDragStartRef}
onDragOver={onDragOver(
strategy.id,
)}
onDragEnd={onDragEnd}
/>
))}
</>
}
elseShow={
<>
<Alert severity='error'>
We noticed you're using a high
number of activation strategies. To
ensure a more targeted approach,
consider leveraging constraints or
segments.
</Alert>
<br />
{page.map((strategy, index) => (
<StrategyDraggableItem
key={strategy.id}
strategy={strategy}
index={
index + pageIndex * pageSize
}
environmentName={
featureEnvironment.name
}
otherEnvironments={
otherEnvironments
}
isDragging={false}
onDragStartRef={
(() => {}) as any
}
onDragOver={(() => {}) as any}
onDragEnd={(() => {}) as any}
/>
))}
<br />
<Pagination
count={pages.length}
shape='rounded'
page={pageIndex + 1}
onChange={(_, page) =>
setPageIndex(page - 1)
}
isDragging={
dragItem?.id === strategy.id
}
onDragStartRef={onDragStartRef}
onDragOver={onDragOver(strategy.id)}
onDragEnd={onDragEnd}
/>
))}
</>
}
elseShow={
<>
<Alert severity='error'>
We noticed you're using a high number of
activation strategies. To ensure a more
targeted approach, consider leveraging
constraints or segments.
</Alert>
<br />
{page.map((strategy, index) => (
<StrategyDraggableItem
key={strategy.id}
strategy={strategy}
index={index + pageIndex * pageSize}
environmentName={
featureEnvironment.name
}
otherEnvironments={
otherEnvironments
}
isDragging={false}
onDragStartRef={(() => {}) as any}
onDragOver={(() => {}) as any}
onDragEnd={(() => {}) as any}
/>
))}
<br />
<Pagination
count={pages.length}
shape='rounded'
page={pageIndex + 1}
onChange={(_, page) =>
setPageIndex(page - 1)
}
/>
</>
}
/>
</>
}
/>
</>
}
elseShow={
<FeatureStrategyEmpty
Expand Down
10 changes: 9 additions & 1 deletion ...reOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentFooter/EnvironmentFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import type { IFeatureEnvironmentMetrics } from 'interfaces/featureToggle';
import { FeatureMetricsStats } from 'component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats';
import { SectionSeparator } from '../SectionSeparator/SectionSeparator';
import { styled } from '@mui/material';

const StyledLabel = styled('span')(({ theme }) => ({
background: theme.palette.envAccordion.expanded,
padding: theme.spacing(0, 2),
}));

interface IEnvironmentFooterProps {
environmentMetric?: IFeatureEnvironmentMetrics;
Expand All @@ -15,7 +21,9 @@ export const EnvironmentFooter = ({

return (
<>
<SectionSeparator>Feature flag exposure</SectionSeparator>
<SectionSeparator>
<StyledLabel>Feature flag exposure</StyledLabel>
</SectionSeparator>

<div>
<FeatureMetricsStats
Expand Down
1 change: 0 additions & 1 deletion ...tureOverviewEnvironments/FeatureOverviewEnvironment/SectionSeparator/SectionSeparator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ const SeparatorContent = styled('span')(({ theme }) => ({
fontSize: theme.fontSizes.bodySize,
textAlign: 'center',
padding: '0 1rem',
background: theme.palette.envAccordion.expanded,
position: 'relative',
maxWidth: '80%',
color: theme.palette.text.primary,
Expand Down
Loading
Loading