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,16 @@ 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,
+  DashboardStandaloneMode,
 } from '../util/constants';
 import FilterBar from './nativeFilters/FilterBar/FilterBar';
 import { StickyVerticalBar } from './StickyVerticalBar';
+import { getUrlParam } from '../../utils/common';
 
 const TABS_HEIGHT = 47;
 const HEADER_HEIGHT = 67;
@@ -225,58 +228,73 @@ 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') ===
+      DashboardStandaloneMode.HIDE_NAV_AND_TITLE;
+
+    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';
@@ -34,6 +34,7 @@ import FilterScopeModal from './filterscope/FilterScopeModal';
 import downloadAsImage from '../../utils/downloadAsImage';
 import getDashboardUrl from '../util/getDashboardUrl';
 import { getActiveFilters } from '../util/activeDashboardFilters';
+import { getUrlParam } from '../../utils/common';
 
 const propTypes = {
   addSuccessToast: PropTypes.func.isRequired,
@@ -162,14 +163,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 */

superset-frontend/src/dashboard/util/constants.ts

@@ -69,3 +69,8 @@ export const IN_COMPONENT_ELEMENT_TYPES = ['LABEL'];
 
 // filter scope selector filter fields pane root id
 export const ALL_FILTERS_ROOT = 'ALL_FILTERS_ROOT';
+
+export enum DashboardStandaloneMode {
+  HIDE_NAV = 1,
+  HIDE_NAV_AND_TITLE = 2,
+}

superset-frontend/src/dashboard/util/getDashboardUrl.js → superset-frontend/src/dashboard/util/getDashboardUrl.ts

@@ -16,19 +16,29 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { URL_PARAMS } from 'src/constants';
 import serializeActiveFilterValues from './serializeActiveFilterValues';
 
 export default function getDashboardUrl(
-  pathname,
+  pathname: string,
   filters = {},
   hash = '',
-  standalone = false,
+  standalone?: number | null,
 ) {
+  const newSearchParams = new URLSearchParams();
+
   // convert flattened { [id_column]: values } object
   // to nested filter object
-  const obj = serializeActiveFilterValues(filters);
-  const preselectFilters = encodeURIComponent(JSON.stringify(obj));
+  newSearchParams.set(
+    URL_PARAMS.preselectFilters,
+    JSON.stringify(serializeActiveFilterValues(filters)),
+  );
+
+  if (standalone) {
+    newSearchParams.set(URL_PARAMS.standalone, standalone.toString());
+  }
+
   const hashSection = hash ? `#${hash}` : '';
-  const standaloneParam = standalone ? '&standalone=true' : '';
-  return `${pathname}?preselect_filters=${preselectFilters}${standaloneParam}${hashSection}`;
+
+  return `${pathname}?${newSearchParams.toString()}${hashSection}`;
 }

superset-frontend/src/explore/components/EmbedCodeButton.jsx

@@ -24,6 +24,7 @@ import Popover from 'src/common/components/Popover';
 import FormLabel from 'src/components/FormLabel';
 import CopyToClipboard from 'src/components/CopyToClipboard';
 import { getShortUrl } from 'src/utils/common';
+import { URL_PARAMS } from 'src/constants';
 import { getExploreLongUrl, getURIDirectory } from '../exploreUtils';
 
 const propTypes = {
@@ -66,7 +67,7 @@ export default class EmbedCodeButton extends React.Component {
   generateEmbedHTML() {
     const srcLink = `${window.location.origin + getURIDirectory()}?r=${
       this.state.shortUrlId
-    }&standalone=true&height=${this.state.height}`;
+    }&${URL_PARAMS.standalone}=1&height=${this.state.height}`;
     return (
       '<iframe\n' +
       `  width="${this.state.width}"\n` +

superset-frontend/src/explore/components/ExploreChartPanel.jsx

@@ -47,7 +47,7 @@ const propTypes = {
   table_name: PropTypes.string,
   vizType: PropTypes.string.isRequired,
   form_data: PropTypes.object,
-  standalone: PropTypes.bool,
+  standalone: PropTypes.number,
   timeout: PropTypes.number,
   refreshOverlayVisible: PropTypes.bool,
   chart: chartPropShape,

superset-frontend/src/explore/components/ExploreViewContainer.jsx

@@ -34,6 +34,7 @@ import {
   getFromLocalStorage,
   setInLocalStorage,
 } from 'src/utils/localStorageHelpers';
+import { URL_PARAMS } from 'src/constants';
 import ExploreChartPanel from './ExploreChartPanel';
 import ConnectedControlPanelsContainer from './ControlPanelsContainer';
 import SaveModal from './SaveModal';
@@ -67,7 +68,7 @@ const propTypes = {
   controls: PropTypes.object.isRequired,
   forcedHeight: PropTypes.string,
   form_data: PropTypes.object.isRequired,
-  standalone: PropTypes.bool.isRequired,
+  standalone: PropTypes.number.isRequired,
   timeout: PropTypes.number,
   impressionId: PropTypes.string,
   vizType: PropTypes.string,
@@ -187,7 +188,7 @@ function ExploreViewContainer(props) {
     const payload = { ...props.form_data };
     const longUrl = getExploreLongUrl(
       props.form_data,
-      props.standalone ? 'standalone' : null,
+      props.standalone ? URL_PARAMS.standalone : null,
       false,
     );
     try {