Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00
Code Issues Projects Releases Wiki Activity

refactor: extract feature lifecycle component (#7023)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-05-09 12:19:24 +02:00 committed by GitHub
parent 79739a1d7f
commit 476959df8e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 50 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycle.tsx Normal file
View File

@ -0,0 +1,43 @@
import { FeatureLifecycleStageIcon } from './FeatureLifecycleStageIcon';
import { FeatureLifecycleTooltip } from './FeatureLifecycleTooltip';
import useFeatureLifecycleApi from 'hooks/api/actions/useFeatureLifecycleApi/useFeatureLifecycleApi';
import { populateCurrentStage } from './populateCurrentStage';
import type { IFeatureToggle } from 'interfaces/featureToggle';
import type { FC } from 'react';
export const FeatureLifecycle: FC<{
onArchive: () => void;
onComplete: () => void;
onUncomplete: () => void;
feature: Pick<
IFeatureToggle,
'lifecycle' | 'environments' | 'project' | 'name'
>;
}> = ({ feature, onComplete, onUncomplete, onArchive }) => {
const currentStage = populateCurrentStage(feature);
const { markFeatureCompleted, markFeatureUncompleted, loading } =
useFeatureLifecycleApi();
const onCompleteHandler = async () => {
await markFeatureCompleted(feature.name, feature.project);
onComplete();
};
const onUncompleteHandler = async () => {
await markFeatureUncompleted(feature.name, feature.project);
onUncomplete();
};
return currentStage ? (
<FeatureLifecycleTooltip
stage={currentStage!}
onArchive={onArchive}
onComplete={onCompleteHandler}
onUncomplete={onUncompleteHandler}
loading={loading}
>
<FeatureLifecycleStageIcon stage={currentStage!} />
</FeatureLifecycleTooltip>
) : null;
};

38
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
View File

@ -8,13 +8,9 @@ import PermissionIconButton from 'component/common/PermissionIconButton/Permissi
import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { useUiFlag } from 'hooks/useUiFlag';
import { FeatureLifecycleTooltip } from '../FeatureLifecycle/FeatureLifecycleTooltip';
import { FeatureLifecycleStageIcon } from '../FeatureLifecycle/FeatureLifecycleStageIcon';
import { FeatureArchiveDialog } from 'component/common/FeatureArchiveDialog/FeatureArchiveDialog';
import { useState } from 'react';
import { FeatureArchiveNotAllowedDialog } from 'component/common/FeatureArchiveDialog/FeatureArchiveNotAllowedDialog';
import { populateCurrentStage } from '../FeatureLifecycle/populateCurrentStage';
import useFeatureLifecycleApi from 'hooks/api/actions/useFeatureLifecycleApi/useFeatureLifecycleApi';
import { StyledDetail } from '../FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/StyledRow';
import { formatDateYMD } from 'utils/formatDate';
import { parseISO } from 'date-fns';
@ -23,6 +19,7 @@ import { DependencyRow } from './DependencyRow';
import { useLocationSettings } from 'hooks/useLocationSettings';
import { useShowDependentFeatures } from './useShowDependentFeatures';
import type { ILastSeenEnvironments } from 'interfaces/featureToggle';
import { FeatureLifecycle } from '../FeatureLifecycle/FeatureLifecycle';
const StyledContainer = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge,
@ -97,8 +94,6 @@ const FeatureOverviewMetaData = () => {
const { feature, refetchFeature } = useFeature(projectId, featureId);
const { project, description, type } = feature;
const featureLifecycleEnabled = useUiFlag('featureLifecycle');
const { markFeatureCompleted, markFeatureUncompleted, loading } =
useFeatureLifecycleApi();
const navigate = useNavigate();
const [showDelDialog, setShowDelDialog] = useState(false);
const { locationSettings } = useLocationSettings();
@ -115,18 +110,6 @@ const FeatureOverviewMetaData = () => {
const IconComponent = getFeatureTypeIcons(type);
const currentStage = populateCurrentStage(feature);
const onComplete = async () => {
await markFeatureCompleted(featureId, projectId);
refetchFeature();
};
const onUncomplete = async () => {
await markFeatureUncompleted(featureId, projectId);
refetchFeature();
};
return (
<StyledContainer>
<StyledPaddingContainerTop>
@ -151,23 +134,16 @@ const FeatureOverviewMetaData = () => {
<span>{project}</span>
</StyledRow>
<ConditionallyRender
condition={
featureLifecycleEnabled && Boolean(currentStage)
}
condition={featureLifecycleEnabled}
show={
<StyledRow data-loading>
<StyledLabel>Lifecycle:</StyledLabel>
<FeatureLifecycleTooltip
stage={currentStage!}
<FeatureLifecycle
feature={feature}
onArchive={() => setShowDelDialog(true)}
onComplete={onComplete}
onUncomplete={onUncomplete}
loading={loading}
>
<FeatureLifecycleStageIcon
stage={currentStage!}
/>
</FeatureLifecycleTooltip>
onComplete={refetchFeature}
onUncomplete={refetchFeature}
/>
</StyledRow>
}
/>