From b8a5b07b90fcfd3f60ed0e13cc5b291b8007552c Mon Sep 17 00:00:00 2001
From: eric <eeoneric@gmail.com>
Date: Tue, 17 Dec 2024 11:03:26 -0500
Subject: [PATCH 1/3] dont resize icons

---
 frontend/src/layout/navigation-3000/Navigation.scss      | 9 +++++++++
 .../layout/navigation-3000/components/SidebarList.tsx    | 4 ++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/layout/navigation-3000/Navigation.scss b/frontend/src/layout/navigation-3000/Navigation.scss
index d1a2c037e415d..42bb779a54d82 100644
--- a/frontend/src/layout/navigation-3000/Navigation.scss
+++ b/frontend/src/layout/navigation-3000/Navigation.scss
@@ -570,6 +570,15 @@
     &:hover {
         background: var(--border-3000);
     }
+
+    .SidebarListItem__icon {
+        flex-shrink: 0;
+    }
+
+    .SidebarListItem__name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
 
 .SidebarListItem__rename {
diff --git a/frontend/src/layout/navigation-3000/components/SidebarList.tsx b/frontend/src/layout/navigation-3000/components/SidebarList.tsx
index be14c781abd8d..65cd05d65c4d4 100644
--- a/frontend/src/layout/navigation-3000/components/SidebarList.tsx
+++ b/frontend/src/layout/navigation-3000/components/SidebarList.tsx
@@ -232,8 +232,8 @@ function SidebarListItem({ item, validateName, active, style }: SidebarListItemP
     if (isItemClickable(item)) {
         content = (
             <li className="SidebarListItem__button" onClick={item.onClick}>
-                {item.icon}
-                <h5>{item.name}</h5>
+                {item.icon && <div className="SidebarListItem__icon">{item.icon}</div>}
+                <h5 className="SidebarListItem__name">{item.name}</h5>
             </li>
         )
     } else if (!save || (!isItemTentative(item) && newName === null)) {

From 763d649753a749bd31a525317ac3d62c554212d6 Mon Sep 17 00:00:00 2001
From: eric <eeoneric@gmail.com>
Date: Tue, 17 Dec 2024 11:10:57 -0500
Subject: [PATCH 2/3] add beta tag and description to materialization

---
 .../editor/OutputPaneTabs/InfoTab.tsx         | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/scenes/data-warehouse/editor/OutputPaneTabs/InfoTab.tsx b/frontend/src/scenes/data-warehouse/editor/OutputPaneTabs/InfoTab.tsx
index 817f440cc1014..45596c4779bd0 100644
--- a/frontend/src/scenes/data-warehouse/editor/OutputPaneTabs/InfoTab.tsx
+++ b/frontend/src/scenes/data-warehouse/editor/OutputPaneTabs/InfoTab.tsx
@@ -1,4 +1,4 @@
-import { LemonButton, Tooltip } from '@posthog/lemon-ui'
+import { LemonButton, LemonTag, Tooltip } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { LemonTable } from 'lib/lemon-ui/LemonTable'
 import { humanFriendlyDetailedTime } from 'lib/utils'
@@ -18,7 +18,10 @@ export function InfoTab({ codeEditorKey }: InfoTabProps): JSX.Element {
     return (
         <div className="flex flex-col flex-1 m-4 gap-4">
             <div>
-                <h3>Materialization</h3>
+                <div className="flex flex-row items-center gap-2">
+                    <h3 className="mb-0">Materialization</h3>
+                    <LemonTag type="warning">BETA</LemonTag>
+                </div>
                 <div>
                     {isEditingMaterializedView ? (
                         <div>
@@ -38,13 +41,19 @@ export function InfoTab({ codeEditorKey }: InfoTabProps): JSX.Element {
                             </LemonButton>
                         </div>
                     ) : (
-                        <LemonButton
-                            onClick={() => editingView && runDataWarehouseSavedQuery(editingView.id)}
-                            type="primary"
-                            disabledReason={editingView ? undefined : 'You must save the view first'}
-                        >
-                            Materialize
-                        </LemonButton>
+                        <div>
+                            <p>
+                                Materialized views are a way to pre-compute data in your data warehouse. This allows you
+                                to run queries faster and more efficiently.
+                            </p>
+                            <LemonButton
+                                onClick={() => editingView && runDataWarehouseSavedQuery(editingView.id)}
+                                type="primary"
+                                disabledReason={editingView ? undefined : 'You must save the view first'}
+                            >
+                                Materialize
+                            </LemonButton>
+                        </div>
                     )}
                 </div>
             </div>

From d6ba5292efa19382dfe69b587661ff1a6b9f1fbe Mon Sep 17 00:00:00 2001
From: eric <eeoneric@gmail.com>
Date: Tue, 17 Dec 2024 11:13:18 -0500
Subject: [PATCH 3/3] don't mute text

---
 .../src/scenes/data-warehouse/editor/OutputPaneTabs/InfoTab.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/scenes/data-warehouse/editor/OutputPaneTabs/InfoTab.tsx b/frontend/src/scenes/data-warehouse/editor/OutputPaneTabs/InfoTab.tsx
index 45596c4779bd0..1c3bbe26558cc 100644
--- a/frontend/src/scenes/data-warehouse/editor/OutputPaneTabs/InfoTab.tsx
+++ b/frontend/src/scenes/data-warehouse/editor/OutputPaneTabs/InfoTab.tsx
@@ -59,7 +59,7 @@ export function InfoTab({ codeEditorKey }: InfoTabProps): JSX.Element {
             </div>
             <div>
                 <h3>Dependencies</h3>
-                <p className="text-muted">
+                <p>
                     Dependencies are tables that this query uses. See when a source or materialized table was last run.
                 </p>
             </div>