chore: allow guest/ viewer to clear applied filters in project issues.

web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import {
   AppliedDateFilters,
@@ -16,8 +15,6 @@ import { X } from "lucide-react";
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
 import { IIssueFilterOptions, IIssueLabel, IProject, IState, IUserLite } from "types";
-// constants
-import { EUserWorkspaceRoles } from "constants/workspace";
 
 type Props = {
   appliedFilters: IIssueFilterOptions;
@@ -35,16 +32,10 @@ const dateFilters = ["start_date", "target_date"];
 export const AppliedFiltersList: React.FC<Props> = observer((props) => {
   const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, members, projects, states } = props;
 
-  const {
-    user: { currentProjectRole },
-  } = useMobxStore();
-
   if (!appliedFilters) return null;
 
   if (Object.keys(appliedFilters).length === 0) return null;
 
-  const isEditingAllowed = currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
-
   return (
     <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
       {Object.entries(appliedFilters).map(([key, value]) => {
@@ -61,7 +52,6 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
             <div className="flex flex-wrap items-center gap-1">
               {membersFilters.includes(filterKey) && (
                 <AppliedMembersFilters
-                  editable={isEditingAllowed}
                   handleRemove={(val) => handleRemoveFilter(filterKey, val)}
                   members={members}
                   values={value}
@@ -72,7 +62,6 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
               )}
               {filterKey === "labels" && (
                 <AppliedLabelsFilters
-                  editable={isEditingAllowed}
                   handleRemove={(val) => handleRemoveFilter("labels", val)}
                   labels={labels}
                   values={value}
@@ -80,14 +69,12 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
               )}
               {filterKey === "priority" && (
                 <AppliedPriorityFilters
-                  editable={isEditingAllowed}
                   handleRemove={(val) => handleRemoveFilter("priority", val)}
                   values={value}
                 />
               )}
               {filterKey === "state" && states && (
                 <AppliedStateFilters
-                  editable={isEditingAllowed}
                   handleRemove={(val) => handleRemoveFilter("state", val)}
                   states={states}
                   values={value}
@@ -101,13 +88,11 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
               )}
               {filterKey === "project" && (
                 <AppliedProjectFilters
-                  editable={isEditingAllowed}
                   handleRemove={(val) => handleRemoveFilter("project", val)}
                   projects={projects}
                   values={value}
                 />
               )}
-              {isEditingAllowed && (
               <button
                 type="button"
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
@@ -115,12 +100,10 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
               >
                 <X size={12} strokeWidth={2} />
               </button>
-              )}
             </div>
           </div>
         );
       })}
-      {isEditingAllowed && (
       <button
         type="button"
         onClick={handleClearAllFilters}
@@ -129,7 +112,6 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
         Clear all
         <X size={12} strokeWidth={2} />
       </button>
-      )}
       </div>
   );
 });

web/components/issues/issue-layouts/filters/applied-filters/label.tsx

@@ -9,11 +9,10 @@ type Props = {
   handleRemove: (val: string) => void;
   labels: IIssueLabel[] | undefined;
   values: string[];
-  editable: boolean | undefined;
 };
 
 export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
-  const { handleRemove, labels, values, editable } = props;
+  const { handleRemove, labels, values } = props;
 
   return (
     <>
@@ -31,7 +30,6 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
               }}
             />
             <span className="normal-case">{labelDetails.name}</span>
-            {editable && (
             <button
               type="button"
               className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
@@ -39,7 +37,6 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
             >
               <X size={10} strokeWidth={2} />
             </button>
-            )}
           </div>
         );
       })}

web/components/issues/issue-layouts/filters/applied-filters/members.tsx

@@ -9,11 +9,10 @@ type Props = {
   handleRemove: (val: string) => void;
   members: IUserLite[] | undefined;
   values: string[];
-  editable: boolean | undefined;
 };
 
 export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
-  const { handleRemove, members, values, editable } = props;
+  const { handleRemove, members, values } = props;
 
   return (
     <>
@@ -26,7 +25,6 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
           <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
             <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} />
             <span className="normal-case">{memberDetails.display_name}</span>
-            {editable && (
             <button
               type="button"
               className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
@@ -34,7 +32,6 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
             >
               <X size={10} strokeWidth={2} />
             </button>
-            )}
           </div>
         );
       })}

web/components/issues/issue-layouts/filters/applied-filters/priority.tsx

@@ -9,11 +9,10 @@ import { TIssuePriorities } from "types";
 type Props = {
   handleRemove: (val: string) => void;
   values: string[];
-  editable: boolean | undefined;
 };
 
 export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
-  const { handleRemove, values, editable } = props;
+  const { handleRemove, values } = props;
 
   return (
     <>
@@ -21,7 +20,6 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
         <div key={priority} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
           <PriorityIcon priority={priority as TIssuePriorities} className={`h-3 w-3`} />
           {priority}
-          {editable && (
           <button
             type="button"
             className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
@@ -29,7 +27,6 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
           >
             <X size={10} strokeWidth={2} />
           </button>
-          )}
         </div>
       ))}
     </>

web/components/issues/issue-layouts/filters/applied-filters/project.tsx

@@ -10,11 +10,10 @@ type Props = {
   handleRemove: (val: string) => void;
   projects: IProject[] | undefined;
   values: string[];
-  editable: boolean | undefined;
 };
 
 export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
-  const { handleRemove, projects, values, editable } = props;
+  const { handleRemove, projects, values } = props;
 
   return (
     <>
@@ -35,7 +34,6 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
               </span>
             )}
             <span className="normal-case">{projectDetails.name}</span>
-            {editable && (
             <button
               type="button"
               className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
@@ -43,7 +41,6 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
             >
               <X size={10} strokeWidth={2} />
             </button>
-            )}
           </div>
         );
       })}

web/components/issues/issue-layouts/filters/applied-filters/state.tsx

@@ -10,11 +10,10 @@ type Props = {
   handleRemove: (val: string) => void;
   states: IState[];
   values: string[];
-  editable: boolean | undefined;
 };
 
 export const AppliedStateFilters: React.FC<Props> = observer((props) => {
-  const { handleRemove, states, values, editable } = props;
+  const { handleRemove, states, values } = props;
 
   return (
     <>
@@ -27,7 +26,6 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
           <div key={stateId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
             <StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" />
             {stateDetails.name}
-            {editable && (
             <button
               type="button"
               className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
@@ -35,7 +33,6 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
             >
               <X size={10} strokeWidth={2} />
             </button>
-            )}
           </div>
         );
       })}