mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-06 00:07:44 +01:00
3acb3ad2c2
**Upgrade to React v18 for Unleash v6. Here's why I think it's a good time to do it:** - Command Bar project: We've begun work on the command bar project, and there's a fantastic library we want to use. However, it requires React v18 support. - Straightforward Upgrade: I took a look at the upgrade guide https://react.dev/blog/2022/03/08/react-18-upgrade-guide and it seems fairly straightforward. In fact, I was able to get React v18 running with minimal changes in just 10 minutes! - Dropping IE Support: React v18 no longer supports Internet Explorer (IE), which is no longer supported by Microsoft as of June 15, 2022. Upgrading to v18 in v6 would be a good way to align with this change. TS updates: * FC children has to be explicit: https://stackoverflow.com/questions/71788254/react-18-typescript-children-fc * forcing version 18 types in resolutions: https://sentry.io/answers/type-is-not-assignable-to-type-reactnode/ Test updates: * fixing SWR issue that we have always had but it manifests more in new React (https://github.com/vercel/swr/issues/2373) --------- Co-authored-by: kwasniew <kwasniewski.mateusz@gmail.com>
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;
|