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 = () => { } /> } /> - +
); };