Skip to content

Commit 1239a3c

Browse files
authored
V3 project labels (#998)
* Added a side menu label to indicate your project version * Added a link to request access to v3 * Toggle password visiblility of the env var inputs
1 parent dd31b1e commit 1239a3c

File tree

3 files changed

+40
-3
lines changed
  • apps/webapp/app

3 files changed

+40
-3
lines changed

apps/webapp/app/components/navigation/SideMenu.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ import { UserProfilePhoto } from "../UserProfilePhoto";
5757
import { FreePlanUsage } from "../billing/FreePlanUsage";
5858
import { Badge } from "../primitives/Badge";
5959
import { Button } from "../primitives/Buttons";
60+
import { Callout } from "../primitives/Callout";
6061
import { ClipboardField } from "../primitives/ClipboardField";
6162
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "../primitives/Dialog";
6263
import { Icon } from "../primitives/Icon";
@@ -187,7 +188,20 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
187188
/>
188189
</div>
189190
</div>
191+
<div className="m-2">
192+
<Callout variant={"info"}>
193+
{`This is a ${project.version === "V2" ? "v2" : "v3"} project`}
194+
</Callout>
195+
</div>
190196
<div className="flex flex-col gap-1 border-t border-grid-bright p-1">
197+
{project.version === "V2" && (
198+
<SideMenuItem
199+
to="https://trigger.dev/v3-early-access"
200+
target="_blank"
201+
name="Request access to v3"
202+
icon={V3Icon}
203+
/>
204+
)}
191205
{currentPlan?.subscription?.isPaying === true && (
192206
<Dialog>
193207
<DialogTrigger asChild>
@@ -586,3 +600,15 @@ function V3ProjectSideMenu({
586600
</>
587601
);
588602
}
603+
604+
function V3Icon() {
605+
return (
606+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
607+
<rect width="16" height="16" rx="8" fill="#A8FF53" />
608+
<path
609+
d="M7.7488 6.17L5.5818 12H3.6678L1.5008 6.17H3.2058L4.6248 10.339L6.0328 6.17H7.7488ZM11.0527 7.292C11.6357 7.303 12.2297 7.006 12.2297 6.28C12.2297 5.774 11.7787 5.433 11.0527 5.433C10.4147 5.433 9.98567 5.741 9.91967 6.214L8.22567 6.126C8.36867 4.861 9.51267 4.014 11.0857 4.014C12.8457 4.014 13.9567 4.806 13.9567 6.049C13.9567 6.951 13.3847 7.534 12.3067 7.776C13.5387 8.04 14.2207 8.777 14.2207 9.855C14.2207 11.274 13.0107 12.176 11.0857 12.176C9.32567 12.176 8.12667 11.197 8.04967 9.712L9.75467 9.646C9.83167 10.405 10.4917 10.757 11.0967 10.757C11.8007 10.757 12.4937 10.394 12.4937 9.591C12.4937 8.81 11.7897 8.425 11.0527 8.447L10.3817 8.458V7.281L11.0527 7.292Z"
610+
fill="#15171A"
611+
/>
612+
</svg>
613+
);
614+
}

apps/webapp/app/components/primitives/Dialog.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const DialogContent = React.forwardRef<
4343
<DialogPrimitive.Content
4444
ref={ref}
4545
className={cn(
46-
"fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background-dimmed px-4 pb-6 pt-3.5 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
46+
"fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background-dimmed px-4 pb-4 pt-3.5 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
4747
className
4848
)}
4949
{...props}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { FormError } from "~/components/primitives/FormError";
1616
import { Input } from "~/components/primitives/Input";
1717
import { InputGroup } from "~/components/primitives/InputGroup";
1818
import { Label } from "~/components/primitives/Label";
19+
import { Switch } from "~/components/primitives/Switch";
1920
import { prisma } from "~/db.server";
2021
import { useOrganization } from "~/hooks/useOrganizations";
2122
import { useProject } from "~/hooks/useProject";
@@ -134,6 +135,8 @@ export default function Page() {
134135
shouldRevalidate: "onSubmit",
135136
});
136137

138+
const [revealAll, setRevealAll] = useState(false);
139+
137140
useEffect(() => {
138141
setIsOpen(true);
139142
}, []);
@@ -169,7 +172,15 @@ export default function Page() {
169172
/>
170173
</InputGroup>
171174
<InputGroup fullWidth>
172-
<Label>Values</Label>
175+
<div className="flex items-center justify-between">
176+
<Label>Values</Label>
177+
<Switch
178+
variant="small"
179+
label="Reveal values"
180+
checked={revealAll}
181+
onCheckedChange={(e) => setRevealAll(e.valueOf())}
182+
/>
183+
</div>
173184
<div className="grid grid-cols-[auto_1fr] gap-x-2 gap-y-2">
174185
{environments.map((environment, index) => {
175186
return (
@@ -186,7 +197,7 @@ export default function Page() {
186197
<EnvironmentLabel environment={environment} className="h-5 px-2" />
187198
</label>
188199
<Input
189-
type="password"
200+
type={revealAll ? "text" : "password"}
190201
name={`values[${index}].value`}
191202
placeholder="Not set"
192203
/>

0 commit comments

Comments
 (0)