From a3decb543f9b9241a58976cbc6599790a3368ec6 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 15 Aug 2024 14:56:12 +0200
Subject: [PATCH] feat: Show project archived message (#7899)

---
 .../project/NewProjectCard/ProjectArchiveCard.tsx    |  1 +
 .../Project/ArchiveProject/ProjectArchived.tsx       | 12 ++++++++++++
 frontend/src/component/project/Project/Project.tsx   |  7 +++++++
 frontend/src/interfaces/project.ts                   |  1 +
 4 files changed, 21 insertions(+)
 create mode 100644 frontend/src/component/project/Project/ArchiveProject/ProjectArchived.tsx

diff --git a/frontend/src/component/project/NewProjectCard/ProjectArchiveCard.tsx b/frontend/src/component/project/NewProjectCard/ProjectArchiveCard.tsx
index 591e099098..8dd8c879b1 100644
--- a/frontend/src/component/project/NewProjectCard/ProjectArchiveCard.tsx
+++ b/frontend/src/component/project/NewProjectCard/ProjectArchiveCard.tsx
@@ -85,6 +85,7 @@ export const ProjectArchiveCard: FC<ProjectArchiveCardProps> = ({
                                     </StyledParagraphInfo>
                                     <p data-loading>
                                         <TimeAgo
+                                            minPeriod={60}
                                             date={
                                                 new Date(archivedAt as string)
                                             }
diff --git a/frontend/src/component/project/Project/ArchiveProject/ProjectArchived.tsx b/frontend/src/component/project/Project/ArchiveProject/ProjectArchived.tsx
new file mode 100644
index 0000000000..4f3fd9d9d3
--- /dev/null
+++ b/frontend/src/component/project/Project/ArchiveProject/ProjectArchived.tsx
@@ -0,0 +1,12 @@
+import { Link } from 'react-router-dom';
+import type { FC } from 'react';
+
+export const ProjectArchived: FC<{ name: string }> = ({ name }) => {
+    return (
+        <p>
+            The project <strong>{name}</strong> has been archived. You can find
+            it on the{' '}
+            <Link to={`/projects-archive`}>projects archive page</Link>.
+        </p>
+    );
+};
diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index b4daa05083..bfaf798cbe 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -43,6 +43,8 @@ import { ChangeRequestPlausibleProvider } from 'component/changeRequest/ChangeRe
 import { ProjectApplications } from '../ProjectApplications/ProjectApplications';
 import { ProjectInsights } from './ProjectInsights/ProjectInsights';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
+import { ProjectArchived } from './ArchiveProject/ProjectArchived';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
     position: 'absolute',
@@ -75,6 +77,7 @@ export const Project = () => {
     const basePath = `/projects/${projectId}`;
     const projectName = project?.name || projectId;
     const { favorite, unfavorite } = useFavoriteProjectsApi();
+    const archiveProjectsEnabled = useUiFlag('archiveProjects');
 
     const [showDelDialog, setShowDelDialog] = useState(false);
 
@@ -189,6 +192,10 @@ export const Project = () => {
         </Box>
     );
 
+    if (archiveProjectsEnabled && Boolean(project.archivedAt)) {
+        return <ProjectArchived name={project.name} />;
+    }
+
     return (
         <div ref={ref}>
             <StyledHeader>
diff --git a/frontend/src/interfaces/project.ts b/frontend/src/interfaces/project.ts
index 4f55839d70..d2b0e69faa 100644
--- a/frontend/src/interfaces/project.ts
+++ b/frontend/src/interfaces/project.ts
@@ -59,6 +59,7 @@ export interface IProjectOverview {
     defaultStickiness: string;
     featureLimit?: number;
     featureNaming?: FeatureNamingType;
+    archivedAt?: Date;
 }
 
 export interface IProjectHealthReport extends IProject {