@finos/legend-application-studio 28.12.1 → 28.13.0

package/src/components/editor/editor-group/{FunctionEditor.tsx → function-activator/FunctionEditor.tsx}

@@ -19,12 +19,12 @@ import { observer } from 'mobx-react-lite';
 import {
   FunctionEditorState,
   FUNCTION_EDITOR_TAB,
-} from '../../../stores/editor/editor-state/element-editor-state/FunctionEditorState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/FunctionEditorState.js';
 import {
   CORE_DND_TYPE,
   type UMLEditorElementDropTarget,
   type ElementDragSource,
-} from '../../../stores/editor/utils/DnDUtils.js';
+} from '../../../../stores/editor/utils/DnDUtils.js';
 import {
   assertErrorThrown,
   assertTrue,
@@ -63,18 +63,23 @@ import {
   PlayIcon,
   PanelLoadingIndicator,
   PencilIcon,
+  RocketIcon,
+  ModalFooterButton,
+  BaseCard,
+  Snowflake_BrandIcon,
+  InputWithInlineValidation,
 } from '@finos/legend-art';
-import { LEGEND_STUDIO_TEST_ID } from '../../../__lib__/LegendStudioTesting.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
 import {
   StereotypeDragPreviewLayer,
   StereotypeSelector,
-} from './uml-editor/StereotypeSelector.js';
+} from '../uml-editor/StereotypeSelector.js';
 import {
   TaggedValueDragPreviewLayer,
   TaggedValueEditor,
-} from './uml-editor/TaggedValueEditor.js';
+} from '../uml-editor/TaggedValueEditor.js';
 import { flowResult } from 'mobx';
-import { useEditorStore } from '../EditorStoreProvider.js';
+import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   type ConcreteFunctionDefinition,
   type StereotypeReference,
