Add warning dialog before enabling ml search

src/components/Sidebar.tsx

@@ -58,6 +58,12 @@ export default function Sidebar(props: Props) {
     const [fixLargeThumbsView, setFixLargeThumbsView] = useState(false);
     const galleryContext = useContext(GalleryContext);
     const appContext = useContext(AppContext);
+    const enableMlSearch = async () => {
+        await appContext.updateMlSearchEnabled(true);
+    };
+    const disableMlSearch = async () => {
+        await appContext.updateMlSearchEnabled(false);
+    };
     useEffect(() => {
         const main = async () => {
             if (!isOpen) {
@@ -302,9 +308,21 @@ export default function Sidebar(props: Props) {
                 <LinkButton
                     style={{ marginTop: '30px' }}
                     onClick={() => {
-                        appContext.updateMlSearchEnabled(
-                            !appContext.mlSearchEnabled
-                        );
+                        if (!appContext.mlSearchEnabled) {
+                            props.setDialogMessage({
+                                title: `${constants.CONFIRM} ${constants.ENABLE_ML_SEARCH}`,
+                                content: constants.ENABLE_ML_SEARCH_MESSAGE,
+                                staticBackdrop: true,
+                                proceed: {
+                                    text: constants.ENABLE_ML_SEARCH,
+                                    action: enableMlSearch,
+                                    variant: 'success',
+                                },
+                                close: { text: constants.CANCEL },
+                            });
+                        } else {
+                            disableMlSearch();
+                        }
                     }}>
                     {appContext.mlSearchEnabled
                         ? constants.DISABLE_ML_SEARCH

src/pages/_app.tsx

@@ -501,6 +501,7 @@ export interface FlashMessage {
     message: string;
     type: FLASH_MESSAGE_TYPE;
 }
+// TODO: AppContext is not cleared after logout
 export const AppContext = createContext<AppContextType>(null);
 
 const redirectMap = {

src/utils/strings/englishConstants.tsx

@@ -206,6 +206,13 @@ const englishConstants = {
     REQUEST_FEATURE: 'request feature',
     ENABLE_ML_SEARCH: 'enable ML Search beta',
     DISABLE_ML_SEARCH: 'disable ML Search beta',
+    ENABLE_ML_SEARCH_MESSAGE:
+        'This will enable on-device machine learning and people search. ' +
+        'It will keep analyzing your uploaded photos locally and will store ' +
+        'all analysis data on local device. For the first run after login or ' +
+        'enabling this feature, it will download all original images on local ' +
+        'device to analyze them. So please only enable this if you are ok with ' +
+        'bandwidth and local processing of all images in your photo library.',
     ML_DEBUG: 'ML Debug',
     SUPPORT: 'support',
     CONFIRM: 'confirm',