Feature: Enable salesforce plugin's account queries from app builder

frontend/src/Editor/DataSourceManager/DataSourceManager.jsx

@@ -192,7 +192,8 @@ class DataSourceManagerComponent extends React.Component {
  createDataSource = () => {
  const { appId, options, selectedDataSource, selectedDataSourcePluginId, dataSourceMeta, dataSourceSchema } =
  this.state;
- const OAuthDs = ['slack', 'zendesk', 'googlesheets'];
+ console.log('selectedDataSource from DatasourceManager', selectedDataSource);
+ const OAuthDs = ['slack', 'zendesk', 'googlesheets', 'salesforce'];
  const name = selectedDataSource.name;
  const kind = selectedDataSource.kind;
  const pluginId = selectedDataSourcePluginId;

frontend/src/MarketplacePage/MarketplaceCard.jsx

@@ -35,8 +35,9 @@ export const MarketplaceCard = ({ id, name, repo, description, version, isInstal
  };
 
  let iconSrc;
-
- if (repo) {
+ if (process.env.NODE_ENV === 'development') {
+ iconSrc = `https://tooljet-plugins-stage.s3.us-east-2.amazonaws.com/marketplace-assets/${id}/lib/icon.svg`;
+ } else if (repo) {
  iconSrc = `https://raw.githubusercontent.com/${repo}/main/lib/icon.svg`;
  } else {
  iconSrc = `${config.TOOLJET_MARKETPLACE_URL}/marketplace-assets/${id}/lib/icon.svg`;

frontend/src/_components/DynamicForm.jsx

@@ -13,6 +13,7 @@ import GoogleSheets from '@/_components/Googlesheets';
 import Slack from '@/_components/Slack';
 import Zendesk from '@/_components/Zendesk';
 import { ConditionFilter, CondtionSort, MultiColumn } from '@/_components/MultiConditions';
+import Salesforce from '@/_components/Salesforce';
 import ToolJetDbOperations from '@/Editor/QueryManager/QueryEditors/TooljetDatabase/ToolJetDbOperations';
 import { orgEnvironmentVariableService, orgEnvironmentConstantService } from '../_services';
 
@@ -154,12 +155,8 @@ const DynamicForm = ({
  return OpenApi;
  case 'react-component-zendesk':
  return Zendesk;
- case 'columns':
- return MultiColumn;
- case 'filters':
- return ConditionFilter;
- case 'sorts':
- return CondtionSort;
+ case 'react-component-salesforce':
+ return Salesforce;
  default:
  return <div>Type is invalid</div>;
  }
@@ -297,6 +294,7 @@ const DynamicForm = ({
  case 'react-component-google-sheets':
  case 'react-component-slack':
  case 'react-component-zendesk':
+ case 'react-component-salesforce':
  return {
  optionchanged,
  createDataSource,

frontend/src/_components/Salesforce.jsx

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { datasourceService } from '@/_services';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-hot-toast';
+import Button from '@/_ui/Button';
+import Select from '@/_ui/Select';
+import Input from '@/_ui/Input';
+
+const Salesforce = ({ optionchanged, createDataSource, options, isSaving, selectedDataSource, workspaceConstants }) => {
+ const [authStatus, setAuthStatus] = useState(null);
+ const { t } = useTranslation();
+ const hostUrl = window.public_config?.TOOLJET_HOST;
+ const subPathUrl = window.public_config?.SUB_PATH;
+ const fullUrl = `${hostUrl}${subPathUrl ? subPathUrl : '/'}oauth2/authorize`;
+ const redirectUri = fullUrl;
+ const selectOptions = [
+ { value: 'v1', label: 'v1' },
+ { value: 'v2', label: 'v2' },
+ ];
+ function authSalesforce() {
+ const provider = 'salesforce';
+ const plugin_id = selectedDataSource?.plugin?.id;
+ const source_options = options;
+ setAuthStatus('waiting_for_url');
+
+ datasourceService
+ .fetchOauth2BaseUrl(provider, plugin_id, source_options)
+ .then((data) => {
+ console.log('options', source_options);
+ console.log('data from Oauth', data.url);
+ console.log('selectedDataSource.kind', selectedDataSource.kind);
+ localStorage.setItem('sourceWaitingForOAuth', 'newSource');
+ optionchanged('provider', provider).then(() => {
+ optionchanged('oauth2', true);
+ optionchanged('plugin_id', plugin_id);
+ });
+ setAuthStatus('waiting_for_token');
+ window.open(data.url);
+ })
+ .catch(({ error }) => {
+ toast.error(error);
+ setAuthStatus(null);
+ });
+ }
+ function saveDataSource() {
+ console.log('selectedDS', selectedDataSource);
+ optionchanged('code', localStorage.getItem('OAuthCode')).then(() => {
+ createDataSource();
+ });
+ }
+
+ return (
+ <div>
+ <div>
+ <label className="form-label text-muted mt-3">API version</label>
+ <Select
+ options={selectOptions}
+ value={options?.api_version?.value}
+ onChange={(value) => optionchanged('api_version', value)}
+ width={'100%'}
+ useMenuPortal={false}
+ />
+ </div>
+ <div>
+ <label className="form-label mt-3">Client ID</label>
+ <Input
+ type="text"
+ className="form-control"
+ onChange={(e) => optionchanged('client_id', e.target.value)}
+ value={options?.client_id?.value ?? ''}
+ placeholder="Client ID"
+ workspaceConstants={workspaceConstants}
+ />
+ </div>
+ <div>
+ <label className="form-label mt-3">Client Secret</label>
+ <Input
+ type="text"
+ className="form-control"
+ onChange={(e) => optionchanged('client_secret', e.target.value)}
+ value={options?.client_secret?.value ?? ''}
+ placeholder="Client Secret"
+ workspaceConstants={workspaceConstants}
+ encrypted={true}
+ />
+ </div>
+ <div>
+ <label className="form-label mt-3">Redirect URI</label>
+ <Input
+ value={redirectUri}
+ helpText="In Salesforce, use the URL above when prompted to enter an OAuth callback or redirect URL"
+ type="copyToClipboard"
+ disabled="true"
+ className="form-control"
+ />
+ </div>
+ <div className="row mt-3">
+ <center>
+ {authStatus === 'waiting_for_token' && (
+ <div>
+ <Button
+ className={`m2 ${isSaving ? ' loading' : ''}`}
+ disabled={isSaving}
+ onClick={() => saveDataSource()}
+ >
+ {isSaving ? t('globals.saving', 'Saving...') : t('globals.saveDatasource', 'Save data source')}
+ </Button>
+ </div>
+ )}
+
+ {(!authStatus || authStatus === 'waiting_for_url') && (
+ <Button
+ className={`m2 ${authStatus === 'waiting_for_url' ? ' btn-loading' : ''}`}
+ disabled={isSaving}
+ onClick={() => authSalesforce()}
+ >
+ {t('slack.connectSalesforce', 'Connect to Salesforce')}
+ </Button>
+ )}
+ </center>
+ </div>
+ </div>
+ );
+};
+export default Salesforce;

frontend/src/_services/datasource.service.js

@@ -69,12 +69,13 @@ function setOauth2Token(dataSourceId, body, current_organization_id) {
  return fetch(`${config.apiUrl}/data_sources/${dataSourceId}/authorize_oauth2`, requestOptions).then(handleResponse);
 }
 
-function fetchOauth2BaseUrl(provider) {
+function fetchOauth2BaseUrl(provider, plugin_id = null, source_options = {}) {
+ const payload = { provider, ...(plugin_id && { plugin_id }), ...(source_options && { source_options }) };
  const requestOptions = {
  method: 'POST',
  headers: authHeader(),
  credentials: 'include',
- body: JSON.stringify({ provider }),
+ body: JSON.stringify(payload),
  };
  return fetch(`${config.apiUrl}/data_sources/fetch_oauth2_base_url`, requestOptions).then(handleResponse);
 }

frontend/src/_styles/theme.scss

@@ -10782,6 +10782,12 @@ tbody {
  top: 5px;
  cursor: pointer;
  }
+ .copy-icon {
+ position: absolute;
+ right: 8px;
+ top: 5px;
+ cursor: pointer;
+ }
 
  .form-control {
  padding-right: 2.2rem;

frontend/src/_ui/Input/index.js

@@ -2,10 +2,13 @@ import React, { useEffect, useState } from 'react';
 import cx from 'classnames';
 import OrgConstantVariablesPreviewBox from '@/_components/OrgConstantsVariablesResolver';
 import SolidIcon from '../Icon/SolidIcons';
+import Button from '@/_ui/Button';
+import { toast } from 'react-hot-toast';
 
 const Input = ({ helpText, ...props }) => {
  const { workspaceVariables, workspaceConstants, value, type, disabled, encrypted } = props;
  const [isFocused, setIsFocused] = useState(false);
+ const [isCopied, setIsCopied] = useState(false);
  const [showPasswordProps, setShowPasswordProps] = useState({
  inputType: type,
  iconType: 'eyedisable',
@@ -19,6 +22,21 @@ const Input = ({ helpText, ...props }) => {
  }
  };
 
+ const handleCopyToClipboard = async () => {
+ if (type === 'copyToClipboard') {
+ try {
+ await navigator.clipboard.writeText(value);
+ toast.success('Copied to clipboard');
+ setIsCopied(true);
+ setTimeout(() => {
+ setIsCopied(false);
+ }, 4000);
+ } catch (err) {
+ console.error('Failed to copy text: ', err);
+ }
+ }
+ };
+
  useEffect(() => {
  if (disabled && encrypted) setShowPasswordProps({ inputType: 'password', iconType: 'eyedisable' });
  }, [disabled]);
@@ -27,15 +45,31 @@ const Input = ({ helpText, ...props }) => {
 
  return (
  <div className="tj-app-input">
- <div className={cx('', { 'tj-app-input-wrapper': type === 'password' || encrypted })}>
+ <div
+ className={cx('', { 'tj-app-input-wrapper': type === 'password' || type === 'copyToClipboard' || encrypted })}
+ >
  <input {...props} type={inputType} onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} />
  {(type === 'password' || encrypted) && (
  <div onClick={!disabled && toggleShowPassword}>
  {' '}
  <SolidIcon className="eye-icon" name={iconType} />
  </div>
  )}
+ {type === 'copyToClipboard' &&
+ value &&
+ (!isCopied ? (
+ <div style={{ cursor: 'pointer' }} onClick={handleCopyToClipboard}>
+ {' '}
+ <SolidIcon className="copy-icon" name="copy" />
+ </div>
+ ) : (
+ <div style={{ color: 'green' }}>
+ {' '}
+ <span>Copied!</span>
+ </div>
+ ))}
  </div>
+
  <OrgConstantVariablesPreviewBox
  workspaceVariables={workspaceVariables}
  workspaceConstants={workspaceConstants}

marketplace/plugins/salesforce/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+lib/*.d.*
+lib/*.js
+lib/*.js.map
+dist/*

marketplace/plugins/salesforce/README.md

@@ -0,0 +1,4 @@
+
+# Salesforce
+
+Documentation on: https://docs.tooljet.com/docs/data-sources/salesforce

marketplace/plugins/salesforce/__tests__/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const salesforce = require('../lib');
+
+describe('salesforce', () => {
+ it.todo('needs tests');
+});