@finos/legend-application-studio 28.21.46 → 28.21.48

package/lib/components/editor/editor-group/dataProduct/DataProductEditor.js

@@ -25,8 +25,8 @@ import { action, autorun, flowResult, runInAction } from 'mobx';
 import { DataProductTestableEditor } from './testable/DataProductTestableEditor.js';
 import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
 import { CodeEditor } from '@finos/legend-lego/code-editor';
-import { DataProductEmbeddedImageIcon, DataProductLibraryIcon, Email, LakehouseTargetEnv, StereotypeExplicitReference, V1_DataProduct, V1_DataProductIconLibraryId, V1_PureGraphManager, V1_RemoteEngine, validate_PureExecutionMapping, InternalDataProductType, ExternalDataProductType, DataProductLink, observer_DataProductLink, Region, DeliveryFrequency, AppDirOwner, AppDirNode, observe_AppDirOwner, observe_AppDirNode, AppDirLevel, } from '@finos/legend-graph';
-import { accessPoint_setClassification, accessPoint_setReproducible, accessPointGroup_setDescription, accessPointGroup_setName, dataProduct_setDescription, dataProduct_setIcon, dataProduct_setSupportInfoIfAbsent, dataProduct_setTitle, supportInfo_addEmail, supportInfo_deleteEmail, supportInfo_setDocumentationUrl, supportInfo_setFaqUrl, supportInfo_setLinkLabel, supportInfo_setSupportUrl, supportInfo_setWebsite, dataProduct_setType, expertise_setDescription, expertise_addId, expertise_deleteId, supportInfo_deleteExpertise, externalType_setLinkURL, externalType_setLinkLabel, accessPointGroup_setTitle, accessPoint_setDescription, accessPoint_setTitle, dataProduct_setOperationalMetadataIfAbsent, operationalMetadata_deleteCoverageRegion, operationalMetadata_addCoverageRegion, operationalMetadata_setUpdateFrequency, dataProduct_setOwner, appDirOwner_setProduction, appDirOwner_setProdParallel, appDirNode_setAppDirId, } from '../../../../stores/graph-modifier/DSL_DataProduct_GraphModifierHelper.js';
+import { DataProduct, DataProductEmbeddedImageIcon, DataProductLibraryIcon, Email, LakehouseTargetEnv, StereotypeExplicitReference, V1_DataProduct, V1_DataProductIconLibraryId, V1_PureGraphManager, V1_RemoteEngine, validate_PureExecutionMapping, InternalDataProductType, ExternalDataProductType, DataProductLink, observer_DataProductLink, Region, DeliveryFrequency, AppDirOwner, AppDirNode, observe_AppDirOwner, observe_AppDirNode, AppDirLevel, } from '@finos/legend-graph';
+import { accessPoint_setClassification, accessPoint_setReproducible, accessPointGroup_addTarget, accessPointGroup_deleteTarget, accessPointGroup_setDescription, accessPointGroup_setName, dataProduct_setDescription, dataProduct_setIcon, dataProduct_setSupportInfoIfAbsent, dataProduct_setTitle, supportInfo_addEmail, supportInfo_deleteEmail, supportInfo_setDocumentationUrl, supportInfo_setFaqUrl, supportInfo_setLinkLabel, supportInfo_setSupportUrl, supportInfo_setWebsite, dataProduct_setType, expertise_setDescription, expertise_addId, expertise_deleteId, supportInfo_deleteExpertise, externalType_setLinkURL, externalType_setLinkLabel, accessPointGroup_setTitle, accessPoint_setDescription, accessPoint_setTitle, dataProduct_setOperationalMetadataIfAbsent, operationalMetadata_deleteCoverageRegion, operationalMetadata_addCoverageRegion, operationalMetadata_setUpdateFrequency, dataProduct_setOwner, appDirOwner_setProduction, appDirOwner_setProdParallel, appDirNode_setAppDirId, } from '../../../../stores/graph-modifier/DSL_DataProduct_GraphModifierHelper.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
 import { ActionAlertActionType, ActionAlertType, useApplicationNavigationContext, } from '@finos/legend-application';
