@finos/legend-application-studio 28.19.19 → 28.19.21

package/src/components/editor/editor-group/dataProduct/DataPoductEditor.tsx

@@ -63,6 +63,13 @@ import {
   BuildingIcon,
   Tooltip,
   InfoCircleIcon,
+  ResizablePanelGroup,
+  ResizablePanel,
+  MarkdownTextViewer,
+  ResizablePanelSplitter,
+  EyeIcon,
+  CloseEyeIcon,
+  Checkbox,
 } from '@finos/legend-art';
 import React, {
   useRef,
@@ -97,6 +104,7 @@ import {
   supportInfo_addEmail,
   supportInfo_deleteEmail,
   accessPoint_setClassification,
+  accessPoint_setReproducible,
 } 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';
@@ -438,46 +446,28 @@ export const LakehouseDataProductAcccessPointEditor = observer(
           <div style={{ flex: 1 }}>
             <div className="access-point-editor__metadata">
               <AccessPointTitle accessPoint={accessPoint} />
-              {editingDescription ? (
-                <textarea
-                  className="panel__content__form__section__input"
-                  spellCheck={false}
-                  value={accessPoint.description ?? ''}
-                  onChange={updateAccessPointDescription}
-                  placeholder="Access Point description"
-                  onBlur={handleDescriptionBlur}
-                  style={{
-                    overflow: 'hidden',
-                    resize: 'none',
-                    padding: '0.25rem',
-                  }}
-                />
-              ) : (
-                <div
-                  onClick={handleDescriptionEdit}
-                  title="Click to edit access point description"
-                  className="access-point-editor__description-container"
-                >
-                  {accessPoint.description ? (
-                    <HoverTextArea
-                      text={accessPoint.description}
-                      handleMouseOver={handleMouseOver}
-                      handleMouseOut={handleMouseOut}
-                    />
-                  ) : (
-                    <div
-                      className="access-point-editor__group-container__description--warning"
-                      onMouseOver={handleMouseOver}
-                      onMouseOut={handleMouseOut}
-                    >
-                      <WarningIcon />
-                      {AP_EMPTY_DESC_WARNING}
-                    </div>
-                  )}
-                  {isHovering && hoverIcon()}
-                </div>
-              )}
               <div className="access-point-editor__info">
+                <div className="access-point-editor__reproducible">
+                  <Checkbox
+                    disabled={groupState.state.isReadOnly}
+                    checked={accessPoint.reproducible ?? false}
+                    onChange={() =>
+                      accessPoint_setReproducible(
+                        accessPoint,
+                        !accessPoint.reproducible,
+                      )
+                    }
+                    size="small"
+                    style={{ padding: 0, margin: 0 }}
+                  />
+                  <Tooltip
+                    title="This access point is reproducible based on a specific Lakehouse batch in time"
+                    arrow={true}
+                    placement={'top'}
+                  >
+                    <div>Reproducible</div>
+                  </Tooltip>
+                </div>
                 {editorStore.applicationStore.config.options
                   .dataProductConfig && (
                   <AccessPointClassification
@@ -485,7 +475,6 @@ export const LakehouseDataProductAcccessPointEditor = observer(
                     groupState={groupState}
                   />
                 )}
-
                 <div
                   className={clsx('access-point-editor__type')}
                   title={'Change target environment'}
@@ -528,6 +517,46 @@ export const LakehouseDataProductAcccessPointEditor = observer(
                 </div>
               </div>
             </div>
+            {editingDescription ? (
+              <textarea
+                className="panel__content__form__section__input"
+                spellCheck={false}
+                value={accessPoint.description ?? ''}
+                onChange={updateAccessPointDescription}
+                placeholder="Access Point description"
+                onBlur={handleDescriptionBlur}
+                style={{
+                  overflow: 'hidden',
+                  resize: 'none',
+                  padding: '0.25rem',
+                  marginLeft: '0.5rem',
+                }}
+              />
+            ) : (
+              <div
+                onClick={handleDescriptionEdit}
+                title="Click to edit access point description"
+                className="access-point-editor__description-container"
+              >
+                {accessPoint.description ? (
+                  <HoverTextArea
+                    text={accessPoint.description}
+                    handleMouseOver={handleMouseOver}
+                    handleMouseOut={handleMouseOut}
+                  />
+                ) : (
+                  <div
+                    className="access-point-editor__group-container__description--warning"
+                    onMouseOver={handleMouseOver}
+                    onMouseOut={handleMouseOut}
+                  >
+                    <WarningIcon />
+                    {AP_EMPTY_DESC_WARNING}
+                  </div>
+                )}
+                {isHovering && hoverIcon()}
+              </div>
+            )}
             <div className="access-point-editor__content">
               <div className="access-point-editor__generic-entry">
                 <div className="access-point-editor__entry__container">
@@ -841,7 +870,10 @@ const AccessPointGroupEditor = observer(
           </PanelHeaderActions>
         </PanelHeader>
         {groupState.accessPointStates.length === 0 && (
-          <div className="access-point-editor__group-container__description--warning">
+          <div
+            className="access-point-editor__group-container__description--warning"
+            style={{ color: 'var(--color-red-300)' }}
+          >
             <WarningIcon />
             This group needs at least one access point defined.
           </div>
@@ -1130,49 +1162,100 @@ const HomeTab = observer(
     > = (event) => {
       dataProduct_setDescription(product, event.target.value);
     };
-
+    const [showPreview, setshowPreview] = useState(false);
     return (
-      <div style={{ flexDirection: 'column', display: 'flex' }}>
-        <PanelFormTextField
-          name="Title"
-          value={product.title}
-          prompt="Provide a descriptive name for the Data Product to appear in Marketplace."
-          update={updateDataProductTitle}
-          placeholder="Enter title"
-        />
-        <div style={{ margin: '1rem' }}>
-          <div className="panel__content__form__section__header__label">
-            Description
-          </div>
-          <div
-            className="panel__content__form__section__header__prompt"
-            style={{
-              color:
-                product.description === '' || product.description === undefined
-                  ? 'var(--color-red-300)'
-                  : 'var(--color-light-grey-400)',
-            }}
-          >
-            Clearly describe the purpose, content, and intended use of the Data
-            Product.
-          </div>
-          <textarea
-            className="panel__content__form__section__textarea"
-            spellCheck={false}
-            disabled={isReadOnly}
-            value={product.description}
-            onChange={updateDataProductDescription}
-            style={{
-              padding: '0.5rem',
-              width: '45rem',
-              maxWidth: '45rem !important',
-              borderColor:
-                product.description === '' || product.description === undefined
-                  ? 'var(--color-red-300)'
-                  : 'transparent',
-            }}
-          />
-        </div>
+      <div className="panel__content">
+        <ResizablePanelGroup orientation="vertical">
+          <ResizablePanel>
+            <PanelFormTextField
+              name="Title"
+              value={product.title}
+              prompt="Provide a descriptive name for the Data Product to appear in Marketplace."
+              update={updateDataProductTitle}
+              placeholder="Enter title"
+            />
+            <div style={{ margin: '1rem' }}>
+              <div
+                className="panel__content__form__section__header__label"
+                style={{ justifyContent: 'space-between', width: '45rem' }}
+              >
+                Description
+                <button
+                  className="btn__dropdown-combo__label"
+                  onClick={() => setshowPreview(!showPreview)}
+                  title={showPreview ? 'Hide Preview' : 'Preview Description'}
+                  tabIndex={-1}
+                  style={{
+                    width: '12rem',
+                    justifyContent: 'center',
+                  }}
+                >
+                  {showPreview ? (
+                    <>
+                      <CloseEyeIcon className="btn__dropdown-combo__label__icon" />
+                      <div className="btn__dropdown-combo__label__title">
+                        Hide Preview
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <EyeIcon className="btn__dropdown-combo__label__icon" />
+                      <div className="btn__dropdown-combo__label__title">
+                        Preview
+                      </div>
+                    </>
+                  )}
+                </button>
+              </div>
+
+              <div
+                className="panel__content__form__section__header__prompt"
+                style={{
+                  color:
+                    product.description === '' ||
+                    product.description === undefined
+                      ? 'var(--color-red-300)'
+                      : 'var(--color-light-grey-400)',
+                  width: '45rem',
+                }}
+              >
+                Clearly describe the purpose, content, and intended use of the
+                Data Product. Markdown is supported.
+              </div>
+              <textarea
+                className="panel__content__form__section__textarea"
+                spellCheck={false}
+                disabled={isReadOnly}
+                value={product.description}
+                onChange={updateDataProductDescription}
+                style={{
+                  padding: '0.5rem',
+                  width: '45rem',
+                  height: '10rem',
+                  borderColor:
+                    product.description === '' ||
+                    product.description === undefined
+                      ? 'var(--color-red-300)'
+                      : 'transparent',
+                  resize: 'vertical',
+                  maxHeight: '100%',
+                  maxWidth: '100%',
+                }}
+              />
+            </div>
+          </ResizablePanel>
+          {showPreview && <ResizablePanelSplitter />}
+          {showPreview && (
+            <ResizablePanel>
+              <div className="text-element-editor__preview">
+                <MarkdownTextViewer
+                  value={{ value: product.description ?? '' }}
+                  className="text-element-editor__preview__markdown"
+                />
+              </div>
+            </ResizablePanel>
+          )}
+        </ResizablePanelGroup>
       </div>
     );
   },

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

@@ -0,0 +1,80 @@
+/**
+ * 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 {
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
+import type { PlainObject } from '@finos/legend-shared';
+
+export const ActivatorArtifactViewer = observer(
+  (props: {
+    artifact: PlainObject | undefined;
+    setArtifact: (value: PlainObject | undefined) => void;
+    darkMode: boolean;
+  }) => {
+    const { artifact, setArtifact, darkMode } = props;
+    const closeArtifact = (): void => {
+      setArtifact(undefined);
+    };
+
+    if (!artifact) {
+      return null;
+    }
+
+    return (
+      <Dialog
+        open={Boolean(artifact)}
+        onClose={closeArtifact}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <Modal className="editor-modal" darkMode={darkMode}>
+          <ModalHeader title="Artifact" />
+          <ModalBody>
+            <div className="panel__content execution-plan-viewer__panel__content">
+              <CodeEditor
+                inputValue={JSON.stringify(artifact, null, 2)}
+                isReadOnly={true}
+                language={CODE_EDITOR_LANGUAGE.JSON}
+                hidePadding={true}
+                hideMinimap={true}
+              />
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              title="Close artifact modal"
+              onClick={closeArtifact}
+              text="Close"
+              type="secondary"
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);

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>