[Story]: connectors oauth configuration update

valmi-io · Feb 14, 2024 · 8cf86ba · 8cf86ba
1 parent 90c041c
commit 8cf86ba
Show file tree

Hide file tree

Showing 12 changed files with 82 additions and 23 deletions.
diff --git a/pages/api/oauth2/login/facebook.tsx b/pages/api/oauth2/login/facebook.tsx
@@ -46,13 +46,19 @@ router
 
     let { workspace = '', connector = '', oauth_keys = 'private' } = json;
 
-    let credentials = { ...(req.credentials ?? {}) };
+    let credentials = {};
+    let query_response = { ...(req.credentials ?? {}) };
 
     if (oauth_keys === 'public') {
       credentials = {
         client_id: process.env.AUTH_FACEBOOK_CLIENT_ID,
         client_secret: process.env.AUTH_FACEBOOK_CLIENT_SECRET
       };
+    } else {
+      credentials = {
+        client_id: query_response['AUTH_FACEBOOK_CLIENT_ID'],
+        client_secret: query_response['AUTH_FACEBOOK_CLIENT_SECRET']
+      };
     }
 
     const query = { ...credentials };

diff --git a/pages/api/oauth2/login/google.tsx b/pages/api/oauth2/login/google.tsx
@@ -55,13 +55,19 @@ router
 
     let { workspace = '', connector = '', oauth_keys = 'private' } = json;
 
-    let credentials = { ...(req.credentials ?? {}) };
+    let credentials = {};
+    let query_response = { ...(req.credentials ?? {}) };
 
     if (oauth_keys === 'public') {
       credentials = {
         client_id: process.env.AUTH_GOOGLE_CLIENT_ID,
         client_secret: process.env.AUTH_GOOGLE_CLIENT_SECRET
       };
+    } else {
+      credentials = {
+        client_id: query_response['AUTH_GOOGLE_CLIENT_ID'],
+        client_secret: query_response['AUTH_GOOGLE_CLIENT_SECRET']
+      };
     }
 
     const query = { ...credentials };

