refactor(navigation): Remove Ant Layout and clean up .main-app-content (#13657)

* Remove Ant `Layout` completely

* Update `react/forbid-elements` rule

* Always apply base `.main-app-content`

.eslintrc.js

@@ -89,11 +89,19 @@ module.exports = {
                     {
                         element: 'Row',
                         message:
-                            'use flex utility classes instead e.g. <Row align="middle"> could be <div className="flex items-center">',
+                            'use flex utility classes instead, e.g. <Row align="middle"> could be <div className="flex items-center">',
                     },
                     {
                         element: 'Col',
-                        message: 'use flex utility classes instead. Most of the time can simply be a plain <div>',
+                        message: 'use flex utility classes instead - most of the time can simply be a plain <div>',
+                    },
+                    {
+                        element: 'Space',
+                        message: 'use flex or space utility classes instead',
+                    },
+                    {
+                        element: 'Card',
+                        message: 'use utility classes instead',
                     },
                     {
                         element: 'Button',
@@ -118,10 +126,25 @@ module.exports = {
                 ],
             },
         ],
+        'react/forbid-elements': [
+            2,
+            {
+                forbid: [
+                    {
+                        element: 'Layout',
+                        message: 'use utility classes instead',
+                    },
+                    {
+                        element: 'Spin',
+                        message: 'use Spinner instead',
+                    },
+                ],
+            },
+        ],
     },
     overrides: [
         {
-            // enable the rule specifically for TypeScript files
+            // disable these rules for files generated by kea-typegen
             files: ['*Type.ts', '*Type.tsx'],
             rules: {
                 '@typescript-eslint/no-explicit-any': ['off'],

frontend/src/layout/navigation/Navigation.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta } from '@storybook/react'
-import { Layout } from 'antd'
 import { TopBar } from './TopBar/TopBar'
 import { SideBar } from './SideBar/SideBar'
 import React from 'react'
@@ -11,11 +10,11 @@ export default {
 
 export function Navigation_(): JSX.Element {
     return (
-        <Layout>
+        <div>
             <TopBar />
             <SideBar>
                 <React.Fragment />
             </SideBar>
-        </Layout>
+        </div>
     )
 }

frontend/src/layout/navigation/Navigation.tsx

@@ -1,4 +1,4 @@
-import { Layout } from 'antd'
+import clsx from 'clsx'
 import { useValues } from 'kea'
 import { BillingAlertsV2 } from 'lib/components/BillingAlertsV2'
 import { sceneLogic } from 'scenes/sceneLogic'
@@ -12,10 +12,10 @@ export function Navigation({ children }: { children: any }): JSX.Element {
     const { sceneConfig, activeScene } = useValues(sceneLogic)
 
     return (
-        <Layout>
+        <div>
             {activeScene !== Scene.Ingestion && <TopBar />}
             <SideBar>
-                <Layout.Content className={!sceneConfig?.plain ? 'main-app-content' : undefined}>
+                <div className={clsx('main-app-content', sceneConfig?.plain && 'main-app-content--plain')}>
                     {!sceneConfig?.plain && (
                         <>
                             <BillingAlertsV2 />
@@ -24,8 +24,8 @@ export function Navigation({ children }: { children: any }): JSX.Element {
                         </>
                     )}
                     {children}
-                </Layout.Content>
+                </div>
             </SideBar>
-        </Layout>
+        </div>
     )
 }

frontend/src/scenes/App.tsx

@@ -1,5 +1,4 @@
 import { kea, useMountedLogic, useValues, BindLogic } from 'kea'
-import { Layout } from 'antd'
 import { ToastContainer, Slide } from 'react-toastify'
 import { preflightLogic } from './PreflightCheck/preflightLogic'
 import { userLogic } from 'scenes/userLogic'
@@ -143,10 +142,10 @@ function AppScene(): JSX.Element | null {
 
     if (!user) {
         return sceneConfig?.onlyUnauthenticated || sceneConfig?.allowUnauthenticated ? (
-            <Layout style={{ minHeight: '100vh' }}>
+            <>
                 {protectedBoundActiveScene}
                 {toastContainer}
-            </Layout>
+            </>
         ) : null
     }
 

frontend/src/styles/global.scss

@@ -562,6 +562,7 @@ input::-ms-clear {
 .main-app-content {
     position: relative; // So that scene-level <Loading/> is positioned correctly.
     min-width: 0;
+    height: 100%;
     padding: 0 1rem 1rem;
 
     @include screen($sm) {
@@ -571,6 +572,10 @@ input::-ms-clear {
     @include screen($lg) {
         padding: 0 2rem 4rem;
     }
+
+    &.main-app-content--plain {
+        padding: 0;
+    }
 }
 
 // AntD overrrides, placed inside `body` to increase specifity (nicely avoiding the need for !important)