feat(style): hide dashboard header by url parameter

superset-frontend/spec/javascripts/components/AnchorLink_spec.jsx

@@ -27,13 +27,14 @@ describe('AnchorLink', () => {
     anchorLinkId: 'CHART-123',
   };
 
+  const globalLocation = window.location;
+  afterEach(() => {
+    window.location = globalLocation;
+  });
+
   beforeEach(() => {
-    global.window = Object.create(window);
-    Object.defineProperty(window, 'location', {
-      value: {
-        hash: `#${props.anchorLinkId}`,
-      },
-    });
+    delete window.location;
+    window.location = new URL(`https://path?#${props.anchorLinkId}`);
   });
 
   afterEach(() => {

superset-frontend/spec/javascripts/dashboard/util/getDashboardUrl_spec.js

@@ -20,26 +20,43 @@ import getDashboardUrl from 'src/dashboard/util/getDashboardUrl';
 import { DASHBOARD_FILTER_SCOPE_GLOBAL } from 'src/dashboard/reducers/dashboardFilters';
 
 describe('getChartIdsFromLayout', () => {
+  const filters = {
+    '35_key': {
+      values: ['value'],
+      scope: DASHBOARD_FILTER_SCOPE_GLOBAL,
+    },
+  };
+
+  const globalLocation = window.location;
+  afterEach(() => {
+    window.location = globalLocation;
+  });
+
   it('should encode filters', () => {
-    const filters = {
-      '35_key': {
-        values: ['value'],
-        scope: DASHBOARD_FILTER_SCOPE_GLOBAL,
-      },
-    };
     const url = getDashboardUrl('path', filters);
     expect(url).toBe(
       'path?preselect_filters=%7B%2235%22%3A%7B%22key%22%3A%5B%22value%22%5D%7D%7D',
     );
+  });
 
+  it('should encode filters with hash', () => {
     const urlWithHash = getDashboardUrl('path', filters, 'iamhashtag');
     expect(urlWithHash).toBe(
       'path?preselect_filters=%7B%2235%22%3A%7B%22key%22%3A%5B%22value%22%5D%7D%7D#iamhashtag',
     );
+  });
+
+  it('should encode filters with standalone', () => {
+    const urlWithStandalone = getDashboardUrl('path', filters, '', '1');
+    expect(urlWithStandalone).toBe(
+      'path?preselect_filters=%7B%2235%22%3A%7B%22key%22%3A%5B%22value%22%5D%7D%7D&standalone=1',
+    );
+  });
 
-    const urlWithStandalone = getDashboardUrl('path', filters, '', true);
+  it('should encode filters with missed standalone', () => {
+    const urlWithStandalone = getDashboardUrl('path', filters, '', null);
     expect(urlWithStandalone).toBe(
-      'path?preselect_filters=%7B%2235%22%3A%7B%22key%22%3A%5B%22value%22%5D%7D%7D&standalone=true',
+      'path?preselect_filters=%7B%2235%22%3A%7B%22key%22%3A%5B%22value%22%5D%7D%7D',
     );
   });
 });

superset-frontend/spec/javascripts/explore/components/EmbedCodeButton_spec.jsx

@@ -98,7 +98,7 @@ describe('EmbedCodeButton', () => {
       '  seamless\n' +
       '  frameBorder="0"\n' +
       '  scrolling="no"\n' +
-      '  src="http://localhostendpoint_url?r=100&standalone=true&height=1000"\n' +
+      '  src="http://localhostendpoint_url?r=100&standalone=1&height=1000"\n' +
       '>\n' +
       '</iframe>';
     expect(wrapper.instance().generateEmbedHTML()).toBe(embedHTML);

superset-frontend/spec/javascripts/explore/utils_spec.jsx

@@ -99,7 +99,7 @@ describe('exploreUtils', () => {
       });
       compareURI(
         URI(url),
-        URI('/superset/explore/').search({ standalone: 'true' }),
+        URI('/superset/explore/').search({ standalone: '1' }),
       );
     });
     it('preserves main URLs params', () => {
@@ -205,7 +205,7 @@ describe('exploreUtils', () => {
         URI(getExploreLongUrl(formData, 'standalone')),
         URI('/superset/explore/').search({
           form_data: sFormData,
-          standalone: 'true',
+          standalone: '1',
         }),
       );
     });

superset-frontend/src/constants.ts

@@ -22,3 +22,8 @@ export const TIME_WITH_MS = 'HH:mm:ss.SSS';
 
 export const BOOL_TRUE_DISPLAY = 'True';
 export const BOOL_FALSE_DISPLAY = 'False';
+
+export const URL_PARAMS = {
+  standalone: 'standalone',
+  preselectFilters: 'preselect_filters',
+};

superset-frontend/src/dashboard/components/DashboardBuilder.jsx

@@ -42,13 +42,15 @@ import findTabIndexByComponentId from 'src/dashboard/util/findTabIndexByComponen
 import getDirectPathToTabIndex from 'src/dashboard/util/getDirectPathToTabIndex';
 import getLeafComponentIdFromPath from 'src/dashboard/util/getLeafComponentIdFromPath';
 import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
+import { URL_PARAMS } from 'src/constants';
 import {
   DASHBOARD_GRID_ID,
   DASHBOARD_ROOT_ID,
   DASHBOARD_ROOT_DEPTH,
 } from '../util/constants';
 import FilterBar from './nativeFilters/FilterBar/FilterBar';
 import { StickyVerticalBar } from './StickyVerticalBar';
+import { getUrlParam } from '../util/getDashboardUrl';
 
 const TABS_HEIGHT = 47;
 const HEADER_HEIGHT = 67;
@@ -225,58 +227,72 @@ class DashboardBuilder extends React.Component {
 
     const childIds = topLevelTabs ? topLevelTabs.children : [DASHBOARD_GRID_ID];
 
-    const barTopOffset = HEADER_HEIGHT + (topLevelTabs ? TABS_HEIGHT : 0);
+    const hideDashboardHeader =
+      getUrlParam(URL_PARAMS.standalone, 'number') === 2;
+
+    const barTopOffset =
+      (hideDashboardHeader ? 0 : HEADER_HEIGHT) +
+      (topLevelTabs ? TABS_HEIGHT : 0);
 
     return (
       <StickyContainer
-        className={cx('dashboard', editMode && 'dashboard--editing')}
+        className={cx(
+          'dashboard',
+          editMode && 'dashboard--editing',
+          hideDashboardHeader && 'dashboard--no-header',
+        )}
       >
-        <Sticky>
-          {({ style }) => (
-            <DragDroppable
-              component={dashboardRoot}
-              parentComponent={null}
-              depth={DASHBOARD_ROOT_DEPTH}
-              index={0}
-              orientation="column"
-              onDrop={handleComponentDrop}
-              editMode={editMode}
-              // you cannot drop on/displace tabs if they already exist
-              disableDragdrop={!!topLevelTabs}
-              style={{ zIndex: 100, ...style }}
-            >
-              {({ dropIndicatorProps }) => (
-                <div>
-                  <DashboardHeader />
-                  {dropIndicatorProps && <div {...dropIndicatorProps} />}
-                  {topLevelTabs && (
-                    <WithPopoverMenu
-                      shouldFocus={DashboardBuilder.shouldFocusTabs}
-                      menuItems={[
-                        <IconButton
-                          className="fa fa-level-down"
-                          label="Collapse tab content"
-                          onClick={this.handleDeleteTopLevelTabs}
-                        />,
-                      ]}
-                      editMode={editMode}
-                    >
-                      <DashboardComponent
-                        id={topLevelTabs.id}
-                        parentId={DASHBOARD_ROOT_ID}
-                        depth={DASHBOARD_ROOT_DEPTH + 1}
-                        index={0}
-                        renderTabContent={false}
-                        renderHoverMenu={false}
-                        onChangeTab={this.handleChangeTab}
-                      />
-                    </WithPopoverMenu>
-                  )}
-                </div>
-              )}
-            </DragDroppable>
-          )}
-        </Sticky>
+        {!hideDashboardHeader && (
+          <Sticky>
+            {({ style }) => (
+              <DragDroppable
+                component={dashboardRoot}
+                parentComponent={null}
+                depth={DASHBOARD_ROOT_DEPTH}
+                index={0}
+                orientation="column"
+                onDrop={handleComponentDrop}
+                editMode={editMode}
+                // you cannot drop on/displace tabs if they already exist
+                disableDragdrop={!!topLevelTabs}
+                style={{
+                  zIndex: 100,
+                  ...style,
+                }}
+              >
+                {({ dropIndicatorProps }) => (
+                  <div>
+                    <DashboardHeader />
+                    {dropIndicatorProps && <div {...dropIndicatorProps} />}
+                    {topLevelTabs && (
+                      <WithPopoverMenu
+                        shouldFocus={DashboardBuilder.shouldFocusTabs}
+                        menuItems={[
+                          <IconButton
+                            className="fa fa-level-down"
+                            label="Collapse tab content"
+                            onClick={this.handleDeleteTopLevelTabs}
+                          />,
+                        ]}
+                        editMode={editMode}
+                      >
+                        <DashboardComponent
+                          id={topLevelTabs.id}
+                          parentId={DASHBOARD_ROOT_ID}
+                          depth={DASHBOARD_ROOT_DEPTH + 1}
+                          index={0}
+                          renderTabContent={false}
+                          renderHoverMenu={false}
+                          onChangeTab={this.handleChangeTab}
+                        />
+                      </WithPopoverMenu>
+                    )}
+                  </div>
+                )}
+              </DragDroppable>
+            )}
+          </Sticky>
+        )}
 
         <StyledDashboardContent
           className="dashboard-content"

superset-frontend/src/dashboard/components/HeaderActionsDropdown.jsx

@@ -23,7 +23,7 @@ import { styled, SupersetClient, t } from '@superset-ui/core';
 
 import { Menu, NoAnimationDropdown } from 'src/common/components';
 import Icon from 'src/components/Icon';
-
+import { URL_PARAMS } from 'src/constants';
 import CssEditor from './CssEditor';
 import RefreshIntervalModal from './RefreshIntervalModal';
 import SaveModal from './SaveModal';
@@ -32,7 +32,7 @@ import { SAVE_TYPE_NEWDASHBOARD } from '../util/constants';
 import URLShortLinkModal from '../../components/URLShortLinkModal';
 import FilterScopeModal from './filterscope/FilterScopeModal';
 import downloadAsImage from '../../utils/downloadAsImage';
-import getDashboardUrl from '../util/getDashboardUrl';
+import getDashboardUrl, { getUrlParam } from '../util/getDashboardUrl';
 import { getActiveFilters } from '../util/activeDashboardFilters';
 
 const propTypes = {
@@ -162,14 +162,11 @@ class HeaderActionsDropdown extends React.PureComponent {
         break;
       }
       case MENU_KEYS.TOGGLE_FULLSCREEN: {
-        const hasStandalone = window.location.search.includes(
-          'standalone=true',
-        );
         const url = getDashboardUrl(
           window.location.pathname,
           getActiveFilters(),
           window.location.hash,
-          !hasStandalone,
+          getUrlParam(URL_PARAMS.standalone, 'number'),
         );
         window.location.replace(url);
         break;

superset-frontend/src/dashboard/components/StickyVerticalBar.tsx

@@ -22,8 +22,6 @@ import { StickyContainer, Sticky } from 'react-sticky';
 import { styled } from '@superset-ui/core';
 import cx from 'classnames';
 
-export const SUPERSET_HEADER_HEIGHT = 59;
-
 const Wrapper = styled.div`
   position: relative;
   width: ${({ theme }) => theme.gridUnit * 8}px;

superset-frontend/src/dashboard/stylesheets/builder.less

@@ -22,6 +22,10 @@
   flex-grow: 1;
   display: flex;
   flex-direction: column;
+
+  &--no-header {
+    border-top: 1px solid @gray-light;
+  }
 }
 
 /* only top-level tabs have popover, give it more padding to match header + tabs */