mirrors/posthog
0
0
Fork 0
mirror of https://github.com/PostHog/posthog.git synced 2024-11-24 09:14:46 +01:00
Code Issues Releases Activity

Remove wrap on plugin logs table (#4246)

Browse Source 
* remove wrap on plugin logs table

* Implement a real fix by checking if ResizableTableProps.expandable is set

Co-authored-by: Michael Matloka <dev@twixes.com>
This commit is contained in:
Marius Andra 2021-05-07 03:46:21 +02:00 committed by GitHub
parent da040fc024
commit c4f8abbdfc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/components/ResizableTable/VirtualTableHeader.tsx
View File

@ -15,6 +15,7 @@ interface VirtualTableHeaderProps<RecordType> {
handleResize: (index: number) => ResizeHandler
layoutEffect?: CallableFunction
minColumnWidth: number
expandable?: boolean
}
function ResizableTitle({
@ -66,13 +67,14 @@ function VirtualTableHeader<RecordType>({
handleResize,
layoutEffect,
minColumnWidth,
expandable,
}: VirtualTableHeaderProps<RecordType>): JSX.Element {
const maxColumnWidth = minColumnWidth * 12
const height = 60
useLayoutEffect(() => (typeof layoutEffect === 'function' ? layoutEffect() : undefined))
return (
<div className="resizable-virtual-table-header">
<div className="left-spacer" style={{ width: ANTD_EXPAND_BUTTON_WIDTH }} />
{expandable && <div className="left-spacer" style={{ width: ANTD_EXPAND_BUTTON_WIDTH }} />}
{columns.map(({ title, width }, index) => (
<ResizableTitle
key={index}

8
frontend/src/lib/components/ResizableTable/index.tsx
View File

@ -83,7 +83,7 @@ export function ResizableTable<RecordType extends Record<any, any> = any>({
function updateColumnWidth(index: number, width: number): void {
const col = scrollWrapperRef.current?.querySelector(
// nth-child is 1-indexed. first column is fixed. last column width must be uncontrolled.
`.ant-table-content colgroup col:nth-child(${index + 2}):not(:last-child)`
`.ant-table-content colgroup col:nth-child(${index + 1 + Number(!!props.expandable)}):not(:last-child)`
)
col?.setAttribute('style', `width: ${width}px;`)
}
@ -141,7 +141,10 @@ export function ResizableTable<RecordType extends Record<any, any> = any>({
? column
: {
...column,
width: Math.max((columnWidths[index + 1] ?? 0) * resizeRatio, minColumnWidth),
width: Math.max(
(columnWidths[index + Number(!!props.expandable)] ?? 0) * resizeRatio,
minColumnWidth
),
}
)
nextColumns.slice(0, lastIndex).forEach((col, index) => {
@ -208,6 +211,7 @@ export function ResizableTable<RecordType extends Record<any, any> = any>({
handleResize={handleColumnResize}
layoutEffect={updateTableWidth}
minColumnWidth={minColumnWidth}
expandable={!!props.expandable}
/>
)}
<Table

7
frontend/src/scenes/plugins/Plugins.scss
View File

@ -64,3 +64,10 @@
}
}
}
.plugin-logs {
td.ant-table-cell {
white-space: normal;
text-overflow: unset;
}
}

2
frontend/src/scenes/plugins/plugin/PluginLogs.tsx
View File

@ -69,7 +69,7 @@ export function PluginLogs({ teamId, pluginConfigId }: PluginLogsProps): JSX.Ele
const { revealBackground, loadPluginLogsMore, loadPluginLogsSearch } = useActions(logic)
return (
<Space direction="vertical" style={{ flexGrow: 1 }} className="ph-no-capture">
<Space direction="vertical" style={{ flexGrow: 1 }} className="ph-no-capture plugin-logs">
<Row>
<Search
loading={pluginLogsLoading}