chore: issue filters refactor (#6742)

* chore: issue filters refactor

* chore: update helper funciton implementation

* chore: removed redundant components

web/ce/components/issue-types/index.ts

@@ -1 +0,0 @@
-export * from "./values";

web/ce/components/issue-types/values/index.ts

@@ -1 +0,0 @@
-export * from "./update";

web/ce/components/issue-types/values/update.tsx

@@ -1,12 +0,0 @@
-import { TIssueServiceType } from "@plane/types";
-
-export type TIssueAdditionalPropertyValuesUpdateProps = {
-  issueId: string;
-  issueTypeId: string;
-  projectId: string;
-  workspaceSlug: string;
-  isDisabled: boolean;
-  issueServiceType?: TIssueServiceType;
-};
-
-export const IssueAdditionalPropertyValuesUpdate: React.FC<TIssueAdditionalPropertyValuesUpdateProps> = () => <></>;

web/ce/components/issues/issue-details/additional-properties.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from "react";
+// plane imports
+
+export type TWorkItemAdditionalSidebarProperties = {
+  workItemId: string;
+  workItemTypeId: string | null;
+  projectId: string;
+  workspaceSlug: string;
+  isEditable: boolean;
+  isPeekView?: boolean;
+};
+
+export const WorkItemAdditionalSidebarProperties: FC<TWorkItemAdditionalSidebarProperties> = () => <></>;

web/ce/helpers/issue-filter.helper.ts

@@ -1,5 +1,7 @@
 // types
 import { IIssueDisplayProperties } from "@plane/types";
+// lib
+import { store } from "@/lib/store-context";
 
 export type TShouldRenderDisplayProperty = {
   workspaceSlug: string;
@@ -16,3 +18,13 @@ export const shouldRenderDisplayProperty = (props: TShouldRenderDisplayProperty)
       return true;
   }
 };
+
+export const shouldRenderColumn = (key: keyof IIssueDisplayProperties): boolean => {
+  const isEstimateEnabled: boolean = store.projectRoot.project.currentProjectDetails?.estimate !== null;
+  switch (key) {
+    case "estimate":
+      return isEstimateEnabled;
+    default:
+      return true;
+  }
+};

web/ce/store/issue/helpers/base-issue.store.ts

@@ -0,0 +1,4 @@
+import { TIssue } from "@plane/types";
+import { getIssueIds } from "@/store/issue/helpers/base-issues-utils";
+
+export const workItemSortWithOrderByExtended = (array: TIssue[], key?: string) => getIssueIds(array);

web/core/components/issues/issue-detail/root.tsx

@@ -371,7 +371,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             />
           </div>
           <div
