Superset 4.1.0RC2 - Dashboard embedding - now includes editor and last modified timestamp

[nemccarthy]

Bug description

The latest 4.1.0rc2 has in the dashboard header a username and last modified timestamp. This doesn't make sense for the embedded use case and should be hidden from the dashboard title.

This should be hidden just like the Published tag as this is metadata that doesnt make sense outside of the superset app.

Introduced in #27857

How to reproduce the bug

1. Create a dashboard
2. Embed the dashboard in a page
3. View embedded page with very superset specific metadata.

Screenshots/recordings

Superset version

master / latest-dev

Python version

3.9

Node version

16

Browser

Chrome

Additional context

No response

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

Hey @nemccarthy! I'm here to help you with any bugs or questions you have regarding Superset. Let's squash those bugs together!

I found a similar unsolved discussion that might be relevant to your issue: Embedded dashboard: hide edit chart title link, which was last updated on 2024-09-04 ^[1].

To hide the username and last modified timestamp in the dashboard header for the embedded use case in Superset version 4.1.0rc2, you need to modify the titlePanelAdditionalItems array in the render method of the Header component. Specifically, you should remove the MetadataBar component from this array.

Here is the relevant part of the code with the MetadataBar component removed:

return (
  <div
    css={headerContainerStyle}
    data-test="dashboard-header-container"
    data-test-id={dashboardInfo.id}
    className="dashboard-header-container"
  >
    <PageHeaderWithActions
      editableTitleProps={{
        title: dashboardTitle,
        canEdit: userCanEdit && editMode,
        onSave: this.handleChangeText,
        placeholder: t('Add the name of the dashboard'),
        label: t('Dashboard title'),
        showTooltip: false,
      }}
      certificatiedBadgeProps={{
        certifiedBy: dashboardInfo.certified_by,
        details: dashboardInfo.certification_details,
      }}
      faveStarProps={{
        itemId: dashboardInfo.id,
        fetchFaveStar: this.props.fetchFaveStar,
        saveFaveStar: this.props.saveFaveStar,
        isStarred: this.props.isStarred,
        showTooltip: true,
      }}
      titlePanelAdditionalItems={[
        !editMode && (
          <PublishedStatus
            dashboardId={dashboardInfo.id}
            isPublished={isPublished}
            savePublished={this.props.savePublished}
            canEdit={userCanEdit}
            canSave={userCanSaveAs}
            visible={!editMode}
          />
        ),
        // Remove the MetadataBar component to hide username and last modified timestamp
      ]}
      rightPanelAdditionalItems={
        <div className="button-container">
          {userCanSaveAs && (
            <div
              className="button-container"
              data-test="dashboard-edit-actions"
            >
              {editMode && (
                <div css={actionButtonsStyle}>
                  <div className="undoRedo">
                    <Tooltip
                      id="dashboard-undo-tooltip"
                      title={t('Undo the action')}
                    >
                      <StyledUndoRedoButton
                        type="text"
                        disabled={undoLength < 1}
                        onClick={undoLength && onUndo}
                      >
                        <Icons.Undo
                          css={[
                            undoRedoStyle,
                            this.state.emphasizeUndo && undoRedoEmphasized,
                            undoLength < 1 && undoRedoDisabled,
                          ]}
                          data-test="undo-action"
                          iconSize="xl"
                        />
                      </StyledUndoRedoButton>
                    </Tooltip>
                    <Tooltip
                      id="dashboard-redo-tooltip"
                      title={t('Redo the action')}
                    >
                      <StyledUndoRedoButton
                        type="text"
                        disabled={redoLength < 1}
                        onClick={redoLength && onRedo}
                      >
                        <Icons.Redo
                          css={[
                            undoRedoStyle,
                            this.state.emphasizeRedo && undoRedoEmphasized,
                            redoLength < 1 && undoRedoDisabled,
                          ]}
                          data-test="redo-action"
                          iconSize="xl"
                        />
                      </StyledUndoRedoButton>
                    </Tooltip>
                  </div>
                  <Button
                    css={discardBtnStyle}
                    buttonSize="small"
                    onClick={this.constructor.discardChanges}
                    buttonStyle="default"
                    data-test="discard-changes-button"
                    aria-label={t('Discard')}
                  >
                    {t('Discard')}
                  </Button>
                  <Button
                    css={saveBtnStyle}
                    buttonSize="small"
                    disabled={!hasUnsavedChanges}
                    buttonStyle="primary"
                    onClick={this.overwriteDashboard}
                    data-test="header-save-button"
                    aria-label={t('Save')}
                  >
                    {t('Save')}
                  </Button>
                </div>
              )}
            </div>
          )}
          {editMode ? (
            <UndoRedoKeyListeners
              onUndo={this.handleCtrlZ}
              onRedo={this.handleCtrlY}
            />
          ) : (
            <div css={actionButtonsStyle}>
              {NavExtension && <NavExtension />}
              {userCanEdit && (
                <Button
                  buttonStyle="secondary"
                  onClick={this.toggleEditMode}
                  data-test="edit-dashboard-button"
                  className="action-button"
                  css={editButtonStyle}
                  aria-label={t('Edit dashboard')}
                >
                  {t('Edit dashboard')}
                </Button>
              )}
            </div>
          )}
        </div>
      }
      menuDropdownProps={{
        getPopupContainer: triggerNode =>
          triggerNode.closest('.header-with-actions'),
        visible: this.state.isDropdownVisible,
        onVisibleChange: this.setIsDropdownVisible,
      }}
      additionalActionsMenu={
        <ConnectedHeaderActionsDropdown
          addSuccessToast={this.props.addSuccessToast}
          addDangerToast={this.props.addDangerToast}
          dashboardId={dashboardInfo.id}
          dashboardTitle={dashboardTitle}
          dashboardInfo={dashboardInfo}
          dataMask={dataMask}
          layout={layout}
          expandedSlices={expandedSlices}
          customCss={customCss}
          colorNamespace={colorNamespace}
          colorScheme={colorScheme}
          onSave={onSave}
          onChange={onChange}
          forceRefreshAllCharts={this.forceRefresh}
          startPeriodicRender={this.startPeriodicRender}
          refreshFrequency={refreshFrequency}
          shouldPersistRefreshFrequency={shouldPersistRefreshFrequency}
          setRefreshFrequency={setRefreshFrequency}
          updateCss={updateCss}
          editMode={editMode}
          hasUnsavedChanges={hasUnsavedChanges}
          userCanEdit={userCanEdit}
          userCanShare={userCanShare}
          userCanSave={userCanSaveAs}
          userCanCurate={userCanCurate}
          isLoading={isLoading}
          showPropertiesModal={this.showPropertiesModal}
          manageEmbedded={this.showEmbedModal}
          refreshLimit={refreshLimit}
          refreshWarning={refreshWarning}
          lastModifiedTime={lastModifiedTime}
          isDropdownVisible={this.state.isDropdownVisible}
          setIsDropdownVisible={this.setIsDropdownVisible}
          logEvent={logEvent}
        />
      }
      showFaveStar={user?.userId && dashboardInfo?.id}
      showTitlePanelItems
    />
    {this.state.showingPropertiesModal && (
      <PropertiesModal
        dashboardId={dashboardInfo.id}
        dashboardInfo={dashboardInfo}
        dashboardTitle={dashboardTitle}
        show={this.state.showingPropertiesModal}
        onHide={this.hidePropertiesModal}
        colorScheme={this.props.colorScheme}
        onSubmit={handleOnPropertiesChange}
        onlyApply
      />
    )}
    {userCanCurate && (
      <DashboardEmbedModal
        show={this.state.showingEmbedModal}
        onHide={this.hideEmbedModal}
        dashboardId={dashboardInfo.id}
      />
    )}
    <Global
      styles={css`
        .ant-menu-vertical {
          border-right: none;
        }
      `}
    />
  </div>
);

By removing the MetadataBar component, the username and last modified timestamp will no longer be displayed in the dashboard header ^[2].

To continue talking to Dosu, mention @dosu.

[rusackas]

Looks like npm run lint-fix might solve a lot of the CI problems :)