@finos/legend-application-studio 13.0.0

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

@@ -0,0 +1,485 @@
+/**
+ * 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 { useState, useRef, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  MINIMUM_SERVICE_OWNERS,
+  ServiceEditorState,
+  SERVICE_TAB,
+} from '../../../../stores/editor-state/element-editor-state/service/ServiceEditorState.js';
+import {
+  clsx,
+  PencilIcon,
+  LockIcon,
+  CheckSquareIcon,
+  SquareIcon,
+  TimesIcon,
+  SaveIcon,
+  InfoCircleIcon,
+  ErrorIcon,
+} from '@finos/legend-art';
+import { prettyCONSTName } from '@finos/legend-shared';
+import { ServiceExecutionEditor } from './ServiceExecutionEditor.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
+import { ServiceRegistrationEditor } from './ServiceRegistrationEditor.js';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import {
+  service_addOwner,
+  service_deleteOwner,
+  service_removePatternParameter,
+  service_setAutoActivateUpdates,
+  service_setDocumentation,
+  service_setPattern,
+  service_updateOwner,
+} from '../../../../stores/graphModifier/DSLService_GraphModifierHelper.js';
+import { validate_ServicePattern } from '@finos/legend-graph';
+import { ServiceTestableEditor } from './testable/ServiceTestableEditor.js';
+import { useApplicationNavigationContext } from '@finos/legend-application';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
+
+const ServiceGeneralEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const serviceState = editorStore.getCurrentEditorState(ServiceEditorState);
+  const service = serviceState.service;
+  const isReadOnly = serviceState.isReadOnly;
+  // Pattern
+  const patternRef = useRef<HTMLInputElement>(null);
+  const [pattern, setPattern] = useState(service.pattern);
+  const changePattern: React.ChangeEventHandler<HTMLInputElement> = (event) =>
+    setPattern(event.target.value);
+  const updatePattern = (): void => {
+    if (!isReadOnly) {
+      service_setPattern(service, pattern);
+    }
+  };
+  const patternValidationResult = validate_ServicePattern(pattern);
+  const allowUpdatingPattern =
+    !patternValidationResult ||
+    (!patternValidationResult.messages.length && pattern !== service.pattern);
+  const removePatternParameter =
+    (val: string): (() => void) =>
+    (): void => {
+      service_removePatternParameter(service, val);
+      setPattern(service.pattern);
+    };
+  // Owners
+  const owners = service.owners;
+  const [showOwnerEditInput, setShowOwnerEditInput] = useState<
+    boolean | number
+  >(false);
+  const [ownerInputValue, setOwnerInputValue] = useState<string>('');
+  const showAddOwnerInput = (): void => setShowOwnerEditInput(true);
+  const showEditOwnerInput =
+    (value: string, idx: number): (() => void) =>
+    (): void => {
+      setOwnerInputValue(value);
+      setShowOwnerEditInput(idx);
+    };
+  const hideAddOrEditOwnerInput = (): void => {
+    setShowOwnerEditInput(false);
+    setOwnerInputValue('');
+  };
+  const changeOwnerInputValue: React.ChangeEventHandler<HTMLInputElement> = (
+    event,
+  ) => setOwnerInputValue(event.target.value);
+  const addOwner = (): void => {
+    if (ownerInputValue && !isReadOnly && !owners.includes(ownerInputValue)) {
+      service_addOwner(service, ownerInputValue);
+    }
+    hideAddOrEditOwnerInput();
+  };
+  const updateOwner =
+    (idx: number): (() => void) =>
+    (): void => {
+      if (ownerInputValue && !isReadOnly && !owners.includes(ownerInputValue)) {
+        service_updateOwner(service, ownerInputValue, idx);
+      }
+    };
+  const deleteOwner =
+    (idx: number): (() => void) =>
+    (): void => {
+      if (!isReadOnly) {
+        service_deleteOwner(service, idx);
+        // Since we keep track of the value currently being edited using the index, we have to account for it as we delete entry
+        if (
+          typeof showOwnerEditInput === 'number' &&
+          showOwnerEditInput > idx
+        ) {
+          setShowOwnerEditInput(showOwnerEditInput - 1);
+        }
+      }
+    };
+  // Other
+  const changeDocumentation: React.ChangeEventHandler<HTMLTextAreaElement> = (
+    event,
+  ) => {
+    if (!isReadOnly) {
+      service_setDocumentation(service, event.target.value);
+    }
+  };
+  const toggleAutoActivateUpdates = (): void => {
+    service_setAutoActivateUpdates(service, !service.autoActivateUpdates);
+  };
+
+  useEffect(() => {
+    patternRef.current?.focus();
+  }, [serviceState]);
+
+  return (
+    <div className="panel__content__lists service-editor__general">
+      <div className="panel__content__form">
+        <div className="panel__content__form__section service-editor__pattern">
+          <div className="panel__content__form__section__header__label">
+            URL Pattern
+          </div>
+          <div className="panel__content__form__section__header__prompt">
+            Specifies the URL pattern of the service (e.g. /myService/
+            <span className="service-editor__pattern__example__param">{`{param}`}</span>
+            )
+          </div>
+          <div className="input-group service-editor__pattern__edit">
+            <div className="input-group service-editor__pattern__input__group">
+              <input
+                ref={patternRef}
+                className="input-group__input panel__content__form__section__input service-editor__pattern__input"
+                spellCheck={false}
+                disabled={isReadOnly}
+                value={pattern}
+                onChange={changePattern}
+              />
+              {patternValidationResult?.messages.length && (
+                <div className="input-group__error-message">
+                  {patternValidationResult.messages.map((error) => (
+                    <div
+                      key={error}
+                      className="input-group__error-message__item"
+                    >
+                      {error}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+            <button
+              className="service-editor__pattern__input__save-btn btn--dark"
+              tabIndex={-1}
+              disabled={isReadOnly || !allowUpdatingPattern}
+              onClick={updatePattern}
+              title="Save change"
+            >
+              <SaveIcon />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="service-editor__pattern__parameters">
+        <div className="service-editor__pattern__parameters__header">
+          <div className="service-editor__pattern__parameters__header__label">
+            Parameters
+          </div>
+          <div
+            className="service-editor__pattern__parameters__header__info"
+            title={`URL parameters (each must be surrounded by curly braces) will be passed as arguments for the execution query.\nNote that if the service is configured to use multi-execution, one of the URL parameters must be chosen as the execution key.`}
+          >
+            <InfoCircleIcon />
+          </div>
+        </div>
+        <div className="service-editor__pattern__parameters__list">
+          {!service.patternParameters.length && (
+            <div className="service-editor__pattern__parameters__list__empty">
+              No parameter
+            </div>
+          )}
+          {Boolean(service.patternParameters.length) &&
+            service.patternParameters.map((parameter) => (
+              <div
+                key={parameter}
+                className="service-editor__pattern__parameter"
+              >
+                <div className="service-editor__pattern__parameter__text">
+                  {parameter}
+                </div>
+                <div className="service-editor__pattern__parameter__actions">
+                  <button
+                    className="service-editor__pattern__parameter__action"
+                    disabled={isReadOnly}
+                    onClick={removePatternParameter(parameter)}
+                    title={'Remove parameter'}
+                    tabIndex={-1}
+                  >
+                    <TimesIcon />
+                  </button>
+                </div>
+              </div>
+            ))}
+        </div>
+      </div>
+      {/* TODO: potentially we can have a button to go to the service */}
+      <div className="panel__content__form">
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__label">
+            Documentation
+          </div>
+          <div className="panel__content__form__section__header__prompt">{`Provides a brief description of the service's functionalities and usage`}</div>
+          <textarea
+            className="panel__content__form__section__textarea service-editor__documentation__input"
+            spellCheck={false}
+            disabled={isReadOnly}
+            value={service.documentation}
+            onChange={changeDocumentation}
+          />
+        </div>
+      </div>
+      <div className="panel__content__form__section">
+        <div className="panel__content__form__section__header__label">
+          Auto Activate Updates
+        </div>
+        <div
+          className={clsx('panel__content__form__section__toggler', {
+            'panel__content__form__section__toggler--disabled': isReadOnly,
+          })}
+          onClick={toggleAutoActivateUpdates}
+        >
+          <button
+            className={clsx('panel__content__form__section__toggler__btn', {
+              'panel__content__form__section__toggler__btn--toggled':
+                service.autoActivateUpdates,
+            })}
+            disabled={isReadOnly}
+            tabIndex={-1}
+          >
+            {service.autoActivateUpdates ? <CheckSquareIcon /> : <SquareIcon />}
+          </button>
+          <div className="panel__content__form__section__toggler__prompt">
+            Specifies if the new generation should be automatically activated;
+            only valid when latest revision is selected upon service
+            registration
+          </div>
+        </div>
+      </div>
+      <div className="panel__content__form__section">
+        <div className="panel__content__form__section__header__label">
+          Owners
+        </div>
+        <div className="panel__content__form__section__header__prompt">
+          {`Specifies who can manage and operate the service (requires minimum ${MINIMUM_SERVICE_OWNERS}
+          owners).`}
+        </div>
+        <div className="panel__content__form__section__list">
+          <div
+            className="panel__content__form__section__list__items"
+            data-testid={
+              LEGEND_STUDIO_TEST_ID.PANEL_CONTENT_FORM_SECTION_LIST_ITEMS
+            }
+          >
+            {owners.map((value, idx) => (
+              <div
+                key={value}
+                className={
+                  showOwnerEditInput === idx
+                    ? 'panel__content__form__section__list__new-item'
+                    : 'panel__content__form__section__list__item'
+                }
+              >
+                {showOwnerEditInput === idx ? (
+                  <>
+                    <input
+                      className="panel__content__form__section__input panel__content__form__section__list__new-item__input"
+                      spellCheck={false}
+                      disabled={isReadOnly}
+                      value={ownerInputValue}
+                      onChange={changeOwnerInputValue}
+                    />
+                    <div className="panel__content__form__section__list__new-item__actions">
+                      <button
+                        className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
+                        disabled={
+                          isReadOnly || owners.includes(ownerInputValue)
+                        }
+                        onClick={updateOwner(idx)}
+                        tabIndex={-1}
+                      >
+                        Save
+                      </button>
+                      <button
+                        className="panel__content__form__section__list__new-item__cancel-btn btn btn--dark"
+                        disabled={isReadOnly}
+                        onClick={hideAddOrEditOwnerInput}
+                        tabIndex={-1}
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <div className="panel__content__form__section__list__item__value">
+                      {value}
+                    </div>
+                    <div className="panel__content__form__section__list__item__actions">
+                      <button
+                        className="panel__content__form__section__list__item__edit-btn"
+                        disabled={isReadOnly}
+                        onClick={showEditOwnerInput(value, idx)}
+                        tabIndex={-1}
+                      >
+                        <PencilIcon />
+                      </button>
+                      <button
+                        className="panel__content__form__section__list__item__remove-btn"
+                        disabled={isReadOnly}
+                        onClick={deleteOwner(idx)}
+                        tabIndex={-1}
+                      >
+                        <TimesIcon />
+                      </button>
+                    </div>
+                  </>
+                )}
+              </div>
+            ))}
+            {showOwnerEditInput === true && (
+              <div className="panel__content__form__section__list__new-item">
+                <input
+                  className="panel__content__form__section__input panel__content__form__section__list__new-item__input"
+                  spellCheck={false}
+                  disabled={isReadOnly}
+                  value={ownerInputValue}
+                  onChange={changeOwnerInputValue}
+                  placeholder="Enter an owner..."
+                />
+                <div className="panel__content__form__section__list__new-item__actions">
+                  <button
+                    className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
+                    disabled={isReadOnly || owners.includes(ownerInputValue)}
+                    onClick={addOwner}
+                    tabIndex={-1}
+                  >
+                    Save
+                  </button>
+                  <button
+                    className="panel__content__form__section__list__new-item__cancel-btn btn btn--dark"
+                    disabled={isReadOnly}
+                    onClick={hideAddOrEditOwnerInput}
+                    tabIndex={-1}
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+          {owners.length < MINIMUM_SERVICE_OWNERS &&
+            showOwnerEditInput !== true && (
+              <div
+                className="service-editor__owner__validation"
+                title={`${MINIMUM_SERVICE_OWNERS} owners required`}
+              >
+                <ErrorIcon />
+                <div className="service-editor__owner__validation-label">
+                  Service requires at least {MINIMUM_SERVICE_OWNERS} owners
+                </div>
+              </div>
+            )}
+          {showOwnerEditInput !== true && (
+            <div className="panel__content__form__section__list__new-item__add">
+              <button
+                className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
+                disabled={isReadOnly}
+                onClick={showAddOwnerInput}
+                tabIndex={-1}
+                title="Add owner"
+              >
+                Add Value
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export const ServiceEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const serviceState = editorStore.getCurrentEditorState(ServiceEditorState);
+  const service = serviceState.service;
+  const isReadOnly = serviceState.isReadOnly;
+  // Tab
+  const selectedTab = serviceState.selectedTab;
+  const changeTab =
+    (tab: SERVICE_TAB): (() => void) =>
+    (): void =>
+      serviceState.setSelectedTab(tab);
+  const canRegisterService = Boolean(
+    editorStore.applicationStore.config.options
+      .TEMPORARY__serviceRegistrationConfig.length,
+  );
+
+  useApplicationNavigationContext(
+    LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SERVICE_EDITOR,
+  );
+
+  return (
+    <div className="service-editor">
+      <div className="panel">
+        <div className="panel__header">
+          <div className="panel__header__title">
+            {isReadOnly && (
+              <div className="uml-element-editor__header__lock">
+                <LockIcon />
+              </div>
+            )}
+            <div className="panel__header__title__label">service</div>
+            <div className="panel__header__title__content">{service.name}</div>
+          </div>
+        </div>
+        <div className="panel__header service-editor__header--with-tabs">
+          <div className="uml-element-editor__tabs">
+            {Object.values(SERVICE_TAB)
+              .filter(
+                (tab) => tab !== SERVICE_TAB.REGISTRATION || canRegisterService,
+              )
+              .map((tab) => (
+                <div
+                  key={tab}
+                  onClick={changeTab(tab)}
+                  className={clsx('service-editor__tab', {
+                    'service-editor__tab--active': tab === selectedTab,
+                  })}
+                >
+                  {prettyCONSTName(tab)}
+                </div>
+              ))}
+          </div>
+        </div>
+        <div className="panel__content service-editor__content">
+          {selectedTab === SERVICE_TAB.GENERAL && <ServiceGeneralEditor />}
+          {selectedTab === SERVICE_TAB.EXECUTION && <ServiceExecutionEditor />}
+          {selectedTab === SERVICE_TAB.REGISTRATION && (
+            <ServiceRegistrationEditor />
+          )}
+          {selectedTab === SERVICE_TAB.TEST && (
+            <ServiceTestableEditor
+              serviceTestableState={serviceState.testableState}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});