@@ -35,7 +35,8 @@ import { annotatedElement_addStereotype, annotatedElement_deleteStereotype, } fr
 import { buildElementOption, } from '@finos/legend-lego/graph-editor';
 import { DataProductViewerState, ProductViewer, } from '@finos/legend-extension-dsl-data-product';
 import { RelationElementSampleValuesEditor } from '../data-editor/RelationElementSampleValuesEditor.js';
-import { LegendStudioTelemetryHelper } from '../../../../__lib__/LegendStudioTelemetryHelper.js';
+import { LEGENDAI_SUGGEST_MATCH_STRATEGY, LEGENDAI_SUGGEST_STAGE, LEGENDAI_SUGGEST_SURFACE, } from '../../../../__lib__/LegendStudioTelemetryHelper.js';
+import { useLegendAISuggestTelemetry } from '../LegendAISuggestTelemetryHooks.js';
 import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../__lib__/LegendStudioDocumentation.js';
 export var AP_GROUP_MODAL_ERRORS;
 (function (AP_GROUP_MODAL_ERRORS) {
@@ -171,6 +172,10 @@ export const LakehouseDataProductAccessPointEditor = observer((props) => {
         setIsHoveringTitle(false);
     };
     const updateAccessPointTargetEnvironment = action((targetEnvironment) => {
+        if (targetEnvironment !== undefined &&
+            groupState.value.targets?.length) {
+            groupState.value.targets = undefined;
+        }
         accessPoint.targetEnvironment = targetEnvironment;
     });
     const debugPlanGeneration = editorStore.applicationStore.guardUnhandledError(() => flowResult(accessPointState.generateArtifact()));
@@ -286,7 +291,7 @@ export const LakehouseDataProductAccessPointEditor = observer((props) => {
                                                     }
                                                     : undefined;
                                             })(), deleteConfirmMessage: `Are you sure you want to delete sample values for Access Point ${accessPointState.accessPoint.id}?`, onAdd: () => flowResult(accessPointState.createAndaddRelationElement()), onDelete: () => accessPointState.deleteRelationElement() }), editorStore.applicationStore.config.options
