feat: disabled feature dependency (#6731)

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/DependencyChange.tsx

@@ -42,6 +42,9 @@ export const DependencyChange: VFC<{
                             >
                                 {change.payload.feature}
                             </StyledLink>
+                            {change.payload.enabled === false
+                                ? ' (disabled)'
+                                : null}
                         </AddDependencyWrapper>
                         {actions}
                     </ChangeItemWrapper>

frontend/src/component/changeRequest/changeRequest.types.ts

@@ -223,7 +223,7 @@ type ChangeRequestVariantPatch = {
 
 type ChangeRequestEnabled = { enabled: boolean };
 
-type ChangeRequestAddDependency = { feature: string };
+type ChangeRequestAddDependency = { feature: string; enabled: boolean };
 
 export type ChangeRequestAddStrategy = Pick<
     IFeatureStrategy,

frontend/src/component/feature/Dependencies/AddDependencyDialogue.test.tsx

@@ -11,6 +11,9 @@ const setupApi = () => {
         versionInfo: {
             current: { oss: 'irrelevant', enterprise: 'some value' },
         },
+        flags: {
+            variantDependencies: true,
+        },
     });
 
     testServerRoute(
@@ -103,13 +106,17 @@ test('Edit dependency', async () => {
     });
 
     // Open the dropdown by selecting the role.
-    const dropdown = screen.queryAllByRole('combobox')[0];
+    const [featureDropdown, featureStatusDropdown] =
-    expect(dropdown.innerHTML).toBe('parentB');
+        screen.queryAllByRole('combobox');
-    userEvent.click(dropdown);
+    expect(featureDropdown.innerHTML).toBe('parentB');
+    userEvent.click(featureDropdown);
 
     const parentAOption = await screen.findByText('parentA');
     userEvent.click(parentAOption);
 
+    await screen.findByText('feature status');
+    expect(featureStatusDropdown.innerHTML).toBe('enabled');
+
     const addButton = await screen.findByText('Add');
     userEvent.click(addButton);
 

frontend/src/component/feature/Dependencies/AddDependencyDialogue.tsx

@@ -14,11 +14,13 @@ import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { DependenciesUpgradeAlert } from './DependenciesUpgradeAlert';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 interface IAddDependencyDialogueProps {
     project: string;
     featureId: string;
     parentFeatureId?: string;
+    parentFeatureValue?: ParentValue;
     showDependencyDialogue: boolean;
     onClose: () => void;
 }
@@ -40,7 +42,7 @@ const LazyOptions: FC<{
     parent: string;
     onSelect: (parent: string) => void;
 }> = ({ project, featureId, parent, onSelect }) => {
-    const { parentOptions, loading } = useParentOptions(project, featureId);
+    const { parentOptions } = useParentOptions(project, featureId);
 
     const options = parentOptions
         ? [
@@ -61,10 +63,30 @@ const LazyOptions: FC<{
     );
 };
 
+const FeatureValueOptions: FC<{
+    parentValue: ParentValue;
+    onSelect: (parent: string) => void;
+}> = ({ onSelect, parentValue }) => {
+    return (
+        <StyledSelect
+            fullWidth
+            options={[
+                { key: 'enabled', label: 'enabled' },
+                { key: 'disabled', label: 'disabled' },
+            ]}
+            value={parentValue.status}
+            onChange={onSelect}
+        />
+    );
+};
+
+type ParentValue = { status: 'enabled' } | { status: 'disabled' };
+
 const useManageDependency = (
     project: string,
     featureId: string,
     parent: string,
+    parentValue: ParentValue,
     onClose: () => void,
 ) => {
     const { trackEvent } = usePlausibleTracker();
@@ -91,7 +113,10 @@ const useManageDependency = (
                 {
                     action: actionType,
                     feature: featureId,
-                    payload: { feature: parent },
+                    payload: {
+                        feature: parent,
+                        enabled: parentValue.status !== 'disabled',
+                    },
                 },
             ]);
             trackEvent('dependent_features', {
@@ -105,7 +130,7 @@ const useManageDependency = (
                 { action: actionType, feature: featureId, payload: undefined },
             ]);
         }
-        refetchChangeRequests();
+        void refetchChangeRequests();
         setToastData({
             text:
                 actionType === 'addDependency'
@@ -116,7 +141,7 @@ const useManageDependency = (
         });
     };
 
-    const manageDependency = async () => {
+    return async () => {
         try {
             if (isChangeRequestConfiguredInAnyEnv()) {
                 const actionType =
@@ -141,7 +166,10 @@ const useManageDependency = (
                 });
                 setToastData({ title: 'Dependency removed', type: 'success' });
             } else {
-                await addDependency(featureId, { feature: parent });
+                await addDependency(featureId, {
+                    feature: parent,
+                    enabled: parentValue.status !== 'disabled',
+                });
                 trackEvent('dependent_features', {
                     props: {
                         eventType: 'dependency added',
@@ -152,32 +180,37 @@ const useManageDependency = (
         } catch (error) {
             setToastApiError(formatUnknownError(error));
         }
-        await refetchFeature();
+        void refetchFeature();
         onClose();
     };
-
-    return manageDependency;
 };
 
 export const AddDependencyDialogue = ({
     project,
     featureId,
     parentFeatureId,
+    parentFeatureValue,
     showDependencyDialogue,
     onClose,
 }: IAddDependencyDialogueProps) => {
     const [parent, setParent] = useState(
         parentFeatureId || REMOVE_DEPENDENCY_OPTION.key,
     );
+    const [parentValue, setParentValue] = useState<ParentValue>(
+        parentFeatureValue || { status: 'enabled' },
+    );
     const handleClick = useManageDependency(
         project,
         featureId,
         parent,
+        parentValue,
         onClose,
     );
     const { isChangeRequestConfiguredInAnyEnv } =
         useChangeRequestsEnabled(project);
 
+    const variantDependenciesEnabled = useUiFlag('variantDependencies');
+
     return (
         <Dialogue
             open={showDependencyDialogue}
@@ -197,10 +230,18 @@ export const AddDependencyDialogue = ({
                 <DependenciesUpgradeAlert />
                 <Box sx={{ mt: 2, mb: 4 }}>
                     Your feature will be evaluated only when the selected parent
-                    feature is enabled in the same environment.
+                    feature is{' '}
+                    <b>
+                        {parentValue.status === 'disabled'
+                            ? 'disabled'
+                            : 'enabled'}
+                    </b>{' '}
+                    in the same environment.
                 </Box>
 
-                <Typography>What feature do you want to depend on?</Typography>
+                <Typography>
+                    What <b>feature</b> do you want to depend on?
+                </Typography>
                 <ConditionallyRender
                     condition={showDependencyDialogue}
                     show={
@@ -208,10 +249,39 @@ export const AddDependencyDialogue = ({
                             project={project}
                             featureId={featureId}
                             parent={parent}
-                            onSelect={setParent}
+                            onSelect={(status) => {
+                                setParentValue({ status: 'enabled' });
+                                setParent(status);
+                            }}
                         />
                     }
                 />
+
+                <ConditionallyRender
+                    condition={
+                        parent !== REMOVE_DEPENDENCY_OPTION.key &&
+                        variantDependenciesEnabled
+                    }
+                    show={
+                        <Box sx={{ mt: 2 }}>
+                            <Typography>
+                                What <b>feature status</b> do you want to depend
+                                on?
+                            </Typography>
+                            <FeatureValueOptions
+                                parentValue={parentValue}
+                                onSelect={(value) =>
+                                    setParentValue({
+                                        status:
+                                            value === 'disabled'
+                                                ? 'disabled'
+                                                : 'enabled',
+                                    })
+                                }
+                            />
+                        </Box>
+                    }
+                />
             </Box>
         </Dialogue>
     );

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/DependencyRow.tsx

@@ -144,6 +144,23 @@ export const DependencyRow: FC<{ feature: IFeatureToggle }> = ({ feature }) => {
                     </FlexRow>
                 }
             />
+            <ConditionallyRender
+                condition={
+                    hasParentDependency && !feature.dependencies[0]?.enabled
+                }
+                show={
+                    <FlexRow>
+                        <StyledDetail>
+                            <StyledLabel>Dependency value:</StyledLabel>
+                            <span>
+                                {feature.dependencies[0]?.enabled
+                                    ? 'enabled'
+                                    : 'disabled'}
+                            </span>
+                        </StyledDetail>
+                    </FlexRow>
+                }
+            />
             <ConditionallyRender
                 condition={hasChildren}
                 show={
@@ -158,6 +175,7 @@ export const DependencyRow: FC<{ feature: IFeatureToggle }> = ({ feature }) => {
                     </FlexRow>
                 }
             />
+
             <ConditionallyRender
                 condition={Boolean(feature.project)}
                 show={
@@ -165,6 +183,12 @@ export const DependencyRow: FC<{ feature: IFeatureToggle }> = ({ feature }) => {
                         project={feature.project}
                         featureId={feature.name}
                         parentFeatureId={feature.dependencies[0]?.feature}
+                        parentFeatureValue={{
+                            status:
+                                feature.dependencies[0]?.enabled === false
+                                    ? 'disabled'
+                                    : 'enabled',
+                        }}
                         onClose={() => setShowDependencyDialogue(false)}
                         showDependencyDialogue={showDependencyDialogue}
                     />

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/FeatureOverviewSidePanelDetails.test.tsx

@@ -13,6 +13,9 @@ const setupApi = () => {
         versionInfo: {
             current: { oss: 'irrelevant', enterprise: 'some value' },
         },
+        flags: {
+            variantDependencies: true,
+        },
     });
     testServerRoute(server, '/api/admin/projects/default/features/feature', {});
     testServerRoute(
@@ -250,7 +253,7 @@ test('edit dependency', async () => {
                 {
                     name: 'feature',
                     project: 'default',
-                    dependencies: [{ feature: 'some_parent' }],
+                    dependencies: [{ feature: 'some_parent', enabled: false }],
                     children: [] as string[],
                 } as IFeatureToggle
             }
@@ -265,6 +268,8 @@ test('edit dependency', async () => {
 
     await screen.findByText('Dependency:');
     await screen.findByText('some_parent');
+    await screen.findByText('Dependency value:');
+    await screen.findByText('disabled');
 
     const actionsButton = await screen.findByRole('button', {
         name: /Dependency actions/i,

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/FeatureOverviewSidePanelDetails.tsx

@@ -7,7 +7,6 @@ import { useLocationSettings } from 'hooks/useLocationSettings';
 import { formatDateYMD } from 'utils/formatDate';
 import { parseISO } from 'date-fns';
 import { FeatureEnvironmentSeen } from '../../../FeatureEnvironmentSeen/FeatureEnvironmentSeen';
-import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { DependencyRow } from './DependencyRow';
 import { FlexRow, StyledDetail, StyledLabel } from './StyledRow';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -30,7 +29,6 @@ export const FeatureOverviewSidePanelDetails = ({
     header,
 }: IFeatureOverviewSidePanelDetailsProps) => {
     const { locationSettings } = useLocationSettings();
-    const { uiConfig } = useUiConfig();
     const showDependentFeatures = useShowDependentFeatures(feature.project);
 
     const lastSeenEnvironments: ILastSeenEnvironments[] =

frontend/src/interfaces/featureToggle.ts

@@ -54,6 +54,7 @@ export interface IFeatureToggle {
 
 export interface IDependency {
     feature: string;
+    enabled: boolean;
 }
 
 export interface IFeatureEnvironment {

frontend/src/interfaces/uiConfig.ts

@@ -78,6 +78,7 @@ export type UiFlags = {
     outdatedSdksBanner?: boolean;
     projectOverviewRefactor?: string;
     collectTrafficDataUsage?: boolean;
+    variantDependencies?: boolean;
 };
 
 export interface IVersionInfo {

src/lib/__snapshots__/create-config.test.ts.snap

@@ -143,6 +143,7 @@ exports[`should create default config 1`] = `
       "stripClientHeadersOn304": false,
       "useMemoizedActiveTokens": false,
       "userAccessUIEnabled": false,
+      "variantDependencies": false,
     },
     "externalResolver": {
       "getVariant": [Function],

src/lib/types/experimental.ts

@@ -54,7 +54,8 @@ export type IFlagKey =
     | 'displayEdgeBanner'
     | 'globalFrontendApiCache'
     | 'returnGlobalFrontendApiCache'
-    | 'projectOverviewRefactor';
+    | 'projectOverviewRefactor'
+    | 'variantDependencies';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -267,6 +268,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_PROJECT_OVERVIEW_REFACTOR,
         false,
     ),
+    variantDependencies: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_VARIANT_DEPENDENCIES,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {

src/server-dev.ts

@@ -52,6 +52,7 @@ process.nextTick(async () => {
                         globalFrontendApiCache: true,
                         returnGlobalFrontendApiCache: false,
                         projectOverviewRefactor: true,
+                        variantDependencies: true,
                     },
                 },
                 authentication: {