From f4fbf263411100370d3217b43ec9a37f96cf8e5b Mon Sep 17 00:00:00 2001
From: Jordi Enric <jordi.err@gmail.com>
Date: Wed, 27 Mar 2024 12:56:23 +0100
Subject: [PATCH] mock data, fix form, add motion to drawer

---
 .../CreateWarehouseCollection.tsx             |  9 ++++++-
 .../DefaultExplorerSelectionRenderer.tsx      |  4 +--
 .../interfaces/Settings/Logs/LogTable.tsx     | 22 ++++++++-------
 .../data/collections/collections-query.ts     | 27 +++++++++++++++++++
 apps/studio/styles/react-data-grid-logs.scss  |  2 +-
 5 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/apps/studio/components/interfaces/DataWarehouse/CreateWarehouseCollection.tsx b/apps/studio/components/interfaces/DataWarehouse/CreateWarehouseCollection.tsx
index b2a60cd5f38..a4d20da73c9 100644
--- a/apps/studio/components/interfaces/DataWarehouse/CreateWarehouseCollection.tsx
+++ b/apps/studio/components/interfaces/DataWarehouse/CreateWarehouseCollection.tsx
@@ -54,7 +54,14 @@ export const CreateWarehouseCollectionModal = (props: Props) => {
           <div className="py-4">
             <Modal.Content>
               <div className="space-y-6">
-                <Input required layout="horizontal" label="Collection name" id="name" />
+                <Input
+                  required
+                  layout="horizontal"
+                  label="Collection name"
+                  id="name"
+                  name="name"
+                  autoComplete="off"
+                />
               </div>
             </Modal.Content>
           </div>
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultExplorerSelectionRenderer.tsx b/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultExplorerSelectionRenderer.tsx
index f56d2123791..2955bfd8d63 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultExplorerSelectionRenderer.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultExplorerSelectionRenderer.tsx
@@ -13,9 +13,9 @@ const DefaultExplorerSelectionRenderer = ({ log }: any) => {
   }) => {
     return (
       <div className="grid grid-cols-12">
-        <span className="text-foreground-lighter text-sm col-span-4">{label}</span>
+        <span className="text-foreground-lighter text-sm col-span-3">{label}</span>
         <span
-          className={`text-foreground text-sm col-span-8 overflow-x-auto ${
+          className={`text-foreground text-sm col-span-9 overflow-x-auto ${
             code && 'text-xs font-mono'
           }`}
         >
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx b/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
index 33999fe468c..76ee54505e4 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
@@ -35,6 +35,7 @@ import LogSelection, { LogSelectionProps } from './LogSelection'
 import type { LogData, QueryType } from './Logs.types'
 import DefaultErrorRenderer from './LogsErrorRenderers/DefaultErrorRenderer'
 import ResourcesExceededErrorRenderer from './LogsErrorRenderers/ResourcesExceededErrorRenderer'
+import { motion } from 'framer-motion'
 
 interface Props {
   data?: Array<LogData | Object>
@@ -357,7 +358,7 @@ const LogTable = ({
               [
                 'font-mono tracking-tight',
                 isEqual(row, focusedLog)
-                  ? '!bg-border-stronger rdg-row--focused'
+                  ? 'rdg-row--focused'
                   : ' !bg-studio hover:!bg-surface-100 cursor-pointer',
               ].join(' ')
             }
@@ -380,14 +381,15 @@ const LogTable = ({
             }}
           />
           {logDataRows.length > 0 ? (
-            <div
-              className={
-                queryType
-                  ? 'flex w-1/2 flex-col'
-                  : focusedLog
-                    ? 'flex w-1/2 flex-col'
-                    : 'hidden w-0'
-              }
+            <motion.div
+              variants={{
+                hidden: { width: 0 },
+                visible: { width: '50%' },
+              }}
+              initial="hidden"
+              animate={focusedLog ? 'visible' : 'hidden'}
+              exit="hidden"
+              transition={{ duration: 0.2 }}
             >
               <LogSelection
                 projectRef={projectRef}
@@ -396,7 +398,7 @@ const LogTable = ({
                 queryType={queryType}
                 params={params}
               />
-            </div>
+            </motion.div>
           ) : null}
         </div>
       </section>
diff --git a/apps/studio/data/collections/collections-query.ts b/apps/studio/data/collections/collections-query.ts
index fe3fe3a279a..b9d193dd493 100644
--- a/apps/studio/data/collections/collections-query.ts
+++ b/apps/studio/data/collections/collections-query.ts
@@ -56,6 +56,33 @@ export function useCollectionQuery({ projectRef, collectionId }: CollectionQuery
           payload: {
             foo: 'bar',
           },
+          asdas: {
+            foo: 'bar',
+          },
+          srOZS: {
+            foo: 'bar',
+          },
+          BbXnH: {
+            foo: 'bar',
+          },
+          rLgrg: {
+            foo: 'bar',
+          },
+          QdIIk: {
+            foo: 'bar',
+          },
+          yGISs: {
+            foo: 'bar',
+          },
+          Bhryl: {
+            foo: 'bar',
+          },
+          hDUbQ: {
+            foo: 'bar',
+          },
+          iVzfj: {
+            foo: 'bar',
+          },
           created_at: '27/08/2023 11:36:31',
         },
         {
diff --git a/apps/studio/styles/react-data-grid-logs.scss b/apps/studio/styles/react-data-grid-logs.scss
index 0f268fee3e0..bd0b19f3ca7 100644
--- a/apps/studio/styles/react-data-grid-logs.scss
+++ b/apps/studio/styles/react-data-grid-logs.scss
@@ -15,7 +15,7 @@
 
   .rdg-row {
     &.rdg-row--focused {
-      @apply border-r border-brand;
+      @apply border-r border-brand bg-background-surface-300;
       border-right-width: 4px;
     }