Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: event timeline header placement #8234

Merged
merged 7 commits into from
Sep 24, 2024
Merged

chore: event timeline header placement #8234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
783f4de
chore: event timeline tooltips
nunogois Sep 20, 2024
59c8d45
test: fix tests
nunogois Sep 20, 2024
370cb75
chore: revert bold implementation
nunogois Sep 23, 2024
746986c
chore: event timeline header placement
nunogois Sep 24, 2024
f7a5f51
fix: remaining variable after merge
nunogois Sep 24, 2024
d099656
fix: clean up after merge
nunogois Sep 24, 2024
755cc12
chore: proper animation, last touches
nunogois Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 2 additions & 20 deletions frontend/src/component/events/EventLog/EventLog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Switch, FormControlLabel, useMediaQuery, Box } from '@mui/material';
import { Switch, FormControlLabel, useMediaQuery } from '@mui/material';
import EventJson from 'component/events/EventJson/EventJson';
import { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
Expand All @@ -9,13 +9,11 @@ import theme from 'themes/theme';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { styled } from '@mui/system';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useUiFlag } from 'hooks/useUiFlag';
import { EventLogFilters } from './EventLogFilters';
import { useEventLogSearch } from './useEventLogSearch';
import { StickyPaginationBar } from 'component/common/Table/StickyPaginationBar/StickyPaginationBar';
import { EventActions } from './EventActions';
import useLoading from 'hooks/useLoading';
import { EventTimeline } from '../EventTimeline/EventTimeline';

