@finos/legend-query-builder 0.1.0 → 0.1.1

package/src/components/QuerySetupUtils.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { LightQuery } from '@finos/legend-graph';
+
+export type QueryOption = { label: string; value: LightQuery };
+export const buildQueryOption = (query: LightQuery): QueryOption => ({
+  label: query.name,
+  value: query,
+});

package/src/components/fetch-structure/QueryBuilderFetchStructurePanel.tsx

@@ -15,7 +15,12 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { clsx, BlankPanelContent } from '@finos/legend-art';
+import {
+  clsx,
+  BlankPanelContent,
+  Panel,
+  PanelContent,
+} from '@finos/legend-art';
 import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 import { prettyCONSTName } from '@finos/legend-shared';
 import { QueryBuilderProjectionPanel } from './QueryBuilderProjectionPanel.js';
@@ -47,7 +52,7 @@ const QueryBuilderFetchStructureEditor = observer(
       );
     }
     return (
-      <div className="panel__content">
+      <PanelContent>
         <BlankPanelContent>
           <div className="query-builder__unsupported-view__main">
             <div className="query-builder__unsupported-view__summary">
@@ -55,7 +60,7 @@ const QueryBuilderFetchStructureEditor = observer(
             </div>
           </div>
         </BlankPanelContent>
-      </div>
+      </PanelContent>
     );
   },
 );
@@ -78,7 +83,7 @@ export const QueryBuilderFetchStructurePanel = observer(
       };
 
     return (
-      <div className="panel">
+      <Panel>
         <div className="panel__header">
           <div className="panel__header__title">
             <div className="panel__header__title__label">fetch structure</div>
@@ -106,7 +111,7 @@ export const QueryBuilderFetchStructurePanel = observer(
         <QueryBuilderFetchStructureEditor
           queryBuilderState={queryBuilderState}
         />
-      </div>
+      </Panel>
     );
   },
 );

package/src/components/fetch-structure/QueryBuilderPostFilterPanel.tsx

@@ -52,6 +52,7 @@ import {
   PanelEntryDropZonePlaceholder,
   useDragPreviewLayer,
   BlankPanelContent,
+  PanelContent,
 } from '@finos/legend-art';
 import {
   type Type,
@@ -1035,7 +1036,7 @@ const QueryBuilderPostFilterPanelContent = observer(
             </button>
           </div>
         </div>
-        <div className="panel__content">
+        <PanelContent>
           <PanelDropZone
             isDragOver={isDragOver}
             dropTargetConnector={dropTargetConnector}
@@ -1058,7 +1059,7 @@ const QueryBuilderPostFilterPanelContent = observer(
               </>
             )}
           </PanelDropZone>
-        </div>
+        </PanelContent>
       </div>
     );
   },
@@ -1090,11 +1091,11 @@ export const QueryBuilderPostFilterPanel = observer(
                 <div className="panel__header__title__label">post-filter</div>
               </div>
             </div>
-            <div className="panel__content">
+            <PanelContent>
               <BlankPanelContent>
                 Post-filter is not supported for the current fetch-structure
               </BlankPanelContent>
-            </div>
+            </PanelContent>
           </>
         )}
       </div>

package/src/components/fetch-structure/QueryBuilderProjectionPanel.tsx

@@ -34,6 +34,7 @@ import {
   useDragPreviewLayer,
   OptionsIcon,
   PlusIcon,
+  PanelContent,
 } from '@finos/legend-art';
 import {
   type QueryBuilderExplorerTreeDragSource,
@@ -583,7 +584,7 @@ export const QueryBuilderProjectionPanel = observer(
     }, [applicationStore, projectionState]);
 
     return (
-      <div className="panel__content">
+      <PanelContent>
         <div className="query-builder__projection__toolbar">
           <button
             className="panel__header__action"
@@ -639,7 +640,7 @@ export const QueryBuilderProjectionPanel = observer(
             <QueryResultModifierModal projectionState={projectionState} />
           </PanelDropZone>
         </div>
-      </div>
+      </PanelContent>
     );
   },
 );

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -42,6 +42,7 @@ import {
   DragPreviewLayer,
   PanelEntryDropZonePlaceholder,
   useDragPreviewLayer,
+  PanelContent,
 } from '@finos/legend-art';
 import {
   type QueryBuilderFilterConditionDragSource,
@@ -851,7 +852,7 @@ export const QueryBuilderFilterPanel = observer(
             </button>
           </div>
         </div>
-        <div className="panel__content">
+        <PanelContent>
           <PanelDropZone
             isDragOver={isDragOver}
             dropTargetConnector={dropTargetConnector}
@@ -874,7 +875,7 @@ export const QueryBuilderFilterPanel = observer(
               </>
             )}
           </PanelDropZone>
-        </div>
+        </PanelContent>
       </div>
     );
   },

