[WEB-2542] Fix: display filter and tooltip issues in list layout. (#5696

)

* [WEB-2542] fix: list layout issues.
* fix: issue type display filter not working.
* fix: layout shift when hovered on bulkops checkbox.

* fix: build errors.

* fix: lint errors

web/app/profile/page.tsx

@@ -34,8 +34,8 @@ import { USER_ROLES } from "@/constants/workspace";
 import { useUser, useUserSettings } from "@/hooks/store";
 // import { ProfileSettingsLayout } from "@/layouts/settings-layout";
 // layouts
-import { FileService } from "@/services/file.service";
 import { ENABLE_LOCAL_DB_CACHE } from "@/plane-web/constants/issues";
+import { FileService } from "@/services/file.service";
 // services
 // types
 

web/core/components/issues/issue-layouts/list/block.tsx

@@ -130,7 +130,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
   };
 
   //TODO: add better logic. This is to have a min width for ID/Key based on the length of project identifier
-  const keyMinWidth = (projectIdentifier?.length ?? 0) * 7;
+  const keyMinWidth = displayProperties?.key ? (projectIdentifier?.length ?? 0) * 7 : 0;
 
   return (
     <ControlLink
@@ -178,7 +178,6 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
                     </>
                   }
                   disabled={issue.project_id === projectId}
-                  renderByDefault={false}
                 >
                   <div className="flex-shrink-0 grid place-items-center w-3.5 absolute left-1">
                     <MultipleSelectEntityAction
@@ -196,13 +195,14 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
                   </div>
                 </Tooltip>
               )}
-              {displayProperties && displayProperties?.key && (
+              {displayProperties && (displayProperties.key || displayProperties.issue_type) && (
                 <div className="flex-shrink-0" style={{ minWidth: `${keyMinWidth}px` }}>
                   {issue.project_id && (
                     <IssueIdentifier
                       issueId={issueId}
                       projectId={issue.project_id}
                       textContainerClassName="text-xs font-medium text-custom-text-300"
+                      displayProperties={displayProperties}
                     />
                   )}
                 </div>
@@ -293,4 +293,4 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
       </Row>
     </ControlLink>
   );
-});
+});

web/core/layouts/auth-layout/project-wrapper.tsx

@@ -4,7 +4,6 @@ import { FC, ReactNode } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-import useSWRImmutable from "swr/immutable";
 
 // components
 import { JoinProject } from "@/components/auth-screens";
@@ -23,10 +22,11 @@ import {
   useProjectView,
   useUserPermissions,
 } from "@/hooks/store";
+// local
+import { persistence } from "@/local-db/storage.sqlite";
 // plane web constants
 import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // images
-import { persistence } from "@/local-db/storage.sqlite";
 import emptyProject from "@/public/empty-state/onboarding/dashboard-light.webp";
 
 interface IProjectAuthWrapper {

web/core/layouts/auth-layout/workspace-wrapper.tsx

@@ -16,10 +16,11 @@ import { LogoSpinner } from "@/components/common";
 import { useMember, useProject, useUser, useUserPermissions, useWorkspace } from "@/hooks/store";
 import { useFavorite } from "@/hooks/store/use-favorite";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+// local
+import { persistence } from "@/local-db/storage.sqlite";
 // constants
 import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // images
-import { persistence } from "@/local-db/storage.sqlite";
 import PlaneBlackLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
 import PlaneWhiteLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
 import WorkSpaceNotAvailable from "@/public/workspace/workspace-not-available.png";

web/core/lib/polyfills/requestIdleCallback.ts

@@ -3,7 +3,7 @@ if (typeof window !== "undefined" && window) {
   window.requestIdleCallback =
     window.requestIdleCallback ??
     function (cb) {
-      var start = Date.now();
+      const start = Date.now();
       return setTimeout(function () {
         cb({
           didTimeout: false,

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

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

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

@@ -77,9 +77,7 @@ export const getMetaKeysFragment = (queries: any) => {
     }
   });
 
-  let sql;
-
-  sql = `  ('${Array.from(fields).join("','")}')`;
+  const sql = `  ('${Array.from(fields).join("','")}')`;
 
   return sql;
 };

web/core/store/project/project.store.ts

@@ -408,6 +408,7 @@ export class ProjectStore implements IProjectStore {
     } catch (error) {
       console.log("Failed to delete project from project store");
       this.fetchProjects(workspaceSlug);
+      throw error;
     }
   };
 

web/core/store/user/index.ts

@@ -9,6 +9,7 @@ import { TUserPermissions } from "@plane/types/src/enums";
 import { API_BASE_URL } from "@/helpers/common.helper";
 // local
 import { persistence } from "@/local-db/storage.sqlite";
+import { ENABLE_LOCAL_DB_CACHE } from "@/plane-web/constants/issues";
 import { EUserPermissions } from "@/plane-web/constants/user-permissions";
 // services
 import { AuthService } from "@/services/auth.service";
@@ -19,7 +20,6 @@ import { IAccountStore } from "@/store/user/account.store";
 import { ProfileStore, IUserProfileStore } from "@/store/user/profile.store";
 import { IUserPermissionStore, UserPermissionStore } from "./permissions.store";
 import { IUserSettingsStore, UserSettingsStore } from "./settings.store";
-import { ENABLE_LOCAL_DB_CACHE } from "@/plane-web/constants/issues";
 
 type TUserErrorStatus = {
   status: string;

web/core/store/user/profile.store.ts

@@ -81,11 +81,11 @@ export class ProfileStore implements IUserProfileStore {
 
   // helper action
   mutateUserProfile = (data: Partial<TUserProfile>) => {
-    if (!data) return
+    if (!data) return;
     Object.entries(data).forEach(([key, value]) => {
       if (key in this.data) set(this.data, key, value);
-    })
-  }
+    });
+  };
 
   // actions
   /**
@@ -129,7 +129,7 @@ export class ProfileStore implements IUserProfileStore {
       }
       const userProfile = await this.userService.updateCurrentUserProfile(data);
       return userProfile;
-    } catch (error) {
+    } catch {
       if (currentUserProfileData) {
         this.mutateUserProfile(currentUserProfileData);
       }