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

@@ -18,28 +18,51 @@
  */
 import getDashboardUrl from 'src/dashboard/util/getDashboardUrl';
 import { DASHBOARD_FILTER_SCOPE_GLOBAL } from 'src/dashboard/reducers/dashboardFilters';
+import { DashboardStandaloneMode } from '../../../../src/dashboard/util/constants';
 
 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',
     );
+  });
 
-    const urlWithStandalone = getDashboardUrl('path', filters, '', true);
+  it('should encode filters with standalone', () => {
+    const urlWithStandalone = getDashboardUrl(
+      'path',
+      filters,
+      '',
+      DashboardStandaloneMode.HIDE_NAV,
+    );
     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&standalone=${DashboardStandaloneMode.HIDE_NAV}`,
+    );
+  });
+
+  it('should encode filters with missing 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',
     );
   });
 });

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

@@ -26,7 +26,8 @@ import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import EmbedCodeButton from 'src/explore/components/EmbedCodeButton';
 import * as exploreUtils from 'src/explore/exploreUtils';
-import * as common from 'src/utils/common';
+import * as urlUtils from 'src/utils/urlUtils';
+import { DashboardStandaloneMode } from 'src/dashboard/util/constants';
 
 const ENDPOINT = 'glob:*/r/shortner/';
 
@@ -53,7 +54,7 @@ describe('EmbedCodeButton', () => {
 
   it('should create a short, standalone, explore url', () => {
     const spy1 = sinon.spy(exploreUtils, 'getExploreLongUrl');
-    const spy2 = sinon.spy(common, 'getShortUrl');
+    const spy2 = sinon.spy(urlUtils, 'getShortUrl');
 
     const wrapper = mount(
       <ThemeProvider theme={supersetTheme}>
@@ -92,15 +93,17 @@ describe('EmbedCodeButton', () => {
       shortUrlId: 100,
     });
     const embedHTML =
-      '<iframe\n' +
-      '  width="2000"\n' +
-      '  height="1000"\n' +
-      '  seamless\n' +
-      '  frameBorder="0"\n' +
-      '  scrolling="no"\n' +
-      '  src="http://localhostendpoint_url?r=100&standalone=true&height=1000"\n' +
-      '>\n' +
-      '</iframe>';
+      `${
+        '<iframe\n' +
+        '  width="2000"\n' +
+        '  height="1000"\n' +
+        '  seamless\n' +
+        '  frameBorder="0"\n' +
+        '  scrolling="no"\n' +
+        '  src="http://localhostendpoint_url?r=100&standalone='
+      }${DashboardStandaloneMode.HIDE_NAV}&height=1000"\n` +
+      `>\n` +
+      `</iframe>`;
     expect(wrapper.instance().generateEmbedHTML()).toBe(embedHTML);
     stub.restore();
   });

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

@@ -30,6 +30,7 @@ import {
   buildTimeRangeString,
   formatTimeRange,
 } from 'src/explore/dateFilterUtils';
+import { DashboardStandaloneMode } from 'src/dashboard/util/constants';
 import * as hostNamesConfig from 'src/utils/hostNamesConfig';
 import { getChartMetadataRegistry } from '@superset-ui/core';
 
@@ -99,7 +100,9 @@ describe('exploreUtils', () => {
       });
       compareURI(
         URI(url),
-        URI('/superset/explore/').search({ standalone: 'true' }),
+        URI('/superset/explore/').search({
+          standalone: DashboardStandaloneMode.HIDE_NAV,
+        }),
       );
     });
     it('preserves main URLs params', () => {
@@ -205,7 +208,7 @@ describe('exploreUtils', () => {
         URI(getExploreLongUrl(formData, 'standalone')),
         URI('/superset/explore/').search({
           form_data: sFormData,
-          standalone: 'true',
+          standalone: DashboardStandaloneMode.HIDE_NAV,
         }),
       );
     });

superset-frontend/src/components/URLShortLinkButton.jsx

@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import { t } from '@superset-ui/core';
 import Popover from 'src/common/components/Popover';
 import CopyToClipboard from './CopyToClipboard';
-import { getShortUrl } from '../utils/common';
+import { getShortUrl } from '../utils/urlUtils';
 import withToasts from '../messageToasts/enhancers/withToasts';
 
 const propTypes = {

superset-frontend/src/components/URLShortLinkModal.tsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import { t } from '@superset-ui/core';
 import CopyToClipboard from './CopyToClipboard';
-import { getShortUrl } from '../utils/common';
+import { getShortUrl } from '../utils/urlUtils';
 import withToasts from '../messageToasts/enhancers/withToasts';
 import ModalTrigger from './ModalTrigger';
 

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/urlUtils';
 
 const TABS_HEIGHT = 47;
 const HEADER_HEIGHT = 67;
@@ -225,7 +228,13 @@ 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
@@ -243,11 +252,14 @@ class DashboardBuilder extends React.Component {
               editMode={editMode}
               // you cannot drop on/displace tabs if they already exist
               disableDragdrop={!!topLevelTabs}
-              style={{ zIndex: 100, ...style }}
+              style={{
+                zIndex: 100,
+                ...style,
+              }}
             >
               {({ dropIndicatorProps }) => (
                 <div>
-                  <DashboardHeader />
+                  {!hideDashboardHeader && <DashboardHeader />}
                   {dropIndicatorProps && <div {...dropIndicatorProps} />}
                   {topLevelTabs && (
                     <WithPopoverMenu
@@ -277,7 +289,6 @@ class DashboardBuilder extends React.Component {
             </DragDroppable>
           )}
         </Sticky>
-
         <StyledDashboardContent
           className="dashboard-content"
           dashboardFiltersOpen={this.state.dashboardFiltersOpen}

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/urlUtils';
 
 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/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

@@ -23,7 +23,8 @@ import { t } from '@superset-ui/core';
 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 { getShortUrl } from 'src/utils/urlUtils';
+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 {