[WEB-2001] feat: Fix local cache issues r3 (#5714)

* - Handle single quotes in load workspace queries
- Add IS null where condition in query utils

* Fix description_html being lost

* Change secondary order to sequence_id

* Fix update persistence layer

* Fix issue types filter
Fix none filter

* add local cache toggle in help section

* remove toggle from user settings

* Reset storage class on disabling local

---------

Co-authored-by: rahulramesha <rahulramesham@gmail.com>

web/app/profile/page.tsx

@@ -5,39 +5,20 @@ import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { ChevronDown, CircleUserRound } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
-// services
-// hooks
-// layouts
-// components
 import type { IUser } from "@plane/types";
-import {
-  Button,
-  CustomSelect,
-  CustomSearchSelect,
-  Input,
-  TOAST_TYPE,
-  setPromiseToast,
-  setToast,
-  ToggleSwitch,
-} from "@plane/ui";
+import { Button, CustomSelect, CustomSearchSelect, Input, TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
+// components
 import { DeactivateAccountModal } from "@/components/account";
 import { LogoSpinner } from "@/components/common";
 import { ImagePickerPopover, UserImageUploadModal, PageHead } from "@/components/core";
-// ui
-// icons
-// components
-// constants
 import { ProfileSettingContentWrapper } from "@/components/profile";
+// constants
 import { TIME_ZONES } from "@/constants/timezones";
 import { USER_ROLES } from "@/constants/workspace";
 // hooks
-import { useUser, useUserSettings } from "@/hooks/store";
-// import { ProfileSettingsLayout } from "@/layouts/settings-layout";
-// layouts
-import { ENABLE_LOCAL_DB_CACHE } from "@/plane-web/constants/issues";
-import { FileService } from "@/services/file.service";
+import { useUser } from "@/hooks/store";
 // services
-// types
+import { FileService } from "@/services/file.service";
 
 const defaultValues: Partial<IUser> = {
   avatar: "",
@@ -69,7 +50,6 @@ const ProfileSettingsPage = observer(() => {
   } = useForm<IUser>({ defaultValues });
   // store hooks
   const { data: currentUser, updateCurrentUser } = useUser();
-  const { canUseLocalDB, toggleLocalDB } = useUserSettings();
 
   useEffect(() => {
     reset({ ...defaultValues, ...currentUser });
@@ -418,37 +398,6 @@ const ProfileSettingsPage = observer(() => {
             </div>
           </div>
         </form>
-        {ENABLE_LOCAL_DB_CACHE && (
-          <Disclosure as="div" className="border-t border-custom-border-100 md:px-8">
-            {({ open }) => (
-              <>
-                <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
-                  <span className="text-lg tracking-tight">Local Cache</span>
-                  <ChevronDown className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} />
-                </Disclosure.Button>
-                <Transition
-                  show={open}
-                  enter="transition duration-100 ease-out"
-                  enterFrom="transform opacity-0"
-                  enterTo="transform opacity-100"
-                  leave="transition duration-75 ease-out"
-                  leaveFrom="transform opacity-100"
-                  leaveTo="transform opacity-0"
-                >
-                  <Disclosure.Panel>
-                    <div className="flex justify-between pb-4">
-                      <span className="text-sm tracking-tight">
-                        Toggled on by default to keep Plane performant. Disable this if you are facing any issues with
-                        Plane. Applicable only to this device.
-                      </span>
-                      <ToggleSwitch value={canUseLocalDB} onChange={() => toggleLocalDB()} />
-                    </div>
-                  </Disclosure.Panel>
-                </Transition>
-              </>
-            )}
-          </Disclosure>
-        )}
         <Disclosure as="div" className="border-t border-custom-border-100 md:px-8">
           {({ open }) => (
             <>

web/core/components/workspace/sidebar/help-section.tsx

@@ -2,29 +2,33 @@
 
 import React, { useState } from "react";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { FileText, HelpCircle, MessagesSquare, MoveLeft, User } from "lucide-react";
 // ui
-import { CustomMenu, Tooltip } from "@plane/ui";
+import { CustomMenu, ToggleSwitch, Tooltip } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppTheme, useCommandPalette, useInstance, useTransient } from "@/hooks/store";
+import { useAppTheme, useCommandPalette, useInstance, useTransient, useUserSettings } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
 import { PlaneVersionNumber, ProductUpdates, ProductUpdatesModal } from "@/plane-web/components/global";
 import { WorkspaceEditionBadge } from "@/plane-web/components/workspace";
+import { ENABLE_LOCAL_DB_CACHE } from "@/plane-web/constants/issues";
 
 export interface WorkspaceHelpSectionProps {
   setSidebarActive?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(() => {
+  const { workspaceSlug, projectId } = useParams();
   // store hooks
   const { sidebarCollapsed, toggleSidebar } = useAppTheme();
   const { toggleShortcutModal } = useCommandPalette();
   const { isMobile } = usePlatformOS();
   const { config } = useInstance();
   const { isIntercomToggle, toggleIntercom } = useTransient();
+  const { canUseLocalDB, toggleLocalDB } = useUserSettings();
   // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
   const [isChangeLogOpen, setIsChangeLogOpen] = useState(false);
@@ -105,6 +109,23 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
               </a>
             </CustomMenu.MenuItem>
             <div className="my-1 border-t border-custom-border-200" />
+            {ENABLE_LOCAL_DB_CACHE && (
+              <CustomMenu.MenuItem>
+                <div
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                  className="flex w-full items-center justify-between text-xs hover:bg-custom-background-80"
+                >
+                  <span className="racking-tight">Local Cache</span>
+                  <ToggleSwitch
+                    value={canUseLocalDB}
+                    onChange={() => toggleLocalDB(workspaceSlug?.toString(), projectId?.toString())}
+                  />
+                </div>
+              </CustomMenu.MenuItem>
+            )}
             <CustomMenu.MenuItem>
               <button
                 type="button"

web/core/local-db/storage.sqlite.ts

@@ -54,6 +54,7 @@ export class Storage {
       const fileSystemDirectoryHandle = await storageManager.getDirectory();
       //@ts-expect-error , clear local issue cache
       await fileSystemDirectoryHandle.remove({ recursive: true });
+      this.reset();
     } catch (e) {
       console.error("Error clearing sqlite sync storage", e);
     }

web/core/local-db/utils/query.utils.ts

@@ -4,7 +4,8 @@ import { issueSchema } from "./schemas";
 import { wrapDateTime } from "./utils";
 
 export const translateQueryParams = (queries: any) => {
-  const { group_by, sub_group_by, labels, assignees, state, cycle, module, priority, type, ...otherProps } = queries;
+  const { group_by, sub_group_by, labels, assignees, state, cycle, module, priority, type, issue_type, ...otherProps } =
+    queries;
 
   const order_by = queries.order_by;
   if (state) otherProps.state_id = state;
@@ -23,6 +24,9 @@ export const translateQueryParams = (queries: any) => {
   if (type) {
     otherProps.state_group = type === "backlog" ? "backlog" : "unstarted,started";
   }
+  if (issue_type) {
+    otherProps.type_id = issue_type;
+  }
 
   if (order_by?.includes("priority")) {
     otherProps.order_by = order_by.replace("priority", "priority_proxy");
@@ -238,11 +242,11 @@ export const singleFilterConstructor = (queries: any) => {
 
   keys.forEach((key) => {
     const value = filters[key] ? filters[key].split(",") : "";
-    if (!value) {
-      sql += ` AND ${key} IS NULL`;
-      return;
-    }
     if (!ARRAY_FIELDS.includes(key)) {
+      if (!value) {
+        sql += ` AND ${key} IS NULL`;
+        return;
+      }
       sql += ` AND ${key} in ('${value.join("','")}')
       `;
     }

web/core/store/user/settings.store.ts

@@ -22,7 +22,7 @@ export interface IUserSettingsStore {
   canUseLocalDB: boolean;
   // actions
   fetchCurrentUserSettings: () => Promise<IUserSettings | undefined>;
-  toggleLocalDB: () => Promise<void>;
+  toggleLocalDB: (workspaceSlug: string | undefined, projectId: string | undefined) => Promise<void>;
 }
 
 export class UserSettingsStore implements IUserSettingsStore {
@@ -59,7 +59,7 @@ export class UserSettingsStore implements IUserSettingsStore {
     this.userService = new UserService();
   }
 
-  toggleLocalDB = async () => {
+  toggleLocalDB = async (workspaceSlug: string | undefined, projectId: string | undefined) => {
     const currentLocalDBValue = this.canUseLocalDB;
     try {
       runInAction(() => {
@@ -70,8 +70,14 @@ export class UserSettingsStore implements IUserSettingsStore {
 
       if (!transactionResult) {
         throw new Error("error while toggling local DB");
-      } else if (currentLocalDBValue) {
+      }
+
+      if (currentLocalDBValue) {
         await persistence.clearStorage();
+      } else if (workspaceSlug) {
+        await persistence.initialize(workspaceSlug);
+        persistence.syncWorkspace();
+        projectId && persistence.syncIssues(projectId);
       }
     } catch (e) {
       console.warn("error while toggling local DB");