From 6d0e1909e61657fea2cd703bc37ca807436ab47e Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 28 Jan 2022 21:53:37 +0800
Subject: [PATCH] added chart toggling, disabled event chart on custom query

---
 .../interfaces/Settings/Logs/LogPanel.tsx     | 21 +++++++++++++++++++
 .../project/[ref]/settings/logs/[type].tsx    | 21 ++++++++++++-------
 studio/tests/pages/projects/LogPanel.test.js  | 11 ++++++++++
 studio/tests/pages/projects/logs.test.js      |  8 +++++++
 4 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/studio/components/interfaces/Settings/Logs/LogPanel.tsx b/studio/components/interfaces/Settings/Logs/LogPanel.tsx
index fd43a27bb50..e286b5ef599 100644
--- a/studio/components/interfaces/Settings/Logs/LogPanel.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogPanel.tsx
@@ -11,6 +11,7 @@ import {
   IconSearch,
   IconClock,
   Popover,
+  IconBarChart2,
 } from '@supabase/ui'
 import { LogSearchCallback, LogTemplate } from '.'
 import dayjs from 'dayjs'
@@ -27,6 +28,8 @@ interface Props {
   onSearch?: LogSearchCallback
   onCustomClick?: () => void
   onSelectTemplate: (template: LogTemplate) => void
+  isShowingEventChart: boolean
+  onToggleEventChart: () => void
 }
 
 dayjs.extend(utc)
@@ -45,6 +48,8 @@ const LogPanel: FC<Props> = ({
   defaultFromValue = '',
   onCustomClick,
   onSelectTemplate,
+  isShowingEventChart,
+  onToggleEventChart,
 }) => {
   const [search, setSearch] = useState('')
   const [from, setFrom] = useState({ value: '', error: '' })
@@ -193,6 +198,22 @@ const LogPanel: FC<Props> = ({
                   )}
                 </div>
               </Flag>
+              {!isCustomQuery && (
+                <Button
+                  size="tiny"
+                  type={isShowingEventChart ? 'outline' : 'text'}
+                  title={isShowingEventChart ? 'Hide event chart' : 'Show event chart'}
+                  onClick={onToggleEventChart}
+                  icon={
+                    <div className="relative">
+                      <IconBarChart2 size="small" />
+                      {isShowingEventChart && (
+                        <IconX className="w-3 h-3 absolute bottom-0 right-0 text-white -mb-1 -mr-1" />
+                      )}
+                    </div>
+                  }
+                />
+              )}
               {/* wrap with form so that if user presses enter, the search value will submit automatically */}
               <form
                 id="log-panel-search"
diff --git a/studio/pages/project/[ref]/settings/logs/[type].tsx b/studio/pages/project/[ref]/settings/logs/[type].tsx
index 6ca4428c51f..6a2ee885741 100644
--- a/studio/pages/project/[ref]/settings/logs/[type].tsx
+++ b/studio/pages/project/[ref]/settings/logs/[type].tsx
@@ -54,6 +54,7 @@ export const LogPage: NextPage = () => {
   const { ref, type, q, s, te } = router.query
   const [editorId, setEditorId] = useState<string>(uuidv4())
   const [editorValue, setEditorValue] = useState('')
+  const [showChart, setShowChart] = useState(true)
   const [mode, setMode] = useState<'simple' | 'custom'>('simple')
   const [latestRefresh, setLatestRefresh] = useState<string>(new Date().toISOString())
   const [params, setParams] = useState({
@@ -232,6 +233,8 @@ export const LogPage: NextPage = () => {
     <SettingsLayout title={title}>
       <div className="h-full flex flex-col flex-grow">
         <LogPanel
+          isShowingEventChart={showChart}
+          onToggleEventChart={() => setShowChart(!showChart)}
           isCustomQuery={mode === 'custom'}
           isLoading={isValidating}
           newCount={newCount}
@@ -288,14 +291,16 @@ export const LogPage: NextPage = () => {
             </div>
           </React.Fragment>
         )}
-        <div>
-          <LogEventChart
-            data={logData}
-            onBarClick={(timestampMicro) => {
-              handleSearch({ query: params.search_query, fromMicro: timestampMicro })
-            }}
-          />
-        </div>
+        {showChart && mode !== 'custom' && (
+          <div>
+            <LogEventChart
+              data={logData}
+              onBarClick={(timestampMicro) => {
+                handleSearch({ query: params.search_query, fromMicro: timestampMicro })
+              }}
+            />
+          </div>
+        )}
         <div className="flex flex-col flex-grow relative">
           {isValidating && (
             <div
diff --git a/studio/tests/pages/projects/LogPanel.test.js b/studio/tests/pages/projects/LogPanel.test.js
index 581ec8605df..7c4e1fd1a19 100644
--- a/studio/tests/pages/projects/LogPanel.test.js
+++ b/studio/tests/pages/projects/LogPanel.test.js
@@ -31,6 +31,17 @@ test('custom mode', async () => {
     expect(() => screen.getByPlaceholderText(/Search/)).toThrow()
   })
 })
+
+test('toggle event chart', async () => {
+  const mockFn = jest.fn()
+  const { rerender } = render(<LogPanel onToggleEventChart={mockFn} isShowingEventChart={true} />)
+  const button = await screen.findByTitle('Hide event chart')
+  userEvent.click(button)
+  expect(mockFn).toBeCalled()
+  rerender(<LogPanel isShowingEventChart={false} />)
+  await screen.findByTitle('Show event chart')
+})
+
 test('filter input change and submit', async () => {
   const mockFn = jest.fn()
   render(<LogPanel onSearch={mockFn} />)
diff --git a/studio/tests/pages/projects/logs.test.js b/studio/tests/pages/projects/logs.test.js
index 5a1d73a4db5..0c53bb5714d 100644
--- a/studio/tests/pages/projects/logs.test.js
+++ b/studio/tests/pages/projects/logs.test.js
@@ -412,3 +412,11 @@ test('bug: load older btn does not error out when previous page is empty', async
     expect(screen.queryByText(/undefined/)).toBeNull()
   })
 })
+
+test('log event chart hide', async () => {
+  render(<LogPage />)
+  await screen.findByText('Events')
+  const button = await screen.findByTitle('Hide event chart')
+  userEvent.click(button)
+  await expect(screen.findByText('Events')).rejects.toThrow()
+})