mirror of
https://github.com/Unleash/unleash.git
synced 2025-04-24 01:18:01 +02:00
feat: update hook to use change request settings (#2406)
* Refactors the hook to use the change request settings from the API
This commit is contained in:
parent
a425bcb3b8
commit
4689705f45
@ -51,7 +51,7 @@ export const FeatureStrategyCreate = () => {
|
||||
|
||||
const { feature, refetchFeature } = useFeature(projectId, featureId);
|
||||
const ref = useRef<IFeatureToggle>(feature);
|
||||
const isChangeRequestEnabled = useChangeRequestsEnabled(environmentId);
|
||||
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
|
||||
const { refetch: refetchChangeRequests } = useChangeRequestOpen(projectId);
|
||||
|
||||
const { data, staleDataNotification, forceRefreshCache } =
|
||||
@ -124,7 +124,7 @@ export const FeatureStrategyCreate = () => {
|
||||
const payload = createStrategyPayload(strategy);
|
||||
|
||||
try {
|
||||
if (isChangeRequestEnabled) {
|
||||
if (isChangeRequestConfigured(environmentId)) {
|
||||
await onStrategyRequestAdd(payload);
|
||||
} else {
|
||||
await onAddStrategy(payload);
|
||||
@ -166,7 +166,7 @@ export const FeatureStrategyCreate = () => {
|
||||
loading={loading}
|
||||
permission={CREATE_FEATURE_STRATEGY}
|
||||
errors={errors}
|
||||
isChangeRequest={isChangeRequestEnabled}
|
||||
isChangeRequest={isChangeRequestConfigured(environmentId)}
|
||||
/>
|
||||
{staleDataNotification}
|
||||
</FormTemplate>
|
||||
|
@ -46,7 +46,7 @@ export const FeatureStrategyEdit = () => {
|
||||
const { unleashUrl } = uiConfig;
|
||||
const navigate = useNavigate();
|
||||
const { addChangeRequest } = useChangeRequestApi();
|
||||
const isChangeRequestEnabled = useChangeRequestsEnabled(environmentId);
|
||||
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
|
||||
const { refetch: refetchChangeRequests } = useChangeRequestOpen(projectId);
|
||||
|
||||
const { feature, refetchFeature } = useFeature(projectId, featureId);
|
||||
@ -136,7 +136,7 @@ export const FeatureStrategyEdit = () => {
|
||||
const payload = createStrategyPayload(strategy);
|
||||
|
||||
try {
|
||||
if (isChangeRequestEnabled) {
|
||||
if (isChangeRequestConfigured(environmentId)) {
|
||||
await onStrategyRequestEdit(payload);
|
||||
} else {
|
||||
await onStrategyEdit(payload);
|
||||
@ -183,7 +183,7 @@ export const FeatureStrategyEdit = () => {
|
||||
loading={loading}
|
||||
permission={UPDATE_FEATURE_STRATEGY}
|
||||
errors={errors}
|
||||
isChangeRequest={isChangeRequestEnabled}
|
||||
isChangeRequest={isChangeRequestConfigured(environmentId)}
|
||||
/>
|
||||
{staleDataNotification}
|
||||
</FormTemplate>
|
||||
|
@ -10,6 +10,7 @@ import { formatUnknownError } from 'utils/formatUnknownError';
|
||||
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
|
||||
import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
|
||||
import { IFeatureStrategyPayload } from 'interfaces/strategy';
|
||||
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
|
||||
|
||||
interface IAddFromTemplateCardProps {
|
||||
title: string;
|
||||
@ -40,7 +41,7 @@ export const AddFromTemplateCard: FC<IAddFromTemplateCardProps> = ({
|
||||
const { addStrategyToFeature } = useFeatureStrategyApi();
|
||||
const { setToastApiError } = useToast();
|
||||
|
||||
const isChangeRequestEnabled = useChangeRequestsEnabled(environmentId);
|
||||
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
|
||||
|
||||
const {
|
||||
changeRequestDialogDetails,
|
||||
@ -51,7 +52,7 @@ export const AddFromTemplateCard: FC<IAddFromTemplateCardProps> = ({
|
||||
|
||||
const onStrategyAdd = async () => {
|
||||
try {
|
||||
if (isChangeRequestEnabled) {
|
||||
if (isChangeRequestConfigured(environmentId)) {
|
||||
onChangeRequestAddStrategy(environmentId, strategy);
|
||||
} else {
|
||||
await addStrategyToFeature(
|
||||
|
@ -43,7 +43,7 @@ export const FeatureStrategyEmpty = ({
|
||||
environment.strategies &&
|
||||
environment.strategies.length > 0
|
||||
);
|
||||
const isChangeRequestEnabled = useChangeRequestsEnabled(environmentId);
|
||||
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
|
||||
|
||||
const {
|
||||
changeRequestDialogDetails,
|
||||
@ -71,7 +71,7 @@ export const FeatureStrategyEmpty = ({
|
||||
environment => environment.name === fromEnvironmentName
|
||||
)?.strategies || [];
|
||||
|
||||
if (isChangeRequestEnabled) {
|
||||
if (isChangeRequestConfigured(environmentId)) {
|
||||
await onChangeRequestAddStrategies(
|
||||
environmentId,
|
||||
strategies,
|
||||
|
@ -165,7 +165,7 @@ export const FeatureStrategyRemove = ({
|
||||
}: IFeatureStrategyRemoveProps) => {
|
||||
const [openDialogue, setOpenDialogue] = useState(false);
|
||||
|
||||
const changeRequestsEnabled = useChangeRequestsEnabled(environmentId);
|
||||
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
|
||||
|
||||
const onRemove = useOnRemove({
|
||||
featureId,
|
||||
@ -215,7 +215,7 @@ export const FeatureStrategyRemove = ({
|
||||
}
|
||||
/>
|
||||
<ConditionallyRender
|
||||
condition={changeRequestsEnabled}
|
||||
condition={isChangeRequestConfigured(environmentId)}
|
||||
show={
|
||||
<SuggestFeatureStrategyRemoveDialogue
|
||||
isOpen={openDialogue}
|
||||
|
@ -35,7 +35,7 @@ const FeatureOverviewEnvSwitch = ({
|
||||
const { refetchFeature } = useFeature(projectId, featureId);
|
||||
const { setToastData, setToastApiError } = useToast();
|
||||
const { classes: styles } = useStyles();
|
||||
const changeRequestsEnabled = useChangeRequestsEnabled(env.name);
|
||||
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
|
||||
const {
|
||||
onChangeRequestToggle,
|
||||
onChangeRequestToggleClose,
|
||||
@ -85,7 +85,7 @@ const FeatureOverviewEnvSwitch = ({
|
||||
};
|
||||
|
||||
const toggleEnvironment = async (e: React.ChangeEvent) => {
|
||||
if (changeRequestsEnabled) {
|
||||
if (isChangeRequestConfigured(env.name)) {
|
||||
e.preventDefault();
|
||||
onChangeRequestToggle(featureId, env.name, !env.enabled);
|
||||
return;
|
||||
|
@ -32,14 +32,16 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
|
||||
import { FeatureArchiveDialog } from '../../common/FeatureArchiveDialog/FeatureArchiveDialog';
|
||||
import { DraftBanner } from 'component/changeRequest/DraftBanner/DraftBanner';
|
||||
import { MainLayout } from 'component/layout/MainLayout/MainLayout';
|
||||
import { useChangeRequestsEnabled } from '../../../hooks/useChangeRequestsEnabled';
|
||||
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
||||
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
|
||||
|
||||
export const FeatureView = () => {
|
||||
const projectId = useRequiredPathParam('projectId');
|
||||
const featureId = useRequiredPathParam('featureId');
|
||||
const { refetch: projectRefetch } = useProject(projectId);
|
||||
const { refetchFeature } = useFeature(projectId, featureId);
|
||||
const changeRequestsEnabled = useChangeRequestsEnabled();
|
||||
const { isChangeRequestConfiguredInAnyEnv } =
|
||||
useChangeRequestsEnabled(projectId);
|
||||
|
||||
const [openTagDialog, setOpenTagDialog] = useState(false);
|
||||
const [showDelDialog, setShowDelDialog] = useState(false);
|
||||
@ -88,7 +90,7 @@ export const FeatureView = () => {
|
||||
<MainLayout
|
||||
ref={ref}
|
||||
subheader={
|
||||
changeRequestsEnabled ? (
|
||||
isChangeRequestConfiguredInAnyEnv() ? (
|
||||
<DraftBanner project={projectId} />
|
||||
) : null
|
||||
}
|
||||
|
@ -28,8 +28,8 @@ import { ChangeRequestOverview } from 'component/changeRequest/ChangeRequestOver
|
||||
import { DraftBanner } from 'component/changeRequest/DraftBanner/DraftBanner';
|
||||
import { MainLayout } from 'component/layout/MainLayout/MainLayout';
|
||||
import { ProjectChangeRequests } from '../../changeRequest/ProjectChangeRequests/ProjectChangeRequests';
|
||||
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
|
||||
import { ProjectSettings } from './ProjectSettings/ProjectSettings';
|
||||
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
|
||||
|
||||
const StyledDiv = styled('div')(() => ({
|
||||
display: 'flex',
|
||||
@ -59,14 +59,14 @@ const Project = () => {
|
||||
const { classes: styles } = useStyles();
|
||||
const navigate = useNavigate();
|
||||
const { pathname } = useLocation();
|
||||
const { isOss, uiConfig } = useUiConfig();
|
||||
const { isOss } = useUiConfig();
|
||||
const basePath = `/projects/${projectId}`;
|
||||
const projectName = project?.name || projectId;
|
||||
const { isChangeRequestConfiguredInAnyEnv, isChangeRequestFlagEnabled } =
|
||||
useChangeRequestsEnabled(projectId);
|
||||
|
||||
const [showDelDialog, setShowDelDialog] = useState(false);
|
||||
|
||||
const changeRequestsEnabled = useChangeRequestsEnabled();
|
||||
|
||||
const tabs = useMemo(() => {
|
||||
const tabArray = [
|
||||
{
|
||||
@ -79,7 +79,7 @@ const Project = () => {
|
||||
path: `${basePath}/health`,
|
||||
name: 'health',
|
||||
},
|
||||
...(!uiConfig?.flags?.changeRequests
|
||||
...(!isChangeRequestFlagEnabled
|
||||
? [
|
||||
{
|
||||
title: 'Access',
|
||||
@ -98,7 +98,7 @@ const Project = () => {
|
||||
path: `${basePath}/archive`,
|
||||
name: 'archive',
|
||||
},
|
||||
...(uiConfig?.flags?.changeRequests
|
||||
...(isChangeRequestFlagEnabled
|
||||
? [
|
||||
{
|
||||
title: 'Project settings',
|
||||
@ -120,11 +120,11 @@ const Project = () => {
|
||||
name: 'change-request' + '',
|
||||
};
|
||||
|
||||
if (changeRequestsEnabled) {
|
||||
if (isChangeRequestFlagEnabled) {
|
||||
tabArray.splice(tabArray.length - 2, 0, changeRequestTab);
|
||||
}
|
||||
return tabArray;
|
||||
}, [changeRequestsEnabled]);
|
||||
}, [isChangeRequestFlagEnabled]);
|
||||
|
||||
const activeTab = [...tabs]
|
||||
.reverse()
|
||||
@ -149,7 +149,7 @@ const Project = () => {
|
||||
<MainLayout
|
||||
ref={ref}
|
||||
subheader={
|
||||
changeRequestsEnabled ? (
|
||||
isChangeRequestConfiguredInAnyEnv() ? (
|
||||
<DraftBanner project={projectId} />
|
||||
) : null
|
||||
}
|
||||
@ -263,7 +263,7 @@ const Project = () => {
|
||||
path="change-requests"
|
||||
element={
|
||||
<ConditionallyRender
|
||||
condition={changeRequestsEnabled}
|
||||
condition={isChangeRequestFlagEnabled}
|
||||
show={<ProjectChangeRequests />}
|
||||
/>
|
||||
}
|
||||
@ -272,7 +272,7 @@ const Project = () => {
|
||||
path="change-requests/:id"
|
||||
element={
|
||||
<ConditionallyRender
|
||||
condition={changeRequestsEnabled}
|
||||
condition={isChangeRequestFlagEnabled}
|
||||
show={<ChangeRequestOverview />}
|
||||
/>
|
||||
}
|
||||
|
@ -96,7 +96,7 @@ export const ProjectFeatureToggles = ({
|
||||
const navigate = useNavigate();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const { uiConfig } = useUiConfig();
|
||||
const changeRequestsEnabled = useChangeRequestsEnabled();
|
||||
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
|
||||
const environments = useEnvironmentsRef(
|
||||
loading ? ['a', 'b', 'c'] : newEnvironments
|
||||
);
|
||||
@ -119,7 +119,7 @@ export const ProjectFeatureToggles = ({
|
||||
environment: string,
|
||||
enabled: boolean
|
||||
) => {
|
||||
if (changeRequestsEnabled) {
|
||||
if (isChangeRequestConfigured(environment)) {
|
||||
onChangeRequestToggle(featureName, environment, enabled);
|
||||
throw new Error('Additional approval required');
|
||||
}
|
||||
|
@ -1,10 +1,35 @@
|
||||
import React from 'react';
|
||||
import useUiConfig from './api/getters/useUiConfig/useUiConfig';
|
||||
import { useChangeRequestConfig } from './api/getters/useChangeRequestConfig/useChangeRequestConfig';
|
||||
|
||||
export const useChangeRequestsEnabled = (environment?: string) => {
|
||||
// it can be swapped with proper settings instead of feature flag
|
||||
export const useChangeRequestsEnabled = (projectId: string) => {
|
||||
const { uiConfig } = useUiConfig();
|
||||
return (
|
||||
Boolean(uiConfig?.flags?.changeRequests) &&
|
||||
(environment === 'production' || typeof environment === 'undefined')
|
||||
const { data } = useChangeRequestConfig(projectId);
|
||||
|
||||
const isChangeRequestConfigured = React.useCallback(
|
||||
(environment: string): boolean => {
|
||||
const enabled = data.some(draft => {
|
||||
return (
|
||||
draft.environment === environment &&
|
||||
draft.changeRequestEnabled
|
||||
);
|
||||
});
|
||||
|
||||
return Boolean(uiConfig?.flags.changeRequests) && enabled;
|
||||
},
|
||||
[data]
|
||||
);
|
||||
|
||||
const isChangeRequestConfiguredInAnyEnv = React.useCallback((): boolean => {
|
||||
return (
|
||||
Boolean(uiConfig?.flags.changeRequests) &&
|
||||
data.some(draft => draft.changeRequestEnabled)
|
||||
);
|
||||
}, [data]);
|
||||
|
||||
return {
|
||||
isChangeRequestFlagEnabled: Boolean(uiConfig?.flags.changeRequests),
|
||||
isChangeRequestConfigured,
|
||||
isChangeRequestConfiguredInAnyEnv,
|
||||
};
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user