feat: Add dependency dialogue (#4828)

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

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Box, styled, Typography } from '@mui/material';
+import { Dialogue } from 'component/common/Dialogue/Dialogue';
+import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
+
+interface IAddDependencyDialogueProps {
+    showDependencyDialogue: boolean;
+    onClose: () => void;
+}
+
+const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(1.5),
+}));
+
+export const AddDependencyDialogue = ({
+    showDependencyDialogue,
+    onClose,
+}: IAddDependencyDialogueProps) => {
+    const [dependency, setDependency] = useState('');
+
+    return (
+        <Dialogue
+            open={showDependencyDialogue}
+            title="Add parent feature dependency"
+            onClose={onClose}
+            onClick={() => {}}
+            primaryButtonText={'Add'}
+            secondaryButtonText="Cancel"
+        >
+            <Box>
+                You feature will be evaluated only when the selected parent
+                feature is enabled in the same environment.
+                <br />
+                <br />
+                <Typography>What feature do you want to depend on?</Typography>
+                <StyledSelect
+                    fullWidth
+                    options={[
+                        { key: 'a', label: 'featureA' },
+                        { key: 'empty', label: '' },
+                    ]}
+                    value={dependency}
+                    onChange={setDependency}
+                />
+            </Box>
+        </Dialogue>
+    );
+};

frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx

@@ -105,7 +105,10 @@ export const FeatureEnvironmentSeen = ({
                 )
             }
             elseShow={
-                <TooltipContainer tooltip="No usage reported from connected applications">
+                <TooltipContainer
+                    sx={sx}
+                    tooltip="No usage reported from connected applications"
+                >
                     <UsageLine />
                 </TooltipContainer>
             }

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

@@ -1,6 +1,6 @@
 import FeatureOverviewMetaData from './FeatureOverviewMetaData/FeatureOverviewMetaData';
 import FeatureOverviewEnvironments from './FeatureOverviewEnvironments/FeatureOverviewEnvironments';
-import { Routes, Route, useNavigate } from 'react-router-dom';
+import { Route, Routes, useNavigate } from 'react-router-dom';
 import { FeatureStrategyCreate } from 'component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate';
 import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
 import {
@@ -12,9 +12,6 @@ import { usePageTitle } from 'hooks/usePageTitle';
 import { FeatureOverviewSidePanel } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanel';
 import { useHiddenEnvironments } from 'hooks/useHiddenEnvironments';
 import { styled } from '@mui/material';
-import { AddDependency } from '../../Dependencies/AddDependency';
-import { useUiFlag } from 'hooks/useUiFlag';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -42,7 +39,6 @@ const FeatureOverview = () => {
         useHiddenEnvironments();
     const onSidebarClose = () => navigate(featurePath);
     usePageTitle(featureId);
-    const dependentFeatures = useUiFlag('dependentFeatures');
 
     return (
         <StyledContainer>
@@ -54,16 +50,6 @@ const FeatureOverview = () => {
                 />
             </div>
             <StyledMainContent>
-                <ConditionallyRender
-                    condition={dependentFeatures}
-                    show={
-                        <AddDependency
-                            projectId={projectId}
-                            featureId={featureId}
-                        />
-                    }
-                />
-
                 <FeatureOverviewEnvironments />
             </StyledMainContent>
             <Routes>

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

@@ -0,0 +1,30 @@
+import { screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import { FeatureOverviewSidePanelDetails } from './FeatureOverviewSidePanelDetails';
+import { IFeatureToggle } from 'interfaces/featureToggle';
+import { testServerRoute, testServerSetup } from 'utils/testServer';
+
+const server = testServerSetup();
+
+testServerRoute(server, '/api/admin/ui-config', {
+    flags: {
+        dependentFeatures: true,
+    },
+});
+
+test('show dependency dialogue', async () => {
+    render(
+        <FeatureOverviewSidePanelDetails
+            feature={{ name: 'feature' } as IFeatureToggle}
+            header={''}
+        />
+    );
+
+    const addParentButton = await screen.findByText('Add parent feature');
+
+    addParentButton.click();
+
+    expect(
+        screen.getByText('Add parent feature dependency')
+    ).toBeInTheDocument();
+});

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

@@ -1,14 +1,20 @@
 import { IFeatureToggle } from 'interfaces/featureToggle';
-import { styled } from '@mui/material';
+import { Button, styled, Box } from '@mui/material';
 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 { Add } from '@mui/icons-material';
+import { useUiFlag } from 'hooks/useUiFlag';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { AddDependencyDialogue } from 'component/feature/Dependencies/AddDependencyDialogue';
+import { useState } from 'react';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
+    justifyItems: 'center',
     padding: theme.spacing(3),
     fontSize: theme.fontSizes.smallBody,
 }));
@@ -40,11 +46,14 @@ export const FeatureOverviewSidePanelDetails = ({
 }: IFeatureOverviewSidePanelDetailsProps) => {
     const { locationSettings } = useLocationSettings();
     const { uiConfig } = useUiConfig();
+    const dependentFeatures = useUiFlag('dependentFeatures');
 
     const showLastSeenByEnvironment = Boolean(
         uiConfig.flags.lastSeenByEnvironment
     );
 
+    const [showDependencyDialogue, setShowDependencyDialogue] = useState(false);
+
     return (
         <StyledContainer>
             {header}
@@ -66,6 +75,30 @@ export const FeatureOverviewSidePanelDetails = ({
                     />
                 )}
             </FlexRow>
+            <ConditionallyRender
+                condition={dependentFeatures}
+                show={
+                    <FlexRow>
+                        <StyledDetail>
+                            <StyledLabel>Dependency:</StyledLabel>
+                            <Button
+                                startIcon={<Add />}
+                                onClick={() => {
+                                    setShowDependencyDialogue(true);
+                                }}
+                            >
+                                Add parent feature
+                            </Button>
+                        </StyledDetail>
+                    </FlexRow>
+                }
+            />
+            <AddDependencyDialogue
+                onClose={() => setShowDependencyDialogue(false)}
+                showDependencyDialogue={
+                    dependentFeatures && showDependencyDialogue
+                }
+            />
         </StyledContainer>
     );
 };