console: heroku oneclick integration

console/src/Endpoints.ts

@@ -23,6 +23,7 @@ const Endpoints = {
   consoleNotificationsStg:
     'https://notifications.hasura-stg.hasura-app.io/v1/graphql',
   consoleNotificationsProd: 'https://notifications.hasura.io/v1/graphql',
+  hasuraCloudDataGraphql: `${globals.cloudDataApiUrl}/v1/graphql`,
 };
 
 const globalCookiePolicy = 'same-origin';

console/src/Globals.ts

@@ -22,7 +22,11 @@ declare global {
       consolePath: string;
       cliUUID: string;
       consoleId: Nullable<string>;
+      herokuOAuthClientId: string;
+      tenantID: Nullable<string>;
+      projectID: Nullable<string>;
       userRole: Nullable<string>;
+      cloudRootDomain: Nullable<string>;
     };
   }
   const CONSOLE_ASSET_VERSION: string;
@@ -55,6 +59,10 @@ const globals = {
   hasuraUUID: '',
   telemetryNotificationShown: false,
   isProduction,
+  herokuOAuthClientId: window.__env.herokuOAuthClientId,
+  hasuraCloudTenantId: window.__env.tenantID,
+  hasuraCloudProjectId: window.__env.projectID,
+  cloudDataApiUrl: `${window.location.protocol}//data.${window.__env.cloudRootDomain}`,
 };
 if (globals.consoleMode === SERVER_CONSOLE_MODE) {
   if (!window.__env.dataApiUrl) {

console/src/components/App/Actions.js

@@ -1,6 +1,6 @@
 import defaultState from './State';
 import { loadConsoleOpts } from '../../telemetry/Actions';
-import { fetchServerConfig } from '../Main/Actions';
+import { fetchServerConfig, fetchHerokuSession } from '../Main/Actions';
 
 const LOAD_REQUEST = 'App/ONGOING_REQUEST';
 const DONE_REQUEST = 'App/DONE_REQUEST';
@@ -13,6 +13,7 @@ export const requireAsyncGlobals = ({ dispatch }) => {
     Promise.all([
       dispatch(loadConsoleOpts()),
       dispatch(fetchServerConfig),
+      dispatch(fetchHerokuSession()),
     ]).finally(callback);
   };
 };

console/src/components/Common/Common.scss

@@ -203,6 +203,10 @@ table tbody tr th {
   display: flex;
   justify-content: space-between;
 }
+.flex_justify_center {
+  display: flex;
+  justify-content: center;
+}
 
 .flex_0 {
   flex: 0;
@@ -1469,7 +1473,9 @@ code {
 
 .db_item_actions {
   width: 14%;
+  display: flex;
   margin-right: 10px;
+  align-items: center;
 }
 
 .text_red {
@@ -1501,11 +1507,13 @@ code {
 }
 
 .connect_db_radio_label {
+  margin-left: 4px;
   margin-right: 24px;
 }
 
 .connect_form_layout {
   width: 50%;
+  padding: 8px;
   display: flex;
   flex-direction: column;
   margin-top: 10px;
@@ -1552,6 +1560,7 @@ code {
 .connnection_settings_form_input_layout {
   display: flex;
   flex-direction: column;
+  align-items: center;
 
   label {
     margin-bottom: 10px !important;

console/src/components/Main/Actions.js

@@ -38,6 +38,9 @@ const FETCH_CONSOLE_NOTIFICATIONS_SET_DEFAULT =
   'Main/FETCH_CONSOLE_NOTIFICATIONS_SET_DEFAULT';
 const FETCH_CONSOLE_NOTIFICATIONS_ERROR =
   'Main/FETCH_CONSOLE_NOTIFICATIONS_ERROR';
+const FETCHING_HEROKU_SESSION = 'Main/FETCHING_HEROKU_SESSION';
+const FETCHING_HEROKU_SESSION_FAILED = 'Main/FETCHING_HEROKU_SESSION_FAILED';
+const SET_HEROKU_SESSION = 'Main/SET_HEROKU_SESSION';
 
 const RUN_TIME_ERROR = 'Main/RUN_TIME_ERROR';
 const registerRunTimeError = data => ({
@@ -455,6 +458,51 @@ const updateMigrationModeStatus = () => (dispatch, getState) => {
   // refresh console
 };
 
+export const setHerokuSession = session => ({
+  type: SET_HEROKU_SESSION,
+  data: session,
+});
+
+// TODO to be queried via Apollo client
+export const fetchHerokuSession = () => dispatch => {
+  if (!globals.herokuOAuthClientId || !globals.hasuraCloudTenantId) {
+    return;
+  }
+  dispatch({
+    type: FETCHING_HEROKU_SESSION,
+  });
+  return fetch(Endpoints.hasuraCloudDataGraphql, {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify({
+      query:
+        'mutation { getHerokuSession { access_token refresh_token expires_in token_type } }',
+    }),
+  })
+    .then(r => r.json())
+    .then(response => {
+      if (response.errors) {
+        dispatch({ type: FETCHING_HEROKU_SESSION_FAILED });
+        console.error('Failed fetching heroku session');
+      } else {
+        const session = response.data.getHerokuSession;
+        if (!session.access_token) {
+          dispatch({ type: FETCHING_HEROKU_SESSION_FAILED });
+          console.error('Failed fetching heroku session');
+        } else {
+          dispatch(setHerokuSession(session));
+        }
+      }
+    })
+    .catch(e => {
+      console.error('Failed fetching Heroku session');
+      console.error(e);
+    });
+};
+
 const mainReducer = (state = defaultState, action) => {
   switch (action.type) {
     case SET_MIGRATION_STATUS_SUCCESS:
@@ -591,6 +639,13 @@ const mainReducer = (state = defaultState, action) => {
         ...state,
         consoleNotifications: [errorNotification],
       };
+    case SET_HEROKU_SESSION:
+      return {
+        ...state,
+        heroku: {
+          session: action.data,
+        },
+      };
     default:
       return state;
   }

console/src/components/Main/Main.js

@@ -85,7 +85,6 @@ class Main extends React.Component {
 
   componentDidMount() {
     const { dispatch } = this.props;
-
     updateRequestHeaders(this.props);
     dispatch(loadServerVersion()).then(() => {
       dispatch(featureCompatibilityInit());

console/src/components/Main/State.ts

@@ -1,4 +1,5 @@
 import { ConsoleNotification } from './ConsoleNotification';
+import { HerokuSession } from '../Services/Data/DataSources/CreateDataSource/Heroku/types';
 
 export interface MainState {
   migrationError: unknown | null;
@@ -32,6 +33,9 @@ export interface MainState {
   featuresCompatibility: Record<string, unknown>;
   postgresVersion: string | null;
   consoleNotifications: ConsoleNotification[];
+  heroku: {
+    session?: HerokuSession;
+  };
 }
 
 const defaultState: MainState = {
@@ -66,6 +70,9 @@ const defaultState: MainState = {
   featuresCompatibility: {},
   postgresVersion: null,
   consoleNotifications: [],
+  heroku: {
+    session: undefined,
+  },
 };
 
 export default defaultState;

console/src/components/Services/Data/DataActions.js

@@ -70,6 +70,9 @@ const REQUEST_ERROR = 'ModifyTable/REQUEST_ERROR';
 
 const SET_ADDITIONAL_COLUMNS_INFO = 'Data/SET_ADDITIONAL_COLUMNS_INFO';
 
+const SET_DB_CONNECTION_ENV_VAR = 'Data/SET_DB_CONNECTION_ENV_VAR';
+const RESET_DB_CONNECTION_ENV_VAR = 'Data/RESET_DB_CONNECTION_ENV_VAR';
+
 export const mergeRemoteRelationshipsWithSchema = (
   remoteRelationships,
   table
@@ -94,6 +97,19 @@ export const mergeRemoteRelationshipsWithSchema = (
   };
 };
 
+export const setDBConnectionDetails = details => {
+  return {
+    type: SET_DB_CONNECTION_ENV_VAR,
+    data: details,
+  };
+};
+
+export const resetDBConnectionEnvVar = () => {
+  return {
+    type: RESET_DB_CONNECTION_ENV_VAR,
+  };
+};
+
 const setUntrackedRelations = () => (dispatch, getState) => {
   const untrackedRelations = getAllUnTrackedRelations(
     getState().tables.allSchemas,
@@ -919,6 +935,19 @@ const dataReducer = (state = defaultState, action) => {
           };
         }),
       };
+    case SET_DB_CONNECTION_ENV_VAR:
+      return {
+        ...state,
+        dbConnection: action.data,
+      };
+    case RESET_DB_CONNECTION_ENV_VAR:
+      return {
+        ...state,
+        dbConnection: {
+          envVar: '',
+          dbURL: '',
+        },
+      };
     default:
       return state;
   }

console/src/components/Services/Data/DataRouter.js

@@ -24,6 +24,7 @@ import {
   ModifyCustomFunction,
   FunctionPermissions,
   ConnectedDatabaseManagePage,
+  ConnectedCreateDataSourcePage,
 } from '.';
 
 import { UPDATE_CURRENT_DATA_SOURCE } from './DataActions';
@@ -50,6 +51,8 @@ const makeDataRouter = (
       <Route path="manage" component={ConnectedDatabaseManagePage} />
       <Route path="schema/manage" component={ConnectedDatabaseManagePage} />
       <Route path="manage/connect" component={ConnectDatabase} />
+      <Route path="manage/create" component={ConnectedCreateDataSourcePage} />
+      <Route path="schema/manage/connect" component={ConnectDatabase} />
       <Route path="manage/edit/:databaseName" component={ConnectDatabase} />
       <Route path=":source" component={ConnectedDataSourceContainer}>
         <Route path="sql" component={rawSQLConnector(connect)} />