feat: move publish button to check for added engagement (#4756)

Author: asalem1

src/authorizations/components/GenerateTokenDropdown.tsx

@@ -1,7 +1,6 @@
 // Libraries
 import React, {FC} from 'react'
 import {connect, ConnectedProps, useDispatch} from 'react-redux'
-import {withRouter, RouteComponentProps} from 'react-router-dom'
 
 // Components
 import {Dropdown} from '@influxdata/clockface'
@@ -17,10 +16,9 @@ import {getResourcesTokensFailure} from 'src/shared/copy/notifications'
 // Utils
 import {event} from 'src/cloud/utils/reporting'
 
-type GenerateTokenProps = RouteComponentProps
 type ReduxProps = ConnectedProps<typeof connector>
 
-const GenerateTokenDropdown: FC<ReduxProps & GenerateTokenProps> = ({
+const GenerateTokenDropdown: FC<ReduxProps> = ({
   showOverlay,
   dismissOverlay,
   getAllResources,
@@ -110,4 +108,4 @@ const mdtp = {
 
 const connector = connect(null, mdtp)
 
-export default connector(withRouter(GenerateTokenDropdown))
+export default connector(GenerateTokenDropdown)

src/authorizations/components/TokenRow.tsx

@@ -2,7 +2,6 @@
 import React, {createRef, PureComponent, RefObject} from 'react'
 import {connect, ConnectedProps} from 'react-redux'
 import {createDateTimeFormatter} from 'src/utils/datetime/formatters'
-import {withRouter, RouteComponentProps} from 'react-router-dom'
 
 // Actions
 import {
@@ -51,7 +50,7 @@ interface OwnProps {
 
 type ReduxProps = ConnectedProps<typeof connector>
 
-type Props = ReduxProps & OwnProps & RouteComponentProps<{orgID: string}>
+type Props = ReduxProps & OwnProps
 
 const formatter = createDateTimeFormatter(UPDATED_AT_TIME_FORMAT)
 class TokensRow extends PureComponent<Props> {
@@ -192,4 +191,4 @@ const mdtp = {
 
 const connector = connect(null, mdtp)
 
-export const TokenRow = connector(withRouter(TokensRow))
+export const TokenRow = connector(TokensRow)

src/checkout/SuccessOverlay.tsx

@@ -2,7 +2,7 @@
 import React, {FC, useContext} from 'react'
 import {Overlay} from '@influxdata/clockface'
 import {useSelector} from 'react-redux'
-import {useHistory, withRouter} from 'react-router'
+import {useHistory} from 'react-router'
 
 // Components
 import {CheckoutContext} from 'src/checkout/context/checkout'
@@ -53,4 +53,4 @@ const SuccessOverlay: FC = () => {
   )
 }
 
-export default withRouter(SuccessOverlay)
+export default SuccessOverlay

src/checks/components/NewDeadmanCheckEO.tsx

@@ -1,7 +1,6 @@
 // Libraries
 import React, {FunctionComponent, useEffect, useContext} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
-import {withRouter} from 'react-router-dom'
 
 // Components
 import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface'
@@ -69,4 +68,4 @@ const NewCheckOverlay: FunctionComponent = () => {
   )
 }
 
-export default withRouter(NewCheckOverlay)
+export default NewCheckOverlay

src/dataExplorer/components/SaveAsTaskForm.tsx

@@ -1,7 +1,6 @@
 // Libraries
 import React, {PureComponent, ChangeEvent} from 'react'
 import {connect, ConnectedProps} from 'react-redux'
-import {withRouter, RouteComponentProps} from 'react-router-dom'
 
 // Components
 import TaskForm from 'src/tasks/components/TaskForm'
@@ -35,9 +34,7 @@ interface OwnProps {
 type ReduxProps = ConnectedProps<typeof connector>
 type Props = OwnProps & ReduxProps
 
-class SaveAsTaskForm extends PureComponent<
-  Props & RouteComponentProps<{orgID: string}>
-> {
+class SaveAsTaskForm extends PureComponent<Props> {
   public componentDidMount() {
     const {setTaskOption, setNewScript} = this.props
 
@@ -157,4 +154,4 @@ const mdtp = {
 
 const connector = connect(mstp, mdtp)
 
-export default connector(withRouter(SaveAsTaskForm))
+export default connector(SaveAsTaskForm)

src/dataExplorer/components/SaveAsVariable.tsx

@@ -1,6 +1,5 @@
 // Libraries
 import React, {PureComponent} from 'react'
-import {withRouter, RouteComponentProps} from 'react-router-dom'
 import {connect} from 'react-redux'
 
 // Components
@@ -20,9 +19,7 @@ interface StateProps {
 
 type Props = StateProps & OwnProps
 
-class SaveAsVariable extends PureComponent<
-  Props & RouteComponentProps<{orgID: string}>
-> {
+class SaveAsVariable extends PureComponent<Props> {
   render() {
     const {initialScript, onHideOverlay} = this.props
 
@@ -44,7 +41,4 @@ const mstp = (state: AppState) => {
   }
 }
 
-export default connect<StateProps, {}, OwnProps>(
-  mstp,
-  null
-)(withRouter(SaveAsVariable))
+export default connect<StateProps, {}, OwnProps>(mstp, null)(SaveAsVariable)

src/flows/components/header/MenuButton.tsx

@@ -27,6 +27,7 @@ import {downloadImage} from 'src/shared/utils/download'
 // Constants
 import {PROJECT_NAME_PLURAL} from 'src/flows'
 import {CLOUD} from 'src/shared/constants'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 const backgroundColor = '#07070E'
 
@@ -173,12 +174,6 @@ const MenuButton: FC<Props> = ({handleResetShare}) => {
   }
 
   const menuItems: any[] = [
-    {
-      type: 'menuitem',
-      title: 'Save to version history',
-      onClick: handlePublish,
-      icon: IconFont.Save,
-    },
     {
       type: 'menuitem',
       title: 'Version history',
@@ -216,6 +211,15 @@ const MenuButton: FC<Props> = ({handleResetShare}) => {
     },
   ]
 
+  if (!isFlagEnabled('flowPublishButton')) {
+    menuItems.splice(0, 0, {
+      type: 'menuitem',
+      title: 'Save to version history',
+      onClick: handlePublish,
+      icon: IconFont.Save,
+    })
+  }
+
   if (CLOUD) {
     menuItems.splice(3, 0, {
       type: 'menuitem',

src/flows/components/header/index.tsx

@@ -165,6 +165,14 @@ const FlowHeader: FC = () => {
           <PresentationMode />
           <TimeZoneDropdown />
           <TimeRangeDropdown />
+          <FeatureFlag name="flowPublishButton">
+            <SquareButton
+              icon={IconFont.Save}
+              onClick={handlePublish}
+              color={ComponentColor.Default}
+              titleText="Save to version history"
+            />
+          </FeatureFlag>
           {flow?.id && (
             <>
               <SquareButton