@finos/legend-application-studio 28.21.40 → 28.21.42

package/src/components/editor/editor-group/compute-editor/ComputeEditor.tsx

@@ -0,0 +1,337 @@
+/**
+ * Copyright (c) 2026-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 React from 'react';
+import { observer } from 'mobx-react-lite';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import {
+  type AppDirOwner,
+  type SnowflakeComputeSpecification,
+  AppDirLevel,
+  AppDirNode,
+  observe_AppDirNode,
+} from '@finos/legend-graph';
+import {
+  clsx,
+  CustomSelectorInput,
+  PanelContent,
+  PanelForm,
+  PanelFormBooleanField,
+  PanelFormSection,
+  PanelFormTextField,
+  PanelHeader,
+} from '@finos/legend-art';
+import { useApplicationStore } from '@finos/legend-application';
+import {
+  ComputeEditorState,
+  applyOptionalInt,
+} from '../../../../stores/editor/editor-state/element-editor-state/compute/ComputeEditorState.js';
+import {
+  type ComputeEnumOption,
+  type ComputeFormDescriptor,
+  type ComputeFormField,
+  getVisibleComputeFormSections,
+} from '../../../../stores/editor/editor-state/element-editor-state/compute/ComputeFormDescriptor.js';
+import { SNOWFLAKE_COMPUTE_FORM_DESCRIPTOR } from '../../../../stores/editor/editor-state/element-editor-state/compute/SnowflakeComputeFormDescriptor.js';
+import {
+  appDirNode_setAppDirId,
+  appDirOwner_setProdParallel,
+  appDirOwner_setProduction,
+} from '../../../../stores/graph-modifier/DSL_Compute_GraphModifierHelper.js';
+
+const NumberField = (props: {
+  name: string;
+  value: number | undefined;
+  errorMessage?: string | undefined;
+  isReadOnly: boolean;
+  onChange: (value: string) => void;
+}): React.ReactElement => {
+  const { name, value, errorMessage, isReadOnly, onChange } = props;
+  return (
+    <div className="input-group">
+      <input
+        className={clsx(
+          'input input-group__input panel__content__form__section__input input--dark input--small',
+          { 'input--caution': Boolean(errorMessage) },
+        )}
+        type="number"
+        title={name}
+        disabled={isReadOnly}
+        value={value ?? ''}
+        onChange={(event) => onChange(event.target.value)}
+      />
+      {errorMessage && (
+        <div className="input-group__error-message input--small">
+          {errorMessage}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const OwnerSection = observer((props: { state: ComputeEditorState }) => {
+  const { state } = props;
+  const owner = state.compute.owner;
+  const isReadOnly = state.isReadOnly;
+
+  const buildDeploymentNode = (id: number): AppDirNode => {
+    const node = observe_AppDirNode(new AppDirNode());
+    node.appDirId = id;
+    node.level = AppDirLevel.DEPLOYMENT;
+    return node;
+  };
+
+  const updateNode =
+    (
+      current: AppDirNode | undefined,
+      setNode: (owner: AppDirOwner, node: AppDirNode | undefined) => void,
+    ) =>
+    (raw: string): void => {
+      applyOptionalInt(raw, (id) => {
+        if (id === undefined) {
+          setNode(owner, undefined);
+        } else if (current) {
+          appDirNode_setAppDirId(current, id);
+        } else {
+          setNode(owner, buildDeploymentNode(id));
+        }
+      });
+    };
+
+  return (
+    <>
+      <div className="compute-editor__section-header">
+        <span>Owner</span>
+      </div>
+      <PanelForm>
+        <div className="compute-editor__field-row">
+          <PanelFormSection>
+            <div className="panel__content__form__section__header__label">
+              Production AppDir ID
+            </div>
+            <NumberField
+              name="Production AppDir ID"
+              value={owner.production?.appDirId}
+              errorMessage={
+                owner.production
+                  ? undefined
+                  : 'A production AppDir ID is required'
+              }
+              isReadOnly={isReadOnly}
+              onChange={updateNode(owner.production, appDirOwner_setProduction)}
+            />
+          </PanelFormSection>
+          <PanelFormSection>
+            <div className="panel__content__form__section__header__label">
+              Prod-parallel AppDir ID
+            </div>
+            <NumberField
+              name="Prod-parallel AppDir ID"
+              value={owner.prodParallel?.appDirId}
+              isReadOnly={isReadOnly}
+              onChange={updateNode(
+                owner.prodParallel,
+                appDirOwner_setProdParallel,
+              )}
+            />
+          </PanelFormSection>
+        </div>
+      </PanelForm>
+    </>
+  );
+});
+
+interface ComputeFormFieldProps {
+  field: ComputeFormField;
+  spec: SnowflakeComputeSpecification;
+  isReadOnly: boolean;
+  applyEdit: (mutate: () => void) => void;
+}
+
+const LabelledSection = (props: {
+  label: string;
+  children: React.ReactNode;
+}): React.ReactElement => (
+  <PanelFormSection>
+    <div className="panel__content__form__section__header__label">
+      {props.label}
+    </div>
+    {props.children}
+  </PanelFormSection>
+);
+
+const ComputeFormFieldEditor = observer((props: ComputeFormFieldProps) => {
+  const { field, spec, isReadOnly, applyEdit } = props;
+  const applicationStore = useApplicationStore();
+
+  switch (field.widget) {
+    case 'text': {
+      return (
+        <PanelFormTextField
+          name={field.label}
+          value={field.get(spec)}
+          isReadOnly={isReadOnly}
+          // an emptied field arrives as `undefined`, which is how it is unset
+          update={(value): void => {
+            applyEdit(() => field.set(spec, value));
+          }}
+        />
+      );
+    }
+    case 'number': {
+      return (
+        <LabelledSection label={field.label}>
+          <NumberField
+            name={field.label}
+            value={field.get(spec)}
+            isReadOnly={isReadOnly}
+            onChange={(raw): void => {
+              applyOptionalInt(raw, (next) =>
+                applyEdit(() => field.set(spec, next)),
+              );
+            }}
+          />
+        </LabelledSection>
+      );
+    }
+    case 'boolean': {
+      return (
+        <PanelFormBooleanField
+          prompt={field.label}
+          value={field.get(spec) ?? false}
+          isReadOnly={isReadOnly}
+          update={(value: boolean | undefined): void => {
+            applyEdit(() => field.set(spec, value ?? false));
+          }}
+        />
+      );
+    }
+    case 'enum': {
+      const current = field.get(spec);
+      const selected: ComputeEnumOption | null =
+        field.options.find((option) => option.value === current) ??
+        (current === undefined
+          ? null
+          : { label: String(current), value: current });
+      return (
+        <LabelledSection label={field.label}>
+          <CustomSelectorInput
+            options={field.options}
+            value={selected}
+            onChange={(option: ComputeEnumOption | null): void => {
+              // a field carrying a default must always hold a value
+              if (!option && field.defaultValue !== undefined) {
+                return;
+              }
+              applyEdit(() => field.set(spec, option?.value));
+            }}
+            isClearable={field.defaultValue === undefined}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
+            disabled={isReadOnly}
+          />
+        </LabelledSection>
+      );
+    }
+    default:
+      return null;
+  }
+});
+
+const SnowflakeForm = observer(
+  (props: {
+    descriptor: ComputeFormDescriptor;
+    spec: SnowflakeComputeSpecification;
+    applyEdit: (mutate: () => void) => void;
+    isReadOnly: boolean;
+  }) => {
+    const { descriptor, spec, applyEdit, isReadOnly } = props;
+
+    return (
+      <>
+        <PanelForm>
+          <div className="compute-editor__lead-field">
+            <ComputeFormFieldEditor
+              field={descriptor.leadField}
+              spec={spec}
+              isReadOnly={isReadOnly}
+              applyEdit={applyEdit}
+            />
+          </div>
+        </PanelForm>
+
+        {getVisibleComputeFormSections(descriptor, spec).map((section) => (
+          <React.Fragment key={section.title}>
+            <div className="compute-editor__section-header">
+              <span>{section.title}</span>
+            </div>
+            <PanelForm>
+              {section.fields.map((field) => (
+                <ComputeFormFieldEditor
+                  key={field.key}
+                  field={field}
+                  spec={spec}
+                  isReadOnly={isReadOnly}
+                  applyEdit={applyEdit}
+                />
+              ))}
+            </PanelForm>
+          </React.Fragment>
+        ))}
+      </>
+    );
+  },
+);
+
+export const ComputeEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const applicationStore = useApplicationStore();
+  const state =
+    editorStore.tabManagerState.getCurrentEditorState(ComputeEditorState);
+  const isReadOnly = state.isReadOnly;
+  const spec = state.snowflakeSpecification;
+
+  return (
+    <div className="compute-editor">
+      <PanelHeader
+        title={spec ? SNOWFLAKE_COMPUTE_FORM_DESCRIPTOR.label : 'compute'}
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
+        isReadOnly={isReadOnly}
+      />
+      <PanelContent className="compute-editor__content">
+        <OwnerSection state={state} />
+        {spec ? (
+          <SnowflakeForm
+            descriptor={SNOWFLAKE_COMPUTE_FORM_DESCRIPTOR}
+            spec={spec}
+            applyEdit={state.applyFieldEdit}
+            isReadOnly={isReadOnly}
+          />
+        ) : (
+          <div className="compute-editor__unknown-message">
+            This Compute&apos;s specification type is not supported in form
+            mode. Open it in text mode to edit while preserving the original
+            content.
+          </div>
+        )}
+      </PanelContent>
+    </div>
+  );
+});

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

@@ -97,6 +97,8 @@ export const getElementTypeLabel = (
       return 'local connection';
     case PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT:
       return 'Lakehouse Data Product';
+    case PACKAGEABLE_ELEMENT_TYPE._COMPUTE:
+      return 'Compute';
     default: {
       if (type) {
         const extraElementTypeLabelGetters = editorStore.pluginManager

package/src/index.ts

@@ -68,6 +68,7 @@ export * from './stores/extensions/DSL_DataProduct_LegendStudioApplicationPlugin
 export * from './stores/extensions/DSL_DataSpace_LegendStudioApplicationPlugin_Extension.js';
 export * from './stores/extensions/DSL_Data_LegendStudioApplicationPlugin_Extension.js';
 export { DataProductEditorState } from './stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.js';
+export { ComputeEditorState } from './stores/editor/editor-state/element-editor-state/compute/ComputeEditorState.js';
 export { LEGEND_STUDIO_DOCUMENTATION_KEY } from './__lib__/LegendStudioDocumentation.js';
 export { LegendStudioTelemetryHelper } from './__lib__/LegendStudioTelemetryHelper.js';
 

package/src/stores/editor/EditorStore.ts

@@ -1277,6 +1277,7 @@ export class EditorStore implements CommandRegistrar {
             PACKAGEABLE_ELEMENT_TYPE.MAPPING,
             PACKAGEABLE_ELEMENT_TYPE.SERVICE,
             PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT,
+            PACKAGEABLE_ELEMENT_TYPE._COMPUTE,
             this.applicationStore.config.options
               .TEMPORARY__enableLocalConnectionBuilder
               ? PACKAGEABLE_ELEMENT_TYPE.TEMPORARY__LOCAL_CONNECTION

package/src/stores/editor/EditorTabManagerState.ts

@@ -36,6 +36,7 @@ import {
   SnowflakeApp,
   SnowflakeM2MUdf,
   HostedService,
+  Compute,
   DataProduct,
   IngestDefinition,
   MemSQLFunction,
@@ -75,6 +76,7 @@ import { ArtifactGenerationViewerState } from './editor-state/ArtifactGeneration
 import { DataProductEditorState } from './editor-state/element-editor-state/dataProduct/DataProductEditorState.js';
 import { IngestDefinitionEditorState } from './editor-state/element-editor-state/ingest/IngestDefinitionEditorState.js';
 import { AvailabilityEditorState } from './editor-state/element-editor-state/availability/AvailabilityEditorState.js';
+import { ComputeEditorState } from './editor-state/element-editor-state/compute/ComputeEditorState.js';
 import type { EditorInitialConfiguration } from './editor-state/element-editor-state/ElementEditorInitialConfiguration.js';
 
 export class EditorTabManagerState extends TabManagerState {
@@ -190,6 +192,8 @@ export class EditorTabManagerState extends TabManagerState {
       return new DataProductEditorState(this.editorStore, element, config);
     } else if (element instanceof Availability) {
       return new AvailabilityEditorState(this.editorStore, element);
+    } else if (element instanceof Compute) {
+      return new ComputeEditorState(this.editorStore, element);
     } else if (element instanceof GenerationSpecification) {
       return new GenerationSpecificationEditorState(this.editorStore, element);
     } else if (element instanceof FileGenerationSpecification) {

package/src/stores/editor/NewElementState.ts

@@ -90,6 +90,10 @@ import {
   ModelAccessPointGroup,
   stub_Mapping,
   InternalDataProductType,
+  AppDirOwner,
+  Compute,
+  SnowflakeComputeSpecification,
+  SnowflakeWarehouseType,
 } from '@finos/legend-graph';
 import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../extensions/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 import {
@@ -564,6 +568,21 @@ export class NewLakehouseDataProductDriver extends NewElementDriver<DataProduct>
   }
 }
 
+export class NewComputeDriver extends NewElementDriver<Compute> {
+  override get isValid(): boolean {
+    return true;
+  }
+
+  override createElement(name: string): Compute {
+    const compute = new Compute(name);
+    compute.owner = new AppDirOwner();
+    const specification = new SnowflakeComputeSpecification();
+    specification.warehouseType = SnowflakeWarehouseType.STANDARD;
+    compute.specification = specification;
+    return compute;
+  }
+}
+
 export class NewServiceDriver extends NewElementDriver<Service> {
   mappingOption?: PackageableElementOption<Mapping> | undefined;
   runtimeOption: RuntimeOption;
@@ -853,6 +872,9 @@ export class NewElementState {
         case PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT:
           driver = new NewLakehouseDataProductDriver(this.editorStore);
           break;
+        case PACKAGEABLE_ELEMENT_TYPE._COMPUTE:
+          driver = new NewComputeDriver(this.editorStore);
+          break;
         default: {
           const extraNewElementDriverCreators = this.editorStore.pluginManager
             .getApplicationPlugins()
@@ -1091,6 +1113,10 @@ export class NewElementState {
           NewLakehouseDataProductDriver,
         ).createElement(name);
         break;
+      case PACKAGEABLE_ELEMENT_TYPE._COMPUTE:
+        element =
+          this.getNewElementDriver(NewComputeDriver).createElement(name);
+        break;
       default: {
         const extraNewElementFromStateCreators = this.editorStore.pluginManager
           .getApplicationPlugins()

package/src/stores/editor/editor-state/element-editor-state/compute/ComputeEditorState.ts

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2026-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 { action, computed, makeObservable } from 'mobx';
+import { guaranteeType } from '@finos/legend-shared';
+import {
+  Compute,
+  type PackageableElement,
+  SnowflakeComputeSpecification,
+} from '@finos/legend-graph';
+import { ElementEditorState } from '../ElementEditorState.js';
+import type { EditorStore } from '../../../EditorStore.js';
+import { reconcileComputeSpec } from './ComputeFormDescriptor.js';
+import { SNOWFLAKE_COMPUTE_FORM_DESCRIPTOR } from './SnowflakeComputeFormDescriptor.js';
+
+export const applyOptionalInt = (
+  raw: string,
+  apply: (value: number | undefined) => void,
+): void => {
+  // a cleared number input reports `''`, which is how the field is unset
+  if (raw === '') {
+    apply(undefined);
+    return;
+  }
+  const parsed = Number(raw);
+  if (!Number.isInteger(parsed)) {
+    return;
+  }
+  apply(parsed);
+};
+
+export class ComputeEditorState extends ElementEditorState {
+  constructor(editorStore: EditorStore, element: PackageableElement) {
+    super(editorStore, element);
+    makeObservable(this, {
+      compute: computed,
+      snowflakeSpecification: computed,
+      applyFieldEdit: action,
+    });
+  }
+
+  get compute(): Compute {
+    return guaranteeType(
+      this.element,
+      Compute,
+      'Element of compute editor state must be a Compute',
+    );
+  }
+
+  /** `undefined` for spec types the form cannot render yet. */
+  get snowflakeSpecification(): SnowflakeComputeSpecification | undefined {
+    const spec = this.compute.specification;
+    return spec instanceof SnowflakeComputeSpecification ? spec : undefined;
+  }
+
+  applyFieldEdit = (mutate: () => void): void => {
+    const spec = this.snowflakeSpecification;
+    if (!spec) {
+      return;
+    }
+    mutate();
+    reconcileComputeSpec(SNOWFLAKE_COMPUTE_FORM_DESCRIPTOR, spec);
+  };
+
+  override reprocess(
+    newElement: PackageableElement,
+    editorStore: EditorStore,
+  ): ComputeEditorState {
+    return new ComputeEditorState(editorStore, newElement);
+  }
+}

