@finos/legend-application 7.2.0 → 8.0.0

package/src/components/VirtualAssistant.tsx

@@ -36,6 +36,7 @@ import {
   PanelLoadingIndicator,
   BasePopover,
   FaceSadTearIcon,
+  CogIcon,
 } from '@finos/legend-art';
 import {
   ContentType,
@@ -56,6 +57,7 @@ import { useApplicationStore } from './ApplicationStoreProvider.js';
 import Draggable from 'react-draggable';
 import { DATE_TIME_FORMAT } from '@finos/legend-graph';
 import { ApplicationTelemetry } from '../stores/ApplicationTelemetry.js';
+import { TextSearchAdvancedConfigMenu } from './shared/TextSearchAdvancedConfigMenu.js';
 
 const WIZARD_GREETING = `Bonjour, It's Pierre!`;
 
@@ -222,6 +224,7 @@ const VirtualAssistantContextualSupportPanel = observer(() => {
               )}
             </>
           )}
+
           {contextualEntry.related.length && (
             <div className="virtual-assistant__contextual-support__relevant-entries">
               <div className="virtual-assistant__contextual-support__relevant-entries__title">
@@ -245,8 +248,8 @@ const VirtualAssistantContextualSupportPanel = observer(() => {
               No contextual documentation found!
             </div>
             <div className="virtual-assistant__panel__placeholder__instruction">
-              Keep using the app, when contextual doc available, we will let you
-              know!
+              Keep using the app. When contextual help is available, we will let
+              you know!
             </div>
           </div>
         </BlankPanelContent>
@@ -258,7 +261,10 @@ const VirtualAssistantContextualSupportPanel = observer(() => {
 const VirtualAssistantSearchPanel = observer(() => {
   const applicationStore = useApplicationStore();
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const searchConfigButtonRef = useRef<HTMLButtonElement>(null);
   const assistantService = applicationStore.assistantService;
+
+  // search text
   const searchText = assistantService.searchText;
   const debouncedSearch = useMemo(
     () => debounce(() => assistantService.search(), 100),
@@ -272,13 +278,10 @@ const VirtualAssistantSearchPanel = observer(() => {
   };
   const clearSearchText = (): void => {
     assistantService.resetSearch();
+    assistantService.currentDocumentationEntry = undefined;
     searchInputRef.current?.focus();
   };
-  const results = assistantService.searchResults;
-  const resultCount =
-    assistantService.searchResults.length > 99
-      ? '99+'
-      : assistantService.searchResults.length;
+
   const downloadDocRegistry = (): void => {
     downloadFileUsingDataURI(
       `documentation-registry_${format(
@@ -307,6 +310,10 @@ const VirtualAssistantSearchPanel = observer(() => {
       ContentType.APPLICATION_JSON,
     );
   };
+  const toggleSearchConfigMenu = (): void =>
+    assistantService.setShowSearchConfigurationMenu(
+      !assistantService.showSearchConfigurationMenu,
+    );
 
   useEffect(() => {
     searchInputRef.current?.focus();
@@ -351,94 +358,138 @@ const VirtualAssistantSearchPanel = observer(() => {
           className={clsx('virtual-assistant__search__input input--dark', {
             'virtual-assistant__search__input--searching': searchText,
           })}
+          spellCheck={false}
           onChange={onSearchTextChange}
           value={searchText}
           placeholder="Ask me a question"
         />
+        {searchText && (
+          <div className="virtual-assistant__search__input__search__count">
+            {assistantService.searchResults.length +
+              (assistantService.isOverSearchLimit ? '+' : '')}
+          </div>
+        )}
+        <button
+          ref={searchConfigButtonRef}
+          className={clsx('virtual-assistant__search__input__config__trigger', {
+            'virtual-assistant__search__input__config__trigger--toggled':
+              assistantService.showSearchConfigurationMenu,
+            'virtual-assistant__search__input__config__trigger--active':
+              assistantService.searchConfigurationState.isAdvancedSearchActive,
+          })}
+          tabIndex={-1}
+          onClick={toggleSearchConfigMenu}
+          title={`${
+            assistantService.searchConfigurationState.isAdvancedSearchActive
+              ? 'Advanced search is currently active\n'
+              : ''
+          }Click to toggle search config menu`}
+        >
+          <CogIcon />
+        </button>
         {!searchText ? (
           <div className="virtual-assistant__search__input__search__icon">
             <SearchIcon />
           </div>
         ) : (
-          <>
-            <div className="virtual-assistant__search__input__search__count">
-              {resultCount}
-            </div>
-            <button
-              className="virtual-assistant__search__input__clear-btn"
-              tabIndex={-1}
-              onClick={clearSearchText}
-              title="Clear"
-            >
-              <TimesIcon />
-            </button>
-          </>
+          <button
+            className="virtual-assistant__search__input__clear-btn"
+            tabIndex={-1}
+            onClick={clearSearchText}
+            title="Clear"
+          >
+            <TimesIcon />
+          </button>
         )}
       </div>
       <div className="virtual-assistant__search__content">
         <PanelLoadingIndicator
           isLoading={assistantService.searchState.isInProgress}
         />
-        {Boolean(results.length) && (
+        {/* {assistantService.showSearchConfigurationMenu && ( */}
+        <div
+          className={clsx('virtual-assistant__search__input__config__panel', {
+            'virtual-assistant__search__input__config__panel--toggled':
+              assistantService.showSearchConfigurationMenu,
+          })}
+        >
+          <TextSearchAdvancedConfigMenu
+            configState={assistantService.searchConfigurationState}
+          />
+        </div>
+        {/* )} */}
+        {assistantService.currentDocumentationEntry && (
           <div className="virtual-assistant__search__results">
-            {results.map((result) => (
-              <VirtualAssistantDocumentationEntryViewer
-                key={result.uuid}
-                entry={result}
-              />
-            ))}
+            <VirtualAssistantDocumentationEntryViewer
+              key={assistantService.currentDocumentationEntry.uuid}
+              entry={assistantService.currentDocumentationEntry}
+            />
           </div>
         )}
-        {searchText && !results.length && (
-          <BlankPanelContent>
-            <div className="virtual-assistant__panel__placeholder">
-              <FaceSadTearIcon className="virtual-assistant__panel__placeholder__icon" />
-              <div className="virtual-assistant__panel__placeholder__message">
-                No result...
-              </div>
-            </div>
-          </BlankPanelContent>
-        )}
-        {/*
-          NOTE: technically, we don't need to check for the result size here.
-          However, since the search results update is slightly delayed compared to
-          the search text update, we do this to avoid showing the placeholder too
-          early, i.e. when the search results are not yet cleaned
-         */}
-        {!searchText && !results.length && (
-          <ContextMenu
-            className="virtual-assistant__character__container"
-            menuProps={{
-              elevation: 7,
-              classes: {
-                root: 'virtual-assistant__context-menu',
-              },
-            }}
-            content={
-              <MenuContent>
-                <MenuContentItem onClick={downloadDocRegistry}>
-                  Download documentation registry
-                </MenuContentItem>
-                <MenuContentItem onClick={downloadContextualDocIndex}>
-                  Download contextual documentation mapping
-                </MenuContentItem>
-              </MenuContent>
-            }
-          >
-            <div className="virtual-assistant__character">
-              <div className="virtual-assistant__character__figure">
-                <WizardHatIcon className="virtual-assistant__character__hat" />
-                <SunglassesIcon className="virtual-assistant__character__glasses" />
-                <BeardIcon className="virtual-assistant__character__beard" />
-              </div>
-              <div className="virtual-assistant__character__greeting">
-                {WIZARD_GREETING}
-              </div>
-              <div className="virtual-assistant__character__question">
-                How can I help today?
+        {!assistantService.currentDocumentationEntry && (
+          <>
+            {Boolean(assistantService.searchResults.length) && (
+              <div className="virtual-assistant__search__results">
+                {assistantService.searchResults.map((result) => (
+                  <VirtualAssistantDocumentationEntryViewer
+                    key={result.uuid}
+                    entry={result}
+                  />
+                ))}
               </div>
-            </div>
-          </ContextMenu>
+            )}
+            {searchText && !assistantService.searchResults.length && (
+              <BlankPanelContent>
+                <div className="virtual-assistant__panel__placeholder">
+                  <FaceSadTearIcon className="virtual-assistant__panel__placeholder__icon" />
+                  <div className="virtual-assistant__panel__placeholder__message">
+                    No result...
+                  </div>
+                </div>
+              </BlankPanelContent>
+            )}
+            {/*
+              NOTE: technically, we don't need to check for the result size here.
+              However, since the search results update is slightly delayed compared to
+              the search text update, we do this to avoid showing the placeholder too
+              early, i.e. when the search results are not yet cleaned
+            */}
+            {!searchText && !assistantService.searchResults.length && (
+              <ContextMenu
+                className="virtual-assistant__character__container"
+                menuProps={{
+                  elevation: 7,
+                  classes: {
+                    root: 'virtual-assistant__context-menu',
+                  },
+                }}
+                content={
+                  <MenuContent>
+                    <MenuContentItem onClick={downloadDocRegistry}>
+                      Download documentation registry
+                    </MenuContentItem>
+                    <MenuContentItem onClick={downloadContextualDocIndex}>
+                      Download contextual documentation mapping
+                    </MenuContentItem>
+                  </MenuContent>
+                }
+              >
+                <div className="virtual-assistant__character">
+                  <div className="virtual-assistant__character__figure">
+                    <WizardHatIcon className="virtual-assistant__character__hat" />
+                    <SunglassesIcon className="virtual-assistant__character__glasses" />
+                    <BeardIcon className="virtual-assistant__character__beard" />
+                  </div>
+                  <div className="virtual-assistant__character__greeting">
+                    {WIZARD_GREETING}
+                  </div>
+                  <div className="virtual-assistant__character__question">
+                    How can I help today?
+                  </div>
+                </div>
+              </ContextMenu>
+            )}
+          </>
         )}
       </div>
     </div>

package/src/components/shared/CustomDatePicker.tsx

@@ -15,6 +15,7 @@
  */
 
 import {
+  type SelectComponent,
   BasePopover,
   BaseRadioGroup,
   CustomSelectorInput,
@@ -41,9 +42,11 @@ import {
 } from '@finos/legend-graph';
 import {
   guaranteeNonNullable,
+  parseNumber,
+  returnUndefOnError,
   UnsupportedOperationError,
 } from '@finos/legend-shared';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
   genericType_setRawType,
   instanceValue_changeValue,
@@ -682,6 +685,7 @@ const AbsoluteDateValueSpecificationEditor: React.FC<{
     setValueSpecification,
     setDatePickerOption,
   } = props;
+  const inputRef = useRef<HTMLInputElement>(null);
   const absoluteDateValue =
     valueSpecification instanceof SimpleFunctionExpression
       ? ''
@@ -717,9 +721,15 @@ const AbsoluteDateValueSpecificationEditor: React.FC<{
       ),
     );
   };
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
   return (
     <div className="value-spec-editor__date-picker__absolute-date">
       <input
+        ref={inputRef}
         className="panel__content__form__section__input value-spec-editor__date-picker__absolute-date__input input--dark"
         type="date"
         spellCheck={false}
@@ -742,6 +752,7 @@ const AbsoluteTimeValueSpecificationEditor: React.FC<{
     setValueSpecification,
     setDatePickerOption,
   } = props;
+  const inputRef = useRef<HTMLInputElement>(null);
   const absoluteTimeValue =
     valueSpecification instanceof SimpleFunctionExpression
       ? ''
@@ -777,9 +788,15 @@ const AbsoluteTimeValueSpecificationEditor: React.FC<{
       ),
     );
   };
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
   return (
     <div className="value-spec-editor__date-picker__absolute-date">
       <input
+        ref={inputRef}
         className="panel__content__form__section__input value-spec-editor__date-picker__absolute-date__input input--dark"
         // Despite its name this would actually allow us to register time in UTC
         // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local#setting_timezones
@@ -804,6 +821,7 @@ const CustomDateInstanceValueEditor: React.FC<{
     setValueSpecification,
     setDatePickerOption,
   } = props;
+  const inputRef = useRef<HTMLInputElement>(null);
   const [durationValue, setDurationValue] = useState(
     customDateOptionValue.duration,
   );
@@ -859,15 +877,22 @@ const CustomDateInstanceValueEditor: React.FC<{
     event,
   ) => {
     const duration =
-      event.target.value !== '' ? parseInt(event.target.value) : 0;
+      event.target.value !== ''
+        ? returnUndefOnError(() => parseNumber(event.target.value)) ?? 0
+        : 0;
     setDurationValue(duration);
     changeValue(duration, unitValue, directionValue, referenceMomentValue);
   };
 
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
   return (
     <div className="value-spec-editor__date-picker__custom-date">
       <div className="value-spec-editor__date-picker__custom-date__input">
         <input
+          ref={inputRef}
           className="value-spec-editor__date-picker__custom-date__input-text-editor input--dark"
           spellCheck={false}
           value={durationValue}
@@ -958,6 +983,7 @@ const CustomFirstDayOfValueSpecificationEditor: React.FC<{
     setValueSpecification,
     setDatePickerOption,
   } = props;
+  const selectorRef = useRef<SelectComponent>(null);
   const [unitValue, setUnitValue] = useState(
     customDateAdjustOptionValue instanceof CustomFirstDayOfOption
       ? (customDateAdjustOptionValue.unit as string)
@@ -982,10 +1008,15 @@ const CustomFirstDayOfValueSpecificationEditor: React.FC<{
     }
   };
 
+  useEffect(() => {
+    selectorRef.current?.focus();
+  }, []);
+
   return (
     <div className="value-spec-editor__date-picker__custom-date">
       <div className="value-spec-editor__date-picker__custom-date__input">
         <CustomSelectorInput
+          ref={selectorRef}
           placeholder="Choose a unit..."
           className="value-spec-editor__date-picker__custom-date__input-dropdown value-spec-editor__date-picker__custom-date__input-dropdown--full"
           options={Object.values(CUSTOM_DATE_FIRST_DAY_OF_UNIT).map((t) => ({
@@ -1018,6 +1049,7 @@ const CustomPreviousDayOfWeekValueSpecificationEditor: React.FC<{
     setValueSpecification,
     setDatePickerOption,
   } = props;
+  const selectorRef = useRef<SelectComponent>(null);
   const [dayOfWeekValue, setDayOfWeekValue] = useState(
     customDateAdjustOptionValue instanceof CustomPreviousDayOfWeekOption
       ? (customDateAdjustOptionValue.day as string)
@@ -1036,10 +1068,15 @@ const CustomPreviousDayOfWeekValueSpecificationEditor: React.FC<{
     }
   };
 
+  useEffect(() => {
+    selectorRef.current?.focus();
+  }, []);
+
   return (
     <div className="value-spec-editor__date-picker__custom-date">
       <div className="value-spec-editor__date-picker__custom-date__input">
         <CustomSelectorInput
+          ref={selectorRef}
           placeholder="Choose a day..."
           className="value-spec-editor__date-picker__custom-date__input-dropdown value-spec-editor__date-picker__custom-date__input-dropdown--full"
           options={Object.values(CUSTOM_DATE_DAY_OF_WEEK).map((t) => ({
@@ -1241,6 +1278,7 @@ export const CustomDatePicker: React.FC<{
         }}
       >
         <BaseRadioGroup
+          className="value-spec-editor__date-picker__options"
           value={datePickerOption.value}
           onChange={handleDatePickerOptionChange}
           row={true}

package/src/components/shared/TextSearchAdvancedConfigMenu.tsx

@@ -0,0 +1,73 @@
+/**
+ * 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 { BaseRadioGroup, InfoCircleIcon } from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { LEGEND_APPLICATION_DOCUMENTATION_KEY } from '../../stores/LegendApplicationDocumentation.js';
+import {
+  ADVANCED_TEXT_SEARCH_MODE,
+  type TextSearchAdvancedConfigState,
+} from '../../stores/shared/TextSearchAdvancedConfigState.js';
+import { useApplicationStore } from '../ApplicationStoreProvider.js';
+
+export const TextSearchAdvancedConfigMenu = observer(
+  (props: { configState: TextSearchAdvancedConfigState }) => {
+    const { configState } = props;
+    const applicationStore = useApplicationStore();
+
+    const handleSearchMode: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ): void => {
+      const searchMode = event.target.value as ADVANCED_TEXT_SEARCH_MODE;
+      configState.setCurrentMode(searchMode);
+    };
+    const seeDocumentation = (): void =>
+      applicationStore.assistantService.openDocumentationEntry(
+        LEGEND_APPLICATION_DOCUMENTATION_KEY.QUESTION_HOW_TO_USE_ADVANCED_SEARCH_SYNTAX,
+      );
+
+    return (
+      <div className="text-search-advanced-config__panel">
+        <div className="text-search-advanced-config__panel__header__label">
+          search config
+          <button
+            className="text-search-advanced-config__panel__header__hint"
+            tabIndex={-1}
+            onClick={seeDocumentation}
+            title="Click to see more details on advanced search"
+          >
+            <InfoCircleIcon />
+          </button>
+        </div>
+        <div>
+          <BaseRadioGroup
+            className="text-search-advanced-config__options"
+            value={configState.currentMode}
+            onChange={handleSearchMode}
+            row={false}
+            options={[
+              ADVANCED_TEXT_SEARCH_MODE.STANDARD,
+              ADVANCED_TEXT_SEARCH_MODE.INCLUDE,
+              ADVANCED_TEXT_SEARCH_MODE.EXACT,
+              ADVANCED_TEXT_SEARCH_MODE.INVERSE,
+            ]}
+            size={1}
+          />
+        </div>
+      </div>
+    );
+  },
+);

package/src/index.ts

@@ -39,6 +39,9 @@ export * from './stores/AssistantService.js';
 export * from './stores/ApplicationNavigationContextService.js';
 export * from './stores/LegendApplicationPlugin.js';
 
+export * from './components/shared/TextSearchAdvancedConfigMenu.js';
+export * from './stores/shared/TextSearchAdvancedConfigState.js';
+
 export * from './stores/ApplicationStoreTestUtils.js';
 
 // ------------------------------------------- Shared components -------------------------------------------

package/src/stores/ApplicationStore.ts

@@ -25,7 +25,7 @@ import {
   isString,
   ApplicationError,
 } from '@finos/legend-shared';
-import { makeAutoObservable, action } from 'mobx';
+import { action, makeObservable, observable } from 'mobx';
 import { APPLICATION_EVENT } from './ApplicationEvent.js';
 import type { LegendApplicationConfig } from '../application/LegendApplicationConfig.js';
 import type { WebApplicationNavigator } from './WebApplicationNavigator.js';
@@ -105,15 +105,15 @@ export class Notification {
 
 export type GenericLegendApplicationStore = ApplicationStore<
   LegendApplicationConfig,
-  LegendApplicationPlugin
+  LegendApplicationPluginManager<LegendApplicationPlugin>
 >;
 
 export class ApplicationStore<
   T extends LegendApplicationConfig,
-  V extends LegendApplicationPlugin,
+  V extends LegendApplicationPluginManager<LegendApplicationPlugin>,
 > {
-  pluginManager: LegendApplicationPluginManager<V>;
   config: T;
+  pluginManager: V;
 
   // navigation
   navigator: WebApplicationNavigator;
@@ -144,13 +144,12 @@ export class ApplicationStore<
    */
   TEMPORARY__isLightThemeEnabled = false;
 
-  constructor(
-    config: T,
-    navigator: WebApplicationNavigator,
-    pluginManager: LegendApplicationPluginManager<V>,
-  ) {
-    makeAutoObservable(this, {
-      navigator: false,
+  constructor(config: T, navigator: WebApplicationNavigator, pluginManager: V) {
+    makeObservable(this, {
+      notification: observable,
+      blockingAlertInfo: observable,
+      actionAlertInfo: observable,
+      TEMPORARY__isLightThemeEnabled: observable,
       setBlockingAlert: action,
       setActionAlertInfo: action,
       setNotification: action,

package/src/stores/ApplicationStoreTestUtils.ts

@@ -52,10 +52,10 @@ export const TEST__getGenericApplicationConfig = (
 
 export const TEST__getTestApplicationStore = <
   T extends LegendApplicationConfig,
-  V extends LegendApplicationPlugin,
+  V extends LegendApplicationPluginManager<LegendApplicationPlugin>,
 >(
   config: T,
-  pluginManager: LegendApplicationPluginManager<V>,
+  pluginManager: V,
 ): ApplicationStore<T, V> =>
   new ApplicationStore(
     config,

package/src/stores/ApplicationTelemetry.ts

@@ -18,6 +18,11 @@ import type { TelemetryService } from '@finos/legend-shared';
 import { APPLICATION_EVENT } from './ApplicationEvent.js';
 
 type ApplicationLoaded_TelemetryData = {
+  application: {
+    name: string;
+    version: string;
+    env: string;
+  };
   browser: {
     userAgent: string;
   };