fix: remove FAB rendered menu in favor of react based one (apache#10401)

superset-frontend/src/views/menu.tsx

@@ -0,0 +1,33 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { supersetTheme, ThemeProvider } from '@superset-ui/style';
+import Menu from 'src/components/Menu/Menu';
+
+const container = document.getElementById('app');
+const bootstrapJson = container?.getAttribute('data-bootstrap') ?? '{}';
+const bootstrap = JSON.parse(bootstrapJson);
+const menu = { ...bootstrap.common.menu_data };
+const app = (
+  <ThemeProvider theme={supersetTheme}>
+    <Menu data={menu} />
+  </ThemeProvider>
+);
+ReactDOM.render(app, document.getElementById('app-menu'));

superset-frontend/webpack.config.js

@@ -181,6 +181,7 @@ const config = {
     dashboard: addPreamble('/src/dashboard/index.jsx'),
     sqllab: addPreamble('/src/SqlLab/index.tsx'),
     crudViews: addPreamble('/src/views/index.tsx'),
+    menu: addPreamble('src/views/menu.tsx'),
     profile: addPreamble('/src/profile/index.tsx'),
     showSavedQuery: [path.join(APP_DIR, '/src/showSavedQuery/index.jsx')],
   },

superset/security/manager.py

@@ -399,18 +399,6 @@ def can_access_table(self, database: "Database", table: "Table") -> bool:
 
         return True
 
-    def get_public_role(self) -> Optional[Any]:  # Optional[self.role_model]
-        from superset import conf
-
-        if not conf.get("PUBLIC_ROLE_LIKE_GAMMA", False):
-            return None
-
-        return (
-            self.get_session.query(self.role_model)
-            .filter_by(name="Public")
-            .one_or_none()
-        )
-
     def user_view_menu_names(self, permission_name: str) -> Set[str]:
         base_query = (
             self.get_session.query(self.viewmenu_model.name)

superset/templates/appbuilder/baselayout.html

@@ -24,9 +24,7 @@
     {% include 'appbuilder/general/alert.html' %}
 
     {% block navbar %}
-        <header class="top" role="header">
-        {% include 'appbuilder/navbar.html' %}
-        </header>
+      {% include 'appbuilder/navbar.html' %}
     {% endblock %}
 
     {% block uncontained %}{% endblock %}
@@ -44,6 +42,7 @@
         {% block content_fluid %}
         {% endblock %}
     </div>
+    <div id="app" data-bootstrap="{{ bootstrap_data() }}"></div>
 
     {% block footer %}
         <footer>

superset/templates/appbuilder/navbar.html

@@ -17,40 +17,29 @@
   under the License.
 #}
 {% set menu = appbuilder.menu %}
-{% set languages = appbuilder.languages %}
-{% set WARNING_MSG = appbuilder.app.config['WARNING_MSG'] %}
 {% set app_icon_width = appbuilder.app.config['APP_ICON_WIDTH'] %}
 {% set logo_target_path = appbuilder.app.config['LOGO_TARGET_PATH'] or '/profile/{}/'.format(current_user.username) %}
 {% set root_path = logo_target_path if not logo_target_path.startswith('/') else '/superset' + logo_target_path if current_user.username is defined else '#'  %}
 
-<div class="navbar navbar-static-top {{menu.extra_classes}}" role="navigation">
-  <div class="container-fluid">
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <a class="navbar-brand" href="{{ root_path }}">
-        <img
-          width="{{ app_icon_width }}"
-          src="{{ appbuilder.app_icon }}"
-          alt="{{ appbuilder.app_name }}"
-        />
-      </a>
-    </div>
-    <div class="navbar-collapse collapse">
-      <ul class="nav navbar-nav">
-        {% if WARNING_MSG %}
-          <li class="alert alert-danger">
-            {{ WARNING_MSG | safe }}
-          </li>
-        {% endif %}
-        {% include 'appbuilder/navbar_menu.html' %}
-      </ul>
-      <ul class="nav navbar-nav navbar-right">
-        {% include 'appbuilder/navbar_right.html' %}
-      </ul>
+{% block navbar %}
+  <div id="app-menu">
+    <div class="navbar navbar-static-top {{menu.extra_classes}}" role="navigation">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="{{ root_path }}">
+            <img
+              width="{{ app_icon_width }}"
+              src="{{ appbuilder.app_icon }}"
+              alt="{{ appbuilder.app_name }}"
+            />
+          </a>
+        </div>
+      </div>
     </div>
   </div>
-</div>
+{% endblock %}

superset/templates/superset/base.html

@@ -33,4 +33,5 @@
 {% block tail_js %}
   {{ super() }}
   {{ js_bundle("preamble") }}
+  {{ js_bundle('menu') }}
 {% endblock %}

superset/templates/superset/basic.html

@@ -67,9 +67,7 @@
   <body {% if standalone_mode %}class="standalone"{% endif %}>
     {% block navbar %}
       {% if not standalone_mode %}
-        <header class="top" role="header">
-          {% include 'appbuilder/navbar.html' %}
-        </header>
+        {% include 'appbuilder/navbar.html' %}
       {% endif %}
     {% endblock %}
 
@@ -99,6 +97,7 @@ <h4 class="modal-title"></h4>
     </div>
 
     {% block tail_js %}
+      {{ js_bundle('menu') }}
       {% if entry %}
         {{ js_bundle(entry) }}
       {% endif %}

superset/views/base.py

@@ -319,6 +319,17 @@ def common_bootstrap_payload() -> Dict[str, Any]:
     }
 
 
+@superset_app.context_processor
+def get_common_bootstrap_data() -> Dict[str, Any]:
+    def serialize_bootstrap_data() -> str:
+        return json.dumps(
+            {"common": common_bootstrap_payload()},
+            default=utils.pessimistic_json_iso_dttm_ser,
+        )
+
+    return {"bootstrap_data": serialize_bootstrap_data}
+
+
 class SupersetListWidget(ListWidget):  # pylint: disable=too-few-public-methods
     template = "superset/fab_overrides/list.html"