-                                            .dataProductConfig && (_jsx(AccessPointClassification, { accessPoint: accessPoint, groupState: groupState })), _jsxs("div", { className: clsx('access-point-editor__type'), title: 'Change target environment', children: [_jsx("div", { className: "access-point-editor__type__label", children: accessPoint.targetEnvironment }), _jsx(ControlledDropdownMenu, { className: "access-point-editor__dropdown", content: _jsx(MenuContent, { children: Object.values(LakehouseTargetEnv).map((environment) => (_jsx(MenuContentItem, { className: "btn__dropdown-combo__option", onClick: () => updateAccessPointTargetEnvironment(environment), children: environment }, environment))) }), menuProps: {
+                                            .dataProductConfig && (_jsx(AccessPointClassification, { accessPoint: accessPoint, groupState: groupState })), _jsxs("div", { className: clsx('access-point-editor__type'), title: 'Change target environment', children: [_jsx("div", { className: "access-point-editor__type__label", children: accessPoint.targetEnvironment }), _jsx(ControlledDropdownMenu, { className: "access-point-editor__dropdown", content: _jsxs(MenuContent, { children: [_jsx(MenuContentItem, { className: "btn__dropdown-combo__option", title: "Clear", onClick: () => updateAccessPointTargetEnvironment(undefined), children: ' ' }), Object.values(LakehouseTargetEnv).map((environment) => (_jsx(MenuContentItem, { className: "btn__dropdown-combo__option", onClick: () => updateAccessPointTargetEnvironment(environment), children: environment }, environment)))] }), menuProps: {
                                                         anchorOrigin: {
                                                             vertical: 'bottom',
                                                             horizontal: 'right',
@@ -376,6 +381,27 @@ const ModelAccessPointGroupEditor = observer((props) => {
                         }, tabIndex: -1, title: "See mapping", disabled: Boolean(isMappingEmpty), children: _jsx(LongArrowRightIcon, {}) })] })] }));
 });
 const AccessPointLoadingSentinel = (props) => _jsx("div", { ref: props.ref, className: "access-point-editor__sentinel" });
+/**
+ * Finds the suggested metadata for an access point group: by group name
+ * first, falling back to the group's position in the product.
+ */
+const matchAccessPointGroupSuggestion = (suggestion, groupId, groupIndex) => {
+    const groupMeta = suggestion.access_point_groups.find((g) => g.name === groupId) ??
+        suggestion.access_point_groups[groupIndex];
+    const accessPointMetas = suggestion.access_points.filter((ap) => ap.group === (groupMeta?.name ?? groupId));
+    return { groupMeta, accessPointMetas };
+};
+/**
+ * Flattens the access point group fields a LegendAI suggestion writes so the
+ * applied value can be compared with what is eventually pushed.
+ */
+const serializeAccessPointGroupAppliedFields = (group, accessPointCount) => [
+    group.title ?? '',
+    group.description ?? '',
+    ...group.accessPoints
+        .slice(0, accessPointCount)
+        .flatMap((ap) => [ap.id, ap.title ?? '', ap.description ?? '']),
+].join('\n');
 const AccessPointGroupEditor = observer((props) => {
     const { groupState, isReadOnly } = props;
     const editorStore = useEditorStore();
@@ -460,6 +486,26 @@ const AccessPointGroupEditor = observer((props) => {
     const updateGroupTitle = (val) => {
         accessPointGroup_setTitle(groupState.value, val);
     };
+    const getTargetEnvironmentOptions = () => {
+        const existingTargets = groupState.value.targets ?? [];
+        return Object.values(LakehouseTargetEnv)
+            .filter((target) => !existingTargets.includes(target))
+            .map((target) => ({
+            label: target,
+            value: target,
+        }));
+    };
+    const handleAddTargetEnvironment = action((val) => {
+        if (val) {
+            accessPointGroup_addTarget(groupState.value, val.value);
+            lakehouseAccessPointStates.forEach((accessPointState) => {
+                accessPointState.accessPoint.targetEnvironment = undefined;
+            });
+        }
+    });
+    const handleRemoveTargetEnvironment = (target) => {
+        accessPointGroup_deleteTarget(groupState.value, target);
+    };
     // AI suggestion for APG
     const legendAIUrl = editorStore.applicationStore.config.legendAIUrl;
     const aiDocSuggester = legendAIUrl
@@ -468,24 +514,56 @@ const AccessPointGroupEditor = observer((props) => {
             .map((p) => p.getExtraDataProductDocumentationAISuggester?.bind(p))
             .find(Boolean)
         : undefined;
+    const aiSuggestTelemetry = useLegendAISuggestTelemetry(editorStore, {
+        surface: LEGENDAI_SUGGEST_SURFACE.DATA_PRODUCT,
+        elementPath: productEditorState.product.path,
+        accessPointGroupId: groupState.value.id,
+    }, { legendAIUrl, available: Boolean(aiDocSuggester), isReadOnly });
     const suggestWithAI = async () => {
         if (!aiDocSuggester || !legendAIUrl) {
             return;
         }
-        LegendStudioTelemetryHelper.logEvent_DataProductLegendAISuggestLaunched(editorStore.applicationStore.telemetryService, productEditorState.product.path, editorStore.editorMode.getSourceInfo());
+        const request = aiSuggestTelemetry.launch({
+            existingText: groupState.value.description,
+            accessPointCount: groupState.value.accessPoints.length,
+        });
         setIsSuggestingWithAI(true);
         setAISuggestion(undefined);
+        let stage = LEGENDAI_SUGGEST_STAGE.SERIALIZE;
         try {
             const definitions = await editorStore.graphManagerState.graphManager.graphToPureCode(editorStore.graphManagerState.graph);
+            stage = LEGENDAI_SUGGEST_STAGE.REQUEST;
             const product = productEditorState.product;
             const suggestion = await aiDocSuggester({ definitions, data_product_name: product.path }, legendAIUrl);
+            const { groupMeta, accessPointMetas } = matchAccessPointGroupSuggestion(suggestion, groupState.value.id, productEditorState.accessPointGroupStates.indexOf(groupState));
+            const shouldShow = aiSuggestTelemetry.succeed(request, {
+                // the response is structured, so measure the parts shown for this group
+                suggestionText: [
+                    groupMeta?.title,
+                    groupMeta?.description,
+                    ...accessPointMetas.flatMap((ap) => [
+                        ap.name,
+                        ap.title,
+                        ap.description,
+                    ]),
+                ]
+                    .filter(Boolean)
+                    .join('\n'),
+                definitionsLength: definitions.length,
+                currentText: groupState.value.description,
+                confidence: groupMeta?.confidence,
+                accessPointSuggestionCount: accessPointMetas.length,
+            });
+            if (!shouldShow) {
+                editorStore.applicationStore.notificationService.notifyWarning(`LegendAI did not return a suggestion for access point group '${groupState.value.id}'`);
+            }
             runInAction(() => {
-                setAISuggestion(suggestion);
+                setAISuggestion(shouldShow ? suggestion : undefined);
             });
         }
         catch (error) {
             assertErrorThrown(error);
-            LegendStudioTelemetryHelper.logEvent_DataProductLegendAISuggestFailure(editorStore.applicationStore.telemetryService, productEditorState.product.path, error.message, editorStore.editorMode.getSourceInfo());
+            aiSuggestTelemetry.fail(request, error, stage);
             if (error instanceof NetworkClientError &&
                 (error.response.status === HttpStatus.UNAUTHORIZED ||
                     error.response.status === HttpStatus.FORBIDDEN)) {
@@ -506,37 +584,77 @@ const AccessPointGroupEditor = observer((props) => {
         if (!aiSuggestion) {
             return;
         }
-        LegendStudioTelemetryHelper.logEvent_DataProductLegendAISuggestApplied(editorStore.applicationStore.telemetryService, productEditorState.product.path, editorStore.editorMode.getSourceInfo());
+        const group = groupState.value;
+        const existingText = group.description;
         // Find matching group in the response
-        const gIdx = productEditorState.accessPointGroupStates.indexOf(groupState);
-        const groupMeta = aiSuggestion.access_point_groups.find((g) => g.name === groupState.value.id) ?? aiSuggestion.access_point_groups[gIdx];
+        const { groupMeta, accessPointMetas: apMetas } = matchAccessPointGroupSuggestion(aiSuggestion, group.id, productEditorState.accessPointGroupStates.indexOf(groupState));
+        const matchStrategy = !groupMeta
+            ? LEGENDAI_SUGGEST_MATCH_STRATEGY.NONE
+            : groupMeta.name === group.id
+                ? LEGENDAI_SUGGEST_MATCH_STRATEGY.NAME
+                : LEGENDAI_SUGGEST_MATCH_STRATEGY.INDEX;
         if (groupMeta) {
-            accessPointGroup_setTitle(groupState.value, groupMeta.title);
-            accessPointGroup_setDescription(groupState.value, groupMeta.description);
+            accessPointGroup_setTitle(group, groupMeta.title);
+            accessPointGroup_setDescription(group, groupMeta.description);
         }
         // Apply access point metadata for this group
-        const apMetas = aiSuggestion.access_points.filter((ap) => ap.group === (groupMeta?.name ?? groupState.value.id));
-        for (let j = 0; j < apMetas.length && j < groupState.value.accessPoints.length; j++) {
+        const accessPointsUpdated = Math.min(apMetas.length, group.accessPoints.length);
+        let accessPointsRenamed = 0;
+        let namesSanitized = 0;
+        for (let j = 0; j < accessPointsUpdated; j++) {
             const apMeta = apMetas[j];
-            const ap = groupState.value.accessPoints[j];
+            const ap = group.accessPoints[j];
             // Convert suggested name to valid identifier (alphanumeric + underscore)
             const sanitizedName = apMeta.name.replace(/[^0-9a-zA-Z_]/g, '_');
+            if (sanitizedName !== apMeta.name) {
+                namesSanitized++;
+            }
             if (sanitizedName) {
+                if (ap.id !== sanitizedName) {
+                    accessPointsRenamed++;
+                }
                 ap.id = sanitizedName;
             }
             accessPoint_setTitle(ap, apMeta.title);
             accessPoint_setDescription(ap, apMeta.description);
         }
+        const productPath = productEditorState.product.path;
+        const groupId = group.id;
+        aiSuggestTelemetry.apply({
+            existingText,
+            appliedText: groupMeta || accessPointsUpdated
+                ? serializeAccessPointGroupAppliedFields(group, accessPointsUpdated)
+                : '',
+            readCurrentText: (store) => {
+                const element = store.graphManagerState.graph.getNullableElement(productPath);
+                const currentGroup = element instanceof DataProduct
+                    ? element.accessPointGroups.find((g) => g.id === groupId)
+                    : undefined;
+                return currentGroup
+                    ? {
+                        found: true,
+                        text: serializeAccessPointGroupAppliedFields(currentGroup, accessPointsUpdated),
+                    }
+                    : { found: false };
+            },
+            dataProduct: {
+                matchStrategy,
+                accessPointsUpdated,
+                accessPointsRenamed,
+                namesSanitized,
+                accessPointCountMismatch: apMetas.length !== group.accessPoints.length,
+            },
+        });
         setAISuggestion(undefined);
     };
     const discardAISuggestion = () => {
-        LegendStudioTelemetryHelper.logEvent_DataProductLegendAISuggestDiscarded(editorStore.applicationStore.telemetryService, productEditorState.product.path, editorStore.editorMode.getSourceInfo());
+        aiSuggestTelemetry.discard();
         setAISuggestion(undefined);
     };
     // Computed AI suggestion for current group
-    const groupIndex = productEditorState.accessPointGroupStates.indexOf(groupState);
-    const aiGroupMeta = aiSuggestion?.access_point_groups.find((g) => g.name === groupState.value.id) ?? aiSuggestion?.access_point_groups[groupIndex];
-    const aiAccessPointMetas = aiSuggestion?.access_points.filter((ap) => ap.group === (aiGroupMeta?.name ?? groupState.value.id));
+    const { groupMeta: aiGroupMeta, accessPointMetas: aiAccessPointMetas } = aiSuggestion
+        ? matchAccessPointGroupSuggestion(aiSuggestion, groupState.value.id, productEditorState.accessPointGroupStates.indexOf(groupState))
+        : { groupMeta: undefined, accessPointMetas: undefined };
     const handleRemoveAccessPointGroup = () => {
         editorStore.applicationStore.alertService.setActionAlertInfo({
             message: groupState instanceof ModelAccessPointGroupState
@@ -584,7 +702,8 @@ const AccessPointGroupEditor = observer((props) => {
                             overflow: 'hidden',
                             padding: '0.25rem',
                             height: 'auto',
-                        } })) : (_jsxs("div", { onClick: handleDescriptionEdit, title: "Click to edit group description", className: "access-point-editor__description-container", children: [groupState.value.description ? (_jsx(HoverTextArea, { text: groupState.value.description, handleMouseOver: handleMouseOverDescription, handleMouseOut: handleMouseOutDescription, className: "access-point-editor__group-container__description" })) : (_jsxs("div", { className: "access-point-editor__group-container__description--warning", onMouseOver: handleMouseOverDescription, onMouseOut: handleMouseOutDescription, children: [_jsx(ErrorWarnIcon, {}), "Users request access at the access point group level. Click here to add a meaningful description to guide users."] })), isHoveringDescription && hoverIcon()] })), aiGroupMeta && (_jsx("div", { className: "data-product-editor__ai-suggestion-inline", children: aiGroupMeta.description }))] }), editorStore.applicationStore.config.options.dataProductConfig && (_jsx(AccessPointGroupPublicToggle, { groupState: groupState })), groupState instanceof ModelAccessPointGroupState ? (_jsx(ModelAccessPointGroupEditor, { groupState: groupState, isReadOnly: isReadOnly })) : (_jsxs(_Fragment, { children: [_jsxs(PanelHeader, { className: "panel__header--access-point", children: [_jsx("div", { className: "panel__header__title", children: "Access Points" }), _jsx(PanelHeaderActions, { children: _jsx(PanelHeaderActionItem, { className: "panel__header__action", onClick: handleAddAccessPoint, title: "Create new access point", children: _jsx(PlusIcon, {}) }) })] }), groupState.accessPointStates.length === 0 && (_jsxs("div", { className: "access-point-editor__group-container__description--warning", style: { color: 'var(--color-red-300)' }, children: [_jsx(WarningIcon, {}), "This group needs at least one access point defined."] })), _jsxs("div", { style: { gap: '1rem', display: 'flex', flexDirection: 'column' }, children: [lakehouseAccessPointStates
+                        } })) : (_jsxs("div", { onClick: handleDescriptionEdit, title: "Click to edit group description", className: "access-point-editor__description-container", children: [groupState.value.description ? (_jsx(HoverTextArea, { text: groupState.value.description, handleMouseOver: handleMouseOverDescription, handleMouseOut: handleMouseOutDescription, className: "access-point-editor__group-container__description" })) : (_jsxs("div", { className: "access-point-editor__group-container__description--warning", onMouseOver: handleMouseOverDescription, onMouseOut: handleMouseOutDescription, children: [_jsx(ErrorWarnIcon, {}), "Users request access at the access point group level. Click here to add a meaningful description to guide users."] })), isHoveringDescription && hoverIcon()] })), aiGroupMeta && (_jsx("div", { className: "data-product-editor__ai-suggestion-inline", children: aiGroupMeta.description }))] }), _jsxs("div", { className: "data-product-editor__operational-input data-product-editor__apg-targets-input", children: [_jsx("div", { className: "panel__content__form__section__header__label", style: { justifyContent: 'space-between', width: '45rem' }, children: "Target Environments" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "Select where this Data Product will be deployed." }), _jsx("div", { className: "panel__content__form__section__list__id-list", children: groupState.value.targets?.map((target) => (_jsxs("div", { className: "panel__content__form__section__list__item", children: [target, _jsx("button", { className: "panel__content__form__section__list__item__remove-btn", disabled: isReadOnly, onClick: () => handleRemoveTargetEnvironment(target), tabIndex: -1, title: "Remove Target Environment", children: _jsx(TimesIcon, {}) })] }, target))) }), _jsx(CustomSelectorInput, { className: "panel__content__form__section__dropdown", options: getTargetEnvironmentOptions(), onChange: handleAddTargetEnvironment, placeholder: 'Add Target Environment...', darkMode: !productEditorState.editorStore.applicationStore.layoutService
+                            .TEMPORARY__isLightColorThemeEnabled, disabled: isReadOnly })] }), editorStore.applicationStore.config.options.dataProductConfig && (_jsx(AccessPointGroupPublicToggle, { groupState: groupState })), groupState instanceof ModelAccessPointGroupState ? (_jsx(ModelAccessPointGroupEditor, { groupState: groupState, isReadOnly: isReadOnly })) : (_jsxs(_Fragment, { children: [_jsxs(PanelHeader, { className: "panel__header--access-point", children: [_jsx("div", { className: "panel__header__title", children: "Access Points" }), _jsx(PanelHeaderActions, { children: _jsx(PanelHeaderActionItem, { className: "panel__header__action", onClick: handleAddAccessPoint, title: "Create new access point", children: _jsx(PlusIcon, {}) }) })] }), groupState.accessPointStates.length === 0 && (_jsxs("div", { className: "access-point-editor__group-container__description--warning", style: { color: 'var(--color-red-300)' }, children: [_jsx(WarningIcon, {}), "This group needs at least one access point defined."] })), _jsxs("div", { style: { gap: '1rem', display: 'flex', flexDirection: 'column' }, children: [lakehouseAccessPointStates
                                 .slice(0, renderedCount)
                                 .map((apState, idx) => (_jsx(LakehouseDataProductAccessPointEditor, { isReadOnly: isReadOnly, accessPointState: apState, aiSuggestionMeta: aiAccessPointMetas?.[idx] }, apState.uuid))), accessPointCount > renderedCount && (_jsx(AccessPointLoadingSentinel, { ref: accessPointsSentinelRef }))] })] }))] }));
 });
@@ -899,12 +1018,12 @@ const HomeTab = observer((props) => {
                                 resize: 'vertical',
                                 maxHeight: '100%',
                                 maxWidth: '100%',
-                            } })] }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", style: { justifyContent: 'space-between', width: '45rem' }, children: "Data Product Type" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "Select if this Data Product is Internal or External" }), _jsx("div", { className: "panel__content__form__section__list__new-item__input", children: _jsx(CustomSelectorInput, { options: DATA_PRODUCT_TYPE_OPTIONS, onChange: handleDataProductTypeChange, value: product.type instanceof InternalDataProductType
-                                    ? DATA_PRODUCT_TYPE_OPTIONS.find((option) => option.value === DATA_PRODUCT_TYPE.INTERNAL)
-                                    : product.type instanceof ExternalDataProductType
-                                        ? DATA_PRODUCT_TYPE_OPTIONS.find((option) => option.value === DATA_PRODUCT_TYPE.EXTERNAL)
-                                        : null, darkMode: !dataProductEditorState.editorStore.applicationStore
-                                    .layoutService.TEMPORARY__isLightColorThemeEnabled }) }), product.type instanceof ExternalDataProductType && (_jsxs("div", { className: "data-product-editor__external-link", children: [_jsx("div", { className: "panel__content__form__section__header__prompt", children: "External Link" }), _jsx("textarea", { className: "input input-group__input panel__content__form__section__input input--dark input--small", spellCheck: false, disabled: isReadOnly, placeholder: "External URL", value: product.type.link.url, onChange: handleExternalURLChange, style: {
+                            } })] }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", style: { justifyContent: 'space-between', width: '45rem' }, children: "Data Product Type" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "Select if this Data Product is Internal or External" }), _jsx(CustomSelectorInput, { className: "panel__content__form__section__dropdown", options: DATA_PRODUCT_TYPE_OPTIONS, onChange: handleDataProductTypeChange, value: product.type instanceof InternalDataProductType
+                                ? DATA_PRODUCT_TYPE_OPTIONS.find((option) => option.value === DATA_PRODUCT_TYPE.INTERNAL)
+                                : product.type instanceof ExternalDataProductType
+                                    ? DATA_PRODUCT_TYPE_OPTIONS.find((option) => option.value === DATA_PRODUCT_TYPE.EXTERNAL)
+                                    : null, darkMode: !dataProductEditorState.editorStore.applicationStore
+                                .layoutService.TEMPORARY__isLightColorThemeEnabled }), product.type instanceof ExternalDataProductType && (_jsxs("div", { className: "data-product-editor__external-link", children: [_jsx("div", { className: "panel__content__form__section__header__prompt", children: "External Link" }), _jsx("textarea", { className: "input input-group__input panel__content__form__section__input input--dark input--small", spellCheck: false, disabled: isReadOnly, placeholder: "External URL", value: product.type.link.url, onChange: handleExternalURLChange, style: {
                                         resize: 'none',
                                         padding: '0.25rem 0.5rem',
                                     } }), _jsx("textarea", { className: "input input-group__input panel__content__form__section__input input--dark input--small", spellCheck: false, disabled: isReadOnly, placeholder: "External Link Label", value: product.type.link.label ?? '', onChange: handleExternalLabelChange, style: {
@@ -1099,15 +1218,15 @@ const OperationalTab = observer((props) => {
             operationalMetadata_setUpdateFrequency(product.operationalMetadata, val.value);
         }
     };
-    return (_jsxs("div", { children: [_jsx("div", { className: "panel__content__form__section__header__label", style: { paddingLeft: '1rem' }, children: "Operational Metadata" }), _jsx("div", { className: "panel__content__form__section__header__prompt", style: { paddingLeft: '1rem' }, children: "Configure operational metadata for this Data Product." }), _jsxs("div", { className: "data-product-editor__operational-input", children: [_jsx("div", { className: "panel__content__form__section__header__label", style: { justifyContent: 'space-between', width: '45rem' }, children: "Coverage Regions" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "Select the regions this Data Product covers." }), _jsx("div", { className: "panel__content__form__section__list__id-list", children: product.operationalMetadata?.coverageRegions?.map((region) => (_jsxs("div", { className: "panel__content__form__section__list__item", children: [region, _jsx("button", { className: "panel__content__form__section__list__item__remove-btn", disabled: dataProductEditorState.isReadOnly, onClick: () => handleRemoveRegion(region), tabIndex: -1, title: "Remove Region", children: _jsx(TimesIcon, {}) })] }, region))) }), _jsx("div", { className: "panel__content__form__section__list__new-item__input", children: _jsx(CustomSelectorInput, { options: getCoverageRegionOptions(), onChange: handleAddRegion, placeholder: CHOOSE_REGION, darkMode: true, disabled: isReadOnly }) })] }), _jsxs("div", { className: "data-product-editor__operational-input", children: [_jsx("div", { className: "panel__content__form__section__header__label", style: { justifyContent: 'space-between', width: '45rem' }, children: "Update Frequency" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "Select the update frequency of this Data Product." }), _jsx("div", { className: "panel__content__form__section__list__new-item__input", children: _jsx(CustomSelectorInput, { options: Object.values(DeliveryFrequency).map((frequency) => ({
-                                label: frequency,
-                                value: frequency,
-                            })), onChange: handleUpdateFrequencyChange, value: product.operationalMetadata?.updateFrequency
-                                ? {
-                                    label: product.operationalMetadata.updateFrequency,
-                                    value: product.operationalMetadata.updateFrequency,
-                                }
-                                : null, placeholder: "Select update frequency...", darkMode: true, disabled: isReadOnly }) })] })] }));
+    return (_jsxs("div", { children: [_jsx("div", { className: "panel__content__form__section__header__label", style: { paddingLeft: '1rem' }, children: "Operational Metadata" }), _jsx("div", { className: "panel__content__form__section__header__prompt", style: { paddingLeft: '1rem' }, children: "Configure operational metadata for this Data Product." }), _jsxs("div", { className: "data-product-editor__operational-input", children: [_jsx("div", { className: "panel__content__form__section__header__label", style: { justifyContent: 'space-between', width: '45rem' }, children: "Coverage Regions" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "Select the regions this Data Product covers." }), _jsx("div", { className: "panel__content__form__section__list__id-list", children: product.operationalMetadata?.coverageRegions?.map((region) => (_jsxs("div", { className: "panel__content__form__section__list__item", children: [region, _jsx("button", { className: "panel__content__form__section__list__item__remove-btn", disabled: dataProductEditorState.isReadOnly, onClick: () => handleRemoveRegion(region), tabIndex: -1, title: "Remove Region", children: _jsx(TimesIcon, {}) })] }, region))) }), _jsx(CustomSelectorInput, { className: "panel__content__form__section__dropdown", options: getCoverageRegionOptions(), onChange: handleAddRegion, placeholder: CHOOSE_REGION, darkMode: true, disabled: isReadOnly })] }), _jsxs("div", { className: "data-product-editor__operational-input", children: [_jsx("div", { className: "panel__content__form__section__header__label", style: { justifyContent: 'space-between', width: '45rem' }, children: "Update Frequency" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "Select the update frequency of this Data Product." }), _jsx(CustomSelectorInput, { className: "panel__content__form__section__dropdown", options: Object.values(DeliveryFrequency).map((frequency) => ({
+                            label: frequency,
+                            value: frequency,
+                        })), onChange: handleUpdateFrequencyChange, value: product.operationalMetadata?.updateFrequency
+                            ? {
+                                label: product.operationalMetadata.updateFrequency,
+                                value: product.operationalMetadata.updateFrequency,
+                            }
+                            : null, placeholder: "Select update frequency...", darkMode: true, disabled: isReadOnly })] })] }));
 });
 export const DataProductEditor = observer(() => {
     const editorStore = useEditorStore();