ui/src/lib/components/data-encoder-status.svelte at c4ccaf18b6fbbdaaba71a09dc7d5794f7e25e72c · 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
<script lang="ts">
  import IconButton from '$lib/holocene/icon-button.svelte';
  import Tooltip from '$lib/holocene/tooltip.svelte';
  import { translate } from '$lib/i18n/translate';
  import { dataEncoder } from '$lib/stores/data-encoder';

  import { viewDataEncoderSettings } from './data-encoder-settings.svelte';

  const onIconClick = () => {
    $viewDataEncoderSettings = !$viewDataEncoderSettings;
    if ($viewDataEncoderSettings) {
      document.getElementById('content-wrapper')?.scrollTo(0, 0);
    }
  };

  const variant = $derived<'primary' | 'ghost'>(
    $viewDataEncoderSettings ? 'primary' : 'ghost',
  );
</script>

<div class="mx-1 flex items-center">
  {#if $dataEncoder?.endpoint}
    {#if $dataEncoder?.hasNotRequested}
      <Tooltip
        bottomRight
        text={translate('data-encoder.codec-server-configured')}
      >
        <IconButton
          {variant}
          label={translate('data-encoder.codec-server-configured')}
          class="relative flex items-center"
          data-testid="data-encoder-status-configured"
          icon="transcoder-on"
          on:click={onIconClick}
        />
      </Tooltip>
    {:else if $dataEncoder.hasError}
      <Tooltip bottomRight text={translate('data-encoder.codec-server-error')}>
        <IconButton
          {variant}
          label={translate('data-encoder.codec-server-error')}
          class="relative flex items-center"
          data-testid="data-encoder-status-error"
          icon="transcoder-error"
          on:click={onIconClick}
        />
      </Tooltip>
    {:else if $dataEncoder.hasSuccess}
      <Tooltip
        bottomRight
        text={translate('data-encoder.codec-server-success')}
      >
        <IconButton
          {variant}
          label={translate('data-encoder.codec-server-success')}
          class="relative flex items-center"
          data-testid="data-encoder-status-success"
          icon="transcoder-on"
          on:click={onIconClick}
        />
      </Tooltip>
    {/if}
  {:else}
    <Tooltip
      bottomRight
      text={translate('data-encoder.configure-codec-server')}
    >
      <IconButton
        {variant}
        label={translate('data-encoder.configure-codec-server')}
        class="relative flex items-center"
        data-testid="data-encoder-status"
        icon="transcoder-off"
        on:click={onIconClick}
      />
    </Tooltip>
  {/if}
</div>