diff --git a/frontend/src/component/changeRequest/ChangeRequest.test.tsx b/frontend/src/component/changeRequest/ChangeRequest.test.tsx
index 5d878a3205..c49005f0f6 100644
--- a/frontend/src/component/changeRequest/ChangeRequest.test.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest.test.tsx
@@ -1,19 +1,13 @@
-import {
- render,
- screen,
- waitFor,
- within,
- getAllByRole,
- fireEvent,
-} from '@testing-library/react';
+import { FC } from 'react';
+import { render, screen, within, fireEvent } from '@testing-library/react';
import { MemoryRouter, Routes, Route } from 'react-router-dom';
-import { FeatureView } from '../feature/FeatureView/FeatureView';
import { ThemeProvider } from 'themes/ThemeProvider';
+import { MainLayout } from 'component/layout/MainLayout/MainLayout';
+import { FeatureView } from '../feature/FeatureView/FeatureView';
import { AccessProvider } from '../providers/AccessProvider/AccessProvider';
import { AnnouncerProvider } from '../common/Announcer/AnnouncerProvider/AnnouncerProvider';
import { testServerRoute, testServerSetup } from '../../utils/testServer';
import { UIProviderContainer } from '../providers/UIProvider/UIProviderContainer';
-import { FC } from 'react';
const server = testServerSetup();
@@ -227,7 +221,10 @@ const UnleashUiSetup: FC<{ path: string; pathTemplate: string }> = ({
-
+ {children}}
+ />
diff --git a/frontend/src/component/feature/FeatureView/FeatureNotFound/FeatureNotFound.tsx b/frontend/src/component/feature/FeatureView/FeatureNotFound/FeatureNotFound.tsx
index 24ab95458d..79090f5230 100644
--- a/frontend/src/component/feature/FeatureView/FeatureNotFound/FeatureNotFound.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureNotFound/FeatureNotFound.tsx
@@ -31,7 +31,10 @@ export const FeatureNotFound = () => {
The feature{' '}
{featureId} has
been archived. You can find it on the{' '}
- archive page.
+
+ project archive page
+
+ .
);
}
diff --git a/frontend/src/component/feature/FeatureView/FeatureView.tsx b/frontend/src/component/feature/FeatureView/FeatureView.tsx
index 34f46e6e5d..3d1b69a3f7 100644
--- a/frontend/src/component/feature/FeatureView/FeatureView.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureView.tsx
@@ -1,5 +1,5 @@
-import { Tab, Tabs, useMediaQuery } from '@mui/material';
import { useState } from 'react';
+import { Tab, Tabs, useMediaQuery } from '@mui/material';
import { Archive, FileCopy, Label, WatchLater } from '@mui/icons-material';
import {
Link,
@@ -30,11 +30,7 @@ import { FeatureStatusChip } from 'component/common/FeatureStatusChip/FeatureSta
import { FeatureNotFound } from 'component/feature/FeatureView/FeatureNotFound/FeatureNotFound';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { FeatureArchiveDialog } from 'component/common/FeatureArchiveDialog/FeatureArchiveDialog';
-import { DraftBanner } from 'component/changeRequest/DraftBanner/DraftBanner';
-import { MainLayout } from 'component/layout/MainLayout/MainLayout';
-import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { useFavoriteFeaturesApi } from 'hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi';
-import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { FavoriteIconButton } from 'component/common/FavoriteIconButton/FavoriteIconButton';
export const FeatureView = () => {
@@ -43,9 +39,6 @@ export const FeatureView = () => {
const { refetch: projectRefetch } = useProject(projectId);
const { favorite, unfavorite } = useFavoriteFeaturesApi();
const { refetchFeature } = useFeature(projectId, featureId);
- const { isChangeRequestConfiguredInAnyEnv } =
- useChangeRequestsEnabled(projectId);
- const { uiConfig } = useUiConfig();
const [openTagDialog, setOpenTagDialog] = useState(false);
const [showDelDialog, setShowDelDialog] = useState(false);
@@ -86,10 +79,6 @@ export const FeatureView = () => {
const activeTab = tabData.find(tab => tab.path === pathname) ?? tabData[0];
- if (status === 404) {
- return ;
- }
-
const onFavorite = async () => {
if (feature?.favorite) {
await unfavorite(projectId, feature.name);
@@ -99,150 +88,125 @@ export const FeatureView = () => {
refetchFeature();
};
- return (
-
- ) : null
- }
- >
-
-
-
-
-
-
- {feature.name}{' '}
-
-
- }
- />
-
+ if (status === 404) {
+ return
;
+ }
-
-
-
-
-
setShowDelDialog(true)}
- >
-
-
-
setOpenStaleDialog(true)}
- permission={UPDATE_FEATURE}
- projectId={projectId}
- tooltipProps={{
- title: 'Toggle stale state',
- }}
- data-loading
- >
-
-
-
setOpenTagDialog(true)}
- permission={UPDATE_FEATURE}
- projectId={projectId}
- tooltipProps={{ title: 'Add tag' }}
- data-loading
- >
-
-
-
-
-
-
-
- {tabData.map(tab => (
- navigate(tab.path)}
- className={styles.tabButton}
- />
- ))}
-
-
-
-
- }
- />
- } />
- }
- />
- }
- />
- } />
-
- {
- projectRefetch();
- navigate(`/projects/${projectId}`);
- }}
- onClose={() => setShowDelDialog(false)}
- projectId={projectId}
- featureId={featureId}
+ if (error !== undefined) {
+ return ;
+ }
+
+ return (
+
+
+
+
+
-
{
- setOpenStaleDialog(false);
- refetchFeature();
- }}
- featureId={featureId}
- projectId={projectId}
- />
-
+ {feature.name}{' '}
+
+ }
/>
- }
+
+
+
+
+
+
setShowDelDialog(true)}
+ >
+
+
+
setOpenStaleDialog(true)}
+ permission={UPDATE_FEATURE}
+ projectId={projectId}
+ tooltipProps={{
+ title: 'Toggle stale state',
+ }}
+ data-loading
+ >
+
+
+
setOpenTagDialog(true)}
+ permission={UPDATE_FEATURE}
+ projectId={projectId}
+ tooltipProps={{ title: 'Add tag' }}
+ data-loading
+ >
+
+
+
+
+
+
+
+ {tabData.map(tab => (
+ navigate(tab.path)}
+ className={styles.tabButton}
+ />
+ ))}
+
+
+
+
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
{
+ projectRefetch();
+ navigate(`/projects/${projectId}`);
+ }}
+ onClose={() => setShowDelDialog(false)}
+ projectId={projectId}
+ featureId={featureId}
/>
-
+ {
+ setOpenStaleDialog(false);
+ refetchFeature();
+ }}
+ featureId={featureId}
+ projectId={projectId}
+ />
+
+
);
};
diff --git a/frontend/src/component/changeRequest/DraftBanner/DraftBanner.tsx b/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx
similarity index 94%
rename from frontend/src/component/changeRequest/DraftBanner/DraftBanner.tsx
rename to frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx
index a3b0832075..47cc420600 100644
--- a/frontend/src/component/changeRequest/DraftBanner/DraftBanner.tsx
+++ b/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx
@@ -2,10 +2,10 @@ import { FC, useState, VFC } from 'react';
import { Box, Button, styled, Typography } from '@mui/material';
import { useStyles as useAppStyles } from 'component/App.styles';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { ChangeRequestSidebar } from '../ChangeRequestSidebar/ChangeRequestSidebar';
+import { ChangeRequestSidebar } from 'component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar';
import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
-import { IChangeRequest } from '../changeRequest.types';
-import { changesCount } from '../changesCount';
+import { IChangeRequest } from 'component/changeRequest/changeRequest.types';
+import { changesCount } from 'component/changeRequest/changesCount';
interface IDraftBannerProps {
project: string;
diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx
index d5cb503b92..e4dc99b732 100644
--- a/frontend/src/component/layout/MainLayout/MainLayout.tsx
+++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx
@@ -12,6 +12,10 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { SkipNavLink } from 'component/common/SkipNav/SkipNavLink';
import { SkipNavTarget } from 'component/common/SkipNav/SkipNavTarget';
import { formatAssetPath } from 'utils/formatPath';
+import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
+import { DraftBanner } from './DraftBanner/DraftBanner';
const useStyles = makeStyles()(theme => ({
container: {
@@ -30,14 +34,17 @@ const useStyles = makeStyles()(theme => ({
interface IMainLayoutProps {
children: ReactNode;
- subheader?: ReactNode;
}
export const MainLayout = forwardRef(
- ({ children, subheader }, ref) => {
+ ({ children }, ref) => {
const { classes } = useStyles();
const { classes: styles } = useAppStyles();
const { uiConfig } = useUiConfig();
+ const projectId = useOptionalPathParam('projectId');
+ const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(
+ projectId || ''
+ );
return (
<>
@@ -46,7 +53,12 @@ export const MainLayout = forwardRef(
- {subheader}
+ }
+ />
{
@@ -55,8 +52,6 @@ const Project = () => {
const { isOss } = useUiConfig();
const basePath = `/projects/${projectId}`;
const projectName = project?.name || projectId;
- const { isChangeRequestConfiguredInAnyEnv } =
- useChangeRequestsEnabled(projectId);
const { favorite, unfavorite } = useFavoriteProjectsApi();
const [showDelDialog, setShowDelDialog] = useState(false);
@@ -122,14 +117,7 @@ const Project = () => {
};
return (
-
- ) : null
- }
- >
+
@@ -259,7 +247,7 @@ const Project = () => {
} />
} />
-
+
);
};