Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

feat: add details section to overview sidepanel (#2489)

Browse Source 
https://linear.app/unleash/issue/2-423/update-feature-toggle-overview-sidepanel
This commit is contained in:
Nuno Góis 2022-11-22 09:27:19 +00:00 committed by GitHub
parent ac16e7e3ba
commit 137d2caaa4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanel.tsx
View File

@ -2,6 +2,7 @@ import { Divider, styled } from '@mui/material';
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { FeatureOverviewSidePanelDetails } from './FeatureOverviewSidePanelDetails/FeatureOverviewSidePanelDetails';
import { FeatureOverviewSidePanelEnvironmentSwitches } from './FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitches';
import { FeatureOverviewSidePanelTags } from './FeatureOverviewSidePanelTags/FeatureOverviewSidePanelTags';
@ -57,6 +58,15 @@ export const FeatureOverviewSidePanel = () => {
feature={feature}
/>
<Divider />
<FeatureOverviewSidePanelDetails
header={
<StyledHeader data-loading>
Feature toggle details
</StyledHeader>
}
feature={feature}
/>
<Divider />
<FeatureOverviewSidePanelTags
header={
<StyledHeader data-loading>

44
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/FeatureOverviewSidePanelDetails.tsx Normal file
View File

@ -0,0 +1,44 @@
import { IFeatureToggle } from 'interfaces/featureToggle';
import { styled } from '@mui/material';
import { useLocationSettings } from 'hooks/useLocationSettings';
import { formatDateYMD } from 'utils/formatDate';
import { parseISO } from 'date-fns';
const StyledContainer = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(3),
fontSize: theme.fontSizes.smallBody,
}));
const StyledLabel = styled('span')(({ theme }) => ({
color: theme.palette.text.secondary,
marginRight: theme.spacing(1),
}));
interface IFeatureOverviewSidePanelDetailsProps {
feature: IFeatureToggle;
header: React.ReactNode;
}
export const FeatureOverviewSidePanelDetails = ({
feature,
header,
}: IFeatureOverviewSidePanelDetailsProps) => {
const { locationSettings } = useLocationSettings();
return (
<StyledContainer>
{header}
<div>
<StyledLabel>Created at:</StyledLabel>
<span>
{formatDateYMD(
parseISO(feature.createdAt),
locationSettings.locale
)}
</span>
</div>
</StyledContainer>
);
};