chore(1-3349): move selectors to the right when in dashboard

Unleash · Feb 7, 2025 · b4da163 · b4da163
1 parent b4c2077
commit b4da163
Showing 1 changed file with 51 additions and 42 deletions.
diff --git a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
@@ -94,6 +94,27 @@ export const EventTimelineHeader = ({
         />
     );
 
+    const TimeSpanFilter = () => (
+        <StyledFilter
+            select
+            size='small'
+            variant='outlined'
+            value={timeSpan.key}
+            onChange={(e) =>
+                setTimeSpan(
+                    timeSpanOptions.find(({ key }) => key === e.target.value) ||
+                        timeSpanOptions[0],
+                )
+            }
+        >
+            {timeSpanOptions.map(({ key, label }) => (
+                <MenuItem key={key} value={key}>
+                    {label}
+                </MenuItem>
+            ))}
+        </StyledFilter>
+    );
+
     return (
         <>
             <StyledCol>
@@ -102,49 +123,37 @@ export const EventTimelineHeader = ({
                     {totalEvents === 1 ? '' : 's'}
                     <HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' />
                 </StyledTimelineEventsCount>
-                <StyledFilter
-                    select
-                    size='small'
-                    variant='outlined'
-                    value={timeSpan.key}
-                    onChange={(e) =>
-                        setTimeSpan(
-                            timeSpanOptions.find(
-                                ({ key }) => key === e.target.value,
-                            ) || timeSpanOptions[0],
-                        )
-                    }
-                >
-                    {timeSpanOptions.map(({ key, label }) => (
-                        <MenuItem key={key} value={key}>
-                            {label}
-                        </MenuItem>
-                    ))}
-                </StyledFilter>
-                {frontendHeaderRefactor && <EnvironmentFilter />}
+                {!frontendHeaderRefactor && <TimeSpanFilter />}
+            </StyledCol>
+            <StyledCol>
+                {frontendHeaderRefactor ? (
+                    <>
+                        <TimeSpanFilter />
+                        <EnvironmentFilter />
+                    </>
+                ) : (
+                    <>
+                        <EventTimelineHeaderTip />
+                        <EnvironmentFilter />
+                        <Tooltip title='Hide event timeline' arrow>
+                            <IconButton
+                                aria-label='close'
+                                size='small'
+                                onClick={() => {
+                                    trackEvent('event-timeline', {
+                                        props: {
+                                            eventType: 'close',
+                                        },
+                                    });
+                                    setOpen(false);
+                                }}
+                            >
+                                <CloseIcon />
+                            </IconButton>
+                        </Tooltip>
+                    </>
+                )}
             </StyledCol>
-            {!frontendHeaderRefactor && (
-                <StyledCol>
-                    <EventTimelineHeaderTip />
-                    <EnvironmentFilter />
-                    <Tooltip title='Hide event timeline' arrow>
-                        <IconButton
-                            aria-label='close'
-                            size='small'
-                            onClick={() => {
-                                trackEvent('event-timeline', {
-                                    props: {
-                                        eventType: 'close',
-                                    },
-                                });
-                                setOpen(false);
-                            }}
-                        >
-                            <CloseIcon />
-                        </IconButton>
-                    </Tooltip>
-                </StyledCol>
-            )}
         </>
     );
 };