Fix flacky header (#17690)

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

@@ -18,8 +18,9 @@
  */
 import React, { useEffect, useState, useRef } from 'react';
 import cx from 'classnames';
-import { t } from '@superset-ui/core';
+import { styled, t } from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
+import CertifiedIcon from '../CertifiedIcon';
 
 export interface EditableTitleProps {
   canEdit?: boolean;
@@ -34,8 +35,14 @@ export interface EditableTitleProps {
   title?: string;
   defaultTitle?: string;
   placeholder?: string;
+  certifiedBy?: string;
+  certificationDetails?: string;
 }
 
+const StyledCertifiedIcon = styled(CertifiedIcon)`
+  vertical-align: middle;
+`;
+
 export default function EditableTitle({
   canEdit = false,
   editing = false,
@@ -48,6 +55,8 @@ export default function EditableTitle({
   title = '',
   defaultTitle = '',
   placeholder = '',
+  certifiedBy,
+  certificationDetails,
 }: EditableTitleProps) {
   const [isEditing, setIsEditing] = useState(editing);
   const [currentTitle, setCurrentTitle] = useState(title);
@@ -222,6 +231,14 @@ export default function EditableTitle({
       )}
       style={style}
     >
+      {certifiedBy && (
+        <>
+          <StyledCertifiedIcon
+            certifiedBy={certifiedBy}
+            details={certificationDetails}
+          />{' '}
+        </>
+      )}
       {titleComponent}
     </span>
   );

superset-frontend/src/dashboard/components/Header/index.jsx

@@ -22,7 +22,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { styled, t } from '@superset-ui/core';
 import ButtonGroup from 'src/components/ButtonGroup';
-import CertifiedIcon from 'src/components/CertifiedIcon';
 
 import {
   LOG_ACTIONS_PERIODIC_RENDER_DASHBOARD,
@@ -515,19 +514,13 @@ class Header extends React.PureComponent {
         data-test-id={`${dashboardInfo.id}`}
       >
         <div className="dashboard-component-header header-large">
-          {dashboardInfo.certified_by && (
-            <>
-              <CertifiedIcon
-                certifiedBy={dashboardInfo.certified_by}
-                details={dashboardInfo.certification_details}
-              />{' '}
-            </>
-          )}
           <EditableTitle
             title={dashboardTitle}
             canEdit={userCanEdit && editMode}
             onSaveTitle={this.handleChangeText}
             showTooltip={false}
+            certifiedBy={dashboardInfo.certified_by}
+            certificationDetails={dashboardInfo.certification_details}
           />
           <PublishedStatus
             dashboardId={dashboardInfo.id}