chore(ui): refactor logout to utilize new featureFlagging from IDPE (#17625)

ui/src/Logout.tsx

@@ -13,18 +13,16 @@ import {CLOUD, CLOUD_URL, CLOUD_LOGOUT_PATH} from 'src/shared/constants'
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-// Utils
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
-
 const Logout: FC<WithRouterProps> = ({router}) => {
   const handleSignOut = async () => {
-    if (CLOUD && isFlagEnabled('regionBasedLoginPage')) {
-      const config = await getAuth0Config()
+    const config = await getAuth0Config()
+    if (CLOUD && config.socialSignUpOn) {
       const auth0 = new auth0js.WebAuth({
         domain: config.domain,
         clientID: config.clientID,
       })
       auth0.logout({})
+      window.location.href = `${CLOUD_URL}${CLOUD_LOGOUT_PATH}`
       return
     }
     if (CLOUD) {

ui/src/Signin.tsx

@@ -20,7 +20,7 @@ import {CLOUD, CLOUD_SIGNIN_PATHNAME} from 'src/shared/constants'
 import {RemoteDataState} from 'src/types'
 
 // Utils
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {getAuth0Config} from 'src/authorizations/apis'
 
 interface State {
   loading: RemoteDataState
@@ -83,8 +83,8 @@ export class Signin extends PureComponent<Props, State> {
       } = this.props
 
       clearInterval(this.intervalID)
-
-      if (CLOUD && isFlagEnabled('regionBasedLoginPage')) {
+      const config = await getAuth0Config()
+      if (CLOUD && config.socialSignUpOn) {
         this.props.router.replace('/login')
         return
       }

ui/src/me/components/LogoutButton.tsx

@@ -4,30 +4,12 @@ import {Link} from 'react-router'
 
 // Components
 import {Button, ComponentSize} from '@influxdata/clockface'
-import CloudExclude from 'src/shared/components/cloud/CloudExclude'
-import CloudOnly from 'src/shared/components/cloud/CloudOnly'
-import {CLOUD_URL, CLOUD_LOGOUT_PATH} from 'src/shared/constants'
-import {FeatureFlag} from 'src/shared/utils/featureFlag'
 
 const LogoutButton: SFC = () => (
   <>
-    <FeatureFlag name="regionBasedLoginPage">
-      <Link to="/logout">
-        <Button text="Logout" size={ComponentSize.ExtraSmall} />
-      </Link>
-    </FeatureFlag>
-    <FeatureFlag name="regionBasedLoginPage" equals={false}>
-      <CloudExclude>
-        <Link to="/logout">
-          <Button text="Logout" size={ComponentSize.ExtraSmall} />
-        </Link>
-      </CloudExclude>
-      <CloudOnly>
-        <a href={`${CLOUD_URL}${CLOUD_LOGOUT_PATH}`}>
-          <Button text="Logout" size={ComponentSize.ExtraSmall} />
-        </a>
-      </CloudOnly>
-    </FeatureFlag>
+    <Link to="/logout">
+      <Button text="Logout" size={ComponentSize.ExtraSmall} />
+    </Link>
   </>
 )
 

ui/src/pageLayout/components/UserWidget.tsx

@@ -7,7 +7,6 @@ import {connect} from 'react-redux'
 import {TreeNav} from '@influxdata/clockface'
 import CloudExclude from 'src/shared/components/cloud/CloudExclude'
 import CloudOnly from 'src/shared/components/cloud/CloudOnly'
-import {FeatureFlag} from 'src/shared/utils/featureFlag'
 
 // Actions
 import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
@@ -15,7 +14,6 @@ import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
 // Constants
 import {
   CLOUD_URL,
-  CLOUD_LOGOUT_PATH,
   CLOUD_USAGE_PATH,
   CLOUD_BILLING_PATH,
 } from 'src/shared/constants'
@@ -49,44 +47,10 @@ const UserWidget: FC<Props> = ({
     return null
   }
 
-  const logoutURL = `${CLOUD_URL}${CLOUD_LOGOUT_PATH}`
-
   const handleSwitchOrganizations = (): void => {
     handleShowOverlay('switch-organizations', {}, handleDismissOverlay)
   }
 
-  const logoutLink = (
-    <>
-      <FeatureFlag name="regionBasedLoginPage">
-        <TreeNav.UserItem
-          id="logout"
-          label="Logout"
-          linkElement={className => <Link className={className} to="/logout" />}
-        />
-      </FeatureFlag>
-      <FeatureFlag name="regionBasedLoginPage" equals={false}>
-        <CloudExclude>
-          <TreeNav.UserItem
-            id="logout"
-            label="Logout"
-            linkElement={className => (
-              <Link className={className} to="/logout" />
-            )}
-          />
-        </CloudExclude>
-        <CloudOnly>
-          <TreeNav.UserItem
-            id="logout"
-            label="Logout"
-            linkElement={className => (
-              <a className={className} href={logoutURL} />
-            )}
-          />
-        </CloudOnly>
-      </FeatureFlag>
-    </>
-  )
-
   return (
     <TreeNav.User username={me.name} team={org.name}>
       <CloudOnly>
@@ -122,7 +86,11 @@ const UserWidget: FC<Props> = ({
           )}
         />
       </CloudExclude>
-      {logoutLink}
+      <TreeNav.UserItem
+        id="logout"
+        label="Logout"
+        linkElement={className => <Link className={className} to="/logout" />}
+      />
     </TreeNav.User>
   )
 }

ui/src/shared/utils/featureFlag.ts

@@ -7,7 +7,6 @@ export const OSS_FLAGS = {
   telegrafEditor: false,
   customCheckQuery: false,
   matchingNotificationRules: false,
-  regionBasedLoginPage: false,
   treeNav: false,
   demodata: false,
 }
@@ -20,7 +19,6 @@ export const CLOUD_FLAGS = {
   telegrafEditor: false,
   customCheckQuery: false,
   matchingNotificationRules: false,
-  regionBasedLoginPage: false,
   treeNav: false,
   demodata: false,
 }

ui/src/types/auth.ts

@@ -10,4 +10,5 @@ export type Auth0Config = {
   clientID: string
   domain: string
   redirectURL: string
+  socialSignUpOn: boolean
 }