From 996fc0751c8d31d7d1b3fa7fd3f9b520e8680a77 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Mon, 11 Apr 2022 14:51:38 +0200
Subject: [PATCH] fix: improve error rendering for logs

---
 .../interfaces/Settings/Logs/LogTable.tsx     | 138 +++++++++++-------
 studio/tests/pages/projects/LogTable.test.js  |  14 ++
 2 files changed, 99 insertions(+), 53 deletions(-)

diff --git a/studio/components/interfaces/Settings/Logs/LogTable.tsx b/studio/components/interfaces/Settings/Logs/LogTable.tsx
index 710616fe345..bc6f86a2303 100644
--- a/studio/components/interfaces/Settings/Logs/LogTable.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogTable.tsx
@@ -1,25 +1,22 @@
 import dayjs from 'dayjs'
 import { useEffect, useState, useMemo } from 'react'
-import {
-  Alert,
-  Button,
-  IconDownloadCloud,
-  IconEye,
-  IconEyeOff,
-  IconLoader,
-  Input,
-  Typography,
-} from '@supabase/ui'
+import { Alert, Button, IconEye, IconEyeOff, Input } from '@supabase/ui'
 import DataGrid from '@supabase/react-data-grid'
 
 import LogSelection from './LogSelection'
 import { LogData, QueryType } from './Logs.types'
-import { SeverityFormatter, ResponseCodeFormatter, HeaderFormmater } from './LogsFormatters'
+import {
+  SeverityFormatter,
+  ResponseCodeFormatter,
+  HeaderFormmater,
+  jsonSyntaxHighlight,
+} from './LogsFormatters'
 
 // column renders
 import DatabaseApiColumnRender from './LogColumnRenderers/DatabaseApiColumnRender'
 import DatabasePostgresColumnRender from './LogColumnRenderers/DatabasePostgresColumnRender'
 import CSVButton from 'components/ui/CSVButton'
+import { copyToClipboard } from 'lib/helpers'
 
 interface Props {
   data?: Array<LogData | Object>
@@ -262,57 +259,92 @@ const LogTable = ({
               !isLoading ? (
                 <>
                   <div className="py-4 w-full h-full flex-col space-y-12">
-                    <div
-                      className={[
-                        'transition-all duration-500 delay-200',
-                        'flex flex-col items-center gap-6 text-center',
-                        'mt-16 opacity-100 scale-100 justify-center',
-                      ].join(' ')}
-                    >
-                      <div className="flex flex-col gap-1">
-                        <div className="relative border border-scale-600 border-dashed dark:border-scale-400 w-32 h-4 rounded px-2 flex items-center"></div>
-                        <div className="relative border border-scale-600 border-dashed dark:border-scale-400 w-32 h-4 rounded px-2 flex items-center">
-                          <div className="absolute right-1 -bottom-4">
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              className="h-6 w-6"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                              strokeWidth="2"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                              />
-                            </svg>
+                    {!error && (
+                      <div
+                        className={`transition-all
+                      duration-500
+                      delay-200
+                      
+                      flex
+                      flex-col
+                      items-center
+                  
+                      gap-6
+                      text-center
+                      mt-16
+                      opacity-100 
+                      scale-100
+                      
+                      justify-center
+                    `}
+                      >
+                        <>
+                          <div className="flex flex-col gap-1">
+                            <div className="relative border border-scale-600 border-dashed dark:border-scale-400 w-32 h-4 rounded px-2 flex items-center"></div>
+                            <div className="relative border border-scale-600 border-dashed dark:border-scale-400 w-32 h-4 rounded px-2 flex items-center">
+                              <div className="absolute right-1 -bottom-4">
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  className="h-6 w-6"
+                                  fill="none"
+                                  viewBox="0 0 24 24"
+                                  stroke="currentColor"
+                                  strokeWidth="2"
+                                >
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                                  />
+                                </svg>
+                              </div>
+                            </div>
                           </div>
-                        </div>
+                          <div className="flex flex-col gap-1 px-5">
+                            <h3 className="text-lg text-scale-1200">No results</h3>
+                            <p className="text-sm text-scale-900">
+                              Try another search, or adjusting the filters
+                            </p>
+                          </div>
+                        </>
                       </div>
-                      <div className="flex flex-col gap-1 px-5">
-                        <h3 className="text-lg text-scale-1200">No results</h3>
-                        <p className="text-sm text-scale-900">
-                          Try another search, or adjusting the filters
-                        </p>
-                      </div>
-                    </div>
+                    )}
                     {error && (
                       <div className="flex justify-center px-5">
                         <Alert
                           variant="danger"
                           title="Sorry! An error occured when fetching data."
                           withIcon
-                          className="max-w-xl"
+                          className="w-1/2"
                         >
-                          <Input.TextArea
-                            size="small"
-                            value={JSON.stringify(error, null, 2)}
-                            borderless
-                            className="font-mono w-full mt-4"
-                            copy
-                            rows={12}
-                          />
+                          {typeof error === 'string' && (
+                            <Input.TextArea
+                              size="small"
+                              value={error}
+                              borderless
+                              className="font-mono w-full mt-4"
+                              copy
+                              rows={12}
+                            />
+                          )}
+                          {typeof error === 'object' && (
+                            <>
+                              <pre
+                                className="font-mono w-full mt-4 bg-red-300 rounded p-2"
+                                dangerouslySetInnerHTML={{
+                                  __html: jsonSyntaxHighlight(error),
+                                }}
+                              />
+
+                              <Button
+                                onClick={() => copyToClipboard(JSON.stringify(error, null, 2))}
+                                type="default"
+                                className="mt-2"
+                              >
+                                Copy
+                              </Button>
+                            </>
+                          )}
                         </Alert>
                       </div>
                     )}
diff --git a/studio/tests/pages/projects/LogTable.test.js b/studio/tests/pages/projects/LogTable.test.js
index 56b596396fc..458aa84a6f0 100644
--- a/studio/tests/pages/projects/LogTable.test.js
+++ b/studio/tests/pages/projects/LogTable.test.js
@@ -63,3 +63,17 @@ test('toggle histogram', async () => {
   userEvent.click(toggle)
   expect(mockFn).toBeCalled()
 })
+
+
+test('error message handling', async () => {
+  const {rerender} = render(<LogTable error="some \nstring" />)
+  await expect(screen.findByText("some \nstring")).rejects.toThrow()
+  await screen.findByDisplayValue(/some/)
+  await screen.findByDisplayValue(/string/)
+
+  rerender(<LogTable error={{my_error: "some \nstring"}} />)
+  await screen.findByText(/some \\nstring/)
+  await screen.findByText(/some/)
+  await screen.findByText(/string/)
+  await screen.findByText(/my_error/)
+})