ready only in datasets 🎉

web/src/app/app/(primary_layout)/datasets/[datasetId]/_DatasetsLayout/DatasetsIndividualHeader/DatasetIndividualThreeDotMenu.tsx

@@ -4,7 +4,7 @@ import { BusterRoutes } from '@/routes';
 import { Dropdown, DropdownItems } from '@/components/ui/dropdown';
 import { Button } from '@/components/ui/buttons';
 import React, { useMemo } from 'react';
-import { Dots, DotsVertical, Trash } from '@/components/ui/icons';
+import { Dots, Trash } from '@/components/ui/icons';
 
 export const DatasetIndividualThreeDotMenu: React.FC<{
   datasetId?: string;
@@ -31,7 +31,7 @@ export const DatasetIndividualThreeDotMenu: React.FC<{
   }, [datasetId, onDeleteDataset]);
 
   return (
-    <Dropdown items={items} side={'bottom'}>
+    <Dropdown items={items} side={'bottom'} align={'end'}>
       <Button variant={'ghost'} prefix={<Dots />} />
     </Dropdown>
   );

web/src/app/app/(primary_layout)/datasets/[datasetId]/editor/EditorContent.tsx

@@ -76,11 +76,12 @@ export const EditorContent: React.FC<{
             data={shownData}
             fetchingData={fetchingInitialData || fetchingTempData}
             defaultLayout={defaultLayout}
+            readOnly={true}
           />
         )}
 
         {selectedApp === EditorApps.METADATA && (
-          <MetadataContainer ymlFile={ymlFile} setYmlFile={setYmlFile} />
+          <MetadataContainer ymlFile={ymlFile} setYmlFile={setYmlFile} readOnly={true} />
         )}
       </div>
     </div>

web/src/app/app/(primary_layout)/datasets/[datasetId]/editor/MetadataContainer.tsx

@@ -4,16 +4,17 @@ import React from 'react';
 
 export const MetadataContainer: React.FC<{
   ymlFile: string;
+  readOnly?: boolean;
   setYmlFile: (ymlFile: string) => void;
-}> = React.memo(({ ymlFile, setYmlFile }) => {
+}> = React.memo(({ ymlFile, setYmlFile, readOnly = false }) => {
   return (
-    <div
+    <div className={cn('bg-background flex h-full w-full flex-col overflow-hidden rounded border')}>
-      className={cn('bg-background rounded border', 'flex h-full w-full flex-col overflow-hidden')}>
       <AppCodeEditor
         language="yaml"
-        className="overflow-hidden"
+        className="border-none"
         value={ymlFile}
         onChange={setYmlFile}
+        readOnly={readOnly}
       />
     </div>
   );

web/src/app/app/(primary_layout)/datasets/[datasetId]/page.tsx

@@ -1,25 +1,18 @@
 'use client';
-import React, { use } from 'react';
+import React from 'react';
-import { permanentRedirect, RedirectType } from 'next/navigation';
+import { permanentRedirect } from 'next/navigation';
 import { BusterRoutes, createBusterRoute } from '@/routes';
 
-export default function DashboardPage(
+export default async function DashboardPage(props: { params: Promise<{ datasetId: string }> }) {
-  props: {
+  const params = await props.params;
-    params: Promise<{ datasetId: string }>;
-  }
-) {
-  const params = use(props.params);
 
-  const {
+  const { datasetId } = params;
-    datasetId
-  } = params;
 
   permanentRedirect(
     createBusterRoute({
       route: BusterRoutes.APP_DATASETS_ID_OVERVIEW,
       datasetId
-    }),
+    })
-    RedirectType.replace
   );
 
   return <></>;

web/src/components/features/layouts/AppVerticalCodeSplitter/AppVerticalCodeSplitter.tsx

@@ -18,6 +18,7 @@ export interface AppVerticalCodeSplitterProps {
   disabledSave?: boolean;
   gapAmount?: number;
   className?: string;
+  readOnly?: boolean;
 }
 
 export const AppVerticalCodeSplitter = forwardRef<AppSplitterRef, AppVerticalCodeSplitterProps>(
@@ -29,6 +30,7 @@ export const AppVerticalCodeSplitter = forwardRef<AppSplitterRef, AppVerticalCod
       onRunQuery,
       onSaveSQL,
       data,
+      readOnly = false,
       fetchingData,
       defaultLayout,
       autoSaveId,
@@ -55,6 +57,7 @@ export const AppVerticalCodeSplitter = forwardRef<AppSplitterRef, AppVerticalCod
             onRunQuery={onRunQuery}
             onSaveSQL={onSaveSQL}
             disabledSave={disabledSave}
+            readOnly={readOnly}
           />
         }
         rightChildren={

web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx

@@ -18,8 +18,18 @@ export const SQLContainer: React.FC<{
   onSaveSQL: AppVerticalCodeSplitterProps['onSaveSQL'];
   disabledSave?: AppVerticalCodeSplitterProps['disabledSave'];
   error?: string | null;
+  readOnly?: boolean;
 }> = React.memo(
-  ({ disabledSave, className = '', sql, setDatasetSQL, onRunQuery, onSaveSQL, error }) => {
+  ({
+    disabledSave,
+    className = '',
+    readOnly = false,
+    sql,
+    setDatasetSQL,
+    onRunQuery,
+    onSaveSQL,
+    error
+  }) => {
     const [isRunning, setIsRunning] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
     const { openInfoMessage } = useBusterNotifications();
@@ -57,20 +67,22 @@ export const SQLContainer: React.FC<{
               </Button>
             )}
 
-            <Button
+            {!readOnly && (
-              variant="default"
+              <Button
-              loading={isRunning}
+                variant="default"
-              disabled={!sql}
+                loading={isRunning}
-              className="flex items-center space-x-0"
+                disabled={!sql}
-              onClick={onRunQueryPreflight}
+                className="flex items-center space-x-0"
-              suffix={
+                onClick={onRunQueryPreflight}
-                <div className="flex items-center gap-x-1 text-sm">
+                suffix={
-                  <Command />
+                  <div className="flex items-center gap-x-1 text-sm">
-                  <ReturnKey />
+                    <Command />
-                </div>
+                    <ReturnKey />
-              }>
+                  </div>
-              Run
+                }>
-            </Button>
+                Run
+              </Button>
+            )}
           </div>
         </>
       );
@@ -87,6 +99,7 @@ export const SQLContainer: React.FC<{
           onChange={setDatasetSQL}
           onMetaEnter={onRunQueryPreflight}
           variant={null}
+          readOnly={readOnly}
         />
 
         {error && <ErrorClosableContainer error={error} />}