Improve process ui (#9645)

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

@@ -14,47 +14,16 @@
 -->
 
 <script lang="ts">
-  import { Ref } from '@hcengineering/core'
-  import { IntlString } from '@hcengineering/platform'
-  import { getClient } from '@hcengineering/presentation'
-  import { Trigger, Process } from '@hcengineering/process'
-  import { Label } from '@hcengineering/ui'
+  import { Process } from '@hcengineering/process'
+  import UpdateAttributePresenter from '../presenters/UpdateAttributePresenter.svelte'
 
   export let process: Process
   export let params: Record<string, any>
-
-  const client = getClient()
-
-  $: attributes = getAttributes(params, process)
-
-  function getAttributes (params: Record<string, any>, process: Process): IntlString[] {
-    const res: IntlString[] = []
-    for (const key in params) {
-      if (params[key] !== undefined) {
-        const attr = client.getHierarchy().findAttribute(process.masterTag, key)
-        if (attr?.label !== undefined) {
-          res.push(attr.label)
-        }
-      }
-    }
-    return res
-  }
 </script>
 
-{#if attributes.length > 0}
+{#if Object.keys(params).length > 0}
   :
-  {#each attributes as attr}
-    <div class="title">
-      <Label label={attr} />
-    </div>
+  {#each Object.entries(params) as [key, value]}
+    <UpdateAttributePresenter {process} {key} {value} />
   {/each}
 {/if}
-
-<style lang="scss">
-  .title {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    color: var(--theme-caption-color);
-  }
-</style>

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

@@ -0,0 +1,43 @@
+<!--
+// 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 { parseContext, Process, SelectedContext, SelectedExecutonContext } from '@hcengineering/process'
+  import ui, { Label } from '@hcengineering/ui'
+  import ExecutionContextPresenter from '../attributeEditors/ExecutionContextPresenter.svelte'
+
+  export let process: Process
+  export let params: Record<string, any>
+
+  $: context = getContext(params._id)
+
+  function getContext (value: string | undefined): SelectedExecutonContext | undefined {
+    if (value === undefined) return
+    const context = parseContext(value)
+    if (context !== undefined && isExecutionContext(context)) {
+      return context
+    }
+  }
+
+  function isExecutionContext (context: SelectedContext): context is SelectedExecutonContext {
+    return context.type === 'context'
+  }
+</script>
+
+{#if context === undefined}
+  <Label label={ui.string.NotSelected} />
+{:else}
+  <ExecutionContextPresenter {process} contextValue={context} />
+{/if}

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

@@ -53,12 +53,12 @@
 </script>
 
 {#if trigger}
-  <div class="flex flex-gap-2" use:tooltip={{ label: trigger.label }}>
+  <div class="flex-row-center flex-gap-1" use:tooltip={{ label: trigger.label }}>
     <Icon icon={error ? IconError : trigger.icon} size={'medium'} />
     {#if withLabel}
       <Label label={trigger.label} />
       {#if trigger.presenter}
-        <Component is={trigger.presenter} props={{ value, process, params }} />
+        <Component is={trigger.presenter} props={{ process, params }} />
       {/if}
     {/if}
   </div>