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] 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>