mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-06 00:07:44 +01:00
17e340ab40
At first, I was creating a new component, Project Banner, which was 90% of the old banner and 10% new code, but it did not feel right. The current banner is actually smart enough to be used in any container. So now, I have moved the outdated SDK banner to the project level. I like the simplicity of the change. 
76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
import { type FC, useEffect } from 'react';
|
||
import { Box, styled } from '@mui/material';
|
||
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
|
||
import { ProjectFeatureToggles } from './PaginatedProjectFeatureToggles/ProjectFeatureToggles';
|
||
import useProjectOverview, {
|
||
useProjectOverviewNameOrId,
|
||
} from 'hooks/api/getters/useProjectOverview/useProjectOverview';
|
||
import { usePageTitle } from 'hooks/usePageTitle';
|
||
import { useLastViewedProject } from 'hooks/useLastViewedProject';
|
||
import { ProjectOverviewChangeRequests } from './ProjectOverviewChangeRequests';
|
||
import { OutdatedSdksBanner } from '../../banners/OutdatedSdksBanner/OutdatedSdksBanner';
|
||
import { useUiFlag } from '../../../hooks/useUiFlag';
|
||
import { ConditionallyRender } from '../../common/ConditionallyRender/ConditionallyRender';
|
||
|
||
const refreshInterval = 15 * 1000;
|
||
|
||
const StyledContainer = styled('div')(({ theme }) => ({
|
||
display: 'flex',
|
||
gap: theme.spacing(2),
|
||
[theme.breakpoints.down('md')]: {
|
||
flexDirection: 'column',
|
||
},
|
||
}));
|
||
|
||
const StyledProjectToggles = styled('div')(() => ({
|
||
width: '100%',
|
||
minWidth: 0,
|
||
}));
|
||
|
||
const StyledContentContainer = styled(Box)(({ theme }) => ({
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: theme.spacing(2),
|
||
width: '100%',
|
||
minWidth: 0,
|
||
}));
|
||
|
||
const ProjectOverview: FC = () => {
|
||
const projectId = useRequiredPathParam('projectId');
|
||
const projectName = useProjectOverviewNameOrId(projectId);
|
||
|
||
const outdatedSdksBannerEnabled = useUiFlag('outdatedSdksBanner');
|
||
|
||
const { project } = useProjectOverview(projectId, {
|
||
refreshInterval,
|
||
});
|
||
|
||
usePageTitle(`Project overview – ${projectName}`);
|
||
const { setLastViewed } = useLastViewedProject();
|
||
useEffect(() => {
|
||
setLastViewed(projectId);
|
||
}, [projectId, setLastViewed]);
|
||
|
||
return (
|
||
<StyledContainer key={projectId}>
|
||
<StyledContentContainer>
|
||
<ProjectOverviewChangeRequests project={projectId} />
|
||
<ConditionallyRender
|
||
condition={outdatedSdksBannerEnabled}
|
||
show={<OutdatedSdksBanner project={projectId} />}
|
||
/>
|
||
|
||
<StyledProjectToggles>
|
||
<ProjectFeatureToggles
|
||
environments={project.environments.map(
|
||
(environment) => environment.environment,
|
||
)}
|
||
/>
|
||
</StyledProjectToggles>
|
||
</StyledContentContainer>
|
||
</StyledContainer>
|
||
);
|
||
};
|
||
|
||
export default ProjectOverview;
|