javascript/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx at 56dde68440e54e32688932918e1343f6b2de5fb3 · knocklabs/javascript · 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
import { useGuideContext, useStore } from "@knocklabs/react-core";
import { Box, Stack } from "@telegraph/layout";
import { Text } from "@telegraph/typography";
import { ChevronDown, ChevronRight } from "lucide-react";
import * as React from "react";

export const GuideContextDetails = () => {
  const { client } = useGuideContext();
  const [isExpanded, setIsExpanded] = React.useState(false);

  const defaultGroup = useStore(client.store, (state) => state.guideGroups[0]);
  const displayInterval = defaultGroup?.display_interval ?? null;

  return (
    <Stack direction="column" borderTop="px">
      <Stack
        h="5"
        px="2"
        bg="gray-3"
        align="center"
        gap="1"
        style={{ cursor: "pointer" }}
        onClick={() => setIsExpanded((prev) => !prev)}
      >
        <Text as="span" size="0" weight="medium">
          Details
        </Text>
        {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
      </Stack>

      {isExpanded && (
        <Stack direction="column">
          <Stack direction="column" gap="0_5" py="1" px="2" borderTop="px">
            <Text as="span" size="0" weight="medium">
              Throttle
            </Text>
            <Text as="code" size="0">
              {displayInterval === null ? "-" : `Every ${displayInterval}s`}
            </Text>
          </Stack>

          <Stack direction="column" py="1" px="2" borderTop="px">
            <Text as="span" size="0" weight="medium">
              Target params
            </Text>
            <Stack direction="column" gap="0_5" mt="1">
              <Text as="span" size="0" color="gray">
                Tenant
              </Text>
              <Text as="code" size="0">
                {client.targetParams.tenant ? (
                  <Box
                    rounded="2"
                    overflow="auto"
                    backgroundColor="gray-2"
                    border="px"
                    style={{ maxHeight: "200px" }}
                  >
                    <pre style={{ fontSize: "11px", margin: 0 }}>
                      <code>{client.targetParams.tenant}</code>
                    </pre>
                  </Box>
                ) : (
                  <Text as="code" size="0">
                    -
                  </Text>
                )}
              </Text>
            </Stack>

            <Stack direction="column" gap="0_5">
              <Text as="span" size="0" color="gray">
                Data
              </Text>
              {client.targetParams.data ? (
                <Box
                  rounded="2"
                  overflow="auto"
                  backgroundColor="gray-2"
                  border="px"
                  style={{ maxHeight: "200px" }}
                >
                  <pre style={{ fontSize: "11px", margin: 0 }}>
                    <code>
                      {JSON.stringify(client.targetParams.data, null, 2)}
                    </code>
                  </pre>
                </Box>
              ) : (
                <Text as="code" size="0">
                  -
                </Text>
              )}
            </Stack>
          </Stack>
        </Stack>
      )}
    </Stack>
  );
};