-            className="fixed right-0 z-[5] h-full w-full min-w-[300px] overflow-hidden border-l border-custom-border-200 bg-custom-sidebar-background-100 py-5 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
+            className="fixed right-0 z-[5] h-full w-full min-w-[300px] border-l border-custom-border-200 bg-custom-sidebar-background-100 py-5 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
             style={issueDetailSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
           >
             <IssueDetailsSidebar

web/core/components/issues/issue-detail/sidebar.tsx

@@ -24,9 +24,9 @@ import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
 // hooks
 import { useProjectEstimates, useIssueDetail, useProject, useProjectState, useMember } from "@/hooks/store";
 // plane web components
-import { IssueAdditionalPropertyValuesUpdate } from "@/plane-web/components/issue-types/values";
 import { IssueParentSelectRoot, IssueWorklogProperty } from "@/plane-web/components/issues";
 // components
+import { WorkItemAdditionalSidebarProperties } from "@/plane-web/components/issues/issue-details/additional-properties";
 import type { TIssueOperations } from "./root";
 
 type Props = {
@@ -293,15 +293,14 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               disabled={!isEditable}
             />
 
-            {issue.type_id && (
+            <WorkItemAdditionalSidebarProperties
-              <IssueAdditionalPropertyValuesUpdate
+              workItemId={issue.id}
-                issueId={issueId}
+              workItemTypeId={issue.type_id}
-                issueTypeId={issue.type_id}
+              projectId={projectId}
-                projectId={projectId}
+              workspaceSlug={workspaceSlug}
-                workspaceSlug={workspaceSlug}
+              isEditable={isEditable}
-                isDisabled={!isEditable}
+              isPeekView
-              />
+            />
-            )}
           </div>
         </div>
       </div>

web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx

@@ -7,6 +7,7 @@ import { IIssueDisplayProperties, TIssue } from "@plane/types";
 import { useEventTracker } from "@/hooks/store";
 // components
 import { SPREADSHEET_COLUMNS } from "@/plane-web/components/issues/issue-layouts/utils";
+import { shouldRenderColumn } from "@/plane-web/helpers/issue-filter.helper";
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
 // utils
 
@@ -20,13 +21,13 @@ type Props = {
 };
 
 export const IssueColumn = observer((props: Props) => {
-  const { displayProperties, issueDetail, disableUserActions, property, updateIssue, isEstimateEnabled } = props;
+  const { displayProperties, issueDetail, disableUserActions, property, updateIssue } = props;
   // router
   const pathname = usePathname();
   const tableCellRef = useRef<HTMLTableCellElement | null>(null);
   const { captureIssueEvent } = useEventTracker();
 
-  const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
+  const shouldRenderProperty = shouldRenderColumn(property);
 
   const Column = SPREADSHEET_COLUMNS[property];
 

web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx

@@ -3,6 +3,7 @@ import { useRef } from "react";
 import { observer } from "mobx-react";
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 //components
+import { shouldRenderColumn } from "@/plane-web/helpers/issue-filter.helper";
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
 import { HeaderColumn } from "./columns/header-column";
 
@@ -15,19 +16,12 @@ interface Props {
   isEpic?: boolean;
 }
 export const SpreadsheetHeaderColumn = observer((props: Props) => {
-  const {
+  const { displayProperties, displayFilters, property, handleDisplayFilterUpdate, isEpic = false } = props;
-    displayProperties,
-    displayFilters,
-    property,
-    isEstimateEnabled,
-    handleDisplayFilterUpdate,
-    isEpic = false,
-  } = props;
 
   //hooks
   const tableHeaderCellRef = useRef<HTMLTableCellElement | null>(null);
 
-  const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
+  const shouldRenderProperty = shouldRenderColumn(property);
 
   return (
     <WithDisplayPropertiesHOC

web/core/components/issues/peek-overview/properties.tsx

@@ -23,8 +23,8 @@ import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper"
 import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
 import { useIssueDetail, useMember, useProject, useProjectState } from "@/hooks/store";
 // plane web components
-import { IssueAdditionalPropertyValuesUpdate } from "@/plane-web/components/issue-types/values";
 import { IssueParentSelectRoot, IssueWorklogProperty } from "@/plane-web/components/issues";
+import { WorkItemAdditionalSidebarProperties } from "@/plane-web/components/issues/issue-details/additional-properties";
 
 interface IPeekOverviewProperties {
   workspaceSlug: string;
@@ -291,15 +291,14 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
           disabled={disabled}
         />
 
-        {issue.type_id && (
+        <WorkItemAdditionalSidebarProperties
-          <IssueAdditionalPropertyValuesUpdate
+          workItemId={issue.id}
-            issueId={issueId}
+          workItemTypeId={issue.type_id}
-            issueTypeId={issue.type_id}
+          projectId={projectId}
-            projectId={projectId}
+          workspaceSlug={workspaceSlug}
-            workspaceSlug={workspaceSlug}
+          isEditable={!disabled}
-            isDisabled={disabled}
+          isPeekView
-          />
+        />
-        )}
       </div>
     </div>
   );

web/core/store/issue/helpers/base-issues.store.ts

@@ -37,6 +37,7 @@ import { convertToISODateString } from "@/helpers/date-time.helper";
 // local-db
 import { SPECIAL_ORDER_BY } from "@/local-db/utils/query-constructor";
 import { updatePersistentLayer } from "@/local-db/utils/utils";
+import { workItemSortWithOrderByExtended } from "@/plane-web/store/issue/helpers/base-issue.store";
 // services
 import { CycleService } from "@/services/cycle.service";
 import { IssueArchiveService, IssueDraftService, IssueService } from "@/services/issue";
@@ -1991,7 +1992,7 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
         );
 
       default:
-        return getIssueIds(array);
+        return workItemSortWithOrderByExtended(array, key);
     }
   };
 

web/ee/components/issue-types/index.ts

@@ -1 +0,0 @@
-export * from "./values";

web/ee/components/issue-types/values/index.ts

@@ -1 +0,0 @@
-export * from "./update";

web/ee/components/issue-types/values/update.tsx

@@ -1 +0,0 @@
-export * from "ce/components/issue-types/values/update";

web/ee/components/issues/issue-details/additional-properties.tsx

@@ -0,0 +1 @@
+export * from "ce/components/issues/issue-details/additional-properties";

web/ee/store/issue/helpers/base-issue.store.ts

@@ -0,0 +1 @@
+export * from "ce/store/issue/helpers/base-issue.store";