feat: show sub-issue on list-view (#1665)

apps/app/components/core/filters/issues-view-filter.tsx

@@ -65,6 +65,8 @@ export const IssuesFilterView: React.FC = () => {
     orderBy,
     setOrderBy,
     showEmptyGroups,
+    showSubIssues,
+    setShowSubIssues,
     setShowEmptyGroups,
     filters,
     setFilters,
@@ -246,6 +248,13 @@ export const IssuesFilterView: React.FC = () => {
 
                     {issueView !== "calendar" && issueView !== "spreadsheet" && (
                       <>
+                        <div className="flex items-center justify-between">
+                          <h4 className="text-custom-text-200">Show sub-issues</h4>
+                          <ToggleSwitch
+                            value={showSubIssues}
+                            onChange={() => setShowSubIssues(!showSubIssues)}
+                          />
+                        </div>
                         <div className="flex items-center justify-between">
                           <h4 className="text-custom-text-200">Show empty states</h4>
                           <ToggleSwitch

apps/app/constants/fetch-keys.ts

@@ -12,7 +12,6 @@ const paramsToKey = (params: any) => {
   const type = params.type ? params.type.toUpperCase() : "NULL";
   const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL";
   const orderBy = params.order_by ? params.order_by.toUpperCase() : "NULL";
-  const subIssue = sub_issue ? sub_issue.toUpperCase() : "NULL";
 
   // sorting each keys in ascending order
   stateKey = stateKey.sort().join("_");
@@ -21,7 +20,7 @@ const paramsToKey = (params: any) => {
   createdByKey = createdByKey.sort().join("_");
   labelsKey = labelsKey.sort().join("_");
 
-  return `${stateKey}_${priorityKey}_${assigneesKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${targetDateKey}_${subIssue}`;
+  return `${stateKey}_${priorityKey}_${assigneesKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${targetDateKey}_${sub_issue}`;
 };
 
 const inboxParamsToKey = (params: any) => {

apps/app/contexts/issue-view.context.tsx

@@ -36,6 +36,7 @@ type IssueViewProps = {
   groupByProperty: TIssueGroupByOptions;
   orderBy: TIssueOrderByOptions;
   showEmptyGroups: boolean;
+  showSubIssues: boolean;
   calendarDateRange: string;
   filters: IIssueFilterOptions;
 };
@@ -49,7 +50,8 @@ type ReducerActionType = {
     | "SET_CALENDAR_DATE_RANGE"
     | "SET_FILTERS"
     | "SET_GROUP_BY_PROPERTY"
-    | "RESET_TO_DEFAULT";
+    | "RESET_TO_DEFAULT"
+    | "SET_SHOW_SUB_ISSUES";
   payload?: Partial<IssueViewProps>;
 };
 
@@ -57,6 +59,7 @@ type ContextType = IssueViewProps & {
   setGroupByProperty: (property: TIssueGroupByOptions) => void;
   setOrderBy: (property: TIssueOrderByOptions) => void;
   setShowEmptyGroups: (property: boolean) => void;
+  setShowSubIssues: (value: boolean) => void;
   setCalendarDateRange: (property: string) => void;
   setFilters: (filters: Partial<IIssueFilterOptions>, saveToServer?: boolean) => void;
   resetFilterToDefault: () => void;
@@ -69,6 +72,7 @@ type StateType = {
   groupByProperty: TIssueGroupByOptions;
   orderBy: TIssueOrderByOptions;
   showEmptyGroups: boolean;
+  showSubIssues: boolean;
   calendarDateRange: string;
   filters: IIssueFilterOptions;
 };
@@ -79,6 +83,7 @@ export const initialState: StateType = {
   groupByProperty: null,
   orderBy: "-created_at",
   showEmptyGroups: true,
+  showSubIssues: false,
   calendarDateRange: "",
   filters: {
     type: null,
@@ -152,6 +157,18 @@ export const reducer: ReducerFunctionType = (state, action) => {
       };
     }
 
+    case "SET_SHOW_SUB_ISSUES": {
+      const newState = {
+        ...state,
+        showSubIssues: payload?.showSubIssues || false,
+      };
+
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
     case "SET_CALENDAR_DATE_RANGE": {
       const newState = {
         ...state,
@@ -466,6 +483,37 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
     [projectId, workspaceSlug, state, mutateMyViewProps]
   );
 
+  const setShowSubIssues = useCallback(
+    (property: boolean) => {
+      dispatch({
+        type: "SET_SHOW_SUB_ISSUES",
+        payload: {
+          showSubIssues: property,
+        },
+      });
+
+      if (!workspaceSlug || !projectId) return;
+
+      mutateMyViewProps((prevData) => {
+        if (!prevData) return prevData;
+
+        return {
+          ...prevData,
+          view_props: {
+            ...state,
+            showSubIssues: property,
+          },
+        };
+      }, false);
+
+      saveDataToServer(workspaceSlug as string, projectId as string, {
+        ...state,
+        showSubIssues: property,
+      });
+    },
+    [projectId, workspaceSlug, state, mutateMyViewProps]
+  );
+
   const setCalendarDateRange = useCallback(
     (value: string) => {
       dispatch({
@@ -683,10 +731,12 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
         setGroupByProperty,
         orderBy: state.orderBy,
         showEmptyGroups: state.showEmptyGroups,
+        showSubIssues: state.showSubIssues,
         calendarDateRange: state.calendarDateRange,
         setCalendarDateRange,
         setOrderBy,
         setShowEmptyGroups,
+        setShowSubIssues,
         filters: state.filters,
         setFilters,
         resetFilterToDefault: resetToDefault,

apps/app/hooks/use-issues-view.tsx

@@ -33,7 +33,9 @@ const useIssuesView = () => {
     orderBy,
     setOrderBy,
     showEmptyGroups,
+    showSubIssues,
     setShowEmptyGroups,
+    setShowSubIssues,
     calendarDateRange,
     setCalendarDateRange,
     filters,
@@ -63,6 +65,7 @@ const useIssuesView = () => {
       : undefined,
     created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
     target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
+    sub_issue: showSubIssues,
   };
 
   const { data: projectIssues } = useSWR(
@@ -195,7 +198,9 @@ const useIssuesView = () => {
     orderBy,
     setOrderBy,
     showEmptyGroups: isArchivedIssues ? false : showEmptyGroups,
+    showSubIssues,
     setShowEmptyGroups,
+    setShowSubIssues,
     calendarDateRange,
     setCalendarDateRange,
     filters,