rill/web-admin/src/features/embeds/EmbedHeader.svelte at e83e8909c8f309bfbc7a244e3098abf52976fd85 · rilldata/rill · 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
98
99
100
101
<script lang="ts">
  import { isErrorStoreEmpty } from "@rilldata/web-admin/components/errors/error-store";
  import BreadcrumbItem from "@rilldata/web-common/components/navigation/breadcrumbs/BreadcrumbItem.svelte";
  import TwoTieredBreadcrumbItem from "@rilldata/web-common/components/navigation/breadcrumbs/TwoTieredBreadcrumbItem.svelte";
  import { useValidDashboards } from "@rilldata/web-common/features/dashboards/selectors";
  import { featureFlags } from "@rilldata/web-common/features/feature-flags";
  import LastRefreshedDate from "@rilldata/web-admin/features/dashboards/listing/LastRefreshedDate.svelte";
  import ChatToggle from "@rilldata/web-common/features/chat/layouts/sidebar/ChatToggle.svelte";
  import {
    dashboardChatActions,
    dashboardChatOpen,
  } from "@rilldata/web-common/features/chat/layouts/sidebar/sidebar-store";
  import type {
    V1Resource,
    V1ResourceName,
  } from "@rilldata/web-common/runtime-client";
  import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
  import { m } from "@rilldata/web-common/lib/i18n/gen/messages";

  export let activeResource: V1ResourceName;
  export let navigationEnabled: boolean = true;

  const runtimeClient = useRuntimeClient();
  const { twoTieredNavigation, dashboardChat } = featureFlags;

  $: onProjectPage = !activeResource;
  $: showDashboardChat = $dashboardChat && !onProjectPage;

  $: shouldRender = navigationEnabled || showDashboardChat;

  // Dashboard breadcrumb
  $: dashboardsQuery = useValidDashboards(runtimeClient);
  $: ({ data: dashboards } = $dashboardsQuery);
  let currentResource: V1Resource;
  $: currentResource = dashboards?.find(
    (listing) => listing.meta.name.name === activeResource?.name,
  );
  $: currentResourceName = currentResource?.meta?.name?.name;

  $: breadcrumbOptions = {
    options: dashboards?.reduce((map, { meta, explore, canvas }) => {
      const name = meta.name.name;
      const isExplore = !!explore;
      return map.set(name.toLowerCase(), {
        label:
          (isExplore
            ? explore?.state?.validSpec?.displayName
            : canvas?.state?.validSpec?.displayName) || name,
        href: `/-/embed/${isExplore ? "explore" : "canvas"}/${name}`,
        preloadData: false,
      });
    }, new Map()),
  };
</script>

{#if $isErrorStoreEmpty && shouldRender}
  <div class="flex items-center w-full">
    {#if navigationEnabled}
      <nav class="flex-1 min-w-0">
        <ol class="flex items-center pl-4">
          {#if !onProjectPage}
            <div class="flex gap-x-2">
              <a class="text-fg-muted hover:text-fg-secondary" href="/-/embed">
                {m.embed_home()}
              </a>
              <span class="text-fg-muted">/</span>
            </div>
          {/if}

          {#if currentResource}
            {#if $twoTieredNavigation}
              <TwoTieredBreadcrumbItem
                pathOptions={breadcrumbOptions}
                current={currentResourceName}
                isCurrentPage
              />
            {:else}
              <BreadcrumbItem
                pathOptions={breadcrumbOptions}
                current={currentResourceName}
                isCurrentPage
                isEmbedded
              />
            {/if}
          {/if}
        </ol>
      </nav>
    {:else}
      <div class="flex-1"></div>
    {/if}

    {#if showDashboardChat}
      <div class="flex gap-x-4 items-center">
        <LastRefreshedDate dashboard={activeResource?.name} />
        <ChatToggle open={dashboardChatOpen} actions={dashboardChatActions} />
      </div>
    {/if}
  </div>
{:else}
  <div></div>
{/if}