package/src/index.ts

@@ -39,3 +39,4 @@ export type { ServiceExecutionAnalysisResult } from './graphManager/action/analy
 export type { MappingRuntimeCompatibilityAnalysisResult } from './graphManager/action/analytics/MappingRuntimeCompatibilityAnalysis.js';
 export * from './stores/ServiceInfo.js';
 export * from './components/ServiceQuerySetupUtils.js';
+export * from './components/QuerySetupUtils.js';

package/src/stores/QueryBuilderChangeDetectionState.ts

@@ -14,6 +14,10 @@
  * limitations under the License.
  */
 
+import {
+  ActionAlertActionType,
+  ActionAlertType,
+} from '@finos/legend-application';
 import type { RawLambda } from '@finos/legend-graph';
 import {
   ActionState,
@@ -136,4 +140,31 @@ export class QueryBuilderChangeDetectionState {
     this.initialQuery = initialQuery;
     this.initState.complete();
   }
+
+  alertUnsavedChanges(onProceed: () => void): void {
+    if (this.hasChanged) {
+      this.querybuilderState.applicationStore.setActionAlertInfo({
+        message:
+          'Unsaved changes to your query will be lost if you continue. Do you still want to proceed?',
+        type: ActionAlertType.CAUTION,
+        actions: [
+          {
+            label: 'Proceed',
+            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+            handler:
+              this.querybuilderState.applicationStore.guardUnhandledError(
+                async () => onProceed(),
+              ),
+          },
+          {
+            label: 'Cancel',
+            type: ActionAlertActionType.PROCEED,
+            default: true,
+          },
+        ],
+      });
+    } else {
+      onProceed();
+    }
+  }
 }

package/src/stores/QueryBuilderParametersState.ts

@@ -33,11 +33,13 @@ export class QueryBuilderParametersState
   extends LambdaParametersState
   implements Hashable
 {
+  readonly queryBuilderState: QueryBuilderState;
+
   selectedParameter: LambdaParameterState | undefined;
-  queryBuilderState: QueryBuilderState;
 
   constructor(queryBuilderState: QueryBuilderState) {
     super();
+
     makeObservable(this, {
       parameterValuesEditorState: observable,
       parameterStates: observable,

package/src/stores/QueryBuilderTypeaheadHelper.ts

@@ -36,9 +36,10 @@ import {
 } from './fetch-structure/projection/QueryBuilderProjectionColumnState.js';
 import type { QueryBuilderState } from './QueryBuilderState.js';
 import { QueryBuilderProjectionState } from './fetch-structure/projection/QueryBuilderProjectionState.js';
-
-const TYPEAHEAD_TAKE_LIMIT = 10;
-const START_LENGTH = 3;
+import {
+  DEFAULT_TYPEAHEAD_SEARCH_LIMIT,
+  DEFAULT_TYPEAHEAD_SEARCH_MINIMUM_SEARCH_LENGTH,
+} from '@finos/legend-application';
 
 const initializeQueryBuilderState = (
   queryBuilderState: QueryBuilderState,
@@ -49,7 +50,7 @@ const initializeQueryBuilderState = (
     QueryBuilderProjectionState,
   );
   projectionState.resultSetModifierState.distinct = true;
-  projectionState.resultSetModifierState.limit = TYPEAHEAD_TAKE_LIMIT;
+  projectionState.resultSetModifierState.limit = DEFAULT_TYPEAHEAD_SEARCH_LIMIT;
   return builderState;
 };
 
@@ -142,7 +143,7 @@ export const performTypeahead = (
     switch (_type.path) {
       case PRIMITIVE_TYPE.STRING: {
         const value = val.values[0] as string;
-        return value.length >= START_LENGTH;
+        return value.length >= DEFAULT_TYPEAHEAD_SEARCH_MINIMUM_SEARCH_LENGTH;
       }
       default:
         return false;

package/tsconfig.json

@@ -35,6 +35,7 @@
   "files": [
     "./src/index.ts",
     "./src/components/QueryBuilder_TestID.ts",
+    "./src/components/QuerySetupUtils.ts",
     "./src/graphManager/QueryBuilderHashUtils.ts",
     "./src/graphManager/QueryBuilderSupportedFunctions.ts",
     "./src/graphManager/QueryBuilder_GraphManagerPlugin.ts",