Processes ui improvements (#9589)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

plugins/process-resources/src/components/ProcessAttribute.svelte

@@ -82,7 +82,7 @@
 >
   <Label label={attribute.label} />
 </span>
-<div class="text-input" class:context={contextValue}>
+<div class="text-input">
   {#if contextValue}
     <ContextValue
       {process}
@@ -110,6 +110,7 @@
           width={'100%'}
           justify={'left'}
           type={attribute?.type}
+          showNavigate={false}
           {value}
           {onChange}
           {focus}
@@ -152,11 +153,5 @@
     .button {
       flex-shrink: 0;
     }
-
-    &.context {
-      background: #3575de33;
-      padding-left: 0.75rem;
-      border-color: var(--primary-button-default);
-    }
   }
 </style>

plugins/process-resources/src/components/attributeEditors/ContextValue.svelte

@@ -16,7 +16,7 @@
   import { MasterTag, Tag } from '@hcengineering/card'
   import { AnyAttribute, Class, Doc, Ref } from '@hcengineering/core'
   import { Context, Process, SelectedContext } from '@hcengineering/process'
-  import { eventToHTMLElement, showPopup } from '@hcengineering/ui'
+  import { Button, eventToHTMLElement, showPopup } from '@hcengineering/ui'
   import { AttributeCategory } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import ConfigurePopup from './ConfigurePopup.svelte'
@@ -58,9 +58,22 @@
 </script>
 
 {#if configurable}
-  <button on:click={configure}>
-    <ContextValuePresenter {contextValue} {context} {process} />
-  </button>
+  <Button kind={'ghost'} on:click={configure} width={'100%'} shrink={1} justify={'left'} padding={'0.25rem'}>
+    <svelte:fragment slot="content">
+      <ContextValuePresenter {contextValue} {context} {process} />
+    </svelte:fragment>
+  </Button>
 {:else}
-  <ContextValuePresenter {contextValue} {context} {process} />
+  <div class="container">
+    <ContextValuePresenter {contextValue} {context} {process} />
+  </div>
 {/if}
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0.25rem;
+  }
+</style>

plugins/process-resources/src/components/attributeEditors/ContextValuePresenter.svelte

@@ -21,6 +21,7 @@
   import RelContextPresenter from './RelContextPresenter.svelte'
   import FunctionContextPresenter from './FunctionContextPresenter.svelte'
   import ExecutionContextPresenter from './ExecutionContextPresenter.svelte'
+  import FunctionPresenter from './FunctionPresenter.svelte'
 
   export let process: Process
   export let contextValue: SelectedContext
@@ -28,19 +29,24 @@
 </script>
 
 <div class="container flex-row-center">
-  {#if contextValue.type === 'attribute'}
-    <AttrContextPresenter {contextValue} {context} />
-  {:else if contextValue.type === 'relation'}
-    <RelContextPresenter {contextValue} {context} />
-  {:else if contextValue.type === 'nested'}
-    <NestedContextPresenter {contextValue} {context} />
-  {:else if contextValue.type === 'userRequest'}
-    <Label label={plugin.string.RequestFromUser} />
-  {:else if contextValue.type === 'function'}
-    <FunctionContextPresenter {contextValue} {context} />
-  {:else if contextValue.type === 'context'}
-    <ExecutionContextPresenter {contextValue} {process} />
-  {/if}
+  <div class="internal">
+    {#if contextValue.type === 'attribute'}
+      <AttrContextPresenter {contextValue} {context} />
+    {:else if contextValue.type === 'relation'}
+      <RelContextPresenter {contextValue} {context} />
+    {:else if contextValue.type === 'nested'}
+      <NestedContextPresenter {contextValue} {context} />
+    {:else if contextValue.type === 'userRequest'}
+      <Label label={plugin.string.RequestFromUser} />
+    {:else if contextValue.type === 'function'}
+      <FunctionContextPresenter {contextValue} {context} />
+    {:else if contextValue.type === 'context'}
+      <ExecutionContextPresenter {contextValue} {process} />
+    {/if}
+  </div>
+  {#each contextValue.functions ?? [] as func}
+    <FunctionPresenter value={func} {context} {process} />
+  {/each}
 </div>
 
 <style lang="scss">
@@ -49,5 +55,11 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     color: var(--theme-caption-color);
+    background: #3575de33;
+    border-radius: 0.25rem;
+
+    .internal {
+      padding: 0.125rem 0.25rem;
+    }
   }
 </style>

plugins/process-resources/src/components/attributeEditors/FunctionPresenter.svelte

@@ -0,0 +1,48 @@
+<!--
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public 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 https://www.eclipse.org/legal/epl-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.
+-->
+<script lang="ts">
+  import { getClient } from '@hcengineering/presentation'
+  import { Context, Func, Process } from '@hcengineering/process'
+  import { Component, Label } from '@hcengineering/ui'
+
+  export let value: Func
+  export let process: Process
+  export let context: Context
+
+  const client = getClient()
+  $: func = client.getModel().findObject(value.func)
+</script>
+
+{#if func !== undefined}
+  <div class="container">
+    {#if func.presenter !== undefined}
+      <Component is={func.presenter} props={{ props: value.props, context, process }} />
+    {:else}
+      <Label label={func.label} />
+    {/if}
+  </div>
+{/if}
+
+<style lang="scss">
+  .container {
+    font-size: 0.66rem;
+    line-height: 0.75rem;
+    font-style: italic;
+    padding: 0.25rem 0.125rem;
+    border-radius: 0.25rem;
+    color: var(--theme-content-color);
+    background-color: var(--theme-table-border-color);
+  }
+</style>

plugins/process-resources/src/components/attributeEditors/NestedContextPresenter.svelte

@@ -24,5 +24,16 @@
 </script>
 
 {#if relation !== undefined && attr}
-  <Label label={relation.attribute.label} /> > <Label label={attr.label} />
+  <Label label={relation.attribute.label} />
+  <span class="attr">
+    <Label label={attr.label} />
+  </span>
 {/if}
+
+<style lang="scss">
+  .attr {
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+    background-color: var(--theme-toggle-bg-color);
+  }
+</style>

plugins/process-resources/src/components/attributeEditors/RelContextPresenter.svelte

@@ -26,5 +26,16 @@
 {#if contextValue.key === '_id'}
   {relation.name}
 {:else if relation !== undefined && attr}
-  {relation.name} > <Label label={attr.label} />
+  {relation.name}
+  <span class="attr">
+    <Label label={attr.label} />
+  </span>
 {/if}
+
+<style lang="scss">
+  .attr {
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+    background-color: var(--theme-navpanel-color);
+  }
+</style>

plugins/process-resources/src/components/contextEditors/ProcessContextPresenter.svelte

@@ -19,7 +19,7 @@
   export let context: ProcessContext
 </script>
 
-{context.index} ->
+{context.index}:
 {#if context.name !== undefined && context.name !== ''}
   {context.name}
 {:else}

plugins/process-resources/src/components/contextEditors/ProcessContextRawPresenter.svelte

@@ -26,9 +26,6 @@
   $: _class = hierarchy.findClass(context._class)
 </script>
 
-{#if context.isResult}
-  <Label label={process.string.Result} />:
-{/if}
 {#if _class?.label !== undefined}
   <Label label={_class.label} />
 {/if}

plugins/process-resources/src/components/settings/AddTransitionPopup.svelte

@@ -41,10 +41,13 @@
 
   let fromState: ListItem | undefined
 
-  $: from = fromState?._id as Ref<State>
+  $: from = (fromState?._id as Ref<State>) ?? null
 
   const client = getClient()
-  const triggers = client.getModel().findAllSync(plugin.class.Trigger, { init: false })
+  const withoutFrom =
+    client.getModel().findAllSync(plugin.class.Transition, { from: null, process: process._id })[0] === undefined
+
+  const triggers = client.getModel().findAllSync(plugin.class.Trigger, { init: withoutFrom })
   let trigger: Ref<Trigger> = triggers[0]._id
 
   $: triggerValue = triggers.find((t) => t._id === trigger)
@@ -82,14 +85,18 @@
 >
   <div class="grid">
     <Label label={plugin.string.From} />
-    <Dropdown
-      items={statesItems}
-      bind:selected={fromState}
-      placeholder={plugin.string.From}
-      justify={'left'}
-      width={'100%'}
-      kind={'no-border'}
-    />
+    {#if !withoutFrom}
+      <Dropdown
+        items={statesItems}
+        bind:selected={fromState}
+        placeholder={plugin.string.From}
+        justify={'left'}
+        width={'100%'}
+        kind={'no-border'}
+      />
+    {:else}
+      <div>⦳</div>
+    {/if}
     <Label label={plugin.string.To} />
     <Dropdown
       items={statesItems}

plugins/process-resources/src/components/settings/ContextEditor.svelte

@@ -65,7 +65,7 @@
     <Grid rowGap={1}>
       {#each Object.entries(process.context) as val}
         <div class="context flex-center cursor-pointer" on:click={() => open(val[1])}>
-          {val[1].index} ->
+          {val[1].index}:
           <ProcessContextRawPresenter context={val[1]} />
         </div>
         <EditBox

plugins/process-resources/src/components/settings/ContextFooter.svelte

@@ -17,6 +17,8 @@
   import { Doc } from '@hcengineering/core'
   import { Process, Step } from '@hcengineering/process'
   import ProcessContextPresenter from '../contextEditors/ProcessContextPresenter.svelte'
+  import { Label } from '@hcengineering/ui'
+  import processPlugin from '../../plugin'
 
   export let process: Process
   export let step: Step<Doc>
@@ -26,6 +28,9 @@
   $: currentResultContext = step.result ? process.context[step.result._id] : undefined
 </script>
 
+{#if currentContext || currentResultContext}
+  <Label label={processPlugin.string.Result} />
+{/if}
 {#if currentContext}
   <div class="container">
     <ProcessContextPresenter context={currentContext} />
@@ -40,11 +45,10 @@
 
 <style lang="scss">
   .container {
-    padding: 0.5rem 1rem;
+    padding: 0.25rem 0.5rem;
     background: #3575de33;
-    padding-left: 0.75rem;
     border: 1px solid var(--primary-button-default);
-    border-radius: 0.375rem;
+    border-radius: 0.25rem;
     display: flex;
     align-items: center;
     color: var(--theme-caption-color);