From cba4bfe05bb5cbd33474bfbadd40c91303a906fb Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Wed, 3 Apr 2024 17:02:43 -0400 Subject: [PATCH 01/26] New Tabs component in UI package --- frontend/src/__generated/index.css | 126 +++++----- .../NetworkResourcePanel.tsx | 6 +- .../components/Tabs/index.tsx | 4 +- .../DevToolsWindowV2/DevToolsWindowV2.tsx | 4 +- frontend/src/pages/Traces/TracePage.tsx | 4 +- packages/ui/.eslintrc.json | 1 + .../ve/components/OldTabs/styles.css.js | 22 ++ .../ve/components/Tabs/styles.css.js | 21 +- .../components/OldTabs/OldTabs.stories.tsx | 25 ++ .../src/components/OldTabs/OldTabs.test.tsx | 18 ++ .../ui/src/components/OldTabs/OldTabs.tsx | 126 ++++++++++ .../ui/src/components/OldTabs/styles.css.ts | 104 ++++++++ packages/ui/src/components/Stack/Stack.tsx | 70 +++--- .../ui/src/components/Tabs/Tabs.stories.tsx | 56 ++++- packages/ui/src/components/Tabs/Tabs.test.tsx | 13 +- packages/ui/src/components/Tabs/Tabs.tsx | 222 +++++++++--------- packages/ui/src/components/Tabs/styles.css.ts | 107 +-------- packages/ui/src/components/index.ts | 2 +- 18 files changed, 578 insertions(+), 353 deletions(-) create mode 100644 packages/ui/src/__generated/ve/components/OldTabs/styles.css.js create mode 100644 packages/ui/src/components/OldTabs/OldTabs.stories.tsx create mode 100644 packages/ui/src/components/OldTabs/OldTabs.test.tsx create mode 100644 packages/ui/src/components/OldTabs/OldTabs.tsx create mode 100644 packages/ui/src/components/OldTabs/styles.css.ts diff --git a/frontend/src/__generated/index.css b/frontend/src/__generated/index.css index 0bf6b464775..305bff90129 100644 --- a/frontend/src/__generated/index.css +++ b/frontend/src/__generated/index.css @@ -5208,6 +5208,69 @@ body { ._1oemo0l3[aria-selected=false] ._1oemo0l4 { background-color: white; } +._1cf2ys60 { + width: 100%; + height: 100%; + position: relative; +} +._1cf2ys61 { + box-shadow: none; +} +._1cf2ys62 { + display: flex; +} +._1cf2ys63 { + height: 20px; + width: 100%; + position: absolute; + top: -10px; +} +._1cf2ys64 { + cursor: grab; +} +._1cf2ys64:active { + cursor: grabbing; +} +._1cf2ys65 { + background-color: #e4e2e4; + height: 1px; + width: 100%; + position: relative; + top: 10px; +} +._1cf2ys66 { + background: none; + border-radius: 0; + border-bottom: none; + box-shadow: none; +} +._1cf2ys66:focus:enabled, +._1cf2ys66:active:enabled, +._1cf2ys66:hover:enabled { + background: none; + box-shadow: none; + border-radius: 0; + color: #6f6e77; +} +._1cf2ys67 { + color: #744ed4; +} +._1cf2ys68 { + color: #6f6e77; +} +._1cf2ys69 { + border-radius: 2px 2px 0px 0px; + height: 2px; +} +._1cf2ys6a { + background-color: #744ed4; +} +._1cf2ys6b { + background-color: var(--_1pyqka91o); +} +._1cf2ys6c { + background-color: #744ed4; +} ._1nph9oi0 { align-items: center; border: none; @@ -5513,69 +5576,6 @@ body { ._13s6meo2:focus { outline: 0; } -._189mxz60 { - width: 100%; - height: 100%; - position: relative; -} -._189mxz61 { - box-shadow: none; -} -._189mxz62 { - display: flex; -} -._189mxz63 { - height: 20px; - width: 100%; - position: absolute; - top: -10px; -} -._189mxz64 { - cursor: grab; -} -._189mxz64:active { - cursor: grabbing; -} -._189mxz65 { - background-color: #e4e2e4; - height: 1px; - width: 100%; - position: relative; - top: 10px; -} -._189mxz66 { - background: none; - border-radius: 0; - border-bottom: none; - box-shadow: none; -} -._189mxz66:focus:enabled, -._189mxz66:active:enabled, -._189mxz66:hover:enabled { - background: none; - box-shadow: none; - border-radius: 0; - color: #6f6e77; -} -._189mxz67 { - color: #744ed4; -} -._189mxz68 { - color: #6f6e77; -} -._189mxz69 { - border-radius: 2px 2px 0px 0px; - height: 2px; -} -._189mxz6a { - background-color: #744ed4; -} -._189mxz6b { - background-color: var(--_1pyqka91o); -} -._189mxz6c { - background-color: #744ed4; -} .hqr510 { color: var(--_1pyqka9l); } diff --git a/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx b/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx index f282ad82832..03452899dbc 100644 --- a/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx +++ b/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx @@ -7,7 +7,7 @@ import { Heading, IconSolidArrowCircleRight, IconSolidX, - Tabs, + OldTabs, Tag, Text, } from '@highlight-run/ui/components' @@ -345,7 +345,7 @@ function NetworkResourceDetails({ - + tab={activeTab} setTab={(tab) => setActiveTab(tab)} pages={pages} @@ -537,7 +537,7 @@ function WebSocketDetails({ - + tab={activeTab} setTab={(tab) => setActiveTab(tab)} pages={{ diff --git a/frontend/src/pages/Player/RightPlayerPanel/components/Tabs/index.tsx b/frontend/src/pages/Player/RightPlayerPanel/components/Tabs/index.tsx index 69e7d04a1ec..72d54219fb9 100644 --- a/frontend/src/pages/Player/RightPlayerPanel/components/Tabs/index.tsx +++ b/frontend/src/pages/Player/RightPlayerPanel/components/Tabs/index.tsx @@ -3,7 +3,7 @@ import { IconSolidFire, IconSolidHashtag, IconSolidSparkles, - Tabs, + OldTabs, } from '@highlight-run/ui/components' import EventStreamV2 from '@pages/Player/components/EventStreamV2/EventStreamV2' import { @@ -30,7 +30,7 @@ const RightPanelTabs = () => { }) return ( - + tab={selectedRightPanelTab} setTab={setSelectedRightPanelTab} pages={{ diff --git a/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx b/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx index 423720fe150..bb99513fbd1 100644 --- a/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx +++ b/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx @@ -7,7 +7,7 @@ import { IconSolidLogs, IconSolidSearch, IconSolidSwitchHorizontal, - Tabs, + OldTabs, Text, } from '@highlight-run/ui/components' import { themeVars } from '@highlight-run/ui/theme' @@ -178,7 +178,7 @@ const DevToolsWindowV2: React.FC< ) : ( - + tab={selectedDevToolsTab} setTab={(t: Tab) => { setSelectedDevToolsTab(t) diff --git a/frontend/src/pages/Traces/TracePage.tsx b/frontend/src/pages/Traces/TracePage.tsx index 5637f8a065b..49e9dfa96f9 100644 --- a/frontend/src/pages/Traces/TracePage.tsx +++ b/frontend/src/pages/Traces/TracePage.tsx @@ -1,4 +1,4 @@ -import { Badge, Box, Callout, Tabs } from '@highlight-run/ui/components' +import { Badge, Box, Callout, OldTabs } from '@highlight-run/ui/components' import React, { useEffect, useState } from 'react' import LoadingBox from '@/components/LoadingBox' @@ -42,7 +42,7 @@ export const TracePage: React.FC = () => { - + tab={activeTab} setTab={(tab) => setActiveTab(tab)} containerClass={styles.tabs} diff --git a/packages/ui/.eslintrc.json b/packages/ui/.eslintrc.json index d51980e7d9c..52ff1f40057 100644 --- a/packages/ui/.eslintrc.json +++ b/packages/ui/.eslintrc.json @@ -25,6 +25,7 @@ ], "ignorePatterns": ["src/__generated/*"], "rules": { + "@typescript-eslint/no-non-null-assertion": "off", "react/display-name": "off", "react/react-in-jsx-scope": "off", "simple-import-sort/imports": "error", diff --git a/packages/ui/src/__generated/ve/components/OldTabs/styles.css.js b/packages/ui/src/__generated/ve/components/OldTabs/styles.css.js new file mode 100644 index 00000000000..cee800f44d8 --- /dev/null +++ b/packages/ui/src/__generated/ve/components/OldTabs/styles.css.js @@ -0,0 +1,22 @@ +// ../packages/ui/src/components/OldTabs/styles.css.ts +import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn"; +var GRAB_HANDLE_HEIGHT = 20; +var controlBarBottomVariants = _7a468({ defaultClassName: "_1cf2ys69", variantClassNames: { selected: { true: "_1cf2ys6a" }, hovered: { true: "_1cf2ys6b" } }, defaultVariants: {}, compoundVariants: [[{ hovered: true, selected: true }, "_1cf2ys6c"]] }); +var controlBarButton = "_1cf2ys61"; +var controlBarVariants = _7a468({ defaultClassName: "_1cf2ys66", variantClassNames: { selected: { true: "_1cf2ys67", false: "_1cf2ys68" } }, defaultVariants: { selected: false }, compoundVariants: [] }); +var grabbable = "_1cf2ys64"; +var handle = "_1cf2ys63"; +var handleLine = "_1cf2ys65"; +var pageWrapper = "_1cf2ys60"; +var tabText = "_1cf2ys62"; +export { + GRAB_HANDLE_HEIGHT, + controlBarBottomVariants, + controlBarButton, + controlBarVariants, + grabbable, + handle, + handleLine, + pageWrapper, + tabText +}; diff --git a/packages/ui/src/__generated/ve/components/Tabs/styles.css.js b/packages/ui/src/__generated/ve/components/Tabs/styles.css.js index fa776f810e5..375f3cc644c 100644 --- a/packages/ui/src/__generated/ve/components/Tabs/styles.css.js +++ b/packages/ui/src/__generated/ve/components/Tabs/styles.css.js @@ -1,22 +1,5 @@ // ../packages/ui/src/components/Tabs/styles.css.ts -import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn"; -var GRAB_HANDLE_HEIGHT = 20; -var controlBarBottomVariants = _7a468({ defaultClassName: "_189mxz69", variantClassNames: { selected: { true: "_189mxz6a" }, hovered: { true: "_189mxz6b" } }, defaultVariants: {}, compoundVariants: [[{ hovered: true, selected: true }, "_189mxz6c"]] }); -var controlBarButton = "_189mxz61"; -var controlBarVariants = _7a468({ defaultClassName: "_189mxz66", variantClassNames: { selected: { true: "_189mxz67", false: "_189mxz68" } }, defaultVariants: { selected: false }, compoundVariants: [] }); -var grabbable = "_189mxz64"; -var handle = "_189mxz63"; -var handleLine = "_189mxz65"; -var pageWrapper = "_189mxz60"; -var tabText = "_189mxz62"; +var tabList = "_189mxz60"; export { - GRAB_HANDLE_HEIGHT, - controlBarBottomVariants, - controlBarButton, - controlBarVariants, - grabbable, - handle, - handleLine, - pageWrapper, - tabText + tabList }; diff --git a/packages/ui/src/components/OldTabs/OldTabs.stories.tsx b/packages/ui/src/components/OldTabs/OldTabs.stories.tsx new file mode 100644 index 00000000000..5b8e90c1e43 --- /dev/null +++ b/packages/ui/src/components/OldTabs/OldTabs.stories.tsx @@ -0,0 +1,25 @@ +import { Meta } from '@storybook/react' +import { useState } from 'react' + +import { OldTabs } from './OldTabs' + +export default { + title: 'Components/OldTabs', + component: OldTabs, +} as Meta + +export const Basic = () => { + const [tab, setTab] = useState('hello') + + return ( + Hi }, + there: { page:
there!
}, + world: { page:
Hello! 👋
}, + }} + /> + ) +} diff --git a/packages/ui/src/components/OldTabs/OldTabs.test.tsx b/packages/ui/src/components/OldTabs/OldTabs.test.tsx new file mode 100644 index 00000000000..051060bb7f6 --- /dev/null +++ b/packages/ui/src/components/OldTabs/OldTabs.test.tsx @@ -0,0 +1,18 @@ +import { render, screen } from '@testing-library/react' + +import { OldTabs } from './OldTabs' + +describe('OldTabs', () => { + it('exists', async () => { + render( + Test } }} + tab="foo" + setTab={(t) => { + console.log('tab', t) + }} + />, + ) + await screen.findByText('Test') + }) +}) diff --git a/packages/ui/src/components/OldTabs/OldTabs.tsx b/packages/ui/src/components/OldTabs/OldTabs.tsx new file mode 100644 index 00000000000..9035a633b27 --- /dev/null +++ b/packages/ui/src/components/OldTabs/OldTabs.tsx @@ -0,0 +1,126 @@ +import React from 'react' + +import { Box } from '../Box/Box' +import { Button } from '../Button/Button' +import { Text } from '../Text/Text' +import * as styles from './styles.css' + +export interface Page { + page: React.ReactNode + icon?: React.ReactElement + badge?: React.ReactNode +} + +type Props = { + pages: { + [k: string]: Page + } + tab: T + right?: React.ReactNode + setTab: (tab: T) => void + handleRef?: (ref: HTMLElement | null) => void + + // These props have been added to override defaults that prevent us from + // implementing the UX as designed. They are temporary and will be removed + // when we rebuild tabs: https://github.com/highlight/highlight/issues/5771 + noHandle?: boolean + containerClass?: string + tabsContainerClass?: string + pageContainerClass?: string +} + +export const OldTabs = function ({ + pages, + tab, + right, + containerClass, + tabsContainerClass, + pageContainerClass, + noHandle = false, + setTab, + handleRef, +}: Props) { + const [hoveredTab, setHoveredTab] = React.useState() + const currentPage = pages[tab] + + return ( + + + + {Object.keys(pages).map((t) => ( + setHoveredTab(t)} + onMouseLeave={() => setHoveredTab(undefined)} + onClick={() => { + setTab(t as T) + }} + > + + + + ))} + + {right} + + {currentPage && ( + + {pages[tab].page} + {!noHandle && ( + + + + )} + + )} + + ) +} diff --git a/packages/ui/src/components/OldTabs/styles.css.ts b/packages/ui/src/components/OldTabs/styles.css.ts new file mode 100644 index 00000000000..a54d2b30b81 --- /dev/null +++ b/packages/ui/src/components/OldTabs/styles.css.ts @@ -0,0 +1,104 @@ +import { style } from '@vanilla-extract/css' +import { recipe } from '@vanilla-extract/recipes' + +import { colors } from '../../css/colors' +import { themeVars } from '../../css/theme.css' + +export const GRAB_HANDLE_HEIGHT = 20 + +export const pageWrapper = style({ + width: '100%', + height: '100%', + position: 'relative', +}) + +export const controlBarButton = style({ + boxShadow: 'none', +}) + +export const tabText = style({ + display: 'flex', +}) + +export const handle = style({ + height: GRAB_HANDLE_HEIGHT, + width: '100%', + position: 'absolute', + top: -GRAB_HANDLE_HEIGHT / 2, +}) + +export const grabbable = style({ + cursor: 'grab', + selectors: { + '&:active': { + cursor: 'grabbing', + }, + }, +}) + +export const handleLine = style({ + backgroundColor: colors.n6, + height: 1, + width: '100%', + position: 'relative', + top: GRAB_HANDLE_HEIGHT / 2, +}) + +export const controlBarVariants = recipe({ + base: { + background: 'none', + borderRadius: 0, + borderBottom: `none`, + boxShadow: 'none', + selectors: { + '&:focus:enabled, &:active:enabled, &:hover:enabled': { + background: 'none', + boxShadow: 'none', + borderRadius: 0, + color: colors.n11, + }, + }, + }, + variants: { + selected: { + true: { + color: colors.p9, + }, + false: { + color: colors.n11, + }, + }, + }, + + defaultVariants: { + selected: false, + }, +}) + +export const controlBarBottomVariants = recipe({ + base: { + borderRadius: '2px 2px 0px 0px', + height: 2, + }, + variants: { + selected: { + true: { + backgroundColor: colors.p9, + }, + }, + hovered: { + true: { + backgroundColor: + themeVars.interactive.outline.secondary.enabled, + }, + }, + }, + compoundVariants: [ + { + variants: { hovered: true, selected: true }, + style: { + backgroundColor: colors.p9, + }, + }, + ], +}) diff --git a/packages/ui/src/components/Stack/Stack.tsx b/packages/ui/src/components/Stack/Stack.tsx index 7e4ed9061ea..480cf505058 100644 --- a/packages/ui/src/components/Stack/Stack.tsx +++ b/packages/ui/src/components/Stack/Stack.tsx @@ -13,39 +13,45 @@ type Props = React.PropsWithChildren & { cssClass?: BoxProps['cssClass'] } & BoxProps -export const Stack: React.FC = ({ - as, - align, - children, - direction, - flex, - gap, - justify, - wrap, - width, - ...props -}) => { - if (typeof wrap === 'boolean') { - wrap = wrap ? 'wrap' : undefined - } +export const Stack: React.FC = React.forwardRef( + ( + { + as, + align, + children, + direction, + flex, + gap, + justify, + wrap, + width, + ...props + }, + ref, + ) => { + if (typeof wrap === 'boolean') { + wrap = wrap ? 'wrap' : undefined + } - return ( - - {children} - - ) -} + return ( + + {children} + + ) + }, +) Stack.defaultProps = { as: 'div', diff --git a/packages/ui/src/components/Tabs/Tabs.stories.tsx b/packages/ui/src/components/Tabs/Tabs.stories.tsx index 46896634a0f..a51a2438afc 100644 --- a/packages/ui/src/components/Tabs/Tabs.stories.tsx +++ b/packages/ui/src/components/Tabs/Tabs.stories.tsx @@ -1,6 +1,9 @@ import { Meta } from '@storybook/react' -import { useState } from 'react' +import { Stack } from '@/components/Stack/Stack' + +import { Box } from '../Box/Box' +import { IconSolidAcademicCap, IconSolidBeaker } from '../icons' import { Tabs } from './Tabs' export default { @@ -8,18 +11,47 @@ export default { component: Tabs, } as Meta -export const Basic = () => { - const [tab, setTab] = useState('hello') +export const Basic = () => ( + + + + Tab 1 + }> + Tab 2 + + + Tab 3 + + } badgeText="14"> + Tab 4 + + + + Panel 1 + + + Panel 2 + + + Panel 3 + + + Panel 4 + + + +) +const TabContent: React.FC = ({ children }) => { return ( - Hi }, - there: { page:
there!
}, - world: { page:
Hello! 👋
}, - }} - /> + + {children} + ) } diff --git a/packages/ui/src/components/Tabs/Tabs.test.tsx b/packages/ui/src/components/Tabs/Tabs.test.tsx index 65dbbe0bdb1..86d2b3a337f 100644 --- a/packages/ui/src/components/Tabs/Tabs.test.tsx +++ b/packages/ui/src/components/Tabs/Tabs.test.tsx @@ -4,15 +4,8 @@ import { Tabs } from './Tabs' describe('Tabs', () => { it('exists', async () => { - render( - Test } }} - tab="foo" - setTab={(t) => { - console.log('tab', t) - }} - />, - ) - await screen.findByText('Test') + render(Testing) + + await screen.findByText('Testing') }) }) diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx index b1c36f74a58..4af8afa2e35 100644 --- a/packages/ui/src/components/Tabs/Tabs.tsx +++ b/packages/ui/src/components/Tabs/Tabs.tsx @@ -1,126 +1,136 @@ -import React from 'react' +import * as Ariakit from '@ariakit/react' +import { useState } from 'react' + +import { Badge } from '@/components/Badge/Badge' +import { Stack } from '@/components/Stack/Stack' -import { Button } from '../../components/Button/Button' -import { Text } from '../../components/Text/Text' import { Box } from '../Box/Box' -import * as styles from './styles.css' +import { Props as TagProps, Tag } from '../Tag/Tag' + +type Props = React.PropsWithChildren & { + defaultSelectedId?: Ariakit.TabProviderProps['defaultSelectedId'] +} -export interface Page { - page: React.ReactNode - icon?: React.ReactElement - badge?: React.ReactNode +type TabsComponent = React.FC & { + Tab: typeof Tab + List: typeof TabList + Panel: typeof TabPanel +} + +export const Tabs: TabsComponent = ({ children, defaultSelectedId }) => { + return ( + + + {children} + + + ) } -type Props = { - pages: { - [k: string]: Page - } - tab: T - right?: React.ReactNode - setTab: (tab: T) => void - handleRef?: (ref: HTMLElement | null) => void +type TabListProps = React.PropsWithChildren + +const TabList: React.FC = ({ children, ...props }) => { + return ( + + {children} + + } + /> + ) +} - // These props have been added to override defaults that prevent us from - // implementing the UX as designed. They are temporary and will be removed - // when we rebuild tabs: https://github.com/highlight/highlight/issues/5771 - noHandle?: boolean - containerClass?: string - tabsContainerClass?: string - pageContainerClass?: string +type TabProps = Ariakit.TabProps & { + children: string + id: string + badgeText?: string + icon?: TagProps['icon'] } -export const Tabs = function ({ - pages, - tab, - right, - containerClass, - tabsContainerClass, - pageContainerClass, - noHandle = false, - setTab, - handleRef, -}: Props) { - const [hoveredTab, setHoveredTab] = React.useState() - const currentPage = pages[tab] +const Tab: React.FC = ({ badgeText, children, icon, ...props }) => { + const tabContext = Ariakit.useTabContext()! + const selected = tabContext.useState('selectedId') === props.id + const [hovered, setHovered] = useState(false) + const showBorder = hovered || selected return ( - - + setHovered(true)} + onMouseLeave={() => setHovered(false)} > - {Object.keys(pages).map((t) => ( + + {children} + + + {badgeText && ( + + )} + + {showBorder && ( setHoveredTab(t)} - onMouseLeave={() => setHoveredTab(undefined)} - onClick={() => { - setTab(t as T) + position="absolute" + backgroundColor={selected ? 'p9' : 'n7'} + borderTopLeftRadius="2" + borderTopRightRadius="2" + width="full" + style={{ + height: 2, + bottom: 0, + left: 0, + right: 0, + width: '100%', }} - > - - - - ))} - - {right} - - {currentPage && ( - - {pages[tab].page} - {!noHandle && ( - - - + /> )} - )} - + } + /> ) } + +type TabPanelProps = React.PropsWithChildren + +const TabPanel: React.FC = ({ children, ...props }) => { + return ( + + {children} + + } + /> + ) +} + +Tabs.Tab = Tab +Tabs.List = TabList +Tabs.Panel = TabPanel diff --git a/packages/ui/src/components/Tabs/styles.css.ts b/packages/ui/src/components/Tabs/styles.css.ts index a54d2b30b81..a3c54d46f91 100644 --- a/packages/ui/src/components/Tabs/styles.css.ts +++ b/packages/ui/src/components/Tabs/styles.css.ts @@ -1,104 +1,9 @@ import { style } from '@vanilla-extract/css' -import { recipe } from '@vanilla-extract/recipes' -import { colors } from '../../css/colors' -import { themeVars } from '../../css/theme.css' - -export const GRAB_HANDLE_HEIGHT = 20 - -export const pageWrapper = style({ - width: '100%', - height: '100%', - position: 'relative', -}) - -export const controlBarButton = style({ - boxShadow: 'none', -}) - -export const tabText = style({ - display: 'flex', -}) - -export const handle = style({ - height: GRAB_HANDLE_HEIGHT, - width: '100%', - position: 'absolute', - top: -GRAB_HANDLE_HEIGHT / 2, -}) - -export const grabbable = style({ - cursor: 'grab', - selectors: { - '&:active': { - cursor: 'grabbing', - }, - }, -}) - -export const handleLine = style({ - backgroundColor: colors.n6, - height: 1, - width: '100%', - position: 'relative', - top: GRAB_HANDLE_HEIGHT / 2, -}) - -export const controlBarVariants = recipe({ - base: { - background: 'none', - borderRadius: 0, - borderBottom: `none`, - boxShadow: 'none', - selectors: { - '&:focus:enabled, &:active:enabled, &:hover:enabled': { - background: 'none', - boxShadow: 'none', - borderRadius: 0, - color: colors.n11, - }, - }, - }, - variants: { - selected: { - true: { - color: colors.p9, - }, - false: { - color: colors.n11, - }, - }, - }, - - defaultVariants: { - selected: false, - }, -}) - -export const controlBarBottomVariants = recipe({ - base: { - borderRadius: '2px 2px 0px 0px', - height: 2, - }, - variants: { - selected: { - true: { - backgroundColor: colors.p9, - }, - }, - hovered: { - true: { - backgroundColor: - themeVars.interactive.outline.secondary.enabled, - }, - }, - }, - compoundVariants: [ - { - variants: { hovered: true, selected: true }, - style: { - backgroundColor: colors.p9, - }, - }, - ], +export const tabList = style({ + alignItems: 'center', + borderBottom: 'dividerWeak', + flexDirection: 'row', + flexGrow: 1, + gap: '16', }) diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index a36fa9cf387..37b0b0ff1b5 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -23,11 +23,11 @@ export * from './icons' export { Menu } from './Menu/Menu' export { MenuButton } from './MenuButton/MenuButton' export { MultiSelectButton } from './MultiSelectButton/MultiSelectButton' +export { OldTabs as OldTabs } from './OldTabs/OldTabs' export { Popover } from './Popover/Popover' export { Stack } from './Stack/Stack' export { SwitchButton } from './SwitchButton/SwitchButton' export { Table } from './Table/Table' -export { Tabs } from './Tabs/Tabs' export { Tag } from './Tag/Tag' export { sMonotype, typographyStyles } from './Text/styles.css' export { Text } from './Text/Text' From 996f07e3bc2072512e50355e7289b887710bc1c4 Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Wed, 3 Apr 2024 17:29:22 -0400 Subject: [PATCH 02/26] Use new tabs in dev tools --- frontend/src/__generated/index.css | 24 ++-- .../DevToolsWindowV2/DevToolsWindowV2.tsx | 129 +++++++++++------- packages/ui/src/components/Tabs/Tabs.tsx | 22 ++- packages/ui/src/components/Tabs/styles.css.ts | 9 -- packages/ui/src/components/index.ts | 1 + 5 files changed, 115 insertions(+), 70 deletions(-) delete mode 100644 packages/ui/src/components/Tabs/styles.css.ts diff --git a/frontend/src/__generated/index.css b/frontend/src/__generated/index.css index 305bff90129..b1e30c31d53 100644 --- a/frontend/src/__generated/index.css +++ b/frontend/src/__generated/index.css @@ -7325,18 +7325,6 @@ body { height: 100%; overflow-y: hidden; } -.izessr0 { - padding-left: 8px; - height: 100%; -} -.izessr1:focus, -.izessr1:active, -.izessr1:hover { - background-color: #e9e8ea; -} -.izessr3 { - background-color: #eeedef; -} ._1p577ua0 { font-size: 13px; height: 100%; @@ -7368,6 +7356,18 @@ body { -webkit-line-clamp: 1; line-clamp: 1; } +.izessr0 { + padding-left: 8px; + height: 100%; +} +.izessr1:focus, +.izessr1:active, +.izessr1:hover { + background-color: #e9e8ea; +} +.izessr3 { + background-color: #eeedef; +} ._1eq64x70 { align-items: center; background-color: #ffffff; diff --git a/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx b/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx index bb99513fbd1..a0b5ab01c88 100644 --- a/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx +++ b/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx @@ -7,7 +7,7 @@ import { IconSolidLogs, IconSolidSearch, IconSolidSwitchHorizontal, - OldTabs, + Tabs, Text, } from '@highlight-run/ui/components' import { themeVars } from '@highlight-run/ui/theme' @@ -16,7 +16,6 @@ import { usePlayerUIContext } from '@pages/Player/context/PlayerUIContext' import usePlayerConfiguration from '@pages/Player/PlayerHook/utils/usePlayerConfiguration' import { useReplayerContext } from '@pages/Player/ReplayerContext' import { useResourcesContext } from '@pages/Player/ResourcesContext/ResourcesContext' -import { NetworkPage } from '@pages/Player/Toolbar/DevToolsWindowV2/NetworkPage/NetworkPage' import { DEV_TOOLS_MIN_HEIGHT, ResizePanel, @@ -34,14 +33,15 @@ import React from 'react' import { useRelatedResource } from '@/components/RelatedResources/hooks' import { buildSessionParams } from '@/pages/LogsPage/utils' import { useLinkLogCursor } from '@/pages/Player/PlayerHook/utils' +import ErrorsPage from '@/pages/Player/Toolbar/DevToolsWindowV2/ErrorsPage/ErrorsPage' +import { LogLevelFilter } from '@/pages/Player/Toolbar/DevToolsWindowV2/LogLevelFilter/LogLevelFilter' import { LogSourceFilter } from '@/pages/Player/Toolbar/DevToolsWindowV2/LogSourceFilter/LogSourceFilter' +import { NetworkPage } from '@/pages/Player/Toolbar/DevToolsWindowV2/NetworkPage/NetworkPage' +import { RequestStatusFilter } from '@/pages/Player/Toolbar/DevToolsWindowV2/RequestStatusFilter/RequestStatusFilter' +import { RequestTypeFilter } from '@/pages/Player/Toolbar/DevToolsWindowV2/RequestTypeFilter/RequestTypeFilter' import { styledVerticalScrollbar } from '@/style/common.css' import { ConsolePage } from './ConsolePage/ConsolePage' -import ErrorsPage from './ErrorsPage/ErrorsPage' -import { LogLevelFilter } from './LogLevelFilter/LogLevelFilter' -import { RequestStatusFilter } from './RequestStatusFilter/RequestStatusFilter' -import { RequestTypeFilter } from './RequestTypeFilter/RequestTypeFilter' import * as styles from './style.css' const DevToolsWindowV2: React.FC< @@ -178,46 +178,58 @@ const DevToolsWindowV2: React.FC< ) : ( - - tab={selectedDevToolsTab} - setTab={(t: Tab) => { - setSelectedDevToolsTab(t) + // + // tab={selectedDevToolsTab} + // setTab={(t: Tab) => { + // setSelectedDevToolsTab(t) + // formStore.reset() + // }} + // pages={{ + // [Tab.Console]: { + // page: ( + // + // ), + // }, + // [Tab.Errors]: { + // page: ( + // + // ), + // }, + // [Tab.Network]: { + // page: ( + // + // ), + // }, + // }} + // right={} + // /> + { + setSelectedDevToolsTab(id as Tab) formStore.reset() }} - pages={{ - [Tab.Console]: { - page: ( - - ), - }, - [Tab.Errors]: { - page: ( - - ), - }, - [Tab.Network]: { - page: ( - - ), - }, - }} - right={ + > + + Console + Errors + Network + - } - /> + + + + + + + + + + + )} )} diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx index 4af8afa2e35..833654698d8 100644 --- a/packages/ui/src/components/Tabs/Tabs.tsx +++ b/packages/ui/src/components/Tabs/Tabs.tsx @@ -9,6 +9,7 @@ import { Props as TagProps, Tag } from '../Tag/Tag' type Props = React.PropsWithChildren & { defaultSelectedId?: Ariakit.TabProviderProps['defaultSelectedId'] + onChange?: Ariakit.TabStoreProps['setSelectedId'] } type TabsComponent = React.FC & { @@ -17,10 +18,25 @@ type TabsComponent = React.FC & { Panel: typeof TabPanel } -export const Tabs: TabsComponent = ({ children, defaultSelectedId }) => { +export const Tabs: TabsComponent = ({ + children, + defaultSelectedId, + onChange, +}) => { + const tabsStore = Ariakit.useTabStore({ + setSelectedId: (id) => { + if (onChange) { + onChange(id) + } + }, + }) + return ( - - + + {children} diff --git a/packages/ui/src/components/Tabs/styles.css.ts b/packages/ui/src/components/Tabs/styles.css.ts deleted file mode 100644 index a3c54d46f91..00000000000 --- a/packages/ui/src/components/Tabs/styles.css.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { style } from '@vanilla-extract/css' - -export const tabList = style({ - alignItems: 'center', - borderBottom: 'dividerWeak', - flexDirection: 'row', - flexGrow: 1, - gap: '16', -}) diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 37b0b0ff1b5..cd9daa08264 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -28,6 +28,7 @@ export { Popover } from './Popover/Popover' export { Stack } from './Stack/Stack' export { SwitchButton } from './SwitchButton/SwitchButton' export { Table } from './Table/Table' +export { Tabs } from './Tabs/Tabs' export { Tag } from './Tag/Tag' export { sMonotype, typographyStyles } from './Text/styles.css' export { Text } from './Text/Text' From 626b355f98a756d404652f81c3c737ebf81b55a4 Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Wed, 3 Apr 2024 17:30:40 -0400 Subject: [PATCH 03/26] Fix imports --- packages/ui/src/components/Tabs/Tabs.stories.tsx | 3 +-- packages/ui/src/components/Tabs/Tabs.tsx | 5 ++--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/ui/src/components/Tabs/Tabs.stories.tsx b/packages/ui/src/components/Tabs/Tabs.stories.tsx index a51a2438afc..6bf20f8c766 100644 --- a/packages/ui/src/components/Tabs/Tabs.stories.tsx +++ b/packages/ui/src/components/Tabs/Tabs.stories.tsx @@ -1,9 +1,8 @@ import { Meta } from '@storybook/react' -import { Stack } from '@/components/Stack/Stack' - import { Box } from '../Box/Box' import { IconSolidAcademicCap, IconSolidBeaker } from '../icons' +import { Stack } from '../Stack/Stack' import { Tabs } from './Tabs' export default { diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx index 833654698d8..448d0a85a28 100644 --- a/packages/ui/src/components/Tabs/Tabs.tsx +++ b/packages/ui/src/components/Tabs/Tabs.tsx @@ -1,10 +1,9 @@ import * as Ariakit from '@ariakit/react' import { useState } from 'react' -import { Badge } from '@/components/Badge/Badge' -import { Stack } from '@/components/Stack/Stack' - +import { Badge } from '../Badge/Badge' import { Box } from '../Box/Box' +import { Stack } from '../Stack/Stack' import { Props as TagProps, Tag } from '../Tag/Tag' type Props = React.PropsWithChildren & { From 0797504d2ba1105e837bdc30cbdf734619ba748d Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Wed, 3 Apr 2024 17:33:19 -0400 Subject: [PATCH 04/26] Update DevToolsWindowV2.tsx --- .../pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx b/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx index a0b5ab01c88..d1d28ee7e6f 100644 --- a/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx +++ b/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx @@ -232,9 +232,10 @@ const DevToolsWindowV2: React.FC< Date: Wed, 3 Apr 2024 17:36:21 -0400 Subject: [PATCH 05/26] Add padding --- .../Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx | 2 +- packages/ui/src/components/Tabs/Tabs.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx b/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx index d1d28ee7e6f..4f29c11b1f4 100644 --- a/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx +++ b/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx @@ -225,7 +225,7 @@ const DevToolsWindowV2: React.FC< formStore.reset() }} > - + Console Errors Network diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx index 448d0a85a28..66132326227 100644 --- a/packages/ui/src/components/Tabs/Tabs.tsx +++ b/packages/ui/src/components/Tabs/Tabs.tsx @@ -2,7 +2,7 @@ import * as Ariakit from '@ariakit/react' import { useState } from 'react' import { Badge } from '../Badge/Badge' -import { Box } from '../Box/Box' +import { Box, PaddingProps } from '../Box/Box' import { Stack } from '../Stack/Stack' import { Props as TagProps, Tag } from '../Tag/Tag' @@ -42,7 +42,9 @@ export const Tabs: TabsComponent = ({ ) } -type TabListProps = React.PropsWithChildren +type TabListProps = React.PropsWithChildren & + Ariakit.TabListProps & + PaddingProps const TabList: React.FC = ({ children, ...props }) => { return ( From ba83360946ad55a1e8e50859497beb43699f8f3b Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Wed, 3 Apr 2024 17:38:30 -0400 Subject: [PATCH 06/26] Update DevToolsWindowV2.tsx --- .../Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx b/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx index 4f29c11b1f4..a729abc4de2 100644 --- a/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx +++ b/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx @@ -226,7 +226,9 @@ const DevToolsWindowV2: React.FC< }} > - Console + + Console Logs + Errors Network From 99e3255c91ffd899887c162db80338d19c5648b7 Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 07:23:10 -0400 Subject: [PATCH 07/26] Update tabs on network resource panels --- frontend/src/graph/generated/schemas.tsx | 1 + .../NetworkResourcePanel.tsx | 129 +++++++++++------- packages/ui/src/components/Tabs/Tabs.tsx | 3 + 3 files changed, 84 insertions(+), 49 deletions(-) diff --git a/frontend/src/graph/generated/schemas.tsx b/frontend/src/graph/generated/schemas.tsx index ce25207a99a..d5da503cb27 100644 --- a/frontend/src/graph/generated/schemas.tsx +++ b/frontend/src/graph/generated/schemas.tsx @@ -961,6 +961,7 @@ export type Metric = { export enum MetricAggregator { Avg = 'Avg', Count = 'Count', + CountDistinct = 'CountDistinct', CountDistinctKey = 'CountDistinctKey', Max = 'Max', Min = 'Min', diff --git a/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx b/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx index 03452899dbc..f85f38ca5ad 100644 --- a/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx +++ b/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx @@ -7,7 +7,7 @@ import { Heading, IconSolidArrowCircleRight, IconSolidX, - OldTabs, + Tabs, Tag, Text, } from '@highlight-run/ui/components' @@ -33,8 +33,6 @@ import { useWebSocket } from '@/pages/Player/WebSocketContext/WebSocketContext' import { useSessionParams } from '@/pages/Sessions/utils' import { TraceProvider } from '@/pages/Traces/TraceProvider' -import * as styles from './NetworkResourcePanel.css' - enum NetworkRequestTabs { Info = 'Info', Errors = 'Errors', @@ -196,41 +194,6 @@ function NetworkResourceDetails({ : new Date(resource.startTime).getTime() }, [resource.startTime, resource.startTimeAbs, startTime]) - const pages = useMemo(() => { - const tabPages: any = { - [NetworkRequestTabs.Info]: { - page: ( - - ), - }, - [NetworkRequestTabs.Errors]: { - page: , - }, - [NetworkRequestTabs.Logs]: { - page: ( - - ), - }, - } - - if (isNetworkRequest) { - tabPages[NetworkRequestTabs.Trace] = { - page: , - } - } - - return tabPages - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isNetworkRequest, resource.id]) - useHotkeys( 'h', () => { @@ -345,15 +308,54 @@ function NetworkResourceDetails({ - - tab={activeTab} - setTab={(tab) => setActiveTab(tab)} - pages={pages} - noHandle - containerClass={styles.container} - tabsContainerClass={styles.tabsContainer} - pageContainerClass={styles.pageContainer} - /> + { + setActiveTab(id as NetworkRequestTabs) + }} + > + + + Info + + + Errors + + + Logs + + {isNetworkRequest && ( + + Trace + + )} + + + + + + + + + + + {isNetworkRequest && ( + + + + )} + ) } @@ -537,7 +539,7 @@ function WebSocketDetails({ - + {/* tab={activeTab} setTab={(tab) => setActiveTab(tab)} pages={{ @@ -565,7 +567,36 @@ function WebSocketDetails({ noHandle tabsContainerClass={styles.tabsContainer} pageContainerClass={styles.pageContainer} - /> + /> */} + + setActiveTab(id as WebSocketTabs)} + > + + + Headers + + + Messages + + + + + + + + + ) } diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx index 66132326227..8f9becf9709 100644 --- a/packages/ui/src/components/Tabs/Tabs.tsx +++ b/packages/ui/src/components/Tabs/Tabs.tsx @@ -8,6 +8,7 @@ import { Props as TagProps, Tag } from '../Tag/Tag' type Props = React.PropsWithChildren & { defaultSelectedId?: Ariakit.TabProviderProps['defaultSelectedId'] + selectedId?: Ariakit.TabProviderProps['selectedId'] onChange?: Ariakit.TabStoreProps['setSelectedId'] } @@ -20,6 +21,7 @@ type TabsComponent = React.FC & { export const Tabs: TabsComponent = ({ children, defaultSelectedId, + selectedId, onChange, }) => { const tabsStore = Ariakit.useTabStore({ @@ -34,6 +36,7 @@ export const Tabs: TabsComponent = ({ {children} From ec9ac6ee38ce3d09b61ceef4256f6acbf629151c Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 07:25:05 -0400 Subject: [PATCH 08/26] Update NetworkResourcePanel.tsx --- .../NetworkResourcePanel.tsx | 27 +++++-------------- 1 file changed, 6 insertions(+), 21 deletions(-) diff --git a/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx b/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx index f85f38ca5ad..f7812a5d8d7 100644 --- a/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx +++ b/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx @@ -315,22 +315,11 @@ function NetworkResourceDetails({ }} > - - Info - - - Errors - - - Logs - + Info + Errors + Logs {isNetworkRequest && ( - - Trace - + Trace )} @@ -574,12 +563,8 @@ function WebSocketDetails({ onChange={(id) => setActiveTab(id as WebSocketTabs)} > - - Headers - - - Messages - + Headers + Messages Date: Thu, 4 Apr 2024 07:25:43 -0400 Subject: [PATCH 09/26] Update NetworkResourcePanel.tsx --- .../components/NetworkResourcePanel/NetworkResourcePanel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx b/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx index f7812a5d8d7..c8f24481800 100644 --- a/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx +++ b/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx @@ -314,7 +314,7 @@ function NetworkResourceDetails({ setActiveTab(id as NetworkRequestTabs) }} > - + Info Errors Logs @@ -562,7 +562,7 @@ function WebSocketDetails({ selectedId={activeTab} onChange={(id) => setActiveTab(id as WebSocketTabs)} > - + Headers Messages From aac558ee6022c63cea22c6fd666734e53eb92c3f Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 07:35:22 -0400 Subject: [PATCH 10/26] Update gap between tabs --- .../NetworkResourcePanel/NetworkResourcePanel.tsx | 4 ++-- packages/ui/src/components/Tabs/Tabs.tsx | 14 ++++++++++---- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx b/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx index c8f24481800..e5f037e6e46 100644 --- a/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx +++ b/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx @@ -314,7 +314,7 @@ function NetworkResourceDetails({ setActiveTab(id as NetworkRequestTabs) }} > - + Info Errors Logs @@ -562,7 +562,7 @@ function WebSocketDetails({ selectedId={activeTab} onChange={(id) => setActiveTab(id as WebSocketTabs)} > - + Headers Messages diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx index 8f9becf9709..718d831fb2d 100644 --- a/packages/ui/src/components/Tabs/Tabs.tsx +++ b/packages/ui/src/components/Tabs/Tabs.tsx @@ -2,7 +2,7 @@ import * as Ariakit from '@ariakit/react' import { useState } from 'react' import { Badge } from '../Badge/Badge' -import { Box, PaddingProps } from '../Box/Box' +import { Box, BoxProps, PaddingProps } from '../Box/Box' import { Stack } from '../Stack/Stack' import { Props as TagProps, Tag } from '../Tag/Tag' @@ -47,9 +47,15 @@ export const Tabs: TabsComponent = ({ type TabListProps = React.PropsWithChildren & Ariakit.TabListProps & - PaddingProps + PaddingProps & { + gap?: BoxProps['gap'] + } -const TabList: React.FC = ({ children, ...props }) => { +const TabList: React.FC = ({ + children, + gap = '16', + ...props +}) => { return ( = ({ children, ...props }) => { {children} From 6e3e4e3c79765a9e79fa210f8a3cd9704c2d0dfb Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 10:41:03 -0400 Subject: [PATCH 11/26] Sizes --- frontend/src/__generated/index.css | 4 - .../DevToolsWindowV2/DevToolsWindowV2.tsx | 41 ---------- .../ui/src/components/Tabs/Tabs.stories.tsx | 78 ++++++++++++++++++- packages/ui/src/components/Tabs/Tabs.tsx | 11 ++- 4 files changed, 86 insertions(+), 48 deletions(-) diff --git a/frontend/src/__generated/index.css b/frontend/src/__generated/index.css index b1e30c31d53..555ff0a81a3 100644 --- a/frontend/src/__generated/index.css +++ b/frontend/src/__generated/index.css @@ -7321,10 +7321,6 @@ body { height: 24px; align-items: center; } -._1h7r9xv0 { - height: 100%; - overflow-y: hidden; -} ._1p577ua0 { font-size: 13px; height: 100%; diff --git a/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx b/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx index a729abc4de2..ddb72435351 100644 --- a/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx +++ b/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/DevToolsWindowV2.tsx @@ -178,47 +178,6 @@ const DevToolsWindowV2: React.FC< ) : ( - // - // tab={selectedDevToolsTab} - // setTab={(t: Tab) => { - // setSelectedDevToolsTab(t) - // formStore.reset() - // }} - // pages={{ - // [Tab.Console]: { - // page: ( - // - // ), - // }, - // [Tab.Errors]: { - // page: ( - // - // ), - // }, - // [Tab.Network]: { - // page: ( - // - // ), - // }, - // }} - // right={} - // /> { setSelectedDevToolsTab(id as Tab) diff --git a/packages/ui/src/components/Tabs/Tabs.stories.tsx b/packages/ui/src/components/Tabs/Tabs.stories.tsx index 6bf20f8c766..b93839f64e3 100644 --- a/packages/ui/src/components/Tabs/Tabs.stories.tsx +++ b/packages/ui/src/components/Tabs/Tabs.stories.tsx @@ -1,7 +1,13 @@ import { Meta } from '@storybook/react' import { Box } from '../Box/Box' -import { IconSolidAcademicCap, IconSolidBeaker } from '../icons' +import { Heading } from '../Heading/Heading' +import { + IconSolidAcademicCap, + IconSolidBeaker, + IconSolidLogs, + IconSolidTraces, +} from '../icons' import { Stack } from '../Stack/Stack' import { Tabs } from './Tabs' @@ -41,6 +47,76 @@ export const Basic = () => ( ) +export const Sizes = () => ( + + + Small (default) + + + + + }> + Info + + } badgeText="13"> + Logs + + } badgeText="4"> + Trace + + + + Info + + + Logs + + + Trace + + + + + + Extra Small + + + + + }> + Info + + } + badgeText="13" + > + Logs + + } + badgeText="4" + > + Trace + + + + Info + + + Logs + + + Trace + + + + +) + const TabContent: React.FC = ({ children }) => { return ( = ({ badgeText, children, icon, ...props }) => { +const Tab: React.FC = ({ + badgeText, + children, + icon, + size, + ...props +}) => { const tabContext = Ariakit.useTabContext()! const selected = tabContext.useState('selectedId') === props.id const [hovered, setHovered] = useState(false) @@ -103,7 +110,7 @@ const Tab: React.FC = ({ badgeText, children, icon, ...props }) => { > Date: Thu, 4 Apr 2024 12:41:32 -0400 Subject: [PATCH 12/26] Allow passing types for IDs --- docker/start-infra.sh | 36 +++--- frontend/src/__generated/index.css | 24 ---- .../RightPlayerPanel/RightPlayerPanel.tsx | 3 +- .../NetworkResourcePanel.tsx | 30 ----- .../components/Tabs/index.tsx | 97 ++++++++------ .../pages/Player/context/PlayerUIContext.ts | 7 +- frontend/src/pages/Traces/TracePage.tsx | 31 ++++- .../routers/ProjectRouter/ProjectRouter.tsx | 2 +- .../ui/src/components/Tabs/Tabs.stories.tsx | 121 +++++++++++------- packages/ui/src/components/Tabs/Tabs.tsx | 58 ++++----- 10 files changed, 216 insertions(+), 193 deletions(-) diff --git a/docker/start-infra.sh b/docker/start-infra.sh index 2aa3c7d6895..b6147918a23 100755 --- a/docker/start-infra.sh +++ b/docker/start-infra.sh @@ -8,24 +8,24 @@ SERVICES="clickhouse kafka postgres redis zookeeper collector" BASE_COMPOSE="./compose.yml" COLLECTOR_CONFIG="./collector.yml" -if [[ "$IN_DOCKER_GO" == "true" ]]; then - if grep -q '*highlight-logging' "$BASE_COMPOSE"; then - sed -i "s/\*highlight-logging/\*local-logging/g" $BASE_COMPOSE - fi - if grep -q 'https://host.docker.internal' "$COLLECTOR_CONFIG"; then - sed -i "s/https:\/\/host\.docker\.internal:8082/http:\/\/backend:8082/g" $COLLECTOR_CONFIG - fi - if grep -q 'insecure_skip_verify' "$COLLECTOR_CONFIG"; then - sed -i "18d;19d" $COLLECTOR_CONFIG - fi -elif [[ "$SSL" != "true" ]]; then - if grep -q 'https://host.docker.internal' "$COLLECTOR_CONFIG"; then - sed -i "s/https:\/\/host\.docker/http:\/\/host\.docker/g" $COLLECTOR_CONFIG - fi - if grep -q 'insecure_skip_verify' "$COLLECTOR_CONFIG"; then - sed -i "18d;19d" $COLLECTOR_CONFIG - fi -fi +# if [[ "$IN_DOCKER_GO" == "true" ]]; then +# if grep -q '*highlight-logging' "$BASE_COMPOSE"; then +# sed -i "s/\*highlight-logging/\*local-logging/g" $BASE_COMPOSE +# fi +# if grep -q 'https://host.docker.internal' "$COLLECTOR_CONFIG"; then +# sed -i "s/https:\/\/host\.docker\.internal:8082/http:\/\/backend:8082/g" $COLLECTOR_CONFIG +# fi +# if grep -q 'insecure_skip_verify' "$COLLECTOR_CONFIG"; then +# sed -i "18d;19d" $COLLECTOR_CONFIG +# fi +# elif [[ "$SSL" != "true" ]]; then +# if grep -q 'https://host.docker.internal' "$COLLECTOR_CONFIG"; then +# sed -i "s/https:\/\/host\.docker/http:\/\/host\.docker/g" $COLLECTOR_CONFIG +# fi +# if grep -q 'insecure_skip_verify' "$COLLECTOR_CONFIG"; then +# sed -i "18d;19d" $COLLECTOR_CONFIG +# fi +# fi docker compose pull $SERVICES docker compose up --detach --wait --remove-orphans $SERVICES diff --git a/frontend/src/__generated/index.css b/frontend/src/__generated/index.css index 555ff0a81a3..df9a832deff 100644 --- a/frontend/src/__generated/index.css +++ b/frontend/src/__generated/index.css @@ -7652,30 +7652,6 @@ body { padding-top: 5.5px; padding-bottom: 5.5px; } -._1r8lbz41 { - background-color: var(--_1pyqka91k); - border: 1px solid transparent; - color: var(--_1pyqka9h); - cursor: default; -} -._1r8lbz40._1r8lbz41 { - background-color: var(--_1pyqka91l); -} -._1r8lbz42 { - border: 1px solid var(--_1pyqka9g); - border-left: 4px solid var(--_1pyqka9g); -} -._1r8lbz43 { - background-color: var(--_1pyqka9l); - color: white; -} -._1r8lbz41._1r8lbz40._1r8lbz43 { - background-color: var(--_1pyqka9n); -} -._1r8lbz44 { - height: 100%; - overflow-y: hidden; -} ._12wekn71 { width: 50%; min-width: 600px; diff --git a/frontend/src/pages/Player/RightPlayerPanel/RightPlayerPanel.tsx b/frontend/src/pages/Player/RightPlayerPanel/RightPlayerPanel.tsx index ed08cec8996..4bfa29521ea 100644 --- a/frontend/src/pages/Player/RightPlayerPanel/RightPlayerPanel.tsx +++ b/frontend/src/pages/Player/RightPlayerPanel/RightPlayerPanel.tsx @@ -2,6 +2,7 @@ import LoadingBox from '@components/LoadingBox' import { Box } from '@highlight-run/ui/components' import { RightPanelView, + RightPlayerTab, usePlayerUIContext, } from '@pages/Player/context/PlayerUIContext' import { MetadataBox } from '@pages/Player/MetadataBox/MetadataBox' @@ -41,7 +42,7 @@ const RightPlayerPanel = () => { if (commentId) { setRightPanelView(RightPanelView.Comments) } else { - setSelectedRightPanelTab('Events') + setSelectedRightPanelTab(RightPlayerTab.Events) } }, [setRightPanelView, setSelectedRightPanelTab, setShowRightPanel]) diff --git a/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx b/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx index e5f037e6e46..65be991b0a5 100644 --- a/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx +++ b/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx @@ -528,36 +528,6 @@ function WebSocketDetails({ - {/* - tab={activeTab} - setTab={(tab) => setActiveTab(tab)} - pages={{ - [WebSocketTabs.Headers]: { - page: ( - - ), - }, - [WebSocketTabs.Messages]: { - page: ( - - ), - }, - }} - noHandle - tabsContainerClass={styles.tabsContainer} - pageContainerClass={styles.pageContainer} - /> */} - setActiveTab(id as WebSocketTabs)} diff --git a/frontend/src/pages/Player/RightPlayerPanel/components/Tabs/index.tsx b/frontend/src/pages/Player/RightPlayerPanel/components/Tabs/index.tsx index 72d54219fb9..f020afbd781 100644 --- a/frontend/src/pages/Player/RightPlayerPanel/components/Tabs/index.tsx +++ b/frontend/src/pages/Player/RightPlayerPanel/components/Tabs/index.tsx @@ -3,17 +3,17 @@ import { IconSolidFire, IconSolidHashtag, IconSolidSparkles, - OldTabs, + Tabs, } from '@highlight-run/ui/components' -import EventStreamV2 from '@pages/Player/components/EventStreamV2/EventStreamV2' import { RightPlayerTab, usePlayerUIContext, } from '@pages/Player/context/PlayerUIContext' -import MetadataPanel from '@pages/Player/MetadataPanel/MetadataPanel' import { useGetWorkspaceSettingsQuery } from '@/graph/generated/hooks' import useFeatureFlag, { Feature } from '@/hooks/useFeatureFlag/useFeatureFlag' +import EventStreamV2 from '@/pages/Player/components/EventStreamV2/EventStreamV2' +import MetadataPanel from '@/pages/Player/MetadataPanel/MetadataPanel' import SessionInsights from '@/pages/Player/RightPlayerPanel/components/SessionInsights/SessionInsights' import { useApplicationContext } from '@/routers/AppRouter/context/ApplicationContext' @@ -29,55 +29,74 @@ const RightPanelTabs = () => { skip: !currentWorkspace?.id, }) + const showAiInsights = + showSessionInsights && data?.workspaceSettings?.ai_application + return ( - - tab={selectedRightPanelTab} - setTab={setSelectedRightPanelTab} - pages={{ - ['Events']: { - page: , - icon: ( + + selectedId={selectedRightPanelTab} + onChange={setSelectedRightPanelTab} + > + + - ), - }, - ['Metadata']: { - page: , - icon: ( + } + > + Events + + - ), - }, - ...(showSessionInsights && - data?.workspaceSettings?.ai_application - ? { - ['AI Insights']: { - page: , - icon: ( - - ), - }, - } - : {}), - }} - /> + } + > + Metadata + + {showAiInsights && ( + + } + > + AI Insights + + )} + + + + + + + + {showAiInsights && ( + + + + )} + ) } diff --git a/frontend/src/pages/Player/context/PlayerUIContext.ts b/frontend/src/pages/Player/context/PlayerUIContext.ts index d923c4702ac..c8316a6e369 100644 --- a/frontend/src/pages/Player/context/PlayerUIContext.ts +++ b/frontend/src/pages/Player/context/PlayerUIContext.ts @@ -8,7 +8,12 @@ export enum RightPanelView { Event = 'EVENT', } -export type RightPlayerTab = 'Events' | 'Metadata' | 'AI Insights' +export enum RightPlayerTab { + Events = 'Events', + Metadata = 'Metadata', + AIInsights = 'AI Insights', +} + interface PlayerUIContext { isPlayerFullscreen: boolean setIsPlayerFullscreen: React.Dispatch> diff --git a/frontend/src/pages/Traces/TracePage.tsx b/frontend/src/pages/Traces/TracePage.tsx index 49e9dfa96f9..7e3019de109 100644 --- a/frontend/src/pages/Traces/TracePage.tsx +++ b/frontend/src/pages/Traces/TracePage.tsx @@ -1,4 +1,4 @@ -import { Badge, Box, Callout, OldTabs } from '@highlight-run/ui/components' +import { Box, Callout, Tabs } from '@highlight-run/ui/components' import React, { useEffect, useState } from 'react' import LoadingBox from '@/components/LoadingBox' @@ -10,8 +10,6 @@ import { useTrace } from '@/pages/Traces/TraceProvider' import { TraceSpanAttributes } from '@/pages/Traces/TraceSpanAttributes' import analytics from '@/util/analytics' -import * as styles from './TracePage.css' - enum TraceTabs { Info = 'Info', Errors = 'Errors', @@ -42,7 +40,7 @@ export const TracePage: React.FC = () => { - + {/* tab={activeTab} setTab={(tab) => setActiveTab(tab)} containerClass={styles.tabs} @@ -73,7 +71,30 @@ export const TracePage: React.FC = () => { }, }} noHandle - /> + /> */} + selectedId={activeTab} onChange={setActiveTab}> + + Info + + Errors + + Logs + + + + + + + + + + + + + ) diff --git a/frontend/src/routers/ProjectRouter/ProjectRouter.tsx b/frontend/src/routers/ProjectRouter/ProjectRouter.tsx index 24a081289bd..c10660bca10 100644 --- a/frontend/src/routers/ProjectRouter/ProjectRouter.tsx +++ b/frontend/src/routers/ProjectRouter/ProjectRouter.tsx @@ -127,7 +127,7 @@ export const ProjectRouter = () => { const [selectedRightPanelTab, setSelectedRightPanelTab] = useLocalStorage( 'tabs-PlayerRightPanel-active-tab', - 'Events', + RightPlayerTab.Events, ) const { isPlayerFullscreen, setIsPlayerFullscreen, playerCenterPanelRef } = diff --git a/packages/ui/src/components/Tabs/Tabs.stories.tsx b/packages/ui/src/components/Tabs/Tabs.stories.tsx index b93839f64e3..089df91e4d7 100644 --- a/packages/ui/src/components/Tabs/Tabs.stories.tsx +++ b/packages/ui/src/components/Tabs/Tabs.stories.tsx @@ -1,6 +1,8 @@ import { Meta } from '@storybook/react' +import { useState } from 'react' import { Box } from '../Box/Box' +import { Button } from '../Button/Button' import { Heading } from '../Heading/Heading' import { IconSolidAcademicCap, @@ -16,36 +18,77 @@ export default { component: Tabs, } as Meta -export const Basic = () => ( - - - - Tab 1 - }> - Tab 2 - - - Tab 3 - - } badgeText="14"> - Tab 4 - - - - Panel 1 - - - Panel 2 - - - Panel 3 - - - Panel 4 - - - -) +enum TabIds { + ONE = '1', + TWO = '2', + THREE = '3', + FOUR = '4', +} + +export const Basic = () => { + const [activeTab, setActiveTab] = useState(TabIds.ONE) + + return ( + + + + Tab 1 + }> + Tab 2 + + + Tab 3 + + } + badgeText="14" + > + Tab 4 + + + + + Panel 1{' '} + + + + + + Panel 2 + + + + + + + Panel 3 + + + + + + + Panel 4 + + + + + + ) +} export const Sizes = () => ( @@ -81,25 +124,15 @@ export const Sizes = () => ( Extra Small - + - }> + }> Info - } - badgeText="13" - > + } badgeText="13"> Logs - } - badgeText="4" - > + } badgeText="4"> Trace diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx index 2db84fe350a..a08ccc69032 100644 --- a/packages/ui/src/components/Tabs/Tabs.tsx +++ b/packages/ui/src/components/Tabs/Tabs.tsx @@ -1,47 +1,49 @@ import * as Ariakit from '@ariakit/react' -import { useState } from 'react' +import { createContext, useContext, useState } from 'react' import { Badge } from '../Badge/Badge' import { Box, BoxProps, PaddingProps } from '../Box/Box' import { Stack } from '../Stack/Stack' import { Props as TagProps, Tag } from '../Tag/Tag' -type Props = React.PropsWithChildren & { - defaultSelectedId?: Ariakit.TabProviderProps['defaultSelectedId'] - selectedId?: Ariakit.TabProviderProps['selectedId'] - onChange?: Ariakit.TabStoreProps['setSelectedId'] -} +export const TabsContext = createContext({ + size: 'sm', +}) -type TabsComponent = React.FC & { - Tab: typeof Tab - List: typeof TabList - Panel: typeof TabPanel +type Props = React.PropsWithChildren & { + defaultSelectedId?: T + selectedId?: T + size?: 'xs' | 'sm' + onChange?: (id: T) => void } -export const Tabs: TabsComponent = ({ +export const Tabs = ({ children, defaultSelectedId, selectedId, + size = 'sm', onChange, -}) => { +}: Props) => { const tabsStore = Ariakit.useTabStore({ setSelectedId: (id) => { if (onChange) { - onChange(id) + onChange(id as T) } }, }) return ( - - - {children} - - + + + + {children} + + + ) } @@ -78,16 +80,10 @@ type TabProps = Ariakit.TabProps & { id: string badgeText?: string icon?: TagProps['icon'] - size?: 'xs' | 'sm' } -const Tab: React.FC = ({ - badgeText, - children, - icon, - size, - ...props -}) => { +const Tab: React.FC = ({ badgeText, children, icon, ...props }) => { + const { size } = useContext(TabsContext) const tabContext = Ariakit.useTabContext()! const selected = tabContext.useState('selectedId') === props.id const [hovered, setHovered] = useState(false) @@ -167,3 +163,5 @@ const TabPanel: React.FC = ({ children, ...props }) => { Tabs.Tab = Tab Tabs.List = TabList Tabs.Panel = TabPanel +Tabs.useStore = Ariakit.useTabStore +Tabs.useContext = Ariakit.useTabContext From f47ee7e6c7b86767f15c918f0f73a67c263c2a58 Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 12:47:57 -0400 Subject: [PATCH 13/26] Update TracePage.tsx --- frontend/src/pages/Traces/TracePage.tsx | 32 ------------------------- 1 file changed, 32 deletions(-) diff --git a/frontend/src/pages/Traces/TracePage.tsx b/frontend/src/pages/Traces/TracePage.tsx index 7e3019de109..4453eecc564 100644 --- a/frontend/src/pages/Traces/TracePage.tsx +++ b/frontend/src/pages/Traces/TracePage.tsx @@ -40,38 +40,6 @@ export const TracePage: React.FC = () => { - {/* - tab={activeTab} - setTab={(tab) => setActiveTab(tab)} - containerClass={styles.tabs} - tabsContainerClass={styles.tabsContainer} - pageContainerClass={styles.tabsPageContainer} - pages={{ - [TraceTabs.Info]: { - page: ( - - - - ), - }, - [TraceTabs.Errors]: { - badge: - errors?.length > 0 ? ( - - ) : undefined, - page: , - }, - [TraceTabs.Logs]: { - page: , - }, - }} - noHandle - /> */} selectedId={activeTab} onChange={setActiveTab}> Info From a72c09804b669f3cdfe267377d5bdfd9640628d3 Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 13:00:53 -0400 Subject: [PATCH 14/26] Clean up no logs styles --- frontend/src/pages/Traces/TraceLogs.tsx | 19 ++++++++++++------- frontend/src/pages/Traces/TracePage.tsx | 4 +++- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/frontend/src/pages/Traces/TraceLogs.tsx b/frontend/src/pages/Traces/TraceLogs.tsx index 5c97b00617b..dc2591dc425 100644 --- a/frontend/src/pages/Traces/TraceLogs.tsx +++ b/frontend/src/pages/Traces/TraceLogs.tsx @@ -64,12 +64,7 @@ export const TraceLogs: React.FC = () => { return ( <> - + { /> {(!loading && logEdges.length === 0) || !traceId ? ( - + + + + + ) : ( { - + + + From 3886028a354a3a01ff27d782b5fc7b07545217ed Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 13:08:24 -0400 Subject: [PATCH 15/26] Clean up spacing of logs --- frontend/src/pages/Traces/TraceLogs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/Traces/TraceLogs.tsx b/frontend/src/pages/Traces/TraceLogs.tsx index dc2591dc425..862f1ad9771 100644 --- a/frontend/src/pages/Traces/TraceLogs.tsx +++ b/frontend/src/pages/Traces/TraceLogs.tsx @@ -88,7 +88,7 @@ export const TraceLogs: React.FC = () => { hideCreateAlert productType={ProductType.Logs} /> - + {(!loading && logEdges.length === 0) || !traceId ? ( Date: Thu, 4 Apr 2024 13:40:49 -0400 Subject: [PATCH 16/26] New tabs on errors --- frontend/.eslintrc | 6 +- .../ErrorTabContent/ErrorTabContent.tsx | 118 ++++++++---------- 2 files changed, 54 insertions(+), 70 deletions(-) diff --git a/frontend/.eslintrc b/frontend/.eslintrc index 0f220c176e9..d71a65b9821 100644 --- a/frontend/.eslintrc +++ b/frontend/.eslintrc @@ -90,7 +90,11 @@ { "name": "antd", "importNames": ["Tabs"], - "message": "Please use Tabs from /src/components/Tab instead." + "message": "Please use Tabs from @highlight-run/ui/components instead." + }, + { + "name": "@components/Tabs/Tabs", + "message": "Please use Tabs from @highlight-run/ui/components instead." }, { "name": "antd", diff --git a/frontend/src/pages/ErrorsV2/ErrorTabContent/ErrorTabContent.tsx b/frontend/src/pages/ErrorsV2/ErrorTabContent/ErrorTabContent.tsx index f28b2c98f9c..14bf8c47e2d 100644 --- a/frontend/src/pages/ErrorsV2/ErrorTabContent/ErrorTabContent.tsx +++ b/frontend/src/pages/ErrorsV2/ErrorTabContent/ErrorTabContent.tsx @@ -1,11 +1,9 @@ -import Tabs from '@components/Tabs/Tabs' import { GetErrorGroupQuery } from '@graph/operations' import { - Badge, Box, IconSolidTerminal, IconSolidTrendingUp, - Stack, + Tabs, } from '@highlight-run/ui/components' import { ErrorInstance } from '@pages/ErrorsV2/ErrorInstance/ErrorInstance' import ErrorMetrics from '@pages/ErrorsV2/ErrorMetrics/ErrorMetrics' @@ -16,7 +14,10 @@ import { useNavigate } from 'react-router-dom' import { ErrorInstances } from '@/pages/ErrorsV2/ErrorInstances/ErrorInstances' -import styles from './ErrorTabContent.module.css' +enum ErrorTabs { + Instances = 'instances', + Metrics = 'metrics', +} type Props = React.PropsWithChildren & { errorGroup: GetErrorGroupQuery['error_group'] @@ -29,7 +30,7 @@ const ErrorTabContent: React.FC = ({ errorGroup }) => { project_id: string error_secure_id: string error_object_id?: string - error_tab_key?: 'instances' | 'metrics' + error_tab_key?: ErrorTabs }>() useHotkeys( @@ -63,70 +64,49 @@ const ErrorTabContent: React.FC = ({ errorGroup }) => { error_tab_key === 'instances' && error_object_id === undefined return ( - { - if (activeKey === 'instances') { - // we want instances to load the latest instance, not the list view - navigate(`/${project_id}/errors/${error_secure_id}`) - } else { - navigate( - `/${project_id}/errors/${error_secure_id}/${activeKey}`, - ) - } - }} - tabs={[ - { - key: 'instances', - title: ( - } - label="Instances" - shortcut="i" - /> - ), - panelContent: showAllInstances ? ( - - ) : ( - - ), - }, - { - key: 'metrics', - title: ( - } - label="Metrics" - shortcut="m" - /> - ), - panelContent: , - }, - ]} - /> - ) -} - -type TabTitleProps = { - icon: React.ReactNode - label: string - shortcut: string -} - -const TabTitle: React.FC = ({ icon, label, shortcut }) => { - return ( - - - {icon} - {label} - - + + + selectedId={error_tab_key} + onChange={(id) => { + if (id === ErrorTabs.Instances) { + // we want instances to load the latest instance, not the list view + navigate(`/${project_id}/errors/${error_secure_id}`) + } else { + navigate( + `/${project_id}/errors/${error_secure_id}/${id}`, + ) + } + }} + > + + } + badgeText="i" + > + Instances + + } + badgeText="m" + id={ErrorTabs.Metrics} + > + Metrics + + + + + {showAllInstances ? ( + + ) : ( + + )} + + + + + + ) } From e39e0d60390ad335fc429d8fdd43184f6f9e2321 Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 13:48:13 -0400 Subject: [PATCH 17/26] Update ProjectSettings.tsx --- .../pages/ProjectSettings/ProjectSettings.tsx | 249 +++++++++--------- 1 file changed, 128 insertions(+), 121 deletions(-) diff --git a/frontend/src/pages/ProjectSettings/ProjectSettings.tsx b/frontend/src/pages/ProjectSettings/ProjectSettings.tsx index a052f6678e4..c8fc7a5c49c 100644 --- a/frontend/src/pages/ProjectSettings/ProjectSettings.tsx +++ b/frontend/src/pages/ProjectSettings/ProjectSettings.tsx @@ -1,5 +1,4 @@ -import Tabs from '@components/Tabs/Tabs' -import { Box, Heading, Stack, Text } from '@highlight-run/ui/components' +import { Box, Heading, Stack, Tabs, Text } from '@highlight-run/ui/components' import { DangerForm } from '@pages/ProjectSettings/DangerForm/DangerForm' import { ErrorFiltersForm } from '@pages/ProjectSettings/ErrorFiltersForm/ErrorFiltersForm' import { ErrorSettingsForm } from '@pages/ProjectSettings/ErrorSettingsForm/ErrorSettingsForm' @@ -39,9 +38,21 @@ import { ProjectSettingsContextProvider } from '@/pages/ProjectSettings/ProjectS import styles from './ProjectSettings.module.css' import { SessionFiltersCallout } from './SessionFiltersCallout/SessionFiltersCallout' +enum ProjectSettingsTabs { + General = 'general', + Sessions = 'sessions', + Errors = 'errors', + Services = 'services', + Filters = 'filters', +} + const ProjectSettings = () => { const navigate = useNavigate() - const { project_id, ...params } = useParams() + const { project_id, ...params } = useParams<{ + project_id: string + tab: ProjectSettingsTabs + [key: string]: string + }>() const [allProjectSettings, setAllProjectSettings] = useState() const { currentWorkspace } = useApplicationContext() @@ -112,127 +123,123 @@ const ProjectSettings = () => { loading, }} > - { - navigate(`/${project_id}/settings/${key}`) + + selectedId={ + params.tab ?? ProjectSettingsTabs.Sessions + } + onChange={(id) => { + navigate(`/${project_id}/settings/${id}`) }} - border - noHeaderPadding - noPadding - id="settingsTabs" - tabs={[ - { - key: 'general', - title: 'General', - panelContent: , - }, - { - key: 'sessions', - title: 'Session replay', - panelContent: ( - - + + + General + + + Session replay + + + Error monitoring + + + Services + + + Filters + + + + + + + + + + + Session replay + + - - - - - {workspaceSettingsData - ?.workspaceSettings - ?.enable_session_export ? ( - - ) : null} - - ), - }, - { - key: 'errors', - title: 'Error monitoring', - panelContent: ( - - + ) : ( + 'Save changes' + )} + + + + + + {workspaceSettingsData + ?.workspaceSettings + ?.enable_session_export ? ( + + ) : null} + + + + + + + Error monitoring + + - - - - - - - - - - - - - ), - }, - { - key: 'services', - title: 'Services', - panelContent: , - }, - { - key: 'filters', - title: 'Filters', - panelContent: , - }, - ]} - /> + {editProjectSettingsLoading ? ( + + ) : ( + 'Save changes' + )} + + + + + + + + + + + + + + + + + + + + + + From 06eaee5aa742a01bddfd131727b54385f7297408 Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 14:02:06 -0400 Subject: [PATCH 18/26] Update other settings pages --- .../ProjectSettings.module.css | 14 -- .../pages/ProjectSettings/ProjectSettings.tsx | 5 +- .../src/pages/UserSettings/UserSettings.tsx | 89 ------------- .../src/pages/WorkspaceTeam/WorkspaceTeam.tsx | 120 +++++++----------- 4 files changed, 48 insertions(+), 180 deletions(-) delete mode 100644 frontend/src/pages/ProjectSettings/ProjectSettings.module.css delete mode 100644 frontend/src/pages/UserSettings/UserSettings.tsx diff --git a/frontend/src/pages/ProjectSettings/ProjectSettings.module.css b/frontend/src/pages/ProjectSettings/ProjectSettings.module.css deleted file mode 100644 index ebdd2cee1e7..00000000000 --- a/frontend/src/pages/ProjectSettings/ProjectSettings.module.css +++ /dev/null @@ -1,14 +0,0 @@ -.tabsContainer { - margin-top: var(--size-large); - - /* Override some defaults we don't want on tabs. */ - :global(.ant-tabs-nav::before) { - border-bottom: 0 !important; - } - :global(.ant-tabs-tab) { - margin: 0 var(--size-large) 0 0 !important; - } - :global(.ant-tabs-content-holder) { - margin-top: var(--size-large) !important; - } -} diff --git a/frontend/src/pages/ProjectSettings/ProjectSettings.tsx b/frontend/src/pages/ProjectSettings/ProjectSettings.tsx index c8fc7a5c49c..f6dc07bec9d 100644 --- a/frontend/src/pages/ProjectSettings/ProjectSettings.tsx +++ b/frontend/src/pages/ProjectSettings/ProjectSettings.tsx @@ -35,7 +35,6 @@ import { import { AutoresolveStaleErrorsForm } from '@/pages/ProjectSettings/AutoresolveStaleErrorsForm/AutoresolveStaleErrorsForm' import { ProjectSettingsContextProvider } from '@/pages/ProjectSettings/ProjectSettingsContext/ProjectSettingsContext' -import styles from './ProjectSettings.module.css' import { SessionFiltersCallout } from './SessionFiltersCallout/SessionFiltersCallout' enum ProjectSettingsTabs { @@ -115,7 +114,7 @@ const ProjectSettings = () => { Project Settings -
+ { -
+ ) diff --git a/frontend/src/pages/UserSettings/UserSettings.tsx b/frontend/src/pages/UserSettings/UserSettings.tsx deleted file mode 100644 index 2f86a4118de..00000000000 --- a/frontend/src/pages/UserSettings/UserSettings.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { FieldsBox } from '@components/FieldsBox/FieldsBox' -import LeadAlignLayout from '@components/layout/LeadAlignLayout' -import Tabs from '@components/Tabs/Tabs' -import { EmailOptOutPanel } from '@pages/EmailOptOut/EmailOptOut' -import { PlayerForm } from '@pages/UserSettings/PlayerForm/PlayerForm' -import { auth } from '@util/auth' -import { useParams } from '@util/react-router/useParams' -import React from 'react' -import { Helmet } from 'react-helmet' -import { useNavigate } from 'react-router-dom' - -import commonStyles from '../../Common.module.css' -import projectSettingsStyles from '../ProjectSettings/ProjectSettings.module.css' -import Auth from './Auth/Auth' - -const UserSettings: React.FC = () => { - const navigate = useNavigate() - const params = useParams() - - const tabs = [ - ...(auth.googleProvider - ? [ - { - key: 'auth', - title: 'Authentication', - panelContent: , - }, - ] - : []), - ...[ - { - key: 'email-settings', - title: 'Email Settings', - panelContent: ( - - - - ), - }, - { - key: 'player-settings', - title: 'Player Settings', - panelContent: ( - - - - ), - }, - ], - ] - - const activeKey = params.tab ?? tabs[0].key - return ( - <> - - User Settings - - -
-
- -
-

User Settings

-
-
- { - navigate( - `${location.pathname.replace( - '/' + activeKey, - '', - )}/${key}`, - ) - }} - noHeaderPadding - noPadding - id="settingsTabs" - tabs={tabs} - /> -
- -
-
- - ) -} - -export default UserSettings diff --git a/frontend/src/pages/WorkspaceTeam/WorkspaceTeam.tsx b/frontend/src/pages/WorkspaceTeam/WorkspaceTeam.tsx index 0c77566410e..e30fb37c621 100644 --- a/frontend/src/pages/WorkspaceTeam/WorkspaceTeam.tsx +++ b/frontend/src/pages/WorkspaceTeam/WorkspaceTeam.tsx @@ -1,12 +1,11 @@ import { Button } from '@components/Button' -import Tabs from '@components/Tabs/Tabs' import { useGetWorkspaceAdminsQuery } from '@graph/hooks' import { AdminRole, WorkspaceAdminRole } from '@graph/schemas' import { - Badge, Box, IconSolidUserAdd, Stack, + Tabs, } from '@highlight-run/ui/components' import AllMembers from '@pages/WorkspaceTeam/components/AllMembers' import { AutoJoinForm } from '@pages/WorkspaceTeam/components/AutoJoinForm' @@ -21,10 +20,13 @@ import { useToggle } from 'react-use' import layoutStyles from '../../components/layout/LeadAlignLayout.module.css' import styles from './WorkspaceTeam.module.css' -type MemberKeyType = 'members' | 'invites' +enum MemberKeyType { + Members = 'members', + Invites = 'invites', +} const WorkspaceTeam = () => { - const { workspace_id, member_tab_key = 'members' } = useParams<{ + const { workspace_id, member_tab_key = MemberKeyType.Members } = useParams<{ workspace_id: string member_tab_key?: MemberKeyType }>() @@ -59,54 +61,46 @@ const WorkspaceTeam = () => { toggleShowModal={toggleShowModal} /> - - navigate(`/w/${workspace_id}/team/${activeKey}`) - } - tabs={[ - { - key: 'members', - title: , - panelContent: ( - - - - ), - }, - { - key: 'invites', - title: , - panelContent: ( - - - - ), - }, - ]} - /> + + + selectedId={member_tab_key} + onChange={(id) => { + navigate(`/w/${workspace_id}/team/${id}`) + }} + > + + Members + + Pending invites + + + + + + + + + + + + + ) @@ -143,26 +137,4 @@ const TabContentContainer = ({ ) } -type TabTitleProps = { - label: string - count?: number -} - -const TabTitle: React.FC = ({ label, count }) => { - return ( - - - {label} - {count && ( - - )} - - - ) -} - export default WorkspaceTeam From cf8b6e61d1e6dc744562a4e8856a19174f8639d5 Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 14:02:33 -0400 Subject: [PATCH 19/26] Clean up old tabs components --- frontend/src/components/Tabs/Tabs.module.css | 38 ----- frontend/src/components/Tabs/Tabs.tsx | 134 ------------------ .../components/OldTabs/OldTabs.stories.tsx | 25 ---- .../src/components/OldTabs/OldTabs.test.tsx | 18 --- .../ui/src/components/OldTabs/OldTabs.tsx | 126 ---------------- .../ui/src/components/OldTabs/styles.css.ts | 104 -------------- 6 files changed, 445 deletions(-) delete mode 100644 frontend/src/components/Tabs/Tabs.module.css delete mode 100644 frontend/src/components/Tabs/Tabs.tsx delete mode 100644 packages/ui/src/components/OldTabs/OldTabs.stories.tsx delete mode 100644 packages/ui/src/components/OldTabs/OldTabs.test.tsx delete mode 100644 packages/ui/src/components/OldTabs/OldTabs.tsx delete mode 100644 packages/ui/src/components/OldTabs/styles.css.ts diff --git a/frontend/src/components/Tabs/Tabs.module.css b/frontend/src/components/Tabs/Tabs.module.css deleted file mode 100644 index b535f0ff5e3..00000000000 --- a/frontend/src/components/Tabs/Tabs.module.css +++ /dev/null @@ -1,38 +0,0 @@ -.tabPane { - height: 100%; - overflow-y: auto; - - &.withPadding { - padding: var(--size-small) var(--size-medium); - } - - &.unsetOverflowY { - overflow-y: unset; - } -} - -.extraContentContainer { - align-items: center; - column-gap: var(--size-medium); - display: flex; - - &.withHeaderPadding { - padding-right: var(--size-large); - } -} - -.tabs { - font-family: var(--header-font-family) !important; - - &.noHeaderPadding { - :global(.ant-tabs-nav-wrap) { - padding: 0; - } - } - - &.border { - :global(.ant-tabs-nav) { - border-bottom: #E4E2E4 solid 1px !important; - } - } -} diff --git a/frontend/src/components/Tabs/Tabs.tsx b/frontend/src/components/Tabs/Tabs.tsx deleted file mode 100644 index 53edb1ed037..00000000000 --- a/frontend/src/components/Tabs/Tabs.tsx +++ /dev/null @@ -1,134 +0,0 @@ -// eslint-disable-next-line no-restricted-imports -import useLocalStorage from '@rehooks/local-storage' -import { isRenderable } from '@util/react' -import { Tabs as AntDesignTabs, TabsProps } from 'antd' -import clsx from 'clsx' -import React, { useEffect } from 'react' -const { TabPane } = AntDesignTabs - -import styles from './Tabs.module.css' - -export interface TabItem { - key: string - title?: string | React.ReactNode // If undefined, `key` will be used as the title - panelContent: React.ReactNode - disabled?: boolean - hidden?: boolean -} - -type Props = Pick< - TabsProps, - 'animated' | 'tabBarExtraContent' | 'centered' | 'onChange' -> & { - tabs: TabItem[] - /** A unique value to distinguish this tab with other tabs. */ - id: string - /** Whether the tab contents has the default padding. */ - noPadding?: boolean - /** Whether the tabs overflow-y should be unset */ - unsetOverflowY?: boolean - /** Whether the tab headers have the default padding. */ - noHeaderPadding?: boolean - border?: boolean - /** An HTML id to attach to the tabs. */ - tabsHtmlId?: string - className?: string - tabBarExtraContentClassName?: string - activeKeyOverride?: string -} - -const Tabs = ({ - tabs, - id, - noPadding = false, - noHeaderPadding = false, - border = false, - unsetOverflowY = false, - tabBarExtraContent, - tabsHtmlId, - className, - tabBarExtraContentClassName, - activeKeyOverride, - ...props -}: Props) => { - const [activeTab, setActiveTab] = useLocalStorage( - `tabs-${id}-active-tab`, - tabs[0].key || '0', - ) - - /** - * In cases where we render tabs conditionally, a tab may no longer be selectable because it's not rendered. - * @example We have Tab A, B, C - * On one visit, all 3 tabs are visible - * On a second visit, only Tab A and C are visible but Tab B was the last active tab. - * On the second visit, the tabs will render an empty tab because Tab B is not visible. - * In this case, we'll default to the first tab. - */ - useEffect(() => { - const activeTabIndex = tabs.findIndex((tab) => tab.key === activeTab) - - if (activeTabIndex === -1) { - setActiveTab(tabs[0].key) - } - }, [activeTab, setActiveTab, tabs]) - - const activeKey = - activeKeyOverride !== undefined ? activeKeyOverride : activeTab - - return ( - { - if (props.onChange) { - props.onChange(activeKey) - } - setActiveTab(activeKey) - }} - tabBarExtraContent={ - isRenderable(tabBarExtraContent) ? ( -
- {tabBarExtraContent} -
- ) : ( - tabBarExtraContent - ) - } - id={tabsHtmlId} - className={clsx(styles.tabs, className, { - [styles.noHeaderPadding]: noHeaderPadding, - [styles.border]: border, - })} - > - {tabs.map(({ panelContent, title, key, disabled, hidden }) => { - if (hidden) { - return null - } - return ( - - {panelContent} - - ) - })} - - ) -} - -export default Tabs diff --git a/packages/ui/src/components/OldTabs/OldTabs.stories.tsx b/packages/ui/src/components/OldTabs/OldTabs.stories.tsx deleted file mode 100644 index 5b8e90c1e43..00000000000 --- a/packages/ui/src/components/OldTabs/OldTabs.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Meta } from '@storybook/react' -import { useState } from 'react' - -import { OldTabs } from './OldTabs' - -export default { - title: 'Components/OldTabs', - component: OldTabs, -} as Meta - -export const Basic = () => { - const [tab, setTab] = useState('hello') - - return ( - Hi }, - there: { page:
there!
}, - world: { page:
Hello! 👋
}, - }} - /> - ) -} diff --git a/packages/ui/src/components/OldTabs/OldTabs.test.tsx b/packages/ui/src/components/OldTabs/OldTabs.test.tsx deleted file mode 100644 index 051060bb7f6..00000000000 --- a/packages/ui/src/components/OldTabs/OldTabs.test.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { render, screen } from '@testing-library/react' - -import { OldTabs } from './OldTabs' - -describe('OldTabs', () => { - it('exists', async () => { - render( - Test } }} - tab="foo" - setTab={(t) => { - console.log('tab', t) - }} - />, - ) - await screen.findByText('Test') - }) -}) diff --git a/packages/ui/src/components/OldTabs/OldTabs.tsx b/packages/ui/src/components/OldTabs/OldTabs.tsx deleted file mode 100644 index 9035a633b27..00000000000 --- a/packages/ui/src/components/OldTabs/OldTabs.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import React from 'react' - -import { Box } from '../Box/Box' -import { Button } from '../Button/Button' -import { Text } from '../Text/Text' -import * as styles from './styles.css' - -export interface Page { - page: React.ReactNode - icon?: React.ReactElement - badge?: React.ReactNode -} - -type Props = { - pages: { - [k: string]: Page - } - tab: T - right?: React.ReactNode - setTab: (tab: T) => void - handleRef?: (ref: HTMLElement | null) => void - - // These props have been added to override defaults that prevent us from - // implementing the UX as designed. They are temporary and will be removed - // when we rebuild tabs: https://github.com/highlight/highlight/issues/5771 - noHandle?: boolean - containerClass?: string - tabsContainerClass?: string - pageContainerClass?: string -} - -export const OldTabs = function ({ - pages, - tab, - right, - containerClass, - tabsContainerClass, - pageContainerClass, - noHandle = false, - setTab, - handleRef, -}: Props) { - const [hoveredTab, setHoveredTab] = React.useState() - const currentPage = pages[tab] - - return ( - - - - {Object.keys(pages).map((t) => ( - setHoveredTab(t)} - onMouseLeave={() => setHoveredTab(undefined)} - onClick={() => { - setTab(t as T) - }} - > - - - - ))} - - {right} - - {currentPage && ( - - {pages[tab].page} - {!noHandle && ( - - - - )} - - )} - - ) -} diff --git a/packages/ui/src/components/OldTabs/styles.css.ts b/packages/ui/src/components/OldTabs/styles.css.ts deleted file mode 100644 index a54d2b30b81..00000000000 --- a/packages/ui/src/components/OldTabs/styles.css.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { style } from '@vanilla-extract/css' -import { recipe } from '@vanilla-extract/recipes' - -import { colors } from '../../css/colors' -import { themeVars } from '../../css/theme.css' - -export const GRAB_HANDLE_HEIGHT = 20 - -export const pageWrapper = style({ - width: '100%', - height: '100%', - position: 'relative', -}) - -export const controlBarButton = style({ - boxShadow: 'none', -}) - -export const tabText = style({ - display: 'flex', -}) - -export const handle = style({ - height: GRAB_HANDLE_HEIGHT, - width: '100%', - position: 'absolute', - top: -GRAB_HANDLE_HEIGHT / 2, -}) - -export const grabbable = style({ - cursor: 'grab', - selectors: { - '&:active': { - cursor: 'grabbing', - }, - }, -}) - -export const handleLine = style({ - backgroundColor: colors.n6, - height: 1, - width: '100%', - position: 'relative', - top: GRAB_HANDLE_HEIGHT / 2, -}) - -export const controlBarVariants = recipe({ - base: { - background: 'none', - borderRadius: 0, - borderBottom: `none`, - boxShadow: 'none', - selectors: { - '&:focus:enabled, &:active:enabled, &:hover:enabled': { - background: 'none', - boxShadow: 'none', - borderRadius: 0, - color: colors.n11, - }, - }, - }, - variants: { - selected: { - true: { - color: colors.p9, - }, - false: { - color: colors.n11, - }, - }, - }, - - defaultVariants: { - selected: false, - }, -}) - -export const controlBarBottomVariants = recipe({ - base: { - borderRadius: '2px 2px 0px 0px', - height: 2, - }, - variants: { - selected: { - true: { - backgroundColor: colors.p9, - }, - }, - hovered: { - true: { - backgroundColor: - themeVars.interactive.outline.secondary.enabled, - }, - }, - }, - compoundVariants: [ - { - variants: { hovered: true, selected: true }, - style: { - backgroundColor: colors.p9, - }, - }, - ], -}) From 5f99f22e7d7de4f3324c1a6ba44095bc842c572c Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 14:28:53 -0400 Subject: [PATCH 20/26] Update .eslintrc --- frontend/.eslintrc | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontend/.eslintrc b/frontend/.eslintrc index d71a65b9821..96de9a977da 100644 --- a/frontend/.eslintrc +++ b/frontend/.eslintrc @@ -92,10 +92,6 @@ "importNames": ["Tabs"], "message": "Please use Tabs from @highlight-run/ui/components instead." }, - { - "name": "@components/Tabs/Tabs", - "message": "Please use Tabs from @highlight-run/ui/components instead." - }, { "name": "antd", "importNames": ["Progress"], From 99301ef11099d53a635a294457fb5d4431f1f362 Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 15:14:32 -0400 Subject: [PATCH 21/26] Remove old tabs export --- packages/ui/src/components/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index cd9daa08264..a36fa9cf387 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -23,7 +23,6 @@ export * from './icons' export { Menu } from './Menu/Menu' export { MenuButton } from './MenuButton/MenuButton' export { MultiSelectButton } from './MultiSelectButton/MultiSelectButton' -export { OldTabs as OldTabs } from './OldTabs/OldTabs' export { Popover } from './Popover/Popover' export { Stack } from './Stack/Stack' export { SwitchButton } from './SwitchButton/SwitchButton' From 6d9d2b52bf0267d2d57c4506f75cb20aae5dc77e Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 15:14:38 -0400 Subject: [PATCH 22/26] Update index.css --- frontend/src/__generated/index.css | 63 ------------------------------ 1 file changed, 63 deletions(-) diff --git a/frontend/src/__generated/index.css b/frontend/src/__generated/index.css index df9a832deff..503fa6066ee 100644 --- a/frontend/src/__generated/index.css +++ b/frontend/src/__generated/index.css @@ -5208,69 +5208,6 @@ body { ._1oemo0l3[aria-selected=false] ._1oemo0l4 { background-color: white; } -._1cf2ys60 { - width: 100%; - height: 100%; - position: relative; -} -._1cf2ys61 { - box-shadow: none; -} -._1cf2ys62 { - display: flex; -} -._1cf2ys63 { - height: 20px; - width: 100%; - position: absolute; - top: -10px; -} -._1cf2ys64 { - cursor: grab; -} -._1cf2ys64:active { - cursor: grabbing; -} -._1cf2ys65 { - background-color: #e4e2e4; - height: 1px; - width: 100%; - position: relative; - top: 10px; -} -._1cf2ys66 { - background: none; - border-radius: 0; - border-bottom: none; - box-shadow: none; -} -._1cf2ys66:focus:enabled, -._1cf2ys66:active:enabled, -._1cf2ys66:hover:enabled { - background: none; - box-shadow: none; - border-radius: 0; - color: #6f6e77; -} -._1cf2ys67 { - color: #744ed4; -} -._1cf2ys68 { - color: #6f6e77; -} -._1cf2ys69 { - border-radius: 2px 2px 0px 0px; - height: 2px; -} -._1cf2ys6a { - background-color: #744ed4; -} -._1cf2ys6b { - background-color: var(--_1pyqka91o); -} -._1cf2ys6c { - background-color: #744ed4; -} ._1nph9oi0 { align-items: center; border: none; From c63376685ed2115845bcd3d6156c71fc4a5b183e Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 15:18:53 -0400 Subject: [PATCH 23/26] Update start-infra.sh --- docker/start-infra.sh | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/docker/start-infra.sh b/docker/start-infra.sh index b6147918a23..2aa3c7d6895 100755 --- a/docker/start-infra.sh +++ b/docker/start-infra.sh @@ -8,24 +8,24 @@ SERVICES="clickhouse kafka postgres redis zookeeper collector" BASE_COMPOSE="./compose.yml" COLLECTOR_CONFIG="./collector.yml" -# if [[ "$IN_DOCKER_GO" == "true" ]]; then -# if grep -q '*highlight-logging' "$BASE_COMPOSE"; then -# sed -i "s/\*highlight-logging/\*local-logging/g" $BASE_COMPOSE -# fi -# if grep -q 'https://host.docker.internal' "$COLLECTOR_CONFIG"; then -# sed -i "s/https:\/\/host\.docker\.internal:8082/http:\/\/backend:8082/g" $COLLECTOR_CONFIG -# fi -# if grep -q 'insecure_skip_verify' "$COLLECTOR_CONFIG"; then -# sed -i "18d;19d" $COLLECTOR_CONFIG -# fi -# elif [[ "$SSL" != "true" ]]; then -# if grep -q 'https://host.docker.internal' "$COLLECTOR_CONFIG"; then -# sed -i "s/https:\/\/host\.docker/http:\/\/host\.docker/g" $COLLECTOR_CONFIG -# fi -# if grep -q 'insecure_skip_verify' "$COLLECTOR_CONFIG"; then -# sed -i "18d;19d" $COLLECTOR_CONFIG -# fi -# fi +if [[ "$IN_DOCKER_GO" == "true" ]]; then + if grep -q '*highlight-logging' "$BASE_COMPOSE"; then + sed -i "s/\*highlight-logging/\*local-logging/g" $BASE_COMPOSE + fi + if grep -q 'https://host.docker.internal' "$COLLECTOR_CONFIG"; then + sed -i "s/https:\/\/host\.docker\.internal:8082/http:\/\/backend:8082/g" $COLLECTOR_CONFIG + fi + if grep -q 'insecure_skip_verify' "$COLLECTOR_CONFIG"; then + sed -i "18d;19d" $COLLECTOR_CONFIG + fi +elif [[ "$SSL" != "true" ]]; then + if grep -q 'https://host.docker.internal' "$COLLECTOR_CONFIG"; then + sed -i "s/https:\/\/host\.docker/http:\/\/host\.docker/g" $COLLECTOR_CONFIG + fi + if grep -q 'insecure_skip_verify' "$COLLECTOR_CONFIG"; then + sed -i "18d;19d" $COLLECTOR_CONFIG + fi +fi docker compose pull $SERVICES docker compose up --detach --wait --remove-orphans $SERVICES From d2dc5e940bd9f428493569595c7ee67970175099 Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 16:09:44 -0400 Subject: [PATCH 24/26] Clean up tests --- packages/ui/package.json | 1 + .../ve/components/OldTabs/styles.css.js | 22 ----------------- packages/ui/src/components/Tabs/Tabs.test.tsx | 24 ++++++++++++++++--- packages/ui/src/components/Tabs/Tabs.tsx | 7 ++---- 4 files changed, 24 insertions(+), 30 deletions(-) delete mode 100644 packages/ui/src/__generated/ve/components/OldTabs/styles.css.js diff --git a/packages/ui/package.json b/packages/ui/package.json index 94467954bcb..3bd5cd0ac43 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -15,6 +15,7 @@ "lint": "eslint ./src", "lint:ts": "tsc --noEmit", "test": "TZ=UTC vitest --run", + "test:watch": "TZ=UTC vitest", "tokens:generate": "npx ts-node-esm ./scripts/generate-tokens.ts", "typegen": "tsc --emitDeclarationOnly" }, diff --git a/packages/ui/src/__generated/ve/components/OldTabs/styles.css.js b/packages/ui/src/__generated/ve/components/OldTabs/styles.css.js deleted file mode 100644 index cee800f44d8..00000000000 --- a/packages/ui/src/__generated/ve/components/OldTabs/styles.css.js +++ /dev/null @@ -1,22 +0,0 @@ -// ../packages/ui/src/components/OldTabs/styles.css.ts -import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn"; -var GRAB_HANDLE_HEIGHT = 20; -var controlBarBottomVariants = _7a468({ defaultClassName: "_1cf2ys69", variantClassNames: { selected: { true: "_1cf2ys6a" }, hovered: { true: "_1cf2ys6b" } }, defaultVariants: {}, compoundVariants: [[{ hovered: true, selected: true }, "_1cf2ys6c"]] }); -var controlBarButton = "_1cf2ys61"; -var controlBarVariants = _7a468({ defaultClassName: "_1cf2ys66", variantClassNames: { selected: { true: "_1cf2ys67", false: "_1cf2ys68" } }, defaultVariants: { selected: false }, compoundVariants: [] }); -var grabbable = "_1cf2ys64"; -var handle = "_1cf2ys63"; -var handleLine = "_1cf2ys65"; -var pageWrapper = "_1cf2ys60"; -var tabText = "_1cf2ys62"; -export { - GRAB_HANDLE_HEIGHT, - controlBarBottomVariants, - controlBarButton, - controlBarVariants, - grabbable, - handle, - handleLine, - pageWrapper, - tabText -}; diff --git a/packages/ui/src/components/Tabs/Tabs.test.tsx b/packages/ui/src/components/Tabs/Tabs.test.tsx index 86d2b3a337f..59b0c078273 100644 --- a/packages/ui/src/components/Tabs/Tabs.test.tsx +++ b/packages/ui/src/components/Tabs/Tabs.test.tsx @@ -1,11 +1,29 @@ -import { render, screen } from '@testing-library/react' +import { userEvent } from '@storybook/test' +import { render, screen, waitFor } from '@testing-library/react' import { Tabs } from './Tabs' describe('Tabs', () => { it('exists', async () => { - render(Testing) + render( + + + Tab 1 + Tab 2 + + Panel 1 + Panel 2 + , + ) - await screen.findByText('Testing') + await waitFor(() => expect(screen.getByText('Panel 1')).toBeVisible()) + expect(screen.getByText('Panel 2')).not.toBeVisible() + + userEvent.click(screen.getByText('Tab 2')) + + await waitFor(() => + expect(screen.getByText('Panel 1')).not.toBeVisible(), + ) + waitFor(() => expect(screen.getByText('Panel 2')).toBeVisible()) }) }) diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx index a08ccc69032..8e7e93d2a58 100644 --- a/packages/ui/src/components/Tabs/Tabs.tsx +++ b/packages/ui/src/components/Tabs/Tabs.tsx @@ -25,6 +25,7 @@ export const Tabs = ({ onChange, }: Props) => { const tabsStore = Ariakit.useTabStore({ + defaultSelectedId, setSelectedId: (id) => { if (onChange) { onChange(id as T) @@ -34,11 +35,7 @@ export const Tabs = ({ return ( - + {children} From d686692c864fb2c0e2c6f957678116126672d7ce Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 16:12:00 -0400 Subject: [PATCH 25/26] Update Tabs.test.tsx --- packages/ui/src/components/Tabs/Tabs.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/Tabs/Tabs.test.tsx b/packages/ui/src/components/Tabs/Tabs.test.tsx index 59b0c078273..1d2527d3f9d 100644 --- a/packages/ui/src/components/Tabs/Tabs.test.tsx +++ b/packages/ui/src/components/Tabs/Tabs.test.tsx @@ -4,7 +4,7 @@ import { render, screen, waitFor } from '@testing-library/react' import { Tabs } from './Tabs' describe('Tabs', () => { - it('exists', async () => { + it('allows you to switch between tabs', async () => { render( From b8926bfb91710398b8737297da7dd639cec6042c Mon Sep 17 00:00:00 2001 From: Chris Schmitz Date: Thu, 4 Apr 2024 21:22:22 -0400 Subject: [PATCH 26/26] Update index.tsx --- .../src/pages/Player/RightPlayerPanel/components/Tabs/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/Player/RightPlayerPanel/components/Tabs/index.tsx b/frontend/src/pages/Player/RightPlayerPanel/components/Tabs/index.tsx index f020afbd781..edb115d87fd 100644 --- a/frontend/src/pages/Player/RightPlayerPanel/components/Tabs/index.tsx +++ b/frontend/src/pages/Player/RightPlayerPanel/components/Tabs/index.tsx @@ -37,7 +37,7 @@ const RightPanelTabs = () => { selectedId={selectedRightPanelTab} onChange={setSelectedRightPanelTab} > - +