@finos/legend-query-builder 4.14.47 → 4.14.48

package/src/components/QueryBuilder.tsx

@@ -46,6 +46,7 @@ import {
   clsx,
   DocumentationIcon,
   CodeIcon,
+  QuestionIcon,
 } from '@finos/legend-art';
 import { QueryBuilderFilterPanel } from './filter/QueryBuilderFilterPanel.js';
 import { QueryBuilderExplorerPanel } from './explorer/QueryBuilderExplorerPanel.js';
@@ -442,6 +443,14 @@ export const QueryBuilder = observer(
     const queryDocEntry = applicationStore.documentationService.getDocEntry(
       QUERY_BUILDER_DOCUMENTATION_KEY.TUTORIAL_QUERY_BUILDER,
     );
+    const frequentlyAskedQuestionEntry =
+      applicationStore.documentationService.getDocEntry(
+        QUERY_BUILDER_DOCUMENTATION_KEY.FREQUENTLY_ASKED_QUESTIONS,
+      );
+    const supportTicketsEntry =
+      applicationStore.documentationService.getDocEntry(
+        QUERY_BUILDER_DOCUMENTATION_KEY.SUPPORT_TICKETS_LINK,
+      );
     const openQueryTutorial = (): void => {
       if (queryDocEntry?.url) {
         applicationStore.navigationService.navigator.visitAddress(
@@ -449,6 +458,21 @@ export const QueryBuilder = observer(
         );
       }
     };
+    const openFrequentlyAskedQuestions = (): void => {
+      if (frequentlyAskedQuestionEntry?.url) {
+        applicationStore.navigationService.navigator.visitAddress(
+          frequentlyAskedQuestionEntry.url,
+        );
+      }
+    };
+    const openSupportTickets = (): void => {
+      if (supportTicketsEntry?.url) {
+        applicationStore.navigationService.navigator.visitAddress(
+          supportTicketsEntry.url,
+        );
+      }
+    };
+
     const toggleAssistant = (): void =>
       applicationStore.assistantService.toggleAssistant();
 
@@ -893,6 +917,26 @@ export const QueryBuilder = observer(
                           </MenuContentItemLabel>
                         </MenuContentItem>
                       )}
+                      {frequentlyAskedQuestionEntry && (
+                        <MenuContentItem onClick={openFrequentlyAskedQuestions}>
+                          <MenuContentItemIcon>
+                            <QuestionIcon />
+                          </MenuContentItemIcon>
+                          <MenuContentItemLabel>
+                            Frequently Asked Questions
+                          </MenuContentItemLabel>
+                        </MenuContentItem>
+                      )}
+                      {supportTicketsEntry && (
+                        <MenuContentItem onClick={openSupportTickets}>
+                          <MenuContentItemIcon>
+                            <QuestionIcon />
+                          </MenuContentItemIcon>
+                          <MenuContentItemLabel>
+                            Open Support Tickets
+                          </MenuContentItemLabel>
+                        </MenuContentItem>
+                      )}
                       <MenuContentItem onClick={toggleAssistant}>
                         <MenuContentItemIcon>
                           {!applicationStore.assistantService.isHidden ? (

package/src/components/QueryBuilderSideBar.tsx

@@ -47,7 +47,6 @@ import {
   getPackageableElementOptionFormatter,
   type PackageableElementOption,
 } from '@finos/legend-lego/graph-editor';
-import { MilestoningParametersEditor } from './explorer/QueryBuilderMilestoningEditor.js';
 import type { QueryBuilder_LegendApplicationPlugin_Extension } from '../stores/QueryBuilder_LegendApplicationPlugin_Extension.js';
 
 export const getParameterValue = (
@@ -120,7 +119,6 @@ export const QueryBuilderClassSelector = observer(
     noMatchMessage?: string | undefined;
   }) => {
     const { queryBuilderState, classes, onClassChange, noMatchMessage } = props;
-    const milestoningState = queryBuilderState.milestoningState;
     const applicationStore = useApplicationStore();
 
     // class
@@ -151,10 +149,6 @@ export const QueryBuilderClassSelector = observer(
       onClassChange?.(val.value);
     };
 
-    // milestoning
-    const showMilestoningEditor = (): void =>
-      milestoningState.setShowMilestoningEditor(true);
-
     return (
       <div className="query-builder__setup__config-group query-builder__setup__config-group--class">
         <div className="query-builder__setup__config-group__item ">
@@ -192,22 +186,6 @@ export const QueryBuilderClassSelector = observer(
                   .TEMPORARY__isLightColorThemeEnabled,
             })}
           />
-          {queryBuilderState.isQuerySupported && (
-            <button
-              className="btn--dark btn__icon--dark query-builder__setup__milestoning"
-              tabIndex={-1}
-              onClick={showMilestoningEditor}
-              disabled={!milestoningState.isMilestonedQuery}
-              title="Edit Milestoning Parameters"
-            >
-              <ClockIcon />
-            </button>
-          )}
-          {milestoningState.isMilestonedQuery && (
-            <MilestoningParametersEditor
-              queryBuilderState={queryBuilderState}
-            />
-          )}
         </div>
       </div>
     );

package/src/components/explorer/QueryBuilderMilestoningParameterEditor.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 { observer } from 'mobx-react-lite';
+import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
+import { useCallback } from 'react';
+import {
+  type ValueSpecification,
+  GenericType,
+  GenericTypeExplicitReference,
+  observe_PrimitiveInstanceValue,
+  PrimitiveInstanceValue,
+  PRIMITIVE_TYPE,
+  PrimitiveType,
+} from '@finos/legend-graph';
+import { useDrop } from 'react-dnd';
+import { PanelEntryDropZonePlaceholder } from '@finos/legend-art';
+import { generateDefaultValueForPrimitiveType } from '../../stores/QueryBuilderValueSpecificationHelper.js';
+import {
+  BasicValueSpecificationEditor,
+  type QueryBuilderVariableDragSource,
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+} from '../shared/BasicValueSpecificationEditor.js';
+import { instanceValue_setValues } from '../../stores/shared/ValueSpecificationModifierHelper.js';
+
+export const MilestoningParameterEditor = observer(
+  (props: {
+    queryBuilderState: QueryBuilderState;
+    parameter: ValueSpecification;
+    setParameter: (val: ValueSpecification) => void;
+  }) => {
+    const { queryBuilderState, parameter, setParameter } = props;
+    const handleDrop = useCallback(
+      (item: QueryBuilderVariableDragSource): void => {
+        setParameter(item.variable);
+      },
+      [setParameter],
+    );
+    const [{ isDragOver }, dropConnector] = useDrop<
+      QueryBuilderVariableDragSource,
+      void,
+      { isDragOver: boolean }
+    >(
+      () => ({
+        accept: [QUERY_BUILDER_VARIABLE_DND_TYPE],
+        drop: (item, monitor): void => {
+          if (!monitor.didDrop()) {
+            handleDrop(item);
+          }
+        },
+        collect: (monitor): { isDragOver: boolean } => ({
+          isDragOver: monitor.isOver({
+            shallow: true,
+          }),
+        }),
+      }),
+      [handleDrop],
+    );
+    const resetMilestoningParameter = (): void => {
+      const param = observe_PrimitiveInstanceValue(
+        new PrimitiveInstanceValue(
+          GenericTypeExplicitReference.create(
+            new GenericType(PrimitiveType.STRICTDATE),
+          ),
+        ),
+        queryBuilderState.observerContext,
+      );
+      instanceValue_setValues(
+        param,
+        [generateDefaultValueForPrimitiveType(PRIMITIVE_TYPE.STRICTDATE)],
+        queryBuilderState.observerContext,
+      );
+      setParameter(param);
+    };
+
+    return (
+      <div ref={dropConnector} className="query-builder__variable-editor">
+        <PanelEntryDropZonePlaceholder
+          isDragOver={isDragOver}
+          label="Change Milestoning Parameter Value"
+        >
+          <BasicValueSpecificationEditor
+            valueSpecification={parameter}
+            graph={queryBuilderState.graphManagerState.graph}
+            obseverContext={queryBuilderState.observerContext}
+            setValueSpecification={(val: ValueSpecification): void =>
+              setParameter(val)
+            }
+            typeCheckOption={{
+              expectedType: PrimitiveType.DATE,
+            }}
+            resetValue={resetMilestoningParameter}
+            isConstant={queryBuilderState.constantState.isValueSpecConstant(
+              parameter,
+            )}
+          />
+        </PanelEntryDropZonePlaceholder>
+      </div>
+    );
+  },
+);