@finos/legend-application 3.0.3 → 4.0.2

package/src/components/DocumentationLink.tsx

@@ -15,7 +15,7 @@
  */
 
 import { clsx, QuestionCircleIcon } from '@finos/legend-art';
-import { useApplicationStore } from './ApplicationStoreProvider';
+import { useApplicationStore } from './ApplicationStoreProvider.js';
 
 export const DocumentationLink: React.FC<{
   documentationKey: string;
@@ -24,7 +24,7 @@ export const DocumentationLink: React.FC<{
   const { documentationKey, className } = props;
   const applicationStore = useApplicationStore();
   const documentationEntry =
-    applicationStore.docRegistry.getEntry(documentationKey);
+    applicationStore.documentationService.getDocEntry(documentationKey);
   const openDocLink = (): void => {
     if (documentationEntry?.url) {
       applicationStore.navigator.openNewWindow(documentationEntry.url);

package/src/components/LambdaEditor.tsx

@@ -35,7 +35,7 @@ import {
   LongArrowAltUpIcon,
   Dialog,
 } from '@finos/legend-art';
-import type { LambdaEditorState } from '../stores/LambdaEditorState';
+import type { LambdaEditorState } from '../stores/LambdaEditorState.js';
 import {
   debounce,
   noop,
@@ -44,9 +44,9 @@ import {
 } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { ParserError, type EngineError, type Type } from '@finos/legend-graph';
-import { APPLICATION_TEST_ID } from './ApplicationTestID';
-import { useApplicationStore } from './ApplicationStoreProvider';
-import { EDITOR_LANGUAGE, EDITOR_THEME, TAB_SIZE } from '../const';
+import { APPLICATION_TEST_ID } from './ApplicationTestID.js';
+import { useApplicationStore } from './ApplicationStoreProvider.js';
+import { EDITOR_LANGUAGE, EDITOR_THEME, TAB_SIZE } from '../const.js';
 
 export type LambdaEditorOnKeyDownEventHandler = {
   matcher: (event: IKeyboardEvent) => boolean;

package/src/components/LambdaParameterValuesEditor.tsx

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Dialog } from '@finos/legend-art';
+import {
+  type PureModel,
+  type ValueSpecification,
+  PRIMITIVE_TYPE,
+} from '@finos/legend-graph';
+import { prettyCONSTName } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import type { LambdaParametersState } from '../stores/LambdaParameterState.js';
+import { useApplicationStore } from './ApplicationStoreProvider.js';
+import { BasicValueSpecificationEditor } from './BasicValueSpecificationEditor.js';
+
+// TODO we may want to further componentize this by removing the dialog wrapper
+export const LambdaParameterValuesEditor = observer(
+  (props: {
+    graph: PureModel;
+    lambdaParametersState: LambdaParametersState;
+  }) => {
+    const { lambdaParametersState, graph } = props;
+    const valuesEdtiorState = lambdaParametersState.parameterValuesEditorState;
+    const close = (): void => valuesEdtiorState.close();
+    const applicationStore = useApplicationStore();
+    const submitAction = valuesEdtiorState.submitAction;
+    const submit = applicationStore.guardUnhandledError(async () => {
+      if (submitAction) {
+        close();
+        await submitAction.handler();
+      }
+    });
+    return (
+      <Dialog
+        open={Boolean(valuesEdtiorState.showModal)}
+        onClose={close}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <div className="modal modal--dark editor-modal lambda__parameters__editor__modal">
+          <div className="modal__header">
+            <div className="modal__title">Set Parameter Values</div>
+          </div>
+          <div className="modal__body lambda__parameters__editor__modal__body">
+            {lambdaParametersState.parameterStates.map((paramState) => {
+              const stringType = graph.getPrimitiveType(PRIMITIVE_TYPE.STRING);
+              const variableType = paramState.variableType ?? stringType;
+              return (
+                <div
+                  key={paramState.uuid}
+                  className="panel__content__form__section"
+                >
+                  <div className="lambda__parameters__editor__value__label">
+                    <div>{paramState.parameter.name}</div>
+                    <div className="lambda__parameters__editor__value__name">
+                      {variableType.name}
+                    </div>
+                  </div>
+                  {paramState.value && (
+                    <BasicValueSpecificationEditor
+                      valueSpecification={paramState.value}
+                      updateValue={(val: ValueSpecification): void => {
+                        paramState.setValue(val);
+                      }}
+                      graph={graph}
+                      typeCheckOption={{
+                        expectedType: variableType,
+                        match:
+                          variableType ===
+                          graph.getPrimitiveType(PRIMITIVE_TYPE.DATETIME),
+                      }}
+                      className="query-builder__parameters__value__editor"
+                      resetValue={(): void => paramState.mockParameterValue()}
+                    />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+          <div className="modal__footer">
+            {submitAction && (
+              <button
+                className="btn modal__footer__close-btn"
+                title={submitAction.label}
+                onClick={submit}
+              >
+                {prettyCONSTName(submitAction.label)}
+              </button>
+            )}
+            <button className="btn modal__footer__close-btn" onClick={close}>
+              Close
+            </button>
+          </div>
+        </div>
+      </Dialog>
+    );
+  },
+);

package/src/components/LegendApplicationComponentFrameworkProvider.tsx

@@ -15,9 +15,9 @@
  */
 
 import { LegendStyleProvider } from '@finos/legend-art';
-import { ActionAlert } from './ActionAlert';
-import { BlockingAlert } from './BlockingAlert';
-import { NotificationManager } from './NotificationManager';
+import { ActionAlert } from './ActionAlert.js';
+import { BlockingAlert } from './BlockingAlert.js';
+import { NotificationManager } from './NotificationManager.js';
 
 export const LegendApplicationComponentFrameworkProvider: React.FC<{
   children: React.ReactNode;

package/src/components/LegendApplicationNavigationContextServiceUtils.tsx

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect } from 'react';
+import { ApplicationNavigationContextData } from '../stores/LegendApplicationNavigationContextService.js';
+import { useApplicationStore } from './ApplicationStoreProvider.js';
+
+/**
+ * Provides a convenient hook mechanism to handle application navigation
+ * context of a component.
+ *
+ * This will push the context when the component is mounted
+ * and will cleanup the context when the component is unmounted.
+ *
+ * NOTE: if we use this to automate context pushing and cleanup,
+ * we must use this for component that is mounted due to user-event
+ * navigation, e.g. clicking, focusing, etc. else if the component
+ * is already pre-rendered and just temporarily hidden away (e.g. dialog)
+ * it is not safe to call this as it might mess up the stack. For this,
+ * use {@link useConditionedApplicationNavigationContext }
+ */
+export const useApplicationNavigationContext = (value: string): void => {
+  const applicationStore = useApplicationStore();
+
+  useEffect(() => {
+    const context = ApplicationNavigationContextData.create(value);
+    applicationStore.navigationContextService.push(context);
+    return () => applicationStore.navigationContextService.pop(context);
+  }, [applicationStore, value]);
+};
+
+export const useConditionedApplicationNavigationContext = (
+  value: string,
+  condition: boolean,
+): void => {
+  const applicationStore = useApplicationStore();
+
+  useEffect(() => {
+    const context = ApplicationNavigationContextData.create(value);
+    if (condition) {
+      applicationStore.navigationContextService.push(context);
+    } else {
+      applicationStore.navigationContextService.pop(context);
+    }
+    // NOTE: we are modifying a state in the clean up function, if we have
+    // some components observing the context stack, we could end up with `React` warning
+    // about bad state
+    return () => applicationStore.navigationContextService.pop(context);
+  }, [applicationStore, value, condition]);
+};

package/src/components/NotificationManager.tsx

@@ -18,8 +18,8 @@ import { observer } from 'mobx-react-lite';
 import {
   DEFAULT_NOTIFICATION_HIDE_TIME,
   NOTIFCATION_SEVERITY,
-} from '../stores/ApplicationStore';
-import { useApplicationStore } from './ApplicationStoreProvider';
+} from '../stores/ApplicationStore.js';
+import { useApplicationStore } from './ApplicationStoreProvider.js';
 import {
   Notification,
   NotificationContent,

package/src/components/TextInputEditor.tsx

@@ -29,8 +29,8 @@ import {
   getEditorValue,
   normalizeLineEnding,
 } from '@finos/legend-art';
-import { type EDITOR_LANGUAGE, EDITOR_THEME, TAB_SIZE } from '../const';
-import { useApplicationStore } from './ApplicationStoreProvider';
+import { type EDITOR_LANGUAGE, EDITOR_THEME, TAB_SIZE } from '../const.js';
+import { useApplicationStore } from './ApplicationStoreProvider.js';
 
 export type TextInputEditorOnKeyDownEventHandler = {
   matcher: (event: IKeyboardEvent) => boolean;