diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx index e27297b474..c28d9798fb 100644 --- a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx +++ b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx @@ -1,108 +1,19 @@ -import React, { FC, ReactElement, VFC } from 'react'; -import { Box, styled } from '@mui/material'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver'; -import { LastSeenTooltip } from './LastSeenTooltip'; +import React, { VFC } from 'react'; import { IFeatureToggleListItem } from 'interfaces/featureToggle'; -import { ReactComponent as UsageLine } from 'assets/icons/usage-line.svg'; -import { ReactComponent as UsageRate } from 'assets/icons/usage-rate.svg'; -import TimeAgo from 'react-timeago'; -import { useLastSeenColors } from './useLastSeenColors'; - -const StyledContainer = styled('div')(({ theme }) => ({ - display: 'flex', - padding: theme.spacing(1.5), -})); - -const StyledBox = styled(Box)(({ theme }) => ({ - width: '28px', - height: '28px', - background: 'transparent', - borderRadius: `${theme.shape.borderRadius}px`, - textAlign: 'center', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - fontSize: theme.typography.body2.fontSize, - margin: '0 auto', -})); - -const StyledIconWrapper = styled('div')(({ theme }) => ({ - width: '20px', - height: '20px', - background: theme.palette.background.paper, - borderRadius: `${theme.shape.borderRadius}px`, - textAlign: 'center', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - fontSize: theme.typography.body2.fontSize, - margin: '0 auto', -})); +import { FeatureEnvironmentSeen } from 'component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen'; interface IFeatureSeenCellProps { feature: IFeatureToggleListItem; } -const TooltipContainer: FC<{ - color?: string; - tooltip: ReactElement | string; -}> = ({ tooltip, color, children }) => { - return ( - - - - - {children} - - - - - ); -}; - export const FeatureEnvironmentSeenCell: VFC = ({ feature, }) => { - const getColor = useLastSeenColors(); const environments = Object.values(feature.environments); return ( - { - const [color, textColor] = getColor(unit); - return ( - - } - color={color} - > - - - ); - }} - /> - ) - } - elseShow={ - - - - } + ); }; diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx index 136e36f8d0..a21cfe2867 100644 --- a/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx +++ b/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx @@ -1,9 +1,9 @@ import { styled, SxProps, Theme } from '@mui/material'; import TimeAgo from 'react-timeago'; -import { IEnvironments } from 'interfaces/featureToggle'; +import { IEnvironments, IFeatureEnvironment } from 'interfaces/featureToggle'; import React from 'react'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useLastSeenColors } from './useLastSeenColors'; +import { useLastSeenColors } from 'component/feature/FeatureView/FeatureEnvironmentSeen/useLastSeenColors'; const StyledDescription = styled( 'div', @@ -56,7 +56,7 @@ const StyledValue = styled('div', { })); interface ILastSeenTooltipProps { - environments?: IEnvironments[]; + environments?: IEnvironments[] | IFeatureEnvironment[]; className?: string; sx?: SxProps; } @@ -66,7 +66,7 @@ export const LastSeenTooltip = ({ ...rest }: ILastSeenTooltipProps) => { const getColor = useLastSeenColors(); - const [defaultColor] = getColor(); + const [, defaultTextColor] = getColor(); return ( @@ -107,7 +107,7 @@ export const LastSeenTooltip = ({ /> } elseShow={ - + no usage } diff --git a/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx b/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx new file mode 100644 index 0000000000..58fb7d6747 --- /dev/null +++ b/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx @@ -0,0 +1,113 @@ +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import TimeAgo from 'react-timeago'; +import { LastSeenTooltip } from 'component/common/Table/cells/FeatureSeenCell/LastSeenTooltip'; +import React, { FC, ReactElement } from 'react'; +import { IEnvironments, IFeatureEnvironment } from 'interfaces/featureToggle'; +import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver'; +import { Box, styled, SxProps } from '@mui/material'; +import { ReactComponent as UsageLine } from 'assets/icons/usage-line.svg'; +import { ReactComponent as UsageRate } from 'assets/icons/usage-rate.svg'; +import { useLastSeenColors } from './useLastSeenColors'; + +interface IFeatureEnvironmentSeenProps { + featureLastSeen: string | undefined; + environments: IEnvironments[] | IFeatureEnvironment[]; + sx?: SxProps; +} + +const StyledContainer = styled('div')(({ theme }) => ({ + display: 'flex', + padding: theme.spacing(1.5), +})); + +const StyledBox = styled(Box)(({ theme }) => ({ + width: '28px', + height: '28px', + background: 'transparent', + borderRadius: `${theme.shape.borderRadius}px`, + textAlign: 'center', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + fontSize: theme.typography.body2.fontSize, + margin: '0 auto', +})); + +const StyledIconWrapper = styled('div')(({ theme }) => ({ + width: '20px', + height: '20px', + background: theme.palette.background.paper, + borderRadius: `${theme.shape.borderRadius}px`, + textAlign: 'center', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + fontSize: theme.typography.body2.fontSize, + margin: '0 auto', +})); + +const TooltipContainer: FC<{ + color?: string; + tooltip: ReactElement | string; + sx?: SxProps; +}> = ({ sx, tooltip, color, children }) => { + return ( + + + + + {children} + + + + + ); +}; + +export const FeatureEnvironmentSeen = ({ + featureLastSeen, + environments, + sx, +}: IFeatureEnvironmentSeenProps) => { + const getColor = useLastSeenColors(); + return ( + { + const [color, textColor] = getColor(unit); + return ( + + } + color={color} + > + + + ); + }} + /> + ) + } + elseShow={ + + + + } + /> + ); +}; diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/useLastSeenColors.ts b/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/useLastSeenColors.ts similarity index 100% rename from frontend/src/component/common/Table/cells/FeatureSeenCell/useLastSeenColors.ts rename to frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/useLastSeenColors.ts diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/FeatureOverviewSidePanelDetails.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/FeatureOverviewSidePanelDetails.tsx index e8cde78864..85ed4bdda3 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/FeatureOverviewSidePanelDetails.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/FeatureOverviewSidePanelDetails.tsx @@ -3,6 +3,8 @@ import { styled } from '@mui/material'; import { useLocationSettings } from 'hooks/useLocationSettings'; import { formatDateYMD } from 'utils/formatDate'; import { parseISO } from 'date-fns'; +import { FeatureEnvironmentSeen } from '../../../FeatureEnvironmentSeen/FeatureEnvironmentSeen'; +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; const StyledContainer = styled('div')(({ theme }) => ({ display: 'flex', @@ -21,24 +23,49 @@ interface IFeatureOverviewSidePanelDetailsProps { header: React.ReactNode; } +const FlexRow = styled('div')({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', +}); + +const StyledDetail = styled('div')(({ theme }) => ({ + justifyContent: 'center', + paddingTop: theme.spacing(0.75), +})); + export const FeatureOverviewSidePanelDetails = ({ feature, header, }: IFeatureOverviewSidePanelDetailsProps) => { const { locationSettings } = useLocationSettings(); + const { uiConfig } = useUiConfig(); + + const showLastSeenByEnvironment = Boolean( + uiConfig.flags.lastSeenByEnvironment + ); return ( {header} -
- Created at: - - {formatDateYMD( - parseISO(feature.createdAt), - locationSettings.locale - )} - -
+ + + Created at: + + {formatDateYMD( + parseISO(feature.createdAt), + locationSettings.locale + )} + + + {showLastSeenByEnvironment && ( + + )} + ); };