From 9b8b70cc9b01b1b86cfe73a6655034c566102dfe Mon Sep 17 00:00:00 2001
From: Michael Matloka <michal@matloka.com>
Date: Mon, 25 Sep 2023 18:48:40 +0200
Subject: [PATCH] Also convert plugin error popover title

---
 .../src/scenes/plugins/plugin/PluginError.tsx | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/src/scenes/plugins/plugin/PluginError.tsx b/frontend/src/scenes/plugins/plugin/PluginError.tsx
index 84213452d1e92a..ee4031ca8c0c10 100644
--- a/frontend/src/scenes/plugins/plugin/PluginError.tsx
+++ b/frontend/src/scenes/plugins/plugin/PluginError.tsx
@@ -1,9 +1,9 @@
-import { Button, Tag } from 'antd'
-import { ClearOutlined } from '@ant-design/icons'
 import { PluginErrorType } from '~/types'
+import { Tag } from 'antd'
 import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { dayjs } from 'lib/dayjs'
-import { LemonDropdown } from '@posthog/lemon-ui'
+import { LemonButton, LemonDropdown } from '@posthog/lemon-ui'
+import { TZLabel } from '@posthog/apps-common'
+import { IconClose } from 'lib/lemon-ui/icons'
 
 export function PluginError({ error, reset }: { error: PluginErrorType; reset?: () => void }): JSX.Element | null {
     if (!error) {
@@ -11,17 +11,18 @@ export function PluginError({ error, reset }: { error: PluginErrorType; reset?:
     }
     return (
         <LemonDropdown
-            title={<div style={{ textAlign: 'center' }}>{dayjs(error.time).format('YYYY-MM-DD - HH:mm:ss')}</div>}
             overlay={
                 <>
-                    {reset ? (
-                        <Button size="small" onClick={reset} style={{ float: 'right', marginLeft: 10 }}>
-                            <ClearOutlined /> Delete
-                        </Button>
-                    ) : null}
-                    <div>
-                        {error.name ? <strong>{error.name}: </strong> : ''}
-                        {error.message}
+                    <div className="flex items-center">
+                        <span className="grow mr-2">
+                            {error.name ? <strong>{error.name} </strong> : ''}
+                            <TZLabel time={error.time} />
+                        </span>
+                        {reset ? (
+                            <LemonButton size="small" type="secondary" onClick={reset} icon={<IconClose />}>
+                                Clear
+                            </LemonButton>
+                        ) : null}
                     </div>
                     {error.stack ? (
                         <CodeSnippet wrap style={{ fontSize: 10 }} language={Language.JavaScript}>