[WIP] Anon apex: allow user to choose API version #172

apps/jetstream/src/app/components/anonymous-apex/AnonymousApex.tsx

@@ -1,11 +1,12 @@
 import { css } from '@emotion/react';
 import { useSetTraceFlag } from '@jetstream/connected-ui';
 import { logger } from '@jetstream/shared/client-logger';
-import { ANALYTICS_KEYS, INDEXED_DB, LOG_LEVELS, TITLES } from '@jetstream/shared/constants';
+import { ANALYTICS_KEYS, HTTP, INDEXED_DB, LOG_LEVELS, TITLES } from '@jetstream/shared/constants';
 import { anonymousApex } from '@jetstream/shared/data';
 import { useBrowserNotifications, useDebounce, useNonInitialEffect, useRollbar } from '@jetstream/shared/ui-utils';
 import { ApexHistoryItem, ListItem, MapOf, SalesforceOrgUi } from '@jetstream/types';
 import {
+ ApiVersionDropdown,
  AutoFullHeightContainer,
  Badge,
  Card,
@@ -75,6 +76,7 @@ export const AnonymousApex: FunctionComponent<AnonymousApexProps> = () => {
  const [userDebug, setUserDebug] = useState(false);
  const [textFilter, setTextFilter] = useState<string>('');
  const [visibleResults, setVisibleResults] = useState<string>('');
+ const [apiVersion, setApiVersion] = useState<string>('');
 
  useEffect(() => {
  isMounted.current = true;
@@ -148,7 +150,9 @@ export const AnonymousApex: FunctionComponent<AnonymousApexProps> = () => {
  logRef.current?.revealLine(1);
  setResultsStatus({ hasResults: false, success: false, label: null });
  try {
- const { result, debugLog } = await anonymousApex(selectedOrg, value, logLevel);
+ const { result, debugLog } = await anonymousApex(selectedOrg, value, logLevel, {
+ headers: { [HTTP.HEADERS.X_SFDC_API_VERSION]: apiVersion },
+ });
  if (!result.success) {
  let summary = '';
  summary += `line ${result.line}, column ${result.column}\n`;
@@ -183,7 +187,7 @@ export const AnonymousApex: FunctionComponent<AnonymousApexProps> = () => {
  setLoading(false);
  }
  },
- [historyItems, selectedOrg, logLevel, setHistoryItems, trackEvent]
+ [selectedOrg, logLevel, apiVersion, trackEvent, notifyUser, setHistoryItems, rollbar]
  );
 
  function handleEditorChange(value, event) {
@@ -240,7 +244,8 @@ export const AnonymousApex: FunctionComponent<AnonymousApexProps> = () => {
  }
  actions={
  <Fragment>
- <div className="slds-m-horizontal_x-small">
+ <ApiVersionDropdown className="slds-m-right_x-small" selectedOrg={selectedOrg} onChange={setApiVersion} />
+ <div className="slds-m-right_x-small">
  <ComboboxWithItems
  comboboxProps={{
  label: 'Anonymous Apex',

libs/shared/data/src/lib/client-data.ts

@@ -27,6 +27,7 @@ import {
  UserProfileAuth0Ui,
  UserProfileUi,
 } from '@jetstream/types';
+import { AxiosRequestConfig } from 'axios';
 import parseISO from 'date-fns/parseISO';
 import type {
  AsyncResult,
@@ -36,8 +37,8 @@ import type {
  DescribeSObjectResult,
  ListMetadataQuery,
 } from 'jsforce';
-import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
+import isNil from 'lodash/isNil';
 import { handleExternalRequest, handleRequest, transformListMetadataResponse } from './client-data-data-helper';
 //// LANDING PAGE ROUTES
 
@@ -604,8 +605,15 @@ export async function bulkApiGetRecords<T = any>(
  return handleRequest({ method: 'GET', url: `/api/bulk/${jobId}/${batchId}`, params: { type } }, { org }).then(unwrapResponseIgnoreCache);
 }
 
-export async function anonymousApex(org: SalesforceOrgUi, apex: string, logLevel: string): Promise<AnonymousApexResponse> {
- return handleRequest({ method: 'POST', url: `/api/apex/anonymous`, data: { apex, logLevel } }, { org }).then(unwrapResponseIgnoreCache);
+export async function anonymousApex(
+ org: SalesforceOrgUi,
+ apex: string,
+ logLevel: string,
+ axiosConfig?: AxiosRequestConfig
+): Promise<AnonymousApexResponse> {
+ return handleRequest({ method: 'POST', url: `/api/apex/anonymous`, data: { apex, logLevel }, ...axiosConfig }, { org }).then(
+ unwrapResponseIgnoreCache
+ );
 }
 
 export async function apexCompletions(org: SalesforceOrgUi, type: 'apex' | 'visualforce' = 'apex'): Promise<ApexCompletionResponse> {

libs/types/src/lib/salesforce/types.ts

@@ -750,3 +750,9 @@ export interface GlobalValueSetCustomValue {
  label?: string /** defaults to ValueName */;
  valueName: string;
 }
+
+export interface SalesforceApiVersion {
+ label: string;
+ url: string;
+ version: string;
+}

libs/ui/src/index.ts

@@ -134,6 +134,7 @@ export * from './lib/toolbar/ToolbarItemActions';
 export * from './lib/toolbar/ToolbarItemGroup';
 export * from './lib/tree/Tree';
 export * from './lib/utils/ErrorBoundaryWithoutContent';
+export * from './lib/widgets/ApiVersionDropdown';
 export * from './lib/widgets/CopyToClipboard';
 export * from './lib/widgets/FeedbackLink';
 export * from './lib/widgets/HelpText';

libs/ui/src/lib/widgets/ApiVersionDropdown.tsx

@@ -0,0 +1,81 @@
+import { css } from '@emotion/react';
+import { genericRequest } from '@jetstream/shared/data';
+import { ListItem, SalesforceApiVersion, SalesforceOrgUi } from '@jetstream/types';
+import { FunctionComponent, useCallback, useEffect, useState } from 'react';
+import Picklist, { PicklistProps } from '../form/picklist/Picklist';
+
+export interface ApiVersionDropdownProps {
+ className?: string;
+ label?: string;
+ selectedOrg: SalesforceOrgUi;
+ picklistProps?: PicklistProps;
+ onChange: (version: string) => void;
+}
+
+export const ApiVersionDropdown: FunctionComponent<ApiVersionDropdownProps> = ({
+ className,
+ label = 'API Version',
+ selectedOrg,
+ picklistProps,
+ onChange,
+}) => {
+ const [loadTimestamp, setLoadTimestamp] = useState(() => new Date().getTime());
+ const [items, setItems] = useState<ListItem[]>([]);
+ const [selectedItems, setSelectedItems] = useState<ListItem[]>([]);
+ const [hasError, setHasError] = useState(false);
+ const [loading, setIsLoading] = useState(false);
+
+ useEffect(() => {
+ genericRequest<SalesforceApiVersion[]>(selectedOrg, { method: 'GET', url: `/services/data`, isTooling: false })
+ .then((results) => results.reverse())
+ .then((results) => {
+ const _items = results.map((item) => ({
+ id: item.version,
+ label: item.version,
+ value: item.version,
+ }));
+ setSelectedItems([_items[0]]);
+ setItems(_items);
+ setLoadTimestamp(new Date().getTime());
+ onChange(_items[0].id);
+ })
+ .catch((err) => {
+ setHasError(true);
+ })
+ .finally(() => {
+ setIsLoading(false);
+ });
+ }, [onChange, selectedOrg]);
+
+ const handleChange = useCallback(
+ (selectedItems: ListItem[]) => {
+ setSelectedItems(selectedItems);
+ selectedItems[0] && onChange(selectedItems[0].id);
+ },
+ [onChange]
+ );
+
+ return (
+ <Picklist
+ css={css`
+ width: 75px;
+ `}
+ key={loadTimestamp}
+ className={className}
+ label={label}
+ hideLabel
+ allowDeselection={false}
+ placeholder="Select a Package"
+ items={items}
+ selectedItems={selectedItems}
+ disabled={loading}
+ onChange={handleChange}
+ hasError={hasError}
+ errorMessage="There was a problem loading API versions."
+ errorMessageId="api-version-dropdown-error-message"
+ {...picklistProps}
+ ></Picklist>
+ );
+};
+
+export default ApiVersionDropdown;