Allow skipping verification (#442)

onlook-dev · Oct 3, 2024 · 564299e · 564299e
1 parent fb9765e
commit 564299e
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 1 deletion.
diff --git a/app/src/routes/projects/ProjectsTab/Create/Load/Verify.tsx b/app/src/routes/projects/ProjectsTab/Create/Load/Verify.tsx
@@ -1,3 +1,12 @@
+import {
+ AlertDialog,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
 import {
  Card,
@@ -31,6 +40,7 @@ export const LoadVerifyProject = ({
 }) => {
  const [state, setState] = useState<StepState>(StepState.VERIFYING);
  const [progressMessage, setProgressMessage] = useState<string>('Starting...');
+ const [isSkipDialogOpen, setIsSkipDialogOpen] = useState(false);
 
  useEffect(() => {
  if (!projectData.folderPath) {
@@ -178,6 +188,62 @@ export const LoadVerifyProject = ({
  }
  }
 
+ function renderSkipButton() {
+ if (
+ state === StepState.VERIFYING ||
+ state === StepState.ERROR ||
+ state === StepState.NOT_INSTALLED
+ ) {
+ return (
+ <>
+ <AlertDialog open={isSkipDialogOpen}>
+ <AlertDialogTrigger asChild>
+ <Button
+ variant="ghost"
+ onClick={() => {
+ setIsSkipDialogOpen(true);
+ }}
+ >
+ Skip
+ </Button>
+ </AlertDialogTrigger>
+ <AlertDialogContent>
+ <AlertDialogHeader>
+ <AlertDialogTitle>Skip verification?</AlertDialogTitle>
+ <AlertDialogDescription>
+ <p className="text-sm">
+ {'You can always setup Onlook later by running '}
+ <span className="text-teal">npx onlook setup</span>
+ {' in your project folder'}
+ </p>
+ </AlertDialogDescription>
+ </AlertDialogHeader>
+ <AlertDialogFooter>
+ <Button
+ variant="ghost"
+ onClick={() => {
+ setIsSkipDialogOpen(false);
+ }}
+ >
+ Cancel
+ </Button>
+ <Button
+ variant="outline"
+ onClick={() => {
+ setIsSkipDialogOpen(false);
+ nextStep();
+ }}
+ >
+ Skip
+ </Button>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialog>
+ </>
+ );
+ }
+ }
+
  function renderPrimaryButton() {
  if (
  state === StepState.INSTALLING ||
@@ -219,6 +285,7 @@ export const LoadVerifyProject = ({
  <Button type="button" onClick={handleSelectDifferentFolder} variant="ghost">
  Select a different folder
  </Button>
+ {renderSkipButton()}
  {renderPrimaryButton()}
  </div>
  </CardFooter>

diff --git a/app/src/routes/projects/ProjectsTab/Create/index.tsx b/app/src/routes/projects/ProjectsTab/Create/index.tsx
@@ -1,3 +1,4 @@
+import backgroundImage from '@/assets/dunes-create.png';
 import { useProjectsManager } from '@/components/Context';
 import { sendAnalytics } from '@/lib/utils';
 import { CreateMethod, getStepName } from '@/routes/projects/helpers';
@@ -10,7 +11,6 @@ import { NewRunProject } from './New/Run';
 import { NewSelectFolder } from './New/SelectFolder';
 import { NewSetupProject } from './New/Setup';
 import { Project } from '/common/models/project';
-import backgroundImage from '@/assets/dunes-create.png';
 
 export interface StepProps {
  projectData: Partial<Project>;