@finos/legend-query-builder 3.0.6 → 3.0.8

package/src/components/QueryBuilder.tsx

@@ -69,7 +69,6 @@ import { QueryBuilderConstantExpressionPanel } from './QueryBuilderConstantExpre
 import { QueryBuilder_LegendApplicationPlugin } from './QueryBuilder_LegendApplicationPlugin.js';
 import { QUERY_BUILDER_SETTING_KEY } from '../__lib__/QueryBuilderSetting.js';
 import { QUERY_BUILDER_COMPONENT_ELEMENT_ID } from './QueryBuilderComponentElement.js';
-import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../__lib__/QueryBuilderDocumentation.js';
 
 const QueryBuilderStatusBar = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
@@ -250,18 +249,6 @@ export const QueryBuilder = observer(
     const applicationStore = queryBuilderState.applicationStore;
     const openLambdaEditor = (mode: QueryBuilderTextEditorMode): void =>
       queryBuilderState.textEditorState.openModal(mode);
-    const toggleAssistant = (): void =>
-      applicationStore.assistantService.toggleAssistant();
-    const queryDocEntry = applicationStore.documentationService.getDocEntry(
-      QUERY_BUILDER_DOCUMENTATION_KEY.TUTORIAL_QUERY_BUILDER,
-    );
-    const openQueryTutorial = (): void => {
-      if (queryDocEntry?.url) {
-        applicationStore.navigationService.navigator.visitAddress(
-          queryDocEntry.url,
-        );
-      }
-    };
     const toggleShowFunctionPanel = (): void => {
       queryBuilderState.setShowFunctionsExplorerPanel(
         !queryBuilderState.showFunctionsExplorerPanel,
@@ -373,206 +360,178 @@ export const QueryBuilder = observer(
                 )}
               </div>
               <div className="query-builder__sub-header__content__actions">
-                <div
-                  title="Query title"
-                  className="query-builder__sub-header__query__title"
-                >
-                  {queryBuilderState.titleOfQuery}
-                </div>
-                <div className="query-builder__sub-header__actions">
-                  <DropdownMenu
-                    className="query-builder__sub-header__custom-action"
-                    title="Show Advanced Menu..."
-                    content={
-                      <MenuContent>
+                <DropdownMenu
+                  className="query-builder__sub-header__custom-action"
+                  title="Show Advanced Menu..."
+                  content={
+                    <MenuContent>
+                      <MenuContentItem
+                        onClick={toggleShowFunctionPanel}
+                        disabled={!queryBuilderState.isQuerySupported}
+                      >
+                        <MenuContentItemIcon>
+                          {queryBuilderState.showFunctionsExplorerPanel ? (
+                            <CheckIcon />
+                          ) : null}
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Function(s)
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      {!queryBuilderState.isParameterSupportDisabled && (
                         <MenuContentItem
-                          onClick={toggleShowFunctionPanel}
-                          disabled={!queryBuilderState.isQuerySupported}
-                        >
-                          <MenuContentItemIcon>
-                            {queryBuilderState.showFunctionsExplorerPanel ? (
-                              <CheckIcon />
-                            ) : null}
-                          </MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Function(s)
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                        {!queryBuilderState.isParameterSupportDisabled && (
-                          <MenuContentItem
-                            onClick={toggleShowParameterPanel}
-                            disabled={
-                              !queryBuilderState.isQuerySupported ||
-                              queryBuilderState.parametersState.parameterStates
-                                .length > 0
-                            }
-                          >
-                            <MenuContentItemIcon>
-                              {queryBuilderState.showParametersPanel ? (
-                                <CheckIcon />
-                              ) : null}
-                            </MenuContentItemIcon>
-                            <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                              Show Parameter(s)
-                            </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}
+                          onClick={toggleShowParameterPanel}
                           disabled={
                             !queryBuilderState.isQuerySupported ||
-                            Array.from(
-                              queryBuilderState.filterState.nodes.values(),
-                            ).length > 0
+                            queryBuilderState.parametersState.parameterStates
+                              .length > 0
                           }
                         >
                           <MenuContentItemIcon>
-                            {queryBuilderState.filterState.showPanel ? (
+                            {queryBuilderState.showParametersPanel ? (
                               <CheckIcon />
                             ) : null}
                           </MenuContentItemIcon>
                           <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Filter
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                        <MenuContentItem
-                          onClick={toggleShowOLAPGroupByPanel}
-                          disabled={
-                            !queryBuilderState.isQuerySupported ||
-                            !(
-                              queryBuilderState.fetchStructureState
-                                .implementation instanceof QueryBuilderTDSState
-                            ) ||
-                            queryBuilderState.fetchStructureState.implementation
-                              .windowState.windowColumns.length > 0
-                          }
-                        >
-                          <MenuContentItemIcon>
-                            {isTDSState &&
-                            guaranteeType(
-                              queryBuilderState.fetchStructureState
-                                .implementation,
-                              QueryBuilderTDSState,
-                            ).showWindowFuncPanel ? (
-                              <CheckIcon />
-                            ) : null}
-                          </MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Window Func(s)
+                            Show Parameter(s)
                           </MenuContentItemLabel>
                         </MenuContentItem>
+                      )}
+                      {
                         <MenuContentItem
-                          onClick={toggleShowPostFilterPanel}
+                          onClick={toggleConstantPanel}
                           disabled={
                             !queryBuilderState.isQuerySupported ||
-                            !(
-                              queryBuilderState.fetchStructureState
-                                .implementation instanceof QueryBuilderTDSState
-                            ) ||
-                            Array.from(
-                              queryBuilderState.fetchStructureState.implementation.postFilterState.nodes.values(),
-                            ).length > 0
+                            queryBuilderState.constantState.constants.length > 0
                           }
                         >
                           <MenuContentItemIcon>
-                            {queryBuilderState.fetchStructureState
-                              .implementation instanceof QueryBuilderTDSState &&
-                            queryBuilderState.fetchStructureState.implementation
-                              .showPostFilterPanel ? (
+                            {queryBuilderState.constantState
+                              .showConstantPanel ? (
                               <CheckIcon />
                             ) : null}
                           </MenuContentItemIcon>
                           <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Post-Filter
+                            Show Constant(s)
                           </MenuContentItemLabel>
                         </MenuContentItem>
-                        <MenuContentItem onClick={openWatermark}>
-                          <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Watermark
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                        <MenuContentDivider />
-                        <MenuContentItem
-                          onClick={openCheckEntitlmentsEditor}
-                          disabled={
-                            queryBuilderState.isQuerySupported &&
+                      }
+                      <MenuContentItem
+                        onClick={toggleShowFilterPanel}
+                        disabled={
+                          !queryBuilderState.isQuerySupported ||
+                          Array.from(
+                            queryBuilderState.filterState.nodes.values(),
+                          ).length > 0
+                        }
+                      >
+                        <MenuContentItemIcon>
+                          {queryBuilderState.filterState.showPanel ? (
+                            <CheckIcon />
+                          ) : null}
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Filter
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentItem
+                        onClick={toggleShowOLAPGroupByPanel}
+                        disabled={
+                          !queryBuilderState.isQuerySupported ||
+                          !(
                             queryBuilderState.fetchStructureState
-                              .implementation instanceof QueryBuilderTDSState &&
-                            queryBuilderState.fetchStructureState.implementation
-                              .projectionColumns.length === 0
-                          }
-                        >
-                          <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Check Entitlements
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                        <MenuContentItem onClick={editQueryInPure}>
-                          <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Edit Query in Pure
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                        <MenuContentItem onClick={showQueryProtocol}>
-                          <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Query Protocol
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                        <MenuContentDivider />
-                        {queryDocEntry && (
-                          <MenuContentItem onClick={openQueryTutorial}>
-                            <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                            <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                              Open Documentation
-                            </MenuContentItemLabel>
-                          </MenuContentItem>
-                        )}
-                        <MenuContentItem onClick={toggleAssistant}>
-                          <MenuContentItemIcon>
-                            {!applicationStore.assistantService.isHidden ? (
-                              <CheckIcon />
-                            ) : null}
-                          </MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Virtual Assistant
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                      </MenuContent>
-                    }
-                    menuProps={{
-                      anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                      transformOrigin: { vertical: 'top', horizontal: 'right' },
-                      elevation: 7,
-                    }}
-                  >
-                    <div className="query-builder__sub-header__custom-action__label">
-                      Advanced
-                    </div>
-                    <CaretDownIcon className="query-builder__sub-header__custom-action__icon" />
-                  </DropdownMenu>
-                </div>
+                              .implementation instanceof QueryBuilderTDSState
+                          ) ||
+                          queryBuilderState.fetchStructureState.implementation
+                            .windowState.windowColumns.length > 0
+                        }
+                      >
+                        <MenuContentItemIcon>
+                          {isTDSState &&
+                          guaranteeType(
+                            queryBuilderState.fetchStructureState
+                              .implementation,
+                            QueryBuilderTDSState,
+                          ).showWindowFuncPanel ? (
+                            <CheckIcon />
+                          ) : null}
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Window Func(s)
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentItem
+                        onClick={toggleShowPostFilterPanel}
+                        disabled={
+                          !queryBuilderState.isQuerySupported ||
+                          !(
+                            queryBuilderState.fetchStructureState
+                              .implementation instanceof QueryBuilderTDSState
+                          ) ||
+                          Array.from(
+                            queryBuilderState.fetchStructureState.implementation.postFilterState.nodes.values(),
+                          ).length > 0
+                        }
+                      >
+                        <MenuContentItemIcon>
+                          {queryBuilderState.fetchStructureState
+                            .implementation instanceof QueryBuilderTDSState &&
+                          queryBuilderState.fetchStructureState.implementation
+                            .showPostFilterPanel ? (
+                            <CheckIcon />
+                          ) : null}
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Post-Filter
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentItem onClick={openWatermark}>
+                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Watermark
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentDivider />
+                      <MenuContentItem
+                        onClick={openCheckEntitlmentsEditor}
+                        disabled={
+                          queryBuilderState.isQuerySupported &&
+                          queryBuilderState.fetchStructureState
+                            .implementation instanceof QueryBuilderTDSState &&
+                          queryBuilderState.fetchStructureState.implementation
+                            .projectionColumns.length === 0
+                        }
+                      >
+                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Check Entitlements
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentItem onClick={editQueryInPure}>
+                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Edit Query in Pure
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentItem onClick={showQueryProtocol}>
+                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Query Protocol
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                    </MenuContent>
+                  }
+                  menuProps={{
+                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                    transformOrigin: { vertical: 'top', horizontal: 'right' },
+                    elevation: 7,
+                  }}
+                >
+                  <div className="query-builder__sub-header__custom-action__label">
+                    Advanced
+                  </div>
+                  <CaretDownIcon className="query-builder__sub-header__custom-action__icon" />
+                </DropdownMenu>
               </div>
             </div>
             <div className="query-builder__main">

package/src/components/QueryBuilderConstantExpressionPanel.tsx

@@ -85,13 +85,11 @@ const QueryBuilderConstantExpressionEditor = observer(
           ),
         );
 
-    const [hasFailedValidation, setFailedValidation] = useState<boolean>(false);
+    const [isNameValid, setIsNameValid] = useState<boolean>(true);
 
-    const getValidationMessage = (
-      constantInput: string,
-    ): string | undefined => {
-      const possibleMessage = !constantInput
-        ? `Constant Name can't be empty`
+    const getValidationMessage = (constantInput: string): string | undefined =>
+      !constantInput
+        ? `Constant name can't be empty`
         : isValidIdentifier(constantInput) === false
         ? 'Constant name must be text with no spaces and not start with an uppercase letter or number'
         : allVariableNames.filter((e) => e === constantInput).length >
@@ -99,10 +97,6 @@ const QueryBuilderConstantExpressionEditor = observer(
         ? 'Constant name already exists'
         : undefined;
 
-      setFailedValidation(possibleMessage !== undefined);
-      return possibleMessage;
-    };
-
     const close = (): void => {
       variableState.setSelectedConstant(undefined);
     };
@@ -146,7 +140,8 @@ const QueryBuilderConstantExpressionEditor = observer(
               update={(value: string | undefined): void => {
                 variableExpression_setName(varExpression, value ?? '');
               }}
-              validateInput={getValidationMessage}
+              validate={getValidationMessage}
+              onValidate={(issue: string | undefined) => setIsNameValid(!issue)}
               value={variableName}
               isReadOnly={false}
             />
@@ -198,7 +193,7 @@ const QueryBuilderConstantExpressionEditor = observer(
             {isCreating && (
               <ModalFooterButton
                 text="Create"
-                inProgress={hasFailedValidation}
+                disabled={!isNameValid}
                 onClick={onAction}
               />
             )}

package/src/components/QueryBuilderParametersPanel.tsx

@@ -113,10 +113,10 @@ const VariableExpressionEditor = observer(
 
     const parameterNameValue = varState.name;
 
-    const [hasFailedValidation, setFailedValidation] = useState<boolean>(false);
+    const [isNameValid, setIsNameValid] = useState<boolean>(true);
 
-    const getValidationMessage = (input: string): string | undefined => {
-      const possibleMessage = !input
+    const getValidationMessage = (input: string): string | undefined =>
+      !input
         ? `Parameter name can't be empty`
         : allVariableNames.filter((e) => e === input).length >
           (isCreating ? 0 : 1)
@@ -134,11 +134,6 @@ const VariableExpressionEditor = observer(
         ? 'Parameter name must be text with no spaces and not start with an uppercase letter or number'
         : undefined;
 
-      setFailedValidation(possibleMessage !== undefined);
-
-      return possibleMessage;
-    };
-
     const close = (): void => {
       queryParametersState.setSelectedParameter(undefined);
     };
@@ -171,10 +166,11 @@ const VariableExpressionEditor = observer(
               name="Parameter Name"
               prompt="Name of the parameter. Should be descriptive of its purpose."
               value={parameterNameValue}
-              validateInput={getValidationMessage}
               update={(value: string | undefined): void => {
                 variableExpression_setName(varState, value ?? '');
               }}
+              validate={getValidationMessage}
+              onValidate={(issue: string | undefined) => setIsNameValid(!issue)}
               isReadOnly={false}
             />
             <div className="panel__content__form__section">
@@ -229,7 +225,7 @@ const VariableExpressionEditor = observer(
             {isCreating && (
               <ModalFooterButton
                 text="Create"
-                inProgress={hasFailedValidation}
+                disabled={!isNameValid}
                 onClick={onAction}
               />
             )}