@finos/legend-query-builder 0.4.3 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-query-builder",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "Legend query builder core",
   "keywords": [
     "legend",
@@ -44,17 +44,17 @@
     "@ag-grid-community/client-side-row-model": "28.2.1",
     "@ag-grid-community/core": "28.2.1",
     "@ag-grid-community/react": "28.2.1",
-    "@finos/legend-application": "10.0.7",
-    "@finos/legend-art": "5.0.4",
-    "@finos/legend-graph": "20.0.1",
-    "@finos/legend-server-depot": "4.1.5",
-    "@finos/legend-shared": "6.2.1",
-    "@finos/legend-storage": "3.0.16",
+    "@finos/legend-application": "10.0.9",
+    "@finos/legend-art": "5.0.6",
+    "@finos/legend-graph": "20.1.0",
+    "@finos/legend-server-depot": "4.1.7",
+    "@finos/legend-shared": "6.2.3",
+    "@finos/legend-storage": "3.0.18",
     "@testing-library/react": "13.4.0",
     "@types/papaparse": "5.3.5",
-    "@types/react": "18.0.24",
-    "@types/react-dom": "18.0.8",
-    "mobx": "6.6.2",
+    "@types/react": "18.0.25",
+    "@types/react-dom": "18.0.9",
+    "mobx": "6.7.0",
     "mobx-react-lite": "3.4.0",
     "monaco-editor": "0.34.1",
     "papaparse": "5.3.2",
@@ -64,14 +64,14 @@
     "serializr": "3.0.1"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.24",
-    "@jest/globals": "29.2.2",
+    "@finos/legend-dev-utils": "2.0.26",
+    "@jest/globals": "29.3.1",
     "cross-env": "7.0.3",
-    "eslint": "8.26.0",
-    "jest": "29.2.2",
+    "eslint": "8.27.0",
+    "jest": "29.3.1",
     "npm-run-all": "4.1.5",
     "rimraf": "3.0.2",
-    "sass": "1.55.0",
+    "sass": "1.56.1",
     "typescript": "4.8.4"
   },
   "peerDependencies": {

package/src/components/QueryBuilder.tsx

@@ -56,6 +56,7 @@ import { guaranteeType } from '@finos/legend-shared';
 import { QueryBuilderGraphFetchTreeState } from '../stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeState.js';
 import { QueryBuilderPostTDSPanel } from './fetch-structure/QueryBuilderPostTDSPanel.js';
 import { QueryBuilderWatermarkEditor } from './watermark/QueryBuilderWatermark.js';
+import { QueryBuilderConstantExpressionPanel } from './QueryBuilderConstantExpressionPanel.js';
 
 export const QUERY_BUILDER_BACKDROP_CONTAINER_ID =
   'query-builder.backdrop-container';
@@ -187,6 +188,11 @@ export const QueryBuilder = observer(
         !queryBuilderState.showParametersPanel,
       );
     };
