odd-box 0.1.10

a dead simple reverse proxy server and web server
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

import Button from "@/components/button/button";
import Input from "@/components/input/input";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/sheet/sheet";
import { KvP } from "@/generated-api";
import SettingsSection from "@/pages/settings/settings-section";

export const EnvVarsSheet = ({
  show,
  value,
  originalValue,
  name,
  onClose,
  valueChanged,
  onRemoveKey,
  onNewKey,
}: {
  name: string;
  valueChanged: (value: string) => void;
  onClose: () => void;
  show: boolean;
  value: string;
  originalValue: string | undefined;
  onRemoveKey?: (keyName: string) => void;
  onNewKey?: (newKey: KvP, originalName: string | undefined) => void;
}) => {
  return (
    <Sheet open={show} onOpenChange={onClose}>
      <SheetContent className="bg-[#242424] border-l-[#ffffff10] w-full">
        <SheetHeader className="text-left">
          <SheetTitle className="text-white">
            {name !== ""
              ? "Edit environment variable"
              : "New environment variable"}
          </SheetTitle>
          <SheetDescription>
            {name !== ""
              ? `Making changes to '${name}'`
              : "Adding a new environment variable"}
          </SheetDescription>
        </SheetHeader>

        <SettingsSection marginTop="10px" noBottomSeparator>
          <div
            style={{ display: "flex", flexDirection: "column", gap: "10px" }}
          >
            {name === "" && (
              <Input
                placeholder="Environment variable name"
                withSaveButton
                originalValue={""}
                onSave={() => {
                  onNewKey?.(
                    {
                      key: value,
                      value: "",
                    },
                    name
                  );
                }}
                type="text"
                value={value}
                onChange={(e) => valueChanged(e.target.value)}
              />
            )}
            {name !== "" && (
              <Input
                placeholder="Environment variable value"
                withSaveButton
                originalValue={originalValue}
                onSave={() => {
                  onNewKey?.(
                    {
                      key: name,
                      value: value,
                    },
                    name
                  );
                  onClose();
                }}
                type="text"
                value={value}
                onChange={(e) => valueChanged(e.target.value)}
              />
            )}
          </div>
        </SettingsSection>
        <SheetFooter className="flex flex-row gap-4">
          {name && (
            <Button
              onClick={() => {
                onRemoveKey?.(name!);
                onClose();
              }}
              style={{
                width: "150px",
                whiteSpace: "nowrap",
                display: "flex",
                alignItems: "center",
                gap: "5px",
                justifyContent: "center",
              }}
              dangerButton
            >
              Delete
            </Button>
          )}
          <SheetClose asChild>
            <Button type="submit">Cancel</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
};