From 8290cfd104b12cbdd18d1e91b42e8a6fdcddfbde Mon Sep 17 00:00:00 2001
From: Michael Matloka <dev@twixes.com>
Date: Thu, 12 Jan 2023 12:37:17 +0100
Subject: [PATCH] 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                                  | 29 +++++++++++++++++--
 .../layout/navigation/Navigation.stories.tsx  |  5 ++--
 frontend/src/layout/navigation/Navigation.tsx | 10 +++----
 frontend/src/scenes/App.tsx                   |  5 ++--
 frontend/src/styles/global.scss               |  5 ++++
 5 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 060dbed4b86..2d71af5b4be 100644
--- a/.eslintrc.js
+++ b/.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'],
diff --git a/frontend/src/layout/navigation/Navigation.stories.tsx b/frontend/src/layout/navigation/Navigation.stories.tsx
index 437d0038d6e..178bde9b214 100644
--- a/frontend/src/layout/navigation/Navigation.stories.tsx
+++ b/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>
     )
 }
diff --git a/frontend/src/layout/navigation/Navigation.tsx b/frontend/src/layout/navigation/Navigation.tsx
index 7b67aff85e1..b3e7c26905f 100644
--- a/frontend/src/layout/navigation/Navigation.tsx
+++ b/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>
     )
 }
diff --git a/frontend/src/scenes/App.tsx b/frontend/src/scenes/App.tsx
index 1064611e221..a2baa1b160f 100644
--- a/frontend/src/scenes/App.tsx
+++ b/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
     }
 
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index c047a852377..0cdf7e2dfc8 100644
--- a/frontend/src/styles/global.scss
+++ b/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)