+    const toggleConstantPanel = (): void => {
+      queryBuilderState.constantState.setShowConstantPanel(
+        !queryBuilderState.constantState.showConstantPanel,
+      );
+    };
     const toggleShowFilterPanel = (): void => {
       queryBuilderState.filterState.setShowPanel(
         !queryBuilderState.filterState.showPanel,
@@ -305,6 +311,27 @@ export const QueryBuilder = observer(
                             </MenuContentItemLabel>
                           </MenuContentItem>
                         )}
+                        {
+                          <MenuContentItem
+                            onClick={toggleConstantPanel}
+                            disabled={
+                              !queryBuilderState.isQuerySupported ||
+                              queryBuilderState.constantState.constants.length >
+                                0
+                            }
+                          >
+                            <MenuContentItemIcon>
+                              {queryBuilderState.constantState
+                                .showConstantPanel ? (
+                                <CheckIcon />
+                              ) : null}
+                            </MenuContentItemIcon>
+                            <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                              Show Constant(s)
+                            </MenuContentItemLabel>
+                          </MenuContentItem>
+                        }
+
                         <MenuContentItem
                           onClick={toggleShowFilterPanel}
                           disabled={
@@ -441,6 +468,17 @@ export const QueryBuilder = observer(
                                 />
                               </ResizablePanel>
                             )}
+                            {/* constants panel */}
+                            {queryBuilderState.constantState
+                              .showConstantPanel && <ResizablePanelSplitter />}
+                            {queryBuilderState.constantState
+                              .showConstantPanel && (
+                              <ResizablePanel minSize={40} direction={-1}>
+                                <QueryBuilderConstantExpressionPanel
+                                  queryBuilderState={queryBuilderState}
+                                />
+                              </ResizablePanel>
+                            )}
                           </ResizablePanelGroup>
                         </QueryBuilderSidebar>
                       </ResizablePanel>

package/src/components/QueryBuilderConstantExpressionPanel.tsx

@@ -0,0 +1,284 @@
+/**
+ * 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 {
+  type PackageableElementOption,
+  buildElementOption,
+  getPackageableElementOptionFormatter,
+} from '@finos/legend-application';
+import {
+  BlankPanelPlaceholder,
+  CustomSelectorInput,
+  Dialog,
+  InfoCircleIcon,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  PanelFormSection,
+  PanelFormTextField,
+  PlusIcon,
+} from '@finos/legend-art';
+import {
+  type Type,
+  type ValueSpecification,
+  PrimitiveType,
+  VariableExpression,
+  Multiplicity,
+} from '@finos/legend-graph';
+import { generateEnumerableNameFromToken } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import { DEFAULT_CONSTANT_VARIABLE_NAME } from '../stores/QueryBuilderConfig.js';
+import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
+import { QueryBuilderConstantExpressionState } from '../stores/QueryBuilderConstantsState.js';
+import { buildDefaultInstanceValue } from '../stores/shared/ValueSpecificationEditorHelper.js';
+import { variableExpression_setName } from '../stores/shared/ValueSpecificationModifierHelper.js';
+import { BasicValueSpecificationEditor } from './shared/BasicValueSpecificationEditor.js';
+import { VariableViewer } from './shared/QueryBuilderVariableSelector.js';
+
+// Note: We currently only allow constant variables for primitive types of multiplicity ONE.
+// This is why we don't show multiplicity in the editor.
+const QueryBuilderConstantExpressionEditor = observer(
+  (props: { constantState: QueryBuilderConstantExpressionState }) => {
+    const { constantState } = props;
+    const queryBuilderState = constantState.queryBuilderState;
+    const applicationStore = queryBuilderState.applicationStore;
+    const variableState = queryBuilderState.constantState;
+    const varExpression = constantState.variable;
+    const variableName = varExpression.name;
+    const allVariableNames = queryBuilderState.allVariableNames;
+    const isCreating = !variableState.constants.includes(constantState);
+    const valueSpec = constantState.value;
+    const variableType =
+      constantState.value.genericType?.value.rawType ?? PrimitiveType.STRING;
+    const selectedType = buildElementOption(variableType);
+    const close = (): void => {
+      variableState.setSelectedConstant(undefined);
+    };
+    const changeType = (val: PackageableElementOption<Type>): void => {
+      if (variableType !== val.value) {
+        constantState.changeValSpecType(val.value);
+      }
+    };
+    const typeOptions: PackageableElementOption<Type>[] =
+      queryBuilderState.graphManagerState.graph.primitiveTypes
+        .map(buildElementOption)
+        .concat(
+          queryBuilderState.graphManagerState.graph.enumerations.map(
+            buildElementOption,
+          ),
+        );
+    const validationMessage = !variableName
+      ? `Constant Name can't be empty`
+      : allVariableNames.filter((e) => e === variableName).length >
+        (isCreating ? 0 : 1)
+      ? 'Constant Name Already Exists'
+      : undefined;
+    const onAction = (): void => {
+      if (isCreating) {
+        variableState.addConstant(constantState);
+      }
+      close();
+    };
+    const resetConstantValue = (): void => {
+      const valSpec = buildDefaultInstanceValue(
+        queryBuilderState.graphManagerState.graph,
+        variableType,
+      );
+      constantState.setValueSpec(valSpec);
+    };
+
+    return (
+      <Dialog
+        open={Boolean(constantState)}
+        onClose={close}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <Modal
+          darkMode={true}
+          className="editor-modal query-builder__variables__modal"
+        >
+          <ModalHeader
+            title={`${isCreating ? 'Create Constant' : 'Update Constant'}`}
+          />
+          <ModalBody className="query-builder__variables__modal__body">
+            <PanelFormTextField
+              name="Constant Name"
+              prompt="Name of constant. Should be descriptive of its purpose."
+              update={(value: string | undefined): void =>
+                variableExpression_setName(varExpression, value ?? '')
+              }
+              value={varExpression.name}
+              errorMessage={validationMessage}
+              isReadOnly={false}
+            />
+            <PanelFormSection>
+              <div className="panel__content__form__section__header__label">
+                Type
+              </div>
+              <div className="panel__content__form__section__header__prompt">
+                Data type of the parameter.
+              </div>
+              <CustomSelectorInput
+                placeholder="Choose a type..."
+                options={typeOptions}
+                onChange={changeType}
+                value={selectedType}
+                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                formatOptionLabel={getPackageableElementOptionFormatter({
+                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                })}
+              />
+            </PanelFormSection>
+            <PanelFormSection>
+              <div className="panel__content__form__section__header__label">
+                Value
+              </div>
+              <div className="query-builder__variable-editor">
+                <BasicValueSpecificationEditor
+                  valueSpecification={valueSpec}
+                  setValueSpecification={(val: ValueSpecification): void => {
+                    constantState.setValueSpec(val);
+                  }}
+                  graph={queryBuilderState.graphManagerState.graph}
+                  obseverContext={queryBuilderState.observableContext}
+                  typeCheckOption={{
+                    expectedType: variableType,
+                    match: variableType === PrimitiveType.DATETIME,
+                  }}
+                  resetValue={resetConstantValue}
+                />
+              </div>
+            </PanelFormSection>
+          </ModalBody>
+          <ModalFooter>
+            {isCreating && (
+              <button
+                className="btn modal__footer__close-btn btn--dark"
+                onClick={onAction}
+                disabled={Boolean(validationMessage)}
+              >
+                Create
+              </button>
+            )}
+            <button className="btn modal__footer__close-btn" onClick={close}>
+              Close
+            </button>
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
+export const QueryBuilderConstantExpressionPanel = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const constantState = queryBuilderState.constantState;
+    const graph = queryBuilderState.graphManagerState.graph;
+    const isReadOnly = !queryBuilderState.isQuerySupported;
+    const varNames = queryBuilderState.allVariableNames;
+    const addConstant = (): void => {
+      if (!isReadOnly) {
+        const defaultVal = buildDefaultInstanceValue(
+          graph,
+          PrimitiveType.STRING,
+        );
+        const constantName = generateEnumerableNameFromToken(
+          varNames,
+          DEFAULT_CONSTANT_VARIABLE_NAME,
+        );
+        const variableEx = new VariableExpression(
+          constantName,
+          Multiplicity.ONE,
+        );
+        variableEx.genericType = defaultVal.genericType;
+        const constState = new QueryBuilderConstantExpressionState(
+          queryBuilderState,
+          variableEx,
+          defaultVal,
+        );
+        constantState.setSelectedConstant(constState);
+      }
+    };
+
+    return (
+      <div className="panel query-builder__variables">
+        <div className="panel__header">
+          <div className="panel__header__title">
+            <div className="panel__header__title__label">constants</div>
+            <div
+              className="service-editor__pattern__parameters__header__info"
+              title={`Constants are static values set to a variable name that can be leveraged within your query. They remain the same for ALL executions`}
+            >
+              <InfoCircleIcon />
+            </div>
+          </div>
+          {!isReadOnly && (
+            <div className="panel__header__actions">
+              <button
+                className="panel__header__action"
+                tabIndex={-1}
+                onClick={addConstant}
+                title="Add Constant"
+              >
+                <PlusIcon />
+              </button>
+            </div>
+          )}
+        </div>
+        <div className="panel__content query-builder__variables__content">
+          <>
+            {Boolean(queryBuilderState.constantState.constants) &&
+              queryBuilderState.constantState.constants.map((constState) => (
+                <VariableViewer
+                  key={constState.uuid}
+                  variable={constState.variable}
+                  constantValue={constState.value}
+                  actions={{
+                    editVariable: () =>
+                      constantState.setSelectedConstant(constState),
+                    deleteVariable: () =>
+                      constantState.removeConstant(constState),
+                  }}
+                  isReadOnly={isReadOnly}
+                />
+              ))}
+            {!constantState.constants.length && (
+              <BlankPanelPlaceholder
+                text="Add a Constants"
+                disabled={isReadOnly}
+                onClick={addConstant}
+                clickActionType="add"
+                previewText="No constants"
+                tooltipText="Click to add a new constant"
+              />
+            )}
+          </>
+        </div>
+        {constantState.selectedConstant && (
+          <QueryBuilderConstantExpressionEditor
+            constantState={constantState.selectedConstant}
+          />
+        )}
+      </div>
+    );
+  },
+);

package/src/components/QueryBuilderDiffPanel.tsx

@@ -15,7 +15,6 @@
  */
 
 import {
-  createPassThroughOnKeyHandler,
   EDITOR_LANGUAGE,
   EDITOR_THEME,
   TAB_SIZE,
@@ -70,7 +69,6 @@ const TextDiffView = observer(
           readOnly: true,
           wordWrap: 'on',
         });
-        _editor.getOriginalEditor().onKeyDown(createPassThroughOnKeyHandler());
         setEditor(_editor);
       }
     }, [applicationStore, editor]);

