@finos/legend-application-studio 13.0.0

package/src/components/editor/edit-panel/service-editor/ServiceExecutionQueryEditor.tsx

@@ -0,0 +1,368 @@
+/**
+ * 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 { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import type {
+  ServicePureExecutionQueryState,
+  ServicePureExecutionState,
+} from '../../../../stores/editor-state/element-editor-state/service/ServiceExecutionState.js';
+import {
+  Dialog,
+  type SelectComponent,
+  BlankPanelContent,
+  ArrowCircleDownIcon,
+  clsx,
+  CustomSelectorInput,
+  PanelLoadingIndicator,
+  PlayIcon,
+  DropdownMenu,
+  MenuContent,
+  CaretDownIcon,
+  MenuContentItem,
+} from '@finos/legend-art';
+import { debounce } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import {
+  EDITOR_LANGUAGE,
+  ExecutionPlanViewer,
+  LambdaParameterValuesEditor,
+  useApplicationStore,
+} from '@finos/legend-application';
+import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
+import type { LightQuery } from '@finos/legend-graph';
+import type { DSLService_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSLService_LegendStudioApplicationPlugin_Extension.js';
+
+const ServiceExecutionResultViewer = observer(
+  (props: { executionState: ServicePureExecutionState }) => {
+    const { executionState } = props;
+    // execution
+    const executionResultText = executionState.executionResultText;
+    const closeExecutionResultViewer = (): void =>
+      executionState.setExecutionResultText(undefined);
+
+    return (
+      <Dialog
+        open={Boolean(executionResultText)}
+        onClose={closeExecutionResultViewer}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <div className="modal modal--dark editor-modal">
+          <div className="modal__header">
+            <div className="modal__title">Execution Result</div>
+          </div>
+          <div className="modal__body">
+            <StudioTextInputEditor
+              inputValue={executionResultText ?? ''}
+              isReadOnly={true}
+              language={EDITOR_LANGUAGE.JSON}
+              showMiniMap={true}
+            />
+          </div>
+          <div className="modal__footer">
+            <button
+              className="btn modal__footer__close-btn"
+              onClick={closeExecutionResultViewer}
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </Dialog>
+    );
+  },
+);
+
+type QueryOption = { label: string; value: LightQuery };
+const buildQueryOption = (query: LightQuery): QueryOption => ({
+  label: query.name,
+  value: query,
+});
+
+const ServiceExecutionQueryImporter = observer(
+  (props: { queryState: ServicePureExecutionQueryState }) => {
+    const { queryState } = props;
+    const applicationStore = useApplicationStore();
+    const queryFinderRef = useRef<SelectComponent>(null);
+    const closeQueryImporter = (): void =>
+      queryState.setOpenQueryImporter(false);
+    const handleEnterQueryImporter = (): void =>
+      queryFinderRef.current?.focus();
+
+    // query finder
+    const [searchText, setSearchText] = useState('');
+    const queryOptions = queryState.queries.map(buildQueryOption);
+    const selectedQueryOption = queryState.selectedQueryInfo
+      ? {
+          label: queryState.selectedQueryInfo.query.name,
+          value: queryState.selectedQueryInfo.query,
+        }
+      : null;
+    const onQueryOptionChange = (option: QueryOption | null): void => {
+      if (option?.value !== queryState.selectedQueryInfo?.query.id) {
+        flowResult(queryState.setSelectedQueryInfo(option?.value)).catch(
+          applicationStore.alertUnhandledError,
+        );
+      }
+    };
+    const formatQueryOptionLabel = (option: QueryOption): React.ReactNode => (
+      <div className="service-query-importer__query-option">
+        <div className="service-query-importer__query-option__label">
+          {option.label}
+        </div>
+        {Boolean(option.value.owner) && (
+          <div
+            className={clsx('service-query-importer__query-option__user', {
+              'service-query-importer__query-option__user--mine':
+                option.value.isCurrentUserQuery,
+            })}
+          >
+            {option.value.isCurrentUserQuery ? 'mine' : option.value.owner}
+          </div>
+        )}
+      </div>
+    );
+
+    const debouncedLoadQueries = useMemo(
+      () =>
+        debounce((input: string): void => {
+          flowResult(queryState.loadQueries(input)).catch(
+            applicationStore.alertUnhandledError,
+          );
+        }, 500),
+      [applicationStore, queryState],
+    );
+    const onSearchTextChange = (value: string): void => {
+      if (value !== searchText) {
+        setSearchText(value);
+        debouncedLoadQueries.cancel();
+        debouncedLoadQueries(value);
+      }
+    };
+    const importQuery = (): void => {
+      flowResult(queryState.importQuery()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    };
+
+    useEffect(() => {
+      flowResult(queryState.loadQueries('')).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [queryState, applicationStore]);
+
+    return (
+      <Dialog
+        open={queryState.openQueryImporter}
+        onClose={closeQueryImporter}
+        TransitionProps={{
+          onEnter: handleEnterQueryImporter,
+        }}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <div className="modal modal--dark search-modal">
+          <div className="modal__title">Import Query</div>
+          <CustomSelectorInput
+            ref={queryFinderRef}
+            options={queryOptions}
+            isLoading={queryState.loadQueriesState.isInProgress}
+            onInputChange={onSearchTextChange}
+            inputValue={searchText}
+            onChange={onQueryOptionChange}
+            value={selectedQueryOption}
+            placeholder="Search for a query by name..."
+            darkMode={true}
+            isClearable={true}
+            formatOptionLabel={formatQueryOptionLabel}
+          />
+          <div className="service-query-importer__query-preview">
+            <PanelLoadingIndicator
+              isLoading={queryState.loadQueryInfoState.isInProgress}
+            />
+            {queryState.selectedQueryInfo && (
+              <StudioTextInputEditor
+                inputValue={queryState.selectedQueryInfo.content}
+                isReadOnly={true}
+                language={EDITOR_LANGUAGE.PURE}
+                showMiniMap={false}
+                hideGutter={true}
+              />
+            )}
+            {!queryState.selectedQueryInfo && (
+              <BlankPanelContent>No query to preview</BlankPanelContent>
+            )}
+          </div>
+          <div className="search-modal__actions">
+            <button
+              className="btn btn--dark"
+              disabled={!queryState.selectedQueryInfo}
+              onClick={importQuery}
+            >
+              Import
+            </button>
+          </div>
+        </div>
+      </Dialog>
+    );
+  },
+);
+
+export const ServiceExecutionQueryEditor = observer(
+  (props: {
+    executionState: ServicePureExecutionState;
+    isReadOnly: boolean;
+  }) => {
+    const { executionState, isReadOnly } = props;
+    const queryState = executionState.queryState;
+    const editorStore = useEditorStore();
+    const applicationStore = useApplicationStore();
+    const extraServiceQueryEditorActions = editorStore.pluginManager
+      .getApplicationPlugins()
+      .flatMap(
+        (plugin) =>
+          (
+            plugin as DSLService_LegendStudioApplicationPlugin_Extension
+          ).getExtraServiceQueryEditorActionConfigurations?.() ?? [],
+      )
+      .map((config) => (
+        <Fragment key={config.key}>
+          {config.renderer(executionState, isReadOnly)}
+        </Fragment>
+      ));
+    const importQuery = (): void => {
+      queryState.setOpenQueryImporter(true);
+    };
+    // execute
+    const handleExecute = applicationStore.guardUnhandledError(() =>
+      flowResult(executionState.handleExecute()),
+    );
+    const generatePlan = applicationStore.guardUnhandledError(() =>
+      flowResult(executionState.generatePlan(false)),
+    );
+    const debugPlanGeneration = applicationStore.guardUnhandledError(() =>
+      flowResult(executionState.generatePlan(true)),
+    );
+    // convert to string
+    useEffect(() => {
+      flowResult(queryState.convertLambdaObjectToGrammarString(true)).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [applicationStore, queryState]);
+
+    return (
+      <div className="panel service-execution-query-editor">
+        <div className="panel__header">
+          <div className="panel__header__title">
+            <div className="panel__header__title__label service-editor__execution__label--query">
+              query
+            </div>
+          </div>
+          <div className="panel__header__actions">
+            {extraServiceQueryEditorActions}
+            <button
+              className="panel__header__action"
+              onClick={importQuery}
+              disabled={isReadOnly}
+              tabIndex={-1}
+              title="Import query"
+            >
+              <ArrowCircleDownIcon />
+            </button>
+            <button
+              className="service-editor__execution__execute-btn"
+              onClick={handleExecute}
+              title={`Execute`}
+              disabled={executionState.isExecuting}
+              tabIndex={-1}
+            >
+              <div className="service-editor__execution__execute-btn__label">
+                <PlayIcon className="service-editor__execution__execute-btn__label__icon" />
+                <div className="service-editor__execution__execute-btn__label__title">
+                  Execute
+                </div>
+              </div>
+              <DropdownMenu
+                className="service-editor__execution__execute-btn__dropdown-btn"
+                disabled={
+                  executionState.isExecuting || executionState.isGeneratingPlan
+                }
+                content={
+                  <MenuContent>
+                    <MenuContentItem
+                      className="service-editor__execution__execute-btn__option"
+                      onClick={generatePlan}
+                    >
+                      Generate Plan
+                    </MenuContentItem>
+                    <MenuContentItem
+                      className="service-editor__execution__execute-btn__option"
+                      onClick={debugPlanGeneration}
+                    >
+                      Debug
+                    </MenuContentItem>
+                  </MenuContent>
+                }
+                menuProps={{
+                  anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                  transformOrigin: { vertical: 'top', horizontal: 'right' },
+                }}
+              >
+                <CaretDownIcon />
+              </DropdownMenu>
+            </button>
+          </div>
+        </div>
+        <div className="panel__content property-mapping-editor__entry__container">
+          <PanelLoadingIndicator
+            isLoading={
+              executionState.isOpeningQueryEditor ||
+              executionState.isExecuting ||
+              executionState.isGeneratingPlan
+            }
+          />
+          <div className="service-execution-query-editor__content">
+            <StudioTextInputEditor
+              inputValue={queryState.lambdaString}
+              isReadOnly={true}
+              language={EDITOR_LANGUAGE.PURE}
+              showMiniMap={true}
+            />
+          </div>
+          <ExecutionPlanViewer
+            executionPlanState={executionState.executionPlanState}
+          />
+          <ServiceExecutionResultViewer executionState={executionState} />
+          {queryState.openQueryImporter && (
+            <ServiceExecutionQueryImporter queryState={queryState} />
+          )}
+          {executionState.parameterState.parameterValuesEditorState
+            .showModal && (
+            <LambdaParameterValuesEditor
+              graph={executionState.editorStore.graphManagerState.graph}
+              lambdaParametersState={executionState.parameterState}
+            />
+          )}
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/editor/edit-panel/service-editor/ServiceRegistrationEditor.tsx

@@ -0,0 +1,221 @@
+/**
+ * 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 { observer } from 'mobx-react-lite';
+import { ServiceEditorState } from '../../../../stores/editor-state/element-editor-state/service/ServiceEditorState.js';
+import {
+  clsx,
+  PanelLoadingIndicator,
+  CustomSelectorInput,
+  CheckSquareIcon,
+  SquareIcon,
+} from '@finos/legend-art';
+import { prettyCONSTName } from '@finos/legend-shared';
+import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
+import { ServiceExecutionMode } from '@finos/legend-graph';
+import { flowResult } from 'mobx';
+import { Version } from '@finos/legend-server-sdlc';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import { useApplicationStore } from '@finos/legend-application';
+
+export const ServiceRegistrationEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const applicationStore = useApplicationStore();
+  const serviceState = editorStore.getCurrentEditorState(ServiceEditorState);
+  const registrationState = serviceState.registrationState;
+  // service servers
+  const envOptions = registrationState.options.map((info) => ({
+    label: info.env.toUpperCase(),
+    value: info.env,
+  }));
+  const selectedEnvOption = registrationState.serviceEnv
+    ? {
+        label: registrationState.serviceEnv.toUpperCase(),
+        value: registrationState.serviceEnv,
+      }
+    : null;
+  // service types
+  const serviceTypesOptions = registrationState.executionModes.map((mode) => ({
+    label: prettyCONSTName(mode),
+    value: mode,
+  }));
+  const selectedServiceType = registrationState.serviceExecutionMode
+    ? {
+        label: prettyCONSTName(registrationState.serviceExecutionMode),
+        value: registrationState.serviceExecutionMode,
+      }
+    : null;
+  const onServiceTypeSelectionChange = (
+    val: { label: ServiceExecutionMode; value: ServiceExecutionMode } | null,
+  ): void => {
+    registrationState.updateType(val?.value);
+  };
+  const onServerEnvChange = (
+    val: { label: string; value: string } | null,
+  ): void => {
+    registrationState.updateEnv(val?.value);
+  };
+  // version Projection
+  const selectedVersion = registrationState.projectVersion
+    ? {
+        label:
+          registrationState.projectVersion instanceof Version
+            ? registrationState.projectVersion.id.id
+            : registrationState.projectVersion,
+        value: registrationState.projectVersion,
+      }
+    : null;
+  const onVersionSelectionChange = (
+    val: { label: string; value: Version | string } | null,
+  ): void => {
+    registrationState.setProjectVersion(val?.value);
+  };
+  const versionPlaceholder =
+    registrationState.versionOptions === undefined
+      ? `Only valid for ${prettyCONSTName(
+          ServiceExecutionMode.SEMI_INTERACTIVE,
+        )} and ${prettyCONSTName(ServiceExecutionMode.PROD)} service types`
+      : !registrationState.versionOptions.length
+      ? 'Project has no versions'
+      : undefined;
+  // activate
+  const toggleActivatePostRegistration = (): void => {
+    registrationState.setActivatePostRegistration(
+      !registrationState.activatePostRegistration,
+    );
+  };
+  // actions
+  const registerService = (): void => {
+    if (selectedEnvOption && selectedServiceType) {
+      flowResult(registrationState.registerService()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }
+  };
+  const disableRegistration =
+    !selectedEnvOption ||
+    !selectedServiceType ||
+    registrationState.registrationState.isInProgress;
+  return (
+    <div
+      data-testid={LEGEND_STUDIO_TEST_ID.SERVICE_REGISTRATION_EDITOR}
+      className="service-registration-editor"
+    >
+      <div className="panel__header">
+        <div className="panel__header__title">
+          <div className="panel__header__title__label">Register Service</div>
+        </div>
+        <div className="panel__header__actions">
+          <div className="panel__header__action">
+            <button
+              className="btn--dark model-loader__header__load-btn"
+              onClick={registerService}
+              disabled={disableRegistration}
+              tabIndex={-1}
+              title="Register Service"
+            >
+              Register
+            </button>
+          </div>
+        </div>
+      </div>
+      <PanelLoadingIndicator
+        isLoading={registrationState.registrationState.isInProgress}
+      />
+      <div className="panel__content__form">
+        {registrationState.registrationState.message && (
+          <div className="service-registration-editor__progress-msg">
+            {`${registrationState.registrationState.message}...`}
+          </div>
+        )}
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__label">
+            Activate Service
+          </div>
+          <div
+            className="panel__content__form__section__toggler"
+            onClick={toggleActivatePostRegistration}
+          >
+            <button
+              type="button"
+              className={clsx('panel__content__form__section__toggler__btn', {
+                'panel__content__form__section__toggler__btn--toggled':
+                  registrationState.activatePostRegistration,
+              })}
+              tabIndex={-1}
+            >
+              {registrationState.activatePostRegistration ? (
+                <CheckSquareIcon />
+              ) : (
+                <SquareIcon />
+              )}
+            </button>
+            <div className="panel__content__form__section__toggler__prompt">
+              Activates service after registration
+            </div>
+          </div>
+        </div>
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__label">
+            Execution Server
+          </div>
+          <div className="panel__content__form__section__header__prompt">
+            The execution server where your service will be registered
+          </div>
+          <CustomSelectorInput
+            options={envOptions}
+            onChange={onServerEnvChange}
+            value={selectedEnvOption}
+            darkMode={true}
+          />
+        </div>
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__label">
+            Service Type
+          </div>
+          <div className="panel__content__form__section__header__prompt">
+            The kind of service you want to register. Used to determine how the
+            metadata will be fetched
+          </div>
+          <CustomSelectorInput
+            options={serviceTypesOptions}
+            onChange={onServiceTypeSelectionChange}
+            value={selectedServiceType}
+            darkMode={true}
+          />
+        </div>
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__label">
+            Project Version
+          </div>
+          <div className="panel__content__form__section__header__prompt">
+            The version of your project you want to use for registration. Only
+            relevant for semi-interactive and production services.
+          </div>
+          <CustomSelectorInput
+            options={registrationState.versionOptions ?? []}
+            onChange={onVersionSelectionChange}
+            value={selectedVersion}
+            darkMode={true}
+            disabled={registrationState.versionOptions === undefined}
+            placeholder={versionPlaceholder}
+            isLoading={editorStore.sdlcState.isFetchingProjectVersions}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});