fix: ui + project state mutation issue (#880)

web/ee/components/projects/common/join-button.tsx

@@ -1,15 +1,17 @@
 import { useState } from "react";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
+import { cn } from "@plane/editor";
 import { Button } from "@plane/ui";
 import { JoinProjectModal } from "@/components/project";
 import { TProject } from "@/plane-web/types/projects";
 
 type Props = {
   project: TProject;
+  className?: string;
 };
 const JoinButton: React.FC<Props> = (props) => {
-  const { project } = props;
+  const { project, className } = props;
   const [joinProjectModalOpen, setJoinProjectModal] = useState(false);
   const { workspaceSlug } = useParams();
   const router = useRouter();
@@ -29,9 +31,10 @@ const JoinButton: React.FC<Props> = (props) => {
         <Link
           href={`/${workspaceSlug}/projects/${project.id}/issues`}
           tabIndex={-1}
-          className={
-            "w-auto cursor-pointer rounded px-3 py-1.5 text-center text-sm font-medium outline-none mt-2 flex-end m-2 bg-green-500/20 text-green-500 hover:bg-green-500/10 hover:text-green-500 focus:bg-green-500/20"
-          }
+          className={cn(
+            "w-auto cursor-pointer rounded px-3 py-1.5 text-center text-sm font-medium outline-none my-0 flex-end bg-green-500/20 text-green-500 hover:bg-green-500/10 hover:text-green-500 focus:bg-green-500/20",
+            className
+          )}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -46,9 +49,10 @@ const JoinButton: React.FC<Props> = (props) => {
         <Button
           tabIndex={-1}
           variant="accent-primary"
-          className={
-            "w-auto cursor-pointer rounded px-3 py-1.5 text-center text-sm font-medium outline-none mt-2 flex-end m-2"
-          }
+          className={cn(
+            "w-auto cursor-pointer rounded px-3 py-1.5 text-center text-sm font-medium outline-none my-0 flex-end",
+            className
+          )}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();

web/ee/components/projects/dropdowns/state-dropdown.tsx

@@ -62,6 +62,7 @@ export const StateDropdown: FC<TStateDropdown> = observer((props) => {
       buttonClassName={buttonClassName}
       className={className}
       disabled={disabled}
+      optionsClassName="z-[19]"
       noChevron
     />
   );

web/ee/components/projects/layouts/gallery/card.tsx

@@ -111,7 +111,9 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
         </>
       </Link>
 
-      {!project.archived_at && filters?.scope === EProjectScope.ALL_PROJECTS && <JoinButton project={project} />}
+      {!project.archived_at && filters?.scope === EProjectScope.ALL_PROJECTS && (
+        <JoinButton className="m-2" project={project} />
+      )}
     </div>
   );
 });

web/ee/components/projects/layouts/gallery/details.tsx

@@ -148,7 +148,7 @@ const Details: React.FC<Props> = observer((props) => {
               e.stopPropagation();
             }}
           />
-          <div className="absolute inset-0 z-[1] bg-gradient-to-t to-black/60 from-transparent" />
+          <div className="hidden rounded absolute group-hover/project-card:flex inset-0 z-[1] bg-gradient-to-t to-black/60 from-transparent" />
         </div>
         <div className="flex gap-2 absolute top-2 right-2" data-prevent-nprogress>
           {(isOwner || !isArchived) && (

web/ee/components/projects/layouts/list/block.tsx

@@ -46,7 +46,7 @@ export const ProjectBlock = observer((props: ProjectBlockProps) => {
     <div
       ref={projectRef}
       className={cn(
-        "group/list-block min-h-11 relative flex flex-col gap-3 bg-custom-background-100 hover:bg-custom-background-90 p-3 pl-1.5 text-sm transition-colors border border-transparent border-b border-b-custom-border-200",
+        "group/list-block min-h-11 relative flex flex-col gap-x-3 bg-custom-background-100 hover:bg-custom-background-90 p-3 pl-1.5 text-sm transition-colors border border-transparent border-b border-b-custom-border-200 md:py-1",
         {
           "bg-custom-background-80": isCurrentBlockDragging,
           "md:flex-row md:items-center": isSidebarCollapsed,
@@ -64,7 +64,7 @@ export const ProjectBlock = observer((props: ProjectBlockProps) => {
       }}
     >
       <div className="flex w-full truncate">
-        <div className="flex flex-grow items-center gap-0.5 truncate">
+        <div className="flex flex-grow items-center gap-0.5 truncate p-2 pb-0 lg:pb-2">
           <div className="flex items-center gap-1">
             <div className="h-8 w-8 flex-shrink-0 grid place-items-center rounded bg-custom-background-90 mr-2">
               <Logo logo={projectDetails.logo_props} size={18} />
@@ -98,7 +98,7 @@ export const ProjectBlock = observer((props: ProjectBlockProps) => {
           )}
         </div>
         <div
-          className={cn("block border border-custom-border-300 rounded h-full", {
+          className={cn("block border border-custom-border-300 rounded h-full m-auto", {
             "md:hidden": isSidebarCollapsed,
             "lg:hidden": !isSidebarCollapsed,
           })}

web/ee/components/workspace-project-states/settings/root.tsx

@@ -10,7 +10,7 @@ import {
   ProjectStateGroupList,
 } from "@/plane-web/components/workspace-project-states";
 // plane web hooks
-import { useWorkspaceProjectStates } from "@/plane-web/hooks/store";
+import { useWorkspaceFeatures, useWorkspaceProjectStates } from "@/plane-web/hooks/store";
 // plane web types
 
 type TWorkspaceProjectStatesRoot = {
@@ -25,6 +25,7 @@ export const WorkspaceProjectStatesRoot: FC<TWorkspaceProjectStatesRoot> = obser
   const {} = useAppTheme();
   // hooks
   const { loader, getProjectStateIdsWithGroupingByWorkspaceId } = useWorkspaceProjectStates();
+  const { loader: workspaceLoader } = useWorkspaceFeatures();
 
   // derived values
   const groupedProjectStateIds = getProjectStateIdsWithGroupingByWorkspaceId(workspaceId);
@@ -32,7 +33,7 @@ export const WorkspaceProjectStatesRoot: FC<TWorkspaceProjectStatesRoot> = obser
   return (
     <div className="space-y-3">
       {isProjectGroupingEnabled && groupedProjectStateIds ? (
-        loader ? (
+        loader || workspaceLoader ? (
           <WorkspaceProjectStatesLoader />
         ) : (
           <ProjectStateGroupList

web/ee/store/workspace-feature.store.ts

@@ -110,30 +110,21 @@ export class WorkspaceFeatureStore implements IWorkspaceFeatureStore {
     workspaceSlug: string,
     payload: Partial<TWorkspaceFeature>
   ): Promise<TWorkspaceFeatures | undefined> => {
-    const currentWorkspaceFeatures = this.workspaceFeatures?.[workspaceSlug];
     try {
+      this.loader = EWorkspaceFeatureLoader.MUTATION_LOADER;
+      const workspaceFeatures = await workspaceFeatureService.updateWorkspaceFeature(workspaceSlug, payload);
+      if (workspaceFeatures?.is_project_grouping_enabled) {
+        this.store.projectRoot.project.fetchProjects(workspaceSlug);
+      }
       runInAction(() => {
-        this.loader = EWorkspaceFeatureLoader.MUTATION_LOADER;
         Object.entries(payload).forEach(([key, value]) => {
           if (this.workspaceFeatures) {
             set(this.workspaceFeatures, [workspaceSlug, key], value);
           }
         });
       });
-      const workspaceFeatures = await workspaceFeatureService.updateWorkspaceFeature(workspaceSlug, payload);
-      if (workspaceFeatures?.is_project_grouping_enabled) {
-        this.store.projectRoot.project.fetchProjects(workspaceSlug);
-      }
       return workspaceFeatures;
     } catch (error) {
-      runInAction(() => {
-        Object.entries(payload).forEach(([key]) => {
-          if (this.workspaceFeatures && currentWorkspaceFeatures) {
-            const featureKey = key as EWorkspaceFeatures;
-            set(this.workspaceFeatures, [workspaceSlug, key], currentWorkspaceFeatures[featureKey]);
-          }
-        });
-      });
       throw error;
     } finally {
       runInAction(() => (this.loader = undefined));