Skip to content

Commit e541f32

Browse files
jthrillyjthrilly
committed
address review feedback
1 parent 3e11baf commit e541f32

21 files changed

+295
-211
lines changed

‎README.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ add new features to Network Canvas, but rather provides a new way to conduct int
55

66
Read our [documentation](https://documentation.networkcanvas.com/en/fresco) for more information on deploying Fresco.
77

8-
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcomplexdatacollective%2Ffresco%2Ftree%2Fmain&project-name=fresco&repository-name=fresco&demo-title=Network%20Canvas%20Fresco&demo-description=The%20Fresco%20project%20brings%20Network%20Canvas%20interviews%20to%20the%20web%20browser.%20See%20the%20Network%20Canvas%20project%20documentation%20website%20for%20more%20information.&demo-url=https%3A%2F%2Ffresco-sandbox.networkcanvas.com%2F&demo-image=https%3A%2F%2Fdocumentation.networkcanvas.com%2Fassets%2Fimg%2Ffresco-images%2Ffeatures%2Fdashboard.png&stores=%5B%7B"type"%3A"postgres"%7D%5D&env=UPLOADTHING_SECRET,UPLOADTHING_APP_ID&envDescription=The%20Uploadthing%20secret%20key%20and%20app%20ID%20let%20Fresco%20securely%20communicate%20with%20your%20data%20storage%20bucket.&envLink=https%3A%2F%2Fuploadthing.com%2Fdashboard%2F)
9-
108
![Alt](https://repobeats.axiom.co/api/embed/3902b97960b7e32971202cbd5b0d38f39d51df51.svg "Repobeats analytics image")
119

1210
## Building and Publishing Docker Images

‎app/(blobs)/(setup)/_components/UploadThingTokenForm.tsx

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,41 @@
1-
'use client';
2-
31
import { Loader2 } from 'lucide-react';
4-
import { useRouter } from 'next/navigation';
5-
import { setAppSetting } from '~/actions/appSettings';
2+
import { z } from 'zod';
63
import { Button } from '~/components/ui/Button';
74
import { Input } from '~/components/ui/Input';
85
import useZodForm from '~/hooks/useZodForm';
9-
import { createUploadThingTokenForm } from '~/schemas/environment';
6+
import { createUploadThingTokenSchema } from '~/schemas/appSettings';
107

11-
export const UploadThingTokenForm = () => {
8+
export const UploadThingTokenForm = ({
9+
action,
10+
}: {
11+
action: (token: string) => Promise<string | void>;
12+
}) => {
1213
const {
1314
register,
1415
handleSubmit,
1516
formState: { errors, isValid, isSubmitting },
1617
} = useZodForm({
17-
schema: createUploadThingTokenForm,
18+
schema: z.object({
19+
uploadThingToken: createUploadThingTokenSchema,
20+
}),
1821
});
19-
const router = useRouter();
2022

2123
const onSubmit = async ({
2224
uploadThingToken,
2325
}: {
2426
uploadThingToken: string;
2527
}) => {
26-
await setAppSetting('uploadThingToken', uploadThingToken);
27-
router.push('/setup?step=3');
28+
await action(uploadThingToken);
2829
};
2930

3031
return (
3132
<form
32-
className="flex flex-col"
33+
className="flex w-full flex-col"
3334
onSubmit={(event) => void handleSubmit(onSubmit)(event)}
3435
>
3536
<div className="mb-6 flex">
3637
<Input
38+
className="w-full"
3739
label="UPLOADTHING_TOKEN"
3840
hint="Copy and paste the full token from your UploadThing dashboard."
3941
type="text"
@@ -42,7 +44,7 @@ export const UploadThingTokenForm = () => {
4244
{...register('uploadThingToken')}
4345
/>
4446
</div>
45-
<div className="flex flex-wrap">
47+
<div className="flex flex-wrap justify-end">
4648
<Button disabled={isSubmitting || !isValid} type="submit">
4749
{isSubmitting && <Loader2 className="mr-2 animate-spin" />}
4850
{isSubmitting ? 'Saving...' : 'Save and continue'}

‎app/dashboard/_components/ProtocolsTable/ProtocolsTableClient.tsx

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
import { use, useState } from 'react';
44
import { DeleteProtocolsDialog } from '~/app/dashboard/protocols/_components/DeleteProtocolsDialog';
55
import { DataTable } from '~/components/DataTable/DataTable';
6-
import Link from '~/components/Link';
7-
import { Alert, AlertDescription, AlertTitle } from '~/components/ui/Alert';
86
import type { ProtocolWithInterviews } from '~/types/types';
97
import ProtocolUploader from '../ProtocolUploader';
108
import { ActionsDropdown } from './ActionsDropdown';
@@ -26,16 +24,6 @@ const ProtocolsTableClient = ({ dataPromise }: { dataPromise: GetData }) => {
2624

2725
return (
2826
<>
29-
{!hasUploadThingToken && (
30-
<Alert variant="info" className="mb-4">
31-
<AlertTitle>Configuration update required</AlertTitle>
32-
<AlertDescription>
33-
You need to add a new UploadThing API key before you can upload
34-
protocols. Visit the{' '}
35-
<Link href="/dashboard/settings">settings page</Link>.
36-
</AlertDescription>
37-
</Alert>
38-
)}
3927
<DataTable
4028
columns={getProtocolColumns(allowAnonymousRecruitment)}
4129
data={protocols}

‎app/dashboard/_components/UpdateSettingsValue.tsx

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { Loader2 } from 'lucide-react';
2+
import { useState } from 'react';
3+
import { type z } from 'zod';
4+
import { Button } from '~/components/ui/Button';
5+
import { Input } from '~/components/ui/Input';
6+
import ReadOnlyEnvAlert from '../settings/ReadOnlyEnvAlert';
7+
8+
export default function UpdateSettingsValue<T extends string>({
9+
initialValue,
10+
updateValue,
11+
schema,
12+
readOnly,
13+
}: {
14+
initialValue?: T;
15+
updateValue: (value: T) => Promise<unknown>;
16+
schema: z.ZodSchema<T>;
17+
readOnly?: boolean;
18+
}) {
19+
const [newValue, setNewValue] = useState(initialValue);
20+
const [error, setError] = useState<string | null>(null);
21+
const [isSaving, setSaving] = useState(false);
22+
23+
// If key is empty or invalid, set the error state
24+
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
25+
const value = event.target.value;
26+
27+
const result = schema.safeParse(value);
28+
29+
if (!result.success) {
30+
setError(
31+
`Invalid: ${result.error.errors.map((e) => e.message).join(', ')}`,
32+
);
33+
} else {
34+
setError(null);
35+
}
36+
37+
setNewValue(result.data);
38+
};
39+
40+
const handleReset = () => {
41+
setSaving(false);
42+
setError(null);
43+
setNewValue(initialValue);
44+
};
45+
46+
const handleSave = async () => {
47+
if (!newValue) return;
48+
49+
setSaving(true);
50+
await updateValue(newValue);
51+
setSaving(false);
52+
};
53+
54+
return (
55+
<>
56+
{readOnly && <ReadOnlyEnvAlert />}
57+
<Input
58+
value={newValue}
59+
onChange={handleChange}
60+
onFocus={(event) => event.target.select()}
61+
type="text"
62+
error={error}
63+
className="w-full"
64+
disabled={readOnly ?? isSaving}
65+
/>
66+
{newValue !== initialValue && (
67+
<div className="mt-4 flex justify-end gap-2">
68+
{!isSaving && (
69+
<Button variant="outline" onClick={handleReset}>
70+
Reset
71+
</Button>
72+
)}
73+
<Button disabled={!!error} onClick={handleSave}>
74+
{isSaving && <Loader2 className="mr-2 animate-spin" />}
75+
{isSaving ? 'Saving...' : 'Save'}
76+
</Button>
77+
</div>
78+
)}
79+
</>
80+
);
81+
}

‎app/dashboard/_components/UpdateUploadThing.tsx

Lines changed: 0 additions & 83 deletions
This file was deleted.

‎app/dashboard/_components/UpdateUploadThingTokenAlert.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { AlertTriangleIcon } from 'lucide-react';
2+
import Link from '~/components/Link';
3+
import { Alert, AlertDescription, AlertTitle } from '~/components/ui/Alert';
4+
import { getAppSetting } from '~/queries/appSettings';
5+
6+
export default async function UpdateUploadThingTokenAlert() {
7+
const uploadThingToken = await getAppSetting('uploadThingToken');
8+
9+
if (uploadThingToken) return null;
10+
11+
return (
12+
<Alert variant="destructive" className="mt-4">
13+
<AlertTriangleIcon className="h-4 w-4" />
14+
<AlertTitle>Configuration update required</AlertTitle>
15+
<AlertDescription>
16+
You need to add a new UploadThing API key before you can upload
17+
protocols. See the{' '}
18+
<Link
19+
href="https://documentation.networkcanvas.com/en/fresco/deployment/upgrading#uploadthing-variable-update"
20+
target="_blank"
21+
>
22+
upgrade documentation
23+
</Link>{' '}
24+
for more information.
25+
</AlertDescription>
26+
</Alert>
27+
);
28+
}

‎app/dashboard/_components/UploadThingModal.tsx

Lines changed: 44 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
'use client';
22

3+
import Image from 'next/image';
4+
import { useState } from 'react';
35
import { setAppSetting } from '~/actions/appSettings';
46
import { UploadThingTokenForm } from '~/app/(blobs)/(setup)/_components/UploadThingTokenForm';
57
import Link from '~/components/Link';
@@ -10,54 +12,61 @@ import {
1012
DialogHeader,
1113
DialogTitle,
1214
} from '~/components/ui/dialog';
15+
import { Divider } from '~/components/ui/Divider';
1316
import Paragraph from '~/components/ui/typography/Paragraph';
1417

1518
function UploadThingModal() {
19+
const [open, setOpen] = useState(true);
1620
return (
17-
<Dialog open={true}>
18-
<DialogContent aria-describedby={undefined} className="sm:max-w-[500px]">
21+
<Dialog open={open} onOpenChange={setOpen}>
22+
<DialogContent>
1923
<DialogHeader>
2024
<DialogTitle>Required Environment Variable Update</DialogTitle>
2125
<DialogDescription>
2226
<Paragraph>
23-
This Fresco update requires a new UploadThing environment
24-
variable. Please add it by following these steps.
27+
The Fresco update you installed requires a new UploadThing API
28+
key.{' '}
29+
<strong>
30+
Until you add it, you will not be able to upload new protocols
31+
</strong>
32+
. Existing protocols will continue to function.
2533
</Paragraph>
26-
34+
<Divider />
2735
<Paragraph>
28-
<ol className="list-inside list-decimal">
29-
<li>
30-
Visit the{' '}
31-
<Link
32-
href="https://uploadthing.com/dashboard/"
33-
target="_blank"
34-
rel="noopener noreferrer"
35-
>
36-
UploadThing dashboard
37-
</Link>
38-
</li>
39-
<li>Select your project.</li>
40-
<li>Select the API Keys tab.</li>
41-
<li>Copy the token by clicking the Copy button.</li>
42-
<li>
43-
Paste the token into the field below and submit the form.
44-
</li>
45-
</ol>
46-
</Paragraph>
47-
48-
<Paragraph>
49-
For more detailed instructions, refer to the{' '}
50-
<Link
51-
href="https://documentation.networkcanvas.com/en/fresco/deployment/upgrading"
52-
target="_blank"
53-
rel="noopener noreferrer"
54-
>
55-
upgrading documentation.
56-
</Link>
36+
Updating the key should take a matter of minutes, and can be
37+
completed using the following steps:
5738
</Paragraph>
39+
<ol className="ml-4 mt-6 list-inside list-decimal">
40+
<li>
41+
Visit the{' '}
42+
<Link href="https://uploadthing.com/dashboard/" target="_blank">
43+
UploadThing dashboard
44+
</Link>
45+
</li>
46+
<li>Select your project.</li>
47+
<li>Select the API Keys tab.</li>
48+
<li>
49+
Ensure you have the <strong>SDK v7+</strong> tab selected.
50+
</li>
51+
<li>
52+
Copy the token by clicking the Copy button (see screenshot
53+
below).{' '}
54+
<Image
55+
src="/images/uploadthing-key.png"
56+
width={500}
57+
height={300}
58+
alt="UploadThing API key dashboard"
59+
className="w-full"
60+
/>
61+
</li>
62+
<li>
63+
Paste the token into the field below and click &quot;save and
64+
continue&quot;.
65+
</li>
66+
</ol>
5867
</DialogDescription>
5968
</DialogHeader>
60-
69+
<Divider />
6170
<UploadThingTokenForm
6271
action={(token) => setAppSetting('uploadThingToken', token)}
6372
/>

0 commit comments

Comments
 (0)