add more apis in commandCallback's scope - evaluate issue remaining i…

…n mockApi

apps/kitchen-sink/src/ensemble/screens/forms.yaml

@@ -7,6 +7,7 @@ View:
  ensemble.storage.set('inputVal', 'sagar');
  ensemble.storage.set('mockApiStatusCode', 200);
  ensemble.storage.set('mockApiReasonPhrase', 'Success!');
+ ensemble.storage.set('mockApiName', 'testMockResponse');
  ensemble.storage.set('dummyData', [
  { value: "val 1", label: "lab 1" },
  { value: "val 2", label: "lab 2" },
@@ -365,6 +366,7 @@ View:
  initialValue: false
  onChange:
  executeCode: |
+ debugger;
  app.setUseMockResponse(!app.useMockResponse);
  - Checkbox:
  id: throwMockApiErrorCheckbox
@@ -386,7 +388,7 @@ View:
  label: Call API!
  onTap:
  invokeAPI:
- name: testMockResponse
+ name: ${ensemble.storage.get('mockApiName')}
  onResponse:
  executeCode: console.log("Mock API called ", response);
  - Button:
@@ -395,7 +397,7 @@ View:
  label: Call API from executeCode!
  onTap:
  executeCode: |
- ensemble.invokeAPI("testMockResponse");
+ ensemble.invokeAPI(ensemble.storage.get('mockApiName'));
  - Spacer:
  styles:
  size: 20
@@ -455,7 +457,7 @@ API:
  uri: https://dummyjson.com/users/1
  mockResponse:
  statusCode: "${ensemble.storage.get('mockApiStatusCode')}"
- reasonPhrase: "${ensemble.storage.get('mockApiReasonPhrase')}"
+ reasonPhrase: "${ensemble.env.randomId}"
  body:
  - id: 0
  name: Harry Potter

packages/framework/src/api/data.ts

@@ -46,7 +46,10 @@ export const invokeAPI = async (
  api,
  { ...apiInputs, ...context },
  {
- mockResponse: mockResponse(evaluatedMockResponse, useMockResponse),
+ mockResponse: mockResponse(
+ evaluatedMockResponse ?? api.mockResponse,
+ useMockResponse,
+ ),
  useMockResponse,
  },
  );

packages/framework/src/evaluate/context.ts

@@ -5,7 +5,7 @@ import type {
  ScreenContextDefinition,
 } from "../state";
 import type { EnsembleAppModel, EnsembleThemeModel } from "../shared";
-import { isUsingMockResponse } from "../appConfig";
+import { isUsingMockResponse, setUseMockResponse } from "../appConfig";
 
 export interface EvaluationContextProps {
  applicationContext: Omit<
@@ -48,7 +48,8 @@ export const createEvaluationContext = ({
  themes: keys(applicationContext.application?.themes),
  theme: applicationContext.selectedTheme?.name,
  useMockResponse: isUsingMockResponse(applicationContext.application?.id),
- setUseMockResponse: noop,
+ setUseMockResponse: (value: boolean) =>
+ setUseMockResponse(applicationContext.application?.id, value), //noop,
  };
 
  const env = applicationContext.env;

packages/framework/src/hooks/useCommandCallback.ts

@@ -5,23 +5,26 @@ import { mapKeys } from "lodash-es";
 import { createEvaluationContext } from "../evaluate";
 import type { EnsembleUser } from "../state";
 import { appAtom, screenAtom, themeAtom, userAtom } from "../state";
-import type { EnsembleContext } from "../shared/ensemble";
+import type { EnsembleContext, EnsembleLocation } from "../shared/ensemble";
 import { DateFormatter } from "../date";
-import type { ModalContext } from "../api";
+import type { ModalContext, NavigateFunction } from "../api";
 import {
  handleConnectSocket,
  handleDisconnectSocket,
  handleMessageSocket,
  invokeAPI,
+ navigateApi,
  navigateExternalScreen,
  navigateModalScreen,
+ navigateUrl,
  showDialog,
 } from "../api";
 import type {
  EnsembleScreenModel,
  EnsembleWidget,
  NavigateExternalScreen,
  NavigateModalScreenAction,
+ NavigateScreenAction,
  ShowDialogAction,
 } from "../shared";
 import { deviceAtom } from "./useDeviceObserver";
@@ -37,11 +40,13 @@ interface CallbackContext {
  screen: EnsembleScreenModel;
  }>;
 }
+
 export const useCommandCallback = <
  T extends unknown[] = unknown[],
  R = unknown,
 >(
  command: (evalContext: EnsembleContext, ...args: T) => R,
+ apis: { navigate: NavigateFunction; location: EnsembleLocation },
  dependencies: unknown[] = [],
  callbackContext?: CallbackContext,
 ): ReturnType<typeof useAtomCallback<R, T>> => {
@@ -76,6 +81,15 @@ export const useCommandCallback = <
  formatter: DateFormatter(),
  env: applicationContext.env,
  secrets: applicationContext.secrets,
+ location: apis.location,
+ navigateScreen: (targetScreen: NavigateScreenAction): void =>
+ navigateApi(targetScreen, screenContext, apis.navigate),
+ navigateUrl: (url: string, inputs?: { [key: string]: unknown }) =>
+ navigateUrl(url, apis.navigate, inputs),
+ navigateBack: (): void =>
+ callbackContext?.modalContext
+ ? callbackContext.modalContext.navigateBack()
+ : apis.navigate(-1),
  invokeAPI: async (
  apiName: string,
  apiInputs?: { [key: string]: unknown },

packages/framework/src/shared/ensemble.d.ts

@@ -15,7 +15,9 @@ export interface EnsembleInterface {
  secrets: EnsembleSecretsConfig;
  user?: EnsembleUser;
  device: EnsembleDeviceInfo;
+ location: EnsembleLocation;
  navigateScreen: (screenName: string, inputs?: unknown[]) => void;
+ navigateUrl: (url: string, inputs?: { [key: string]: unknown }) => void;
  navigateModalScreen: (screenName: string, inputs?: unknown[]) => void;
  navigateExternalScreen: (url: NavigateExternalScreen) => void;
  openUrl: (url: NavigateExternalScreen) => void;
@@ -57,3 +59,12 @@ interface EnsembleAppConfig {
 interface EnsembleUser {
  [k: string]: unknown;
 }
+
+export interface EnsembleLocationInterface {
+ pathname?: string;
+ search?: string;
+}
+
+export interface EnsembleLocation {
+ get: (key: keyof EnsembleLocationInterface) => string | undefined;
+}

packages/runtime/src/runtime/hooks/useEnsembleAction.tsx

@@ -48,9 +48,11 @@ import {
  toNumber,
 } from "lodash-es";
 import { useState, useEffect, useMemo, useCallback, useContext } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 import { ModalContext } from "../modal";
 import { EnsembleRuntime } from "../runtime";
 import { getShowDialogOptions } from "../showDialog";
+import { locationApi } from "../locationApi";
 import {
  handleConnectSocket,
  handleMessageSocket,
@@ -95,6 +97,8 @@ export const useExecuteCode: EnsembleActionHook<
  const isCodeString = isString(action);
  const screen = useScreenContext();
  const modalContext = useContext(ModalContext);
+ const navigate = useNavigate();
+ const location = useLocation();
  const appContext = useApplicationContext();
  const onCompleteAction = useEnsembleAction(
  isCodeString ? undefined : action?.onComplete,
@@ -135,6 +139,7 @@ export const useExecuteCode: EnsembleActionHook<
  });
  return retVal;
  },
+ { navigate, location: locationApi(location) },
  [js, onCompleteAction],
  { modalContext, render: EnsembleRuntime.render, EnsembleScreen },
  );

packages/runtime/src/runtime/locationApi.tsx

@@ -12,7 +12,7 @@ export interface EnsembleLocation {
 export const locationApi = (location: Location): EnsembleLocation => {
  return {
  get: (key: keyof EnsembleLocationInterface): string | undefined => {
- return location?.[key];
+ return location[key];
  },
  };
 };