feat: add repair mode checkbox instead of requiring users to hold shift

invoke-ai · Jan 19, 2025 · 34e68f7 · 34e68f7
1 parent 9cb9a42
commit 34e68f7
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 34 deletions.
diff --git a/src/renderer/features/InstallFlow/InstallFlowStepReview.tsx b/src/renderer/features/InstallFlow/InstallFlowStepReview.tsx
@@ -1,15 +1,20 @@
 import {
   Button,
+  Checkbox,
   Divider,
+  Flex,
+  FormControl,
+  FormLabel,
   Heading,
   ListItem,
+  Spacer,
   Text,
   Tooltip,
   UnorderedList,
-  useShiftModifier,
 } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import { memo } from 'react';
+import type { ChangeEvent } from 'react';
+import { memo, useCallback } from 'react';
 import { assert } from 'tsafe';
 
 import { BodyContainer, BodyContent, BodyFooter, BodyHeader } from '@/renderer/common/layout';
@@ -27,10 +32,12 @@ const GPU_LABEL_MAP: Record<GpuType, string> = {
 };
 
 export const InstallFlowStepReview = memo(() => {
-  const { dirDetails, gpuType, release } = useStore(installFlowApi.$choices);
+  const { dirDetails, gpuType, release, repairMode } = useStore(installFlowApi.$choices);
   const installType = useStore(installFlowApi.$installType);
 
-  const shift = useShiftModifier();
+  const onChangeRepairMode = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    installFlowApi.$choices.set({ ...installFlowApi.$choices.get(), repairMode: e.target.checked });
+  }, []);
 
   assert(dirDetails !== null);
   assert(gpuType !== null);
@@ -68,32 +75,32 @@ export const InstallFlowStepReview = memo(() => {
             </Text>
           </ListItem>
         </UnorderedList>
-        {/* {shift && (
-          <Alert status="info" w="auto" mt={8}>
-            <AlertIcon />
-            <AlertDescription fontSize="sm">
-              Repair mode forcibly reinstalls python and recreates the virtual environment.
-            </AlertDescription>
-          </Alert>
-        )} */}
+        <Spacer />
       </BodyContent>
       <BodyFooter>
+        <Tooltip
+          label={
+            <Flex flexDir="column" gap={1}>
+              <Text fontWeight="semibold">Repair mode can fix installation or update issues.</Text>
+              <Text>It reinstalls python and recreates the virtual environment.</Text>
+            </Flex>
+          }
+        >
+          <FormControl w="min-content">
+            <FormLabel m={0} fontWeight="normal" fontSize="md">
+              Repair mode
+            </FormLabel>
+            <Checkbox isChecked={repairMode} onChange={onChangeRepairMode} />
+          </FormControl>
+        </Tooltip>
+        <Divider orientation="vertical" />
         <Button onClick={installFlowApi.prevStep} variant="link">
           Back
         </Button>
         <Divider orientation="vertical" />
-        {shift && (
-          <Tooltip isOpen label="Repair mode forcibly reinstalls python and recreates the virtual environment.">
-            <Button w={24} onClick={installFlowApi.startInstallWithRepair} colorScheme="invokeRed">
-              Repair
-            </Button>
-          </Tooltip>
-        )}
-        {!shift && (
-          <Button w={24} onClick={installFlowApi.startInstallWithoutRepair} colorScheme="invokeYellow">
-            Install
-          </Button>
-        )}
+        <Button w={24} onClick={installFlowApi.startInstall} colorScheme="invokeYellow">
+          Install
+        </Button>
       </BodyFooter>
     </BodyContainer>
   );

diff --git a/src/renderer/features/InstallFlow/state.ts b/src/renderer/features/InstallFlow/state.ts
@@ -23,10 +23,12 @@ const $choices = map<{
   dirDetails: DirDetails | null;
   gpuType: GpuType | null;
   release: { version: string; isPrerelease: boolean } | null;
+  repairMode: boolean;
 }>({
   dirDetails: null,
   gpuType: null,
   release: null,
+  repairMode: false,
 });
 
 const $activeStep = atom(0);
@@ -77,7 +79,7 @@ export const installFlowApi = {
     $activeStep.set(clamp(currentStep - 1, 0, installFlowApi.steps.length - 1));
   },
   beginFlow: (dirDetails?: DirDetails) => {
-    $choices.set({ dirDetails: dirDetails ?? null, gpuType: null, release: null });
+    $choices.set({ dirDetails: dirDetails ?? null, gpuType: null, release: null, repairMode: false });
     $activeStep.set(0);
     $isStarted.set(true);
   },
@@ -86,25 +88,20 @@ export const installFlowApi = {
       dirDetails: null,
       gpuType: null,
       release: null,
+      repairMode: false,
     });
     $activeStep.set(0);
     $isStarted.set(false);
   },
-  startInstall: (repair?: boolean) => {
-    const { dirDetails, gpuType, release } = $choices.get();
+  startInstall: () => {
+    const { dirDetails, gpuType, release, repairMode } = $choices.get();
     if (!dirDetails || !dirDetails.canInstall || !release || !gpuType) {
       return;
     }
     $installProcessLogs.set([]);
-    emitter.invoke('install-process:start-install', dirDetails.path, gpuType, release.version, repair);
+    emitter.invoke('install-process:start-install', dirDetails.path, gpuType, release.version, repairMode);
     installFlowApi.nextStep();
   },
-  startInstallWithoutRepair: () => {
-    installFlowApi.startInstall(false);
-  },
-  startInstallWithRepair: () => {
-    installFlowApi.startInstall(true);
-  },
   cancelInstall: async () => {
     await emitter.invoke('install-process:cancel-install');
     $isFinished.set(true);