Store callback state before OAuth navigation

weaveworks · Nov 9, 2021 · dcf6c59 · dcf6c59
1 parent ac8d583
commit dcf6c59
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 34 deletions.
diff --git a/ui/components/AuthAlert.tsx b/ui/components/AuthAlert.tsx
@@ -22,7 +22,7 @@ const Message = ({ onClick, provider }) => (
     {provider === GitProvider.GitHub ? (
       <GithubAuthButton onClick={onClick} />
     ) : (
-      <GitlabAuthButton />
+      <GitlabAuthButton onClick={onClick} />
     )}
   </Flex>
 );

diff --git a/ui/components/GitlabAuthButton.tsx b/ui/components/GitlabAuthButton.tsx
@@ -3,29 +3,23 @@ import { ButtonProps } from "@material-ui/core";
 import * as React from "react";
 import styled from "styled-components";
 import { AppContext } from "../contexts/AppContext";
-import useNavigation from "../hooks/navigation";
-import { CallbackSessionState } from "../lib/storage";
-import { PageRoute } from "../lib/types";
 import { gitlabOAuthRedirectURI } from "../lib/utils";
 import Button from "./Button";
 
-type Props = { callbackState?: CallbackSessionState } & ButtonProps;
+type Props = ButtonProps;
 
-function GitlabAuthButton({ callbackState, ...props }: Props) {
-  const { currentPage } = useNavigation();
-  const { applicationsClient, storeCallbackState, navigate } =
-    React.useContext(AppContext);
+function GitlabAuthButton({ ...props }: Props) {
+  const { applicationsClient, navigate } = React.useContext(AppContext);
 
-  const handleClick = () => {
+  const handleClick = (e) => {
+    if (props.onClick) {
+      props.onClick(e);
+    }
     applicationsClient
       .GetGitlabAuthURL({
         redirectUri: gitlabOAuthRedirectURI(),
       })
       .then((res) => {
-        if (!callbackState) {
-          callbackState = { page: `/${currentPage}` as PageRoute, state: null };
-        }
-        storeCallbackState(callbackState);
         navigate(res.url);
       });
   };

diff --git a/ui/components/RepoInputWithAuth.tsx b/ui/components/RepoInputWithAuth.tsx
@@ -7,7 +7,6 @@ import {
   GitProvider,
   ParseRepoURLResponse,
 } from "../lib/api/applications/applications.pb";
-import { CallbackSessionState } from "../lib/storage";
 import Button from "./Button";
 import Flex from "./Flex";
 import GithubAuthButton from "./GithubAuthButton";
@@ -16,16 +15,14 @@ import Icon, { IconType } from "./Icon";
 import Input, { InputProps } from "./Input";
 
 type Props = InputProps & {
-  onAuthClick?: (provider: GitProvider) => void;
-  callbackState: CallbackSessionState;
+  onAuthClick: (provider: GitProvider) => void;
   onProviderChange?: (provider: GitProvider) => void;
   isAuthenticated?: boolean;
 };
 
 function RepoInputWithAuth({
   onAuthClick,
   onProviderChange,
-  callbackState,
   isAuthenticated,
   ...props
 }: Props) {
@@ -58,7 +55,7 @@ function RepoInputWithAuth({
         }}
       />
     ) : (
-      <GitlabAuthButton callbackState={callbackState} />
+      <GitlabAuthButton onClick={() => onAuthClick(GitProvider.GitLab)} />
     );
 
   const renderProviderAuthButton =

diff --git a/ui/components/__tests__/RepoInputWithAuth.test.tsx b/ui/components/__tests__/RepoInputWithAuth.test.tsx
@@ -30,14 +30,7 @@ describe("RepoInputWithAuth", () => {
       await act(async () => {
         render(
           withTheme(
-            withContext(
-              <RepoInputWithAuth
-                onAuthClick={() => null}
-                callbackState={null}
-              />,
-              "/",
-              {}
-            )
+            withContext(<RepoInputWithAuth onAuthClick={() => null} />, "/", {})
           )
         );
       });
@@ -57,7 +50,6 @@ describe("RepoInputWithAuth", () => {
               <RepoInputWithAuth
                 value={url}
                 onAuthClick={() => null}
-                callbackState={null}
                 onProviderChange={onProviderChange}
               />,
               "/",
@@ -91,7 +83,6 @@ describe("RepoInputWithAuth", () => {
                 value={url}
                 onAuthClick={onAuthClick}
                 onProviderChange={onProviderChange}
-                callbackState={null}
               />,
               "/",
               c
@@ -132,7 +123,7 @@ describe("RepoInputWithAuth", () => {
               <RepoInputWithAuth
                 value={repoUrl}
                 onProviderChange={onProviderChange}
-                callbackState={null}
+                onAuthClick={() => null}
               />,
               "/",
               c

diff --git a/ui/pages/ApplicationAdd.tsx b/ui/pages/ApplicationAdd.tsx
@@ -19,6 +19,7 @@ import RepoInputWithAuth from "../components/RepoInputWithAuth";
 import { AppContext } from "../contexts/AppContext";
 import { useAddApplication } from "../hooks/applications";
 import { GitProvider } from "../lib/api/applications/applications.pb";
+import { storeCallbackState } from "../lib/storage";
 import { GrpcErrorCodes, PageRoute } from "../lib/types";
 
 type Props = {
@@ -164,6 +165,7 @@ function AddApplication({ className }: Props) {
   };
 
   const handleAuthClick = () => {
+    storeCallbackState({ page: PageRoute.ApplicationAdd, state: formState });
     setAuthOpen(true);
   };
 
@@ -246,10 +248,6 @@ function AddApplication({ className }: Props) {
           <FormElement>
             <RepoInputWithAuth
               isAuthenticated={!!formState.url && credentialsDetected}
-              callbackState={{
-                page: PageRoute.ApplicationAdd,
-                state: formState,
-              }}
               onChange={(e) => {
                 setFormState({
                   ...formState,
@@ -263,6 +261,13 @@ function AddApplication({ className }: Props) {
                 if (provider === GitProvider.GitHub) {
                   setAuthOpen(true);
                 }
+
+                if (provider === GitProvider.GitLab) {
+                  storeCallbackState({
+                    page: PageRoute.ApplicationAdd,
+                    state: formState,
+                  });
+                }
               }}
               required
               id="url"