diff --git a/pages/api/oauth2/login/hubspot.tsx b/pages/api/oauth2/login/hubspot.tsx
@@ -51,13 +51,19 @@ router.use(oauthKeys).get(async (req, res, next) => {
 
   let { workspace = '', connector = '', oauth_keys = 'private' } = json;
 
-  let credentials = { ...(req.credentials ?? {}) };
+  let credentials = {};
+  let query_response = { ...(req.credentials ?? {}) };
 
   if (oauth_keys === 'public') {
     credentials = {
       client_id: process.env.AUTH_HUBSPOT_CLIENT_ID,
       client_secret: process.env.AUTH_HUBSPOT_CLIENT_SECRET
     };
+  } else {
+    credentials = {
+      client_id: query_response['AUTH_HUBSPOT_CLIENT_ID'],
+      client_secret: query_response['AUTH_HUBSPOT_CLIENT_SECRET']
+    };
   }
 
   const query = { ...credentials };

diff --git a/pages/api/oauth2/login/slack.tsx b/pages/api/oauth2/login/slack.tsx
@@ -53,13 +53,19 @@ router.use(oauthKeys).get(async (req, res, next) => {
 
   let { workspace = '', connector = '', oauth_keys = 'private' } = json;
 
-  let credentials = { ...(req.credentials ?? {}) };
+  let credentials = {};
+  let query_response = { ...(req.credentials ?? {}) };
 
   if (oauth_keys === 'public') {
     credentials = {
       client_id: process.env.AUTH_SLACK_CLIENT_ID,
       client_secret: process.env.AUTH_SLACK_CLIENT_SECRET
     };
+  } else {
+    credentials = {
+      client_id: query_response['AUTH_SLACK_CLIENT_ID'],
+      client_secret: query_response['AUTH_SLACK_CLIENT_SECRET']
+    };
   }
 
   const query = { ...credentials };

diff --git a/pages/api/oauth2/redirect/facebook.tsx b/pages/api/oauth2/redirect/facebook.tsx
@@ -27,13 +27,19 @@ router
 
     let { oauth_keys = 'private' } = json;
 
-    let credentials = { ...(req.credentials ?? {}) };
+    let credentials = {};
+    let query_response = { ...(req.credentials ?? {}) };
 
     if (oauth_keys === 'public') {
       credentials = {
         client_id: process.env.AUTH_FACEBOOK_CLIENT_ID,
         client_secret: process.env.AUTH_FACEBOOK_CLIENT_SECRET
       };
+    } else {
+      credentials = {
+        client_id: query_response['AUTH_FACEBOOK_CLIENT_ID'],
+        client_secret: query_response['AUTH_FACEBOOK_CLIENT_SECRET']
+      };
     }
 
     const query = { ...credentials };

diff --git a/pages/api/oauth2/redirect/google.tsx b/pages/api/oauth2/redirect/google.tsx
@@ -27,13 +27,19 @@ router
 
     let { oauth_keys = 'private' } = json;
 
-    let credentials = { ...(req.credentials ?? {}) };
+    let credentials = {};
+    let query_response = { ...(req.credentials ?? {}) };
 
     if (oauth_keys === 'public') {
       credentials = {
         client_id: process.env.AUTH_GOOGLE_CLIENT_ID,
         client_secret: process.env.AUTH_GOOGLE_CLIENT_SECRET
       };
+    } else {
+      credentials = {
+        client_id: query_response['AUTH_GOOGLE_CLIENT_ID'],
+        client_secret: query_response['AUTH_GOOGLE_CLIENT_SECRET']
+      };
     }
 
     const query = { ...credentials };

diff --git a/pages/api/oauth2/redirect/hubspot.ts b/pages/api/oauth2/redirect/hubspot.ts
@@ -27,13 +27,19 @@ router
 
     let { oauth_keys = 'private' } = json;
 
-    let credentials = { ...(req.credentials ?? {}) };
+    let credentials = {};
+    let query_response = { ...(req.credentials ?? {}) };
 
     if (oauth_keys === 'public') {
       credentials = {
         client_id: process.env.AUTH_HUBSPOT_CLIENT_ID,
         client_secret: process.env.AUTH_HUBSPOT_CLIENT_SECRET
       };
+    } else {
+      credentials = {
+        client_id: query_response['AUTH_HUBSPOT_CLIENT_ID'],
+        client_secret: query_response['AUTH_HUBSPOT_CLIENT_SECRET']
+      };
     }
 
     const query = { ...credentials };

diff --git a/pages/api/oauth2/redirect/slack.tsx b/pages/api/oauth2/redirect/slack.tsx
@@ -27,13 +27,19 @@ router
 
     let { oauth_keys = 'private' } = json;
 
-    let credentials = { ...(req.credentials ?? {}) };
+    let credentials = {};
+    let query_response = { ...(req.credentials ?? {}) };
 
     if (oauth_keys === 'public') {
       credentials = {
         client_id: process.env.AUTH_SLACK_CLIENT_ID,
         client_secret: process.env.AUTH_SLACK_CLIENT_SECRET
       };
+    } else {
+      credentials = {
+        client_id: query_response['AUTH_SLACK_CLIENT_ID'],
+        client_secret: query_response['AUTH_SLACK_CLIENT_SECRET']
+      };
     }
 
     const query = { ...credentials };

diff --git a/pages/spaces/[wid]/connections/create/index.tsx b/pages/spaces/[wid]/connections/create/index.tsx
@@ -136,7 +136,7 @@ const ConnectionFlow = () => {
     }
 
     // check if authorized
-    if (hasAuthorizedOAuth(oauth_params)) {
+    if (hasAuthorizedOAuth(oauth_params, isEditableFlow)) {
       setConnectorConfigInConnectionFlow(dispatch, values, connection_flow);
     } else {
       // update oauth_error in connection flow state

diff --git a/src/components/FormInput/FormFieldAuth.tsx b/src/components/FormInput/FormFieldAuth.tsx
@@ -67,19 +67,22 @@ const FormFieldAuth = (props: any) => {
               {'Configure'}
             </Button>
           ) : (
+            hasOAuthAuthorized && (
+              <Stack sx={{ display: 'flex', flexDirection: 'row' }}>
+                <IconButton color={'primary'}>
+                  <CustomIcon icon={faCheckCircle} />
+                </IconButton>
+              </Stack>
+            )
+          )
+        ) : (
+          hasOAuthAuthorized && (
             <Stack sx={{ display: 'flex', flexDirection: 'row' }}>
-              <Label>{'Configured'}</Label>
-              <IconButton color={hasOAuthAuthorized ? 'primary' : 'error'}>
-                <CustomIcon icon={hasOAuthAuthorized ? faCheckCircle : faCircleXmark} />
+              <IconButton color={'primary'}>
+                <CustomIcon icon={faCheckCircle} />
               </IconButton>
             </Stack>
           )
-        ) : (
-          <Stack sx={{ display: 'flex', flexDirection: 'row' }}>
-            <IconButton color={hasOAuthAuthorized ? 'primary' : 'error'}>
-              <CustomIcon icon={hasOAuthAuthorized ? faCheckCircle : faCircleXmark} />
-            </IconButton>
-          </Stack>
         )}
       </Stack>
       <Item>

diff --git a/src/content/ConnectionFlow/ConnectorConfig/ConnectorConfigUtils.tsx b/src/content/ConnectionFlow/ConnectorConfig/ConnectorConfigUtils.tsx
@@ -90,8 +90,9 @@ export const isConnectorRequiresOAuth = (data: any) => {
   return false;
 };
 
-export const hasAuthorizedOAuth = (oAuthParams: any) => {
-  return !isObjectEmpty(oAuthParams) ? true : false;
+export const hasAuthorizedOAuth = (oAuthParams: any, isEditableFlow: boolean) => {
+  //TODO: HACK - to check if the user has already authorized based on isEditableFlow
+  return !isObjectEmpty(oAuthParams) || isEditableFlow ? true : false;
 };
 
 const getFieldType = ({ hasOAuth, enumFlag, isSecretKey, type }: any) => {

diff --git a/src/content/ConnectionFlow/ConnectorConfig/ConnectorFormFieldsControl.tsx b/src/content/ConnectionFlow/ConnectorConfig/ConnectorFormFieldsControl.tsx
@@ -31,8 +31,15 @@ const ConnectorFormFieldsControl = (props: any) => {
 
   const connection_flow = useSelector((state: RootState) => state.connectionFlow);
 
-  const { flowState: { selected_connector = null, oauth_params = {}, oauth_error = '', connector_spec = null } = {} } =
-    connection_flow;
+  const {
+    flowState: {
+      selected_connector = null,
+      oauth_params = {},
+      oauth_error = '',
+      connector_spec = null,
+      isEditableFlow = false
+    } = {}
+  } = connection_flow;
 
   const workspaceId = useSelector((state: RootState) => state.appFlow.appState.workspaceId);
 
@@ -109,7 +116,7 @@ const ConnectorFormFieldsControl = (props: any) => {
               {...field}
               control={control}
               selectedConnector={selected_connector?.display_name ?? ''}
-              hasAuthorizedOAuth={hasAuthorizedOAuth(oauth_params)}
+              hasAuthorizedOAuth={hasAuthorizedOAuth(oauth_params, isEditableFlow)}
               oauth_error={oauth_error}
               onClick={handleOAuthButtonClick}
               isConnectorConfigured={isConnectorConfigured({ field, keys })}