Sable/src/app/features/settings/developer-tools/ExperimentsPanel.tsx at b0a809105f0bfcdd88e59d0bfab9252e48055733 · SableClient/Sable · 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
102
import { useMemo } from 'react';
import { Box, Text, color } from 'folds';
import { useMatrixClient } from '$hooks/useMatrixClient';
import { useClientConfig, selectExperimentVariant } from '$hooks/useClientConfig';
import { SequenceCard } from '$components/sequence-card';
import { SettingTile } from '$components/setting-tile';
import { SequenceCardStyle } from '$features/settings/styles.css';

export function ExperimentsPanel() {
  const mx = useMatrixClient();
  const config = useClientConfig();
  const userId = mx.getUserId() ?? undefined;

  const experiments = useMemo(() => {
    if (!config.experiments) return [];
    return Object.entries(config.experiments).map(([key, experimentConfig]) => ({
      key,
      config: experimentConfig,
      selection: selectExperimentVariant(key, experimentConfig, userId),
    }));
  }, [config.experiments, userId]);

  if (experiments.length === 0) {
    return (
      <Box direction="Column" gap="100">
        <Text size="L400">Features & Experiments</Text>
        <Text size="T200" style={{ color: color.Secondary.Main }}>
          No experiments configured
        </Text>
      </Box>
    );
  }

  return (
    <Box direction="Column" gap="100">
      <Text size="L400">Features & Experiments</Text>
      <SequenceCard
        className={SequenceCardStyle}
        variant="SurfaceVariant"
        direction="Column"
        gap="400"
      >
        {experiments.map(({ key, config: experimentConfig, selection }) => (
          <SettingTile key={key} focusId={`experiment-${key}`} title={key}>
            <Box direction="Column" gap="200">
              <Box direction="Row" gap="300">
                <Text size="T200">
                  <strong>Enabled:</strong>
                </Text>
                <Text
                  size="T200"
                  style={{
                    color: selection.enabled ? color.Success.Main : color.Secondary.Main,
                  }}
                >
                  {selection.enabled ? 'Yes' : 'No'}
                </Text>
              </Box>
              {selection.enabled && (
                <>
                  <Box direction="Row" gap="300">
                    <Text size="T200">
                      <strong>Rollout:</strong>
                    </Text>
                    <Text size="T200">{selection.rolloutPercentage}%</Text>
                  </Box>
                  <Box direction="Row" gap="300">
                    <Text size="T200">
                      <strong>Your Variant:</strong>
                    </Text>
                    <Text
                      size="T200"
                      style={{
                        color: selection.inExperiment ? color.Success.Main : color.Secondary.Main,
                      }}
                    >
                      {selection.variant}
                      {selection.inExperiment && ' (in experiment)'}
                      {!selection.inExperiment && ' (control)'}
                    </Text>
                  </Box>
                  {experimentConfig.variants && experimentConfig.variants.length > 0 && (
                    <Box direction="Row" gap="300">
                      <Text size="T200">
                        <strong>Treatment Variants:</strong>
                      </Text>
                      <Text size="T200">
                        {experimentConfig.variants
                          .filter((v) => v !== experimentConfig.controlVariant)
                          .join(', ')}
                      </Text>
                    </Box>
                  )}
                </>
              )}
            </Box>
          </SettingTile>
        ))}
      </SequenceCard>
    </Box>
  );
}