feat(redirectTo): added UI part of redirectTo logic for CLOUD users to redirectTo original links after logging in (#18214)

ui/src/Signin.tsx

@@ -8,6 +8,14 @@ import {client} from 'src/utils/api'
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
+// Utils
+import {
+  getFromLocalStorage,
+  removeFromLocalStorage,
+  setToLocalStorage,
+} from 'src/localStorage'
 
 // Actions
 import {notify as notifyAction} from 'src/shared/actions/notifications'
@@ -74,6 +82,10 @@ export class Signin extends PureComponent<Props, State> {
   private checkForLogin = async () => {
     try {
       await client.users.me()
+      const redirectIsSet = !!getFromLocalStorage('redirectTo')
+      if (redirectIsSet) {
+        removeFromLocalStorage('redirectTo')
+      }
     } catch (error) {
       const {
         location: {pathname},
@@ -81,6 +93,17 @@ export class Signin extends PureComponent<Props, State> {
 
       clearInterval(this.intervalID)
 
+      if (CLOUD && isFlagEnabled('redirectto')) {
+        const url = new URL(
+          `${window.location.origin}${CLOUD_SIGNIN_PATHNAME}?redirectTo=${
+            window.location.href
+          }`
+        )
+        setToLocalStorage('redirectTo', window.location.href)
+        window.location.href = url.href
+        throw error
+      }
+
       if (CLOUD) {
         // TODO: add returnTo to CLOUD signin
         window.location.pathname = CLOUD_SIGNIN_PATHNAME

ui/src/authorizations/apis/index.ts

@@ -19,11 +19,15 @@ export const createAuthorization = async (
   }
 }
 
-export const getAuth0Config = async (): Promise<Auth0Config> => {
+export const getAuth0Config = async (
+  redirectTo?: string
+): Promise<Auth0Config> => {
   try {
-    const response = await fetch(
-      `${getAPIBasepath()}/api/v2private/oauth/clientConfig`
-    )
+    let url = `${getAPIBasepath()}/api/v2private/oauth/clientConfig`
+    if (redirectTo) {
+      url = `${getAPIBasepath()}/api/v2private/oauth/clientConfig?redirectTo=${redirectTo}`
+    }
+    const response = await fetch(url)
     const data = await response.json()
     return data
   } catch (error) {

ui/src/localStorage.ts

@@ -29,6 +29,30 @@ export const loadLocalStorage = (): LocalStorage => {
   }
 }
 
+export const setToLocalStorage = (prop: string, value: any): void => {
+  try {
+    window.localStorage.setItem(prop, value)
+  } catch (error) {
+    console.error('unable to setItem onto localStorage: ', error)
+  }
+}
+
+export const getFromLocalStorage = (prop: string): any => {
+  try {
+    return window.localStorage.getItem(prop)
+  } catch (error) {
+    console.error('unable to getItem onto localStorage: ', error)
+  }
+}
+
+export const removeFromLocalStorage = (prop: string): void => {
+  try {
+    return window.localStorage.removeItem(prop)
+  } catch (error) {
+    console.error('unable to getItem onto localStorage: ', error)
+  }
+}
+
 const isValidJSONString = errorString => {
   try {
     JSON.parse(errorString)

ui/src/onboarding/containers/LoginPageContents.tsx

@@ -22,6 +22,7 @@ import auth0js, {WebAuth} from 'auth0-js'
 import {LoginForm} from 'src/onboarding/components/LoginForm'
 import {SocialButton} from 'src/shared/components/SocialButton'
 import {GoogleLogo} from 'src/clientLibraries/graphics'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Types
 import {Auth0Connection, FormFieldValidation} from 'src/types'
@@ -30,6 +31,7 @@ import {Auth0Connection, FormFieldValidation} from 'src/types'
 import {notify} from 'src/shared/actions/notifications'
 import {passwordResetSuccessfully} from 'src/shared/copy/notifications'
 import {getAuth0Config} from 'src/authorizations/apis'
+import {getFromLocalStorage} from 'src/localStorage'
 
 interface ErrorObject {
   emailError?: string
@@ -61,7 +63,13 @@ class LoginPageContents extends PureComponent<DispatchProps> {
 
   public async componentDidMount() {
     try {
-      const config = await getAuth0Config()
+      let config
+      if (isFlagEnabled('redirectto')) {
+        const redirectTo = getFromLocalStorage('redirectTo') || '/'
+        config = await getAuth0Config(redirectTo)
+      } else {
+        config = await getAuth0Config()
+      }
       this.auth0 = new auth0js.WebAuth({
         domain: config.domain,
         clientID: config.clientID,