chore(dashboard): Integrate dashboard app into the SPA bundle (apache…

…#14356)

* chore(dashboard): Integrate dashboard app into the SPA bundle

* fix url params

* change variable name

* change title correctly

* custom css

* lint

* remove unused file

* remove content assertions from dashboard tests

* fix case with missing bootstrap data

* fix: respect crud views flag

* crud views -> spa

* remove unused dashboard templates

* fix: remove unused variable

* fix: missed a spot with the crudViews -> spa

* router link to dashboard from dashboard list page

* link using the router when in card mode

* lint

* fix tests, add memory router

* remove  dashboard app files

* split up the bundle a little more

* use webpack preload

superset-frontend/spec/fixtures/mockStore.js

@@ -19,7 +19,7 @@
 import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 
-import rootReducer from 'src/dashboard/reducers/index';
+import { rootReducer } from 'src/views/store';
 
 import mockState from './mockState';
 import {

superset-frontend/src/components/ListViewCard/index.tsx

@@ -97,13 +97,15 @@ const TitleContainer = styled.div`
   }
 `;
 
-const TitleLink = styled.a`
-  color: ${({ theme }) => theme.colors.grayscale.dark1} !important;
-  overflow: hidden;
-  text-overflow: ellipsis;
+const TitleLink = styled.span`
+  & a {
+    color: ${({ theme }) => theme.colors.grayscale.dark1} !important;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
-  & + .title-right {
-    margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+    & + .title-right {
+      margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+    }
   }
 `;
 
@@ -137,9 +139,19 @@ const SkeletonActions = styled(Skeleton.Button)`
 `;
 
 const paragraphConfig = { rows: 1, width: 150 };
+
+interface LinkProps {
+  to: string;
+}
+
+const AnchorLink: React.FC<LinkProps> = ({ to, children }) => (
+  <a href={to}>{children}</a>
+);
+
 interface CardProps {
   title?: React.ReactNode;
   url?: string;
+  linkComponent?: React.ComponentType<LinkProps>;
   imgURL?: string;
   imgFallbackURL?: string;
   imgPosition?: BackgroundPosition;
@@ -157,6 +169,7 @@ interface CardProps {
 function ListViewCard({
   title,
   url,
+  linkComponent,
   titleRight,
   imgURL,
   imgFallbackURL,
@@ -169,13 +182,14 @@ function ListViewCard({
   imgPosition = 'top',
   cover,
 }: CardProps) {
+  const Link = url && linkComponent ? linkComponent : AnchorLink;
   return (
     <StyledCard
       data-test="styled-card"
       cover={
         cover || (
           <Cover>
-            <a href={url}>
+            <Link to={url!}>
               <div className="gradient-container">
                 <ImageLoader
                   src={imgURL || ''}
@@ -184,7 +198,7 @@ function ListViewCard({
                   position={imgPosition}
                 />
               </div>
-            </a>
+            </Link>
             <CoverFooter className="cover-footer">
               {!loading && coverLeft && (
                 <CoverFooterLeft>{coverLeft}</CoverFooterLeft>
@@ -225,7 +239,9 @@ function ListViewCard({
           title={
             <TitleContainer>
               <Tooltip title={title}>
-                <TitleLink href={url}>{title}</TitleLink>
+                <TitleLink>
+                  <Link to={url!}>{title}</Link>
+                </TitleLink>
               </Tooltip>
               {titleRight && <div className="title-right"> {titleRight}</div>}
               <div className="card-actions" data-test="card-actions">

superset-frontend/src/components/Menu/Menu.tsx

@@ -17,11 +17,14 @@
  * under the License.
  */
 import React, { useState } from 'react';
-import { t, styled } from '@superset-ui/core';
+import { Link } from 'react-router-dom';
 import { Nav, Navbar, NavItem } from 'react-bootstrap';
-import NavDropdown from 'src/components/NavDropdown';
+import { t, styled } from '@superset-ui/core';
+
 import { Menu as DropdownMenu } from 'src/common/components';
-import { Link } from 'react-router-dom';
+import NavDropdown from 'src/components/NavDropdown';
+import { getUrlParam } from 'src/utils/urlUtils';
+
 import MenuObject, {
   MenuObjectProps,
   MenuObjectChildProps,
@@ -159,6 +162,10 @@ export function Menu({
 }: MenuProps) {
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
+  // would useQueryParam here but not all apps provide a router context
+  const standalone = getUrlParam('standalone', 'boolean');
+  if (standalone) return <></>;
+
   return (
     <StyledHeader className="top" id="main-menu">
       <Navbar inverse fluid staticTop role="navigation">

superset-frontend/src/dashboard/containers/DashboardPage.tsx

@@ -18,8 +18,8 @@
  */
 import React, { useEffect, useState, FC } from 'react';
 import { useDispatch } from 'react-redux';
+import { useParams } from 'react-router-dom';
 import Loading from 'src/components/Loading';
-import ErrorBoundary from 'src/components/ErrorBoundary';
 import {
   useDashboard,
   useDashboardCharts,
@@ -28,27 +28,38 @@ import {
 import { ResourceStatus } from 'src/common/hooks/apiResources/apiResources';
 import { usePrevious } from 'src/common/hooks/usePrevious';
 import { hydrateDashboard } from 'src/dashboard/actions/hydrate';
-import DashboardContainer from 'src/dashboard/containers/Dashboard';
+import injectCustomCss from 'src/dashboard/util/injectCustomCss';
 
-interface DashboardRouteProps {
-  dashboardIdOrSlug: string;
-}
+const DashboardContainer = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "DashboardContainer" */
+      /* webpackPreload: true */
+      'src/dashboard/containers/Dashboard'
+    ),
+);
 
-const DashboardPage: FC<DashboardRouteProps> = ({
-  dashboardIdOrSlug, // eventually get from react router
-}) => {
+const DashboardPage: FC = () => {
   const dispatch = useDispatch();
+  const { idOrSlug } = useParams<{ idOrSlug: string }>();
   const [isLoaded, setLoaded] = useState(false);
-  const dashboardResource = useDashboard(dashboardIdOrSlug);
-  const chartsResource = useDashboardCharts(dashboardIdOrSlug);
-  const datasetsResource = useDashboardDatasets(dashboardIdOrSlug);
+  const dashboardResource = useDashboard(idOrSlug);
+  const chartsResource = useDashboardCharts(idOrSlug);
+  const datasetsResource = useDashboardDatasets(idOrSlug);
   const isLoading = [dashboardResource, chartsResource, datasetsResource].some(
     resource => resource.status === ResourceStatus.LOADING,
   );
   const wasLoading = usePrevious(isLoading);
   const error = [dashboardResource, chartsResource, datasetsResource].find(
     resource => resource.status === ResourceStatus.ERROR,
   )?.error;
+
+  useEffect(() => {
+    if (dashboardResource.result) {
+      document.title = dashboardResource.result.dashboard_title;
+    }
+  }, [dashboardResource.result]);
+
   useEffect(() => {
     if (
       wasLoading &&
@@ -63,6 +74,7 @@ const DashboardPage: FC<DashboardRouteProps> = ({
           datasetsResource.result,
         ),
       );
+      injectCustomCss(dashboardResource.result.css);
       setLoaded(true);
     }
   }, [
@@ -79,12 +91,4 @@ const DashboardPage: FC<DashboardRouteProps> = ({
   return <DashboardContainer />;
 };
 
-const DashboardPageWithErrorBoundary = ({
-  dashboardIdOrSlug,
-}: DashboardRouteProps) => (
-  <ErrorBoundary>
-    <DashboardPage dashboardIdOrSlug={dashboardIdOrSlug} />
-  </ErrorBoundary>
-);
-
-export default DashboardPageWithErrorBoundary;
+export default DashboardPage;

superset-frontend/src/utils/urlUtils.ts

@@ -40,7 +40,11 @@ export function getUrlParam(paramName: string, type: UrlParamType): unknown {
         return Number(urlParam);
       }
       return null;
-    // TODO: process other types when needed
+    case 'boolean':
+      if (!urlParam) {
+        return null;
+      }
+      return urlParam !== 'false' && urlParam !== '0';
     default:
       return urlParam;
   }