Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

✨ Developer Extension improvements #2516

Merged
merged 18 commits into from
Dec 7, 2023
Merged

✨ Developer Extension improvements #2516

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
27708cb
✨ sticky header
BenoitZugmeyer Nov 28, 2023
d5004b1
🐛 fix light theme border color
BenoitZugmeyer Nov 29, 2023
e3f5828
✨ add icons
BenoitZugmeyer Nov 29, 2023
7e529f7
✨ add a menu to "copy event as curl/fetch"
BenoitZugmeyer Nov 29, 2023
7d2dbab
🐛 fix row collapsing when clicking on a menu
BenoitZugmeyer Nov 29, 2023
09f3542
🐛 fix crash when the cookie is missing some values
BenoitZugmeyer Sep 14, 2023
7fa7374
🐛 fix wrapping of large text columns
BenoitZugmeyer Nov 29, 2023
cadfefe
🐛 fix clear events on refresh
BenoitZugmeyer Sep 11, 2023
95855df
👌 add a shadow behind the table header when scrolled
BenoitZugmeyer Nov 30, 2023
61d5e76
👌 add tests for copyEvent module
BenoitZugmeyer Nov 30, 2023
645e8f7
🚚 move AddColumnPopover to its own module
BenoitZugmeyer Dec 1, 2023
893f87d
🚚 move the events list header to its own module
BenoitZugmeyer Dec 1, 2023
0e38490
✨ harmonized event list columns
BenoitZugmeyer Dec 1, 2023
7ccf5c9
✅ fix unit tests when packages are not built
BenoitZugmeyer Dec 1, 2023
29d1b20
👌 set the api tag to 'manual' for copied events
BenoitZugmeyer Dec 1, 2023
7eb1dee
💄 improve header shadow color on light themes
BenoitZugmeyer Dec 1, 2023
60d098a
Merge remote-tracking branch 'origin/main' into benoit/devext-enhance…
BenoitZugmeyer Dec 7, 2023
f00de3a
✅ disable failing tests on IE
BenoitZugmeyer Dec 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions developer-extension/src/panel/components/json.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@

.valueChildrenIndent {
position: absolute;
z-index: var(--dd-json-z-index);
left: 0px;
width: var(--indent);

Expand Down Expand Up @@ -62,4 +63,5 @@

.jsonLine[data-floating] {
position: absolute;
z-index: var(--dd-json-z-index);
}
3 changes: 3 additions & 0 deletions developer-extension/src/panel/components/tabs/eventsTab/columnDrag.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
--vertical-padding: 7px;

position: fixed;

z-index: var(--dd-column-drag-ghost-z-index);

opacity: 0.5;
border-radius: var(--mantine-radius-sm);
top: var(--drag-target-top);
Expand Down
20 changes: 18 additions & 2 deletions developer-extension/src/panel/components/tabs/eventsTab/eventsList.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,23 @@
.root {
margin: 0 var(--mantine-spacing-md) var(--mantine-spacing-md) var(--mantine-spacing-md);
border: 1px solid var(--dd-border-color);
border-radius: var(--mantine-radius-md);
}

.root thead {
z-index: var(--dd-events-list-header-z-index);
}

/*
BenoitZugmeyer marked this conversation as resolved.
Show resolved Hide resolved
When the header is positioned as 'sticky', its bottom border disappears when scrolled down,
making difficult to differentiate the header from the rows. This pseudo-element is used to
draw a border at the bottom of the header, so that it is always visible.
*/
.root thead::after {
content: '';
border-bottom: 1px solid var(--dd-border-color);
width: 100%;
display: block;
position: absolute;
margin-top: -1px;
}

.addColumnCell {
Expand Down
8 changes: 4 additions & 4 deletions developer-extension/src/panel/components/tabs/eventsTab/eventsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { OptionsFilter } from '@mantine/core'
import { Popover, Box, Text, Button, Flex, Autocomplete, Table, CloseButton } from '@mantine/core'
import { Popover, Text, Button, Flex, Autocomplete, Table, CloseButton } from '@mantine/core'
import React, { useMemo, useRef, useState } from 'react'
import type { EventFilters, FacetRegistry } from '../../../hooks/useEvents'
import type { SdkEvent } from '../../../sdkEvent'
Expand All @@ -26,8 +26,8 @@ export function EventsList({
const headerRowRef = useRef<HTMLTableRowElement>(null)

return (
<Box className={classes.root}>
<Table>
<div className={classes.root}>
<Table stickyHeader>
<Table.Thead>
<Table.Tr ref={headerRowRef}>
{columns.map((column) => (
Expand Down Expand Up @@ -58,7 +58,7 @@ export function EventsList({
</Table>

<ColumnDrag columns={columns} onColumnsChange={onColumnsChange} headerRowRef={headerRowRef} />
</Box>
</div>
)
}

Expand Down
7 changes: 7 additions & 0 deletions developer-extension/src/panel/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
:root {
/* To keep z-index management simple, define all z-index values here, in ascending order */
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

--dd-json-z-index: 0;
--dd-events-list-header-z-index: 1;
--dd-column-drag-ghost-z-index: 2;
}

/*
* Define the main border color to be used across the extension. It should match the color used by
* Mantine, for example in the tabs component:
Expand Down