@finos/legend-query-builder 0.4.4 → 0.6.0

package/src/components/QueryBuilderConstantExpressionPanel.tsx

@@ -0,0 +1,291 @@
+/**
+ * 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,
+  LEGEND_APPLICATION_DOCUMENTATION_KEY,
+} 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 seeDocumentation = (): void =>
+      queryBuilderState.applicationStore.assistantService.openDocumentationEntry(
+        LEGEND_APPLICATION_DOCUMENTATION_KEY.QUESTION_HOW_TO_ADD_CONSTANTS_TO_QUERY,
+      );
+    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
+              onClick={seeDocumentation}
+              className="query-builder__variables__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}
+                  queryBuilderState={queryBuilderState}
+                  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,
@@ -51,13 +43,14 @@ import {
   buildElementOption,
   getPackageableElementOptionFormatter,
   useApplicationStore,
+  LEGEND_APPLICATION_DOCUMENTATION_KEY,
 } from '@finos/legend-application';
-import { useDrag } from 'react-dnd';
 import { generateEnumerableNameFromToken } from '@finos/legend-shared';
 import { DEFAULT_VARIABLE_NAME } from '../stores/QueryBuilderConfig.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 };
 
@@ -147,12 +140,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."
@@ -223,90 +216,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;
@@ -315,6 +224,10 @@ export const QueryBuilderParametersPanel = observer(
     const varNames = queryBuilderState.parametersState.parameterStates.map(
       (parameter) => parameter.variableName,
     );
+    const seeDocumentation = (): void =>
+      queryBuilderState.applicationStore.assistantService.openDocumentationEntry(
+        LEGEND_APPLICATION_DOCUMENTATION_KEY.QUESTION_HOW_TO_ADD_PARAMETERS_TO_QUERY,
+      );
     const addParameter = (): void => {
       if (!isReadOnly && !queryBuilderState.isParameterSupportDisabled) {
         const parmaterState = new LambdaParameterState(
@@ -334,10 +247,17 @@ 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
+              onClick={seeDocumentation}
+              className="query-builder__variables__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">
@@ -352,16 +272,22 @@ 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}
+                    queryBuilderState={queryBuilderState}
+                    actions={{
+                      editVariable: () =>
+                        queryParameterState.setSelectedParameter(pState),
+                      deleteVariable: () =>
+                        queryParameterState.removeParameter(pState),
+                    }}
                   />
                 ))}
               {!queryParameterState.parameterStates.length && (