Misc/dec-11-2023

apps/api/project.json

@@ -20,7 +20,7 @@
       },
       "configurations": {
         "production": {
-          "optimization": true,
+          "optimization": false,
           "extractLicenses": true,
           "inspect": false,
           "sourceMap": true,

apps/jetstream-e2e/src/pageObjectModels/QueryPage.model.ts

@@ -206,7 +206,7 @@ export class QueryPage {
     }
     await this.page.getByRole('button', { name: 'Collapse SOQL Query' }).click();
 
-    await this.page.getByRole('button', { name: 'History' }).click();
+    await this.page.getByLabel('Query History').click();
 
     // verify query history
     await expect(
@@ -229,7 +229,7 @@ export class QueryPage {
       buttonName = 'Saved';
       role = 'button';
     }
-    await this.page.getByRole('button', { name: 'History' }).click();
+    await this.page.getByLabel('Query History').click();
     await this.page.getByTestId(`query-history-${query}`).getByRole(role, { name: buttonName }).click();
   }
 

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

@@ -14,9 +14,12 @@ import {
   CopyToClipboard,
   Grid,
   Icon,
+  KeyboardShortcut,
   SalesforceLogin,
   Spinner,
+  Tooltip,
   ViewDocsLink,
+  getModifierKey,
 } from '@jetstream/ui';
 import Editor, { OnMount, useMonaco } from '@monaco-editor/react';
 import localforage from 'localforage';
@@ -248,10 +251,19 @@ export const AnonymousApex: FunctionComponent<AnonymousApexProps> = () => {
                     onSelected={(item) => setLogLevel(item.id)}
                   />
                 </div>
-                <button className="slds-button slds-button_brand" onClick={() => onSubmit(apex)}>
-                  <Icon type="utility" icon="apex" className="slds-button__icon slds-button__icon_left" omitContainer />
-                  Submit
-                </button>
+                <Tooltip
+                  delay={[300, null]}
+                  content={
+                    <div className="slds-p-bottom_small">
+                      <KeyboardShortcut inverse keys={[getModifierKey(), 'enter']} />
+                    </div>
+                  }
+                >
+                  <button className="slds-button slds-button_brand" onClick={() => onSubmit(apex)}>
+                    <Icon type="utility" icon="apex" className="slds-button__icon slds-button__icon_left" omitContainer />
+                    Submit
+                  </button>
+                </Tooltip>
               </Fragment>
             }
           >

apps/jetstream/src/app/components/debug-log-viewer/DebugLogViewerTable.tsx

@@ -22,6 +22,8 @@ export const LogViewedRenderer: FunctionComponent<RenderCellProps<ApexLogWithVie
   return null;
 };
 
+const INITIAL_SORT = [{ columnKey: 'LastModifiedDate', direction: 'DESC' } as const];
+
 const COLUMNS: ColumnWithFilter<ApexLogWithViewed>[] = [
   {
     name: '',
@@ -101,7 +103,13 @@ export const DebugLogViewerTable: FunctionComponent<DebugLogViewerTableProps> =
 
   return (
     <AutoFullHeightContainer fillHeight setHeightAttr bottomBuffer={75}>
-      <DataTable columns={COLUMNS} data={logs} getRowKey={getRowId} onCellClick={handleSelectionChanged} />
+      <DataTable
+        columns={COLUMNS}
+        data={logs}
+        getRowKey={getRowId}
+        initialSortColumns={INITIAL_SORT}
+        onCellClick={handleSelectionChanged}
+      />
     </AutoFullHeightContainer>
   );
 };

apps/jetstream/src/app/components/debug-log-viewer/useDebugLogs.tsx

@@ -50,7 +50,7 @@ export function useDebugLogs(org: SalesforceOrgUi, { limit, pollInterval, userId
             setLogs(queryResults.records);
           } else {
             setLogs((logs) =>
-              orderBy(Object.values({ ...getMapOf(logs, 'Id'), ...getMapOf(queryResults.records, 'Id') }), ['Id'], ['asc'])
+              orderBy(Object.values({ ...getMapOf(logs, 'Id'), ...getMapOf(queryResults.records, 'Id') }), ['LastModifiedDate'], ['desc'])
             );
           }
           setLoading(false);

apps/jetstream/src/app/components/deploy/DeployMetadataDeployment.tsx

@@ -297,6 +297,7 @@ export const DeployMetadataDeployment: FunctionComponent<DeployMetadataDeploymen
             />
             <DeployMetadataToOrg selectedOrg={selectedOrg} loading={loading} selectedRows={selectedRows} />
             <DropDown
+              className="slds-button_last"
               position="right"
               items={[
                 {

apps/jetstream/src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryModal.tsx

@@ -1,11 +1,23 @@
 import { css } from '@emotion/react';
 import { logger } from '@jetstream/shared/client-logger';
 import { ANALYTICS_KEYS } from '@jetstream/shared/constants';
-import { useRollbar } from '@jetstream/shared/ui-utils';
+import { hasModifierKey, isHKey, useGlobalEventHandler, useRollbar } from '@jetstream/shared/ui-utils';
 import { MapOf, SalesforceDeployHistoryItem, SalesforceOrgUi } from '@jetstream/types';
-import { EmptyState, FileDownloadModal, Icon, Modal, OpenRoadIllustration, ScopedNotification, Spinner, fireToast } from '@jetstream/ui';
+import {
+  EmptyState,
+  FileDownloadModal,
+  Icon,
+  KeyboardShortcut,
+  Modal,
+  OpenRoadIllustration,
+  ScopedNotification,
+  Spinner,
+  Tooltip,
+  fireToast,
+  getModifierKey,
+} from '@jetstream/ui';
 import classNames from 'classnames';
-import { Fragment, useEffect, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import * as fromAppState from '../../../app-state';
 import ConfirmPageChange from '../../core/ConfirmPageChange';
@@ -57,6 +69,20 @@ export const DeployMetadataHistoryModal = ({ className }: DeployMetadataHistoryM
   const [errorMessage, setError] = useState<string | null>(null);
   const orgsById = useRecoilValue(fromAppState.salesforceOrgsById);
 
+  const onKeydown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!isOpen && hasModifierKey(event as any) && isHKey(event as any)) {
+        event.stopPropagation();
+        event.preventDefault();
+        handleToggleOpen(true, 'keyboardShortcut');
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isOpen]
+  );
+
+  useGlobalEventHandler('keydown', onKeydown);
+
   useEffect(() => {
     if (isOpen) {
       setIsLoading(true);
@@ -77,10 +103,10 @@ export const DeployMetadataHistoryModal = ({ className }: DeployMetadataHistoryM
     }
   }, [isOpen]);
 
-  function handleToggleOpen(open: boolean) {
+  function handleToggleOpen(open: boolean, source = 'buttonClick') {
     setIsOpen(open);
     if (open) {
-      trackEvent(ANALYTICS_KEYS.deploy_history_opened);
+      trackEvent(ANALYTICS_KEYS.deploy_history_opened, source);
     }
   }
 
@@ -161,15 +187,23 @@ export const DeployMetadataHistoryModal = ({ className }: DeployMetadataHistoryM
 
   return (
     <Fragment>
-      <button
-        className={classNames('slds-button slds-button_neutral', className)}
-        aria-haspopup="true"
-        title="View deployment history"
-        onClick={() => handleToggleOpen(true)}
+      <Tooltip
+        content={
+          <div className="slds-p-bottom_small">
+            <KeyboardShortcut inverse keys={[getModifierKey(), 'h']} />
+          </div>
+        }
       >
-        <Icon type="utility" icon="date_time" className="slds-button__icon slds-button__icon_left" omitContainer />
-        <span>History</span>
-      </button>
+        <button
+          className={classNames('slds-button slds-button_neutral slds-m-right_xx-small', className)}
+          aria-haspopup="true"
+          title="View deployment history"
+          onClick={() => handleToggleOpen(true)}
+        >
+          <Icon type="utility" icon="date_time" className="slds-button__icon slds-button__icon_left" omitContainer />
+          <span>History</span>
+        </button>
+      </Tooltip>
       {downloadPackageModalState.open && downloadPackageModalState.org && downloadPackageModalState.data && (
         <FileDownloadModal
           org={downloadPackageModalState.org}

apps/jetstream/src/app/components/load-records-multi-object/load-records-multi-object-utils.ts

@@ -398,12 +398,12 @@ export function getDataGraph(
         (
           {
             transformedRecord,
+            externalIdValue,
             recordIdForUpdate,
             dependencies,
           }: { transformedRecord: MapOf<any>; externalIdValue: string | null; recordIdForUpdate: string | null; dependencies: string[] },
           header
         ) => {
-          let externalIdValue: string | null = null;
           const field = dataset.fieldsByName[header.toLowerCase()];
           let value = record[header];
           const valueIsNull = isNil(value) || (isString(value) && !value);

apps/jetstream/src/app/components/platform-event-monitor/PlatformEventMonitor.tsx

@@ -1,16 +1,16 @@
 import { css } from '@emotion/react';
 import { TITLES } from '@jetstream/shared/constants';
-import { useTitle } from '@jetstream/shared/ui-utils';
+import { useNonInitialEffect, useTitle } from '@jetstream/shared/ui-utils';
 import { SplitWrapper as Split } from '@jetstream/splitjs';
-import { ListItem, SalesforceOrgUi } from '@jetstream/types';
+import { ListItem, ListItemGroup, SalesforceOrgUi } from '@jetstream/types';
 import { AutoFullHeightContainer } from '@jetstream/ui';
-import type { DescribeGlobalSObjectResult } from 'jsforce';
 import { FunctionComponent, useEffect, useRef, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { applicationCookieState, selectedOrgState } from '../../app-state';
 import PlatformEventMonitorFetchEventStatus from './PlatformEventMonitorFetchEventStatus';
 import PlatformEventMonitorListenerCard from './PlatformEventMonitorListenerCard';
 import PlatformEventMonitorPublisherCard from './PlatformEventMonitorPublisherCard';
+import { PlatformEventObject } from './platform-event-monitor.types';
 import { usePlatformEvent } from './usePlatformEvent';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -32,8 +32,9 @@ export const PlatformEventMonitor: FunctionComponent<PlatformEventMonitorProps>
     subscribe,
     unsubscribe,
   } = usePlatformEvent({ selectedOrg });
-  const [platformEventsList, setPlatformEventsList] = useState<ListItem<string, DescribeGlobalSObjectResult>[]>([]);
-  const [subscribedPlatformEventsList, setSubscribedPlatformEventsList] = useState<ListItem<string, DescribeGlobalSObjectResult>[]>([]);
+  const [platformEventsListSubscriptions, setPlatformEventsListSubscriptions] = useState<ListItemGroup<string, PlatformEventObject>[]>([]);
+  const [platformEventsListPublisher, setPlatformEventsListPublisher] = useState<ListItem<string, PlatformEventObject>[]>([]);
+  const [subscribedPlatformEventsList, setSubscribedPlatformEventsList] = useState<ListItem<string, PlatformEventObject>[]>([]);
   const [picklistKey, setPicklistKey] = useState<number>(1);
   const [selectedSubscribeEvent, setSelectedSubscribeEvent] = useState<string | null>(null);
   const [selectedPublishEvent, setSelectedPublishEvent] = useState<string | null>(null);
@@ -45,30 +46,88 @@ export const PlatformEventMonitor: FunctionComponent<PlatformEventMonitorProps>
     };
   }, []);
 
+  useNonInitialEffect(() => {
+    setSelectedPublishEvent(null);
+  }, [selectedOrg]);
+
   useEffect(() => {
-    const events = platformEvents.map<ListItem<string, DescribeGlobalSObjectResult>>((event) => ({
-      id: event.name,
-      label: event.label,
-      secondaryLabel: event.name,
-      value: event.name,
-      meta: event,
-    }));
-    if (events.length) {
-      setPlatformEventsList(events);
-      setSelectedSubscribeEvent(events[0].id);
-      setSelectedPublishEvent(events[0].id);
+    const subscriptionEvents: ListItemGroup<string, PlatformEventObject>[] = [
+      {
+        id: 'PLATFORM_EVENT',
+        label: 'Platform Events (Custom)',
+        items: platformEvents
+          .filter((item) => item.type === 'PLATFORM_EVENT')
+          .map<ListItem<string, PlatformEventObject>>((event) => ({
+            id: event.channel,
+            label: `${event.label} (${event.name})`,
+            secondaryLabel: event.channel,
+            secondaryLabelOnNewLine: true,
+            value: event.channel,
+            meta: event,
+          })),
+      },
+      {
+        id: 'PLATFORM_EVENT_STANDARD',
+        label: 'Platform Events (Standard)',
+        items: platformEvents
+          .filter((item) => item.type === 'PLATFORM_EVENT_STANDARD')
+          .map<ListItem<string, PlatformEventObject>>((event) => ({
+            id: event.channel,
+            label: `${event.label} (${event.name})`,
+            secondaryLabel: event.channel,
+            secondaryLabelOnNewLine: true,
+            value: event.channel,
+            meta: event,
+          })),
+      },
+      {
+        id: 'CHANGE_EVENT',
+        label: 'Change Data Capture Events',
+        items: platformEvents
+          .filter((item) => item.type === 'CHANGE_EVENT')
+          .map<ListItem<string, PlatformEventObject>>((event) => ({
+            id: event.channel,
+            label: `${event.label} (${event.name})`,
+            secondaryLabel: event.channel,
+            secondaryLabelOnNewLine: true,
+            value: event.channel,
+            meta: event,
+          })),
+      },
+    ];
+
+    setPlatformEventsListSubscriptions(subscriptionEvents);
+    setSelectedSubscribeEvent(platformEvents.length ? platformEvents[0].channel : null);
+    setPicklistKey((prevKey) => prevKey + 1);
+
+    const publisherEvents = platformEvents
+      .filter((event) => event.type === 'PLATFORM_EVENT')
+      .map<ListItem<string, PlatformEventObject>>((event) => ({
+        id: event.name,
+        label: event.label,
+        secondaryLabel: event.name,
+        secondaryLabelOnNewLine: true,
+        value: event.name,
+        meta: event,
+      }));
+
+    if (publisherEvents.length) {
+      setPlatformEventsListPublisher(publisherEvents);
+      setSelectedPublishEvent(publisherEvents[0].id);
       setPicklistKey((prevKey) => prevKey + 1);
     }
   }, [platformEvents]);
 
   useEffect(() => {
-    setSubscribedPlatformEventsList(platformEventsList.filter((item) => !!messagesByChannel[item.value]));
-  }, [messagesByChannel]);
+    setSubscribedPlatformEventsList(
+      platformEventsListSubscriptions.flatMap((item) => item.items).filter((item) => !!messagesByChannel[item.value])
+    );
+  }, [messagesByChannel, platformEventsListSubscriptions]);
 
   const hasErrorOrNoEvents = !hasPlatformEvents || platformEventFetchError;
 
   return (
-    <AutoFullHeightContainer className="slds-p-horizontal_x-small slds-scrollable_none">
+    <AutoFullHeightContainer className="slds-p-horizontal_x-small slds-scrollable_none" key={selectedOrg.uniqueId}>
       {hasErrorOrNoEvents && (
         <PlatformEventMonitorFetchEventStatus
           serverUrl={serverUrl}
@@ -94,7 +153,7 @@ export const PlatformEventMonitor: FunctionComponent<PlatformEventMonitorProps>
             <PlatformEventMonitorListenerCard
               loading={loadingPlatformEvents}
               picklistKey={picklistKey}
-              platformEventsList={platformEventsList}
+              platformEventsList={platformEventsListSubscriptions}
               subscribedPlatformEventsList={subscribedPlatformEventsList}
               selectedSubscribeEvent={selectedSubscribeEvent}
               messagesByChannel={messagesByChannel}
@@ -110,7 +169,7 @@ export const PlatformEventMonitor: FunctionComponent<PlatformEventMonitorProps>
               serverUrl={serverUrl}
               loadingPlatformEvents={loadingPlatformEvents}
               picklistKey={picklistKey}
-              platformEventsList={platformEventsList}
+              platformEventsList={platformEventsListPublisher}
               selectedPublishEvent={selectedPublishEvent}
               onSelectedPublishEvent={setSelectedPublishEvent}
               publish={publish}