ui/src/lib/components/schedule/schedule-form/schedule-input-payload.svelte at 170cb0b1baf6faf88a89916e7ad3f79aaf108a00 · temporalio/ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<script lang="ts">
  import type { Writable } from 'svelte/store';

  import PayloadDecoder, {
    type DecodedPayloadResult,
  } from '$lib/components/payload/payload-decoder.svelte';
  import PayloadInputWithEncoding from '$lib/components/payload-input-with-encoding.svelte';
  import Button from '$lib/holocene/button.svelte';
  import { translate } from '$lib/i18n/translate';
  import {
    isPayloadInputEncodingType,
    type PayloadInputEncoding,
  } from '$lib/models/payload-encoding';
  import type { Payloads } from '$lib/types';
  import { base64ParsePayloadMetadata } from '$lib/utilities/decode-payload';

  interface Props {
    input: string;
    editInput: boolean;
    encoding: Writable<PayloadInputEncoding>;
    messageType: string;
    payloads: Payloads | undefined;
    showEditActions?: boolean;
  }

  let {
    input = $bindable(),
    editInput = $bindable(),
    encoding,
    messageType = $bindable(),
    payloads,
    showEditActions = false,
  }: Props = $props();

  let initialInput = $state('');
  let initialEncoding = $state<PayloadInputEncoding>('json/plain');
  let initialMessageType = $state('');
  let loading = $state(true);

  const setInitialInput = (result: DecodedPayloadResult): void => {
    initialInput = result[0].decodedValue.data;

    input = initialInput;
    let currentEncoding: PayloadInputEncoding = 'json/plain';
    let currentMessageType = '';

    if (payloads) {
      const parsedMetadata = base64ParsePayloadMetadata(payloads);

      currentEncoding =
        (parsedMetadata[0]?.encoding as PayloadInputEncoding) ?? 'json/plain';
      currentMessageType = parsedMetadata[0]?.messageType ?? '';
    }

    if (isPayloadInputEncodingType(currentEncoding)) {
      $encoding = currentEncoding;
      initialEncoding = $encoding;
      if (currentEncoding === 'json/protobuf' && currentMessageType) {
        messageType = currentMessageType;
        initialMessageType = currentMessageType;
      }
    }
    loading = false;
  };

  const handleEdit = () => {
    if (editInput) {
      editInput = false;
      input = initialInput;
      $encoding = initialEncoding;
      messageType = initialMessageType;
    } else {
      editInput = true;
    }
  };
</script>

<div class="flex flex-col gap-1">
  <PayloadDecoder value={payloads} onDecode={setInitialInput}>
    {#snippet children(_decodedValue)}
      <PayloadInputWithEncoding
        bind:input
        {encoding}
        bind:messageType
        bind:loading
        editing={editInput}
        id="schedule-payload-input"
      >
        <div slot="action" class:hidden={!showEditActions}>
          <Button variant="secondary" on:click={handleEdit}>
            {editInput ? translate('common.cancel') : translate('common.edit')}
          </Button>
        </div>
      </PayloadInputWithEncoding>
    {/snippet}
  </PayloadDecoder>
</div>