package/src/components/QueryBuilderParametersPanel.tsx

@@ -20,23 +20,15 @@ import {
   Dialog,
   BlankPanelContent,
   CustomSelectorInput,
-  PencilIcon,
-  TimesIcon,
-  DollarIcon,
   PlusIcon,
-  DragPreviewLayer,
-  useDragPreviewLayer,
   BlankPanelPlaceholder,
   Modal,
   ModalBody,
   ModalFooter,
   ModalHeader,
   PanelFormTextField,
+  InfoCircleIcon,
 } from '@finos/legend-art';
-import {
-  type QueryBuilderParameterDragSource,
-  QUERY_BUILDER_PARAMETER_DND_TYPE,
-} from '../stores/QueryBuilderParametersState.js';
 import {
   type Type,
   VariableExpression,
@@ -52,15 +44,12 @@ import {
   getPackageableElementOptionFormatter,
   useApplicationStore,
 } from '@finos/legend-application';
-import { useDrag } from 'react-dnd';
 import { generateEnumerableNameFromToken } from '@finos/legend-shared';
 import { DEFAULT_VARIABLE_NAME } from '../stores/QueryBuilderConfig.js';
-import {
-  valueSpecification_setMultiplicity,
-  variableExpression_setName,
-} from '../stores/shared/ValueSpecificationModifierHelper.js';
+import { variableExpression_setName } from '../stores/shared/ValueSpecificationModifierHelper.js';
 import { LambdaParameterState } from '../stores/shared/LambdaParameterState.js';
 import { LambdaParameterValuesEditor } from './shared/LambdaParameterValuesEditor.js';
+import { VariableViewer } from './shared/QueryBuilderVariableSelector.js';
 
 type MultiplicityOption = { label: string; value: Multiplicity };
 
@@ -125,9 +114,7 @@ const VariableExpressionEditor = observer(
     const multilicityOptions: MultiplicityOption[] =
       validParamMultiplicityList.map(buildMultiplicityOption);
     const changeMultiplicity = (val: MultiplicityOption): void => {
-      if (multiplity !== val.value) {
-        valueSpecification_setMultiplicity(varState, val.value);
-      }
+      lambdaParameterState.changeMultiplicity(varState, val.value);
     };
 
     const close = (): void => {
@@ -152,12 +139,12 @@ const VariableExpressionEditor = observer(
       >
         <Modal
           darkMode={true}
-          className="editor-modal query-builder__parameters__modal"
+          className="editor-modal query-builder__variables__modal"
         >
           <ModalHeader
             title={`${isCreating ? 'Create Parameter' : 'Update Parameter'}`}
           />
-          <ModalBody className="query-builder__parameters__modal__body">
+          <ModalBody className="query-builder__variables__modal__body">
             <PanelFormTextField
               name="Parameter Name"
               prompt="Name of the parameter. Should be descriptive of its purpose."
@@ -228,90 +215,6 @@ const VariableExpressionEditor = observer(
   },
 );
 
-export const VariableExpressionViewer = observer(
-  (props: {
-    queryBuilderState: QueryBuilderState;
-    isReadOnly: boolean;
-    hideActions?: boolean;
-    variableExpressionState: LambdaParameterState;
-  }) => {
-    const {
-      queryBuilderState,
-      isReadOnly,
-      hideActions,
-      variableExpressionState,
-    } = props;
-    const queryParameterState = queryBuilderState.parametersState;
-    const variable = variableExpressionState.parameter;
-    const name = variable.name;
-    const variableType = variable.genericType?.value.rawType;
-    const typeName = variableType?.name;
-    const editVariable = (): void => {
-      queryParameterState.setSelectedParameter(variableExpressionState);
-    };
-    const deleteVariable = (): void =>
-      queryParameterState.removeParameter(variableExpressionState);
-    const [, dragConnector, dragPreviewConnector] = useDrag(
-      () => ({
-        type: QUERY_BUILDER_PARAMETER_DND_TYPE,
-        item: { variable: variableExpressionState },
-      }),
-      [variableExpressionState],
-    );
-    useDragPreviewLayer(dragPreviewConnector);
-
-    return (
-      <div className="query-builder__parameters__parameter" ref={dragConnector}>
-        <DragPreviewLayer
-          labelGetter={(item: QueryBuilderParameterDragSource): string =>
-            item.variable.variableName === ''
-              ? '(unknown)'
-              : item.variable.variableName
-          }
-          types={[QUERY_BUILDER_PARAMETER_DND_TYPE]}
-        />
-        <div className="query-builder__parameters__parameter__content">
-          <div className="query-builder__parameters__parameter__icon">
-            <div className="query-builder__parameters__parameter-icon">
-              <DollarIcon />
-            </div>
-          </div>
-          <div className="query-builder__parameters__parameter__label">
-            {name}
-            <div className="query-builder__parameters__parameter__type">
-              <div className="query-builder__parameters__parameter__type__label">
-                {typeName}
-              </div>
-            </div>
-          </div>
-        </div>
-        {!hideActions && (
-          <div className="query-builder__parameters__parameter__actions">
-            <button
-              className="query-builder__parameters__parameter__action"
-              tabIndex={-1}
-              disabled={isReadOnly}
-              onClick={editVariable}
-              title="Edit"
-            >
-              <PencilIcon />
-            </button>
-            <button
-              className="query-builder__parameters__parameter__action"
-              tabIndex={-1}
-              onClick={deleteVariable}
-              disabled={isReadOnly}
-              title="Remove"
-            >
-              <TimesIcon />
-            </button>
-          </div>
-        )}
-      </div>
-    );
-  },
-);
-
 export const QueryBuilderParametersPanel = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
@@ -339,10 +242,16 @@ export const QueryBuilderParametersPanel = observer(
     };
 
     return (
-      <div className="panel query-builder__parameters">
+      <div className="panel query-builder__variables">
         <div className="panel__header">
           <div className="panel__header__title">
             <div className="panel__header__title__label">parameters</div>
+            <div
+              className="service-editor__pattern__parameters__header__info"
+              title={`Parameters are variables assigned to your query. They are dynamic in nature and can change for each execution.`}
+            >
+              <InfoCircleIcon />
+            </div>
           </div>
           {!isReadOnly && !queryBuilderState.isParameterSupportDisabled && (
             <div className="panel__header__actions">
@@ -357,16 +266,21 @@ export const QueryBuilderParametersPanel = observer(
             </div>
           )}
         </div>
-        <div className="panel__content query-builder__parameters__content">
+        <div className="panel__content query-builder__variables__content">
           {!queryBuilderState.isParameterSupportDisabled && (
             <>
               {Boolean(queryParameterState.parameterStates.length) &&
-                queryParameterState.parameterStates.map((parameter) => (
-                  <VariableExpressionViewer
-                    key={parameter.uuid}
-                    queryBuilderState={queryBuilderState}
+                queryParameterState.parameterStates.map((pState) => (
+                  <VariableViewer
+                    key={pState.uuid}
+                    variable={pState.parameter}
                     isReadOnly={isReadOnly}
-                    variableExpressionState={parameter}
+                    actions={{
+                      editVariable: () =>
+                        queryParameterState.setSelectedParameter(pState),
+                      deleteVariable: () =>
+                        queryParameterState.removeParameter(pState),
+                    }}
                   />
                 ))}
               {!queryParameterState.parameterStates.length && (