Added formula format option

jetstreamapp · Feb 15, 2023 · 4c695c9 · 4c695c9
1 parent f03c193
commit 4c695c9
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 17 deletions.
diff --git a/apps/jetstream/src/app/components/core/AppStateResetOnOrgChange.tsx b/apps/jetstream/src/app/components/core/AppStateResetOnOrgChange.tsx
@@ -1,9 +1,10 @@
 import { SalesforceOrgUi } from '@jetstream/types';
-import React, { Fragment, FunctionComponent, useEffect, useState } from 'react';
+import { Fragment, FunctionComponent, useEffect, useState } from 'react';
 import { Resetter, useRecoilValue, useResetRecoilState } from 'recoil';
 import * as fromAppState from '../../app-state';
 import * as fromAutomationControlState from '../automation-control/automation-control.state';
 import * as fromDeployMetadataState from '../deploy/deploy-metadata.state';
+import * as fromFormulaState from '../formula-evaluator/formula-evaluator.state';
 import * as fromLoadState from '../load-records/load-records.state';
 import * as fromPermissionsState from '../manage-permissions/manage-permissions.state';
 import * as fromQueryState from '../query/query.state';
@@ -56,6 +57,14 @@ export const AppStateResetOnOrgChange: FunctionComponent<AppStateResetOnOrgChang
     useResetRecoilState(fromDeployMetadataState.metadataSelectionTypeState),
     useResetRecoilState(fromDeployMetadataState.changesetPackage),
     useResetRecoilState(fromDeployMetadataState.changesetPackages),
+    // Formula
+    useResetRecoilState(fromFormulaState.sourceTypeState),
+    useResetRecoilState(fromFormulaState.selectedSObjectState),
+    useResetRecoilState(fromFormulaState.selectedFieldState),
+    useResetRecoilState(fromFormulaState.recordIdState),
+    useResetRecoilState(fromFormulaState.formulaValueState),
+    useResetRecoilState(fromFormulaState.numberNullBehaviorState),
+    useResetRecoilState(fromFormulaState.bannerDismissedState),
   ];
 
   useEffect(() => {

diff --git a/apps/jetstream/src/app/components/formula-evaluator/FormulaEvaluator.tsx b/apps/jetstream/src/app/components/formula-evaluator/FormulaEvaluator.tsx
@@ -39,6 +39,10 @@ import { getFormulaData } from './formula-evaluator.utils';
 import FormulaEvaluatorRecordSearch from './FormulaEvaluatorRecordSearch';
 import FormulaEvaluatorRefreshCachePopover from './FormulaEvaluatorRefreshCachePopover';
 
+// Lazy import
+const prettier = import('prettier/standalone');
+const prettierBabelParser = import('prettier/parser-babel');
+
 window.addEventListener('unhandledrejection', function (event) {
   console.log('unhandledrejection', event);
 });
@@ -189,6 +193,14 @@ export const FormulaEvaluator: FunctionComponent<FormulaEvaluatorProps> = () =>
         handleTestFormula(currEditor.getValue());
       },
     });
+    editorRef.current.addAction({
+      id: 'format',
+      label: 'Format',
+      contextMenuGroupId: '9_cutcopypaste',
+      run: (currEditor) => {
+        handleFormat(currEditor.getValue());
+      },
+    });
   };
 
   const handleRefreshMetadata = async () => {
@@ -199,8 +211,35 @@ export const FormulaEvaluator: FunctionComponent<FormulaEvaluatorProps> = () =>
     setRefreshLoading(false);
   };
 
+  const handleFormat = async (value = formulaValue) => {
+    try {
+      if (!editorRef.current || !formulaValue) {
+        return;
+      }
+      editorRef.current.setValue(
+        (await prettier).format(formulaValue, {
+          parser: 'babel',
+          plugins: [await prettierBabelParser],
+          bracketSpacing: false,
+          semi: false,
+          singleQuote: true,
+          trailingComma: 'none',
+          useTabs: false,
+          tabWidth: 2,
+        })
+      );
+    } catch (ex) {
+      logger.warn('failed to format', ex);
+    }
+  };
+
   return (
-    <AutoFullHeightContainer fillHeight bottomBuffer={10} className="slds-p-horizontal_x-small slds-scrollable_none">
+    <AutoFullHeightContainer
+      fillHeight
+      bottomBuffer={10}
+      className="slds-p-horizontal_x-small slds-scrollable_none"
+      key={selectedOrg.uniqueId}
+    >
       {!bannerDismissed && (
         <Alert type="info" leadingIcon="info" className="slds-m-bottom_xx-small" allowClose onClose={() => setBannerDismissed(true)}>
           Formulas in Jetstream may evaluate different from Salesforce and not every formula function is supported.
@@ -298,8 +337,17 @@ export const FormulaEvaluator: FunctionComponent<FormulaEvaluatorProps> = () =>
               )}
             </Grid>
 
-            <Grid className="slds-m-top_x-small">
+            <Grid className="slds-m-top_x-small" align="spread">
               <KeyboardShortcut keys={['ctrl', 'space']} postContent="to open the auto-complete menu in the editor." />
+              {formulaValue && (
+                <button
+                  className="slds-button slds-text-link_reset slds-text-link"
+                  title="Format soql query"
+                  onClick={() => handleFormat()}
+                >
+                  format
+                </button>
+              )}
             </Grid>
 
             <AutoFullHeightContainer

diff --git a/apps/jetstream/src/app/components/formula-evaluator/formula-evaluator.state.ts b/apps/jetstream/src/app/components/formula-evaluator/formula-evaluator.state.ts
@@ -3,16 +3,6 @@ import { atom } from 'recoil';
 
 export type NullNumberBehavior = 'ZERO' | 'BLANK';
 
-export const objectsByKeyPrefixState = atom<Record<string, DescribeGlobalSObjectResult>>({
-  key: 'formula.objectsByKeyPrefixState',
-  default: {},
-});
-
-export const priorSelectedOrg = atom<string>({
-  key: 'formula.priorSelectedOrg',
-  default: null,
-});
-
 export const sourceTypeState = atom<'NEW' | 'EXISTING'>({
   key: 'formula.sourceTypeState',
   default: 'NEW',

diff --git a/apps/jetstream/src/app/components/query/QueryBuilder/QueryBuilder.tsx b/apps/jetstream/src/app/components/query/QueryBuilder/QueryBuilder.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-
 import { css } from '@emotion/react';
 import { IconObj } from '@jetstream/icon-factory';
 import { ANALYTICS_KEYS } from '@jetstream/shared/constants';
 import { hasModifierKey, isEnterKey, useGlobalEventHandler, useNonInitialEffect } from '@jetstream/shared/ui-utils';
+import { SplitWrapper as Split } from '@jetstream/splitjs';
 import { QueryFieldWithPolymorphic, SalesforceOrgUi } from '@jetstream/types';
 import {
   Accordion,
@@ -18,10 +18,9 @@ import {
   PageHeaderTitle,
   Tabs,
 } from '@jetstream/ui';
-import { DescribeGlobalSObjectResult } from 'jsforce';
-import { Fragment, FunctionComponent, useCallback, useEffect, useRef, useState } from 'react';
+import type { DescribeGlobalSObjectResult } from 'jsforce';
+import { Fragment, FunctionComponent, useCallback, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { SplitWrapper as Split } from '@jetstream/splitjs';
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
 import { applicationCookieState, selectedOrgState } from '../../../app-state';
 import { useAmplitude } from '../../core/analytics';