interface IEventLogProps {
title: string;
Expand Down Expand Up @@ -51,8 +49,7 @@ const Placeholder = styled('li')({
});

export const EventLog = ({ title, project, feature }: IEventLogProps) => {
const { isOss, isEnterprise } = useUiConfig();
const eventTimeline = useUiFlag('eventTimeline') && !isOss();
const { isEnterprise } = useUiConfig();
const showFilters = isEnterprise();
const {
events,
Expand Down Expand Up @@ -134,21 +131,6 @@ export const EventLog = ({ title, project, feature }: IEventLogProps) => {

return (
<>
<ConditionallyRender
condition={eventTimeline}
show={
<Box
sx={(theme) => ({
borderRadius: theme.shape.borderRadius,
padding: theme.spacing(2),
marginBottom: theme.spacing(2),
backgroundColor: theme.palette.background.paper,
})}
>
<EventTimeline />
</Box>
}
/>
<PageContent
bodyClass={'no-padding'}
header={
Expand Down
78 changes: 63 additions & 15 deletions frontend/src/component/layout/MainLayout/MainLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { forwardRef, type ReactNode } from 'react';
import { forwardRef, useState, type ReactNode } from 'react';
import { Box, Grid, styled, useMediaQuery, useTheme } from '@mui/material';
import Header from 'component/menu/Header/Header';
import OldHeader from 'component/menu/Header/OldHeader';
Expand All @@ -17,6 +17,8 @@ import { DraftBanner } from './DraftBanner/DraftBanner';
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
import { NavigationSidebar } from './NavigationSidebar/NavigationSidebar';
import { useUiFlag } from 'hooks/useUiFlag';
import { EventTimeline } from 'component/events/EventTimeline/EventTimeline';
import AnimateOnMount from 'component/common/AnimateOnMount/AnimateOnMount';

interface IMainLayoutProps {
children: ReactNode;
Expand Down Expand Up @@ -61,7 +63,6 @@ const OldMainLayoutContent = styled(Grid)(({ theme }) => ({

const NewMainLayoutContent = styled(Grid)(({ theme }) => ({
minWidth: 0, // this is a fix for overflowing flex
width: '100%',
maxWidth: '1512px',
margin: '0 auto',
paddingLeft: theme.spacing(2),
Expand Down Expand Up @@ -106,13 +107,29 @@ const MainLayoutContentContainer = styled('div')(({ theme }) => ({
zIndex: 200,
}));

const timelineAnimations = {
start: {
maxHeight: 0,
overflow: 'hidden',
transition: 'max-height 0.3s ease-in-out',
},
enter: {
maxHeight: '105px',
},
leave: {
maxHeight: 0,
},
};

export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
({ children }, ref) => {
const { uiConfig } = useUiConfig();
const projectId = useOptionalPathParam('projectId');
const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(
projectId || '',
);
const eventTimeline = useUiFlag('eventTimeline');
const [showTimeline, setShowTimeline] = useState(false);

const sidebarNavigationEnabled = useUiFlag('navigationSidebar');
const StyledMainLayoutContent = sidebarNavigationEnabled
Expand All @@ -126,8 +143,18 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
<SkipNavLink />
<ConditionallyRender
condition={sidebarNavigationEnabled}
show={<Header />}
elseShow={<OldHeader />}
show={
<Header
showTimeline={showTimeline}
setShowTimeline={setShowTimeline}
/>
}
elseShow={
<OldHeader
showTimeline={showTimeline}
setShowTimeline={setShowTimeline}
/>
}
/>

<SkipNavTarget />
Expand All @@ -154,18 +181,39 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
show={<NavigationSidebar />}
/>

<StyledMainLayoutContent
item
xs={12}
sm={12}
my={2}
<Box
sx={{
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
minWidth: 0,
}}
>
<MainLayoutContentContainer ref={ref}>
<BreadcrumbNav />
<Proclamation toast={uiConfig.toast} />
{children}
</MainLayoutContentContainer>
</StyledMainLayoutContent>
<AnimateOnMount
mounted={eventTimeline && showTimeline}
start={timelineAnimations.start}
enter={timelineAnimations.enter}
leave={timelineAnimations.leave}
>
<Box
sx={(theme) => ({
padding: theme.spacing(2),
backgroundColor:
theme.palette.background.paper,
})}
>
<EventTimeline />
</Box>
</AnimateOnMount>

<StyledMainLayoutContent>
<MainLayoutContentContainer ref={ref}>
<BreadcrumbNav />
<Proclamation toast={uiConfig.toast} />
{children}
</MainLayoutContentContainer>
</StyledMainLayoutContent>
</Box>
</Box>

<ThemeMode
Expand Down
33 changes: 31 additions & 2 deletions frontend/src/component/menu/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState, type VFC } from 'react';
import { useState } from 'react';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import { Link } from 'react-router-dom';
Expand Down Expand Up @@ -33,6 +33,7 @@ import { useAdminRoutes } from 'component/admin/useAdminRoutes';
import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton';
import { useUiFlag } from 'hooks/useUiFlag';
import { CommandBar } from 'component/commandBar/CommandBar';
import TimelineIcon from '@mui/icons-material/Timeline';

const HeaderComponent = styled(AppBar)(({ theme }) => ({
backgroundColor: theme.palette.background.paper,
Expand Down Expand Up @@ -96,7 +97,12 @@ const StyledIconButton = styled(IconButton)<{
},
}));

const Header: VFC = () => {
interface IHeaderProps {
showTimeline: boolean;
setShowTimeline: (show: boolean) => void;
}

const Header = ({ showTimeline, setShowTimeline }: IHeaderProps) => {
const { onSetThemeMode, themeMode } = useThemeMode();
const theme = useTheme();

Expand All @@ -106,6 +112,7 @@ const Header: VFC = () => {
const [openDrawer, setOpenDrawer] = useState(false);
const toggleDrawer = () => setOpenDrawer((prev) => !prev);
const celebatoryUnleash = useUiFlag('celebrateUnleash');
const eventTimeline = useUiFlag('eventTimeline') && !isOss();

const routes = getRoutes();
const adminRoutes = useAdminRoutes();
Expand Down Expand Up @@ -180,6 +187,28 @@ const Header: VFC = () => {
<StyledNav>
<StyledUserContainer>
<CommandBar />
<ConditionallyRender
condition={eventTimeline}
show={
<Tooltip
title={
showTimeline
? 'Hide timeline'
: 'Show timeline'
}
arrow
>
<StyledIconButton
onClick={() =>
setShowTimeline(!showTimeline)
}
size='large'
>
<TimelineIcon />
</StyledIconButton>
</Tooltip>
}
/>
<InviteLinkButton />
<Tooltip
title={
Expand Down
33 changes: 31 additions & 2 deletions frontend/src/component/menu/Header/OldHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState, type VFC } from 'react';
import { useState } from 'react';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import { Link } from 'react-router-dom';
Expand Down Expand Up @@ -36,6 +36,7 @@ import { Notifications } from 'component/common/Notifications/Notifications';
import { useAdminRoutes } from 'component/admin/useAdminRoutes';
import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton';
import { useUiFlag } from 'hooks/useUiFlag';
import TimelineIcon from '@mui/icons-material/Timeline';

const HeaderComponent = styled(AppBar)(({ theme }) => ({
backgroundColor: theme.palette.background.paper,
Expand Down Expand Up @@ -130,7 +131,12 @@ const StyledIconButton = styled(IconButton)<{
},
}));

const OldHeader: VFC = () => {
interface IOldHeaderProps {
showTimeline: boolean;
setShowTimeline: (show: boolean) => void;
}

const OldHeader = ({ showTimeline, setShowTimeline }: IOldHeaderProps) => {
const { onSetThemeMode, themeMode } = useThemeMode();
const theme = useTheme();
const adminId = useId();
Expand All @@ -146,6 +152,7 @@ const OldHeader: VFC = () => {
const onAdminClose = () => setAdminRef(null);
const onConfigureClose = () => setConfigRef(null);
const celebatoryUnleash = useUiFlag('celebrateUnleash');
const eventTimeline = useUiFlag('eventTimeline') && !isOss();

const routes = getRoutes();
const adminRoutes = useAdminRoutes();
Expand Down Expand Up @@ -245,6 +252,28 @@ const OldHeader: VFC = () => {
/>
</StyledLinks>
<StyledUserContainer>
<ConditionallyRender
condition={eventTimeline}
show={
<Tooltip
title={
showTimeline
? 'Hide timeline'
: 'Show timeline'
}
arrow
>
<StyledIconButton
onClick={() =>
setShowTimeline(!showTimeline)
}
size='large'
>
<TimelineIcon />
</StyledIconButton>
</Tooltip>
}
/>
<InviteLinkButton />
<Tooltip
title={
Expand Down
Loading