From 1fa0b5ba833fbff69ddf07a10cc4420854f6d391 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Fri, 19 Aug 2022 16:29:44 +0800
Subject: [PATCH] Update all changes saved message on table editor to be
 consistent with sql editor

---
 .../grid/components/header/StatusLabel.tsx    | 60 +++++++++++++++----
 .../to-be-cleaned/SqlEditor/TabSqlQuery.js    |  2 +-
 2 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/studio/components/grid/components/header/StatusLabel.tsx b/studio/components/grid/components/header/StatusLabel.tsx
index b36b6ac680b..c38b4b7000e 100644
--- a/studio/components/grid/components/header/StatusLabel.tsx
+++ b/studio/components/grid/components/header/StatusLabel.tsx
@@ -1,26 +1,27 @@
-import * as React from 'react'
+import { useState, FC, useEffect } from 'react'
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { IconLoader, IconCheck } from '@supabase/ui'
 import { SupabaseGridQueue } from '../../constants'
-import { Typography } from '@supabase/ui'
 
-type StatusLabelProps = {}
+interface Props {}
 
-const StatusLabel: React.FC<StatusLabelProps> = ({}) => {
-  const [msg, setMsg] = React.useState<string | undefined>(undefined)
+const StatusLabel: FC<Props> = ({}) => {
+  const [status, setStatus] = useState<string>()
 
-  React.useEffect(() => {
+  useEffect(() => {
     let isMounted = true
     let timer: number | null
 
     SupabaseGridQueue.on('active', () => {
       if (timer) clearTimeout(timer)
 
-      if (isMounted) setMsg('Saving...')
+      if (isMounted) setStatus('saving')
     })
     SupabaseGridQueue.on('idle', () => {
       if (timer) clearTimeout(timer)
-      timer = window.setTimeout(() => setMsg(undefined), 2000)
+      timer = window.setTimeout(() => setStatus(undefined), 4000)
 
-      if (isMounted) setMsg('All changes saved')
+      if (isMounted) setStatus('saved')
     })
 
     return () => {
@@ -31,8 +32,45 @@ const StatusLabel: React.FC<StatusLabelProps> = ({}) => {
 
   return (
     <div className="sb-grid-status-label">
-      {msg && <Typography.Text>{msg}</Typography.Text>}
-      {!msg && (
+      {status === 'saving' ? (
+        <Tooltip.Root delayDuration={0}>
+          <Tooltip.Trigger>
+            <IconLoader className="animate-spin mx-1" size={14} strokeWidth={2} />
+          </Tooltip.Trigger>
+          <Tooltip.Content side="left">
+            <Tooltip.Arrow className="radix-tooltip-arrow" />
+            <div
+              className={[
+                'bg-scale-100 rounded py-1 px-2 leading-none shadow',
+                'border-scale-200 border',
+              ].join(' ')}
+            >
+              <span className="text-scale-1200 text-xs">Saving changes...</span>
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      ) : status === 'saved' ? (
+        <Tooltip.Root delayDuration={0}>
+          <Tooltip.Trigger>
+            <IconCheck className="text-brand-900 mx-1" size={14} strokeWidth={3} />
+          </Tooltip.Trigger>
+          <Tooltip.Content side="left">
+            <Tooltip.Arrow className="radix-tooltip-arrow" />
+            <div
+              className={[
+                'bg-scale-100 rounded py-1 px-2 leading-none shadow',
+                'border-scale-200 border ',
+              ].join(' ')}
+            >
+              <span className="text-scale-1200 text-xs">All changes saved</span>
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      ) : (
+        <></>
+      )}
+
+      {!status && (
         <div className="sb-grid-status-label__no-msg">
           <div></div>
         </div>
diff --git a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
index 72e89d54139..3a69a931fbc 100644
--- a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
+++ b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
@@ -339,7 +339,7 @@ const SavingIndicator = observer(({ updateSqlSnippet }) => {
       {showSavedText && (
         <Tooltip.Root delayDuration={0}>
           <Tooltip.Trigger>
-            <IconCheck className="text-brand-800" size={14} strokeWidth={3} />
+            <IconCheck className="text-brand-900" size={14} strokeWidth={3} />
           </Tooltip.Trigger>
           <Tooltip.Content side="bottom">
             <Tooltip.Arrow className="radix-tooltip-arrow" />