@finos/legend-application-studio 28.19.20 → 28.19.21

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

@@ -39,6 +39,7 @@ import {
   TimesIcon,
   clsx,
   PanelHeader,
+  CaretDownIcon,
 } from '@finos/legend-art';
 import {
   type PostDeploymentAction,
@@ -95,6 +96,7 @@ import {
 import type { DSL_Service_LegendStudioApplicationPlugin_Extension } from '../../../../stores/extensions/DSL_Service_LegendStudioApplicationPlugin_Extension.js';
 import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
 import type { LegendStudioApplicationPlugin } from '../../../../stores/LegendStudioApplicationPlugin.js';
+import { ActivatorArtifactViewer } from './ActivatorArtifactViewer.js';
 
 const renderEditorPostAction = (
   postDeploymentAction: PostDeploymentAction,
@@ -417,6 +419,11 @@ export const HostedServiceFunctionActivatorEditor = observer(() => {
       applicationStore.alertUnhandledError,
     );
   };
+  const renderArtifact = (): void => {
+    flowResult(editorState.renderArtifact()).catch(
+      applicationStore.alertUnhandledError,
+    );
+  };
   const deploy = (): void => {
     flowResult(editorState.deployToSandbox()).catch(
       applicationStore.alertUnhandledError,
@@ -477,6 +484,7 @@ export const HostedServiceFunctionActivatorEditor = observer(() => {
         <PanelLoadingIndicator
           isLoading={Boolean(
             editorState.validateState.isInProgress ||
+              editorState.renderArtifactState.isInProgress ||
               editorState.deployState.isInProgress,
           )}
         />
@@ -514,24 +522,55 @@ export const HostedServiceFunctionActivatorEditor = observer(() => {
                   Rest Service Activator
                 </div>
                 <div className="hosted-service-function-activator-editor__header__actions">
-                  <button
-                    className="hosted-service-function-activator-editor__header__actions__action hosted-service-function-activator-editor__header__actions__action--primary"
-                    onClick={validate}
-                    disabled={editorState.validateState.isInProgress}
-                    tabIndex={-1}
-                    title="Click Validate to verify your activator before deployment"
-                  >
-                    Validate
-                  </button>
-                  <button
-                    className="hosted-service-function-activator-editor__header__actions__action hosted-service-function-activator-editor__header__actions__action--primary"
-                    onClick={deploy}
-                    disabled={editorState.deployState.isInProgress}
-                    title="Deploy to sandbox"
-                    tabIndex={-1}
-                  >
-                    Deploy to Sandbox
-                  </button>
+                  <div className="hosted-service-function-activator-editor__header__actions btn__dropdown-combo--primary">
+                    <button
+                      className="hosted-service-function-activator-editor__header__actions__action hosted-service-function-activator-editor__header__actions__action--primary"
+                      onClick={validate}
+                      disabled={editorState.validateState.isInProgress}
+                      tabIndex={-1}
+                      title="Click Validate to verify your activator before deployment"
+                    >
+                      Validate
+                    </button>
+                    <ControlledDropdownMenu
+                      className="hosted-service-function-activator-editor__header__actions btn__dropdown-combo btn__dropdown-combo__dropdown-btn"
+                      title="activator-artifact-dropdown"
+                      content={
+                        <MenuContent>
+                          <MenuContentItem
+                            className="btn__dropdown-combo__option"
+                            onClick={renderArtifact}
+                            title="Render artifact"
+                          >
+                            Render Artifact
+                          </MenuContentItem>
+                        </MenuContent>
+                      }
+                      menuProps={{
+                        anchorOrigin: {
+                          vertical: 'bottom',
+                          horizontal: 'right',
+                        },
+                        transformOrigin: {
+                          vertical: 'top',
+                          horizontal: 'right',
+                        },
+                      }}
+                    >
+                      <CaretDownIcon />
+                    </ControlledDropdownMenu>
+                  </div>
+                  <div className="hosted-service-function-activator-editor__header__actions btn__dropdown-combo--primary">
+                    <button
+                      className="hosted-service-function-activator-editor__header__actions__action hosted-service-function-activator-editor__header__actions__action--primary"
+                      onClick={deploy}
+                      disabled={editorState.deployState.isInProgress}
+                      title="Deploy to sandbox"
+                      tabIndex={-1}
+                    >
+                      Deploy to Sandbox
+                    </button>
+                  </div>
                 </div>
               </div>
               <PanelForm>
@@ -725,6 +764,14 @@ export const HostedServiceFunctionActivatorEditor = observer(() => {
               />
             </div>
           )}
+          <ActivatorArtifactViewer
+            artifact={editorState.artifact}
+            setArtifact={(value) => editorState.setArtifact(value)}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
+          />
         </PanelContent>
       </Panel>
     </div>

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

@@ -23,6 +23,11 @@ import {
   Panel,
   PanelContent,
   PanelHeader,
+  ControlledDropdownMenu,
+  MenuContent,
+  MenuContentItem,
+  CaretDownIcon,
+  PanelLoadingIndicator,
 } from '@finos/legend-art';
 import { useApplicationStore } from '@finos/legend-application';
 import { flowResult } from 'mobx';
@@ -33,6 +38,7 @@ import {
   getClassProperty,
 } from '@finos/legend-graph';
 import { returnUndefOnError } from '@finos/legend-shared';
+import { ActivatorArtifactViewer } from './ActivatorArtifactViewer.js';
 
 export const INTERNAL__UnknownFunctionActivatorEdtior = observer(() => {
   const editorStore = useEditorStore();
@@ -45,6 +51,11 @@ export const INTERNAL__UnknownFunctionActivatorEdtior = observer(() => {
       applicationStore.alertUnhandledError,
     );
   };
+  const renderArtifact = (): void => {
+    flowResult(editorState.renderArtifact()).catch(
+      applicationStore.alertUnhandledError,
+    );
+  };
   const publishToSandbox = (): void => {
     flowResult(editorState.publishToSandbox()).catch(
       applicationStore.alertUnhandledError,
@@ -66,6 +77,13 @@ export const INTERNAL__UnknownFunctionActivatorEdtior = observer(() => {
     <div className="function-activator-editor">
       <Panel>
         <PanelHeader title="function activator" />
+        <PanelLoadingIndicator
+          isLoading={Boolean(
+            editorState.validateState.isInProgress ||
+              editorState.renderArtifactState.isInProgress ||
+              editorState.publishToSandboxState.isInProgress,
+          )}
+        />
         <PanelContent>
           <div className="function-activator-editor__content">
             {valueBuilderState && (
@@ -118,23 +136,61 @@ export const INTERNAL__UnknownFunctionActivatorEdtior = observer(() => {
             )}
           </div>
           <div className="function-activator-editor__footer">
-            <button
-              className="function-activator-editor__footer__action btn--dark"
-              onClick={validate}
-              disabled={editorState.validateState.isInProgress}
-              tabIndex={-1}
-            >
-              Validate
-            </button>
-            <button
-              className="function-activator-editor__footer__action btn--dark"
-              onClick={publishToSandbox}
-              disabled={editorState.publishToSandboxState.isInProgress}
-              tabIndex={-1}
-            >
-              Publish to Sandbox
-            </button>
+            <div className="function-activator-editor__footer__actions btn__dropdown-combo--primary">
+              <button
+                className="function-activator-editor__footer__actions__action btn--dark"
+                onClick={validate}
+                disabled={editorState.validateState.isInProgress}
+                tabIndex={-1}
+              >
+                Validate
+              </button>
+              <ControlledDropdownMenu
+                className="function-activator-editor__footer__actions btn__dropdown-combo btn__dropdown-combo__dropdown-btn"
+                title="activator-artifact-dropdown"
+                content={
+                  <MenuContent>
+                    <MenuContentItem
+                      className="btn__dropdown-combo__option"
+                      onClick={renderArtifact}
+                    >
+                      Render Artifact
+                    </MenuContentItem>
+                  </MenuContent>
+                }
+                menuProps={{
+                  anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                  },
+                  transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right',
+                  },
+                }}
+              >
+                <CaretDownIcon />
+              </ControlledDropdownMenu>
+            </div>
+            <div className="function-activator-editor__footer__actions btn__dropdown-combo--primary">
+              <button
+                className="function-activator-editor__footer__actions__action btn--dark"
+                onClick={publishToSandbox}
+                disabled={editorState.publishToSandboxState.isInProgress}
+                tabIndex={-1}
+              >
+                Publish to Sandbox
+              </button>
+            </div>
           </div>
+          <ActivatorArtifactViewer
+            artifact={editorState.artifact}
+            setArtifact={(value) => editorState.setArtifact(value)}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
+          />
         </PanelContent>
       </Panel>
     </div>

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

@@ -27,6 +27,10 @@ import {
   PURE_ConnectionIcon,
   CustomSelectorInput,
   createFilter,
+  ControlledDropdownMenu,
+  MenuContent,
+  MenuContentItem,
+  CaretDownIcon,
 } from '@finos/legend-art';
 import {
   type PackageableConnection,
@@ -45,6 +49,7 @@ import {
   buildRelationalDatabaseConnectionOption,
 } from '../connection-editor/RelationalDatabaseConnectionEditor.js';
 import { ActivatorOwnershipForm } from './ActivatorFormComponents.js';
+import { ActivatorArtifactViewer } from './ActivatorArtifactViewer.js';
 
 export const MemSQLFunctionActivatorEditor = observer(() => {
   const editorStore = useEditorStore();
@@ -115,6 +120,11 @@ export const MemSQLFunctionActivatorEditor = observer(() => {
       applicationStore.alertUnhandledError,
     );
   };
+  const renderArtifact = (): void => {
+    flowResult(editorState.renderArtifact()).catch(
+      applicationStore.alertUnhandledError,
+    );
+  };
   const deploy = (): void => {
     flowResult(editorState.deployToSandbox()).catch(
       applicationStore.alertUnhandledError,
@@ -128,6 +138,7 @@ export const MemSQLFunctionActivatorEditor = observer(() => {
         <PanelLoadingIndicator
           isLoading={Boolean(
             editorState.validateState.isInProgress ||
+              editorState.renderArtifactState.isInProgress ||
               editorState.deployState.isInProgress,
           )}
         />
@@ -137,24 +148,54 @@ export const MemSQLFunctionActivatorEditor = observer(() => {
               Mem SQL Function
             </div>
             <div className="mem-sql-function-activator-editor__header__actions">
-              <button
-                className="mem-sql-function-activator-editor__header__actions__action mem-sql-function-activator-editor__header__actions__action--primary"
-                onClick={validate}
-                disabled={editorState.validateState.isInProgress}
-                tabIndex={-1}
-                title="Click Validate to verify your activator before deployment"
-              >
-                Validate
-              </button>
-              <button
-                className="mem-sql-function-activator-editor__header__actions__action mem-sql-function-activator-editor__header__actions__action--primary"
-                onClick={deploy}
-                disabled={editorState.deployState.isInProgress}
-                title="Deploy to sandbox"
-                tabIndex={-1}
-              >
-                Deploy to Sandbox
-              </button>
+              <div className="mem-sql-function-activator-editor__header__actions btn__dropdown-combo--primary">
+                <button
+                  className="mem-sql-function-activator-editor__header__actions__action mem-sql-function-activator-editor__header__actions__action--primary"
+                  onClick={validate}
+                  disabled={editorState.validateState.isInProgress}
+                  tabIndex={-1}
+                  title="Click Validate to verify your activator before deployment"
+                >
+                  Validate
+                </button>
+                <ControlledDropdownMenu
+                  className="mem-sql-function-activator-editor__header__actions btn__dropdown-combo btn__dropdown-combo__dropdown-btn"
+                  title="activator-artifact-dropdown"
+                  content={
+                    <MenuContent>
+                      <MenuContentItem
+                        className="btn__dropdown-combo__option"
+                        onClick={renderArtifact}
+                      >
+                        Render Artifact
+                      </MenuContentItem>
+                    </MenuContent>
+                  }
+                  menuProps={{
+                    anchorOrigin: {
+                      vertical: 'bottom',
+                      horizontal: 'right',
+                    },
+                    transformOrigin: {
+                      vertical: 'top',
+                      horizontal: 'right',
+                    },
+                  }}
+                >
+                  <CaretDownIcon />
+                </ControlledDropdownMenu>
+              </div>
+              <div className="mem-sql-function-activator-editor__header__actions btn__dropdown-combo--primary">
+                <button
+                  className="mem-sql-function-activator-editor__header__actions__action mem-sql-function-activator-editor__header__actions__action--primary"
+                  onClick={deploy}
+                  disabled={editorState.deployState.isInProgress}
+                  title="Deploy to sandbox"
+                  tabIndex={-1}
+                >
+                  Deploy to Sandbox
+                </button>
+              </div>
             </div>
           </div>
           <PanelForm>
@@ -262,6 +303,14 @@ export const MemSQLFunctionActivatorEditor = observer(() => {
               isReadOnly={isReadOnly}
             />
           </PanelForm>
+          <ActivatorArtifactViewer
+            artifact={editorState.artifact}
+            setArtifact={(value) => editorState.setArtifact(value)}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
+          />
         </PanelContent>
       </Panel>
     </div>

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

@@ -28,6 +28,10 @@ import {
   CustomSelectorInput,
   createFilter,
   DataAccessIcon,
+  ControlledDropdownMenu,
+  MenuContent,
+  MenuContentItem,
+  CaretDownIcon,
 } from '@finos/legend-art';
 import {
   type PackageableConnection,
@@ -47,6 +51,7 @@ import {
   buildRelationalDatabaseConnectionOption,
 } from '../connection-editor/RelationalDatabaseConnectionEditor.js';
 import { ActivatorOwnershipForm } from './ActivatorFormComponents.js';
+import { ActivatorArtifactViewer } from './ActivatorArtifactViewer.js';
 
 export const SnowflakeAppFunctionActivatorEditor = observer(() => {
   const editorStore = useEditorStore();
@@ -133,6 +138,11 @@ export const SnowflakeAppFunctionActivatorEditor = observer(() => {
       applicationStore.alertUnhandledError,
     );
   };
+  const renderArtifact = (): void => {
+    flowResult(editorState.renderArtifact()).catch(
+      applicationStore.alertUnhandledError,
+    );
+  };
   const deploy = (): void => {
     flowResult(editorState.deployToSandbox()).catch(
       applicationStore.alertUnhandledError,
@@ -146,6 +156,7 @@ export const SnowflakeAppFunctionActivatorEditor = observer(() => {
         <PanelLoadingIndicator
           isLoading={Boolean(
             editorState.validateState.isInProgress ||
+              editorState.renderArtifactState.isInProgress ||
               editorState.deployState.isInProgress,
           )}
         />
@@ -155,24 +166,55 @@ export const SnowflakeAppFunctionActivatorEditor = observer(() => {
               Snowflake Activator Metadata
             </div>
             <div className="snowflake-app-function-activator-editor__header__actions">
-              <button
-                className="snowflake-app-function-activator-editor__header__actions__action snowflake-app-function-activator-editor__header__actions__action--primary"
-                onClick={validate}
-                disabled={editorState.validateState.isInProgress}
-                tabIndex={-1}
-                title="Click Validate to verify your activator before deployment"
-              >
-                Validate
-              </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="Deploy to sandbox"
-                tabIndex={-1}
-              >
-                Deploy to Sandbox
-              </button>
+              <div className="snowflake-app-function-activator-editor__header__actions btn__dropdown-combo--primary">
+                <button
+                  className="snowflake-app-function-activator-editor__header__actions__action snowflake-app-function-activator-editor__header__actions__action--primary"
+                  onClick={validate}
+                  disabled={editorState.validateState.isInProgress}
+                  tabIndex={-1}
+                  title="Click Validate to verify your activator before deployment"
+                >
+                  Validate
+                </button>
+                <ControlledDropdownMenu
+                  className="snowflake-app-function-activator-editor__header__actions btn__dropdown-combo btn__dropdown-combo__dropdown-btn"
+                  title="activator-artifact-dropdown"
+                  content={
+                    <MenuContent>
+                      <MenuContentItem
+                        className="btn__dropdown-combo__option"
+                        onClick={renderArtifact}
+                        title="Render artifact"
+                      >
+                        Render Artifact
+                      </MenuContentItem>
+                    </MenuContent>
+                  }
+                  menuProps={{
+                    anchorOrigin: {
+                      vertical: 'bottom',
+                      horizontal: 'right',
+                    },
+                    transformOrigin: {
+                      vertical: 'top',
+                      horizontal: 'right',
+                    },
+                  }}
+                >
+                  <CaretDownIcon />
+                </ControlledDropdownMenu>
+              </div>
+              <div className="snowflake-app-function-activator-editor__header__actions btn__dropdown-combo--primary">
+                <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="Deploy to sandbox"
+                  tabIndex={-1}
+                >
+                  Deploy to Sandbox
+                </button>
+              </div>
             </div>
           </div>
           <PanelForm>
@@ -334,6 +376,14 @@ export const SnowflakeAppFunctionActivatorEditor = observer(() => {
               isReadOnly={isReadOnly}
             />
           </PanelForm>
+          <ActivatorArtifactViewer
+            artifact={editorState.artifact}
+            setArtifact={(value) => editorState.setArtifact(value)}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
+          />
         </PanelContent>
       </Panel>
     </div>

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

@@ -27,6 +27,10 @@ import {
   PURE_ConnectionIcon,
   CustomSelectorInput,
   createFilter,
+  ControlledDropdownMenu,
+  MenuContent,
+  MenuContentItem,
+  CaretDownIcon,
 } from '@finos/legend-art';
 import {
   type PackageableConnection,
@@ -45,6 +49,7 @@ import {
   buildRelationalDatabaseConnectionOption,
 } from '../connection-editor/RelationalDatabaseConnectionEditor.js';
 import { ActivatorOwnershipForm } from './ActivatorFormComponents.js';
+import { ActivatorArtifactViewer } from './ActivatorArtifactViewer.js';
 
 export const SnowflakeM2MUdfFunctionActivatorEditor = observer(() => {
   const editorStore = useEditorStore();
@@ -115,6 +120,11 @@ export const SnowflakeM2MUdfFunctionActivatorEditor = observer(() => {
       applicationStore.alertUnhandledError,
     );
   };
+  const renderArtifact = (): void => {
+    flowResult(editorState.renderArtifact()).catch(
+      applicationStore.alertUnhandledError,
+    );
+  };
   const deploy = (): void => {
     flowResult(editorState.deployToSandbox()).catch(
       applicationStore.alertUnhandledError,
@@ -128,6 +138,7 @@ export const SnowflakeM2MUdfFunctionActivatorEditor = observer(() => {
         <PanelLoadingIndicator
           isLoading={Boolean(
             editorState.validateState.isInProgress ||
+              editorState.renderArtifactState.isInProgress ||
               editorState.deployState.isInProgress,
           )}
         />
@@ -137,24 +148,54 @@ export const SnowflakeM2MUdfFunctionActivatorEditor = observer(() => {
               SnowflakeM2MUdf Activator Metadata
             </div>
             <div className="snowflake-m2m-udf-function-activator-editor__header__actions">
-              <button
-                className="snowflake-m2m-udf-function-activator-editor__header__actions__action snowflake-m2m-udf-function-activator-editor__header__actions__action--primary"
-                onClick={validate}
-                disabled={editorState.validateState.isInProgress}
-                tabIndex={-1}
-                title="Click Validate to verify your activator before deployment"
-              >
-                Validate
-              </button>
-              <button
-                className="snowflake-m2m-udf-function-activator-editor__header__actions__action snowflake-m2m-udf-function-activator-editor__header__actions__action--primary"
-                onClick={deploy}
-                disabled={editorState.deployState.isInProgress}
-                title="Deploy to sandbox"
-                tabIndex={-1}
-              >
-                Deploy to Sandbox
-              </button>
+              <div className="snowflake-m2m-udf-function-activator-editor__header__actions btn__dropdown-combo--primary">
+                <button
+                  className="snowflake-m2m-udf-function-activator-editor__header__actions__action snowflake-m2m-udf-function-activator-editor__header__actions__action--primary"
+                  onClick={validate}
+                  disabled={editorState.validateState.isInProgress}
+                  tabIndex={-1}
+                  title="Click Validate to verify your activator before deployment"
+                >
+                  Validate
+                </button>
+                <ControlledDropdownMenu
+                  className="snowflake-m2m-udf-function-activator-editor__header__actions btn__dropdown-combo btn__dropdown-combo__dropdown-btn"
+                  title="activator-artifact-dropdown"
+                  content={
+                    <MenuContent>
+                      <MenuContentItem
+                        className="btn__dropdown-combo__option"
+                        onClick={renderArtifact}
+                      >
+                        Render Artifact
+                      </MenuContentItem>
+                    </MenuContent>
+                  }
+                  menuProps={{
+                    anchorOrigin: {
+                      vertical: 'bottom',
+                      horizontal: 'right',
+                    },
+                    transformOrigin: {
+                      vertical: 'top',
+                      horizontal: 'right',
+                    },
+                  }}
+                >
+                  <CaretDownIcon />
+                </ControlledDropdownMenu>
+              </div>
+              <div className="snowflake-m2m-udf-function-activator-editor__header__actions btn__dropdown-combo--primary">
+                <button
+                  className="snowflake-m2m-udf-function-activator-editor__header__actions__action snowflake-m2m-udf-function-activator-editor__header__actions__action--primary"
+                  onClick={deploy}
+                  disabled={editorState.deployState.isInProgress}
+                  title="Deploy to sandbox"
+                  tabIndex={-1}
+                >
+                  Deploy to Sandbox
+                </button>
+              </div>
             </div>
           </div>
           <PanelForm>
@@ -284,6 +325,14 @@ export const SnowflakeM2MUdfFunctionActivatorEditor = observer(() => {
               isReadOnly={isReadOnly}
             />
           </PanelForm>
+          <ActivatorArtifactViewer
+            artifact={editorState.artifact}
+            setArtifact={(value) => editorState.setArtifact(value)}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
+          />
         </PanelContent>
       </Panel>
     </div>