From 5df934c9ced6813c6cfa10cb651c88221f7a85d1 Mon Sep 17 00:00:00 2001 From: Andrey Babushkin <55714097+reyand43@users.noreply.github.com> Date: Wed, 12 Mar 2025 09:21:16 +0100 Subject: [PATCH] fixed sessions layout (#3138) --- frontend/app/components/Login/Login.tsx | 2 +- .../SessionItem/ErrorBars/ErrorBars.tsx | 2 +- .../shared/SessionItem/SessionItem.tsx | 73 +++++++++++-------- .../SessionHeader/SessionHeader.tsx | 17 +++-- .../components/SessionSort/SessionSort.tsx | 14 ++-- .../components/SessionTags/SessionTags.tsx | 69 ++++++------------ frontend/app/layout/Layout.tsx | 2 +- frontend/app/layout/TopHeader.tsx | 2 +- frontend/app/locales/es.json | 2 +- frontend/app/locales/fr.json | 2 +- frontend/app/locales/ru.json | 4 +- frontend/tailwind.config.js | 36 +++++---- 12 files changed, 109 insertions(+), 116 deletions(-) diff --git a/frontend/app/components/Login/Login.tsx b/frontend/app/components/Login/Login.tsx index 02ca638a2..88801611a 100644 --- a/frontend/app/components/Login/Login.tsx +++ b/frontend/app/components/Login/Login.tsx @@ -208,7 +208,7 @@ function Login({ location }: LoginProps) { {t('Login')} -
+
{t('Having trouble logging in?')} {' '} diff --git a/frontend/app/components/shared/SessionItem/ErrorBars/ErrorBars.tsx b/frontend/app/components/shared/SessionItem/ErrorBars/ErrorBars.tsx index aeb0fc69c..b85893e0c 100644 --- a/frontend/app/components/shared/SessionItem/ErrorBars/ErrorBars.tsx +++ b/frontend/app/components/shared/SessionItem/ErrorBars/ErrorBars.tsx @@ -52,7 +52,7 @@ export default function ErrorBars(props: Props) { {/*
*/}
-
{t(state)}
+
{t(state)}
); } diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx index da83876e5..bf2a0356b 100644 --- a/frontend/app/components/shared/SessionItem/SessionItem.tsx +++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx @@ -10,7 +10,7 @@ import { assist as assistRoute, isRoute, liveSession, - sessions as sessionsRoute + sessions as sessionsRoute, } from 'App/routes'; import { capitalize } from 'App/utils'; import { Avatar, CountryFlag, Icon, Label, TextEllipsis } from 'UI'; @@ -76,7 +76,7 @@ interface Props { const PREFETCH_STATE = { none: 0, loading: 1, - fetched: 2 + fetched: 2, }; function SessionItem(props: RouteComponentProps & Props) { @@ -102,7 +102,7 @@ function SessionItem(props: RouteComponentProps & Props) { // location, isDisabled, live: propsLive, - isAdd + isAdd, } = props; const { @@ -128,43 +128,47 @@ function SessionItem(props: RouteComponentProps & Props) { platform, timezone: userTimezone, isCallActive, - agentIds + agentIds, } = session; // Memoize derived values const queryParams = useMemo( () => Object.fromEntries(new URLSearchParams(location.search)), - [location.search] + [location.search], ); const isMobile = platform !== 'web'; - const formattedDuration = useMemo(() => durationFormatted(duration), [duration]); + const formattedDuration = useMemo( + () => durationFormatted(duration), + [duration], + ); const hasUserId = userId || userAnonymousId; const isSessions = useMemo( () => isRoute(SESSIONS_ROUTE, location.pathname), - [location.pathname] + [location.pathname], ); const isAssist = useMemo(() => { return ( (!ignoreAssist && - (isRoute(ASSIST_ROUTE, location.pathname) || - isRoute(ASSIST_LIVE_SESSION, location.pathname) || - location.pathname.includes('multiview'))) || + (isRoute(ASSIST_ROUTE, location.pathname) || + isRoute(ASSIST_LIVE_SESSION, location.pathname) || + location.pathname.includes('multiview'))) || propsLive ); }, [ignoreAssist, location.pathname, propsLive]); const isLastPlayed = lastPlayedSessionId === sessionId; const live = sessionLive || propsLive; - const isMultiviewDisabled = isDisabled && location.pathname.includes('multiview'); + const isMultiviewDisabled = + isDisabled && location.pathname.includes('multiview'); // Memoize metadata list creation const _metaList = useMemo(() => { return Object.keys(metadata).map((key) => ({ label: key, - value: metadata[key] + value: metadata[key], })); }, [metadata]); @@ -193,7 +197,14 @@ function SessionItem(props: RouteComponentProps & Props) { if (!disableUser && !hasUserFilter && hasUserId) { onUserClick(userId, userAnonymousId); } - }, [disableUser, hasUserFilter, hasUserId, onUserClick, userId, userAnonymousId]); + }, [ + disableUser, + hasUserFilter, + hasUserId, + onUserClick, + userId, + userAnonymousId, + ]); const handleAddClick = useCallback(() => { if (!isDisabled && onClick) { @@ -205,11 +216,11 @@ function SessionItem(props: RouteComponentProps & Props) { const formattedTime = useMemo(() => { const timezoneToUse = shownTimezone === 'user' && userTimezone - ? { - label: userTimezone.split('+').join(' +'), - value: userTimezone.split(':')[0] - } - : timezone; + ? { + label: userTimezone.split('+').join(' +'), + value: userTimezone.split(':')[0], + } + : timezone; return formatTimeOrDate(startedAt, timezoneToUse); }, [startedAt, shownTimezone, userTimezone, timezone]); @@ -229,9 +240,9 @@ function SessionItem(props: RouteComponentProps & Props) { startedAt, { label: userTimezone.split('+').join(' +'), - value: userTimezone.split(':')[0] + value: userTimezone.split(':')[0], }, - true + true, )}{' '} {userTimezone} @@ -243,7 +254,9 @@ function SessionItem(props: RouteComponentProps & Props) { return (
@@ -393,7 +406,7 @@ function SessionItem(props: RouteComponentProps & Props) { )}
-
+
)} - {isSessions && ( -
- {isLastPlayed && ( - - )} -
+ {isSessions && isLastPlayed && ( + )} {isAdd ? (
-
+
-
- +
- +
); diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionSort/SessionSort.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionSort/SessionSort.tsx index fe5e9c208..dfd61350a 100644 --- a/frontend/app/components/shared/SessionsTabOverview/components/SessionSort/SessionSort.tsx +++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionSort/SessionSort.tsx @@ -63,12 +63,14 @@ function SessionSort() { const defaultOption = `${sort}-${order}`; return ( - +
+ +
); } diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx index c7e733e3e..d22000d64 100644 --- a/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx +++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx @@ -1,11 +1,13 @@ import { issues_types, types } from 'Types/session/issue'; -import { Segmented } from 'antd'; +import { Grid, Segmented } from 'antd'; import { Angry, CircleAlert, Skull, WifiOff, ChevronDown } from 'lucide-react'; import { observer } from 'mobx-react-lite'; import React, { useState, useEffect, useRef } from 'react'; import { useStore } from 'App/mstore'; import { useTranslation } from 'react-i18next'; +const { useBreakpoint } = Grid; + const tagIcons = { [types.ALL]: undefined, [types.JS_EXCEPTION]: , @@ -17,6 +19,7 @@ const tagIcons = { function SessionTags() { const { t } = useTranslation(); + const screens = useBreakpoint(); const { projectsStore, sessionStore, searchStore } = useStore(); const total = sessionStore.total; const platform = projectsStore.active?.platform || ''; @@ -87,51 +90,25 @@ function SessionTags() { return (
- {isMobile ? ( -
- - - {isDropdownOpen && ( -
- {filteredOptions.map((option) => ( -
handleSelectOption(option.value)} - > - {option.icon && {option.icon}} - {option.label} -
- ))} -
- )} -
- ) : ( - searchStore.toggleTag(value as any)} - size={'small'} - /> - )} + + tag.type !== 'mouse_thrashing' && + (platform === 'web' + ? tag.type !== types.TAP_RAGE + : tag.type !== types.CLICK_RAGE), + ) + .map((tag: any) => ({ + value: tag.type, + icon: tagIcons[tag.type], + label: t(tag.name), + }))} + value={activeTab[0]} + onChange={(value: any) => searchStore.toggleTag(value)} + size="small" + />
); } diff --git a/frontend/app/layout/Layout.tsx b/frontend/app/layout/Layout.tsx index acbc2d035..b6058b5a4 100644 --- a/frontend/app/layout/Layout.tsx +++ b/frontend/app/layout/Layout.tsx @@ -23,7 +23,7 @@ function Layout(props: Props) { useEffect(() => { const handleResize = () => { - const isMobile = window.innerWidth < 1200; + const isMobile = window.innerWidth < 1280; if (isMobile) { setCollapsed(true); } else { diff --git a/frontend/app/layout/TopHeader.tsx b/frontend/app/layout/TopHeader.tsx index 2872fe8d2..07a41bd28 100644 --- a/frontend/app/layout/TopHeader.tsx +++ b/frontend/app/layout/TopHeader.tsx @@ -48,7 +48,7 @@ function TopHeader() { settingsStore.updateMenuCollapsed(!settingsStore.menuCollapsed); }} style={{ paddingTop: '4px' }} - className="cursor-pointer" + className="cursor-pointer xl:block hidden" > { }) module.exports = { - content: [ - './app/**/*.tsx', - './app/**/*.js' - ], + mode: 'jit', + content: ['./app/**/*.tsx', './app/**/*.js'], theme: { colors: { ...defaultColors, - ...colors + ...colors, }, extend: { keyframes: { 'fade-in': { '0%': { - opacity: '0' + opacity: '0', // transform: 'translateY(-10px)' }, '100%': { - opacity: '1' + opacity: '1', // transform: 'translateY(0)' - } + }, }, 'bg-spin': { '0%': { @@ -37,31 +35,31 @@ module.exports = { }, '100%': { backgroundPosition: '0 50%', - } - } + }, + }, }, animation: { 'fade-in': 'fade-in 0.2s ease-out', - 'bg-spin': 'bg-spin 1s ease infinite' + 'bg-spin': 'bg-spin 1s ease infinite', }, colors: { - 'disabled-text': 'rgba(0,0,0, 0.38)' + 'disabled-text': 'rgba(0,0,0, 0.38)', }, boxShadow: { 'border-blue': `0 0 0 1px ${colors['active-blue-border']}`, 'border-main': `0 0 0 1px ${colors['main']}`, - 'border-gray': '0 0 0 1px #999' + 'border-gray': '0 0 0 1px #999', }, button: { - 'background-color': 'red' - } - } + 'background-color': 'red', + }, + }, }, variants: { - visibility: ['responsive', 'hover', 'focus', 'group-hover'] + visibility: ['responsive', 'hover', 'focus', 'group-hover'], }, plugins: [], corePlugins: { - preflight: false - } + preflight: false, + }, };