@finos/legend-application-studio 28.12.1 → 28.13.1

package/src/components/editor/editor-group/function-activator/SnowflakeAppFunctionActivatorEditor.tsx

@@ -0,0 +1,304 @@
+/**
+ * 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 {
+  Panel,
+  PanelHeader,
+  PanelContent,
+  PanelForm,
+  PanelFormTextField,
+  PURE_FunctionIcon,
+  LongArrowRightIcon,
+  PanelLoadingIndicator,
+  PURE_ConnectionIcon,
+  CustomSelectorInput,
+  createFilter,
+  type SelectComponent,
+  QuestionCircleIcon,
+} from '@finos/legend-art';
+import {
+  type PackageableConnection,
+  generateFunctionPrettyName,
+  RelationalDatabaseConnection,
+  DatabaseType,
+  SnowflakeAppType,
+} from '@finos/legend-graph';
+import { observer } from 'mobx-react-lite';
+import { useApplicationStore } from '@finos/legend-application';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import { SnowflakeAppFunctionActivatorEdtiorState } from '../../../../stores/editor/editor-state/element-editor-state/function-activator/SnowflakeAppFunctionActivatorEditorState.js';
+import { flowResult } from 'mobx';
+import { useRef } from 'react';
+import {
+  buildRelationalDatabaseConnectionOption,
+  type RelationalDatabaseConnectionOption,
+} from '../connection-editor/RelationalDatabaseConnectionEditor.js';
+
+interface SnowflakeAppTypeOption {
+  label: string;
+  value: SnowflakeAppType;
+}
+
+export const SnowflakeAppFunctionActivatorEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const applicationStore = useApplicationStore();
+  const editorState = editorStore.tabManagerState.getCurrentEditorState(
+    SnowflakeAppFunctionActivatorEdtiorState,
+  );
+  const activator = editorState.activator;
+  const snowflakeAppTypeOptions: SnowflakeAppTypeOption[] = Object.values(
+    SnowflakeAppType,
+  ).map((snowflakeAppType) => ({
+    label: snowflakeAppType.valueOf(),
+    value: snowflakeAppType,
+  }));
+  const changeSnowflakeAppType = (val: SnowflakeAppTypeOption): void => {
+    if (val.value === activator.type) {
+      return;
+    }
+    editorState.updateAppType(val.value);
+  };
+  const connectionSelectorRef = useRef<SelectComponent>(null);
+  const connectionFilterOption = createFilter({
+    ignoreCase: true,
+    ignoreAccents: false,
+    stringify: (option: RelationalDatabaseConnectionOption): string =>
+      option.value.path,
+  });
+  const connectionOptions = editorStore.graphManagerState.usableConnections
+    .filter(
+      (connection) =>
+        connection.connectionValue instanceof RelationalDatabaseConnection &&
+        connection.connectionValue.type === DatabaseType.Snowflake,
+    )
+    .map(buildRelationalDatabaseConnectionOption);
+
+  const initializeActivationConnection = (
+    val: PackageableConnection | undefined,
+  ): PackageableConnection | undefined => {
+    if (val) {
+      editorState.updateConnection(val);
+    }
+    return !val
+      ? undefined
+      : activator.activationConfiguration.activationConnection
+          ?.packageableConnection.value;
+  };
+
+  const activationConnection = activator.activationConfiguration
+    .activationConnection
+    ? activator.activationConfiguration.activationConnection
+        .packageableConnection.value
+    : initializeActivationConnection(connectionOptions.at(0)?.value);
+
+  const changeConnection = (val: RelationalDatabaseConnectionOption): void => {
+    if (val.value === activationConnection) {
+      return;
+    }
+    editorState.updateConnection(val.value);
+  };
+  const changeDescription: React.ChangeEventHandler<HTMLTextAreaElement> = (
+    event,
+  ) => {
+    editorState.updateAppDescription(event.target.value);
+  };
+  const visitFunction = (): void =>
+    editorState.editorStore.graphEditorMode.openElement(
+      activator.function.value,
+    );
+  const visitConnection = (): void => {
+    if (activationConnection) {
+      editorState.editorStore.graphEditorMode.openElement(activationConnection);
+    }
+  };
+  const validate = (): void => {
+    flowResult(editorState.validate()).catch(
+      applicationStore.alertUnhandledError,
+    );
+  };
+  const deploy = (): void => {
+    flowResult(editorState.deploy()).catch(
+      applicationStore.alertUnhandledError,
+    );
+  };
+
+  return (
+    <div className="snowflake-app-function-activator-editor">
+      <Panel>
+        <PanelHeader title="Snowflake Application" />
+        <PanelLoadingIndicator
+          isLoading={Boolean(
+            editorState.validateState.isInProgress ||
+              editorState.deployState.isInProgress,
+          )}
+        />
+        <PanelContent>
+          <div className="snowflake-app-function-activator-editor__header">
+            <div className="snowflake-app-function-activator-editor__header__label">
+              Snowflake Activator Metadata
+            </div>
+            <div className="snowflake-app-function-activator-editor__header__actions">
+              <button
+                className="snowflake-app-function-activator-editor__header__actions__action"
+                onClick={validate}
+                disabled={editorState.validateState.isInProgress}
+                tabIndex={-1}
+                title="Click Validate to verify your activator before deployment"
+              >
+                Validate
+                <QuestionCircleIcon
+                  title="Click Validate to verify your activator before deployment"
+                  className={
+                    'snowflake-app-function-activator-editor__header__actions__action__icon'
+                  }
+                />
+              </button>
+              <button
+                className="snowflake-app-function-activator-editor__header__actions__action snowflake-app-function-activator-editor__header__actions__action--primary"
+                onClick={deploy}
+                disabled={editorState.deployState.isInProgress}
+                title="Publish to sandbox"
+                tabIndex={-1}
+              >
+                Deploy
+              </button>
+            </div>
+          </div>
+          <PanelForm>
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                Function
+              </div>
+            </div>
+            <div className="snowflake-app-function-activator-editor__configuration__items">
+              <div className="snowflake-app-function-activator-editor__configuration__item">
+                <div className="btn--sm snowflake-app-function-activator-editor__configuration__item__label">
+                  <PURE_FunctionIcon />
+                </div>
+                <input
+                  className="panel__content__form__section__input"
+                  spellCheck={false}
+                  disabled={true}
+                  value={generateFunctionPrettyName(activator.function.value, {
+                    fullPath: true,
+                    spacing: false,
+                  })}
+                />
+                <button
+                  className="btn--dark btn--sm snowflake-app-function-activator-editor__configuration__item__btn"
+                  onClick={visitFunction}
+                  tabIndex={-1}
+                  title="See Function"
+                >
+                  <LongArrowRightIcon />
+                </button>
+              </div>
+            </div>
+          </PanelForm>
+          <PanelForm>
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                Connection
+              </div>
+            </div>
+            <div className="snowflake-app-function-activator-editor__configuration__items">
+              <div className="snowflake-app-function-activator-editor__configuration__item">
+                <div className="btn--sm snowflake-app-function-activator-editor__configuration__item__label">
+                  <PURE_ConnectionIcon />
+                </div>
+                <CustomSelectorInput
+                  ref={connectionSelectorRef}
+                  className="snowflake-app-function-activator-editor__config__connection-selector__input"
+                  options={connectionOptions}
+                  onChange={changeConnection}
+                  value={
+                    activationConnection
+                      ? buildRelationalDatabaseConnectionOption(
+                          activationConnection,
+                        )
+                      : undefined
+                  }
+                  darkMode={true}
+                  placeholder="Choose a connection"
+                  filterOption={connectionFilterOption}
+                />
+                <button
+                  className="btn--dark btn--sm snowflake-app-function-activator-editor__configuration__item__btn"
+                  onClick={visitConnection}
+                  disabled={!activationConnection}
+                  tabIndex={-1}
+                  title="See Connection"
+                >
+                  <LongArrowRightIcon />
+                </button>
+              </div>
+            </div>
+          </PanelForm>
+          <PanelForm>
+            <PanelFormTextField
+              value={activator.applicationName}
+              name="Activator Identifer"
+              placeholder="Specify the name of the UDTF for this activator..."
+              update={(value: string | undefined): void =>
+                editorState.updateApplicationName(value ?? '')
+              }
+            />
+          </PanelForm>
+          <PanelForm>
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                Description
+              </div>
+              <div className="panel__content__form__section__header__prompt">{`Provide a brief description of Snowflake App`}</div>
+              <textarea
+                className="panel__content__form__section__textarea service-editor__documentation__input"
+                spellCheck={false}
+                value={activator.description}
+                onChange={changeDescription}
+              />
+            </div>
+          </PanelForm>
+          <PanelForm>
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                Activator Type
+              </div>
+            </div>
+            <div className="snowflake-app-function-activator-editor__configuration__items">
+              <div className="snowflake-app-function-activator-editor__configuration__item">
+                <CustomSelectorInput
+                  className="snowflake-app-function-activator-editor__config__connection-selector__input"
+                  options={snowflakeAppTypeOptions}
+                  onChange={changeSnowflakeAppType}
+                  value={
+                    activator.type
+                      ? {
+                          value: activator.type,
+                          label: activator.type.valueOf(),
+                        }
+                      : undefined
+                  }
+                  darkMode={true}
+                  placeholder="Choose a type"
+                />
+              </div>
+            </div>
+          </PanelForm>
+        </PanelContent>
+      </Panel>
+    </div>
+  );
+});

package/src/components/editor/editor-group/service-editor/ServiceEditor.tsx

@@ -337,7 +337,7 @@ const ServiceGeneralEditor = observer(() => {
           <div className="panel__content__form__section__header__label">
             Documentation
           </div>
-          <div className="panel__content__form__section__header__prompt">{`Provides a brief description of the service's functionalities and usage`}</div>
+          <div className="panel__content__form__section__header__prompt">{`Provide a brief description of the service's functionalities and usage`}</div>
           <textarea
             className="panel__content__form__section__textarea service-editor__documentation__input"
             spellCheck={false}

package/src/components/editor/editor-group/service-editor/ServiceExecutionEditor.tsx

@@ -366,14 +366,13 @@ export const ChangeExecutionModal = observer(
           />
         );
       } else if (executionState instanceof MultiServicePureExecutionState) {
-        const multiExec = executionState.execution;
         const currentOption = executionState.singleExecutionKey
           ? {
               value: executionState.singleExecutionKey,
               label: executionState.singleExecutionKey.key,
             }
           : undefined;
-        const multiOptions = multiExec.executionParameters.map(
+        const multiOptions = executionState.keyedExecutionParameters.map(
           (keyExecutionParameter) => ({
             value: keyExecutionParameter,
             label: keyExecutionParameter.key,
@@ -554,7 +553,7 @@ export const NewExecutionParameterModal = observer(
     const validationMessage =
       keyValue === ''
         ? `Execution context key can't be empty`
-        : executionState.execution.executionParameters.find(
+        : executionState.execution.executionParameters?.find(
             (e) => e.key === keyValue,
           )
         ? 'Execution context key already exists'
@@ -702,15 +701,19 @@ const MultiPureExecutionEditor = observer(
                 </PanelHeaderActions>
               </PanelHeader>
 
-              {multiExecution.executionParameters.map((executionParameter) => (
-                <KeyExecutionItem
-                  key={executionParameter.key}
-                  multiExecutionState={multiExecutionState}
-                  keyExecutionParameter={executionParameter}
-                  isReadOnly={multiExecutionState.serviceEditorState.isReadOnly}
-                />
-              ))}
-              {!multiExecution.executionParameters.length && (
+              {multiExecutionState.keyedExecutionParameters.map(
+                (executionParameter) => (
+                  <KeyExecutionItem
+                    key={executionParameter.key}
+                    multiExecutionState={multiExecutionState}
+                    keyExecutionParameter={executionParameter}
+                    isReadOnly={
+                      multiExecutionState.serviceEditorState.isReadOnly
+                    }
+                  />
+                ),
+              )}
+              {!multiExecutionState.keyedExecutionParameters.length && (
                 <BlankPanelPlaceholder
                   text="Add an execution context"
                   onClick={addExecutionKey}
@@ -780,7 +783,7 @@ const ServicePureExecutionEditor = observer(
     const showChangeExecutionModal = (): void => {
       if (servicePureExecutionState instanceof MultiServicePureExecutionState) {
         servicePureExecutionState.setSingleExecutionKey(
-          servicePureExecutionState.execution.executionParameters[0],
+          servicePureExecutionState.keyedExecutionParameters[0],
         );
       }
       servicePureExecutionState.setShowChangeExecModal(true);
@@ -905,7 +908,7 @@ export const ServiceExecutionEditor = observer(() => {
   }
   return (
     <UnsupportedEditorPanel
-      text="Can't display thie service execution in form-mode"
+      text="Can't display this service execution in form-mode"
       isReadOnly={serviceState.isReadOnly}
     />
   );

package/src/components/editor/panel-group/SQLPlaygroundPanel.tsx

@@ -54,7 +54,6 @@ import {
 import {
   PackageableConnection,
   RelationalDatabaseConnection,
-  guaranteeRelationalDatabaseConnection,
 } from '@finos/legend-graph';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../__lib__/LegendStudioApplicationNavigationContext.js';
 import { type SQLPlaygroundPanelState } from '../../../stores/editor/panel-group/SQLPlaygroundPanelState.js';
@@ -81,6 +80,10 @@ import {
   type DatabaseSchemaExplorerTreeNodeContainerProps,
 } from '../editor-group/connection-editor/DatabaseSchemaExplorer.js';
 import { DatabaseSchemaExplorerTreeTableNodeData } from '../../../stores/editor/editor-state/element-editor-state/connection/DatabaseBuilderState.js';
+import {
+  buildRelationalDatabaseConnectionOption,
+  type RelationalDatabaseConnectionOption,
+} from '../editor-group/connection-editor/RelationalDatabaseConnectionEditor.js';
 
 const DATABASE_NODE_DND_TYPE = 'DATABASE_NODE_DND_TYPE';
 type DatabaseNodeDragType = { text: string };
@@ -108,32 +111,6 @@ const SQLPlaygroundDatabaseSchemaExplorerTreeNodeContainer = observer(
   },
 );
 
-type RelationalDatabaseConnectionOption = {
-  label: React.ReactNode;
-  value: PackageableConnection;
-};
-const buildRelationalDatabaseConnectionOption = (
-  connection: PackageableConnection,
-): RelationalDatabaseConnectionOption => {
-  const connectionValue = guaranteeRelationalDatabaseConnection(connection);
-  return {
-    value: connection,
-    label: (
-      <div className="sql-playground__config__connection-selector__option">
-        <div className="sql-playground__config__connection-selector__option__label">
-          {connection.name}
-        </div>
-        <div className="sql-playground__config__connection-selector__option__type">
-          {connectionValue.type}
-        </div>
-        <div className="sql-playground__config__connection-selector__option__path">
-          {connection.path}
-        </div>
-      </div>
-    ),
-  };
-};
-
 // List of most popular SQL keywords
 // See https://www.w3schools.com/sql/sql_ref_keywords.asp
 const SQL_KEYWORDS = [

package/src/components/editor/side-bar/Explorer.tsx

@@ -90,6 +90,8 @@ import {
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import {
+  type PackageableElement,
+  type FunctionActivatorConfiguration,
   ELEMENT_PATH_DELIMITER,
   ROOT_PACKAGE_NAME,
   Package,
@@ -105,15 +107,13 @@ import {
   getFunctionSignature,
   getFunctionNameWithPath,
   getElementRootPackage,
-  type PackageableElement,
   PackageableConnection,
-  RelationalDatabaseConnection,
   guaranteeRelationalDatabaseConnection,
   extractDependencyGACoordinateFromRootPackageName,
-  type FunctionActivatorConfiguration,
   Database,
   DEPENDENCY_ROOT_PACKAGE_PREFIX,
   Service,
+  isRelationalDatabaseConnection,
 } from '@finos/legend-graph';
 import {
   ActionAlertActionType,
@@ -459,12 +459,6 @@ const SampleDataGenerator = observer(() => {
   );
 });
 
-const isRelationalDatabaseConnection = (
-  val: PackageableElement | undefined,
-): boolean =>
-  val instanceof PackageableConnection &&
-  val.connectionValue instanceof RelationalDatabaseConnection;
-
 const isRelationalDatabase = (
   val: PackageableElement | undefined,
 ): Database | undefined => (val instanceof Database ? val : undefined);

package/src/index.ts

@@ -113,3 +113,6 @@ export {
   EmbeddedDataState,
 } from './stores/editor/editor-state/element-editor-state/data/EmbeddedDataState.js';
 export type { EmbeddedDataTypeOption } from './stores/editor/editor-state/element-editor-state/data/DataEditorState.js';
+
+export { SnowflakeAppFunctionActivatorEdtiorState } from './stores/editor/editor-state/element-editor-state/function-activator/SnowflakeAppFunctionActivatorEditorState.js';
+export { SnowflakeAppFunctionActivatorEditor } from './components/editor/editor-group/function-activator/SnowflakeAppFunctionActivatorEditor.js';

package/src/stores/editor/EditorGraphState.ts

@@ -57,8 +57,13 @@ import {
   buildDependencyReport,
 } from '@finos/legend-server-depot';
 import {
-  GRAPH_MANAGER_EVENT,
   type EngineError,
+  type PackageableElement,
+  type CompilationWarning,
+  type PureModel,
+  type FunctionActivatorConfiguration,
+  type RelationalDatabaseTypeConfiguration,
+  GRAPH_MANAGER_EVENT,
   Package,
   Profile,
   PrimitiveType,
@@ -80,13 +85,9 @@ import {
   DependencyGraphBuilderError,
   GraphDataDeserializationError,
   DataElement,
-  type PackageableElement,
-  type CompilationWarning,
-  type PureModel,
   createGraphBuilderReport,
   ExecutionEnvironmentInstance,
-  type FunctionActivatorConfiguration,
-  type RelationalDatabaseTypeConfiguration,
+  SnowflakeApp,
 } from '@finos/legend-graph';
 import { CONFIGURATION_EDITOR_TAB } from './editor-state/project-configuration-editor-state/ProjectConfigurationEditorState.js';
 import { PACKAGEABLE_ELEMENT_TYPE } from './utils/ModelClassifierUtils.js';
@@ -832,6 +833,8 @@ export class EditorGraphState {
       return PACKAGEABLE_ELEMENT_TYPE.DATA;
     } else if (element instanceof ExecutionEnvironmentInstance) {
       return PACKAGEABLE_ELEMENT_TYPE.EXECUTION_ENVIRONMENT;
+    } else if (element instanceof SnowflakeApp) {
+      return PACKAGEABLE_ELEMENT_TYPE.SNOWFLAKE_APP;
     }
     const extraElementTypeLabelGetters = this.editorStore.pluginManager
       .getApplicationPlugins()

package/src/stores/editor/EditorTabManagerState.ts

@@ -15,6 +15,7 @@
  */
 
 import {
+  type PackageableElement,
   Association,
   Class,
   ConcreteFunctionDefinition,
@@ -31,8 +32,8 @@ import {
   PrimitiveType,
   Profile,
   Service,
-  type PackageableElement,
   INTERNAL__UnknownFunctionActivator,
+  SnowflakeApp,
 } from '@finos/legend-graph';
 import {
   type Clazz,
@@ -58,7 +59,8 @@ import { UnsupportedElementEditorState } from './editor-state/UnsupportedElement
 import type { EditorStore } from './EditorStore.js';
 import type { DSL_LegendStudioApplicationPlugin_Extension } from '../LegendStudioApplicationPlugin.js';
 import { TabManagerState } from '@finos/legend-lego/application';
-import { INTERNAL__UnknownFunctionActivatorEdtiorState } from './editor-state/element-editor-state/INTERNAL__UnknownFunctionActivatorEditorState.js';
+import { INTERNAL__UnknownFunctionActivatorEdtiorState } from './editor-state/element-editor-state/function-activator/INTERNAL__UnknownFunctionActivatorEditorState.js';
+import { SnowflakeAppFunctionActivatorEdtiorState } from './editor-state/element-editor-state/function-activator/SnowflakeAppFunctionActivatorEditorState.js';
 
 export class EditorTabManagerState extends TabManagerState {
   readonly editorStore: EditorStore;
@@ -126,6 +128,11 @@ export class EditorTabManagerState extends TabManagerState {
       return new FileGenerationEditorState(this.editorStore, element);
     } else if (element instanceof DataElement) {
       return new PackageableDataEditorState(this.editorStore, element);
+    } else if (element instanceof SnowflakeApp) {
+      return new SnowflakeAppFunctionActivatorEdtiorState(
+        this.editorStore,
+        element,
+      );
     } else if (element instanceof INTERNAL__UnknownFunctionActivator) {
       return new INTERNAL__UnknownFunctionActivatorEdtiorState(
         this.editorStore,