@@ -101,6 +106,8 @@ import {
   RawExecutionResult,
   extractExecutionResultValues,
   RawLambda,
+  DatabaseType,
+  RelationalDatabaseConnection,
 } from '@finos/legend-graph';
 import {
   type ApplicationStore,
@@ -115,7 +122,7 @@ import {
   type PackageableElementOption,
   buildElementOption,
 } from '@finos/legend-lego/graph-editor';
-import { getElementIcon } from '../../ElementIconUtils.js';
+import { getElementIcon } from '../../../ElementIconUtils.js';
 import {
   function_setReturnType,
   function_setReturnMultiplicity,
@@ -126,13 +133,13 @@ import {
   annotatedElement_deleteStereotype,
   annotatedElement_deleteTaggedValue,
   function_swapParameters,
-} from '../../../stores/graph-modifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/graph-modifier/DomainGraphModifierHelper.js';
 import {
   rawVariableExpression_setMultiplicity,
   rawVariableExpression_setName,
   rawVariableExpression_setType,
-} from '../../../stores/graph-modifier/RawValueSpecificationGraphModifierHelper.js';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../__lib__/LegendStudioApplicationNavigationContext.js';
+} from '../../../../stores/graph-modifier/RawValueSpecificationGraphModifierHelper.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
 import {
   type QueryBuilderState,
   ExecutionPlanViewer,
@@ -140,15 +147,16 @@ import {
   LambdaEditor,
   LambdaParameterValuesEditor,
 } from '@finos/legend-query-builder';
-import type { EditorStore } from '../../../stores/editor/EditorStore.js';
-import { graph_renameElement } from '../../../stores/graph-modifier/GraphModifierHelper.js';
-import { ProtocolValueBuilder } from './ProtocolValueBuilder.js';
-import type { ProtocolValueBuilderState } from '../../../stores/editor/editor-state/element-editor-state/ProtocolValueBuilderState.js';
+import type { EditorStore } from '../../../../stores/editor/EditorStore.js';
+import { graph_renameElement } from '../../../../stores/graph-modifier/GraphModifierHelper.js';
+import { ProtocolValueBuilder } from '../ProtocolValueBuilder.js';
+import type { ProtocolValueBuilderState } from '../../../../stores/editor/editor-state/element-editor-state/ProtocolValueBuilderState.js';
 import {
   CODE_EDITOR_LANGUAGE,
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
-import { PanelGroupItemExperimentalBadge } from '../panel-group/PanelGroup.js';
+import { PanelGroupItemExperimentalBadge } from '../../panel-group/PanelGroup.js';
+import type { FunctionActivatorPromoteState } from '../../../../stores/editor/editor-state/element-editor-state/FunctionActivatorPromoteState.js';
 
 enum FUNCTION_PARAMETER_TYPE {
   CLASS = 'CLASS',
@@ -156,6 +164,14 @@ enum FUNCTION_PARAMETER_TYPE {
   PRIMITIVE = 'PRIMITIVE',
 }
 
+export enum FUNCTION_PROMOTE_TYPE {
+  SNOWFLAKE_NATIVE_APP = 'Snowflake Native App',
+  REST_SERVICE = 'REST Service',
+  SERVICE_JAR = 'Service JAR',
+  REFINER = 'Refiner',
+  BIG_QUERY_NATIVE_APP = 'BigQuery Native App',
+}
+
 const getFunctionParameterType = (type: Type): FUNCTION_PARAMETER_TYPE => {
   if (type instanceof PrimitiveType) {
     return FUNCTION_PARAMETER_TYPE.PRIMITIVE;
@@ -661,6 +677,199 @@ const ReturnTypeEditor = observer(
   },
 );
 
+const FunctionPromoteEditor = observer(
+  (props: {
+    functionElement: ConcreteFunctionDefinition;
+    activatorPromoteState: FunctionActivatorPromoteState;
+  }) => {
+    const { functionElement, activatorPromoteState } = props;
+    const applicationStore = useApplicationStore();
+    const elementAlreadyExistsMessage =
+      activatorPromoteState.functionEditorState.editorStore.graphManagerState.graph.allElements
+        .map((s) => s.path)
+        .includes(activatorPromoteState.activatorPath)
+        ? 'Element with same path already exists'
+        : undefined;
+    let validationMessage = '';
+    const closeModal = (): void => {
+      activatorPromoteState.closeFunctionPromoteModal();
+      activatorPromoteState.setPromoteType(undefined);
+    };
+    const promoteFunction = (): void => {
+      flowResult(activatorPromoteState.promote(functionElement))
+        .then(() => {
+          activatorPromoteState.closeFunctionPromoteModal();
+        })
+        .catch(applicationStore.alertUnhandledError);
+    };
+    const onTargetPathChange: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      activatorPromoteState.updateActivatorPath(event.target.value);
+    };
+    const validateFunctionActivator = (type: string): boolean => {
+      switch (type) {
+        case FUNCTION_PROMOTE_TYPE.SNOWFLAKE_NATIVE_APP: {
+          const availableConnections =
+            activatorPromoteState.functionEditorState.editorStore.graphManagerState.usableConnections.filter(
+              (connection) =>
+                connection.connectionValue instanceof
+                  RelationalDatabaseConnection &&
+                connection.connectionValue.type === DatabaseType.Snowflake,
+            );
+          if (availableConnections.length > 0) {
+            return true;
+          } else {
+            validationMessage =
+              'There is no available connection of type Snowflake';
+          }
+          return false;
+        }
+        default:
+          return true;
+      }
+    };
+    const renderFunctionPromoteTypes = (type: string): React.ReactNode => {
+      switch (type) {
+        case FUNCTION_PROMOTE_TYPE.SNOWFLAKE_NATIVE_APP:
+          return (
+            <BaseCard
+              key={FUNCTION_PROMOTE_TYPE.SNOWFLAKE_NATIVE_APP}
+              cardMedia={
+                <Snowflake_BrandIcon className="function-promote-editor__type-icon" />
+              }
+              cardName={type}
+              cardContent="Deploy the function as a UDTF(user-defined table function) in snowflake"
+              isActive={
+                activatorPromoteState.promoteType ===
+                FUNCTION_PROMOTE_TYPE.SNOWFLAKE_NATIVE_APP
+              }
+              onClick={() => {
+                activatorPromoteState.setPromoteType(type);
+              }}
+            />
+          );
+        case FUNCTION_PROMOTE_TYPE.REST_SERVICE:
+          return (
+            <BaseCard
+              key={FUNCTION_PROMOTE_TYPE.REST_SERVICE}
+              cardMedia={<div className="coming-soon-label">Coming Soon</div>}
+              cardName={type}
+              cardContent="Create a HostedService that will be deployed to a server environment and executed with a pattern"
+              isDisable={true}
+              isActive={
+                activatorPromoteState.promoteType ===
+                FUNCTION_PROMOTE_TYPE.REST_SERVICE
+              }
+            />
+          );
+        case FUNCTION_PROMOTE_TYPE.SERVICE_JAR:
+          return (
+            <BaseCard
+              key={FUNCTION_PROMOTE_TYPE.SERVICE_JAR}
+              cardMedia={<div className="coming-soon-label">Coming Soon</div>}
+              cardName={type}
+              cardContent="Deploy the function in the definition of a Store persistence"
+              isDisable={true}
+              isActive={
+                activatorPromoteState.promoteType ===
+                FUNCTION_PROMOTE_TYPE.SERVICE_JAR
+              }
+            />
+          );
+        case FUNCTION_PROMOTE_TYPE.REFINER:
+          return (
+            <BaseCard
+              key={FUNCTION_PROMOTE_TYPE.REFINER}
+              cardMedia={<div className="coming-soon-label">Coming Soon</div>}
+              cardName={type}
+              cardContent="Use the service in a refiner context"
+              isDisable={true}
+              isActive={
+                activatorPromoteState.promoteType ===
+                FUNCTION_PROMOTE_TYPE.REFINER
+              }
+            />
+          );
+        case FUNCTION_PROMOTE_TYPE.BIG_QUERY_NATIVE_APP:
+          return (
+            <BaseCard
+              key={FUNCTION_PROMOTE_TYPE.BIG_QUERY_NATIVE_APP}
+              cardMedia={<div className="coming-soon-label">Coming Soon</div>}
+              cardName={type}
+              cardContent="Deploy the function as a UDTF(user-defined table function) in BigQuery"
+              isDisable={true}
+              isActive={
+                activatorPromoteState.promoteType ===
+                FUNCTION_PROMOTE_TYPE.BIG_QUERY_NATIVE_APP
+              }
+            />
+          );
+        default:
+          return <></>;
+      }
+    };
+
+    return (
+      <Dialog
+        open={activatorPromoteState.isPromotingFunction}
+        onClose={closeModal}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <Modal darkMode={true} className="function-promote-editor">
+          <ModalBody className="function-promote-editor__content">
+            <div className="function-promote-editor__content__prompt">
+              Select any one of the following activator type to continue
+            </div>
+            <div className="function-promote-editor__content__activator-types">
+              {Object.values(FUNCTION_PROMOTE_TYPE).map((type) =>
+                renderFunctionPromoteTypes(type),
+              )}
+            </div>
+            <div className="function-promote-editor__content__prompt">
+              Target Path
+            </div>
+            <InputWithInlineValidation
+              className="panel__content__form__section__input"
+              spellCheck={false}
+              onChange={onTargetPathChange}
+              value={activatorPromoteState.activatorPath}
+              error={elementAlreadyExistsMessage}
+              showEditableIcon={true}
+            />
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              className="function-promote-editor__action-btn"
+              onClick={closeModal}
+              title="Close"
+            >
+              Cancel
+            </ModalFooterButton>
+            <ModalFooterButton
+              className=" function-promote-editor__action-btn function-promote-editor__action-btn--primitive"
+              disabled={
+                !activatorPromoteState.promoteType ||
+                !validateFunctionActivator(activatorPromoteState.promoteType)
+              }
+              title={
+                activatorPromoteState.promoteType &&
+                validateFunctionActivator(activatorPromoteState.promoteType)
+                  ? ''
+                  : validationMessage
+              }
+              onClick={promoteFunction}
+            >
+              Promote
+            </ModalFooterButton>
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
 const FunctionDefinitionEditor = observer(
   (props: {
     functionEditorState: FunctionEditorState;
@@ -1159,8 +1368,15 @@ export const FunctionEditor = observer(() => {
       }
     });
 
+  const openFunctionPromoteModal = (): void => {
+    functionEditorState.activatorPromoteState.showFunctionPromoteModal();
+  };
+
   return (
-    <div className="function-editor uml-editor uml-editor--dark">
+    <div
+      data-testid={LEGEND_STUDIO_TEST_ID.FUNCTION_EDITOR}
+      className="function-editor uml-editor uml-editor--dark"
+    >
       <Panel>
         <div className="panel__header">
           <div className="panel__header__title">
@@ -1262,6 +1478,17 @@ export const FunctionEditor = observer(() => {
                 </>
               )}
             </div>
+            <div className="btn__dropdown-combo btn__dropdown-combo--primary">
+              <button
+                className="btn__dropdown-combo__label"
+                onClick={openFunctionPromoteModal}
+                title="Promote function"
+                tabIndex={-1}
+              >
+                <RocketIcon className="btn__dropdown-combo__label__icon" />
+                <div className="btn__dropdown-combo__label__title">Promote</div>
+              </button>
+            </div>
             {editorStore.applicationStore.config.options
               .TEMPORARY__enableFunctionActivatorSupport && (
               <>
@@ -1472,6 +1699,12 @@ export const FunctionEditor = observer(() => {
             />
           )}
         </PanelContent>
+        {functionEditorState.activatorPromoteState.isPromotingFunction && (
+          <FunctionPromoteEditor
+            functionElement={functionElement}
+            activatorPromoteState={functionEditorState.activatorPromoteState}
+          />
+        )}
       </Panel>
     </div>
   );

package/src/components/editor/editor-group/{INTERNAL__UnknownFunctionActivatorEdtior.tsx → function-activator/INTERNAL__UnknownFunctionActivatorEdtior.tsx}

@@ -15,8 +15,8 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { useEditorStore } from '../EditorStoreProvider.js';
-import { INTERNAL__UnknownFunctionActivatorEdtiorState } from '../../../stores/editor/editor-state/element-editor-state/INTERNAL__UnknownFunctionActivatorEditorState.js';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import { INTERNAL__UnknownFunctionActivatorEdtiorState } from '../../../../stores/editor/editor-state/element-editor-state/function-activator/INTERNAL__UnknownFunctionActivatorEditorState.js';
 import {
   ArrowRightIcon,
   BlankPanelContent,
@@ -26,7 +26,7 @@ import {
 } from '@finos/legend-art';
 import { useApplicationStore } from '@finos/legend-application';
 import { flowResult } from 'mobx';
-import { ProtocolValueBuilder } from './ProtocolValueBuilder.js';
+import { ProtocolValueBuilder } from '../ProtocolValueBuilder.js';
 import {
   extractAnnotatedElementDocumentation,
   generateFunctionPrettyName,

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

@@ -0,0 +1,260 @@
+/**
+ * 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 {
+  Panel,
+  PanelHeader,
+  PanelContent,
+  PanelForm,
+  PanelFormTextField,
+  PURE_FunctionIcon,
+  LongArrowRightIcon,
+  PanelLoadingIndicator,
+  PURE_ConnectionIcon,
+  CustomSelectorInput,
+  createFilter,
+  type SelectComponent,
+  QuestionCircleIcon,
+} from '@finos/legend-art';
+import {
+  type PackageableConnection,
+  generateFunctionPrettyName,
+  RelationalDatabaseConnection,
+  DatabaseType,
+} from '@finos/legend-graph';
+import { observer } from 'mobx-react-lite';
+import { useApplicationStore } from '@finos/legend-application';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import { SnowflakeAppFunctionActivatorEdtiorState } from '../../../../stores/editor/editor-state/element-editor-state/function-activator/SnowflakeAppFunctionActivatorEditorState.js';
+import { flowResult } from 'mobx';
+import { useRef } from 'react';
+import {
+  buildRelationalDatabaseConnectionOption,
+  type RelationalDatabaseConnectionOption,
+} from '../connection-editor/RelationalDatabaseConnectionEditor.js';
+
+export const SnowflakeAppFunctionActivatorEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const applicationStore = useApplicationStore();
+  const editorState = editorStore.tabManagerState.getCurrentEditorState(
+    SnowflakeAppFunctionActivatorEdtiorState,
+  );
+  const activator = editorState.activator;
+  const connectionSelectorRef = useRef<SelectComponent>(null);
+  const connectionFilterOption = createFilter({
+    ignoreCase: true,
+    ignoreAccents: false,
+    stringify: (option: RelationalDatabaseConnectionOption): string =>
+      option.value.path,
+  });
+  const connectionOptions = editorStore.graphManagerState.usableConnections
+    .filter(
+      (connection) =>
+        connection.connectionValue instanceof RelationalDatabaseConnection &&
+        connection.connectionValue.type === DatabaseType.Snowflake,
+    )
+    .map(buildRelationalDatabaseConnectionOption);
+
+  const initializeActivationConnection = (
+    val: PackageableConnection | undefined,
+  ): PackageableConnection | undefined => {
+    if (val) {
+      editorState.updateConnection(val);
+    }
+    return !val
+      ? undefined
+      : activator.activationConfiguration.activationConnection
+          ?.packageableConnection.value;
+  };
+
+  const activationConnection = activator.activationConfiguration
+    .activationConnection
+    ? activator.activationConfiguration.activationConnection
+        .packageableConnection.value
+    : initializeActivationConnection(connectionOptions.at(0)?.value);
+
+  const changeConnection = (val: RelationalDatabaseConnectionOption): void => {
+    if (val.value === activationConnection) {
+      return;
+    }
+    editorState.updateConnection(val.value);
+  };
+  const changeDescription: React.ChangeEventHandler<HTMLTextAreaElement> = (
+    event,
+  ) => {
+    editorState.updateAppDescription(event.target.value);
+  };
+  const visitFunction = (): void =>
+    editorState.editorStore.graphEditorMode.openElement(
+      activator.function.value,
+    );
+  const visitConnection = (): void => {
+    if (activationConnection) {
+      editorState.editorStore.graphEditorMode.openElement(activationConnection);
+    }
+  };
+  const validate = (): void => {
+    flowResult(editorState.validate()).catch(
+      applicationStore.alertUnhandledError,
+    );
+  };
+  const deploy = (): void => {
+    flowResult(editorState.deploy()).catch(
+      applicationStore.alertUnhandledError,
+    );
+  };
+
+  return (
+    <div className="snowflake-app-function-activator-editor">
+      <Panel>
+        <PanelHeader title="Snowflake Application" />
+        <PanelLoadingIndicator
+          isLoading={Boolean(
+            editorState.validateState.isInProgress ||
+              editorState.deployState.isInProgress,
+          )}
+        />
+        <PanelContent>
+          <div className="snowflake-app-function-activator-editor__header">
+            <div className="snowflake-app-function-activator-editor__header__label">
+              Snowflake Activator Metadata
+            </div>
+            <div className="snowflake-app-function-activator-editor__header__actions">
+              <button
+                className="snowflake-app-function-activator-editor__header__actions__action"
+                onClick={validate}
+                disabled={editorState.validateState.isInProgress}
+                tabIndex={-1}
+                title="Click Validate to verify your activator before deployment"
+              >
+                Validate
+                <QuestionCircleIcon
+                  title="Click Validate to verify your activator before deployment"
+                  className={
+                    'snowflake-app-function-activator-editor__header__actions__action__icon'
+                  }
+                />
+              </button>
+              <button
+                className="snowflake-app-function-activator-editor__header__actions__action snowflake-app-function-activator-editor__header__actions__action--primary"
+                onClick={deploy}
+                disabled={editorState.deployState.isInProgress}
+                title="Publish to sandbox"
+                tabIndex={-1}
+              >
+                Deploy
+              </button>
+            </div>
+          </div>
+          <PanelForm>
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                Function
+              </div>
+            </div>
+            <div className="snowflake-app-function-activator-editor__configuration__items">
+              <div className="snowflake-app-function-activator-editor__configuration__item">
+                <div className="btn--sm snowflake-app-function-activator-editor__configuration__item__label">
+                  <PURE_FunctionIcon />
+                </div>
+                <input
+                  className="panel__content__form__section__input"
+                  spellCheck={false}
+                  disabled={true}
+                  value={generateFunctionPrettyName(activator.function.value, {
+                    fullPath: true,
+                    spacing: false,
+                  })}
+                />
+                <button
+                  className="btn--dark btn--sm snowflake-app-function-activator-editor__configuration__item__btn"
+                  onClick={visitFunction}
+                  tabIndex={-1}
+                  title="See Function"
+                >
+                  <LongArrowRightIcon />
+                </button>
+              </div>
+            </div>
+          </PanelForm>
+          <PanelForm>
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                Connection
+              </div>
+            </div>
+            <div className="snowflake-app-function-activator-editor__configuration__items">
+              <div className="snowflake-app-function-activator-editor__configuration__item">
+                <div className="btn--sm snowflake-app-function-activator-editor__configuration__item__label">
+                  <PURE_ConnectionIcon />
+                </div>
+                <CustomSelectorInput
+                  ref={connectionSelectorRef}
+                  className="snowflake-app-function-activator-editor__config__connection-selector__input"
+                  options={connectionOptions}
+                  onChange={changeConnection}
+                  value={
+                    activationConnection
+                      ? buildRelationalDatabaseConnectionOption(
+                          activationConnection,
+                        )
+                      : undefined
+                  }
+                  darkMode={true}
+                  placeholder="Choose a connection"
+                  filterOption={connectionFilterOption}
+                />
+                <button
+                  className="btn--dark btn--sm snowflake-app-function-activator-editor__configuration__item__btn"
+                  onClick={visitConnection}
+                  disabled={!activationConnection}
+                  tabIndex={-1}
+                  title="See Connection"
+                >
+                  <LongArrowRightIcon />
+                </button>
+              </div>
+            </div>
+          </PanelForm>
+          <PanelForm>
+            <PanelFormTextField
+              value={activator.applicationName}
+              name="Activator Identifer"
+              placeholder="Specify the name of the UDTF for this activator..."
+              update={(value: string | undefined): void =>
+                editorState.updateApplicationName(value ?? '')
+              }
+            />
+          </PanelForm>
+          <PanelForm>
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                Description
+              </div>
+              <div className="panel__content__form__section__header__prompt">{`Provide a brief description of Snowflake App`}</div>
+              <textarea
+                className="panel__content__form__section__textarea service-editor__documentation__input"
+                spellCheck={false}
+                value={activator.description}
+                onChange={changeDescription}
+              />
+            </div>
+          </PanelForm>
+        </PanelContent>
+      </Panel>
+    </div>
+  );
+});

package/src/components/editor/editor-group/service-editor/ServiceEditor.tsx

@@ -337,7 +337,7 @@ const ServiceGeneralEditor = observer(() => {
           <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>
+          <div className="panel__content__form__section__header__prompt">{`Provide a brief description of the service's functionalities and usage`}</div>
           <textarea
             className="panel__content__form__section__textarea service-editor__documentation__input"
             spellCheck={false}