@finos/legend-application 0.0.13 → 0.2.1

package/src/components/NotificationSnackbar.tsx

@@ -31,14 +31,16 @@ import {
   FaBug,
 } from 'react-icons/fa';
 import { useApplicationStore } from './ApplicationStoreProvider';
+import { ChevronDownIcon, ChevronUpIcon, clsx } from '@finos/legend-art';
+import { useState } from 'react';
 
 export const NotificationSnackbar = observer(() => {
   const applicationStore = useApplicationStore();
   const notification = applicationStore.notification;
   const isOpen = Boolean(notification);
-  // TODO: have a better way to truncate message in snackbar
   const message = notification?.message ?? '';
   const severity = notification?.severity ?? NOTIFCATION_SEVERITY.INFO;
+  const [isExpanded, setIsExpanded] = useState(false);
   let notificationIcon = (
     <div className="notification__message__content__icon notification__message__content__icon--info">
       <FaInfoCircle />
@@ -76,7 +78,14 @@ export const NotificationSnackbar = observer(() => {
     default:
       break;
   }
-  const handleClose = (): void => applicationStore.setNotification(undefined);
+  const handleClose = (): void => {
+    applicationStore.setNotification(undefined);
+    setIsExpanded(false);
+  };
+  const handleCopy = (): Promise<void> =>
+    applicationStore.copyTextToClipboard(message);
+  const toggleExpansion = (): void => setIsExpanded(!isExpanded);
+
   const onSnackbarAutoHideOrClickAway = (
     event: React.SyntheticEvent<unknown>,
     reason: SnackbarCloseReason,
@@ -125,12 +134,28 @@ export const NotificationSnackbar = observer(() => {
         message={
           <div className="notification__message__content">
             {notificationIcon}
-            <div className="notification__message__content__text">
+            <div
+              className={clsx('notification__message__content__text', {
+                'notification__message__content__text--expanded': isExpanded,
+              })}
+              onClick={handleCopy}
+              title="Click to Copy"
+            >
               {message}
             </div>
           </div>
         }
         action={[
+          <button
+            className="notification__action"
+            id="expand_button"
+            key="expand"
+            onClick={toggleExpansion}
+            tabIndex={-1}
+            title={isExpanded ? 'Collapse' : 'Expand'}
+          >
+            {isExpanded ? <ChevronDownIcon /> : <ChevronUpIcon />}
+          </button>,
           <button
             className="notification__action"
             key="close"

package/src/components/TextInputEditor.tsx

@@ -23,6 +23,8 @@ import {
   disableEditorHotKeys,
   baseTextEditorSettings,
   resetLineNumberGutterWidth,
+  getEditorValue,
+  normalizeLineEnding,
 } from '@finos/legend-art';
 import type { EDITOR_LANGUAGE } from '../const';
 import { EDITOR_THEME, TAB_SIZE } from '../const';
@@ -63,6 +65,16 @@ export const TextInputEditor: React.FC<{
   const onDidChangeModelContentEventDisposer = useRef<IDisposable | undefined>(
     undefined,
   );
+
+  /**
+   * NOTE: we want to normalize line ending here since if the original
+   * input value includes CR '\r' character, it will get normalized, calling
+   * the updateInput method and cause a rerender. With the way we setup
+   * `onChange` method, React will warn about `setState` being called in
+   * `render` method.
+   * See https://github.com/finos/legend-studio/issues/608
+   */
+  const value = normalizeLineEnding(inputValue);
   const textInputRef = useRef<HTMLDivElement>(null);
 
   const { ref, width, height } = useResizeDetector<HTMLDivElement>();
@@ -103,8 +115,8 @@ export const TextInputEditor: React.FC<{
     onDidChangeModelContentEventDisposer.current?.dispose();
     onDidChangeModelContentEventDisposer.current =
       editor.onDidChangeModelContent(() => {
-        const currentVal = editor.getValue();
-        if (currentVal !== inputValue) {
+        const currentVal = getEditorValue(editor);
+        if (currentVal !== value) {
           updateInput?.(currentVal);
         }
       });
@@ -123,9 +135,9 @@ export const TextInputEditor: React.FC<{
     });
 
     // Set the text value and editor options
-    const currentValue = editor.getValue();
-    if (currentValue !== inputValue) {
-      editor.setValue(inputValue);
+    const currentValue = getEditorValue(editor);
+    if (currentValue !== value) {
+      editor.setValue(value);
     }
     editor.updateOptions({
       readOnly: Boolean(isReadOnly),

package/src/components/WebApplicationNavigatorProvider.tsx

@@ -18,6 +18,7 @@ import { guaranteeNonNullable } from '@finos/legend-shared';
 import { useLocalObservable } from 'mobx-react-lite';
 import { createContext, useContext } from 'react';
 import { useHistory } from 'react-router';
+import type { History } from 'history';
 import { WebApplicationNavigator } from '../stores/WebApplicationNavigator';
 
 const WebApplicationNavigatorContext = createContext<
@@ -29,7 +30,7 @@ export const WebApplicationNavigatorProvider = ({
 }: {
   children: React.ReactNode;
 }): React.ReactElement => {
-  const history = useHistory();
+  const history = useHistory() as History;
   const navigator = useLocalObservable(
     () => new WebApplicationNavigator(history),
   );

package/src/index.ts

@@ -23,6 +23,7 @@ export * from './components/WebApplicationNavigatorProvider';
 
 export * from './components/ApplicationStoreProviderTestUtils';
 export * from './components/WebApplicationNavigatorProviderTestUtils';
+export { AppHeader } from './components/AppHeader';
 export { BlockingAlert } from './components/BlockingAlert';
 export { ActionAlert } from './components/ActionAlert';
 export { NotificationSnackbar } from './components/NotificationSnackbar';

package/src/stores/ApplicationStore.ts

@@ -16,6 +16,7 @@
 
 import type { Log, SuperGenericFunction } from '@finos/legend-shared';
 import {
+  assertTrue,
   LogEvent,
   assertErrorThrown,
   isString,
@@ -204,26 +205,15 @@ export class ApplicationStore<T extends LegendApplicationConfig> {
     );
   }
 
-  notifyError(
-    content: unknown,
-    actions?: NotificationAction[],
-    autoHideDuration?: number | null,
-  ): void {
+  notifyError(content: Error | string, actions?: NotificationAction[]): void {
     let message: string | undefined;
-    if (content instanceof Error || content instanceof ApplicationError) {
+    if (content instanceof ApplicationError) {
+      message = content.getFullErrorMessage();
+    } else if (content instanceof Error) {
       message = content.message;
-    } else if (isString(content)) {
-      message = content;
     } else {
-      message = undefined;
-      this.log.error(
-        LogEvent.create(
-          APPLICATION_LOG_EVENT.ILLEGAL_APPLICATION_STATE_OCCURRED,
-        ),
-        'Unable to display error in notification',
-        message,
-      );
-      this.notifyIllegalState('Unable to display error');
+      assertTrue(isString(content), `Can't display error`);
+      message = content;
     }
     if (message) {
       this.setNotification(
@@ -231,9 +221,7 @@ export class ApplicationStore<T extends LegendApplicationConfig> {
           NOTIFCATION_SEVERITY.ERROR,
           message,
           actions ?? [],
-          autoHideDuration === null
-            ? undefined
-            : autoHideDuration ?? DEFAULT_NOTIFICATION_HIDE_TIME,
+          undefined,
         ),
       );
     }

package/src/stores/WebApplicationNavigator.ts

@@ -20,6 +20,20 @@ import { guaranteeNonNullable } from '@finos/legend-shared';
 /**
  * This is an initial attempt to try to generalize the application
  * to other platforms. But regardless, this is more convenient for testing.
+ *
+ * FIXME: this is not the right way to do this. Our intention here is to make
+ * app navigator something generic enough so we are somewhat platform-agnostic
+ * i.e. browser, electron, PC, UNIX, etc.
+ *
+ * Parameterize on the type of the location might not be the best thing to do.
+ * Because typing wise, this forces us to also parameterize consumers of this,
+ * which is `ApplicationStore`. It means that we must dictate in the source
+ * code the platform the app depends on, clearly for web browser, `string` is the
+ * easy option, but if we do so, it defeats the purpose of this abstraction in the
+ * first place.
+ *
+ * As such, instead, we should design a more generic concept `Location` to pass around.
+ * We would need to flesh out the details, but this is the rough idea.
  */
 interface ApplicationNavigator<T> {
   reload(): void;
@@ -27,6 +41,8 @@ interface ApplicationNavigator<T> {
   jumpTo(location: T): void;
   openNewWindow(location: T): void;
   getCurrentLocation(): T;
+  getCurrentLocationPath(): T;
+  generateLocation(locationPath: T): T;
 }
 
 export class WebApplicationNavigator implements ApplicationNavigator<string> {
@@ -63,10 +79,14 @@ export class WebApplicationNavigator implements ApplicationNavigator<string> {
     return this.window.location.href;
   }
 
-  generateLocation(location: string): string {
+  getCurrentLocationPath(): string {
+    return this.historyAPI.location.pathname;
+  }
+
+  generateLocation(locationPath: string): string {
     return (
       window.location.origin +
-      this.historyAPI.createHref({ pathname: location })
+      this.historyAPI.createHref({ pathname: locationPath })
     );
   }
 }

package/tsconfig.json

@@ -22,6 +22,7 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "noImplicitOverride": true,
+    "noUncheckedIndexedAccess": true,
     "exactOptionalPropertyTypes": true,
     "forceConsistentCasingInFileNames": true,
     "outDir": "./lib",
@@ -29,11 +30,6 @@
     "rootDir": "./src",
     "jsx": "react-jsx"
   },
-  "references": [
-    {
-      "path": "./tsconfig.package.json"
-    }
-  ],
   "files": [
     "./src/const.ts",
     "./src/index.ts",
@@ -49,6 +45,7 @@
     "./src/stores/WebApplicationNavigator.ts",
     "./src/application/LegendApplication.tsx",
     "./src/components/ActionAlert.tsx",
+    "./src/components/AppHeader.tsx",
     "./src/components/ApplicationBackdrop.tsx",
     "./src/components/ApplicationStoreProvider.tsx",
     "./src/components/ApplicationStoreProviderTestUtils.tsx",

package/tsconfig.package.json

@@ -1,40 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext",
-      "webworker",
-      "scripthost"
-    ],
-    "composite": true,
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "target": "esnext",
-    "module": "esnext",
-    "skipLibCheck": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "importsNotUsedAsValues": "error",
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "noImplicitOverride": true,
-    "exactOptionalPropertyTypes": true,
-    "forceConsistentCasingInFileNames": true,
-    "outDir": "./lib",
-    "tsBuildInfoFile": "./build/package.tsbuildinfo",
-    "rootDir": "./"
-  },
-  "files": [
-    "./package.json"
-  ],
-  "include": [
-    "package.json"
-  ],
-  "exclude": [
-    "lib"
-  ]
-}