[WEB-447] feat: projects archive.

apiserver/plane/app/views/project/base.py

@@ -372,7 +372,7 @@ def partial_update(self, request, slug, pk=None):
                 return Response(
                     {"error": "Archived projects cannot be updated"},
                     status=status.HTTP_400_BAD_REQUEST,
-                )  
+                )
 
             serializer = ProjectSerializer(
                 project,
@@ -433,11 +433,15 @@ class ProjectArchiveUnarchiveEndpoint(BaseAPIView):
     permission_classes = [
         ProjectBasePermission,
     ]
+
     def post(self, request, slug, project_id):
         project = Project.objects.get(pk=project_id, workspace__slug=slug)
         project.archived_at = timezone.now()
         project.save()
-        return Response(status=status.HTTP_204_NO_CONTENT) 
+        return Response(
+            {"archived_at": str(project.archived_at)},
+            status=status.HTTP_200_OK,
+        )
 
     def delete(self, request, slug, project_id):
         project = Project.objects.get(pk=project_id, workspace__slug=slug)

packages/types/src/project/project_filters.d.ts

@@ -9,9 +9,14 @@ export type TProjectOrderByOptions =
 
 export type TProjectDisplayFilters = {
   my_projects?: boolean;
+  archived_projects?: boolean;
   order_by?: TProjectOrderByOptions;
 };
 
+export type TProjectAppliedDisplayFilterKeys =
+  | "my_projects"
+  | "archived_projects";
+
 export type TProjectFilters = {
   access?: string[] | null;
   lead?: string[] | null;

packages/types/src/project/projects.d.ts

@@ -23,6 +23,7 @@ export type TProjectLogoProps = {
 
 export interface IProject {
   archive_in: number;
+  archived_at: Date | null;
   archived_issues: number;
   archived_sub_issues: number;
   close_in: number;

web/components/project/applied-filters/index.ts

@@ -1,4 +1,5 @@
 export * from "./access";
 export * from "./date";
 export * from "./members";
+export * from "./project-display-filters";
 export * from "./root";

web/components/project/applied-filters/project-display-filters.tsx

@@ -0,0 +1,39 @@
+import { observer } from "mobx-react-lite";
+// icons
+import { X } from "lucide-react";
+// types
+import { TProjectAppliedDisplayFilterKeys } from "@plane/types";
+// constants
+import { PROJECT_DISPLAY_FILTER_OPTIONS } from "@/constants/project";
+
+type Props = {
+  handleRemove: (key: TProjectAppliedDisplayFilterKeys) => void;
+  values: TProjectAppliedDisplayFilterKeys[];
+  editable: boolean | undefined;
+};
+
+export const AppliedProjectDisplayFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values, editable } = props;
+
+  return (
+    <>
+      {values.map((key) => {
+        const filterLabel = PROJECT_DISPLAY_FILTER_OPTIONS.find((s) => s.key === key)?.label;
+        return (
+          <div key={key} className="flex items-center gap-1 rounded p-1 text-xs bg-custom-background-80">
+            {filterLabel}
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemove(key)}
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});

web/components/project/applied-filters/root.tsx

@@ -1,17 +1,24 @@
 import { X } from "lucide-react";
-import { TProjectFilters } from "@plane/types";
-// components
-import { Tooltip } from "@plane/ui";
-import { AppliedAccessFilters, AppliedDateFilters, AppliedMembersFilters } from "@/components/project";
+// types
+import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
 // ui
+import { Tooltip } from "@plane/ui";
+// components
+import {
+  AppliedAccessFilters,
+  AppliedDateFilters,
+  AppliedMembersFilters,
+  AppliedProjectDisplayFilters,
+} from "@/components/project";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
-// types
 
 type Props = {
   appliedFilters: TProjectFilters;
+  appliedDisplayFilters: TProjectAppliedDisplayFilterKeys[];
   handleClearAllFilters: () => void;
   handleRemoveFilter: (key: keyof TProjectFilters, value: string | null) => void;
+  handleRemoveDisplayFilter: (key: TProjectAppliedDisplayFilterKeys) => void;
   alwaysAllowEditing?: boolean;
   filteredProjects: number;
   totalProjects: number;
@@ -23,21 +30,24 @@ const DATE_FILTERS = ["created_at"];
 export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
   const {
     appliedFilters,
+    appliedDisplayFilters,
     handleClearAllFilters,
     handleRemoveFilter,
+    handleRemoveDisplayFilter,
     alwaysAllowEditing,
     filteredProjects,
     totalProjects,
   } = props;
 
-  if (!appliedFilters) return null;
-  if (Object.keys(appliedFilters).length === 0) return null;
+  if (!appliedFilters && !appliedDisplayFilters) return null;
+  if (Object.keys(appliedFilters).length === 0 && appliedDisplayFilters.length === 0) return null;
 
   const isEditingAllowed = alwaysAllowEditing;
 
   return (
     <div className="flex items-start justify-between gap-1.5">
       <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
+        {/* Applied filters */}
         {Object.entries(appliedFilters).map(([key, value]) => {
           const filterKey = key as keyof TProjectFilters;
 
@@ -85,6 +95,22 @@ export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
             </div>
           );
         })}
+        {/* Applied display filters */}
+        {appliedDisplayFilters.length > 0 && (
+          <div
+            key="project_display_filters"
+            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+          >
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="text-xs text-custom-text-300">Projects</span>
+              <AppliedProjectDisplayFilters
+                editable={isEditingAllowed}
+                values={appliedDisplayFilters}
+                handleRemove={(key) => handleRemoveDisplayFilter(key)}
+              />
+            </div>
+          </div>
+        )}
         {isEditingAllowed && (
           <button
             type="button"

web/components/project/card-list.tsx

@@ -16,10 +16,10 @@ export const ProjectCardList = observer(() => {
   // store hooks
   const { commandPalette: commandPaletteStore } = useApplication();
   const { setTrackElement } = useEventTracker();
-  const { workspaceProjectIds, filteredProjectIds, getProjectById } = useProject();
+  const { totalProjectIds, filteredProjectIds, getProjectById } = useProject();
   const { searchQuery } = useProjectFilter();
 
-  if (workspaceProjectIds?.length === 0)
+  if (totalProjectIds?.length === 0)
     return (
       <EmptyState
         type={EmptyStateType.WORKSPACE_PROJECTS}