package/src/stores/editor/editor-state/element-editor-state/compute/ComputeFormDescriptor.ts

@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2026-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.
+ */
+
+/**
+ * The renderer and the reconcile pass read the same `visible` predicates, so
+ * what the user sees and what the model may hold cannot drift apart. The engine
+ * rejects properties that are illegal for the selected warehouse type.
+ *
+ * Bound to `SnowflakeComputeSpecification` rather than generic over a vendor
+ * spec: Snowflake is the only vendor whose form is conditional.
+ *
+ * Numeric limits are not modelled. The engine's are tunable server-side, so a
+ * copy here would reject values the backend accepts.
+ */
+
+import type { SnowflakeComputeSpecification } from '@finos/legend-graph';
+
+/** Every enum option is a string except `generation`, which is numeric. */
+export type ComputeEnumOptionValue = string | number;
+
+export interface ComputeEnumOption {
+  label: string;
+  value: ComputeEnumOptionValue;
+}
+
+interface ComputeFormFieldBase<TValue> {
+  key: string;
+  label: string;
+  /** When false, the reconcile pass clears the field rather than hiding it. */
+  visible: (spec: SnowflakeComputeSpecification) => boolean;
+  /** Set on the fields that must always hold a value while visible. */
+  defaultValue?: TValue | undefined;
+  get: (spec: SnowflakeComputeSpecification) => TValue | undefined;
+  set(spec: SnowflakeComputeSpecification, value: TValue | undefined): void;
+}
+
+export type ComputeFormField =
+  | ({
+      widget: 'text';
+    } & ComputeFormFieldBase<string>)
+  | ({ widget: 'number' } & ComputeFormFieldBase<number>)
+  | ({ widget: 'boolean' } & ComputeFormFieldBase<boolean>)
+  | ({
+      widget: 'enum';
+      options: ComputeEnumOption[];
+    } & ComputeFormFieldBase<ComputeEnumOptionValue>);
+
+type ComputeEnumFormField = Extract<ComputeFormField, { widget: 'enum' }>;
+
+export interface ComputeFormSection {
+  title: string;
+  fields: ComputeFormField[];
+}
+
+export interface ComputeFormDescriptor {
+  label: string;
+  /** The field the others' `visible` predicates key off. */
+  leadField: ComputeEnumFormField;
+  sections: ComputeFormSection[];
+}
+
+export const getComputeFormFields = (
+  descriptor: ComputeFormDescriptor,
+): ComputeFormField[] => [
+  descriptor.leadField,
+  ...descriptor.sections.flatMap((section) => section.fields),
+];
+
+export const getVisibleComputeFormSections = (
+  descriptor: ComputeFormDescriptor,
+  spec: SnowflakeComputeSpecification,
+): ComputeFormSection[] =>
+  descriptor.sections
+    .map((section) => ({
+      title: section.title,
+      fields: section.fields.filter((field) => field.visible(spec)),
+    }))
+    .filter((section) => section.fields.length > 0);
+
+/**
+ * Bring `spec` back in line with the descriptor after a mutation. Defaults
+ * apply only while a field is visible, and cleared values are not restored.
+ */
+export const reconcileComputeSpec = (
+  descriptor: ComputeFormDescriptor,
+  spec: SnowflakeComputeSpecification,
+): void => {
+  const fields = getComputeFormFields(descriptor);
+  // the bound is only to stop a descriptor whose predicates form a cycle
+  const maxPasses = fields.length + 1;
+  for (let pass = 0; pass < maxPasses; pass++) {
+    let changed = false;
+    for (const field of fields) {
+      const current = field.get(spec);
+      if (!field.visible(spec)) {
+        if (current !== undefined) {
+          field.set(spec, undefined);
+          changed = true;
+        }
+      } else if (current === undefined && field.defaultValue !== undefined) {
+        field.set(spec, field.defaultValue as never);
+        changed = true;
+      }
+    }
+    if (!changed) {
+      return;
+    }
+  }
+};